diff --git a/clients/ui/frontend/src/app/App.tsx b/clients/ui/frontend/src/app/App.tsx index 2288a8b8..d3fdb404 100644 --- a/clients/ui/frontend/src/app/App.tsx +++ b/clients/ui/frontend/src/app/App.tsx @@ -5,9 +5,14 @@ import { Alert, Bullseye, Button, + Dropdown, + DropdownItem, + DropdownList, Masthead, MastheadContent, MastheadMain, + MenuToggle, + MenuToggleElement, Page, PageSection, Spinner, @@ -25,6 +30,8 @@ import NavSidebar from './NavSidebar'; import AppRoutes from './AppRoutes'; import { AppContext } from './AppContext'; import { ModelRegistrySelectorContextProvider } from './context/ModelRegistrySelectorContext'; +import { Select } from '@mui/material'; +import { SimpleSelect, SimpleSelectOption } from '@patternfly/react-templates'; const App: React.FC = () => { const { @@ -66,6 +73,19 @@ const App: React.FC = () => { [configSettings, userSettings], ); + const handleLogout = () => { + setUserMenuOpen(false); + // TODO: [Auth-enablement] Logout when auth is enabled + }; + + + const [userMenuOpen, setUserMenuOpen] = React.useState(false); + const userMenuItems = [ + + Log out + , + ]; + // We lack the critical data to startup the app if (configError) { // There was an error fetching critical data @@ -98,6 +118,17 @@ const App: React.FC = () => { // Waiting on the API to finish const loading = !configLoaded || !userSettings || !configSettings || !contextValue; + const Options: SimpleSelectOption[] = [ + { content: 'All Namespaces', value: 'All' }, + ]; + + const [selected, setSelected] = React.useState('All'); + + const initialOptions = React.useMemo( + () => Options.map((o) => ({ ...o, selected: o.value === selected })), + [selected] + ); + const masthead = ( @@ -106,12 +137,35 @@ const App: React.FC = () => { - {/* TODO: [Auth-enablement] Namespace selector */} + setSelected(String(selection))} + > + {/* TODO: [Auth-enablement] Add logout button */} + setUserMenuOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( + setUserMenuOpen(!userMenuOpen)} + isExpanded={userMenuOpen} + > + {username} + + )} + isOpen={userMenuOpen} + > + {userMenuItems} +