feat(HMS-2994): add delete confirmation modal

When the kebab item 'delete' is clicked on the page that list the domains, and at the detail domain page. Signed-off-by: Alejandro Visiedo <[email protected]>
podengo-project · Apr 23, 2024 · 685fa7d · 685fa7d
1 parent 8e54695
commit 685fa7d
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 19 deletions.
diff --git a/src/Components/ConfirmDeleteDomain/ConfirmDeleteDomain.scss b/src/Components/ConfirmDeleteDomain/ConfirmDeleteDomain.scss
@@ -0,0 +1 @@
+@import '~@redhat-cloud-services/frontend-components-utilities/styles/variables';
diff --git a/src/Components/ConfirmDeleteDomain/ConfirmDeleteDomain.tsx b/src/Components/ConfirmDeleteDomain/ConfirmDeleteDomain.tsx
@@ -0,0 +1,44 @@
+import { Button, Modal } from '@patternfly/react-core';
+import './ConfirmDeleteDomain.scss';
+import React from 'react';
+import { Domain } from '../../Api/api';
+
+interface ConfirmDeleteDomainProps {
+  domain?: Domain;
+  isOpen?: boolean;
+  onDelete?: (domain?: Domain) => void;
+  onCancel?: () => void;
+}
+
+/**
+ * Modal dialog to confirm a domain deletion.
+ *
+ * @param props the props given by the smart component.
+ */
+const ConfirmDeleteDomain: React.FC<ConfirmDeleteDomainProps> = (props) => {
+  const onDeleteWrapper = () => {
+    props.onDelete !== undefined && props.onDelete(props.domain);
+  };
+  return (
+    <Modal
+      isOpen={props.isOpen}
+      titleIconVariant={'warning'}
+      variant="small"
+      title="Delete identity domain registration"
+      ouiaId="ModalConfirmDeletion"
+      onClose={props.onCancel}
+      actions={[
+        <Button key="delete" variant="danger" onClick={onDeleteWrapper} ouiaId="ButtonModalConfirmDeletionDelete">
+          Delete
+        </Button>,
+        <Button key="cancel" variant="link" onClick={props.onCancel} ouiaId="ButtonModalConfirmDeletionCancel">
+          Cancel
+        </Button>,
+      ]}
+    >
+      Are you sure you want to delete? Deleting will avoid new host enrollments on &quot;{props.domain?.domain_name || ''}&quot; domain.
+    </Modal>
+  );
+};
+
+export default ConfirmDeleteDomain;
diff --git a/src/Components/DomainList/DomainList.tsx b/src/Components/DomainList/DomainList.tsx
@@ -7,6 +7,7 @@ import { Domain, DomainType, ResourcesApiFactory } from '../../Api/api';
 import { useNavigate } from 'react-router-dom';
 import { AppContext, AppContextType } from '../../AppContext';
 import { Button } from '@patternfly/react-core';
+import ConfirmDeleteDomain from '../ConfirmDeleteDomain/ConfirmDeleteDomain';
 
 export interface IColumnType<T> {
   key: string;
@@ -107,6 +108,8 @@ export const DomainList = () => {
   const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc'>('asc');
 
   const [domains, setDomains] = useState<Domain[]>(context?.domains || ([] as Domain[]));
+  const [isOpenConfirmDelete, setIsOpenConfirmDelete] = useState<boolean>(false);
+  const [currentDomain, setCurrentDomain] = useState<Domain>();
   const enabledText = 'Enabled';
   const disabledText = 'Disabled';
 
@@ -164,8 +167,17 @@ export const DomainList = () => {
     }
   };
 
-  const onDelete = (domain: Domain) => {
-    if (domain.domain_id !== undefined) {
+  const OnShowConfirmDelete = (domain: Domain) => {
+    setIsOpenConfirmDelete(true);
+    setCurrentDomain(domain);
+  };
+
+  const onDismissConfirmDelete = () => {
+    setIsOpenConfirmDelete(true);
+  };
+
+  const onDelete = (domain?: Domain) => {
+    if (domain?.domain_id !== undefined) {
       const domainId = domain.domain_id;
       resources_api
         .deleteDomain(domainId)
@@ -196,7 +208,7 @@ export const DomainList = () => {
     },
     {
       title: 'Delete',
-      onClick: () => onDelete(domain),
+      onClick: () => OnShowConfirmDelete(domain),
       ouiaId: 'ButtonActionDelete',
     },
   ];
@@ -261,6 +273,7 @@ export const DomainList = () => {
           })}
         </Tbody>
       </TableComposable>
+      <ConfirmDeleteDomain domain={currentDomain} isOpen={isOpenConfirmDelete} onCancel={onDismissConfirmDelete} onDelete={onDelete} />
     </>
   );
 };

