Merge pull request #249 from uselagoon/btn-redirect-update

Change: Redirects on environment deletion + confirmation messaging on environment creation
uselagoon · May 16, 2024 · 3cb5e54 · 3cb5e54
2 parents 29251bf + 07e4002
commit 3cb5e54
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 8 deletions.
diff --git a/cypress/support/actions/envOverview/EnvOverviewAction.ts b/cypress/support/actions/envOverview/EnvOverviewAction.ts
@@ -37,7 +37,7 @@ export default class EnvOverviewAction {
 
     cy.wait('@gqldeleteEnvironmentMutation');
 
-    environment.getDeleteInfo().invoke('text').should('eq', 'Delete queued');
+    cy.url().should('include', '/projects/lagoon-demo');
   }
 
   doDeleteEnvironmentError(branch: string) {

diff --git a/src/components/DeleteConfirm/index.js b/src/components/DeleteConfirm/index.js
@@ -18,6 +18,8 @@ export const DeleteConfirm = ({
   open,
   openModal,
   closeModal,
+  loading,
+  data,
 }) => {
   return (
     <React.Fragment>
@@ -38,7 +40,7 @@ export const DeleteConfirm = ({
               cancel
             </button>
             <Button disabled={inputValue !== deleteName} action={onDelete} variant="red" testId="deleteConfirm">
-              Delete
+              {loading ? 'Deleting...' : data ? 'Success' : 'Delete'}
             </Button>
           </div>
         </React.Fragment>

diff --git a/src/components/DeleteConfirm/index.stories.tsx b/src/components/DeleteConfirm/index.stories.tsx
@@ -51,6 +51,8 @@ export const WithConfirmationBlocked = ({
     open={openBoolean}
     openModal={openModalFunction}
     closeModal={closeModalFunction}
+    loading={false}
+    data={''}
   />
 );
 

diff --git a/src/components/Environment/index.js b/src/components/Environment/index.js
@@ -45,6 +45,20 @@ const Environment = ({ environment }) => {
 
     Router.push(taskNavObject.urlObject, taskNavObject.asPath);
   };
+
+  const handleEnvironmentDelete = () => {
+    const projectName = environment.project.name;
+
+    const navigationObject = {
+      urlObject: {
+        pathname: '/project',
+        query: { projectName: projectName },
+      },
+      asPath: `/projects/${projectName}`,
+    };
+
+    Router.push(navigationObject.urlObject, navigationObject.asPath);
+  };
   return (
     <StyledEnvironmentDetails className="details" data-cy="env-details">
       <div className="field-wrapper environmentType">
@@ -189,20 +203,22 @@ const Environment = ({ environment }) => {
             }}
           </Mutation>
         )}
-      <Mutation mutation={DeleteEnvironmentMutation} onError={e => console.error(e)}>
+      <Mutation
+        mutation={DeleteEnvironmentMutation}
+        onCompleted={handleEnvironmentDelete}
+        onError={e => console.error(e)}
+      >
         {(deleteEnvironment, { loading, called, error, data }) => {
           if (error) {
             return <div>{error.message}</div>;
           }
 
-          if (called) {
-            return <div>Delete queued</div>;
-          }
-
           return (
             <DeleteConfirm
               deleteType="environment"
               deleteName={environment.name}
+              loading={loading}
+              data={data}
               onDelete={() =>
                 deleteEnvironment({
                   variables: {

diff --git a/src/components/NewEnvironment/NewEnvironmentButton/index.js b/src/components/NewEnvironment/NewEnvironmentButton/index.js
@@ -19,7 +19,7 @@ export const NewEnvButton = ({ action, loading, error, disabled, data }) => {
     <>
       {contextHolder}
       <Button testId="create-env" action={action} loading={loading} disabled={disabled} variant="primary">
-        {loading ? 'Creating' : 'Create'}
+        {loading ? 'Creating' : data ? 'Success' : 'Create'}
       </Button>
       {error && openNotificationWithIcon(data.deployEnvironmentBranch)}
     </>