feat(frontend): port DeleteModelRegistry modal (#855)

Signed-off-by: Jenny <[email protected]>

revert ModelRegistriesTableRow

Author: jenny-s51

clients/ui/frontend/src/app/pages/settings/DeleteModelRegistryModal.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Content, TextInput, Stack, StackItem } from '@patternfly/react-core';
+import { Modal } from '@patternfly/react-core/deprecated';
+import { ModelRegistry } from '~/app/types';
+import DashboardModalFooter from '~/shared/components/DashboardModalFooter';
+
+type DeleteModelRegistryModalProps = {
+  modelRegistry: ModelRegistry;
+  onClose: () => void;
+  refresh: () => void;
+};
+
+const DeleteModelRegistryModal: React.FC<DeleteModelRegistryModalProps> = ({
+  modelRegistry: mr,
+  onClose,
+  refresh,
+}) => {
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [error, setError] = React.useState<Error>();
+  const [confirmInputValue, setConfirmInputValue] = React.useState('');
+  const isDisabled = confirmInputValue.trim() !== mr.name || isSubmitting;
+
+  const onBeforeClose = () => {
+    setConfirmInputValue('');
+    setIsSubmitting(false);
+    setError(undefined);
+    onClose();
+  };
+
+  const onConfirm = async () => {
+    setIsSubmitting(true);
+    setError(undefined);
+    try {
+      // TODO: implement when CRD endpoint is ready
+      // await deleteModelRegistryBackend(mr.name);
+      await refresh();
+      onBeforeClose();
+    } catch (e) {
+      if (e instanceof Error) {
+        setError(e);
+      }
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal
+      data-testid="delete-mr-modal"
+      titleIconVariant="warning"
+      title="Delete model registry?"
+      isOpen
+      onClose={onClose}
+      variant="medium"
+      footer={
+        <DashboardModalFooter
+          submitLabel="Delete model registry"
+          submitButtonVariant="danger"
+          onSubmit={onConfirm}
+          onCancel={onBeforeClose}
+          isSubmitLoading={isSubmitting}
+          isSubmitDisabled={isDisabled}
+          error={error}
+          alertTitle="Error deleting model registry"
+        />
+      }
+    >
+      <Stack hasGutter>
+        <StackItem>
+          <Content>
+            <Content component="p">
+              The <strong>{mr.name}</strong> model registry, its default group, and any permissions
+              associated with it will be deleted. Data located in the database connected to the
+              registry will be unaffected.
+            </Content>
+            <Content component="p">
+              Type <strong>{mr.name}</strong> to confirm deletion:
+            </Content>
+          </Content>
+        </StackItem>
+        <StackItem>
+          <TextInput
+            id="confirm-delete-input"
+            data-testid="confirm-delete-input"
+            aria-label="Confirm delete input"
+            value={confirmInputValue}
+            onChange={(_e, newValue) => setConfirmInputValue(newValue)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' && !isDisabled) {
+                onConfirm();
+              }
+            }}
+          />
+        </StackItem>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default DeleteModelRegistryModal;

clients/ui/frontend/src/app/pages/settings/ModelRegistriesTable.tsx

@@ -4,48 +4,72 @@ import { ModelRegistry } from '~/app/types';
 import { Table } from '~/shared/components/table';
 import { modelRegistryColumns } from './columns';
 import ModelRegistriesTableRow from './ModelRegistriesTableRow';
+import DeleteModelRegistryModal from './DeleteModelRegistryModal';
 
 type ModelRegistriesTableProps = {
   modelRegistries: ModelRegistry[];
   onCreateModelRegistryClick: () => void;
+  refresh: () => void;
 };
 
 const ModelRegistriesTable: React.FC<ModelRegistriesTableProps> = ({
   modelRegistries,
   onCreateModelRegistryClick,
-}) => (
+  refresh,
+}) => {
   // TODO: [Midstream] Complete once we have permissions
-  <Table
-    data-testid="model-registries-table"
-    data={modelRegistries}
-    columns={modelRegistryColumns}
-    toolbarContent={
-      <Toolbar>
-        <ToolbarContent>
-          <ToolbarItem>
-            <Button
-              data-testid="create-model-registry-button"
-              variant="primary"
-              onClick={onCreateModelRegistryClick}
-            >
-              Create model registry
-            </Button>
-          </ToolbarItem>
-        </ToolbarContent>
-      </Toolbar>
-    }
-    rowRenderer={(mr) => (
-      <ModelRegistriesTableRow
-        key={mr.name}
-        modelRegistry={mr}
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onDeleteRegistry={() => {}}
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onEditRegistry={() => {}}
+
+  const [deleteRegistry, setDeleteRegistry] = React.useState<ModelRegistry>();
+
+  return (
+    <>
+      <Table
+        data-testid="model-registries-table"
+        data={modelRegistries}
+        columns={modelRegistryColumns}
+        toolbarContent={
+          <Toolbar>
+            <ToolbarContent>
+              <ToolbarItem>
+                <Button
+                  data-testid="create-model-registry-button"
+                  variant="primary"
+                  onClick={onCreateModelRegistryClick}
+                >
+                  Create model registry
+                </Button>
+              </ToolbarItem>
+            </ToolbarContent>
+          </Toolbar>
+        }
+        rowRenderer={(mr) => (
+          <ModelRegistriesTableRow
+            key={mr.name}
+            modelRegistry={mr}
+            onDeleteRegistry={(i) => setDeleteRegistry(i)}
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            onEditRegistry={() => {}}
+          />
+        )}
+        variant="compact"
       />
-    )}
-    variant="compact"
-  />
-);
+      {/* TODO: implement when CRD endpoint is ready */}
+      {/* {editRegistry ? (
+        <CreateModal
+          modelRegistry={editRegistry}
+          onClose={() => setEditRegistry(undefined)}
+          refresh={refresh}
+        />
+      ) : null} */}
+      {deleteRegistry ? (
+        <DeleteModelRegistryModal
+          modelRegistry={deleteRegistry}
+          onClose={() => setDeleteRegistry(undefined)}
+          refresh={refresh}
+        />
+      ) : null}
+    </>
+  );
+};
 
 export default ModelRegistriesTable;

clients/ui/frontend/src/app/pages/settings/ModelRegistrySettings.tsx

@@ -25,6 +25,7 @@ const ModelRegistrySettings: React.FC = () => {
 
   const loaded = mrloaded; //&& roleBindings.loaded;
 
+  // TODO: implement when refreshModelRegistries() and refreshRulesReview() are added
   // const refreshAll = React.useCallback(
   //   () => Promise.all([refreshModelRegistries(), refreshRulesReview()]),
   //   [refreshModelRegistries, refreshRulesReview],
@@ -74,6 +75,8 @@ const ModelRegistrySettings: React.FC = () => {
           onCreateModelRegistryClick={() => {
             setCreateModalOpen(true);
           }}
+          // eslint-disable-next-line @typescript-eslint/no-empty-function
+          refresh={() => {}}
         />
       </ApplicationsPage>
       {createModalOpen ? (