From 7851d23242022d0359f2a982576fb3baa2848fe2 Mon Sep 17 00:00:00 2001 From: lucferbux Date: Wed, 11 Dec 2024 11:57:45 +0100 Subject: [PATCH] Enable kubeflow user id header from endpoint Signed-off-by: lucferbux --- clients/ui/frontend/src/app/App.tsx | 33 +++++++++++++++++-- .../ui/frontend/src/shared/api/apiUtils.ts | 20 ++++------- .../frontend/src/shared/hooks/useSettings.tsx | 8 ++--- .../frontend/src/shared/style/MUI-theme.scss | 3 +- clients/ui/frontend/src/shared/types.ts | 2 -- .../ui/frontend/src/shared/utilities/const.ts | 2 +- 6 files changed, 43 insertions(+), 25 deletions(-) diff --git a/clients/ui/frontend/src/app/App.tsx b/clients/ui/frontend/src/app/App.tsx index d4c7f091..2288a8b8 100644 --- a/clients/ui/frontend/src/app/App.tsx +++ b/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 = () => { - {/* TODO: [Auth-enablement] Add logout and user status once we enable itNavigates to register page from table toolbar */} + + + + + {/* TODO: [Auth-enablement] Namespace selector */} + + + + + {/* TODO: [Auth-enablement] Add logout button */} + + + + ); diff --git a/clients/ui/frontend/src/shared/api/apiUtils.ts b/clients/ui/frontend/src/shared/api/apiUtils.ts index b5980718..f02e3942 100644 --- a/clients/ui/frontend/src/shared/api/apiUtils.ts +++ b/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 = ( 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, diff --git a/clients/ui/frontend/src/shared/hooks/useSettings.tsx b/clients/ui/frontend/src/shared/hooks/useSettings.tsx index 4aad461b..196f1ac2 100644 --- a/clients/ui/frontend/src/shared/hooks/useSettings.tsx +++ b/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 => ({ common: { featureFlags: { @@ -72,9 +72,7 @@ export const fetchConfig = async (): Promise => ({ }); // 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 => ({ - username: 'admin', - isAdmin: true, - isAllowed: true, + username: 'user@example.com', }); diff --git a/clients/ui/frontend/src/shared/style/MUI-theme.scss b/clients/ui/frontend/src/shared/style/MUI-theme.scss index 8896ec5b..5596c0c2 100644 --- a/clients/ui/frontend/src/shared/style/MUI-theme.scss +++ b/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 */ } - diff --git a/clients/ui/frontend/src/shared/types.ts b/clients/ui/frontend/src/shared/types.ts index 2b540f17..f442960f 100644 --- a/clients/ui/frontend/src/shared/types.ts +++ b/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 diff --git a/clients/ui/frontend/src/shared/utilities/const.ts b/clients/ui/frontend/src/shared/utilities/const.ts index 359a6677..97dda191 100644 --- a/clients/ui/frontend/src/shared/utilities/const.ts +++ b/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 };