diff --git a/package.json b/package.json index bcf3d0666..ce216fd2e 100644 --- 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 index 8dd8a2ee5..c44ca6aac 100644 --- 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 index 05fe8df48..9ecc9e0b2 100644 --- 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 index c29f17af7..8857c1404 100644 --- 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 index 46870669e..a9a0171ae 100644 --- 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 index acb40fd58..9997236c0 100644 --- 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 = ( return ( - - + + = ( - + @@ -94,8 +94,8 @@ export const AppComponent: React.FC = ( - - + + ); diff --git a/packages/console/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx b/packages/console/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx index c7e81e912..3e57d4fa8 100644 --- a/packages/console/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx +++ b/packages/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 ( <> - -
- + + + + +
+ - - - -
- - - {`${project}/${domain}/${sourceId.name}/`} - {`${name}`} - - -
-
- - View Inputs & Outputs - - {actionContent} - {moreActionsContent} -
+ + {`${project}/${domain}/${sourceId.name}/`} + {`${name}`} + +
- - - - +
+ + View Inputs & Outputs + + {actionContent} + {moreActionsContent} +
+
+ + + {modalContent} ); }; +export const ExecutionDetailsAppBarContent: React.FC<{ + execution: Execution; +}> = ({ execution }) => { + return ( + + + + ); +}; diff --git a/packages/console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx b/packages/console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx index dae0ebb76..e83fa0543 100644 --- 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/packages/console/src/components/Executions/ExecutionDetails/test/ExecutionDetailsAppBarContent.test.tsx b/packages/console/src/components/Executions/ExecutionDetails/test/ExecutionDetailsAppBarContent.test.tsx index b2c0dcf4f..9577f43b5 100644 --- a/packages/console/src/components/Executions/ExecutionDetails/test/ExecutionDetailsAppBarContent.test.tsx +++ b/packages/console/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) => children, +jest.mock('components/Navigation/SubNavBarContent', () => ({ + SubNavBarContent: ({ children }: React.Props) => children, })); describe('ExecutionDetailsAppBarContent', () => { diff --git a/packages/console/src/components/Navigation/NavBar.tsx b/packages/console/src/components/Navigation/NavBar.tsx index 8bb17ef96..0946d489f 100644 --- 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 ? (
) : ( @@ -27,7 +28,13 @@ export const NavBar = (props: NavBarProps) => { ); - return ( + const { registry } = useExternalConfigurationContext(); + + const ExternalNav = registry?.nav; + + return ExternalNav ? ( + + ) : ( { position: 'fixed', }} > - {content} + {navBarContent} ); }; diff --git a/packages/console/src/components/Navigation/SubNavBarContent.tsx b/packages/console/src/components/Navigation/SubNavBarContent.tsx new file mode 100644 index 000000000..17e9f6190 --- /dev/null +++ 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> = ({ + 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 index d203a865f..bd573f924 100644 --- 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 index 87e2eecde..a4be260fd 100644 --- 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 index 04983a53b..1ca86bcc0 100644 --- 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, diff --git a/packages/console/src/components/Theme/constants.ts b/packages/console/src/components/Theme/constants.ts index a668c76cf..7d464dee2 100644 --- a/packages/console/src/components/Theme/constants.ts +++ b/packages/console/src/components/Theme/constants.ts @@ -17,6 +17,7 @@ export let primaryDarkColor = COLOR_SPECTRUM.purple70.color; export let primaryHighlightColor = COLOR_SPECTRUM.purple60.color; export const secondaryColor = COLOR_SPECTRUM.indigo100.color; export const secondaryBackgroundColor = COLOR_SPECTRUM.gray5.color; +export const subnavBackgroundColor = COLOR_SPECTRUM.gray7.color; export const primaryTextColor = COLOR_SPECTRUM.gray100.color; export const secondaryTextColor = COLOR_SPECTRUM.gray60.color; @@ -58,7 +59,6 @@ export const errorBackgroundColor = '#FBFBFC'; export const workflowLabelColor = COLOR_SPECTRUM.gray25.color; export const launchPlanLabelColor = COLOR_SPECTRUM.gray25.color; -export let flyteNavigation: FlyteNavigation | undefined = undefined; export let statusColors = { FAILURE: COLOR_SPECTRUM.red20.color, @@ -120,6 +120,5 @@ export const updateConstants = (config: AppConfig | undefined) => { statusColors = config.statusColors || statusColors; graphStatusColors = config.graphStatusColors || graphStatusColors; - flyteNavigation = config.flyteNavigation || flyteNavigation; } }; diff --git a/packages/console/src/components/Theme/muiTheme.ts b/packages/console/src/components/Theme/muiTheme.ts index 955aa05b0..ce51a4b5e 100644 --- a/packages/console/src/components/Theme/muiTheme.ts +++ b/packages/console/src/components/Theme/muiTheme.ts @@ -1,5 +1,6 @@ import { createTheme } from '@material-ui/core/styles'; import { AppConfig } from '@flyteorg/common'; +import { merge } from 'lodash'; import { bodyFontFamily, headerFontFamily, @@ -18,199 +19,210 @@ import { import { COLOR_SPECTRUM } from './colorSpectrum'; export const getMuiTheme = (config: AppConfig | undefined) => { - const theme = createTheme({ - palette: { - primary: { - main: config?.primaryColor || primaryColor, - light: config?.primaryLightColor || primaryLightColor, - dark: config?.primaryDarkColor || primaryDarkColor, - }, - secondary: { - main: secondaryColor, - }, - background: { - default: whiteColor, - // default: '#F4F4FA', - }, - text: { - primary: primaryTextColor, - secondary: secondaryTextColor, - }, - action: { - selected: selectedActionColor, - hoverOpacity: 0.15, - }, - }, - props: { - MuiIconButton: { - centerRipple: false, - }, - MuiPopover: { - elevation: 7, - }, - MuiAppBar: { - elevation: 1, - color: 'secondary', - }, - MuiTabs: { - indicatorColor: 'primary', - }, - MuiPaper: { - elevation: 0, - }, - }, - shape: { - borderRadius: 8, - }, - typography: { - // https://material-ui.com/style/typography/ - fontFamily: headerFontFamily, - body1: { - fontSize: '14px', - fontFamily: config?.bodyFontFamily || bodyFontFamily, - }, - body2: { - fontSize: '14px', - fontFamily: config?.bodyFontFamily || bodyFontFamily, - }, - h3: { - fontSize: '16px', - fontWeight: 'bold', - lineHeight: '22px', - }, - h4: { - fontSize: '14px', - fontWeight: 'bold', - lineHeight: '20px', - }, - h6: { - fontSize: '.875rem', - fontWeight: 'bold', - lineHeight: 1.357, - }, - overline: { - fontFamily: headerFontFamily, - fontSize: '.75rem', - fontWeight: 'bold', - letterSpacing: 'normal', - lineHeight: '1rem', - textTransform: 'uppercase', - }, - subtitle1: { - fontFamily: headerFontFamily, - fontSize: '.75rem', - letterSpacing: 'normal', - lineHeight: '1rem', - }, - }, - }); - - const muiTheme = { - ...theme, - overrides: { - MuiButton: { - root: { - fontWeight: 600, - }, - label: { - textTransform: 'initial', - }, - contained: { - boxShadow: 'none', - color: whiteColor, - ['&:active']: { - boxShadow: 'none', + const theme = createTheme( + merge( + { + palette: { + primary: { + main: primaryColor, + light: primaryLightColor, + dark: primaryDarkColor, }, - }, - outlined: { - backgroundColor: 'transparent', - }, - outlinedPrimary: { - border: `1px solid ${theme.palette.primary.main}`, - color: theme.palette.primary.main, - ['&:hover']: { - borderColor: theme.palette.primary.dark, - color: theme.palette.primary.dark, + secondary: { + main: secondaryColor, }, - }, - text: { - color: theme.palette.text.secondary, - ['&:hover']: { - color: theme.palette.text.primary, + background: { + default: whiteColor, + // default: '#F4F4FA', + }, + text: { + primary: primaryTextColor, + secondary: secondaryTextColor, + }, + action: { + selected: selectedActionColor, + hoverOpacity: 0.15, }, }, - }, - MuiOutlinedInput: { - root: { - '& $notchedOutline': { - borderRadius: 4, + props: { + MuiIconButton: { + centerRipple: false, + }, + MuiPopover: { + elevation: 7, + }, + MuiAppBar: { + elevation: 1, + color: 'secondary', }, - '&$focused $notchedOutline': { - borderColor: config?.inputFocusBorderColor || inputFocusBorderColor, + MuiTabs: { + indicatorColor: 'primary', + }, + MuiPaper: { + elevation: 0, }, }, - }, - MuiTab: { - labelIcon: { - minHeight: '64px', - paddingTop: 0, + shape: { + borderRadius: 8, }, - wrapper: { - flexDirection: 'row', - ['& svg']: { - marginLeft: 12, - position: 'relative', - left: 12, + typography: { + // https://material-ui.com/style/typography/ + fontFamily: headerFontFamily, + body1: { + fontSize: '14px', + fontFamily: bodyFontFamily, }, - }, - root: { - fontWeight: 600, - fontSize: '.875rem', - margin: `0 ${theme.spacing(1.75)}px`, - minWidth: 0, - padding: `0 ${theme.spacing(1.75)}px`, - textTransform: 'none', - [theme.breakpoints.up('md')]: { + body2: { + fontSize: '14px', + fontFamily: bodyFontFamily, + }, + h3: { + fontSize: '16px', + fontWeight: 'bold', + lineHeight: '22px', + }, + h4: { + fontSize: '14px', + fontWeight: 'bold', + lineHeight: '20px', + }, + h6: { fontSize: '.875rem', - margin: `0 ${theme.spacing(1.75)}px`, - minWidth: 0, - padding: `0 ${theme.spacing(1.75)}px`, + fontWeight: 'bold', + lineHeight: 1.357, }, - ['&:hover']: { - backgroundColor: theme.palette.action.hover, + overline: { + fontFamily: headerFontFamily, + fontSize: '.75rem', + fontWeight: 'bold', + letterSpacing: 'normal', + lineHeight: '1rem', + textTransform: 'uppercase', + }, + subtitle1: { + fontFamily: headerFontFamily, + fontSize: '.75rem', + letterSpacing: 'normal', + lineHeight: '1rem', }, }, }, - MuiTabs: { - indicator: { - height: 4, - backgroundColor: primaryHighlightColor, - }, - }, - MuiSwitch: { - switchBase: { - // Controls default (unchecked) color for the thumb - color: whiteColor, - }, - colorSecondary: { - '&$checked': { - // Controls checked color for the thumb - color: whiteColor, + config?.themeOptions || {}, + ), + ); + + const muiTheme = createTheme( + merge( + { + overrides: { + MuiButton: { + root: { + fontWeight: 600, + }, + label: { + textTransform: 'initial', + }, + contained: { + boxShadow: 'none', + color: whiteColor, + ['&:active']: { + boxShadow: 'none', + }, + }, + outlined: { + backgroundColor: 'transparent', + }, + outlinedPrimary: { + border: `1px solid ${theme.palette.primary.main}`, + color: theme.palette.primary.main, + ['&:hover']: { + borderColor: theme.palette.primary.dark, + color: theme.palette.primary.dark, + }, + }, + text: { + color: theme.palette.text.secondary, + ['&:hover']: { + color: theme.palette.text.primary, + }, + }, }, - }, - track: { - // Controls default (unchecked) color for the track - opacity: 1, - backgroundColor: mutedButtonColor, - '$checked$checked + &': { - // Controls checked color for the track - opacity: 1, - backgroundColor: COLOR_SPECTRUM.mint20.color, + MuiOutlinedInput: { + root: { + '& $notchedOutline': { + borderRadius: 4, + }, + '&$focused $notchedOutline': { + borderColor: + config?.inputFocusBorderColor || inputFocusBorderColor, + }, + }, + }, + MuiTab: { + labelIcon: { + minHeight: '64px', + paddingTop: 0, + }, + wrapper: { + flexDirection: 'row', + ['& svg']: { + marginLeft: 12, + position: 'relative', + left: 12, + }, + }, + root: { + fontWeight: 600, + fontSize: '.875rem', + margin: `0 ${theme.spacing(1.75)}px`, + minWidth: 0, + padding: `0 ${theme.spacing(1.75)}px`, + textTransform: 'none', + [theme.breakpoints.up('md')]: { + fontSize: '.875rem', + margin: `0 ${theme.spacing(1.75)}px`, + minWidth: 0, + padding: `0 ${theme.spacing(1.75)}px`, + }, + ['&:hover']: { + backgroundColor: theme.palette.action.hover, + }, + }, + }, + MuiTabs: { + indicator: { + height: 4, + backgroundColor: primaryHighlightColor, + }, + }, + MuiSwitch: { + switchBase: { + // Controls default (unchecked) color for the thumb + color: whiteColor, + }, + colorSecondary: { + '&$checked': { + // Controls checked color for the thumb + color: whiteColor, + }, + }, + track: { + // Controls default (unchecked) color for the track + opacity: 1, + backgroundColor: mutedButtonColor, + '$checked$checked + &': { + // Controls checked color for the track + opacity: 1, + backgroundColor: COLOR_SPECTRUM.mint20.color, + }, + }, }, }, + // this will merge the two themes }, - }, - }; + theme, + ), + ); return muiTheme; }; diff --git a/packages/console/src/models/Task/index.ts b/packages/console/src/models/Task/index.ts index e94e4b160..c94f80f84 100644 --- a/packages/console/src/models/Task/index.ts +++ b/packages/console/src/models/Task/index.ts @@ -1 +1 @@ -export * from './constants'; \ No newline at end of file +export * from './constants'; diff --git a/packages/console/src/routes/ApplicationRouter.tsx b/packages/console/src/routes/ApplicationRouter.tsx index 2c31cefae..a5b941829 100644 --- a/packages/console/src/routes/ApplicationRouter.tsx +++ b/packages/console/src/routes/ApplicationRouter.tsx @@ -6,15 +6,41 @@ import { withSideNavigation } from 'components/Navigation/withSideNavigation'; import * as React from 'react'; import { Route, Switch } from 'react-router-dom'; import { useExternalConfigurationContext } from 'basics/ExternalConfigurationProvider'; +import { Toolbar } from '@material-ui/core'; +import { styled } from '@material-ui/core/styles'; +import { subnavBarContentId } from 'common/constants'; +import { subnavBackgroundColor } from 'components/Theme/constants'; import { components } from './components'; import { Routes } from './routes'; +const StyledSubNavBarContent = styled(Toolbar)(() => ({ + minHeight: 'auto', + padding: 0, + margin: 0, + + '& > *': { + alignItems: 'center', + display: 'flex', + maxWidth: '100%', + padding: '24px 20px 24px 30px', + background: subnavBackgroundColor, + }, + '@media (min-width: 600px)': { + minHeight: 'auto', + }, +})); + export function withContentContainer

( WrappedComponent: React.FC

, contentContainerProps?: ContentContainerProps, ) { return (props: P) => ( + + ); diff --git a/packages/console/src/routes/NavBarRouter.tsx b/packages/console/src/routes/NavBarRouter.tsx deleted file mode 100644 index af6d1eb58..000000000 --- a/packages/console/src/routes/NavBarRouter.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { NavBar } from 'components/Navigation/NavBar'; -import * as React from 'react'; -import { Route, Switch } from 'react-router-dom'; -import { useExternalConfigurationContext } from 'basics/ExternalConfigurationProvider'; -import { Routes } from './routes'; - -const CustomNavBar = () => ; - -interface NavBarRouterProps {} -/** Handles the routing for content displayed in the NavBar */ -export const NavBarRouter: React.FC = () => { - const { registry } = useExternalConfigurationContext(); - - const ExternalNav = registry?.nav; - return ( - <> - - - - - - ); -}; diff --git a/website/package.json b/website/package.json index d8177bf2f..3bfdcd2d6 100644 --- a/website/package.json +++ b/website/package.json @@ -36,8 +36,8 @@ "react-dom": "^16.13.1" }, "dependencies": { - "@flyteorg/common": "^0.0.3", - "@flyteorg/console": "^0.0.17", + "@flyteorg/common": "^0.0.4", + "@flyteorg/console": "^0.0.20", "long": "^4.0.0", "protobufjs": "~6.11.3", "react-ga4": "^1.4.1", diff --git a/yarn.lock b/yarn.lock index 14ded1881..80aa10f3f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1994,8 +1994,8 @@ __metadata: version: 0.0.0-use.local resolution: "@flyteconsole/client-app@workspace:website" dependencies: - "@flyteorg/common": ^0.0.3 - "@flyteorg/console": ^0.0.17 + "@flyteorg/common": ^0.0.4 + "@flyteorg/console": ^0.0.20 "@types/long": ^3.0.32 long: ^4.0.0 protobufjs: ~6.11.3 @@ -2011,7 +2011,7 @@ __metadata: languageName: unknown linkType: soft -"@flyteorg/common@^0.0.3, @flyteorg/common@workspace:packages/common": +"@flyteorg/common@^0.0.4, @flyteorg/common@workspace:packages/common": version: 0.0.0-use.local resolution: "@flyteorg/common@workspace:packages/common" languageName: unknown @@ -2034,13 +2034,13 @@ __metadata: languageName: unknown linkType: soft -"@flyteorg/console@^0.0.17, @flyteorg/console@workspace:packages/console": +"@flyteorg/console@^0.0.20, @flyteorg/console@workspace:packages/console": version: 0.0.0-use.local resolution: "@flyteorg/console@workspace:packages/console" 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