From bbd249a937cb06121d6a66e68482ad45d7bc86e5 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Sat, 8 Jun 2024 22:26:11 +0600
Subject: [PATCH 1/2] enhance: enhanced the settings llm keys buttons and
 container spacing

---
 .../components/pages/settings/Secrets/Secrets.tsx  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx b/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
index ab90134f2..3a4a25e7c 100644
--- a/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
+++ b/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
@@ -17,17 +17,15 @@ const useStyles = createUseStyles({
         marginTop: 0,
     },
     container: {
-        marginLeft: 0,
+        margin: "0px 0",
     },
     apiContainer: {
-        margin: "0px 0",
+        marginBottom: 10,
     },
     input: {
         display: "flex",
         alignItems: "center",
         width: 420,
-        marginBottom: 8,
-        marginLeft: 8,
     },
 })
 
@@ -48,12 +46,12 @@ export default function Secrets() {
                 servers!
             </Text>
 
-            <div className={classes.container}>
+            <div>
                 <Title level={5}>Available Providers</Title>
 
-                <div className={classes.apiContainer}>
+                <div className={classes.container}>
                     {llmProviderKeys.map(({title, key}: LlmProvider, i: number) => (
-                        <div key={i}>
+                        <div key={i} className={classes.apiContainer}>
                             <Space direction="horizontal" key={i}>
                                 <Input.Password
                                     data-cy="openai-api-input"
@@ -69,6 +67,7 @@ export default function Secrets() {
                                 />
                                 <Button
                                     data-cy="openai-api-save"
+                                    type="primary"
                                     disabled={key === getLlmProviderKey(title) || !key}
                                     onClick={() => {
                                         saveLlmProviderKey(title, key)
@@ -78,6 +77,7 @@ export default function Secrets() {
                                     Save
                                 </Button>
                                 <Button
+                                    disabled={!Boolean(key)}
                                     onClick={() => {
                                         removeSingleLlmProviderKey(title)
 

From 1455aa59db517e391822733c16192d23587fd1d1 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 7 Jul 2024 23:39:25 +0100
Subject: [PATCH 2/2] fix(frontend): code cleanup

---
 .../pages/settings/Secrets/Secrets.tsx        | 100 +++++++-----------
 1 file changed, 39 insertions(+), 61 deletions(-)

diff --git a/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx b/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
index 3a4a25e7c..b28f7dbf6 100644
--- a/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
+++ b/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
@@ -4,40 +4,20 @@ import {
     removeSingleLlmProviderKey,
     getAllProviderLlmKeys,
     LlmProvider,
-    getApikeys,
 } from "@/lib/helpers/llmProviders"
 import {Button, Input, Space, Typography, message} from "antd"
 import {useState} from "react"
-import {createUseStyles} from "react-jss"
 
 const {Title, Text} = Typography
 
-const useStyles = createUseStyles({
-    title: {
-        marginTop: 0,
-    },
-    container: {
-        margin: "0px 0",
-    },
-    apiContainer: {
-        marginBottom: 10,
-    },
-    input: {
-        display: "flex",
-        alignItems: "center",
-        width: 420,
-    },
-})
-
 export default function Secrets() {
-    const classes = useStyles()
     const [llmProviderKeys, setLlmProviderKeys] = useState(getAllProviderLlmKeys())
     const [messageAPI, contextHolder] = message.useMessage()
 
     return (
         <div data-cy="secrets">
             {contextHolder}
-            <Title level={3} className={classes.title}>
+            <Title level={3} className={"mt-0"}>
                 LLM Keys
             </Title>
 
@@ -49,49 +29,47 @@ export default function Secrets() {
             <div>
                 <Title level={5}>Available Providers</Title>
 
-                <div className={classes.container}>
+                <div>
                     {llmProviderKeys.map(({title, key}: LlmProvider, i: number) => (
-                        <div key={i} className={classes.apiContainer}>
-                            <Space direction="horizontal" key={i}>
-                                <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={classes.input}
-                                />
-                                <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)
+                        <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)
+                                    const newLlmProviderKeys = [...llmProviderKeys]
+                                    newLlmProviderKeys[i].key = ""
+                                    setLlmProviderKeys(newLlmProviderKeys)
 
-                                        messageAPI.warning("The secret is deleted")
-                                    }}
-                                >
-                                    Delete
-                                </Button>
-                            </Space>
-                        </div>
+                                    messageAPI.warning("The secret is deleted")
+                                }}
+                            >
+                                Delete
+                            </Button>
+                        </Space>
                     ))}
                 </div>
             </div>