From 69f3d4296e3dfb0a20b2235ace6f9b43e86d918b Mon Sep 17 00:00:00 2001
From: cgoodwin90 <chris_2190@hotmail.com>
Date: Fri, 3 Nov 2023 10:38:51 +1100
Subject: [PATCH] Added changes to project variables

---
 src/components/EnvironmentVariables/index.js  | 18 ++++--
 .../StyledProjectVariables.tsx                |  5 ++
 src/components/ProjectVariables/index.js      | 64 +++++++++++++------
 3 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/src/components/EnvironmentVariables/index.js b/src/components/EnvironmentVariables/index.js
index ef79ad5b..dc08856e 100644
--- a/src/components/EnvironmentVariables/index.js
+++ b/src/components/EnvironmentVariables/index.js
@@ -20,7 +20,7 @@ import show from "../../static/images/show.svg";
 import hide from "../../static/images/hide.svg";
 import ProjectVariablesLink from "components/link/ProjectVariables";
 import Alert from 'components/Alert'
-import ButtonComp from 'components/Button'
+import Btn from 'components/Button'
 import {DeleteVariableButton} from "../DeleteVariable/StyledDeleteVariable";
 import {LoadingOutlined} from "@ant-design/icons";
 
@@ -136,7 +136,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
     setUpdateVarScope(rowScope);
   }
 
