chore: allow custom subnav (#734)

* chore: allow custom subnav Signed-off-by: Carina Ursu <[email protected]> * chore: allow custom subnav Signed-off-by: Carina Ursu <[email protected]> * chore: bump console Signed-off-by: Carina Ursu <[email protected]> * chore: fixes Signed-off-by: Carina Ursu <[email protected]> * chore: fix ExecutionDetailsAppBarContent.test.tsx Signed-off-by: Carina Ursu <[email protected]> * chore: versions Signed-off-by: Carina Ursu <[email protected]> --------- Signed-off-by: Carina Ursu <[email protected]>
flyteorg · Apr 15, 2023 · 33ee52a · 33ee52a
1 parent 5aecd5c
commit 33ee52a
Show file tree

Hide file tree

Showing 21 changed files with 338 additions and 282 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   },
   "scripts": {
     "postinstall": "husky install",
+    "install:console": "yarn workspaces focus --production --all",
     "build:pack": "yarn workspaces foreach -vit --include '{@flyteorg/flyteidl-types,@flyteorg/flyte-api,@flyteorg/ui-atoms,@flyteorg/common,@flyteorg/locale,@flyteorg/flyte-api,@flyteorg/components,@flyteorg/console}' run build",
     "build:types": "yarn workspaces foreach -vit --include '{@flyteorg/flyteidl-types,@flyteorg/flyte-api,@flyteorg/ui-atoms,@flyteorg/common,@flyteorg/locale,@flyteorg/flyte-api,@flyteorg/components,@flyteorg/console}' run build:types",
     "clean": "git clean -fxd --exclude script",

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@flyteorg/common",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Flyteconsole common utilities",
   "main": "./dist/index.js",
   "module": "./lib/index.js",

diff --git a/packages/common/src/config/index.ts b/packages/common/src/config/index.ts
@@ -1,3 +1,5 @@
+import { ThemeOptions } from '@material-ui/core/styles';
+
 type StatusColor = {
   FAILURE: string;
   RUNNING: string;
@@ -44,5 +46,5 @@ export type AppConfig = {
   inputFocusBorderColor?: string;
   statusColors?: StatusColor;
   graphStatusColors?: GraphStatusColor;
-  flyteNavigation?: FlyteNavigation;
+  themeOptions?: ThemeOptions;
 };
diff --git a/packages/console/package.json b/packages/console/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@flyteorg/console",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Flyteconsole main app module",
   "main": "./dist/index.js",
   "module": "./lib/index.js",
@@ -56,7 +56,7 @@
   "dependencies": {
     "@date-io/moment": "1.3.9",
     "@emotion/core": "10.1.1",
-    "@flyteorg/common": "^0.0.3",
+    "@flyteorg/common": "^0.0.4",
     "@flyteorg/components": "^0.0.3",
     "@flyteorg/flyte-api": "^0.0.2",
     "@flyteorg/flyteidl-types": "^0.0.3",

diff --git a/packages/console/src/common/constants.ts b/packages/console/src/common/constants.ts
@@ -1,6 +1,7 @@
 export const contentContainerId = 'content-container';
 export const detailsPanelId = 'details-panel';
 export const navBarContentId = 'nav-bar-content';
+export const subnavBarContentId = 'subnav-bar-content';
 
 export const unknownValueString = '(unknown)';
 export const dashedValueString = '----';

diff --git a/packages/console/src/components/App/App.tsx b/packages/console/src/components/App/App.tsx
@@ -29,12 +29,12 @@ import { ReactQueryDevtools } from 'react-query-devtools';
 import { Router } from 'react-router-dom';
 import { ApplicationRouter } from 'routes/ApplicationRouter';
 import { history } from 'routes/history';
-import { NavBarRouter } from 'routes/NavBarRouter';
 import { LocalCacheProvider } from 'basics/LocalCache/ContextProvider';
 import {
   ExternalConfigurationProvider,
   ExternalConfigurationProviderProps,
 } from 'basics/ExternalConfigurationProvider';
+import NavBar from 'components/Navigation/NavBar';
 
 export type AppComponentProps = ExternalConfigurationProviderProps;
 
@@ -58,12 +58,12 @@ export const AppComponent: React.FC<AppComponentProps> = (
   return (
     <FeatureFlagsProvider>
       <LocalCacheProvider>
-        <ThemeProvider theme={getMuiTheme(props.config)}>
-          <StylesProvider
-            generateClassName={createGenerateClassName({
-              seed: 'c-',
-            })}
-          >
+        <StylesProvider
+          generateClassName={createGenerateClassName({
+            seed: 'c-',
+          })}
+        >
+          <ThemeProvider theme={getMuiTheme(props.config)}>
             <SnackbarProvider
               // Notifications provider https://iamhosseindhv.com/notistack/demos
               maxSnack={2}
@@ -82,7 +82,7 @@ export const AppComponent: React.FC<AppComponentProps> = (
                       <ExternalConfigurationProvider {...props}>
                         <Router history={history}>
                           <ErrorBoundary fixed={true}>
-                            <NavBarRouter />
+                            <NavBar />
                             <ApplicationRouter />
                           </ErrorBoundary>
                         </Router>
@@ -94,8 +94,8 @@ export const AppComponent: React.FC<AppComponentProps> = (
                 <ReactQueryDevtools initialIsOpen={false} />
               </QueryClientProvider>
             </SnackbarProvider>
-          </StylesProvider>
-        </ThemeProvider>
+          </ThemeProvider>
+        </StylesProvider>
       </LocalCacheProvider>
     </FeatureFlagsProvider>
   );

diff --git a/...ages/console/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx b/...ages/console/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Button, Dialog, Link, Typography } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import ArrowBack from '@material-ui/icons/ArrowBack';
@@ -7,14 +8,12 @@ import { ButtonCircularProgress } from 'components/common/ButtonCircularProgress
 import { MoreOptionsMenu } from 'components/common/MoreOptionsMenu';
 import { useCommonStyles } from 'components/common/styles';
 import { useLocationState } from 'components/hooks/useLocationState';
-import { NavBarContent } from 'components/Navigation/NavBarContent';
-import { interactiveTextDisabledColor } from 'components/Theme/constants';
 import { Execution } from 'models/Execution/types';
-import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { history } from 'routes/history';
 import { Routes } from 'routes/routes';
 import { WorkflowExecutionPhase } from 'models/Execution/enums';
+import { SubNavBarContent } from 'components/Navigation/SubNavBarContent';
 import { ExecutionInputsOutputsModal } from '../ExecutionInputsOutputsModal';
 import { ExecutionStatusBadge } from '../ExecutionStatusBadge';
 import { TerminateExecutionButton } from '../TerminateExecution/TerminateExecutionButton';
@@ -48,7 +47,7 @@ const useStyles = makeStyles((theme: Theme) => {
       maxWidth: '100%',
     },
     inputsOutputsLink: {
-      color: interactiveTextDisabledColor,
+      color: theme.palette.primary.main,
     },
     moreActions: {
       marginLeft: theme.spacing(1),
@@ -74,7 +73,7 @@ const useStyles = makeStyles((theme: Theme) => {
 });
 
 /** Renders information about a given Execution into the NavBar */
-export const ExecutionDetailsAppBarContent: React.FC<{
+export const ExecutionDetailsAppBarContentInner: React.FC<{
   execution: Execution;
 }> = ({ execution }) => {
   const commonStyles = useCommonStyles();
@@ -180,53 +179,64 @@ export const ExecutionDetailsAppBarContent: React.FC<{
 
   return (
     <>
-      <NavBarContent>
-        <div className={styles.container}>
-          <RouterLink
-            title={backLinkTitle}
-            className={styles.backLink}
-            to={backLink}
+      <div className={styles.container}>
+        <RouterLink
+          title={backLinkTitle}
+          className={classnames('backLink', styles.backLink)}
+          to={backLink}
+        >
+          <ArrowBack />
+        </RouterLink>
+        <ExecutionStatusBadge
+          phase={phase}
+          type="workflow"
+          className="subNavBadge"
+        />
+        <div className={classnames('titleContainer', styles.titleContainer)}>
+          <Typography
+            variant="body1"
+            className={classnames(styles.title, commonStyles.textWrapped)}
           >
-            <ArrowBack />
-          </RouterLink>
-          <ExecutionStatusBadge phase={phase} type="workflow" />
-          <div className={styles.titleContainer}>
-            <Typography
-              variant="body1"
-              className={classnames(styles.title, commonStyles.textWrapped)}
-            >
-              <span>
-                {`${project}/${domain}/${sourceId.name}/`}
-                <strong>{`${name}`}</strong>
-              </span>
-            </Typography>
-          </div>
-          <div className={styles.actions}>
-            <Link
-              className={styles.inputsOutputsLink}
-              component="button"
-              onClick={onClickShowInputsOutputs}
-              variant="body1"
-            >
-              View Inputs &amp; Outputs
-            </Link>
-            {actionContent}
-            {moreActionsContent}
-          </div>
+            <span>
+              {`${project}/${domain}/${sourceId.name}/`}
+              <strong>{`${name}`}</strong>
+            </span>
+          </Typography>
         </div>
-        <Dialog
-          scroll="paper"
-          maxWidth="sm"
-          fullWidth={true}
-          open={showRelaunchForm}
-        >
-          <RelaunchExecutionForm
-            execution={execution}
-            onClose={onCloseRelaunch}
-          />
-        </Dialog>
-      </NavBarContent>
+        <div className={styles.actions}>
+          <Link
+            className={styles.inputsOutputsLink}
+            component="button"
+            onClick={onClickShowInputsOutputs}
+            variant="body1"
+          >
+            View Inputs &amp; Outputs
+          </Link>
+          {actionContent}
+          {moreActionsContent}
+        </div>
+      </div>
+      <Dialog
+        scroll="paper"
+        maxWidth="sm"
+        fullWidth={true}
+        open={showRelaunchForm}
+      >
+        <RelaunchExecutionForm
+          execution={execution}
+          onClose={onCloseRelaunch}
+        />
+      </Dialog>
       {modalContent}
     </>
   );
 };
+export const ExecutionDetailsAppBarContent: React.FC<{
+  execution: Execution;
+}> = ({ execution }) => {
+  return (
+    <SubNavBarContent>
+      <ExecutionDetailsAppBarContentInner execution={execution} />
+    </SubNavBarContent>
+  );
+};
diff --git a/packages/console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx b/packages/console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Typography } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import classnames from 'classnames';
@@ -7,7 +8,6 @@ import { timestampToDate } from 'common/utils';
 import { useCommonStyles } from 'components/common/styles';
 import { secondaryBackgroundColor } from 'components/Theme/constants';
 import { Execution } from 'models/Execution/types';
-import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { Routes } from 'routes/routes';
 import { ExpandableExecutionError } from '../Tables/ExpandableExecutionError';

diff --git a/...le/src/components/Executions/ExecutionDetails/test/ExecutionDetailsAppBarContent.test.tsx b/...le/src/components/Executions/ExecutionDetails/test/ExecutionDetailsAppBarContent.test.tsx
@@ -21,8 +21,8 @@ import { createTestQueryClient } from 'test/utils';
 import { backLinkTitle, executionActionStrings } from '../constants';
 import { ExecutionDetailsAppBarContent } from '../ExecutionDetailsAppBarContent';
 
-jest.mock('components/Navigation/NavBarContent', () => ({
-  NavBarContent: ({ children }: React.Props<any>) => children,
+jest.mock('components/Navigation/SubNavBarContent', () => ({
+  SubNavBarContent: ({ children }: React.Props<any>) => children,
 }));
 
 describe('ExecutionDetailsAppBarContent', () => {

diff --git a/packages/console/src/components/Navigation/NavBar.tsx b/packages/console/src/components/Navigation/NavBar.tsx
@@ -4,6 +4,7 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import { navBarContentId } from 'common/constants';
 import { FlyteNavigation } from '@flyteorg/common';
+import { useExternalConfigurationContext } from 'basics/ExternalConfigurationProvider';
 import { getFlyteNavigationData } from './utils';
 
 export interface NavBarProps {
@@ -16,7 +17,7 @@ const DefaultAppBarContent = lazy(() => import('./DefaultAppBarContent'));
 /** Contains all content in the top navbar of the application. */
 export const NavBar = (props: NavBarProps) => {
   const navData = props.navigationData ?? getFlyteNavigationData();
-  const content = props.useCustomContent ? (
+  const navBarContent = props.useCustomContent ? (
     <div id={navBarContentId} />
   ) : (
     <Suspense fallback={null}>
@@ -27,7 +28,13 @@ export const NavBar = (props: NavBarProps) => {
     </Suspense>
   );
 
-  return (
+  const { registry } = useExternalConfigurationContext();
+
+  const ExternalNav = registry?.nav;
+
+  return ExternalNav ? (
+    <ExternalNav />
+  ) : (
     <AppBar
       color="secondary"
       elevation={0}
@@ -38,7 +45,7 @@ export const NavBar = (props: NavBarProps) => {
         position: 'fixed',
       }}
     >
-      <Toolbar id={navBarContentId}>{content}</Toolbar>
+      <Toolbar id={navBarContentId}>{navBarContent}</Toolbar>
     </AppBar>
   );
 };

diff --git a/packages/console/src/components/Navigation/SubNavBarContent.tsx b/packages/console/src/components/Navigation/SubNavBarContent.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { subnavBarContentId } from 'common/constants';
+import { log } from 'common/log';
+
+/** Complements NavBar, allowing pages to inject custom content. */
+export const SubNavBarContent: React.FC<React.PropsWithChildren<{}>> = ({
+  children,
+}) => {
+  const navBar = document.getElementById(subnavBarContentId);
+  if (navBar == null) {
+    log.warn(`
+            Attempting to mount content into NavBar, but failed to find the content component.
+            Did you mount an instance of NavBar with useCustomContent=true?`);
+    return null;
+  }
+  return ReactDOM.createPortal(children, navBar);
+};
diff --git a/packages/console/src/components/Navigation/index.ts b/packages/console/src/components/Navigation/index.ts
@@ -1,2 +1,3 @@
 export * from './UserInformation';
-export { NavBarContent } from './NavBarContent';
+export * from './NavBarContent';
+export * from './SubNavBarContent';
diff --git a/packages/console/src/components/Navigation/utils.ts b/packages/console/src/components/Navigation/utils.ts
@@ -1,5 +1,4 @@
 import { env } from '@flyteorg/common';
-import { flyteNavigation } from 'components/Theme/constants';
 
 export interface FlyteNavItem {
   title: string;
@@ -14,7 +13,5 @@ export interface FlyteNavigation {
 }
 
 export const getFlyteNavigationData = (): FlyteNavigation | undefined => {
-  if (flyteNavigation) return flyteNavigation;
-
   return env.FLYTE_NAVIGATION ? JSON.parse(env.FLYTE_NAVIGATION) : undefined;
 };
diff --git a/packages/console/src/components/Theme/colorSpectrum.ts b/packages/console/src/components/Theme/colorSpectrum.ts
@@ -195,6 +195,7 @@ export type ColorSpectrumType =
   | 'rose100'
   | 'gray0'
   | 'gray5'
+  | 'gray7'
   | 'gray10'
   | 'gray15'
   | 'gray20'
@@ -992,9 +993,13 @@ export const COLOR_SPECTRUM: {
     value: 0,
   },
   gray5: {
-    color: '#F4F4FA',
+    color: '#F2F3F3',
     value: 5,
   },
+  gray7: {
+    color: '#E6E7E8',
+    value: 7,
+  },
   gray10: {
     color: '#E7E7EF',
     value: 10,