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

Jump to bottom

Add flag to conditionally render MUI theme #564

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add flag to conditionally render MUI theme #564

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
ee1c21c
re-apply conditional theme flag
jenny-s51 Nov 13, 2024
ccd6543
Use enum to control theme
jenny-s51 Nov 18, 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
16 changes: 16 additions & 0 deletions clients/ui/frontend/src/app/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,18 @@ import {
import { BarsIcon } from '@patternfly/react-icons';
import ToastNotifications from '~/shared/components/ToastNotifications';
import { useSettings } from '~/shared/hooks/useSettings';
import { STYLE_THEME, Theme } from '~/shared/utilities/const';
import NavSidebar from './NavSidebar';
import AppRoutes from './AppRoutes';
import { AppContext } from './AppContext';
import { ModelRegistrySelectorContextProvider } from './context/ModelRegistrySelectorContext';

declare global {
export interface Window {
isSwitched?: boolean;
}
}

const App: React.FC = () => {
const {
configSettings,
Expand All @@ -34,6 +41,15 @@ const App: React.FC = () => {
loadError: configError,
} = useSettings();

React.useEffect(() => {
// Apply the theme based on the value of STYLE_THEME
if (STYLE_THEME === Theme.MUI) {
document.documentElement.classList.add(Theme.MUI);
} else {
document.documentElement.classList.remove(Theme.MUI);
}
}, []);

const contextValue = React.useMemo(
() =>
configSettings && userSettings
Expand Down
79 changes: 40 additions & 39 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 @@ -14,6 +14,7 @@ import { CheckIcon, TimesIcon } from '@patternfly/react-icons';
import { KeyValuePair } from '~/shared/types';
import { EitherNotBoth } from '~/shared/typeHelpers';
import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
import { STYLE_THEME, Theme } from '~/shared/utilities/const';

type ModelPropertiesTableRowProps = {
allExistingKeys: string[];
Expand Down Expand Up @@ -90,31 +91,45 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
setIsEditing(false);
};

const propertyKeyInput = (
<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'}
/>
);

const propertyValueInput = (
<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)}
/>
);

return (
<Tr>
<Td dataLabel="Key" width={45} modifier="breakWord">
{isEditing ? (
<>
<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'}
/>
}
/>
{STYLE_THEME === Theme.MUI ? (
<FormFieldset className="tr-fieldset-wrapper" component={propertyKeyInput} />
) : (
propertyKeyInput
)}

{keyValidationError && (
<FormHelperText>
Expand All @@ -130,25 +145,11 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
</Td>
<Td dataLabel="Value" width={45} modifier="breakWord">
{isEditing ? (
<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)}
/>
}
/>
STYLE_THEME === Theme.MUI ? (
<FormFieldset className="tr-fieldset-wrapper" component={propertyValueInput} />
) : (
propertyValueInput
)
) : (
<ExpandableSection
variant="truncate"
Expand Down
47 changes: 31 additions & 16 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,6 +7,7 @@ import {
DropdownList,
MenuToggle,
MenuToggleElement,
SearchInput,
TextInput,
ToolbarContent,
ToolbarFilter,
Expand All @@ -33,6 +34,7 @@ import { asEnumMember } from '~/app/utils';
import ModelVersionsTable from '~/app/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable';
import SimpleSelect from '~/shared/components/SimpleSelect';
import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
import { STYLE_THEME, Theme } from '~/shared/utilities/const';

type ModelVersionListViewProps = {
modelVersions: ModelVersion[];
Expand Down Expand Up @@ -148,22 +150,35 @@ const ModelVersionListView: React.FC<ModelVersionListViewProps> = ({
/>
</ToolbarFilter>
<ToolbarItem>
<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()}`}
/>
{STYLE_THEME === Theme.MUI ? (
<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()}`}
/>
) : (
<SearchInput
placeholder={`Find by ${searchType.toLowerCase()}`}
value={search}
onChange={(_, searchValue) => {
setSearch(searchValue);
}}
onClear={() => setSearch('')}
style={{ minWidth: '200px' }}
data-testid="model-versions-table-search"
/>
)}
</ToolbarItem>
</ToolbarGroup>
</ToolbarToggleGroup>
Expand Down
47 changes: 31 additions & 16 deletions ...src/app/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionsArchiveListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import {
SearchInput,
TextInput,
ToolbarContent,
ToolbarFilter,
Expand All @@ -15,6 +16,7 @@ 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 { STYLE_THEME, Theme } from '~/shared/utilities/const';
import ModelVersionsArchiveTable from './ModelVersionsArchiveTable';

type ModelVersionsArchiveListViewProps = {
Expand Down Expand Up @@ -74,22 +76,35 @@ const ModelVersionsArchiveListView: React.FC<ModelVersionsArchiveListViewProps>
/>
</ToolbarFilter>
<ToolbarItem>
<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()}`}
/>
{STYLE_THEME === Theme.MUI ? (
<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()}`}
/>
) : (
<SearchInput
placeholder={`Find by ${searchType.toLowerCase()}`}
value={search}
onChange={(_, searchValue) => {
setSearch(searchValue);
}}
onClear={() => setSearch('')}
style={{ minWidth: '200px' }}
data-testid="model-versions-archive-table-search"
/>
)}
</ToolbarItem>
</ToolbarGroup>
</ToolbarToggleGroup>
Expand Down
26 changes: 16 additions & 10 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,20 +1,26 @@
import React from 'react';
import { FormGroup, TextInput } from '@patternfly/react-core';
import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
import { STYLE_THEME, Theme } from '~/shared/utilities/const';

type PrefilledModelRegistryFieldProps = {
mrName?: string;
};

const PrefilledModelRegistryField: React.FC<PrefilledModelRegistryFieldProps> = ({ 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>
);
const PrefilledModelRegistryField: React.FC<PrefilledModelRegistryFieldProps> = ({ mrName }) => {
const mrNameInput = (
<TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
);

return (
<FormGroup className="form-group-disabled" label="Model registry" isRequired fieldId="mr-name">
{STYLE_THEME === Theme.MUI ? (
<FormFieldset component={mrNameInput} field="Model Registry" />
) : (
mrNameInput
)}
</FormGroup>
);
};

export default PrefilledModelRegistryField;
19 changes: 16 additions & 3 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 @@ -18,6 +18,7 @@ import FormSection from '~/shared/components/pf-overrides/FormSection';
import ApplicationsPage from '~/shared/components/ApplicationsPage';
import { modelRegistryUrl, registeredModelUrl } from '~/app/pages/modelRegistry/screens/routeUtils';
import { ValueOf } from '~/shared/typeHelpers';
import { STYLE_THEME, Theme } from '~/shared/utilities/const';
import { useRegisterModelData, RegistrationCommonFormData } from './useRegisterModelData';
import { isRegisterModelSubmitDisabled, registerModel } from './utils';
import { useRegistrationCommonState } from './useRegistrationCommonState';
Expand Down Expand Up @@ -92,7 +93,11 @@ const RegisterModel: React.FC = () => {
isRequired
fieldId="mr-name"
>
<FormFieldset component={modelRegistryInput} field="Model Registry" />
{STYLE_THEME === Theme.MUI ? (
<FormFieldset component={modelRegistryInput} field="Model Registry" />
) : (
modelRegistryInput
)}
</FormGroup>
</StackItem>
<StackItem>
Expand All @@ -101,14 +106,22 @@ const RegisterModel: React.FC = () => {
description="Provide general details that apply to all versions of this model."
>
<FormGroup label="Model name" isRequired fieldId="model-name">
<FormFieldset component={modelNameInput} field="Model Name" />
{STYLE_THEME === Theme.MUI ? (
<FormFieldset component={modelNameInput} field="Model Name" />
) : (
modelNameInput
)}
</FormGroup>
<FormGroup
className="model-description"
label="Model description"
fieldId="model-description"
>
<FormFieldset component={modelDescriptionInput} field="Model Description" />
{STYLE_THEME === Theme.MUI ? (
<FormFieldset component={modelDescriptionInput} field="Model Description" />
) : (
modelDescriptionInput
)}
</FormGroup>
</FormSection>
<RegistrationCommonFormSections
Expand Down
Loading