diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/webhookFieldComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/webhookFieldComponent/index.tsx index 1cfc592db..a30620059 100644 --- a/src/frontend/src/components/core/parameterRenderComponent/components/webhookFieldComponent/index.tsx +++ b/src/frontend/src/components/core/parameterRenderComponent/components/webhookFieldComponent/index.tsx @@ -1,7 +1,8 @@ import { AuthContext } from "@/contexts/authContext"; import { useGetBuildsMutation } from "@/controllers/API/queries/_builds/use-get-builds-polling-mutation"; import SecretKeyModalButton from "@/customization/components/custom-secret-key-modal-button"; -import useFlowStore from "@/stores/flowStore"; +import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags"; +import { getModalPropsApiKey } from "@/customization/utils/get-modal-props"; import { useContext, useEffect, useRef, useState } from "react"; import { InputProps, TextAreaComponentType } from "../../types"; import CopyFieldAreaComponent from "../copyFieldAreaComponent"; @@ -19,14 +20,21 @@ export default function WebhookFieldComponent({ const [userId, setUserId] = useState(""); const { mutate: getBuildsMutation } = useGetBuildsMutation(); const hasInitialized = useRef(false); + const modalProps = getModalPropsApiKey(); const isBackendUrl = nodeInformationMetadata?.variableName === "endpoint"; const isCurlWebhook = nodeInformationMetadata?.variableName === "curl"; const isAuth = nodeInformationMetadata?.isAuth; - const showGenerateToken = isBackendUrl && !editNode && !isAuth; + const showGenerateToken = + (isBackendUrl && !editNode && !isAuth) || + (ENABLE_DATASTAX_LANGFLOW && !editNode); useEffect(() => { - if (!editNode && isBackendUrl && !hasInitialized.current) { + const getBuilds = + (!editNode && isBackendUrl && !hasInitialized.current) || + (ENABLE_DATASTAX_LANGFLOW && !editNode); + + if (getBuilds) { hasInitialized.current = true; getBuildsMutation({ flowId: nodeInformationMetadata?.flowId!, @@ -69,7 +77,7 @@ export default function WebhookFieldComponent({ {showGenerateToken && (
- +
)} diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index 8ac327159..eb0f2fa3e 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -1062,3 +1062,6 @@ export const OPENAI_VOICES = [ { name: "shimmer", value: "shimmer" }, { name: "verse", value: "verse" }, ]; + +export const DEFAULT_POLLING_INTERVAL = 5000; +export const DEFAULT_TIMEOUT = 30000; diff --git a/src/frontend/src/controllers/API/queries/config/use-get-config.ts b/src/frontend/src/controllers/API/queries/config/use-get-config.ts index 3ef9cc854..f6a911921 100644 --- a/src/frontend/src/controllers/API/queries/config/use-get-config.ts +++ b/src/frontend/src/controllers/API/queries/config/use-get-config.ts @@ -1,3 +1,7 @@ +import { + DEFAULT_POLLING_INTERVAL, + DEFAULT_TIMEOUT, +} from "@/constants/constants"; import { EventDeliveryType } from "@/constants/enums"; import useFlowsManagerStore from "@/stores/flowsManagerStore"; import { useUtilityStore } from "@/stores/utilityStore"; @@ -44,7 +48,7 @@ export const useGetConfig: useQueryFunctionType = ( if (data) { const timeoutInMilliseconds = data.frontend_timeout ? data.frontend_timeout * 1000 - : 30000; + : DEFAULT_TIMEOUT; axios.defaults.baseURL = ""; axios.defaults.timeout = timeoutInMilliseconds; setAutoSaving(data.auto_saving); @@ -52,7 +56,9 @@ export const useGetConfig: useQueryFunctionType = ( setHealthCheckMaxRetries(data.health_check_max_retries); setMaxFileSizeUpload(data.max_file_size_upload); setFeatureFlags(data.feature_flags); - setWebhookPollingInterval(data.webhook_polling_interval); + setWebhookPollingInterval( + data.webhook_polling_interval ?? DEFAULT_POLLING_INTERVAL, + ); } return data; }; diff --git a/src/frontend/src/customization/components/custom-secret-key-modal-button.tsx b/src/frontend/src/customization/components/custom-secret-key-modal-button.tsx index f824e70a2..b3041c54c 100644 --- a/src/frontend/src/customization/components/custom-secret-key-modal-button.tsx +++ b/src/frontend/src/customization/components/custom-secret-key-modal-button.tsx @@ -2,11 +2,11 @@ import { getModalPropsApiKey } from "@/pages/SettingsPage/pages/ApiKeysPage/help export const SecretKeyModalButton = ({ userId, + modalProps, }: { userId: string; + modalProps; }): JSX.Element => { - const modalProps = getModalPropsApiKey(); - return <>; }; diff --git a/src/frontend/src/customization/hooks/use-generate-token.ts b/src/frontend/src/customization/hooks/use-generate-token.ts new file mode 100644 index 000000000..7f7eb4b9b --- /dev/null +++ b/src/frontend/src/customization/hooks/use-generate-token.ts @@ -0,0 +1,7 @@ +export const useGenerateToken = (): any => { + const tokenFunction = (() => { + return "token"; + }) as any; + tokenFunction.token = "token"; + return tokenFunction; +}; diff --git a/src/frontend/src/modals/secretKeyModal/index.tsx b/src/frontend/src/modals/secretKeyModal/index.tsx index 316683b0a..daa5a8b48 100644 --- a/src/frontend/src/modals/secretKeyModal/index.tsx +++ b/src/frontend/src/modals/secretKeyModal/index.tsx @@ -1,7 +1,6 @@ -import * as Form from "@radix-ui/react-form"; -import { Label } from "@radix-ui/react-form"; +import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags"; +import { useGenerateToken } from "@/customization/hooks/use-generate-token"; import { useEffect, useRef, useState } from "react"; -import { Input } from "../../components/ui/input"; import { COPIED_NOTICE_ALERT } from "../../constants/alerts_constants"; import { createApiKey } from "../../controllers/API"; import useAlertStore from "../../stores/alertStore"; @@ -11,9 +10,21 @@ import { ContentRenderKey } from "./components/content-render"; import { FormKeyRender } from "./components/form-key-render"; import { HeaderRender } from "./components/header-render"; -interface ModalProps { - generatedKeyMessage?: React.ReactNode; +// Add this interface for the modal props +interface ModalConfigProps { + title?: string; description?: React.ReactNode; + inputLabel?: React.ReactNode; + inputPlaceholder?: string; + buttonText?: string; + generatedKeyMessage?: React.ReactNode; + showIcon?: boolean; +} + +interface SecretKeyModalProps { + userId?: string; + size?: string; + modalProps?: ModalConfigProps; } export default function SecretKeyModal({ @@ -21,7 +32,7 @@ export default function SecretKeyModal({ data, onCloseModal, modalProps, -}: ApiKeyType & { modalProps?: ModalProps }) { +}: ApiKeyType & { modalProps: SecretKeyModalProps }) { const [open, setOpen] = useState(false); const [apiKeyName, setApiKeyName] = useState(data?.apikeyname ?? ""); const [apiKeyValue, setApiKeyValue] = useState(""); @@ -29,6 +40,8 @@ export default function SecretKeyModal({ const [textCopied, setTextCopied] = useState(true); const setSuccessData = useAlertStore((state) => state.setSuccessData); const inputRef = useRef(null); + const generateToken = useGenerateToken(); + const modalConfigProps = modalProps?.modalProps ?? modalProps; useEffect(() => { if (open) { @@ -68,14 +81,33 @@ export default function SecretKeyModal({ .catch((err) => {}); } - function handleSubmitForm() { + async function handleSubmitForm() { + if (apiKeyValue) setOpen(false); + if (ENABLE_DATASTAX_LANGFLOW) { + handleDataStaxKey(); + } else { + handleOSSKey(); + } + } + + const handleDataStaxKey = async () => { + try { + const { token } = await generateToken(); + setApiKeyValue(token); + setRenderKey(true); + } catch (error) { + console.error("Error generating token:", error); + } + }; + + const handleOSSKey = () => { if (!renderKey) { setRenderKey(true); handleAddNewKey(); } else { setOpen(false); } - } + }; return ( {modalProps?.generatedKeyMessage} + <>{modalConfigProps?.generatedKeyMessage} ) : ( - <>{modalProps?.description} + <>{modalConfigProps?.description} ) } > {renderKey ? ( + ) : ENABLE_DATASTAX_LANGFLOW ? ( + <> ) : ( );