Apply PF Breaking Change Best Practices to MUI Theme Stylesheet (#484)

Signed-off-by: Jenny <[email protected]> update comment Signed-off-by: Jenny <[email protected]> link to JIRA ticket Signed-off-by: Jenny <[email protected]> remove ticket references Signed-off-by: Jenny <[email protected]> fix styling bug with modal buttons, removes unneeded components from modal footer fix styling bug with modal buttons, removes unneeded components from modal footer Signed-off-by: Jenny <[email protected]> modal refactor, WIP WIP, refactor modals to apply recommended PF component structure refactor remaining modals refactor remaining modal format remove unused comment revert comment Signed-off-by: Jenny <[email protected]> fix tests Signed-off-by: Jenny <[email protected]> fix import order
kubeflow · Oct 28, 2024 · 6ce2832 · 6ce2832
1 parent 4aa8c49
commit 6ce2832
Show file tree

Hide file tree

Showing 6 changed files with 213 additions and 188 deletions.
diff --git a/clients/ui/frontend/src/app/components/DashboardModalFooter.tsx b/clients/ui/frontend/src/app/components/DashboardModalFooter.tsx
@@ -1,13 +1,5 @@
 import * as React from 'react';
-import {
-  ActionList,
-  ActionListItem,
-  Alert,
-  Button,
-  ButtonProps,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Button, ButtonProps, ModalFooter } from '@patternfly/react-core';
 
 type DashboardModalFooterProps = {
   submitLabel: string;
@@ -17,8 +9,6 @@ type DashboardModalFooterProps = {
   isSubmitDisabled: boolean;
   isSubmitLoading?: boolean;
   isCancelDisabled?: boolean;
-  alertTitle: string;
-  error?: Error;
 };
 
 const DashboardModalFooter: React.FC<DashboardModalFooterProps> = ({
@@ -29,46 +19,28 @@ const DashboardModalFooter: React.FC<DashboardModalFooterProps> = ({
   isSubmitDisabled,
   isSubmitLoading,
   isCancelDisabled,
-  error,
-  alertTitle,
 }) => (
-  // make sure alert uses the full width
-  <Stack hasGutter style={{ flex: 'auto' }}>
-    {error && (
-      <StackItem>
-        <Alert data-testid="error-message-alert" isInline variant="danger" title={alertTitle}>
-          {error.message}
-        </Alert>
-      </StackItem>
-    )}
-    <StackItem>
-      <ActionList>
-        <ActionListItem>
-          <Button
-            key="submit"
-            variant={submitButtonVariant}
-            isDisabled={isSubmitDisabled}
-            onClick={onSubmit}
-            isLoading={isSubmitLoading}
-            data-testid="modal-submit-button"
-          >
-            {submitLabel}
-          </Button>
-        </ActionListItem>
-        <ActionListItem>
-          <Button
-            key="cancel"
-            variant="link"
-            isDisabled={isCancelDisabled}
-            onClick={onCancel}
-            data-testid="modal-cancel-button"
-          >
-            Cancel
-          </Button>
-        </ActionListItem>
-      </ActionList>
-    </StackItem>
-  </Stack>
+  <ModalFooter>
+    <Button
+      key="submit"
+      variant={submitButtonVariant}
+      isDisabled={isSubmitDisabled}
+      onClick={onSubmit}
+      isLoading={isSubmitLoading}
+      data-testid="modal-submit-button"
+    >
+      {submitLabel}
+    </Button>
+    <Button
+      key="cancel"
+      variant="link"
+      isDisabled={isCancelDisabled}
+      onClick={onCancel}
+      data-testid="modal-cancel-button"
+    >
+      Cancel
+    </Button>
+  </ModalFooter>
 );
 
 export default DashboardModalFooter;
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,13 @@
 import * as React from 'react';
-import { Flex, FlexItem, Stack, StackItem, TextInput } from '@patternfly/react-core';
-import { Modal } from '@patternfly/react-core/deprecated';
+import {
+  Alert,
+  Form,
+  FormGroup,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  TextInput,
+} from '@patternfly/react-core';
 import DashboardModalFooter from '~/app/components/DashboardModalFooter';
 
 interface ArchiveModelVersionModalProps {
@@ -41,35 +48,32 @@ 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?" 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"
@@ -82,9 +86,16 @@ export const ArchiveModelVersionModal: React.FC<ArchiveModelVersionModalProps> =
                 }
               }}
             />
-          </Flex>
-        </StackItem>
-      </Stack>
+          </FormGroup>
+        </Form>
+      </ModalBody>
+      <DashboardModalFooter
+        onCancel={onClose}
+        onSubmit={onConfirm}
+        submitLabel="Archive"
+        isSubmitLoading={isSubmitting}
+        isSubmitDisabled={isDisabled}
+      />
     </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
@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Flex, FlexItem, Stack, StackItem, TextInput } from '@patternfly/react-core';
-import { Modal } from '@patternfly/react-core/deprecated';
+import {
+  Alert,
+  Form,
+  FormGroup,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  TextInput,
+} from '@patternfly/react-core';
 import DashboardModalFooter from '~/app/components/DashboardModalFooter';
 
 // import useNotification from '~/utilities/useNotification'; // TODO: Implement useNotification
@@ -45,36 +52,34 @@ export const ArchiveRegisteredModelModal: React.FC<ArchiveRegisteredModelModalPr
     }
   }, [onSubmit, onClose]);
 
