coral-web: modal to edit deployment env variables

src/interfaces/coral_web/src/cohere-client/client.ts

@@ -11,6 +11,7 @@ import {
   ListFile,
   Tool,
   UpdateConversation,
+  UpdateDeploymentEnv,
   UploadFile,
 } from '.';
 import { mapToChatRequest } from './mappings';
@@ -355,6 +356,21 @@ export class CohereClient {
     return body as Deployment[];
   }
 
+  public async updateDeploymentEnvVariables(request: UpdateDeploymentEnv & { name: string }) {
+    const response = await this.fetch(
+      `${this.getEndpoint('deployments')}/${request.name}/set_env_vars`,
+      {
+        method: 'POST',
+        headers: this.getHeaders(),
+        body: JSON.stringify({ env_vars: request.env_vars }),
+      }
+    );
+
+    if (response.status !== 200) {
+      throw new CohereNetworkError('Something went wrong', response.status);
+    }
+  }
+
   public async getExperimentalFeatures(): Promise<ExperimentalFeatures> {
     const response = await this.fetch(`${this.getEndpoint('experimental_features')}/`, {
       method: 'GET',

src/interfaces/coral_web/src/components/EditEnvVariablesButton.tsx

@@ -0,0 +1,140 @@
+import React, { useContext, useMemo, useState } from 'react';
+
+import {
+  BasicButton,
+  Button,
+  Dropdown,
+  DropdownOptionGroups,
+  Input,
+  Text,
+} from '@/components/Shared';
+import { ModalContext } from '@/context/ModalContext';
+import { useListAllDeployments } from '@/hooks/deployments';
+import { useUpdateDeploymentEnvVariables } from '@/hooks/envVariables';
+
+/**
+ * @description Button to trigger a modal to edit .env variables.
+ */
+export const EditEnvVariablesButton: React.FC<{ className?: string }> = () => {
+  const { open, close } = useContext(ModalContext);
+
+  const handleClick = () => {
+    open({
+      title: 'Edit .env variables',
+      content: <EditEnvVariablesModal onClose={close} />,
+    });
+  };
+
+  return (
+    <BasicButton
+      label="Edit .env variables"
+      size="sm"
+      kind="minimal"
+      className="py-0"
+      onClick={handleClick}
+    />
+  );
+};
+
+/**
+ * @description Renders a modal to edit a selected deployment's .env variables.
+ */
+const EditEnvVariablesModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
+  const { data: deployments } = useListAllDeployments();
+  const { mutateAsync: updateDeploymentEnvVariables } = useUpdateDeploymentEnvVariables();
+
+  const [deployment, setDeployment] = useState<string | undefined>();
+  const [envVariables, setEnvVariables] = useState<Record<string, string>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [hasError, setHasError] = useState(false);
+
+  const deploymentOptions: DropdownOptionGroups = useMemo(
+    () => [
+      {
+        options: (deployments ?? []).map(({ name }) => ({
+          label: name,
+          value: name,
+        })),
+      },
+    ],
+    [deployments]
+  );
+
+  const handleDeploymentChange = (newDeployment: string) => {
+    if (hasError) {
+      setHasError(false);
+    }
+
+    setDeployment(newDeployment);
+    const selectedDeployment = deployments?.find(({ name }) => name === newDeployment);
+    const emptyEnvVariables =
+      selectedDeployment?.env_vars.reduce<Record<string, string>>((acc, envVar) => {
+        acc[envVar] = '';
+        return acc;
+      }, {}) ?? {};
+    setEnvVariables(emptyEnvVariables);
+  };
+
+  const handleEnvVariableChange = (envVar: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (hasError) {
+      setHasError(false);
+    }
+
+    setEnvVariables({ ...envVariables, [envVar]: e.target.value });
+  };
+
+  const handleSubmit = async () => {
+    if (!deployment) return;
+
+    if (hasError) {
+      setHasError(false);
+    }
+
+    try {
+      setIsSubmitting(true);
+      await updateDeploymentEnvVariables({ name: deployment, env_vars: envVariables });
+      setIsSubmitting(false);
+      onClose();
+    } catch (e) {
+      console.error(e);
+      setHasError(true);
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-y-4 p-4">
+      <Dropdown
+        value={deployment}
+        optionGroups={deploymentOptions}
+        onChange={handleDeploymentChange}
+      />
+
+      {Object.keys(envVariables).map((envVar) => (
+        <Input
+          key={envVar}
+          placeholder="value"
+          label={envVar}
+          value={envVariables[envVar]}
+          onChange={handleEnvVariableChange(envVar)}
+        />
+      ))}
+
+      {hasError && (
+        <Text styleAs="p-sm" className="text-danger-500">
+          An error occurred. Please try again.
+        </Text>
+      )}
+
+      <span className="mt-10 flex items-center justify-between">
+        <BasicButton kind="minimal" size="sm" label="Cancel" onClick={onClose} />
+        <Button
+          label={isSubmitting ? 'Submitting...' : 'Submit'}
+          onClick={handleSubmit}
+          splitIcon="arrow-right"
+          disabled={isSubmitting}
+        />
+      </span>
+    </div>
+  );
+};

src/interfaces/coral_web/src/components/Layout.tsx

@@ -3,6 +3,8 @@ import { capitalize } from 'lodash';
 import React, { Children, PropsWithChildren, useContext } from 'react';
 
 import { ConfigurationDrawer } from '@/components/Conversation/ConfigurationDrawer';
+import { DeploymentsDropdown } from '@/components/DeploymentsDropdown';
+import { EditEnvVariablesButton } from '@/components/EditEnvVariablesButton';
 import { Banner } from '@/components/Shared';
 import { NavigationBar } from '@/components/Shared/NavigationBar/NavigationBar';
 import { PageHead } from '@/components/Shared/PageHead';
@@ -58,7 +60,12 @@ export const Layout: React.FC<Props> = ({ title = 'Coral', children }) => {
     <>
       <PageHead title={capitalize(title)} />
       <div className="flex h-screen w-full flex-1 flex-col gap-3 bg-secondary-100 p-3">
-        <NavigationBar />
+        <NavigationBar>
+          <span className="flex items-center gap-x-2">
+            <DeploymentsDropdown />
+            <EditEnvVariablesButton className="py-0" />
+          </span>
+        </NavigationBar>
         {bannerMessage && <Banner size="sm">{bannerMessage}</Banner>}
 
         <div className={cn('relative flex h-full flex-grow flex-nowrap overflow-hidden')}>

src/interfaces/coral_web/src/components/Shared/Logo.tsx

@@ -15,15 +15,9 @@ export const Logo: React.FC<LogoProps> = ({
   style = 'default',
   darkModeEnabled,
 }) => {
-  if (hasCustomLogo === 'true') {
+  if (hasCustomLogo) {
     // Modify this section to render a custom logo or text based on specific design guidelines.
-    return (
-      <img
-        src="/images/logo.png"
-        alt="Logo"
-        className={cx('h-full', className)}
-      />
-    );
+    return <img src="/images/logo.png" alt="Logo" className={cx('h-full', className)} />;
   }
 
   return (
@@ -76,5 +70,5 @@ export const Logo: React.FC<LogoProps> = ({
         })}
       />
     </svg>
-  )
-}
+  );
+};

src/interfaces/coral_web/src/components/Shared/NavigationBar/NavigationBar.tsx

@@ -1,15 +1,17 @@
 import cx from 'classnames';
 import Link from 'next/link';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import { Logo } from '@/components/Shared';
-import { DeploymentsDropdown } from '@/components/Shared/NavigationBar/DeploymentsDropdown';
 import { env } from '@/env.mjs';
 
 /**
  * @description Displays the navigation bar where clicking the logo will return the user to the home page.
  */
-export const NavigationBar: React.FC<{ className?: string }> = ({ className = '' }) => {
+export const NavigationBar: React.FC<PropsWithChildren<{ className?: string }>> = ({
+  className = '',
+  children,
+}) => {
   return (
     <nav
       className={cx(
@@ -20,10 +22,10 @@ export const NavigationBar: React.FC<{ className?: string }> = ({ className = ''
     >
       <Link href="/">
         <div className="mr-3 flex items-baseline">
-          <Logo hasCustomLogo={env.NEXT_PUBLIC_HAS_CUSTOM_LOGO} />
+          <Logo hasCustomLogo={env.NEXT_PUBLIC_HAS_CUSTOM_LOGO === 'true'} />
         </div>
       </Link>
-      <DeploymentsDropdown />
+      {children}
     </nav>
   );
 };

src/interfaces/coral_web/src/hooks/envVariables.ts

@@ -0,0 +1,12 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { CohereNetworkError, UpdateDeploymentEnv, useCohereClient } from '@/cohere-client';
+
+export const useUpdateDeploymentEnvVariables = () => {
+  const client = useCohereClient();
+  return useMutation<void, CohereNetworkError, UpdateDeploymentEnv & { name: string }>({
+    mutationFn: async (request: { name: string } & UpdateDeploymentEnv) => {
+      return await client.updateDeploymentEnvVariables(request);
+    },
+  });
+};