Implemented refetch logic instead of location.reload

uselagoon · Aug 2, 2023 · b881e61 · b881e61
1 parent 743ae33
commit b881e61
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 158 deletions.
diff --git a/src/components/AddVariable/index.js b/src/components/AddVariable/index.js
@@ -28,6 +28,7 @@ export const AddVariable = ({
   varValues,
   varTarget,
   noVars,
+  refresh,
   inputName,
   setInputName,
   inputValue,
@@ -37,6 +38,7 @@ export const AddVariable = ({
   open,
   openModal,
   closeModal,
+  setClear
 }) => {
   return (
     <NewVariable>
@@ -103,7 +105,7 @@ export const AddVariable = ({
               cancel
             </a>
             <Mutation mutation={addOrUpdateEnvVariableMutation}>
-              {(addOrUpdateEnvVariableByName, { called, error }) => {
+              {(addOrUpdateEnvVariableByName, { called, error, data }) => {
                 let updateVar = varValues.map((varName) => {
                   return varName.name;
                 });
@@ -120,6 +122,10 @@ export const AddVariable = ({
                   );
                 }
 
+                if (data) {
+                  refresh().then(setClear).then(closeModal);
+                }
+
                 if (updateVar && called) {
                   return <div>Updating variable</div>;
                 } else if (called) {
@@ -138,9 +144,6 @@ export const AddVariable = ({
                       },
                     },
                   });
-                  setTimeout(() => {
-                    location.reload();
-                  }, 2000);
                 };
 
                 return (

diff --git a/src/components/AddVariable/logic.js b/src/components/AddVariable/logic.js
@@ -5,12 +5,15 @@ import withHandlers from "recompose/withHandlers";
 const withInputValue = withState("inputValue", "setInputValue", "");
 const withInputName = withState("inputName", "setInputName", "");
 const withInputScope = withState("inputScope", "setInputScope", "");
+const withInputClear = withState("clear", "setClear", "");
 
 const withInputHandlers = withHandlers({
   setInputValue: ({ setInputValue }) => (event) =>
     setInputValue(event.target.value),
   setInputName: ({ setInputName }) => (event) =>
     setInputName(event.target.value),
+  setClear: ({ setInputValue, setInputName, setInputScope }) => () =>
+      [setInputValue(''), setInputName(''), setInputScope('')],
 });
 
 const withModalState = withState("open", "setOpen", false);
@@ -23,6 +26,7 @@ export default compose(
   withInputValue,
   withInputName,
   withInputScope,
+  withInputClear,
   withInputHandlers,
   withModalState,
   withModalHandlers

diff --git a/src/components/EnvironmentVariables/index.js b/src/components/EnvironmentVariables/index.js
@@ -33,7 +33,7 @@ const hashValue = (value) => {
   return hashedVal;
 };
 
-const EnvironmentVariables = ({ environment }) => {
+const EnvironmentVariables = ({ environment, onVariableAdded, closeModal }) => {
   let displayVars = environment.envVariables;
   let displayProjectVars = environment.project.envVariables;
   let initValueState = new Array(displayVars.length).fill(false);
@@ -114,6 +114,7 @@ const EnvironmentVariables = ({ environment }) => {
               varValues={displayVars}
               varTarget="Environment"
               noVars="Add"
+              refresh={onVariableAdded}
             />
           </div>
           <hr style={{ margin: "30px 0" }} />
@@ -126,12 +127,18 @@ const EnvironmentVariables = ({ environment }) => {
           <div className="header">
             <label>Environment Variables</label>
             <div className="header-buttons">
-              <AddVariable
-                varProject={environment.project.name}
-                varEnvironment={environment.name}
-                varValues={displayVars}
-                varTarget="Environment"
-              />
+              <Button
+                  onClick={() => setOpenPrjVars(false)}
+                  style={{ all: "unset" }}
+              >
+                <AddVariable
+                  varProject={environment.project.name}
+                  varEnvironment={environment.name}
+                  varValues={displayVars}
+                  varTarget="Environment"
+                  refresh={onVariableAdded}
+                />
+              </Button>
               <Button
                 onClick={() => showVarValue()}
                 aria-controls="example-collapse-text"
@@ -272,8 +279,8 @@ const EnvironmentVariables = ({ environment }) => {
                                 );
                               }
 
-                              if (called) {
-                                return <div>Delete queued</div>;
+                              if (data) {
+                                onVariableAdded().then(closeModal);
                               }
 
                               const deleteEnvVariableByNameHandler = () => {
@@ -286,9 +293,7 @@ const EnvironmentVariables = ({ environment }) => {
                                     },
                                   },
                                 });
-                                setTimeout(() => {
-                                  location.reload();
-                                }, 2000);
+
                               };
 
                               return (

diff --git a/src/components/ProjectVariables/index.js b/src/components/ProjectVariables/index.js
@@ -30,7 +30,7 @@ const hashValue = (value) => {
   return hashedVal;
 };
 
-const ProjectVariables = ({ project }) => {
+const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
   let displayVars = project.envVariables;
   let initValueState = new Array(displayVars.length).fill(false);
 
@@ -77,6 +77,7 @@ const ProjectVariables = ({ project }) => {
               varProject={project.name}
               varValues={displayVars}
               varTarget="Project"
+              refresh={onVariableAdded}
             />
           </div>
           <hr style={{ margin: "30px 0" }} />
@@ -90,11 +91,17 @@ const ProjectVariables = ({ project }) => {
           <div className="header">
             <label>Project Variables</label>
             <div className="header-buttons">
-              <AddVariable
-                varProject={project.name}
-                varValues={displayVars}
-                varTarget="Project"
-              />
+              <Button
+                  onClick={() => setOpenPrjVars(false)}
+                  style={{ all: "unset" }}
+              >
+                <AddVariable
+                  varProject={project.name}
+                  varValues={displayVars}
+                  varTarget="Project"
+                  refresh={onVariableAdded}
+                />
+              </Button>
               <Button
                 onClick={() => showVarValue()}
                 aria-controls="example-collapse-text"
@@ -238,8 +245,8 @@ const ProjectVariables = ({ project }) => {
                                 );
                               }
 
-                              if (called) {
-                                return <div>Delete queued</div>;
+                              if (data) {
+                                onVariableAdded().then(closeModal)
                               }
 
                               const deleteEnvVariableByNameHandler = () => {
@@ -251,9 +258,7 @@ const ProjectVariables = ({ project }) => {
                                     },
                                   },
                                 });
-                                setTimeout(() => {
-                                  location.reload();
-                                }, 2000);
+
                               };
 
                               return (

diff --git a/src/pages/environment-variables.js b/src/pages/environment-variables.js
@@ -20,13 +20,15 @@ import ThemedSkeletonWrapper from "../styles/ThemedSkeletonWrapper";
  * Displays the variables page, given the name of a project.
  */
 export const PageEnvironmentVariables = ({ router }) => {
-  const { data, error, loading } = useQuery(
+  const { data, error, loading, refetch } = useQuery(
     EnvironmentByOpenshiftProjectNameWithEnvVarsQuery,
     {
       variables: { openshiftProjectName: router.query.openshiftProjectName },
     }
   );
 
+  const handleRefetch = async () => await refetch({ openshiftProjectName: router.query.openshiftProjectName });
+
   if (loading) {
     const projectSlug = router.asPath.match(/projects\/([^/]+)/)?.[1];
     const openshiftProjectName = router.query.openshiftProjectName;
@@ -99,7 +101,7 @@ export const PageEnvironmentVariables = ({ router }) => {
               A deployment is required to apply any changes to Environment
               variables.
             </div>
-            <EnvironmentVariables environment={environment} />
+            <EnvironmentVariables environment={environment} onVariableAdded={handleRefetch} />
           </div>
         </VariableWrapper>
       </MainLayout>

diff --git a/src/pages/project-variables.js b/src/pages/project-variables.js
@@ -19,10 +19,12 @@ import ProjectNavTabsSkeleton from "components/ProjectNavTabs/ProjectNavTabsSkel
  * Displays a list of all variables for a project.
  */
 export const PageProjectVariables = ({ router }) => {
-  const { data, error, loading } = useQuery(ProjectByNameWithEnvVarsQuery, {
+  const { data, error, loading, refetch } = useQuery(ProjectByNameWithEnvVarsQuery, {
     variables: { name: router.query.projectName },
   });
 
+  const handleRefetch = async () => await refetch({ name: router.query.projectName });
+
   if (error) {
     return <QueryError error={error} />;
   }
@@ -82,7 +84,7 @@ export const PageProjectVariables = ({ router }) => {
                 A deployment is required to apply any changes to Project
                 variables.
               </div>
-              <ProjectVariables project={project} />
+              <ProjectVariables project={project} onVariableAdded={handleRefetch} />
             </div>
           </VariableWrapper>
         </ProjectWrapper>