add confirmation dialog conditional functionality in ApplicationTable (#558)

Author: vigneshintel

apps/app-orch/VERSION

@@ -1 +1 @@
-4.0.5-dev
+4.0.5

apps/app-orch/deploy/Chart.yaml

@@ -4,10 +4,10 @@ apiVersion: v2
 name: orch-ui-app-orch
 description: Deploy the Edge Orchestrator app-orch pod
 type: application
-version: 4.0.5-dev
+version: 4.0.5
 # Default appVersion will be overwritten by a the build to use the version from package.json.
 
 # This value is supplied only to enable local unbuilt deployment of released content.
-appVersion: "4.0.5-dev"
+appVersion: "4.0.5"
 annotations: {}
 dependencies: []

apps/app-orch/src/components/organisms/applications/ApplicationTable/ApplicationTable.cy.tsx

@@ -64,19 +64,50 @@ describe("<ApplicationTable />", () => {
       });
       it("should redirect to the correct URL", () => {
         pom.empty.el.emptyActionBtn.click();
-        pom.confirmationDialog.el.confirmBtn.click();
         pom.getPath().should("eq", "/applications/applications/add");
       });
     });
     describe("the ribbon component", () => {
       it("should redirect to the correct URL", () => {
         pom.el.newAppRibbonButton.click();
-        pom.confirmationDialog.el.confirmBtn.click();
         pom.getPath().should("eq", "/applications/applications/add");
       });
     });
   });
 
