Merge pull request #2386 from Agenta-AI/revert-2380-checkpoint-2-vaul…

…t-webui-and-api-integration

Revert "(frontend)[AGE 1473]: Vault WebUI <> API Integration"

agenta-web/src/components/pages/app-management/index.tsx

@@ -8,7 +8,7 @@ import {createUseStyles} from "react-jss"
 import {useAppsData} from "@/contexts/app.context"
 import {useProfileData} from "@/contexts/profile.context"
 import {usePostHogAg} from "@/lib/helpers/analytics/hooks/usePostHogAg"
-import {type LlmProvider} from "@/lib/helpers/llmProviders"
+import {LlmProvider, getAllProviderLlmKeys} from "@/lib/helpers/llmProviders"
 import {dynamicComponent, dynamicContext} from "@/lib/helpers/dynamic"
 import dayjs from "dayjs"
 import {useAppTheme} from "@/components/Layout/ThemeContextProvider"
@@ -17,7 +17,6 @@ import GetStartedSection from "./components/GetStartedSection"
 import ApplicationManagementSection from "./components/ApplicationManagementSection"
 import ResultComponent from "@/components/ResultComponent/ResultComponent"
 import {useProjectData} from "@/contexts/project.context"
-import {useVaultSecret} from "@/hooks/useVaultSecret"
 
 const CreateAppStatusModal: any = dynamicComponent(
     "pages/app-management/modals/CreateAppStatusModal",
@@ -84,7 +83,6 @@ const AppManagement: React.FC = () => {
         details: undefined,
         appId: undefined,
     })
-    const {secrets} = useVaultSecret()
 
     const {project} = useProjectData()
     const [useOrgData, setUseOrgData] = useState<Function>(() => () => "")
