UI stuff

All-Hands-AI · Dec 30, 2024 · 03e138b · 03e138b
1 parent 3ed03b3
commit 03e138b
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 14 deletions.
diff --git a/frontend/src/components/shared/inputs/api-key-input.tsx b/frontend/src/components/shared/inputs/api-key-input.tsx
@@ -1,27 +1,37 @@
-import { Input } from "@nextui-org/react";
+import { Input, Tooltip } from "@nextui-org/react";
 import { useTranslation } from "react-i18next";
+import { FaCheckCircle, FaExclamationCircle } from "react-icons/fa";
 import { I18nKey } from "#/i18n/declaration";
 
 interface APIKeyInputProps {
   isDisabled: boolean;
-  defaultValue: string;
+  isSet: boolean;
 }
 
-export function APIKeyInput({ isDisabled, defaultValue }: APIKeyInputProps) {
+export function APIKeyInput({ isDisabled, isSet }: APIKeyInputProps) {
   const { t } = useTranslation();
 
   return (
     <fieldset data-testid="api-key-input" className="flex flex-col gap-2">
-      <label htmlFor="api-key" className="font-[500] text-[#A3A3A3] text-xs">
-        {t(I18nKey.SETTINGS_FORM$API_KEY_LABEL)}
-      </label>
+      <Tooltip content={isSet ? "API Key is set" : "API Key is not set"}>
+        <label
+          htmlFor="api-key"
+          className="font-[500] text-[#A3A3A3] text-xs flex items-center gap-1 self-start"
+        >
+          {isSet && <FaCheckCircle className="text-[#00D1B2] inline-block" />}
+          {!isSet && (
+            <FaExclamationCircle className="text-[#FF3860] inline-block" />
+          )}
+          {t(I18nKey.SETTINGS_FORM$API_KEY_LABEL)}
+        </label>
+      </Tooltip>
       <Input
         isDisabled={isDisabled}
         id="api-key"
         name="api-key"
         aria-label="API Key"
         type="password"
-        defaultValue={defaultValue}
+        defaultValue=""
         classNames={{
           inputWrapper: "bg-[#27272A] rounded-md text-sm px-3 py-[10px]",
         }}

diff --git a/frontend/src/components/shared/modals/settings/settings-form.tsx b/frontend/src/components/shared/modals/settings/settings-form.tsx
@@ -161,7 +161,7 @@ export function SettingsForm({
 
           <APIKeyInput
             isDisabled={!!disabled}
-            defaultValue={settings.LLM_API_KEY || ""}
+            isSet={settings.LLM_API_KEY === "SET"}
           />
 
           {showAdvancedOptions && (

diff --git a/frontend/src/hooks/mutation/use-save-settings.ts b/frontend/src/hooks/mutation/use-save-settings.ts
@@ -26,8 +26,8 @@ export const useSaveSettings = () => {
 
   return useMutation({
     mutationFn: saveSettingsMutationFn,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["settings"] });
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["settings"] });
       updateSettingsVersion(logout);
       setIsUpToDate(true);
     },

diff --git a/frontend/src/hooks/query/use-settings.ts b/frontend/src/hooks/query/use-settings.ts
@@ -7,15 +7,15 @@ import OpenHands from "#/api/open-hands";
 const getSettingsQueryFn = async () => {
   const apiSettings = await OpenHands.getSettings();
 
-  if (apiSettings != null) {
+  if (apiSettings !== null) {
     return {
       LLM_MODEL: apiSettings.llm_model,
       LLM_BASE_URL: apiSettings.llm_base_url,
       AGENT: apiSettings.agent,
       LANGUAGE: apiSettings.language,
       CONFIRMATION_MODE: apiSettings.confirmation_mode,
       SECURITY_ANALYZER: apiSettings.security_analyzer,
-      LLM_API_KEY: "",
+      LLM_API_KEY: apiSettings.llm_api_key,
     };
   }
 
@@ -27,6 +27,7 @@ export const useSettings = () => {
     queryKey: ["settings"],
     queryFn: getSettingsQueryFn,
     initialData: DEFAULT_SETTINGS,
+    refetchOnMount: false,
   });
 
   React.useEffect(() => {

diff --git a/frontend/tests/settings.spec.ts b/frontend/tests/settings.spec.ts
@@ -21,7 +21,7 @@ const selectGpt4o = async (page: Page) => {
   const modelSelectElement = aiConfigModal.getByTestId("llm-model");
   await modelSelectElement.click();
 
-  const gpt4Option = page.getByText("gpt-4o");
+  const gpt4Option = page.getByText("gpt-4o", { exact: true });
   await gpt4Option.click();
 
   return {

diff --git a/openhands/server/routes/settings.py b/openhands/server/routes/settings.py
@@ -24,7 +24,7 @@ async def load_settings(
         settings = await settings_store.load()
         if settings:
             # For security reasons we don't ever send the api key to the client
-            settings.llm_api_key = None
+            settings.llm_api_key = 'SET' if settings.llm_api_key else None
         return settings
     except Exception as e:
         logger.warning(f'Invalid token: {e}')