+  describe("when confirmBeforeAdd is true", () => {
+    beforeEach(() => {
+      pom.interceptApis([pom.api.appEmpty]);
+      cy.mount(<div />, {
+        routerProps: { initialEntries: ["/applications/applications"] },
+        routerRule: [
+          {
+            path: "/applications/applications",
+            element: (
+              <ApplicationTable
+                kind={"KIND_NORMAL"}
+                hasPermission
+                confirmBeforeAdd
+              />
+            ),
+          },
+        ],
+      });
+      pom.waitForApis();
+      pom.empty.root.should("be.visible");
+    });
+    it("should show confirmation dialog and redirect on confirm via empty action", () => {
+      pom.empty.el.emptyActionBtn.click();
+      pom.confirmationDialog.el.confirmBtn.click();
+      pom.getPath().should("eq", "/applications/applications/add");
+    });
+    it("should show confirmation dialog and redirect on confirm via ribbon", () => {
+      pom.el.newAppRibbonButton.click();
+      pom.confirmationDialog.el.confirmBtn.click();
+      pom.getPath().should("eq", "/applications/applications/add");
+    });
+  });
+
   describe("when the Extensions table is empty", () => {
     beforeEach(() => {
       pom.interceptApis([pom.api.appEmpty]);
@@ -139,7 +170,6 @@ describe("<ApplicationTable />", () => {
       pom.waitForApis();
       pom.empty.root.should("be.visible");
       pom.empty.el.emptyActionBtn.click();
-      pom.confirmationDialog.el.confirmBtn.click();
       cy.get("#pathname").contains("/add");
     });
 

apps/app-orch/src/components/organisms/applications/ApplicationTable/ApplicationTable.tsx

@@ -58,6 +58,10 @@ interface ApplicationTableProps {
   hideRibbon?: boolean;
   isDialogOpen?: boolean;
 
+  /** When true, show a confirmation dialog before navigating to the add application page.
+   *  Use when ApplicationTable is embedded in a flow where navigation would lose progress (e.g. DeploymentPackageCreateEdit). */
+  confirmBeforeAdd?: boolean;
+
   // for Row Selection
   canSelect?: boolean;
   selectedIds?: string[];
@@ -76,6 +80,7 @@ const ApplicationTable = ({
   hideRibbon = false,
   manualSearch,
   isDialogOpen,
+  confirmBeforeAdd = false,
   canSelect,
   selectedIds = [],
   onSelect,
@@ -102,6 +107,14 @@ const ApplicationTable = ({
     navigate("/applications/applications/add", { relative: "path" });
   };
 
+  const handleAddApplicationClick = () => {
+    if (confirmBeforeAdd) {
+      setShowConfirmDialog(true);
+    } else {
+      handleAddApplicationConfirm();
+    }
+  };
+
   const columns: TableColumn<catalog.Application>[] = [
     {
       Header: "Name",
@@ -230,7 +243,7 @@ const ApplicationTable = ({
     if (kind === "KIND_NORMAL") {
       // Adding "Add application" action to applications
       emptyDataAction.push({
-        action: () => setShowConfirmDialog(true),
+        action: handleAddApplicationClick,
         name: `Add ${applicationType}`,
         disable: !hasPermission,
       });
@@ -258,9 +271,7 @@ const ApplicationTable = ({
     hasPermission ? (
       <Button
         data-cy="newAppRibbonButton"
-        onPress={() => {
-          setShowConfirmDialog(true);
-        }}
+        onPress={handleAddApplicationClick}
         isDisabled={!hasPermission}
       >
         Add Application
@@ -274,9 +285,7 @@ const ApplicationTable = ({
       >
         <Button
           data-cy="newAppRibbonButton"
-          onPress={() => {
-            setShowConfirmDialog(true);
-          }}
+          onPress={handleAddApplicationClick}
           isDisabled={!hasPermission}
         >
           Add Application
@@ -430,7 +439,7 @@ const ApplicationTable = ({
         />
       )}
 
-      {showConfirmDialog && (
+      {confirmBeforeAdd && showConfirmDialog && (
         <ConfirmationDialog
           isOpen={true}
           title="Confirm Navigation"

apps/app-orch/src/components/organisms/deploymentPackages/DeploymentPackageCreateEdit/DeploymentPackageCreateEdit.tsx

@@ -352,6 +352,7 @@ const DeploymentPackageCreateEdit = ({
               });
             }}
             kind={deploymentPackage.kind ?? "KIND_NORMAL"}
+            confirmBeforeAdd
           />
           <div className="deployment-package-create-edit__footer">
             <Button

apps/root/VERSION

@@ -1 +1 @@
-4.0.6-dev
+4.0.6

apps/root/deploy/Chart.yaml

@@ -4,10 +4,10 @@ apiVersion: v2
 name: orch-ui-root
 description: Deploy Edge Orchestrator UI pods on Kubernetes
 type: application
-version: 4.0.6-dev
+version: 4.0.6
 # Default appVersion will be overwritten by a the build to use the version from package.json.
 
 # This value is supplied only to enable local unbuilt deployment of released content.
-appVersion: "4.0.6-dev"
+appVersion: "4.0.6"
 annotations: {}
 dependencies: []

library/components/atomic-design/atoms/ConfirmationDialog/ConfirmationDialog.cy.tsx

@@ -160,4 +160,41 @@ describe("<ConfirmationDialog/>", () => {
       cyGet("dialog").should("exist").should("be.visible");
     });
   });
+
+  describe("reopening after dismiss", () => {
+    beforeEach(() => {
+      cy.mount(
+        <ConfirmationDialog
+          showTriggerButton
+          isOpen={false}
+          confirmCb={cy.stub().as("confirmCb")}
+          cancelCb={cy.stub().as("cancelCb")}
+          confirmBtnText="Confirm"
+          cancelBtnText="Cancel"
+          title="Test Dialog"
+          content="Test content"
+        />,
+      );
+    });
+
+    it("should reopen after being dismissed via the X button", () => {
+      pom.el.open.click();
+      cyGet("dialog").should("exist").should("be.visible");
+      cy.get(".spark-icon-cross").click();
+      pom.el.dialog.should("not.exist");
+
+      pom.el.open.click();
+      cyGet("dialog").should("exist").should("be.visible");
+    });
+
+    it("should reopen after being dismissed via the cancel button", () => {
+      pom.el.open.click();
+      cyGet("dialog").should("exist").should("be.visible");
+      cyGet("cancelBtn").click();
+      pom.el.dialog.should("not.exist");
+
+      pom.el.open.click();
+      cyGet("dialog").should("exist").should("be.visible");
+    });
+  });
 });

library/components/atomic-design/atoms/ConfirmationDialog/ConfirmationDialog.tsx

@@ -121,7 +121,14 @@ export const ConfirmationDialog = ({
 
   return (
     <div {...cy} className={cssSelector}>
-      <DialogTrigger isDismissible defaultOpen={isOpen} size={size}>
+      <DialogTrigger
+        isDismissible
+        defaultOpen={isOpen}
+        size={size}
+        onOpenChange={(open: boolean) => {
+          if (!open && cancelCb) cancelCb();
+        }}
+      >
         <Button
           id={triggerButtonId}
           data-cy="open"
@@ -146,7 +153,6 @@ export const ConfirmationDialog = ({
                   className="cd-button"
                   variant={cancelBtnVariant}
                   onPress={() => {
-                    if (cancelCb) cancelCb();
                     close();
                   }}
                   data-cy="cancelBtn"

package.json

@@ -10,30 +10,36 @@
     "app:admin:lint": "cd apps/admin && prettier --check ./src && eslint ./src",
     "app:admin:fix": "cd apps/admin && prettier --write ./src && eslint --fix ./src",
     "app:admin:cy:component": "cd tests/admin && cypress run --component --spec ../../apps/admin/unit-tests.cy.ts --env ORCH_DEFAULT_PASSWORD=${ORCH_DEFAULT_PASSWORD}",
+    "app:admin:cy:open": "cd tests/admin && cypress open --env ORCH_DEFAULT_PASSWORD=${ORCH_DEFAULT_PASSWORD}",
     "app:infra": "cd apps/infra && webpack serve --config=config/webpack.dev.js",
     "app:infra:build": "cd apps/infra && webpack --config=config/webpack.prod.js",
     "app:infra:lint": "cd apps/infra && prettier --check ./src && eslint ./src",
     "app:infra:fix": "cd apps/infra && prettier --write ./src && eslint --fix ./src",
     "app:infra:cy:component": "cd tests/infra && TZ=\"Asia/Kolkata\" cypress run --component --spec ../../apps/infra/unit-tests.cy.ts --env ORCH_DEFAULT_PASSWORD=${ORCH_DEFAULT_PASSWORD}",
+    "app:infra:cy:open": "cd tests/infra && cypress open --env ORCH_DEFAULT_PASSWORD=${ORCH_DEFAULT_PASSWORD}",
     "app:app-orch": "cd apps/app-orch && webpack serve --config=config/webpack.dev.js",
     "app:app-orch:build": "cd apps/app-orch && webpack --config=config/webpack.prod.js",
     "app:app-orch:lint": "cd apps/app-orch && prettier --check ./src && eslint ./src",
     "app:app-orch:fix": "cd apps/app-orch && prettier --write ./src && eslint --fix ./src",
     "app:app-orch:cy:component": "cd tests/app-orch && cypress run --component --spec ../../apps/app-orch/unit-tests.cy.ts --env ORCH_DEFAULT_PASSWORD=${ORCH_DEFAULT_PASSWORD}",
+    "app:app-orch:cy:open": "cd tests/app-orch && cypress open --env ORCH_DEFAULT_PASSWORD=${ORCH_DEFAULT_PASSWORD}",
     "app:root": "cd apps/root && webpack serve --config=config/webpack.dev.js",
     "app:root:build": "cd apps/root && webpack --config=config/webpack.prod.js",
     "app:root:lint": "cd apps/root && prettier --check ./src && eslint ./src",
     "app:root:fix": "cd apps/root && prettier --write ./src && eslint --fix ./src",
     "app:root:cy:component": "cd tests/root && cypress run --component --spec ../../apps/root/unit-tests.cy.ts --env ORCH_DEFAULT_PASSWORD=${ORCH_DEFAULT_PASSWORD}",
+    "app:root:cy:open": "cd tests/root && cypress open --env ORCH_DEFAULT_PASSWORD=${ORCH_DEFAULT_PASSWORD}",
     "app:cluster-orch": "cd apps/cluster-orch && webpack serve --config=config/webpack.dev.js",
     "app:cluster-orch:build": "cd apps/cluster-orch && webpack --config=config/webpack.prod.js",
     "app:cluster-orch:lint": "cd apps/cluster-orch && prettier --check ./src && eslint ./src",
     "app:cluster-orch:fix": "cd apps/cluster-orch && prettier --write ./src && eslint --fix ./src",
     "app:cluster-orch:cy:component": "cd tests/cluster-orch && cypress run --component --spec ../../apps/cluster-orch/unit-tests.cy.ts --env ORCH_DEFAULT_PASSWORD=${ORCH_DEFAULT_PASSWORD}",
+    "app:cluster-orch:cy:open": "cd tests/cluster-orch && cypress open --env ORCH_DEFAULT_PASSWORD=${ORCH_DEFAULT_PASSWORD}",
     "cypress:component": "cd tests && cypress open --component",
     "library:lint": "prettier --check ./library && eslint ./library",
     "library:fix": "cd library && prettier --write ./ && eslint --fix ./",
     "library:cy:component": "cd tests/library && cypress run --component --spec ./unit-tests.cy.ts --env ORCH_DEFAULT_PASSWORD=${ORCH_DEFAULT_PASSWORD}",
+    "library:cy:open": "cd tests/library && cypress open --env ORCH_DEFAULT_PASSWORD=${ORCH_DEFAULT_PASSWORD}",
     "tests:component": "cd tests && cypress open --component",
     "tests:e2e": "cd tests && cypress open --e2e --env EN_UUID=398395da-c10e-7c47-9b4f-efb34c0b261e",
     "tests:build": "cd tests && webpack build --config webpack.config.js",