diff --git a/clients/ui/frontend/src/app/components/DashboardModalFooter.tsx b/clients/ui/frontend/src/app/components/DashboardModalFooter.tsx index 4b8d9944..d0cf0daf 100644 --- 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 = ({ @@ -29,46 +19,28 @@ const DashboardModalFooter: React.FC = ({ isSubmitDisabled, isSubmitLoading, isCancelDisabled, - error, - alertTitle, }) => ( - // make sure alert uses the full width - - {error && ( - - - {error.message} - - - )} - - - - - - - - - - - + + + + ); export default DashboardModalFooter; diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/ArchiveModelVersionModal.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/ArchiveModelVersionModal.tsx index 3260639a..afdf19b8 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/ArchiveModelVersionModal.tsx +++ b/clients/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 = } }, [onSubmit, onClose]); + const description = ( + <> + {modelVersionName} will be archived and unavailable for use unless it is restored. +
+
+ Type {modelVersionName} to confirm archiving: + + ); + return ( - } data-testid="archive-model-version-modal" > - - - {modelVersionName} will be archived and unavailable for use unless it is restored. - - - - - Type {modelVersionName} to confirm archiving: - + + +
+ {error && ( + + {error.message} + + )} + + {description} = } }} /> - - - + +
+
+
); }; diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/ArchiveRegisteredModelModal.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/ArchiveRegisteredModelModal.tsx index 233ed877..8809db58 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/ArchiveRegisteredModelModal.tsx +++ b/clients/ui/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 + {registeredModelName} and all of its versions will be archived and unavailable for use + unless it is restored. +
+
+ Type {registeredModelName} to confirm archiving: + + ); + return ( - } data-testid="archive-registered-model-modal" > - - - {registeredModelName} and all of its versions will be archived and unavailable for - use unless it is restored. - - - - - Type {registeredModelName} to confirm archiving: - + + +
+ {error && ( + + {error.message} + + )} + + {description} - - - + +
+
+
); }; diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/RestoreModelVersionModal.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/RestoreModelVersionModal.tsx index b9c57d85..dad086a0 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/RestoreModelVersionModal.tsx +++ b/clients/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 = } }, [onSubmit, onClose]); + const description = ( + <> + {modelVersionName} will be restored and returned to the versions list. + + ); + return ( - } data-testid="restore-model-version-modal" > - {modelVersionName} will be restored and returned to the versions list. + + +
+ {error && ( + + {error.message} + + )} +
+ {description} +
+
); }; diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/RestoreRegisteredModel.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/RestoreRegisteredModel.tsx index 66bfec9b..6f97248a 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/components/RestoreRegisteredModel.tsx +++ b/clients/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 + {registeredModelName} and all of its versions will be restored and returned to the + registered models list. + + ); + return ( - } data-testid="restore-registered-model-modal" > - {registeredModelName} and all of its versions will be restored and returned to the - registered models list. + + +
+ {error && ( + + {error.message} + + )} +
+ {description} +
+
); }; diff --git a/clients/ui/frontend/src/style/MUI-theme.scss b/clients/ui/frontend/src/style/MUI-theme.scss index 4a5d38ee..3456aef6 100644 --- a/clients/ui/frontend/src/style/MUI-theme.scss +++ b/clients/ui/frontend/src/style/MUI-theme.scss @@ -111,7 +111,9 @@ } .pf-v6-c-alert { - --pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--status--warning--default); + --pf-v6-c-alert--m-warning__title--Color: var( + --pf-t--global--text--color--status--warning--default + ); --pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd); --pf-v6-c-alert__title--FontWeight: var(--mui-alert-warning-font-weight); --pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart); @@ -128,7 +130,7 @@ } .pf-v6-c-alert__icon { - margin-block-end: var(--mui-alert__icon--MarginBlockEnd); + --pf-v6-c-alert__icon--MarginBlockEnd: var(--mui-alert__icon--MarginBlockEnd); } .pf-v6-c-button { @@ -172,7 +174,7 @@ .pf-v6-c-form__group.model-description .pf-v6-c-form__group-label, .pf-v6-c-form__group.version-description .pf-v6-c-form__group-label { - padding-top: 10px; + padding-block-start: 10px; } .pf-v6-c-form__group.form-group-disabled .pf-v6-c-form__label { @@ -184,7 +186,10 @@ } .pf-v6-c-form__section-title { - margin: 0px 0px 0.35em; + --pf-v6-c-form__section-title--MarginBlockStart: 0px; + --pf-v6-c-form__section-title--MarginInlineStart: 0px; + --pf-v6-c-form__section-title--MarginBlockEnd: 0.35em; + --pf-v6-c-form__section-title--MarginInlineEnd: 0px; } .pf-v6-c-form__label { @@ -204,28 +209,24 @@ } .pf-v6-c-form-control input::placeholder { - color: var(--mui-palette-grey-600); + --pf-v6-c-form-control--m-placeholder--Color: var(--mui-palette-grey-600); } -.pf-v6-c-form-control.pf-m-disabled { - background-color: var(--mui-palette-common-white); +.pf-v6-c-form-control { + --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--mui-palette-common-white); --pf-v6-c-form-control--m-disabled--Color: var(--mui-palette-text-disabled); } -.pf-v6-c-form-control.pf-m-resize-both { +.pf-v6-c-form-control { // Resize is disabled in MUI. resize: none; - padding-top: var(--mui-spacing-16px); - padding-bottom: var(--mui-spacing-16px); + --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-16px); + --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-16px); } -.pf-v6-c-form-control > :is(input, select, textarea) { - padding-block-start: 0px; - padding-block-end: 0px; -} .pf-v6-c-form__section { - gap: 0px; + --pf-v6-c-form__section--Gap: 0px; } .toolbar-fieldset-wrapper .pf-v6-c-form-control input { @@ -236,22 +237,25 @@ inset: 0px; } -.pf-v6-c-form-control input { - padding: 16.5px 14px; -} +.pf-v6-c-form-control { + // Using CSS property here since PF vars for input padding do not exist. + // PF can add custom vars for padding on text input, text area, and form select -.pf-v6-c-text-input-group__text-input { - padding: 16.5px 14px; - padding-left: 32px; + --pf-v6-c-form-control--PaddingBlockStart: 16.5px; + --pf-v6-c-form-control--PaddingBlockEnd: 16.5px; + --pf-v6-c-form-control--PaddingInlineStart: 14px; + --pf-v6-c-form-control--PaddingInlineEnd: 14px; } -.pf-v6-c-text-input-group::before { - border: none; +.pf-v6-c-text-input-group { + --pf-v6-c-text-input-group__text-input--PaddingBlockStart: 16.5px; + --pf-v6-c-text-input-group__text-input--PaddingInlineStart: 32px; + --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: 14px; + --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: 14px; } -.pf-v6-c-text-input-group__icon { - color: rgba(0, 0, 0, 0.38); - margin-right: var(--mui-spacing-4px); +.pf-v6-c-text-input-group { + --pf-v6-c-text-input-group__icon--Color: rgba(0, 0, 0, 0.38); } .pf-v6-c-form__group-control textarea { @@ -380,10 +384,9 @@ .tr-fieldset-wrapper .pf-v6-c-form-control, .toolbar-fieldset-wrapper .pf-v6-c-form-control, .form-fieldset-wrapper .pf-v6-c-form-control { - &::before, - &::after { - content: revert; - } + + --pf-v6-c-form-control--before--BorderColor: transparent !important; + --pf-v6-c-form-control--after--BorderColor: transparent !important; } .pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label, @@ -397,6 +400,8 @@ } .pf-v6-c-form__group:focus-within .pf-v6-c-form__label { + // Using CSS property here since --pf-v6-c-form__label--Color does not exist. + /* Change color of the label when the input is focused */ color: var(--mui-palette-primary-main); } @@ -418,7 +423,9 @@ .pf-v6-c-menu-toggle { --pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight); --pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth); - --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-menu-toggle--expanded--BackgroundColor); + --pf-v6-c-menu-toggle--expanded--BackgroundColor: var( + --mui-menu-toggle--expanded--BackgroundColor + ); --pf-v6-c-menu-toggle--expanded--BorderColor: var(--mui-menu-toggle--expanded--BorderColor); --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart); --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd); @@ -426,7 +433,9 @@ --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black); --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor); --pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor); - --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); + --pf-v6-c-menu-toggle--hover--BackgroundColor: var( + --pf-t--global--background--color--action--plain--hover + ); --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var( --pf-t--global--color--brand--default ); @@ -454,8 +463,11 @@ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked); } -.pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button .pf-v6-c-menu-toggle__button[aria-expanded="true"] { - --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--mui-palette-primary-dark); +.pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button + .pf-v6-c-menu-toggle__button[aria-expanded='true'] { + --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var( + --mui-palette-primary-dark + ); } .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) { @@ -465,23 +477,16 @@ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd); } -.pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon { - width: 1em; - height: 1em; - font-size: 20px; -} - .pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon .pf-v6-svg { vertical-align: revert; } .pf-v6-c-menu-toggle__toggle-icon { - --pf-v6-c-menu-toggle__toggle-icon--expanded--Color: var(--pf-t--global--icon--color--300); font-size: 20px; } .pf-v6-c-menu-toggle:not(.pf-m-split-button) .pf-v6-c-menu-toggle__toggle-icon { - margin-right: -4px; + margin-right: calc(var(--mui-spacing) * -1 + 4px); margin-left: var(--mui-spacing); } @@ -500,8 +505,8 @@ } .pf-v6-c-radio__input { - display: none; /* Hide default radio button */ + display: none; } .pf-v6-c-radio__label { @@ -514,7 +519,7 @@ /* Custom radio circle */ .pf-v6-c-radio__label::before { - content: ""; + content: ''; position: absolute; left: 0; top: 50%; @@ -534,7 +539,7 @@ /* Inner dot for checked state */ .pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::after { - content: ""; + content: ''; position: absolute; left: 5px; /* Center the dot */ @@ -563,11 +568,15 @@ --pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd); --pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart); --pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd); - --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--mui-table--cell--first-last-child--PaddingInline); + --pf-v6-c-table--cell--first-last-child--PaddingInline: var( + --mui-table--cell--first-last-child--PaddingInline + ); --pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-font-weight); --pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize); --pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300); - --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--mui-table__sort-indicator--MarginInlineStart); + --pf-v6-c-table__sort-indicator--MarginInlineStart: var( + --mui-table__sort-indicator--MarginInlineStart + ); letter-spacing: 0.01071em; } @@ -604,12 +613,12 @@ opacity: 0.6; } -.pf-v6-c-table__sort[aria-sort="ascending"] .pf-v6-c-table__sort-indicator { +.pf-v6-c-table__sort[aria-sort='ascending'] .pf-v6-c-table__sort-indicator { transform: rotate(180deg); align-self: end; } -.pf-v6-c-table__sort[aria-sort="descending"] .pf-v6-c-table__sort-indicator { +.pf-v6-c-table__sort[aria-sort='descending'] .pf-v6-c-table__sort-indicator { align-self: start; } @@ -631,7 +640,9 @@ --pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart); --pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd); --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default); - --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--mui-tabs__item--m-current__link--after--BorderWidth); + --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var( + --mui-tabs__item--m-current__link--after--BorderWidth + ); --pf-v6-c-tabs__link--FontSize: 0.875rem; } @@ -693,16 +704,12 @@ padding: 4px; } -.pf-v6-c-label.pf-m-outline .pf-v6-c-label__text { - color: var(--mui-palette-common-black); -} - .pf-v6-c-modal-box { --pf-v6-c-modal-box--BorderRadius: var(--mui-shape-borderRadius); } .pf-v6-c-page__main-container { - border-radius: var(--mui-shape-borderRadius); + --pf-v6-c-page__main-container--BorderRadius: var(--mui-shape-borderRadius); box-shadow: var(--mui-shadows-1); } @@ -725,5 +732,5 @@ } .pf-v6-c-pagination__page-menu::before { - content: "Rows per page:"; + content: 'Rows per page:'; }