WIP, refactor modals to apply recommended PF component structure

kubeflow · Oct 23, 2024 · de46108 · de46108
1 parent e43803e
commit de46108
Showing 1 changed file with 33 additions and 27 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,6 +1,12 @@
 import * as React from 'react';
-import { Flex, FlexItem, Stack, StackItem, TextInput } from '@patternfly/react-core';
-import { Modal } from '@patternfly/react-core/deprecated';
+import {
+  Form,
+  FormGroup,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  TextInput,
+} from '@patternfly/react-core';
 import DashboardModalFooter from '~/app/components/DashboardModalFooter';
 
 interface ArchiveModelVersionModalProps {
@@ -41,35 +47,26 @@ export const ArchiveModelVersionModal: React.FC<ArchiveModelVersionModalProps> =
     }
   }, [onSubmit, onClose]);
 
+  const description = (
+    <>
+      <b>{modelVersionName}</b> will be archived and unavailable for use unless it is restored.
+      <br />
+      <br />
+      Type <strong>{modelVersionName}</strong> to confirm archiving:
+    </>
+  );
+
   return (
     <Modal
       isOpen={isOpen}
-      title="Archive version?"
-      titleIconVariant="warning"
       variant="small"
       onClose={onClose}
-      footer={
-        <DashboardModalFooter
-          onCancel={onClose}
-          onSubmit={onConfirm}
-          submitLabel="Archive"
-          isSubmitLoading={isSubmitting}
-          isSubmitDisabled={isDisabled}
-          error={error}
-          alertTitle="Error"
-        />
-      }
       data-testid="archive-model-version-modal"
     >
-      <Stack hasGutter>
-        <StackItem>
-          <b>{modelVersionName}</b> will be archived and unavailable for use unless it is restored.
-        </StackItem>
-        <StackItem>
-          <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }}>
-            <FlexItem>
-              Type <strong>{modelVersionName}</strong> to confirm archiving:
-            </FlexItem>
+      <ModalHeader title="Archive version?" description={description} titleIconVariant="warning" />
+      <ModalBody>
+        <Form>
+          <FormGroup>
             <TextInput
               id="confirm-archive-input"
               data-testid="confirm-archive-input"
@@ -82,9 +79,18 @@ export const ArchiveModelVersionModal: React.FC<ArchiveModelVersionModalProps> =
                 }
               }}
             />
-          </Flex>
-        </StackItem>
-      </Stack>
+          </FormGroup>
+        </Form>
+      </ModalBody>
+      <DashboardModalFooter
+          onCancel={onClose}
+          onSubmit={onConfirm}
+          submitLabel="Archive"
+          isSubmitLoading={isSubmitting}
+          isSubmitDisabled={isDisabled}
+          error={error}
+          alertTitle="Error"
+        />
     </Modal>
   );
 };