@@ -120,7 +118,7 @@ const AppManagement: React.FC = () => {
         setStatusModalOpen(true)
 
         // attempt to create and start the template, notify user of the progress
-        const apiKeys = secrets
+        const apiKeys = getAllProviderLlmKeys()
         await createAndStartTemplate({
             appName: newApp,
             templateId: template_id,

agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx

@@ -14,7 +14,6 @@ import SelectTestsetSection from "./SelectTestsetSection"
 import SelectVariantSection from "./SelectVariantSection"
 import SelectEvaluatorSection from "./SelectEvaluatorSection"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
-import {useVaultSecret} from "@/hooks/useVaultSecret"
 
 const AdvancedSettingsPopover: any = dynamicComponent(
     "pages/evaluations/NewEvaluation/AdvancedSettingsPopover",
@@ -74,7 +73,7 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
     const [selectedTestsetId, setSelectedTestsetId] = useState("")
     const [selectedVariantIds, setSelectedVariantIds] = useState<string[]>([])
     const [selectedEvalConfigs, setSelectedEvalConfigs] = useState<string[]>([])
-    const {secrets} = useVaultSecret()
+
     const [activePanel, setActivePanel] = useState<string | null>("testsetPanel")
     const handlePanelChange = (key: string | string[]) => {
         setActivePanel((prevKey) => (prevKey === key ? null : (key as string)))
@@ -164,7 +163,7 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
             variant_ids: selectedVariantIds,
             evaluators_configs: selectedEvalConfigs,
             rate_limit: rateLimitValues,
-            lm_providers_keys: apiKeyObject(secrets),
+            lm_providers_keys: apiKeyObject(),
             correct_answer_column: correctAnswerColumn,
         })
             .then(onSuccess)

agenta-web/src/components/pages/settings/Secrets/Secrets.tsx

@@ -1,25 +1,19 @@
-import {useVaultSecret} from "@/hooks/useVaultSecret"
-import {type LlmProvider} from "@/lib/helpers/llmProviders"
+import {
+    getLlmProviderKey,
+    saveLlmProviderKey,
+    removeSingleLlmProviderKey,
+    getAllProviderLlmKeys,
+    LlmProvider,
+} from "@/lib/helpers/llmProviders"
 import {Button, Input, Space, Typography, message} from "antd"
-import {useEffect, useState} from "react"
+import {useState} from "react"
 
 const {Title, Text} = Typography
 
 export default function Secrets() {
-    const {secrets, handleModifyVaultSecret, handleDeleteVaultSecret} = useVaultSecret()
-    const [llmProviderKeys, setLlmProviderKeys] = useState<LlmProvider[]>([])
-    const [loadingSecrets, setLoadingSecrets] = useState<Record<string, boolean>>({})
+    const [llmProviderKeys, setLlmProviderKeys] = useState(getAllProviderLlmKeys())
     const [messageAPI, contextHolder] = message.useMessage()
 
-    useEffect(() => {
-        setLlmProviderKeys(secrets)
-    }, [secrets])
-
-    const setSecretLoading = (id: string | undefined, isLoading: boolean) => {
-        if (!id) return
-        setLoadingSecrets((prev) => ({...prev, [id]: isLoading}))
-    }
-
     return (
         <div data-cy="secrets">
             {contextHolder}
@@ -36,69 +30,47 @@ export default function Secrets() {
                 <Title level={5}>Available Providers</Title>
 
                 <div>
-                    {llmProviderKeys.map(
-                        ({name, title, key, id: secretId}: LlmProvider, i: number) => (
-                            <Space direction="horizontal" key={i} className="mb-2 ml-2">
-                                <Input.Password
-                                    data-cy="openai-api-input"
-                                    value={key}
-                                    onChange={(e) => {
-                                        const newLlmProviderKeys = [...llmProviderKeys]
-                                        newLlmProviderKeys[i].key = e.target.value
-                                        setLlmProviderKeys(newLlmProviderKeys)
-                                    }}
-                                    addonBefore={`${title}`}
-                                    visibilityToggle={false}
-                                    className={"w-[420px]"}
-                                />
-                                <Button
-                                    data-cy="openai-api-save"
-                                    type="primary"
-                                    disabled={!key}
-                                    loading={loadingSecrets[secretId || ""] === true}
-                                    onClick={async () => {
-                                        try {
-                                            setSecretLoading(secretId, true)
-                                            await handleModifyVaultSecret({
-                                                name,
-                                                title,
-                                                key,
-                                                id: secretId,
-                                            })
-                                            messageAPI.success("The secret is saved")
-                                        } finally {
-                                            setSecretLoading(secretId, false)
-                                        }
-                                    }}
-                                >
-                                    Save
-                                </Button>
-                                <Button
-                                    disabled={!Boolean(key)}
-                                    loading={loadingSecrets[secretId || ""] === true}
-                                    onClick={async () => {
-                                        try {
-                                            setSecretLoading(secretId, true)
-                                            await handleDeleteVaultSecret({
-                                                name,
-                                                id: secretId,
-                                                title,
-                                                key,
-                                            })
-                                            const newLlmProviderKeys = [...llmProviderKeys]
-                                            newLlmProviderKeys[i].key = ""
-                                            setLlmProviderKeys(newLlmProviderKeys)
-                                            messageAPI.warning("The secret is deleted")
-                                        } finally {
-                                            setSecretLoading(secretId, false)
-                                        }
-                                    }}
-                                >
-                                    Delete
-                                </Button>
-                            </Space>
-                        ),
-                    )}
+                    {llmProviderKeys.map(({title, key}: LlmProvider, i: number) => (
+                        <Space direction="horizontal" key={i} className="mb-2 ml-2">
+                            <Input.Password
+                                data-cy="openai-api-input"
+                                value={key}
+                                onChange={(e) => {
+                                    const newLlmProviderKeys = [...llmProviderKeys]
+                                    newLlmProviderKeys[i].key = e.target.value
+                                    setLlmProviderKeys(newLlmProviderKeys)
+                                }}
+                                addonBefore={`${title}`}
+                                visibilityToggle={false}
+                                className={"w-[420px]"}
+                            />
+                            <Button
+                                data-cy="openai-api-save"
+                                type="primary"
+                                disabled={key === getLlmProviderKey(title) || !key}
+                                onClick={() => {
+                                    saveLlmProviderKey(title, key)
+                                    messageAPI.success("The secret is saved")
+                                }}
+                            >
+                                Save
+                            </Button>
+                            <Button
+                                disabled={!Boolean(key)}
+                                onClick={() => {
+                                    removeSingleLlmProviderKey(title)
+
+                                    const newLlmProviderKeys = [...llmProviderKeys]
+                                    newLlmProviderKeys[i].key = ""
+                                    setLlmProviderKeys(newLlmProviderKeys)
+
+                                    messageAPI.warning("The secret is deleted")
+                                }}
+                            >
+                                Delete
+                            </Button>
+                        </Space>
+                    ))}
                 </div>
             </div>
         </div>

agenta-web/src/lib/helpers/dynamic.ts

@@ -30,11 +30,3 @@ export async function dynamicService(path: string, fallback?: any) {
         return fallback
     }
 }
-
-export async function dynamicLib(path: string, fallback?: any) {
-    try {
-        return await import(`@/lib/${path}`)
-    } catch (error) {
-        return fallback
-    }
-}

agenta-web/src/lib/helpers/llmProviders.ts

@@ -1,12 +1,12 @@
 import cloneDeep from "lodash/cloneDeep"
+import {camelToSnake} from "./utils"
 
-export const llmAvailableProvidersToken = "llmAvailableProvidersToken"
+const llmAvailableProvidersToken = "llmAvailableProvidersToken"
 
 export type LlmProvider = {
     title: string
     key: string
     name: string
-    id?: string
 }
 
 export const llmAvailableProviders: LlmProvider[] = [
@@ -55,6 +55,9 @@ export const saveLlmProviderKey = (providerName: string, keyValue: string) => {
     localStorage.setItem(llmAvailableProvidersToken, JSON.stringify(keys))
 }
 
+export const getLlmProviderKey = (providerName: string) =>
+    getAllProviderLlmKeys().find((item: LlmProvider) => item.title === providerName)?.key
+
 export const getAllProviderLlmKeys = () => {
     const providers = cloneDeep(llmAvailableProviders)
     try {