Change USERNAME env to KUBEFLOW_USERNAME

clients/ui/frontend/.env

@@ -8,4 +8,4 @@ FAVICON=favicon.ico
 PRODUCT_NAME="Model Registry"
 STYLE_THEME=mui-theme
 PLATFORM_MODE=kubeflow
-
+KUBEFLOW_USERNAME=user@example.com

clients/ui/frontend/docs/env-variables.md

@@ -12,3 +12,5 @@ The following environment variables are used to configure the deployment and dev
   - The name of the product displayed in the UI.
 - `STYLE_THEME=mui-theme`
   - The style theme used for the UI, in this case, Material-UI theme.
+- `KUBEFLOW_USERNAME="user@example.com"`
+  - The default username for the application. **DO NOT CHANGE THIS IF BFF IS SET IN MOCK MODE**.

clients/ui/frontend/src/shared/hooks/useNamespaces.ts

@@ -4,7 +4,7 @@ import useFetchState, {
   FetchStateCallbackPromise,
 } from '~/shared/utilities/useFetchState';
 import { Namespace } from '~/shared/types';
-import { AUTH_HEADER, isStandalone, MOCK_AUTH, USERNAME } from '~/shared/utilities/const';
+import { AUTH_HEADER, isStandalone, MOCK_AUTH, KUBEFLOW_USERNAME } from '~/shared/utilities/const';
 import { getNamespaces } from '~/app/api/k8s';
 
 const useNamespaces = (): FetchState<Namespace[]> => {
@@ -14,7 +14,7 @@ const useNamespaces = (): FetchState<Namespace[]> => {
       if (!isStandalone()) {
         return Promise.resolve([]);
       }
-      const headers = MOCK_AUTH ? { [AUTH_HEADER]: USERNAME } : undefined;
+      const headers = MOCK_AUTH ? { [AUTH_HEADER]: KUBEFLOW_USERNAME } : undefined;
       return listNamespaces({
         ...opts,
         headers,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { USERNAME, POLL_INTERVAL, AUTH_HEADER, MOCK_AUTH } from '~/shared/utilities/const';
+import { KUBEFLOW_USERNAME, POLL_INTERVAL, AUTH_HEADER, MOCK_AUTH } from '~/shared/utilities/const';
 import { useDeepCompareMemoize } from '~/shared/utilities/useDeepCompareMemoize';
 import { ConfigSettings, UserSettings } from '~/shared/types';
 import useTimeBasedRefresh from '~/shared/hooks/useTimeBasedRefresh';
@@ -23,7 +23,7 @@ export const useSettings = (): {
     let watchHandle: ReturnType<typeof setTimeout>;
     let cancelled = false;
     const watchConfig = () => {
-      const headers = MOCK_AUTH ? { [AUTH_HEADER]: USERNAME } : undefined;
+      const headers = MOCK_AUTH ? { [AUTH_HEADER]: KUBEFLOW_USERNAME } : undefined;
       Promise.all([fetchConfig(), userRest({ headers })])
         .then(([fetchedConfig, fetchedUser]) => {
           if (cancelled) {

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

@@ -28,7 +28,7 @@ const MOCK_AUTH = process.env.MOCK_AUTH === 'true';
 const DEPLOYMENT_MODE = process.env.DEPLOYMENT_MODE || DeploymentMode.Integrated;
 const POLL_INTERVAL = process.env.POLL_INTERVAL ? parseInt(process.env.POLL_INTERVAL) : 30000;
 const AUTH_HEADER = process.env.AUTH_HEADER || 'kubeflow-userid';
-const USERNAME = process.env.USERNAME || 'user@example.com';
+const KUBEFLOW_USERNAME = process.env.KUBEFLOW_USERNAME || 'user@example.com';
 const IMAGE_DIR = process.env.IMAGE_DIR || 'images';
 const LOGO_LIGHT = process.env.LOGO || 'logo-light-theme.svg';
 const URL_PREFIX = '/model-registry';
@@ -37,7 +37,7 @@ export {
   POLL_INTERVAL,
   DEV_MODE,
   AUTH_HEADER,
-  USERNAME,
+  KUBEFLOW_USERNAME,
   IMAGE_DIR,
   LOGO_LIGHT,
   MOCK_AUTH,

devenv/configs/tiltfiles/frontend.tiltfile

@@ -82,7 +82,7 @@ local_resource(
         "DIST_DIR": "../../../devenv/ui-static",
         "DEPLOYMENT_MODE": "standalone",
         "MOCK_AUTH": "true",
-        "USERNAME": "test",
+        "KUBEFLOW_USERNAME": "test",
     },
     labels="frontend",
     trigger_mode=TRIGGER_MODE_AUTO