Merge pull request #165 from uselagoon/variable_error_handling

Adds error alert for Variables tabs
uselagoon · Oct 4, 2023 · 0be2150 · 0be2150
2 parents 9a9c549 + b61b7ef
commit 0be2150
Show file tree

Hide file tree

Showing 6 changed files with 159 additions and 20 deletions.
diff --git a/src/components/Alert/StyledAlert.tsx b/src/components/Alert/StyledAlert.tsx
@@ -0,0 +1,45 @@
+import styled, { css } from 'styled-components';
+import { color } from "lib/variables";
+
+const sharedStyles = css`
+  position: relative;
+  padding: 1rem;
+  margin-bottom: 2rem;
+  border-radius: 0.25rem;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const StyledAlert = styled.div`
+  border-radius: 0.25rem;
+  &.error {
+    color: ${color.white};
+    background-color: #d68100;
+
+    .anticon-close-circle {
+      margin-right: 4px;
+      vertical-align: text-top;
+    }
+  }
+
+  .closebtn {
+    margin: 4px 8px 0 0;
+    color: white;
+    font-weight: bold;
+    float: right;
+    font-size: 22px;
+    line-height: 20px;
+    cursor: pointer;
+    transition: 0.3s;
+    cursor: pointer;
+    
+    &.closebtn:hover {
+      color: black;
+    }
+  }
+  
+`;
+
+export const StyledAlertContent = styled.div`
+    ${sharedStyles}
+`;
diff --git a/src/components/Alert/index.js b/src/components/Alert/index.js
@@ -0,0 +1,29 @@
+import React from "react";
+import {StyledAlert, StyledAlertContent} from './StyledAlert';
+
+export const Alert = ({
+      type, header, message, closeAlert
+}) => {
+    const createClassName = () => {
+      let className = `${type ? `${type} alert-element` : 'alert-element'}`;
+      return className;
+    };
+
+    const AlertElement = 
+      <StyledAlert className={createClassName()}>
+        <span className="closebtn" onClick={() => closeAlert()}>
+          &times;
+        </span>
+        <StyledAlertContent>
+          <span>
+            <b>{header}</b> {message}
+          </span>
+        </StyledAlertContent>
+      </StyledAlert>
+
+
+
+    return <>{AlertElement}</>;
+}
+
+export default Alert;
diff --git a/src/components/EnvironmentVariables/StyledEnvironmentVariables.tsx b/src/components/EnvironmentVariables/StyledEnvironmentVariables.tsx
@@ -122,6 +122,11 @@ export const StyledEnvironmentVariableDetails = styled.div`
     display: inline-block;
     width: 36px;
     height: 36px;
