diff --git a/clients/ui/frontend/src/app/components/DashboardSearchField.tsx b/clients/ui/frontend/src/app/components/DashboardSearchField.tsx index 2aed1464..d084c2d5 100644 --- a/clients/ui/frontend/src/app/components/DashboardSearchField.tsx +++ b/clients/ui/frontend/src/app/components/DashboardSearchField.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; -import { InputGroup, SearchInput, InputGroupItem } from '@patternfly/react-core'; +import { InputGroup, InputGroupItem, TextInput } from '@patternfly/react-core'; import SimpleSelect from '~/app/components/SimpleSelect'; import { asEnumMember } from '~/app/utils'; +import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset'; // List all the possible search fields here export enum SearchType { @@ -59,14 +60,20 @@ const DashboardSearchField: React.FC = ({ /> - { - onSearchValueChange(newSearch); - }} - onClear={() => onSearchValueChange('')} - style={{ minWidth: '200px' }} + { + onSearchValueChange(newSearch); + }} + style={{ minWidth: '200px' }} + aria-label="Search" + /> + } + field={`Find by ${searchType.toLowerCase()}`} /> diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx index b8e419e4..fe53943c 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { - SearchInput, + TextInput, ToolbarContent, ToolbarFilter, ToolbarGroup, @@ -14,6 +14,7 @@ import SimpleSelect from '~/app/components/SimpleSelect'; import { asEnumMember } from '~/app/utils'; import { filterModelVersions } from '~/app/pages/modelRegistry/screens/utils'; import EmptyModelRegistryState from '~/app/pages/modelRegistry/screens/components/EmptyModelRegistryState'; +import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset'; import ModelVersionsArchiveTable from './ModelVersionsArchiveTable'; type ModelVersionsArchiveListViewProps = { @@ -73,15 +74,21 @@ const ModelVersionsArchiveListView: React.FC /> - { - setSearch(searchValue); - }} - onClear={() => setSearch('')} - style={{ minWidth: '200px' }} - data-testid="model-versions-archive-table-search" + { + setSearch(searchValue); + }} + style={{ minWidth: '200px' }} + data-testid="model-versions-archive-table-search" + aria-label="Search" + /> + } + field={`Find by ${searchType.toLowerCase()}`} /> diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveTable.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveTable.tsx index c611ede0..57f814b4 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveTable.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveTable.tsx @@ -22,7 +22,7 @@ const ModelVersionsArchiveTable: React.FC = ({ data={modelVersions} columns={mvColumns} toolbarContent={toolbarContent} - enablePagination + enablePagination="compact" emptyTableView={} defaultSortColumn={1} rowRenderer={(mv: ModelVersion) => ( diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveListView.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveListView.tsx index d3a8acda..b84b73a3 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveListView.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveListView.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { - SearchInput, + TextInput, ToolbarContent, ToolbarFilter, ToolbarGroup, @@ -14,6 +14,7 @@ import { filterRegisteredModels } from '~/app/pages/modelRegistry/screens/utils' import EmptyModelRegistryState from '~/app/pages/modelRegistry/screens/components/EmptyModelRegistryState'; import SimpleSelect from '~/app/components/SimpleSelect'; import { asEnumMember } from '~/app/utils'; +import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset'; import RegisteredModelsArchiveTable from './RegisteredModelsArchiveTable'; type RegisteredModelsArchiveListViewProps = { @@ -78,15 +79,21 @@ const RegisteredModelsArchiveListView: React.FC - { - setSearch(searchValue); - }} - onClear={() => setSearch('')} - style={{ minWidth: '200px' }} - data-testid="registered-models-archive-table-search" + { + setSearch(searchValue); + }} + style={{ minWidth: '200px' }} + data-testid="registered-models-archive-table-search" + aria-label="Search" + /> + } + field={`Find by ${searchType.toLowerCase()}`} /> diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveTable.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveTable.tsx index 30aca1f6..4c6c66ed 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveTable.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveTable.tsx @@ -23,7 +23,7 @@ const RegisteredModelsArchiveTable: React.FC columns={rmColumns} toolbarContent={toolbarContent} defaultSortColumn={2} - enablePagination + enablePagination="compact" emptyTableView={} rowRenderer={(rm) => ( diff --git a/clients/ui/frontend/src/style/MUI-theme.scss b/clients/ui/frontend/src/style/MUI-theme.scss index 3456aef6..c93368d9 100644 --- a/clients/ui/frontend/src/style/MUI-theme.scss +++ b/clients/ui/frontend/src/style/MUI-theme.scss @@ -140,6 +140,7 @@ --pf-v6-c-button--PaddingInlineStart: var(--mui-button--PaddingInlineStart); --pf-v6-c-button--PaddingInlineEnd: var(--mui-button--PaddingInlineEnd); --pf-v6-c-button--LineHeight: var(--mui-button--LineHeight); + --pf-v6-c-button--m-plain--BorderRadius: 50%; text-transform: var(--mui-text-transform); letter-spacing: 0.02857em; @@ -667,8 +668,10 @@ .pf-v6-c-label { --pf-v6-c-label--BorderRadius: 16px; --pf-v6-c-label--FontSize: 0.8125rem; - --pf-v6-c-label--PaddingInlineStart: 0; - --pf-v6-c-label--PaddingInlineEnd: 0; + --pf-v6-c-label--PaddingInlineEnd: var(--mui-spacing-8px); + --pf-v6-c-label--PaddingInlineStart: var(--mui-spacing-8px); + --pf-v6-c-label--PaddingBlockStart: 0; + --pf-v6-c-label--PaddingBlockEnd: 0; height: 24px; } @@ -677,7 +680,6 @@ .pf-v6-c-label__text { color: var(--mui-palette-common-black); - padding: none; } } @@ -686,10 +688,8 @@ --pf-v6-c-button__icon--Color: var(--mui-palette-common-white); } -.pf-v6-c-label__text { - padding-right: var(--mui-spacing-4px); - padding-left: var(--mui-spacing-4px); - color: var(--pf-t--global--text--color--inverse); +.pf-v6-c-label { + --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--inverse); } .pf-v6-c-label-group.pf-m-category { @@ -705,7 +705,8 @@ } .pf-v6-c-modal-box { - --pf-v6-c-modal-box--BorderRadius: var(--mui-shape-borderRadius); + --pf-v6-c-modal-box--BorderRadius: 0; + border: 2px solid var(--mui-palette-common-black); } .pf-v6-c-page__main-container {