Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Model Info: Theme "Versions" and "Details" Tabs #3

Closed
wants to merge 2 commits into from
Closed

Model Info: Theme "Versions" and "Details" Tabs #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
661cb25
Apply MUI theming to Register Model Form (#451)
jenny-s51 Oct 9, 2024
0ce7107
Theme model versions screens
jenny-s51 Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions clients/ui/bff/internal/mocks/static_data_mock.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,18 @@ func newCustomProperties() *map[string]openapi.MetadataValue {
MetadataType: "MetadataStringValue",
},
},
"AWS_KEY": {
MetadataStringValue: &openapi.MetadataStringValue{
StringValue: "asdf89asdf098asdfa",
MetadataType: "MetadataStringValue",
},
},
"AWS_PASSWORD": {
MetadataStringValue: &openapi.MetadataStringValue{
StringValue: "*AadfeDs34adf",
MetadataType: "MetadataStringValue",
},
},
}

return &result
Expand Down
58 changes: 37 additions & 21 deletions clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import { CheckIcon, TimesIcon } from '@patternfly/react-icons';
import { KeyValuePair } from '~/types';
import { EitherNotBoth } from '~/typeHelpers';
import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';

type ModelPropertiesTableRowProps = {
allExistingKeys: string[];
Expand Down Expand Up @@ -94,19 +95,27 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
<Td dataLabel="Key" width={45} modifier="breakWord">
{isEditing ? (
<>
<TextInput
data-testid={isAddRow ? `add-property-key-input` : `edit-property-${key}-key-input`}
aria-label={
isAddRow
? 'Key input for new property'
: `Key input for editing property with key ${key}`
<FormFieldset
className="tr-fieldset-wrapper"
component={
<TextInput
data-testid={
isAddRow ? `add-property-key-input` : `edit-property-${key}-key-input`
}
aria-label={
isAddRow
? 'Key input for new property'
: `Key input for editing property with key ${key}`
}
isRequired
type="text"
value={unsavedKey}
onChange={(_event, str) => setUnsavedKey(str)}
validated={keyValidationError ? 'error' : 'default'}
/>
}
isRequired
type="text"
value={unsavedKey}
onChange={(_event, str) => setUnsavedKey(str)}
validated={keyValidationError ? 'error' : 'default'}
/>

{keyValidationError && (
<FormHelperText>
<HelperText>
Expand All @@ -121,17 +130,24 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
</Td>
<Td dataLabel="Value" width={45} modifier="breakWord">
{isEditing ? (
<TextInput
data-testid={isAddRow ? `add-property-value-input` : `edit-property-${key}-value-input`}
aria-label={
isAddRow
? 'Value input for new property'
: `Value input for editing property with key ${key}`
<FormFieldset
className="tr-fieldset-wrapper"
component={
<TextInput
data-testid={
isAddRow ? `add-property-value-input` : `edit-property-${key}-value-input`
}
aria-label={
isAddRow
? 'Value input for new property'
: `Value input for editing property with key ${key}`
}
isRequired
type="text"
value={unsavedValue}
onChange={(_event, str) => setUnsavedValue(str)}
/>
}
isRequired
type="text"
value={unsavedValue}
onChange={(_event, str) => setUnsavedValue(str)}
/>
) : (
<ExpandableSection
Expand Down
27 changes: 17 additions & 10 deletions ...ts/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
DropdownList,
MenuToggle,
MenuToggleElement,
SearchInput,
TextInput,
ToolbarContent,
ToolbarFilter,
ToolbarGroup,
Expand All @@ -32,6 +32,7 @@ import {
import { asEnumMember } from '~/app/utils';
import ModelVersionsTable from '~/app/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable';
import SimpleSelect from '~/app/components/SimpleSelect';
import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';

type ModelVersionListViewProps = {
modelVersions: ModelVersion[];
Expand Down Expand Up @@ -147,15 +148,21 @@ const ModelVersionListView: React.FC<ModelVersionListViewProps> = ({
/>
</ToolbarFilter>
<ToolbarItem>
<SearchInput
placeholder={`Find by ${searchType.toLowerCase()}`}
value={search}
onChange={(_, searchValue) => {
setSearch(searchValue);
}}
onClear={() => setSearch('')}
style={{ minWidth: '200px' }}
data-testid="model-versions-table-search"
<FormFieldset
className="toolbar-fieldset-wrapper"
component={
<TextInput
value={search}
type="text"
onChange={(_, searchValue) => {
setSearch(searchValue);
}}
style={{ minWidth: '200px' }}
data-testid="model-versions-table-search"
aria-label="Search"
/>
}
field={`Find by ${searchType.toLowerCase()}`}
/>
</ToolbarItem>
</ToolbarGroup>
Expand Down
10 changes: 8 additions & 2 deletions ...rontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
import React from 'react';
import { FormGroup, TextInput } from '@patternfly/react-core';
import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';

type PrefilledModelRegistryFieldProps = {
mrName?: string;
};

const PrefilledModelRegistryField: React.FC<PrefilledModelRegistryFieldProps> = ({ mrName }) => (
<FormGroup label="Model registry" isRequired fieldId="mr-name">
<TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
<FormGroup className="form-group-disabled" label="Model registry" isRequired fieldId="mr-name">
<FormFieldset
component={
<TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
}
field="Model Registry"
/>
</FormGroup>
);

Expand Down
59 changes: 41 additions & 18 deletions clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
import { useParams, useNavigate } from 'react-router';
import { Link } from 'react-router-dom';
import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
import FormSection from '~/app/components/pf-overrides/FormSection';
import ApplicationsPage from '~/app/components/ApplicationsPage';
import { modelRegistryUrl, registeredModelUrl } from '~/app/pages/modelRegistry/screens/routeUtils';
Expand All @@ -21,7 +22,6 @@ import { useRegisterModelData, RegistrationCommonFormData } from './useRegisterM
import { isRegisterModelSubmitDisabled, registerModel } from './utils';
import { useRegistrationCommonState } from './useRegistrationCommonState';
import RegistrationCommonFormSections from './RegistrationCommonFormSections';
import PrefilledModelRegistryField from './PrefilledModelRegistryField';
import RegistrationFormFooter from './RegistrationFormFooter';

const RegisterModel: React.FC = () => {
Expand All @@ -42,6 +42,31 @@ const RegisterModel: React.FC = () => {
});
const onCancel = () => navigate(modelRegistryUrl(mrName));

const modelRegistryInput = (
<TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
);

const modelNameInput = (
<TextInput
isRequired
type="text"
id="model-name"
name="model-name"
value={modelName}
onChange={(_e, value) => setData('modelName', value)}
/>
);

const modelDescriptionInput = (
<TextArea
type="text"
id="model-description"
name="model-description"
value={modelDescription}
onChange={(_e, value) => setData('modelDescription', value)}
/>
);

return (
<ApplicationsPage
title="Register model"
Expand All @@ -61,31 +86,29 @@ const RegisterModel: React.FC = () => {
<Form isWidthLimited>
<Stack hasGutter>
<StackItem className={spacing.mbLg}>
<PrefilledModelRegistryField mrName={mrName} />
<FormGroup
className="form-group-disabled"
label="Model registry"
isRequired
fieldId="mr-name"
>
<FormFieldset component={modelRegistryInput} field="Model Registry" />
</FormGroup>
</StackItem>
<StackItem>
<FormSection
title="Model details"
description="Provide general details that apply to all versions of this model."
>
<FormGroup label="Model name" isRequired fieldId="model-name">
<TextInput
isRequired
type="text"
id="model-name"
name="model-name"
value={modelName}
onChange={(_e, value) => setData('modelName', value)}
/>
<FormFieldset component={modelNameInput} field="Model Name" />
</FormGroup>
<FormGroup label="Model description" fieldId="model-description">
<TextArea
type="text"
id="model-description"
name="model-description"
value={modelDescription}
onChange={(_e, value) => setData('modelDescription', value)}
/>
<FormGroup
className="model-description"
label="Model description"
fieldId="model-description"
>
<FormFieldset component={modelDescriptionInput} field="Model Description" />
</FormGroup>
</FormSection>
<RegistrationCommonFormSections
Expand Down
1 change: 0 additions & 1 deletion clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterVersion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@ const RegisterVersion: React.FC = () => {
<StackItem className={spacing.mbLg}>
<FormGroup
id="registered-model-container"
label="Model name"
isRequired
fieldId="model-name"
labelHelp={
Expand Down
26 changes: 17 additions & 9 deletions ...ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';
import { TextInput } from '@patternfly/react-core';
import { FormGroup, TextInput } from '@patternfly/react-core';
import { TypeaheadSelect, TypeaheadSelectOption } from '@patternfly/react-templates';
import { RegisteredModel } from '~/app/types';
import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';

type RegisteredModelSelectorProps = {
registeredModels: RegisteredModel[];
Expand Down Expand Up @@ -34,14 +35,21 @@ const RegisteredModelSelector: React.FC<RegisteredModelSelectorProps> = ({
See related PatternFly issue https://github.com/patternfly/patternfly-react/issues/10842
*/
return (
<TextInput
isDisabled
isRequired
type="text"
id="model-name"
name="registered-model-prefilled"
value={options.find(({ value }) => value === registeredModelId)?.content}
/>
<FormGroup label="Model name" className="form-group-disabled" isRequired fieldId="model-name">
<FormFieldset
component={
<TextInput
isDisabled
isRequired
type="text"
id="model-name"
name="registered-model-prefilled"
value={options.find(({ value }) => value === registeredModelId)?.content}
/>
}
field="Model Name"
/>
</FormGroup>
);
}

Expand Down
Loading