+  const description = (
+    <>
+      <b>{registeredModelName}</b> and all of its versions will be archived and unavailable for use
+      unless it is restored.
+      <br />
+      <br />
+      Type <strong>{registeredModelName}</strong> to confirm archiving:
+    </>
+  );
+
   return (
     <Modal
       isOpen={isOpen}
       title="Archive model?"
-      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-registered-model-modal"
     >
-      <Stack hasGutter>
-        <StackItem>
-          <b>{registeredModelName}</b> and all of its versions will be archived and unavailable for
-          use unless it is restored.
-        </StackItem>
-        <StackItem>
-          <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }}>
-            <FlexItem>
-              Type <strong>{registeredModelName}</strong> to confirm archiving:
-            </FlexItem>
+      <ModalHeader title="Archive model?" 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"
@@ -87,9 +92,16 @@ export const ArchiveRegisteredModelModal: React.FC<ArchiveRegisteredModelModalPr
                 }
               }}
             />
-          </Flex>
-        </StackItem>
-      </Stack>
+          </FormGroup>
+        </Form>
+      </ModalBody>
+      <DashboardModalFooter
+        onCancel={onClose}
+        onSubmit={onConfirm}
+        submitLabel="Archive"
+        isSubmitLoading={isSubmitting}
+        isSubmitDisabled={isDisabled}
+      />
     </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,5 +1,5 @@
 import * as React from 'react';
-import { Modal } from '@patternfly/react-core/deprecated';
+import { Form, Modal, ModalHeader, ModalBody, Alert } from '@patternfly/react-core';
 import DashboardModalFooter from '~/app/components/DashboardModalFooter';
 
 interface RestoreModelVersionModalProps {
@@ -37,26 +37,38 @@ 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}
+        isSubmitDisabled={isSubmitting}
+      />
     </Modal>
   );
 };
diff --git a/...nts/ui/frontend/src/app/pages/modelRegistry/screens/components/RestoreRegisteredModel.tsx b/...nts/ui/frontend/src/app/pages/modelRegistry/screens/components/RestoreRegisteredModel.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal } from '@patternfly/react-core/deprecated';
+import { Alert, Form, ModalHeader, Modal, ModalBody } from '@patternfly/react-core';
 import DashboardModalFooter from '~/app/components/DashboardModalFooter';
 
 // import useNotification from '~/utilities/useNotification'; TODO: Implement useNotification
@@ -41,27 +41,38 @@ export const RestoreRegisteredModelModal: React.FC<RestoreRegisteredModelModalPr
     }
   }, [onSubmit, onClose]);
 
+  const description = (
+    <>
+      <b>{registeredModelName}</b> and all of its versions will be restored and returned to the
+      registered models list.
+    </>
+  );
+
   return (
     <Modal
       isOpen={isOpen}
-      title="Restore model?"
       variant="small"
       onClose={onClose}
-      footer={
-        <DashboardModalFooter
-          onCancel={onClose}
-          onSubmit={onConfirm}
-          submitLabel="Restore"
-          isSubmitLoading={isSubmitting}
-          error={error}
-          alertTitle="Error"
-          isSubmitDisabled={isSubmitting}
-        />
-      }
       data-testid="restore-registered-model-modal"
     >
-      <b>{registeredModelName}</b> and all of its versions will be restored and returned to the
-      registered models list.
+      <ModalHeader title="Restore model?" />
+      <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}
+        isSubmitDisabled={isSubmitting}
+      />
     </Modal>
   );
 };