Merge branch 'main' into cypress

uselagoon · Dec 8, 2023 · 0b575f8 · 0b575f8
2 parents 57908e9 + 8213d17
commit 0b575f8
Show file tree

Hide file tree

Showing 107 changed files with 2,528 additions and 1,473 deletions.
diff --git a/src/components/AddVariable/index.js b/src/components/AddVariable/index.js
@@ -6,7 +6,8 @@ import ReactSelect from "react-select";
 import { Mutation } from "react-apollo";
 import withLogic from "components/AddVariable/logic";
 import addOrUpdateEnvVariableMutation from "../../lib/mutation/AddOrUpdateEnvVariableByName";
-import { NewVariable, NewVariableModal, custom } from "./StyledAddVariable";
+import { NewVariable, NewVariableModal } from "./StyledAddVariable";
+import { Popconfirm } from 'antd';
 
 /**
  * Adds a Variable.
@@ -44,32 +45,40 @@ export const AddVariable = ({
   openModal,
   closeModal,
   setClear,
+  setEnvironmentErrorAlert,
+  setProjectErrorAlert,
+  action,
 }) => {
   const [updateName, setUpdateName] = useState(varName);
   const [updateValue, setUpdateValue] = useState(varValue);
   const [updateScope, setUpdateScope] = useState(varScope);
+  const [openPop, setOpenPop] = useState(false);
   const handleUpdateValue = (event) => {setUpdateValue(event.target.value)};
+  const handlePopCancel = () => {
+    setOpenPop(false);
+  };
+  const showPopconfirm = () => {
+    setOpenPop(true);
+  };
   useEffect(() => {
     setUpdateValue(varValue);
     setUpdateName(varName);
     setUpdateScope(varScope);
-  }, [varValue]);
+  }, [varName, varValue]);
+  const handleError = () => {
+    setProjectErrorAlert ? setProjectErrorAlert(true) : setEnvironmentErrorAlert(true)
+  }
 
   return (
-      <NewVariable>
+    <NewVariable>
       {
         icon ?
-            <Button variant='white' icon={icon} action={openModal}>
-              Update
-            </Button>
+          <Button variant='white' icon={icon} action={openModal}>
+            Update
+          </Button>
           :
-          <ButtonBootstrap 
-            data-cy="addVariable"
-            onClick={openModal}
-          >
-            {
-              noVars || !updateName ? "Add" : "Update"
-            }
+          <ButtonBootstrap data-cy="addVariable" onClick={openModal}>
+            Add
           </ButtonBootstrap>
       }
       <Modal
@@ -96,7 +105,7 @@ export const AddVariable = ({
                 name="results"
                 value={varScope ? scopeOptions.find((o) => o.value === updateScope.toUpperCase()) : scopeOptions.find((o) => o.value === inputScope)}
                 onChange={varScope ? (selectedOption) => setUpdateScope(selectedOption.value)
-                    : (selectedOption) => setInputScope(selectedOption.value)
+                  : (selectedOption) => setInputScope(selectedOption.value)
                 }
                 options={scopeOptions}
                 required
@@ -132,30 +141,27 @@ export const AddVariable = ({
             <a href="#" className="hover-state" onClick={closeModal}>
               cancel
             </a>
-            <Mutation mutation={addOrUpdateEnvVariableMutation} onError={(e)=>console.error(e)}>
-              {(addOrUpdateEnvVariableByName, { called, error, data }) => {
+            <Mutation mutation={addOrUpdateEnvVariableMutation} onError={e => console.error(e)}>
+              {(addOrUpdateEnvVariableByName, { called, error, data, loading }) => {
                 let updateVar = varValues.map((varName) => {
                   return varName.name;
                 });
                 updateVar = updateVar.includes(inputName);
-                if (error) {
-                  console.error(error);
-                  return (
-                    <div>
-                      Unauthorized: You don't have permission to create this
-                      variable.
-                    </div>
-                  );
-                }
 
                 if (data) {
                   refresh().then(setClear).then(closeModal);
                 }
 
-                if (updateVar && called || updateName && called ) {
-                  return <div>Updating variable</div>;
-                } else if (called) {
-                  return <div>Adding variable</div>;
+                if (error) {
+                  refresh().then(closeModal).then(handleError);
+                }
+
+                if (action === "add" && inputValue !== '' || action === "edit" && updateValue !== '' || action === "edit" && inputValue !== '') {
+                  if (action === "edit" && called ) {
+                    return <div>Updating variable</div>;
+                  } else if (action === "add" && called) {
+                    return <div>Adding variable</div>;
+                  }
                 }
 
                 const addOrUpdateEnvVariableHandler = () => {
@@ -170,26 +176,62 @@ export const AddVariable = ({
                       },
                     },
                   });
+                  setTimeout(() => {
+                    setOpenPop(false);
+                  }, 1000);
                 };
 
-                return (
-                  <ButtonBootstrap
-                    disabled={ updateName ?
-                      updateName === "" || updateValue === "" || updateScope === ""
-                        :
-                      inputName === "" || inputValue === "" || inputScope === ""
-                    }
-                    onClick={addOrUpdateEnvVariableHandler}
-                  >
-                    {varTarget == "Environment"
-                      ? updateVar || varName
-                        ? "Update environment variable"
-                        : "Add environment variable"
-                      : updateVar || varName
-                      ? "Update project variable"
-                      : "Add project variable"}
-                  </ButtonBootstrap>
-                );
+                if (action === "add" && inputValue === '' || action === "edit" && updateValue === '' && inputValue === '') {
+                  return (
+                    <Popconfirm
+                      title="No value set for this variable."
+                      description="Are you sure you want to continue?"
+                      open={openPop}
+                      onConfirm={addOrUpdateEnvVariableHandler}
+                      okButtonProps={{
+                        loading: loading,
+                      }}
+                      onCancel={handlePopCancel}
+                    >
+                      <ButtonBootstrap
+                        disabled={ updateName ?
+                          updateName === "" || updateScope === ""
+                          :
+                          inputName === "" || inputScope === ""
+                        }
+                        onClick={showPopconfirm}
+                      >
+                        {varTarget === "Environment"
+                          ? updateVar || varName
+                              ? "Update environment variable"
+                              : "Add environment variable"
+                          : updateVar || varName
+                              ? "Update project variable"
+                              : "Add project variable"}
+                      </ButtonBootstrap>
+                    </Popconfirm>
+                  );
+                } else {
+                  return (
+                    <ButtonBootstrap
+                      disabled={ updateName ?
+                          updateName === "" || updateScope === ""
+                          :
+                          inputName === "" || inputScope === ""
+                      }
+                      onClick={addOrUpdateEnvVariableHandler}
+                    >
+                      {varTarget === "Environment"
+                        ? updateVar || varName
+                            ? "Update environment variable"
+                            : "Add environment variable"
+                        : updateVar || varName
+                            ? "Update project variable"
+                            : "Add project variable"}
+                    </ButtonBootstrap>
+                  )
+                }
+
               }}
             </Mutation>
           </div>

diff --git a/src/components/Backups/StyledBackups.tsx b/src/components/Backups/StyledBackups.tsx
@@ -72,6 +72,23 @@ export const DataTable = styled.div`
       padding-right: 15px;
     }
 
+    .btn-download {
+      width: 173px;
+      padding-inline: 22px;
+      white-space: nowrap;
+
+      &-lg {
+        font-size: 80%;
+      }
+
+      @media (max-width: 1200px) {
+        width: unset;
+        &-lg {
+          font-size: initial;
+        }
+      }
+    }
+
     & > div {
       padding-left: 20px;
       @media ${bp.wideDown} {

diff --git a/src/components/Backups/index.stories.tsx b/src/components/Backups/index.stories.tsx
@@ -21,6 +21,7 @@ const backupsData = [
     restore: {
       status: 'completed',
       restoreLocation: 'https://example.com/backup',
+      restoreSize: 300
     },
   },
   {

diff --git a/src/components/Backups/index.tsx b/src/components/Backups/index.tsx
@@ -14,6 +14,7 @@ export interface BackupsProps {
     restore: {
       status: 'completed' | 'pending' | 'failed';
       restoreLocation?: string;
+      restoreSize?: number;
     };
   }[];
 }

diff --git a/src/components/Breadcrumbs/Breadcrumb.tsx b/src/components/Breadcrumbs/Breadcrumb.tsx
@@ -11,7 +11,7 @@ interface BreadcrumbProps {
   urlObject: {
     pathname: string;
     query: {
-      [key: string]: string;
+      [key: string]: string | number;
     };
   };
   asPath: string;

diff --git a/...onents/Breadcrumbs/Organizations/Group.js → ...nents/Breadcrumbs/Organizations/Group.tsx b/...onents/Breadcrumbs/Organizations/Group.js → ...nents/Breadcrumbs/Organizations/Group.tsx
@@ -1,18 +1,19 @@
 import React from 'react';
-import { getLinkData } from 'components/link/Organizations/Group';
+
 import Breadcrumb from 'components/Breadcrumbs/Breadcrumb';
+import { getLinkData } from 'components/link/Organizations/Group';
+
+interface Props {
+  groupSlug: string;
+  organizationSlug: string;
+  organizationId: number;
+  loading: boolean;
+}
 
-const GroupBreadcrumb = ({ groupSlug, organizationSlug, organizationName, loading }) => {
-  const linkData = getLinkData(groupSlug, organizationSlug, organizationName);
+const GroupBreadcrumb = ({ groupSlug, organizationSlug, organizationId, loading }: Props) => {
+  const linkData = getLinkData(groupSlug, organizationSlug, organizationId);
 
-  return (
-    <Breadcrumb
-      header="Group"
-      title={groupSlug}
-      loading={loading}
-      {... linkData}
-    />
-  );
+  return <Breadcrumb header="Group" title={groupSlug} loading={loading} {...linkData} />;
 };
 
 export default GroupBreadcrumb;
diff --git a/src/components/Breadcrumbs/Organizations/Groups.js b/src/components/Breadcrumbs/Organizations/Groups.js
diff --git a/src/components/Breadcrumbs/Organizations/Groups.tsx b/src/components/Breadcrumbs/Organizations/Groups.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Breadcrumb from 'components/Breadcrumbs/Breadcrumb';
+import { getLinkData } from 'components/link/Organizations/Groups';
+
+interface Props {
+  organizationSlug: string;
+  organizationId: number;
+}
+
+const GroupsBreadcrumb = ({ organizationSlug, organizationId }: Props) => {
+  const linkData = getLinkData(organizationSlug, organizationId);
+
+  return <Breadcrumb header="Groups" title="Groups" {...linkData} />;
+};
+
+export default GroupsBreadcrumb;
diff --git a/src/components/Breadcrumbs/Organizations/Organization.js b/src/components/Breadcrumbs/Organizations/Organization.js
diff --git a/src/components/Breadcrumbs/Organizations/Organization.tsx b/src/components/Breadcrumbs/Organizations/Organization.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Breadcrumb from 'components/Breadcrumbs/Breadcrumb';
+import { getLinkData } from 'components/link/Organizations/Organization';
+
+interface Props {
+  organizationSlug: string;
+  organizationId: number;
+  loading: boolean;
+}
+
+const OrganizationBreadcrumb = ({ organizationSlug, organizationId, loading }: Props) => {
+  const linkData = getLinkData(organizationSlug, organizationId);
+  return <Breadcrumb header="Organization" title={organizationSlug} loading={loading} {...linkData} />;
+};
+
+export default OrganizationBreadcrumb;
diff --git a/...ents/Breadcrumbs/Organizations/Project.js → ...nts/Breadcrumbs/Organizations/Project.tsx b/...ents/Breadcrumbs/Organizations/Project.js → ...nts/Breadcrumbs/Organizations/Project.tsx
@@ -1,17 +1,18 @@
 import React from 'react';
-import { getLinkData } from 'components/link/Organizations/ProjectGroup';
+
 import Breadcrumb from 'components/Breadcrumbs/Breadcrumb';
+import { getLinkData } from 'components/link/Organizations/ProjectGroup';
+
+interface Props {
+  projectSlug: string;
+  organizationSlug: string;
+  organizationId: number;
+}
 
-const OrgProjectBreadcrumb = ({ projectSlug, organizationSlug, organizationName }) => {
-  const linkData = getLinkData(projectSlug, organizationSlug, organizationName);
+const OrgProjectBreadcrumb = ({ projectSlug, organizationSlug, organizationId }: Props) => {
+  const linkData = getLinkData(projectSlug, organizationSlug, organizationId);
 
-  return (
-    <Breadcrumb
-      header="Project"
-      title={projectSlug}
-      {... linkData}
-    />
-  );
+  return <Breadcrumb header="Project" title={projectSlug} {...linkData} />;
 };
 
 export default OrgProjectBreadcrumb;
diff --git a/src/components/Breadcrumbs/Organizations/Projects.js b/src/components/Breadcrumbs/Organizations/Projects.js