diff --git a/clients/ui/frontend/src/app/App.tsx b/clients/ui/frontend/src/app/App.tsx index ca1ded8fc..6f9e2d417 100644 --- a/clients/ui/frontend/src/app/App.tsx +++ b/clients/ui/frontend/src/app/App.tsx @@ -17,11 +17,11 @@ import { Spinner, Stack, StackItem, - Switch, } from '@patternfly/react-core'; 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'; @@ -41,22 +41,14 @@ const App: React.FC = () => { loadError: configError, } = useSettings(); - const [isChecked, setIsChecked] = React.useState(window.isSwitched ?? false); - - // Sync window.isSwitched with local state when it changes React.useEffect(() => { - window.isSwitched = isChecked; - document.documentElement.classList.toggle('mui-theme', isChecked); - - const event = new CustomEvent('isSwitchedChanged', { - detail: isChecked, - }); - window.dispatchEvent(event); - }, [isChecked]); - - const handleChange = (_event: React.FormEvent, checked: boolean) => { - setIsChecked(checked); - }; + // 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( () => @@ -119,13 +111,6 @@ const App: React.FC = () => { - {/* TODO: [Auth-enablement] Add logout and user status once we enable itNavigates to register page from table toolbar */} diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx index 6c1ae132b..0919b7b45 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx @@ -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[]; @@ -49,23 +50,6 @@ const ModelPropertiesTableRow: React.FC = ({ const [isValueExpanded, setIsValueExpanded] = React.useState(false); - const [isSwitched, setIsSwitched] = React.useState(window.isSwitched ?? false); - - // Listen for changes to `window.isSwitched` - React.useEffect(() => { - const handleSwitchChange = (event: Event) => { - if (event instanceof CustomEvent) { - setIsSwitched(event.detail); // Update state with the new value - } - }; - - window.addEventListener('isSwitchedChanged', handleSwitchChange); - - return () => { - window.removeEventListener('isSwitchedChanged', handleSwitchChange); - }; - }, []); - let keyValidationError: string | null = null; if (unsavedKey !== key && allExistingKeys.includes(unsavedKey)) { keyValidationError = 'Key must not match an existing property key or label'; @@ -141,7 +125,7 @@ const ModelPropertiesTableRow: React.FC = ({ {isEditing ? ( <> - {window.isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( ) : ( propertyKeyInput @@ -161,7 +145,7 @@ const ModelPropertiesTableRow: React.FC = ({ {isEditing ? ( - isSwitched ? ( + STYLE_THEME === Theme.MUI ? ( ) : ( propertyValueInput diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx index c5a6584cb..162d6c4f4 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx @@ -34,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[]; @@ -54,18 +55,6 @@ const ModelVersionListView: React.FC = ({ const [searchType, setSearchType] = React.useState(SearchType.KEYWORD); const [search, setSearch] = React.useState(''); - const [isSwitched, setIsSwitched] = React.useState(window.isSwitched ?? false); - - React.useEffect(() => { - const handleSwitchChange = () => { - setIsSwitched(window.isSwitched ?? false); - }; - window.addEventListener('isSwitchedChanged', handleSwitchChange); - return () => { - window.removeEventListener('isSwitchedChanged', handleSwitchChange); - }; - }, []); - const searchTypes = [SearchType.KEYWORD, SearchType.AUTHOR]; const [isArchivedModelVersionKebabOpen, setIsArchivedModelVersionKebabOpen] = @@ -161,7 +150,7 @@ const ModelVersionListView: React.FC = ({ /> - {isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( const searchTypes = [SearchType.KEYWORD, SearchType.AUTHOR]; - const [isSwitched, setIsSwitched] = React.useState(window.isSwitched ?? false); - - React.useEffect(() => { - const handleSwitchChange = () => { - setIsSwitched(window.isSwitched ?? false); - }; - window.addEventListener('isSwitchedChanged', handleSwitchChange); - return () => { - window.removeEventListener('isSwitchedChanged', handleSwitchChange); - }; - }, []); - const filteredModelVersions = filterModelVersions(unfilteredmodelVersions, search, searchType); if (unfilteredmodelVersions.length === 0) { @@ -87,7 +76,7 @@ const ModelVersionsArchiveListView: React.FC /> - {isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( = return ( - {window.isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( ) : ( mrNameInput diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx index db23c2e88..4acff52ef 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx @@ -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'; @@ -92,7 +93,7 @@ const RegisterModel: React.FC = () => { isRequired fieldId="mr-name" > - {window.isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( ) : ( modelRegistryInput @@ -105,7 +106,7 @@ const RegisterModel: React.FC = () => { description="Provide general details that apply to all versions of this model." > - {window.isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( ) : ( modelNameInput @@ -116,7 +117,7 @@ const RegisterModel: React.FC = () => { label="Model description" fieldId="model-description" > - {window.isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( ) : ( modelDescriptionInput diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx index e847691a3..b1086519a 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx @@ -3,6 +3,7 @@ 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'; +import { STYLE_THEME, Theme } from '~/shared/utilities/const'; type RegisteredModelSelectorProps = { registeredModels: RegisteredModel[]; @@ -47,7 +48,7 @@ const RegisteredModelSelector: React.FC = ({ */ return ( - {window.isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( ) : ( modelNameInput diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx index d587ea7c4..57f04cf48 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx @@ -19,6 +19,7 @@ import { UpdateObjectAtPropAndValue } from '~/shared/types'; import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset'; import FormSection from '~/shared/components/pf-overrides/FormSection'; import { ModelVersion } from '~/app/types'; +import { STYLE_THEME, Theme } from '~/shared/utilities/const'; import { ModelLocationType, RegistrationCommonFormData } from './useRegisterModelData'; // import { ConnectionModal } from './ConnectionModal'; @@ -173,7 +174,7 @@ const RegistrationCommonFormSections: React.FC - {window.isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( ) : ( versionNameInput @@ -191,21 +192,21 @@ const RegistrationCommonFormSections: React.FC - {window.isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( ) : ( versionDescriptionInput )} - {window.isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( ) : ( sourceModelFormatInput )} - {window.isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( - {window.isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( ) : ( endpointInput )} - {window.isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( ) : ( bucketInput )} - {window.isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( ) : ( regionInput )} - {window.isSwitched ? : pathInput} + {STYLE_THEME === Theme.MUI ? ( + + ) : ( + pathInput + )} @@ -301,7 +306,11 @@ const RegistrationCommonFormSections: React.FC - {window.isSwitched ? : uriInput} + {STYLE_THEME === Theme.MUI ? ( + + ) : ( + uriInput + )} )} diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx index 543d39262..a14d0ce69 100644 --- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx +++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx @@ -20,6 +20,7 @@ import { } from '~/app/pages/modelRegistry/screens/routeUtils'; 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 RegisteredModelTable from './RegisteredModelTable'; import RegisteredModelsTableToolbar from './RegisteredModelsTableToolbar'; @@ -37,18 +38,6 @@ const RegisteredModelListView: React.FC = ({ const [searchType, setSearchType] = React.useState(SearchType.KEYWORD); const [search, setSearch] = React.useState(''); - const [isSwitched, setIsSwitched] = React.useState(window.isSwitched ?? false); - - React.useEffect(() => { - const handleSwitchChange = () => { - setIsSwitched(window.isSwitched ?? false); - }; - window.addEventListener('isSwitchedChanged', handleSwitchChange); - return () => { - window.removeEventListener('isSwitchedChanged', handleSwitchChange); - }; - }, []); - const searchTypes = React.useMemo(() => [SearchType.KEYWORD, SearchType.OWNER], []); if (unfilteredRegisteredModels.length === 0) { @@ -109,7 +98,7 @@ const RegisteredModelListView: React.FC = ({ /> - {isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( (window.isSwitched ?? false); - - React.useEffect(() => { - const handleSwitchChange = () => { - setIsSwitched(window.isSwitched ?? false); - }; - window.addEventListener('isSwitchedChanged', handleSwitchChange); - return () => { - window.removeEventListener('isSwitchedChanged', handleSwitchChange); - }; - }, []); - const filteredRegisteredModels = filterRegisteredModels( unfilteredRegisteredModels, search, @@ -92,7 +81,7 @@ const RegisteredModelsArchiveListView: React.FC - {isSwitched ? ( + {STYLE_THEME === Theme.MUI ? ( : editableTextArea + STYLE_THEME === Theme.MUI ? : editableTextArea } onEditClick={() => { setUnsavedValue(value); diff --git a/clients/ui/frontend/src/shared/utilities/const.ts b/clients/ui/frontend/src/shared/utilities/const.ts index dfd3abedc..723c06ae1 100644 --- a/clients/ui/frontend/src/shared/utilities/const.ts +++ b/clients/ui/frontend/src/shared/utilities/const.ts @@ -1,6 +1,14 @@ // TODO: [Env Handling] Fetch the .env variable here. const POLL_INTERVAL = 30000; +export enum Theme { + Default = 'default-theme', + MUI = 'mui-theme', + // Future themes can be added here +} + +export const STYLE_THEME = process.env.STYLE_THEME || Theme.MUI; + export const USER_ACCESS_TOKEN = 'x-forwarded-access-token'; export { POLL_INTERVAL };