+    
+    &.value-btn {
+      width: 90px;
+      height: 17px;
+    }
   }
   .loader:after {
     content: " ";
@@ -134,6 +139,11 @@ export const StyledEnvironmentVariableDetails = styled.div`
     border-color: ${color.blue} transparent ${color.blue} transparent;
     animation: loader 1.2s linear infinite;
   }
+  .loader.value-btn:after {
+    margin: 0 auto;
+    border: 2px solid ${color.white};
+    border-color: ${color.white} transparent ${color.white} transparent;
+  }
   @keyframes loader {
     0% {
       transform: rotate(0deg);

diff --git a/src/components/EnvironmentVariables/index.js b/src/components/EnvironmentVariables/index.js
@@ -19,6 +19,7 @@ import Image from "next/image";
 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'
 
 /**
  * Displays the environment variable information.
@@ -32,7 +33,7 @@ const hashValue = (value) => {
   return hashedVal;
 };
 
-const EnvironmentVariables = ({ environment, onVariableAdded, closeModal }) => {
+const EnvironmentVariables = ({ environment, onVariableAdded }) => {
   let displayVars = environment.envVariables;
   let displayProjectVars = environment.project.envVariables;
   let initValueState = new Array(displayVars.length).fill(false);
@@ -45,12 +46,26 @@ const EnvironmentVariables = ({ environment, onVariableAdded, closeModal }) => {
   const [updateVarValue, setUpdateVarValue ] = useState('');
   const [updateVarName, setUpdateVarName ] = useState('');
   const [updateVarScope, setUpdateVarScope ] = useState('');
+  const [environmentErrorAlert, setEnvironmentErrorAlert] = useState(false);
+  const [projectErrorAlert, setProjectErrorAlert] = useState(false);
+
+  const closeEnvironmentError = () => {
+    setEnvironmentErrorAlert(false);
+  };
+
+  const closeProjectError = () => {
+    setProjectErrorAlert(false);
+  };
 
   const [
     getEnvVarValues,
     { loading: envLoading, error: envError, data: envValues },
   ] = useLazyQuery(EnvironmentByProjectNameWithEnvVarsValueQuery, {
     variables: { openshiftProjectName: environment.openshiftProjectName },
+    onError: () => {
+      setOpenEnvVars(!openEnvVars);
+      setEnvironmentErrorAlert(true);
+    }
   });
 
   if (envValues) {
@@ -64,6 +79,10 @@ const EnvironmentVariables = ({ environment, onVariableAdded, closeModal }) => {
     { loading: prjLoading, error: prjError, data: prjEnvValues },
   ] = useLazyQuery(EnvironmentProjectByProjectNameWithEnvVarsValueQuery, {
     variables: { openshiftProjectName: environment.openshiftProjectName },
+    onError: () => {
+      setOpenPrjVars(!openPrjVars);
+      setProjectErrorAlert(true);
+    }
   });
 
   if (prjEnvValues) {
@@ -132,6 +151,16 @@ const EnvironmentVariables = ({ environment, onVariableAdded, closeModal }) => {
         </>
       ) : (
         <>
+          {
+            environmentErrorAlert && (
+              <Alert 
+                type="error"
+                closeAlert={closeEnvironmentError}
+                header="Unauthorized:"
+                message="You don't have permission to view environment variable values. Contact your administrator to obtain the relevant permissions."
+              />
+            )
+          }         
           <div className="header">
             <label>Environment Variables</label>
             <div className="header-buttons">
@@ -152,7 +181,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded, closeModal }) => {
                 aria-controls="example-collapse-text"
                 aria-expanded={openEnvVars}
               >
-                {!openEnvVars ? "Show values" : "Hide values"}
+                { !openEnvVars ? "Show values" : "Hide values"}
               </Button>
             </div>
           </div>
@@ -261,12 +290,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded, closeModal }) => {
                             </div>
                           </Collapse>
                         ) : (
-                          <Collapse in={openEnvVars}>
-                            <div className="varValue" id={index}>
-                              Unauthorized: You don't have permission to view
-                              this variable.
-                            </div>
-                          </Collapse>
+                            ''
                         )}
                         <div className="varActions">
                           <VariableActions>
@@ -333,6 +357,16 @@ const EnvironmentVariables = ({ environment, onVariableAdded, closeModal }) => {
       ) : (
         <>
           <hr style={{ margin: "30px 0" }} />
+          {
+            projectErrorAlert && (
+              <Alert 
+                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."
+              />
+            )
+          }
           <div className="header">
             <label>Project Variables</label>
             <div className="header-buttons">
@@ -461,12 +495,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded, closeModal }) => {
                             </div>
                           </Collapse>
                         ) : (
-                          <Collapse in={openPrjVars}>
-                            <div className="varValue" id={index}>
-                              Unauthorized: You don't have permission to view
-                              this variable.
-                            </div>
-                          </Collapse>
+                          ''
                         )}
                       </div>
                     </Fragment>

diff --git a/src/components/ProjectVariables/StyledProjectVariables.tsx b/src/components/ProjectVariables/StyledProjectVariables.tsx
@@ -116,6 +116,11 @@ export const StyledProjectVariablesDetails = styled.div`
     display: inline-block;
     width: 36px;
     height: 36px;
+        
+    &.value-btn {
+      width: 90px;
+      height: 17px;
+    }
   }
   .loader:after {
     content: " ";
@@ -128,6 +133,11 @@ export const StyledProjectVariablesDetails = styled.div`
     border-color: ${color.blue} transparent ${color.blue} transparent;
     animation: loader 1.2s linear infinite;
   }
+  .loader.value-btn:after {
+    margin: 0 auto;
+    border: 2px solid ${color.white};
+    border-color: ${color.white} transparent ${color.white} transparent;
+  }
   @keyframes loader {
     0% {
       transform: rotate(0deg);

diff --git a/src/components/ProjectVariables/index.js b/src/components/ProjectVariables/index.js
@@ -16,6 +16,7 @@ import {
   VariableActions,
 } from "./StyledProjectVariables";
 import DeleteVariable from "components/DeleteVariable";
+import Alert from 'components/Alert'
 
 /**
  * Displays the projects variable information.
@@ -38,12 +39,22 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
   const [updateVarValue, setUpdateVarValue ] = useState('');
   const [updateVarName, setUpdateVarName ] = useState('');
   const [updateVarScope, setUpdateVarScope ] = useState('');
+  const [projectErrorAlert, setProjectErrorAlert] = useState(false);
+
+  const closeProjectError = () => {
+    setProjectErrorAlert(false);
+  };
+
 
   const [
     getPrjEnvVarValues,
     { loading: prjLoading, error: prjError, data: prjEnvValues },
   ] = useLazyQuery(ProjectByNameWithEnvVarsValueQuery, {
     variables: { name: project.name },
+    onError: () => {
+      setOpenPrjVars(!openPrjVars);
+      setProjectErrorAlert(true);
+    }
   });
 
   if (prjEnvValues) {
@@ -96,6 +107,16 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
         </>
       ) : (
         <>
+          {
+            projectErrorAlert && (
+              <Alert
+                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."
+              />
+            )
+          }
           <div className="header">
             <label>Project Variables</label>
             <div className="header-buttons">
@@ -227,12 +248,7 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
                             </div>
                           </Collapse>
                         ) : (
-                          <Collapse in={openPrjVars}>
-                            <div className="varValue" id={index}>
-                              Unauthorized: You don't have permission to view
-                              this variable.
-                            </div>
-                          </Collapse>
+                          ''
                         )}
                         <div className="varActions">
                           <VariableActions>