diff --git a/src/Routes/DetailPage/DetailPage.tsx b/src/Routes/DetailPage/DetailPage.tsx
@@ -22,6 +22,7 @@ import { Domain, ResourcesApiFactory } from '../../Api/api';
 import { AppContext, AppContextType } from '../../AppContext';
 import { DetailGeneral } from './Components/DetailGeneral/DetailGeneral';
 import { DetailServers } from './Components/DetailServers/DetailServers';
+import ConfirmDeleteDomain from '../../Components/ConfirmDeleteDomain/ConfirmDeleteDomain';
 
 /**
  * It represents the detail page to show the information about a
@@ -40,6 +41,7 @@ const DetailPage = () => {
 
   // States
   const [domain, setDomain] = useState<Domain | undefined>(appContext?.getDomain(domain_id || ''));
+  const [isOpenConfirmDelete, setIsOpenConfirmDelete] = useState<boolean>(false);
 
   console.log('INFO:DetailPage render:domain_id=' + domain_id);
 
@@ -82,26 +84,54 @@ const DetailPage = () => {
     setIsKebabOpen(!isKebabOpen);
   };
 
+  const OnShowConfirmDelete = (domain: Domain) => {
+    setIsOpenConfirmDelete(true);
+  };
+
+  const onDismissConfirmDelete = () => {
+    setIsOpenConfirmDelete(false);
+  };
+
+  const onDelete = (domain?: Domain) => {
+    if (domain?.domain_id !== undefined) {
+      const domainId = domain.domain_id;
+      resources_api
+        .deleteDomain(domainId)
+        .then((response) => {
+          if (response.status == 204) {
+            navigate('/domains', { replace: true });
+          } else {
+            // TODO show-up notification with error message
+          }
+        })
+        .catch((error) => {
+          // TODO show-up notification with error message
+          console.log('error onClose: ' + error);
+        });
+    }
+  };
+
   const dropdownItems: JSX.Element[] = [
     <DropdownItem
       key="delete"
       onClick={(value) => {
-        console.log('Deleting domain: ' + value);
-        if (domain_id !== undefined) {
-          resources_api
-            .deleteDomain(domain_id)
-            .then((res) => {
-              if (res.status === 204) {
-                console.info('Domain ' + value + ' was deleted');
-                appContext?.deleteDomain(domain_id);
-                navigate('/domains', { replace: true });
-              }
-            })
-            .catch((reason) => {
-              // TODO Send error notification to chrome
-              console.log(reason);
-            });
-        }
+        domain !== undefined && OnShowConfirmDelete(domain);
+        // console.log('Deleting domain: ' + value);
+        // if (domain_id !== undefined) {
+        //   resources_api
+        //     .deleteDomain(domain_id)
+        //     .then((res) => {
+        //       if (res.status === 204) {
+        //         console.info('Domain ' + value + ' was deleted');
+        //         appContext?.deleteDomain(domain_id);
+        //         navigate('/domains', { replace: true });
+        //       }
+        //     })
+        //     .catch((reason) => {
+        //       // TODO Send error notification to chrome
+        //       console.log(reason);
+        //     });
+        // }
       }}
       ouiaId="ButtonDetailsDelete"
     >
@@ -168,6 +198,7 @@ const DetailPage = () => {
           </Card>
         </PageSection>
       </Page>
+      <ConfirmDeleteDomain domain={domain} isOpen={isOpenConfirmDelete} onCancel={onDismissConfirmDelete} onDelete={onDelete} />
     </>
   );
 };