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) => (
+
+ )}
+ isOpen={userMenuOpen}
+ >
+ {userMenuItems}
+