Enable kubeflow user id header from endpoint

Signed-off-by: lucferbux <[email protected]>

clients/ui/frontend/src/app/App.tsx

@@ -13,10 +13,14 @@ import {
   Spinner,
   Stack,
   StackItem,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
 } from '@patternfly/react-core';
 import ToastNotifications from '~/shared/components/ToastNotifications';
 import { useSettings } from '~/shared/hooks/useSettings';
-import { isMUITheme, Theme } from '~/shared/utilities/const';
+import { isMUITheme, Theme, USER_ID } from '~/shared/utilities/const';
 import NavSidebar from './NavSidebar';
 import AppRoutes from './AppRoutes';
 import { AppContext } from './AppContext';
@@ -30,6 +34,8 @@ const App: React.FC = () => {
     loadError: configError,
   } = useSettings();
 
+  const username = userSettings?.username;
+
   React.useEffect(() => {
     // Apply the theme based on the value of STYLE_THEME
     if (isMUITheme()) {
@@ -39,6 +45,16 @@ const App: React.FC = () => {
     }
   }, []);
 
+  React.useEffect(() => {
+    // Add the user to localStorage if in PoC
+    // TODO: [Env Handling] Remove this when auth is enabled
+    if (username) {
+      localStorage.setItem(USER_ID, username);
+    } else {
+      localStorage.removeItem(USER_ID);
+    }
+  }, [username]);
+
   const contextValue = React.useMemo(
     () =>
       configSettings && userSettings
@@ -86,7 +102,20 @@ const App: React.FC = () => {
     <Masthead>
       <MastheadMain />
       <MastheadContent>
-        {/* TODO: [Auth-enablement] Add logout and user status once we enable itNavigates to register page from table toolbar */}
+        <Toolbar>
+          <ToolbarContent>
+            <ToolbarGroup variant="action-group-plain" align={{ default: 'alignStart' }}>
+              <ToolbarItem>
+                {/* TODO: [Auth-enablement] Namespace selector */}
+              </ToolbarItem>
+            </ToolbarGroup>
+            <ToolbarGroup variant="action-group-plain" align={{ default: 'alignEnd' }}>
+              <ToolbarItem>
+                {/* TODO: [Auth-enablement] Add logout button */}
+              </ToolbarItem>
+            </ToolbarGroup>
+          </ToolbarContent>
+        </Toolbar>
       </MastheadContent>
     </Masthead>
   );

clients/ui/frontend/src/shared/api/apiUtils.ts

@@ -1,7 +1,7 @@
 import { APIOptions } from '~/shared/api/types';
 import { EitherOrNone } from '~/shared/typeHelpers';
 import { ModelRegistryBody } from '~/app/types';
-import { USER_ACCESS_TOKEN } from '~/shared/utilities/const';
+import { USER_ID } from '~/shared/utilities/const';
 
 export const mergeRequestInit = (
   opts: APIOptions = {},
@@ -61,23 +61,17 @@ const callRestJSON = <T>(
     requestData = JSON.stringify(data);
   }
 
-  // Get from the browser storage the value from the key USER_ACCESS_TOKEN
-  // and set it as the value for the header key 'x-forwarded-access-token'
-  // This is a security measure to ensure that the user is authenticated
-  // before making any API calls. Local Storage is not secure, but it is
-  // enough for this PoC.
-  const token = localStorage.getItem(USER_ACCESS_TOKEN);
-  if (token) {
-    otherOptions.headers = {
-      ...otherOptions.headers,
-      [USER_ACCESS_TOKEN]: token,
-    };
-  }
+  // Get from the browser storage the value from the key USER_ID
+  // and set it as a header value for the request.
+  // THIS IS ONLY INTENEDED FOR THE POC WHEN YOU CANNOT INJECT IT WITH A PROXY
+  // TODO: [Env Handling] Just add it when in PoC
+  const userID = localStorage.getItem(USER_ID);
 
   return fetch(`${host}${path}${searchParams ? `?${searchParams}` : ''}`, {
     ...otherOptions,
     headers: {
       ...otherOptions.headers,
+      ...(userID && { [USER_ID]: userID }), // TODO: [Env Handling] Just add it when in PoC
       ...(contentType && { 'Content-Type': contentType }),
     },
     method,

clients/ui/frontend/src/shared/hooks/useSettings.tsx

@@ -62,7 +62,7 @@ export const useSettings = (): {
 };
 
 // Mock a settings config call
-// TODO: [Data Flow] replace with thea actual call once we have the endpoint
+// TODO: [Data Flow] replace with the actual call once we have the endpoint
 export const fetchConfig = async (): Promise<ConfigSettings> => ({
   common: {
     featureFlags: {
@@ -72,9 +72,7 @@ export const fetchConfig = async (): Promise<ConfigSettings> => ({
 });
 
 // Mock a settings user call
-// TODO: [Auth-enablement] replace with thea actual call once we have the endpoint
+// TODO: [Auth-enablement] replace with the actual call once we have the endpoint
 export const fetchUser = async (): Promise<UserSettings> => ({
-  username: 'admin',
-  isAdmin: true,
-  isAllowed: true,
+  username: '[email protected]',
 });

clients/ui/frontend/src/shared/style/MUI-theme.scss

@@ -747,6 +747,7 @@
   --pf-v6-c-masthead--BackgroundColor: var(--mui-palette-common-white);
   box-shadow: var(--mui-shadows-1);
   min-height: var(--kf-central-app-bar-height);
+  margin-left: var(--kf-central-app-drawer-width);
 }
 
 .mui-theme .pf-v6-c-modal-box {
@@ -795,7 +796,5 @@
 }
 
 .mui-theme .pf-v6-c-page__main-container {
-  margin-left: var(--kf-central-app-drawer-width); /* Move content area to right of the sidebar */
   margin-top: var(--kf-central-app-bar-height); /* Move content area below the app bar */
 }
-

clients/ui/frontend/src/shared/types.ts

@@ -3,8 +3,6 @@ import { ValueOf } from '~/shared/typeHelpers';
 //  TODO: [Data Flow] Get the status config params
 export type UserSettings = {
   username: string;
-  isAdmin: boolean;
-  isAllowed: boolean;
 };
 
 // TODO: [Data Flow] Add more config parameters

clients/ui/frontend/src/shared/utilities/const.ts

@@ -11,6 +11,6 @@ export const isMUITheme = (): boolean => STYLE_THEME === Theme.MUI;
 
 export const STYLE_THEME = process.env.STYLE_THEME || Theme.MUI;
 
-export const USER_ACCESS_TOKEN = 'x-forwarded-access-token';
+export const USER_ID = 'kubeflow-userid';
 
 export { POLL_INTERVAL };