-  const permissionCheck = (action, index) => {
+  const permissionCheck = (action, index = 0) => {
     setOpenEnvVars(false);
     setAction(action);
     valuesShow(index);
@@ -145,7 +145,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
 
   return (
     <StyledEnvironmentVariableDetails className="details">
-      {environment.envVariables.length == 0 ? (
+      {environment.envVariables.length === 0 ? (
         <>
           <div className="header no-vars">
             <AddVariable
@@ -334,9 +334,13 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
                                 onClick={() => permissionCheck("delete", index)}
                                 style={{ all: "unset" }}
                               >
-                                {envLoading ? <DeleteVariableButton><ButtonComp index={index} variant='red' icon={!valueState[index] ? 'bin': ''} className="delete-btn">
-                                      {valueState[index] ? <LoadingOutlined/> : "Delete"}</ButtonComp>
-                                </DeleteVariableButton>:
+                                {envLoading && action === "delete" ?
+                                  <DeleteVariableButton>
+                                    <Btn index={index} variant='red' icon={!valueState[index] ? 'bin': ''} className="delete-btn">
+                                      {valueState[index] ? <LoadingOutlined/> : "Delete"}
+                                    </Btn>
+                                  </DeleteVariableButton>
+                                :
                                   <DeleteVariable
                                     deleteType="Environment variable"
                                     deleteName={envVar.name}
@@ -359,7 +363,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
           </div>
         </>
       )}
-      {displayProjectVars.length == 0 ? (
+      {displayProjectVars.length === 0 ? (
         <>
           <hr style={{ margin: "30px 0" }} />
           <div className="header no-vars">
diff --git a/src/components/ProjectVariables/StyledProjectVariables.tsx b/src/components/ProjectVariables/StyledProjectVariables.tsx
index ef33c8fb..d8dcec48 100644
--- a/src/components/ProjectVariables/StyledProjectVariables.tsx
+++ b/src/components/ProjectVariables/StyledProjectVariables.tsx
@@ -107,6 +107,11 @@ export const StyledProjectVariablesDetails = styled.div`
   .header-buttons {
     display: flex;
     margin: 0 4px;
+    
+    .add-variable {
+      width: 54px;
+      height: 38px;
+    }
 
     button {
       margin-right: 4px;
diff --git a/src/components/ProjectVariables/index.js b/src/components/ProjectVariables/index.js
index 4a36a686..a6eacbc7 100644
--- a/src/components/ProjectVariables/index.js
+++ b/src/components/ProjectVariables/index.js
@@ -5,6 +5,7 @@ import { useLazyQuery } from "@apollo/react-hooks";
 import AddVariable from "../AddVariable";
 import ViewVariableValue from "../ViewVariableValue";
 import Button from "react-bootstrap/Button";
+import Btn from 'components/Button'
 import Collapse from "react-bootstrap/Collapse";
 import withLogic from 'components/DeleteConfirm/logic';
 import Image from "next/image";
@@ -17,6 +18,8 @@ import {
 } from "./StyledProjectVariables";
 import DeleteVariable from "components/DeleteVariable";
 import Alert from 'components/Alert'
+import {LoadingOutlined} from "@ant-design/icons";
+import {DeleteVariableButton} from "../DeleteVariable/StyledDeleteVariable";
 
 /**
  * Displays the projects variable information.
@@ -40,6 +43,7 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
   const [updateVarName, setUpdateVarName ] = useState('');
   const [updateVarScope, setUpdateVarScope ] = useState('');
   const [projectErrorAlert, setProjectErrorAlert] = useState(false);
+  const [action, setAction] = useState('');
 
   const closeProjectError = () => {
     setProjectErrorAlert(false);
@@ -52,7 +56,8 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
   ] = useLazyQuery(ProjectByNameWithEnvVarsValueQuery, {
     variables: { name: project.name },
     onError: () => {
-      setOpenPrjVars(!openPrjVars);
+      setOpenPrjVars(false);
+      setValueState(initValueState);
       setProjectErrorAlert(true);
     }
   });
@@ -79,6 +84,7 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
     getPrjEnvVarValues();
     setOpenPrjVars(!openPrjVars);
     setValueState(initValueState);
+    setAction("view")
   };
 
   const setUpdateValue = (rowValue, rowName, rowScope) => {
@@ -87,9 +93,16 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
     setUpdateVarScope(rowScope)
   }
 
+  const permissionCheck = (action, index = 0) => {
+    setOpenPrjVars(false);
+    setAction(action);
+    valuesShow(index);
+    getPrjEnvVarValues();
+  }
+
   return (
     <StyledProjectVariablesDetails className="details">
-      {displayVars.length == 0 ? (
+      {displayVars.length === 0 ? (
         <>
           <div className="header no-vars">
             <AddVariable
@@ -113,7 +126,7 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
                 type="error"
                 closeAlert={closeProjectError}
                 header="Unauthorized:"
-                message="You don't have permission to view project variable values. Contact your administrator to obtain the relevant permissions."
+                message={`You don't have permission to ${action} project ${action === "view" ? " variable values" : "variables"}. Contact your administrator to obtain the relevant permissions.`}
               />
             )
           }
@@ -121,15 +134,17 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
             <label>Project Variables</label>
             <div className="header-buttons">
               <Button
-                  onClick={() => setOpenPrjVars(false)}
-                  style={{ all: "unset" }}
+                onClick={() => permissionCheck("add")}
+                style={{ all: "unset" }}
               >
-                <AddVariable
-                  varProject={project.name}
-                  varValues={displayVars}
-                  varTarget="Project"
-                  refresh={onVariableAdded}
-                />
+                {prjLoading && action === "add" ? <Button className="add-variable"><LoadingOutlined/></Button> :
+                  <AddVariable
+                    varProject={project.name}
+                    varValues={displayVars}
+                    varTarget="Project"
+                    refresh={onVariableAdded}
+                  />
+                }
               </Button>
               <Button
                 onClick={() => showVarValue()}
@@ -272,13 +287,26 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
                               </div>
                             </Collapse>
                             <div className="varDelete">
-                              <DeleteVariable
-                                  deleteType="Project variable"
-                                  deleteName={projEnvVar.name}
-                                  varProject={project.name}
-                                  icon="bin"
-                                  refresh={onVariableAdded}
-                              />
+                              <Button
+                                onClick={() => permissionCheck("delete", index)}
+                                style={{ all: "unset" }}
+                              >
+                                {prjLoading && action === "delete" ?
+                                  <DeleteVariableButton>
+                                    <Btn index={index} variant='red' icon={!valueState[index] ? 'bin': ''} className="delete-btn">
+                                      {valueState[index] ? <LoadingOutlined/> : "Delete"}
+                                    </Btn>
+                                  </DeleteVariableButton>
+                                :
+                                  <DeleteVariable
+                                    deleteType="Project variable"
+                                    deleteName={projEnvVar.name}
+                                    varProject={project.name}
+                                    icon="bin"
+                                    refresh={onVariableAdded}
+                                  />
+                                }
+                              </Button>
                             </div>
                           </VariableActions>
                         </div>