Add a react context that makes namespace available anywhere.

frontend/src/index.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { init as initKfClient } from './lib/KubeflowClient';
+import { init as initKfClient, NamespaceContextProvider } from './lib/KubeflowClient';
 import './CSSReset';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -23,6 +23,7 @@ import Router from './components/Router';
 import { cssRule } from 'typestyle';
 import { theme, fonts } from './Css';
 import { HashRouter } from 'react-router-dom';
+import { KFP_FLAGS, Deployments } from './lib/Flags';
 
 // TODO: license headers
 
@@ -39,10 +40,20 @@ cssRule('html, body, #root', {
 });
 
 ReactDOM.render(
-  <MuiThemeProvider theme={theme}>
-    <HashRouter>
-      <Router />
-    </HashRouter>
-  </MuiThemeProvider>,
+  KFP_FLAGS.DEPLOYMENT === Deployments.KUBEFLOW ? (
+    <MuiThemeProvider theme={theme}>
+      <NamespaceContextProvider>
+        <HashRouter>
+          <Router />
+        </HashRouter>
+      </NamespaceContextProvider>
+    </MuiThemeProvider>
+  ) : (
+    <MuiThemeProvider theme={theme}>
+      <HashRouter>
+        <Router />
+      </HashRouter>
+    </MuiThemeProvider>
+  ),
   document.getElementById('root'),
 );

frontend/src/lib/KubeflowClient.ts → frontend/src/lib/KubeflowClient.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { KFP_FLAGS, Deployments } from './Flags';
 import { logger } from './Utils';
 
@@ -10,6 +11,12 @@ declare global {
   }
 }
 
+let namespace: string | undefined;
+let registeredHandler: undefined | ((namespace: string) => void);
+function onNamespaceChanged(handler: (namespace: string) => void) {
+  registeredHandler = handler;
+}
+
 export function init(): void {
   if (KFP_FLAGS.DEPLOYMENT !== Deployments.KUBEFLOW) {
     return;
@@ -21,12 +28,28 @@ export function init(): void {
     window.centraldashboard.CentralDashboardEventHandler.init((cdeh: any) => {
       // Binds a callback that gets invoked anytime the Dashboard's
       // namespace is changed
-      cdeh.onNamespaceSelected = (namespace: string) => {
-        // tslint:disable-next-line:no-console
-        console.log('Namespace changed to', namespace);
+      cdeh.onNamespaceSelected = (newNamespace: string) => {
+        namespace = newNamespace;
+        if (registeredHandler) {
+          registeredHandler(namespace);
+        }
       };
     });
   } catch (err) {
     logger.error('Failed to initialize central dashboard client', err);
   }
 }
+
+const NamespaceContext = React.createContext<string | undefined>(undefined);
+export const NamespaceContextConsumer = NamespaceContext.Consumer;
+export class NamespaceContextProvider extends React.Component {
+  state = {
+    namespace,
+  };
+  componentDidMount() {
+    onNamespaceChanged(ns => this.setState({ namespace: ns }));
+  }
+  render() {
+    return <NamespaceContext.Provider value={this.state.namespace} {...this.props} />;
+  }
+}

frontend/tslint.json

@@ -22,9 +22,9 @@
     "jsx-no-bind": false,
     "jsx-no-lambda": false,
     "max-classes-per-file": false,
+    "member-access": false,
     "ordered-imports": false,
     "semicolon": [true, "always", "ignore-bound-class-methods"],
-    "typedef": [true, "call-signature"],
     "no-unused-variable": true,
     "variable-name": [
       true,