Integrate GQL mutations for updating and deleting environment variables in frontend (#55)

* Use edit and delete environment variable gql client method

* Handle review changes

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx

@@ -8,11 +8,13 @@ import EditEnvironmentVariableRow from './EditEnvironmentVariableRow';
 interface DisplayEnvironmentVariablesProps {
   environment: Environment;
   variables: EnvironmentVariable[];
+  onUpdate: () => Promise<void>;
 }
 
 const DisplayEnvironmentVariables = ({
   environment,
   variables,
+  onUpdate,
 }: DisplayEnvironmentVariablesProps) => {
   const [openCollapse, setOpenCollapse] = useState(false);
 
@@ -37,9 +39,13 @@ const DisplayEnvironmentVariables = ({
             </Typography>
           </Card>
         ) : (
-          variables.map((variable: EnvironmentVariable, index: number) => {
+          variables.map((variable: EnvironmentVariable) => {
             return (
-              <EditEnvironmentVariableRow key={index} variable={variable} />
+              <EditEnvironmentVariableRow
+                onUpdate={onUpdate}
+                key={variable.id}
+                variable={variable}
+              />
             );
           })
         )}

packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { EnvironmentVariable } from 'gql-client';
@@ -6,6 +6,7 @@ import { EnvironmentVariable } from 'gql-client';
 import { IconButton, Input, Typography } from '@material-tailwind/react';
 
 import ConfirmDialog from '../../../shared/ConfirmDialog';
+import { useGQLClient } from '../../../../context/GQLClientContext';
 
 const ShowPasswordIcon = ({
   handler,
@@ -28,9 +29,13 @@ const ShowPasswordIcon = ({
 
 const EditEnvironmentVariableRow = ({
   variable,
+  onUpdate,
 }: {
   variable: EnvironmentVariable;
+  onUpdate: () => Promise<void>;
 }) => {
+  const client = useGQLClient();
+
   const { handleSubmit, register, reset } = useForm({
     defaultValues: {
       key: variable.key,
@@ -42,6 +47,39 @@ const EditEnvironmentVariableRow = ({
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [edit, setEdit] = useState(false);
 
+  const removeEnvironmentVariableHandler = useCallback(async () => {
+    const { removeEnvironmentVariable: isEnvironmentVariableRemoved } =
+      await client.removeEnvironmentVariable(variable.id);
+
+    if (isEnvironmentVariableRemoved) {
+      await onUpdate();
+      setDeleteDialogOpen((preVal) => !preVal);
+      toast.success('Variable deleted');
+    } else {
+      toast.error('Variable not deleted');
+    }
+  }, [variable, onUpdate]);
+
+  const updateEnvironmentVariableHandler = useCallback(
+    async (data: { key: string; value: string }) => {
+      const { updateEnvironmentVariable: isEnvironmentVariableUpdated } =
+        await client.updateEnvironmentVariable(variable.id, data);
+
+      if (isEnvironmentVariableUpdated) {
+        await onUpdate();
+        toast.success('Variable edited');
+        setEdit((preVal) => !preVal);
+      } else {
+        toast.error('Variable not edited');
+      }
+    },
+    [variable, onUpdate],
+  );
+
+  useEffect(() => {
+    reset({ key: variable.key, value: variable.value });
+  }, [variable]);
+
   return (
     <>
       <div className="flex gap-1 p-2">
@@ -74,10 +112,7 @@ const EditEnvironmentVariableRow = ({
           <>
             <div className="self-end">
               <IconButton
-                onClick={handleSubmit(() => {
+                onClick={handleSubmit(updateEnvironmentVariableHandler)}
-                  toast.success('Variable edited');
-                  setEdit((preVal) => !preVal);
-                })}
                 size="sm"
               >
                 {'S'}
@@ -124,10 +159,7 @@ const EditEnvironmentVariableRow = ({
         handleOpen={() => setDeleteDialogOpen((preVal) => !preVal)}
         open={deleteDialogOpen}
         confirmButtonTitle="Yes, Confirm delete"
-        handleConfirm={() => {
+        handleConfirm={removeEnvironmentVariableHandler}
-          setDeleteDialogOpen((preVal) => !preVal);
-          toast.success('Variable deleted');
-        }}
         color="red"
       >
         <Typography variant="small">

packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx

@@ -227,16 +227,25 @@ export const EnvironmentVariablesTabPanel = () => {
         <DisplayEnvironmentVariables
           environment={Environment.Production}
           variables={getEnvironmentVariables(Environment.Production)}
+          onUpdate={async () => {
+            await fetchEnvironmentVariables(id);
+          }}
         />
         <HorizontalLine />
         <DisplayEnvironmentVariables
           environment={Environment.Preview}
           variables={getEnvironmentVariables(Environment.Preview)}
+          onUpdate={async () => {
+            await fetchEnvironmentVariables(id);
+          }}
         />
         <HorizontalLine />
         <DisplayEnvironmentVariables
           environment={Environment.Development}
           variables={getEnvironmentVariables(Environment.Development)}
+          onUpdate={async () => {
+            await fetchEnvironmentVariables(id);
+          }}
         />
       </div>
     </>