add delete accelerator profile modal

updated text fix test fix
opendatahub-io · Nov 16, 2023 · 701bbc4 · 701bbc4
1 parent 8c9e2ec
commit 701bbc4
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 26 deletions.
diff --git a/frontend/src/__tests__/integration/pages/acceleratorProfiles/AcceleratorProfiles.spec.ts b/frontend/src/__tests__/integration/pages/acceleratorProfiles/AcceleratorProfiles.spec.ts
@@ -51,3 +51,21 @@ test('List Accelerator profiles', async ({ page }) => {
     .allInnerTexts();
   await expect(firstRowIdentifier[0]).toBe('nvidia.com/gpu');
 });
+
+test('Delete Accelerator profile', async ({ page }) => {
+  await page.goto(
+    navigateToStory('pages-acceleratorprofiles-acceleratorprofiles', 'list-accelerator-profiles'),
+  );
+  await page
+    .getByRole('row', {
+      name: 'Test Accelerator',
+    })
+    .getByRole('button', { name: 'Actions' })
+    .click();
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await expect(page.getByRole('button', { name: 'Delete accelerator profile' })).toBeDisabled();
+  await page.getByRole('textbox', { name: 'Delete modal input' }).fill('Test Accelerator');
+  await expect(page.getByRole('button', { name: 'Delete accelerator profile' })).toBeEnabled();
+  await page.getByRole('button', { name: 'Delete accelerator profile' }).click();
+  expect(page.getByRole('heading', { name: 'Danger alert: Error deleting Test Accelerator' }));
+});
diff --git a/frontend/src/pages/acceleratorProfiles/screens/list/AcceleratorProfiles.tsx b/frontend/src/pages/acceleratorProfiles/screens/list/AcceleratorProfiles.tsx
@@ -20,7 +20,7 @@ const description = `Manage accelerator profile settings for users in your organ
 
 const AcceleratorProfiles: React.FC = () => {
   const { dashboardNamespace } = useDashboardNamespace();
-  const [accelerators, loaded, loadError] = useAccelerators(dashboardNamespace);
+  const [accelerators, loaded, loadError, refresh] = useAccelerators(dashboardNamespace);
 
   const navigate = useNavigate();
 
@@ -60,7 +60,10 @@ const AcceleratorProfiles: React.FC = () => {
       emptyStatePage={noAcceleratorProfilePageSection}
       provideChildrenPadding
     >
-      <AcceleratorProfilesTable accelerators={accelerators} />
+      <AcceleratorProfilesTable
+        acceleratorProfiles={accelerators}
+        refreshAcceleratorProfiles={refresh}
+      />
     </ApplicationsPage>
   );
 };

diff --git a/frontend/src/pages/acceleratorProfiles/screens/list/AcceleratorProfilesTable.tsx b/frontend/src/pages/acceleratorProfiles/screens/list/AcceleratorProfilesTable.tsx
@@ -5,35 +5,58 @@ import { Table } from '~/components/table';
 import AcceleratorProfilesTableRow from '~/pages/acceleratorProfiles/screens/list/AcceleratorProfilesTableRow';
 import { AcceleratorKind } from '~/k8sTypes';
 import { columns } from '~/pages/acceleratorProfiles/screens/list/const';
+import DeleteAcceleratorProfileModal from './DeleteAcceleratorProfileModal';
 
 type AcceleratorProfilesTableProps = {
-  accelerators: AcceleratorKind[];
+  acceleratorProfiles: AcceleratorKind[];
+  refreshAcceleratorProfiles: () => void;
 };
 
-const AcceleratorProfilesTable: React.FC<AcceleratorProfilesTableProps> = ({ accelerators }) => {
+const AcceleratorProfilesTable: React.FC<AcceleratorProfilesTableProps> = ({
+  acceleratorProfiles,
+  refreshAcceleratorProfiles,
+}) => {
   const navigate = useNavigate();
+  const [deleteAcceleratorProfile, setDeleteAcceleratorProfile] = React.useState<
+    AcceleratorKind | undefined
+  >();
 
   return (
-    <Table
-      id="accelerator-profile-table"
-      enablePagination
-      data={accelerators}
-      columns={columns}
-      emptyTableView={'No projects match your filters.'}
-      rowRenderer={(accelerator) => (
-        <AcceleratorProfilesTableRow key={accelerator.metadata.name} accelerator={accelerator} />
-      )}
-      toolbarContent={
-        <ToolbarItem>
-          <Button
-            data-id="create-accelerator-profile"
-            onClick={() => navigate(`/acceleratorProfiles/create`)}
-          >
-            Create accelerator profile
-          </Button>
-        </ToolbarItem>
-      }
-    />
+    <>
+      <Table
+        id="accelerator-profile-table"
+        enablePagination
+        data={acceleratorProfiles}
+        columns={columns}
+        emptyTableView={'No projects match your filters.'}
+        rowRenderer={(accelerator) => (
+          <AcceleratorProfilesTableRow
+            key={accelerator.metadata.name}
+            accelerator={accelerator}
+            handleDelete={(acceleratorProfile) => setDeleteAcceleratorProfile(acceleratorProfile)}
+          />
+        )}
+        toolbarContent={
+          <ToolbarItem>
+            <Button
+              data-id="create-accelerator-profile"
+              onClick={() => navigate(`/acceleratorProfiles/create`)}
+            >
+              Create accelerator profile
+            </Button>
+          </ToolbarItem>
+        }
+      />
+      <DeleteAcceleratorProfileModal
+        acceleratorProfile={deleteAcceleratorProfile}
+        onClose={(deleted) => {
+          if (deleted) {
+            refreshAcceleratorProfiles();
+          }
+          setDeleteAcceleratorProfile(undefined);
+        }}
+      />
+    </>
   );
 };
 

diff --git a/frontend/src/pages/acceleratorProfiles/screens/list/AcceleratorProfilesTableRow.tsx b/frontend/src/pages/acceleratorProfiles/screens/list/AcceleratorProfilesTableRow.tsx
@@ -15,9 +15,13 @@ import { relativeTime } from '~/utilities/time';
 
 type AcceleratorProfilesTableRow = {
   accelerator: AcceleratorKind;
+  handleDelete: (accelerator: AcceleratorKind) => void;
 };
 
-const AcceleratorProfilesTableRow: React.FC<AcceleratorProfilesTableRow> = ({ accelerator }) => {
+const AcceleratorProfilesTableRow: React.FC<AcceleratorProfilesTableRow> = ({
+  accelerator,
+  handleDelete,
+}) => {
   const navigate = useNavigate();
   const modifiedDate = accelerator.metadata.annotations?.['opendatahub.io/modified-date'];
 
@@ -65,7 +69,7 @@ const AcceleratorProfilesTableRow: React.FC<AcceleratorProfilesTableRow> = ({ ac
             },
             {
               title: 'Delete',
-              onClick: () => undefined,
+              onClick: () => handleDelete(accelerator),
             },
           ]}
         />

diff --git a/frontend/src/pages/acceleratorProfiles/screens/list/DeleteAcceleratorProfileModal.tsx b/frontend/src/pages/acceleratorProfiles/screens/list/DeleteAcceleratorProfileModal.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import DeleteModal from '~/pages/projects/components/DeleteModal';
+import { AcceleratorKind } from '~/k8sTypes';
+import { deleteAcceleratorProfile } from '~/services/acceleratorProfileService';
+
+type DeleteAcceleratorProfileModalProps = {
+  acceleratorProfile?: AcceleratorKind;
+  onClose: (deleted: boolean) => void;
+};
+
+const DeleteAcceleratorProfileModal: React.FC<DeleteAcceleratorProfileModalProps> = ({
+  acceleratorProfile,
+  onClose,
+}) => {
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [error, setError] = React.useState<Error | undefined>();
+
+  const onBeforeClose = (deleted: boolean) => {
+    onClose(deleted);
+    setIsDeleting(false);
+    setError(undefined);
+  };
+
+  const deleteName = acceleratorProfile?.spec.displayName || 'this accelerator profile';
+
+  return (
+    <DeleteModal
+      title="Delete accelerator profile?"
+      isOpen={!!acceleratorProfile}
+      onClose={() => onBeforeClose(false)}
+      submitButtonLabel="Delete accelerator profile"
+      onDelete={() => {
+        if (acceleratorProfile) {
+          setIsDeleting(true);
+          deleteAcceleratorProfile(acceleratorProfile.metadata.name)
+            .then(() => {
+              onBeforeClose(true);
+            })
+            .catch((e) => {
+              setError(e);
+              setIsDeleting(false);
+            });
+        }
+      }}
+      deleting={isDeleting}
+      error={error}
+      deleteName={deleteName}
+    >
+      The <b>{deleteName}</b> accelerator profile will be deleted and will be unavailable for any
+      workbenches and runtimes. Existing resources will retain their settings but cannot revert to
+      this profile once changed.
+    </DeleteModal>
+  );
+};
+
+export default DeleteAcceleratorProfileModal;