fixed curl code spacing, improved env active button styles and review…

…ed ts code
Agenta-AI · May 1, 2024 · 4fa8f25 · 4fa8f25
1 parent 2e09727
commit 4fa8f25
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 48 deletions.
diff --git a/agenta-web/src/code_snippets/endpoints/fetch_config/curl.ts b/agenta-web/src/code_snippets/endpoints/fetch_config/curl.ts
@@ -1,8 +1,8 @@
 export default function cURLCode(baseId: string, env_name: string): string {
     return `
-    curl -X GET "https://cloud.agenta.ai/api/configs?base_id=${baseId}&environment_name=${env_name}" \
-    -H "Authorization: Bearer YOUR_API_KEY" \
-    -H "Content-Type: application/json" \
+    curl -X GET "https://cloud.agenta.ai/api/configs?base_id=${baseId}&environment_name=${env_name}" \\
+    -H "Authorization: Bearer YOUR_API_KEY" \\
+    -H "Content-Type: application/json" \\
     --connect-timeout 60
     `
 }
diff --git a/agenta-web/src/code_snippets/endpoints/fetch_config/typescript.ts b/agenta-web/src/code_snippets/endpoints/fetch_config/typescript.ts
@@ -4,38 +4,38 @@ export default function tsCode(baseId: string, env_name: string): string {
     const codeString = `
     import axios from 'axios';
 
-    const getConfig = async (baseId: string, environmentName = null) => {
-       try {
-           const baseUrl = 'https://cloud.agenta.ai/api';
-           const params = {
-               base_id: baseId,
-               environment_name: environmentName
-           };
+    const getConfig = async (baseId: string, environmentName: string) => {
+        try {
+            const baseUrl = 'https://cloud.agenta.ai/api';
+            const params = {
+                base_id: baseId,
+                environment_name: environmentName
+            };
 
-           const response = await axios.get(baseUrl + "/configs", {
-               params: params,
-               headers: {
-                   'Authorization': "Bearer YOUR_API_KEY",
-                   'Content-Type': 'application/json'
-               },
-               timeout: 60000
-           });
+            const response = await axios.get(baseUrl + "/configs", {
+                params: params,
+                headers: {
+                    'Authorization': "Bearer YOUR_API_KEY",
+                    'Content-Type': 'application/json'
+                },
+                timeout: 60000
+            });
 
-           if (response.status >= 200 && response.status < 300) {
-               return response.data;
-           } else if (response.status === 422) {
-               throw new Error(JSON.stringify(response.data));
-           }
-       } catch (error) {
-           if (error.response) {
-               console.error("API Error: " + error.response.status, error.response.data);
-           } else if (error.request) {
-               console.error('API Error: No response received', error.request);
-           } else {
-               console.error('Error', error.message);
-           }
-           throw error;
-       }
+            if (response.status >= 200 && response.status < 300) {
+                return response.data;
+            } else if (response.status === 422) {
+                throw new Error(JSON.stringify(response.data));
+            }
+        } catch (error: any) {
+            if (error.response) {
+                console.error("API Error: " + error.response.status, error.response.data);
+            } else if (error.request) {
+                console.error('API Error: No response received', error.request);
+            } else {
+                console.error('Error', error.message);
+            }
+            throw error;
+        }
     };
 
     getConfig('${baseId}', '${env_name}').then(console.log).catch(console.error);

diff --git a/agenta-web/src/code_snippets/endpoints/invoke_llm_app/curl.ts b/agenta-web/src/code_snippets/endpoints/invoke_llm_app/curl.ts
@@ -1,6 +1,6 @@
 export default function cURLCode(uri: string, params: string): string {
-    return `curl -X POST ${uri} \
--H "Content-Type: application/json" \
+    return `curl -X POST ${uri} \\
+-H "Content-Type: application/json" \\
 -d '${params}'
 `
 }
diff --git a/agenta-web/src/pages/apps/[app_id]/endpoints/index.tsx b/agenta-web/src/pages/apps/[app_id]/endpoints/index.tsx
@@ -6,7 +6,7 @@ import fetchConfigpythonCode from "@/code_snippets/endpoints/fetch_config/python
 import fetchConfigtsCode from "@/code_snippets/endpoints/fetch_config/typescript"
 import DynamicCodeBlock from "@/components/DynamicCodeBlock/DynamicCodeBlock"
 import ResultComponent from "@/components/ResultComponent/ResultComponent"
-import {Environment, GenericObject, Parameter, Variant} from "@/lib/Types"
+import {Environment, GenericObject, JSSTheme, Parameter, Variant} from "@/lib/Types"
 import {isDemo} from "@/lib/helpers/utils"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
 import {useVariant} from "@/lib/hooks/useVariant"
@@ -22,13 +22,22 @@ const DeploymentHistory: any = dynamicComponent("DeploymentHistory/DeploymentHis
 
 const {Text, Title} = Typography
 
-const useStyles = createUseStyles({
+const useStyles = createUseStyles((theme: JSSTheme) => ({
     container: {
         display: "flex",
         flexDirection: "column",
         rowGap: 20,
     },
-})
+    envButtons: {
+        "& .ant-radio-button-wrapper-checked": {
+            backgroundColor: theme.colorPrimary,
+            color: theme.colorWhite,
+            "&:hover": {
+                color: theme.colorWhite,
+            },
+        },
+    },
+}))
 
 export default function VariantEndpoint() {
     const classes = useStyles()
@@ -77,6 +86,7 @@ export default function VariantEndpoint() {
     const [variants, setVariants] = useState<Variant[]>([])
     const [isVariantsLoading, setIsVariantsLoading] = useState(false)
     const [isVariantsError, setIsVariantsError] = useState<boolean | string>(false)
+
     useEffect(() => {
         const fetchData = async () => {
             setIsVariantsLoading(true)
@@ -203,16 +213,19 @@ export default function VariantEndpoint() {
                 <Radio.Group
                     value={selectedEnvironment?.name}
                     onChange={(e) => handleEnvironmentClick({key: e.target.value})}
+                    className={classes.envButtons}
                 >
-                    {environments.map((env) => (
-                        <Radio.Button
-                            disabled={!env.deployed_app_variant_id}
-                            key={env.name}
-                            value={env.name}
-                        >
-                            {env.name}
-                        </Radio.Button>
-                    ))}
+                    {environments
+                        .map((env) => (
+                            <Radio.Button
+                                disabled={!env.deployed_app_variant_id}
+                                key={env.name}
+                                value={env.name}
+                            >
+                                {env.name}
+                            </Radio.Button>
+                        ))
+                        .reverse()}
                 </Radio.Group>
             </div>
 
@@ -226,7 +239,9 @@ export default function VariantEndpoint() {
                                 key: "overview",
                                 label: "Overview",
                                 icon: <AppstoreOutlined />,
-                                children: <Collapse defaultActiveKey={["1"]} items={items} />,
+                                children: (
+                                    <Collapse accordion defaultActiveKey={["1"]} items={items} />
+                                ),
                             },
                             {
                                 key: "history",