refactor remaining modals

kubeflow · Oct 24, 2024 · 40a2ec6 · 40a2ec6
1 parent de46108
commit 40a2ec6
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 25 deletions.
diff --git a/...s/ui/frontend/src/app/pages/modelRegistry/screens/components/ArchiveModelVersionModal.tsx b/...s/ui/frontend/src/app/pages/modelRegistry/screens/components/ArchiveModelVersionModal.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Alert,
   Form,
   FormGroup,
   Modal,
@@ -63,10 +64,16 @@ export const ArchiveModelVersionModal: React.FC<ArchiveModelVersionModalProps> =
       onClose={onClose}
       data-testid="archive-model-version-modal"
     >
-      <ModalHeader title="Archive version?" description={description} titleIconVariant="warning" />
+      <ModalHeader title="Archive version?" titleIconVariant="warning" />
       <ModalBody>
         <Form>
+          {error && (
+            <Alert data-testid="error-message-alert" isInline variant="danger" title={'Error'}>
+              {error.message}
+            </Alert>
+          )}
           <FormGroup>
+            {description}
             <TextInput
               id="confirm-archive-input"
               data-testid="confirm-archive-input"
@@ -83,14 +90,14 @@ export const ArchiveModelVersionModal: React.FC<ArchiveModelVersionModalProps> =
         </Form>
       </ModalBody>
       <DashboardModalFooter
-          onCancel={onClose}
-          onSubmit={onConfirm}
-          submitLabel="Archive"
-          isSubmitLoading={isSubmitting}
-          isSubmitDisabled={isDisabled}
-          error={error}
-          alertTitle="Error"
-        />
+        onCancel={onClose}
+        onSubmit={onConfirm}
+        submitLabel="Archive"
+        isSubmitLoading={isSubmitting}
+        isSubmitDisabled={isDisabled}
+        error={error}
+        alertTitle="Error"
+      />
     </Modal>
   );
 };
diff --git a/...i/frontend/src/app/pages/modelRegistry/screens/components/ArchiveRegisteredModelModal.tsx b/...i/frontend/src/app/pages/modelRegistry/screens/components/ArchiveRegisteredModelModal.tsx
@@ -70,16 +70,16 @@ export const ArchiveRegisteredModelModal: React.FC<ArchiveRegisteredModelModalPr
       onClose={onClose}
       data-testid="archive-registered-model-modal"
     >
-      <ModalHeader title="Archive model?" description={description} titleIconVariant="warning" />
-
+      <ModalHeader title="Archive model?" titleIconVariant="warning" />
       <ModalBody>
         <Form>
           {error && (
             <Alert data-testid="error-message-alert" isInline variant="danger" title={'Error'}>
-              {error.message}
+              {'error.message'}
             </Alert>
           )}
           <FormGroup>
+            {description}
             <TextInput
               id="confirm-archive-input"
               data-testid="confirm-archive-input"
@@ -101,6 +101,7 @@ export const ArchiveRegisteredModelModal: React.FC<ArchiveRegisteredModelModalPr
         submitLabel="Archive"
         isSubmitLoading={isSubmitting}
         isSubmitDisabled={isDisabled}
+        alertTitle="Error"
       />
     </Modal>
   );

diff --git a/...s/ui/frontend/src/app/pages/modelRegistry/screens/components/RestoreModelVersionModal.tsx b/...s/ui/frontend/src/app/pages/modelRegistry/screens/components/RestoreModelVersionModal.tsx
@@ -1,6 +1,14 @@
 import * as React from 'react';
-import { Modal } from '@patternfly/react-core/deprecated';
 import DashboardModalFooter from '~/app/components/DashboardModalFooter';
+import {
+  Form,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  Alert,
+  FormGroup,
+  TextInput,
+} from '@patternfly/react-core';
 
 interface RestoreModelVersionModalProps {
   onCancel: () => void;
@@ -37,26 +45,39 @@ export const RestoreModelVersionModal: React.FC<RestoreModelVersionModalProps> =
     }
   }, [onSubmit, onClose]);
 
+  const description = (
+    <>
+      <b>{modelVersionName}</b> will be restored and returned to the versions list.
+    </>
+  );
+
   return (
     <Modal
       isOpen={isOpen}
       title="Restore version?"
       variant="small"
       onClose={onClose}
-      footer={
-        <DashboardModalFooter
-          onCancel={onClose}
-          onSubmit={onConfirm}
-          submitLabel="Restore"
-          isSubmitLoading={isSubmitting}
-          error={error}
-          alertTitle="Error"
-          isSubmitDisabled={isSubmitting}
-        />
-      }
       data-testid="restore-model-version-modal"
     >
-      <b>{modelVersionName}</b> will be restored and returned to the versions list.
+      <ModalHeader title="Restore version?" />
+      <ModalBody>
+        <Form>
+          {error && (
+            <Alert data-testid="error-message-alert" isInline variant="danger" title={'Error'}>
+              {error.message}
+            </Alert>
+          )}
+        </Form>
+        {description}
+      </ModalBody>
+      <DashboardModalFooter
+        onCancel={onClose}
+        onSubmit={onConfirm}
+        submitLabel="Restore"
+        isSubmitLoading={isSubmitting}
+        alertTitle="Error"
+        isSubmitDisabled={isSubmitting}
+      />
     </Modal>
   );
 };