apply updates to styling and component structure to fix bugs

Signed-off-by: Jenny <[email protected]> update search filter styling for archived models list Signed-off-by: Jenny <[email protected]> fix tests Signed-off-by: Jenny <[email protected]> fix tests
kubeflow · Oct 28, 2024 · 8776f18 · 8776f18
1 parent 24e4db8
commit 8776f18
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 39 deletions.
diff --git 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<DashboardSearchFieldProps> = ({
       />
     </InputGroupItem>
     <InputGroupItem>
-      <SearchInput
-        placeholder={`Find by ${searchType.toLowerCase()}`}
-        value={searchValue}
-        onChange={(_, newSearch) => {
-          onSearchValueChange(newSearch);
-        }}
-        onClear={() => onSearchValueChange('')}
-        style={{ minWidth: '200px' }}
+      <FormFieldset
+        className="toolbar-fieldset-wrapper"
+        component={
+          <TextInput
+            value={searchValue}
+            type="text"
+            onChange={(_, newSearch) => {
+              onSearchValueChange(newSearch);
+            }}
+            style={{ minWidth: '200px' }}
+            aria-label="Search"
+          />
+        }
+        field={`Find by ${searchType.toLowerCase()}`}
       />
     </InputGroupItem>
   </InputGroup>

diff --git a/...src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx b/...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<ModelVersionsArchiveListViewProps>
                 />
               </ToolbarFilter>
               <ToolbarItem>
-                <SearchInput
-                  placeholder={`Find by ${searchType.toLowerCase()}`}
-                  value={search}
-                  onChange={(_, searchValue) => {
-                    setSearch(searchValue);
-                  }}
-                  onClear={() => setSearch('')}
-                  style={{ minWidth: '200px' }}
-                  data-testid="model-versions-archive-table-search"
+                <FormFieldset
+                  className="toolbar-fieldset-wrapper"
+                  component={
+                    <TextInput
+                      value={search}
+                      type="text"
+                      onChange={(_, searchValue) => {
+                        setSearch(searchValue);
+                      }}
+                      style={{ minWidth: '200px' }}
+                      data-testid="model-versions-archive-table-search"
+                      aria-label="Search"
+                    />
+                  }
+                  field={`Find by ${searchType.toLowerCase()}`}
                 />
               </ToolbarItem>
             </ToolbarGroup>

diff --git a/...nd/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveTable.tsx b/...nd/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveTable.tsx
@@ -22,7 +22,7 @@ const ModelVersionsArchiveTable: React.FC<ModelVersionsArchiveTableProps> = ({
     data={modelVersions}
     columns={mvColumns}
     toolbarContent={toolbarContent}
-    enablePagination
+    enablePagination="compact"
     emptyTableView={<DashboardEmptyTableView onClearFilters={clearFilters} />}
     defaultSortColumn={1}
     rowRenderer={(mv: ModelVersion) => (

diff --git a/...p/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveListView.tsx b/...p/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<RegisteredModelsArchiveListViewP
                 />
               </ToolbarFilter>
               <ToolbarItem>
-                <SearchInput
-                  placeholder={`Find by ${searchType.toLowerCase()}`}
-                  value={search}
-                  onChange={(_, searchValue) => {
-                    setSearch(searchValue);
-                  }}
-                  onClear={() => setSearch('')}
-                  style={{ minWidth: '200px' }}
-                  data-testid="registered-models-archive-table-search"
+                <FormFieldset
+                  className="toolbar-fieldset-wrapper"
+                  component={
+                    <TextInput
+                      value={search}
+                      type="text"
+                      onChange={(_, searchValue) => {
+                        setSearch(searchValue);
+                      }}
+                      style={{ minWidth: '200px' }}
+                      data-testid="registered-models-archive-table-search"
+                      aria-label="Search"
+                    />
+                  }
+                  field={`Find by ${searchType.toLowerCase()}`}
                 />
               </ToolbarItem>
             </ToolbarGroup>

diff --git a/.../app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveTable.tsx b/.../app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveTable.tsx
@@ -23,7 +23,7 @@ const RegisteredModelsArchiveTable: React.FC<RegisteredModelsArchiveTableProps>
     columns={rmColumns}
     toolbarContent={toolbarContent}
     defaultSortColumn={2}
-    enablePagination
+    enablePagination="compact"
     emptyTableView={<DashboardEmptyTableView onClearFilters={clearFilters} />}
     rowRenderer={(rm) => (
       <RegisteredModelTableRow key={rm.name} registeredModel={rm} isArchiveRow refresh={refresh} />

diff --git 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 {