Skip to content

Commit

Permalink
apply updates to styling and component structure to fix bugs
Browse files Browse the repository at this point in the history
Signed-off-by: Jenny <[email protected]>

update search filter styling for archived models list

Signed-off-by: Jenny <[email protected]>

fix tests
  • Loading branch information
jenny-s51 committed Oct 28, 2024
1 parent 24e4db8 commit dedf876
Show file tree
Hide file tree
Showing 6 changed files with 61 additions and 39 deletions.
25 changes: 16 additions & 9 deletions clients/ui/frontend/src/app/components/DashboardSearchField.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import {
SearchInput,
TextInput,
ToolbarContent,
ToolbarFilter,
ToolbarGroup,
Expand All @@ -15,6 +15,7 @@ import { asEnumMember } from '~/app/utils';
import { filterModelVersions } from '~/app/pages/modelRegistry/screens/utils';
import EmptyModelRegistryState from '~/app/pages/modelRegistry/screens/components/EmptyModelRegistryState';
import ModelVersionsArchiveTable from './ModelVersionsArchiveTable';
import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';

Check failure on line 18 in clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx

View workflow job for this annotation

GitHub Actions / test-and-build

`~/app/pages/modelRegistry/screens/components/FormFieldset` import should occur before import of `./ModelVersionsArchiveTable`

type ModelVersionsArchiveListViewProps = {
modelVersions: ModelVersion[];
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import {
SearchInput,
TextInput,
ToolbarContent,
ToolbarFilter,
ToolbarGroup,
Expand All @@ -15,6 +15,7 @@ import EmptyModelRegistryState from '~/app/pages/modelRegistry/screens/component
import SimpleSelect from '~/app/components/SimpleSelect';
import { asEnumMember } from '~/app/utils';
import RegisteredModelsArchiveTable from './RegisteredModelsArchiveTable';
import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';

Check failure on line 18 in clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelsArchiveListView.tsx

View workflow job for this annotation

GitHub Actions / test-and-build

`~/app/pages/modelRegistry/screens/components/FormFieldset` import should occur before import of `./RegisteredModelsArchiveTable`

type RegisteredModelsArchiveListViewProps = {
registeredModels: RegisteredModel[];
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
17 changes: 9 additions & 8 deletions clients/ui/frontend/src/style/MUI-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

Expand All @@ -677,7 +680,6 @@

.pf-v6-c-label__text {
color: var(--mui-palette-common-black);
padding: none;
}
}

Expand All @@ -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 {
Expand All @@ -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 {
Expand Down

0 comments on commit dedf876

Please sign in to comment.