chore: new nav bar

Signed-off-by: Frank Flitton <[email protected]>
flyteorg · Jul 11, 2023 · 381d3be · 381d3be
1 parent e2fd2a4
commit 381d3be
Show file tree

Hide file tree

Showing 36 changed files with 1,241 additions and 494 deletions.
diff --git a/packages/components/src/AppInfo/index.tsx b/packages/components/src/AppInfo/index.tsx
@@ -18,7 +18,6 @@ export const INFO_WINDOW_WIDTH = 260;
 const useStyles = makeStyles((theme: Theme) => ({
   infoIcon: {
     cursor: 'pointer',
-    marginLeft: theme.spacing(1),
     backgroundColor: 'initial',
   },
   closeButton: {

diff --git a/packages/console/src/basics/ExternalConfigurationProvider/ExternalConfigurationProvider.tsx b/packages/console/src/basics/ExternalConfigurationProvider/ExternalConfigurationProvider.tsx
@@ -4,8 +4,9 @@ import { AppConfig } from '@flyteorg/common';
 export interface ExternalConfigurationProviderProps {
   registry?: {
     nav?: React.FC<any>;
+    topLevelLayout?: React.FC<any>;
     taskExecutionAttemps?: React.FC<any>;
-    additionalRoutes?: any;
+    additionalRoutes?: any[];
   };
   env?: any;
   config?: AppConfig;

diff --git a/packages/console/src/basics/FeatureFlags/defaultConfig.ts b/packages/console/src/basics/FeatureFlags/defaultConfig.ts
@@ -10,6 +10,9 @@ export enum FeatureFlag {
   // Production flags
   LaunchPlan = 'launch-plan',
 
+  // Makes the header inline with the content
+  HorizontalLayout = 'horizontal-layout',
+
   // Test Only Mine flag
   OnlyMine = 'only-mine',
 }
@@ -24,6 +27,8 @@ export const defaultFlagConfig: FeatureFlagConfig = {
   // If you need to turn it on locally -> update runtimeConfig in ./index.tsx file
   'launch-plan': false,
 
+  'horizontal-layout': false,
+
   'only-mine': false,
 };
 

diff --git a/packages/console/src/components/App/App.tsx b/packages/console/src/components/App/App.tsx
@@ -34,7 +34,11 @@ import {
   ExternalConfigurationProvider,
   ExternalConfigurationProviderProps,
 } from 'basics/ExternalConfigurationProvider';
+import TopLevelLayoutProvider from 'components/Navigation/TopLevelLayoutState';
+import TopLevelLayout from 'components/Navigation/TopLevelLayout';
 import NavBar from 'components/Navigation/NavBar';
+import { SideNavigation } from 'components/Navigation/SideNavigation';
+import GlobalStyles from 'components/utils/GlobalStyles';
 
 export type AppComponentProps = ExternalConfigurationProviderProps;
 
@@ -55,8 +59,12 @@ export const AppComponent: React.FC<AppComponentProps> = (
   }
   const apiState = useAPIState();
 
+  const horizontalLayoutFlag =
+    `${env.HORIZONTAL_LAYOUT}`.trim().toLowerCase() === 'true';
+
   return (
     <FeatureFlagsProvider>
+      <GlobalStyles />
       <LocalCacheProvider>
         <StylesProvider
           generateClassName={createGenerateClassName({
@@ -82,16 +90,25 @@ export const AppComponent: React.FC<AppComponentProps> = (
                       <ExternalConfigurationProvider {...props}>
                         <Router history={history}>
                           <ErrorBoundary fixed={true}>
-                            <NavBar />
-                            <ApplicationRouter />
+                            <TopLevelLayoutProvider>
+                              <TopLevelLayout
+                                headerComponent={<NavBar />}
+                                sideNavigationComponent={<SideNavigation />}
+                                routerView={<ApplicationRouter />}
+                                isHorizontalLayout={horizontalLayoutFlag}
+                              />
+                            </TopLevelLayoutProvider>
                           </ErrorBoundary>
                         </Router>
                       </ExternalConfigurationProvider>
                       <SystemStatusBanner />
                     </SkeletonTheme>
                   </APIContext.Provider>
                 </FlyteApiProvider>
-                <ReactQueryDevtools initialIsOpen={false} />
+                <ReactQueryDevtools
+                  initialIsOpen={false}
+                  position="bottom-right"
+                />
               </QueryClientProvider>
             </SnackbarProvider>
           </ThemeProvider>

diff --git a/packages/console/src/components/Entities/EntityDetails.tsx b/packages/console/src/components/Entities/EntityDetails.tsx
@@ -1,11 +1,12 @@
+import * as React from 'react';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { contentMarginGridUnits } from 'common/layout';
-import { WaitForData } from 'components/common/WaitForData';
 import { EntityDescription } from 'components/Entities/EntityDescription';
 import { useProject } from 'components/hooks/useProjects';
 import { useChartState } from 'components/hooks/useChartState';
 import { ResourceIdentifier } from 'models/Common/types';
-import * as React from 'react';
+import { Grid } from '@material-ui/core';
+import { LoadingSpinner } from 'components/common';
 import { entitySections } from './constants';
 import { EntityDetailsHeader } from './EntityDetailsHeader';
 import { EntityInputs } from './EntityInputs';
@@ -15,6 +16,10 @@ import { EntityVersions } from './EntityVersions';
 import { EntityExecutionsBarChart } from './EntityExecutionsBarChart';
 
 const useStyles = makeStyles((theme: Theme) => ({
+  entityDetailsWrapper: {
+    px: theme.spacing(2),
+    minHeight: '100vh',
+  },
   metadataContainer: {
     display: 'flex',
     marginBottom: theme.spacing(2),
@@ -57,58 +62,63 @@ interface EntityDetailsProps {
  */
 export const EntityDetails: React.FC<EntityDetailsProps> = ({ id }) => {
   const sections = entitySections[id.resourceType];
-  const project = useProject(id.project);
+  const [project] = useProject(id.project);
   const styles = useStyles();
   const { chartIds, onToggle, clearCharts } = useChartState();
 
   return (
-    <WaitForData {...project}>
-      <EntityDetailsHeader
-        project={project.value}
-        id={id}
-        launchable={!!sections.launch}
-      />
+    <Grid container direction="column" className={styles.entityDetailsWrapper}>
+      {!project?.id && <LoadingSpinner />}
+      {project?.id && (
+        <>
+          <EntityDetailsHeader
+            project={project}
+            id={id}
+            launchable={!!sections.launch}
+          />
 
-      <div className={styles.metadataContainer}>
-        {sections.description ? (
-          <div className={styles.descriptionContainer}>
-            <EntityDescription id={id} />
-          </div>
-        ) : null}
-        {!sections.inputs && sections.schedules ? (
-          <div className={styles.schedulesContainer}>
-            <EntitySchedules id={id} />
+          <div className={styles.metadataContainer}>
+            {sections.description && (
+              <div className={styles.descriptionContainer}>
+                <EntityDescription id={id} />
+              </div>
+            )}
+            {!sections.inputs && sections.schedules && (
+              <div className={styles.schedulesContainer}>
+                <EntitySchedules id={id} />
+              </div>
+            )}
           </div>
-        ) : null}
-      </div>
-
-      {sections.inputs ? (
-        <div className={styles.inputsContainer}>
-          <EntityInputs id={id} />
-        </div>
-      ) : null}
 
-      {sections.versions ? (
-        <div className={styles.versionsContainer}>
-          <EntityVersions id={id} />
-        </div>
-      ) : null}
+          {!!sections.inputs && (
+            <div className={styles.inputsContainer}>
+              <EntityInputs id={id} />
+            </div>
+          )}
 
-      <EntityExecutionsBarChart
-        onToggle={onToggle}
-        chartIds={chartIds}
-        id={id}
-      />
+          {!!sections.versions && (
+            <div className={styles.versionsContainer}>
+              <EntityVersions id={id} />
+            </div>
+          )}
 
-      {sections.executions ? (
-        <div className={styles.executionsContainer}>
-          <EntityExecutions
+          <EntityExecutionsBarChart
+            onToggle={onToggle}
             chartIds={chartIds}
             id={id}
-            clearCharts={clearCharts}
           />
-        </div>
-      ) : null}
-    </WaitForData>
+          {!sections.executions && <LoadingSpinner />}
+          {sections.executions && (
+            <div className={styles.executionsContainer}>
+              <EntityExecutions
+                chartIds={chartIds}
+                id={id}
+                clearCharts={clearCharts}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </Grid>
   );
 };
diff --git a/packages/console/src/components/Entities/EntityDetailsHeader.tsx b/packages/console/src/components/Entities/EntityDetailsHeader.tsx
@@ -72,8 +72,8 @@ export const EntityDetailsHeader: React.FC<EntityDetailsHeaderProps> = ({
   // Close modal on escape key press
   useEscapeKey(onCancelLaunch);
 
-  const domain = getProjectDomain(project, id.domain);
-  const headerText = `${domain.name} / ${id.name}`;
+  const domain = project ? getProjectDomain(project, id.domain) : undefined;
+  const headerText = domain ? `${domain.name} / ${id.name}` : '';
 
   return (
     <>

diff --git a/packages/console/src/components/Entities/VersionDetails/EntityVersionDetailsContainer.tsx b/packages/console/src/components/Entities/VersionDetails/EntityVersionDetailsContainer.tsx
@@ -2,14 +2,15 @@ import * as React from 'react';
 import { withRouteParams } from 'components/common/withRouteParams';
 import { ResourceIdentifier, ResourceType } from 'models/Common/types';
 import { makeStyles, Theme } from '@material-ui/core/styles';
-import { WaitForData } from 'components/common/WaitForData';
 import { useProject } from 'components/hooks/useProjects';
 import { StaticGraphContainer } from 'components/Workflow/StaticGraphContainer';
 import { WorkflowId } from 'models/Workflow/types';
 import { entitySections } from 'components/Entities/constants';
 import { EntityDetailsHeader } from 'components/Entities/EntityDetailsHeader';
 import { EntityVersions } from 'components/Entities/EntityVersions';
 import { RouteComponentProps } from 'react-router-dom';
+import { Box } from '@material-ui/core';
+import { LoadingSpinner } from 'components/common';
 import { typeNameToEntityResource } from '../constants';
 import { versionsDetailsSections } from './constants';
 import { EntityVersionDetails } from './EntityVersionDetails';
@@ -26,6 +27,7 @@ const useStyles = makeStyles<Theme, StyleProps>((theme: Theme) => ({
     flexWrap: 'nowrap',
     overflow: 'hidden',
     height: `calc(100vh - ${theme.spacing(17)}px)`,
+    padding: theme.spacing(0, 2),
   },
   staticGraphContainer: {
     display: 'flex',
@@ -40,10 +42,12 @@ const useStyles = makeStyles<Theme, StyleProps>((theme: Theme) => ({
     width: '100%',
     flex: '1',
     overflowY: 'scroll',
+    padding: theme.spacing(0, 2),
   },
   versionsContainer: {
     display: 'flex',
     flex: '0 1 auto',
+    padding: theme.spacing(0, 2),
     height: ({ resourceType }) =>
       resourceType === ResourceType.LAUNCH_PLAN ? '100%' : '40%',
     flexDirection: 'column',
@@ -82,17 +86,23 @@ const EntityVersionsDetailsContainerImpl: React.FC<
   const id = workflowId as ResourceIdentifier;
   const sections = entitySections[id.resourceType];
   const versionsSections = versionsDetailsSections[id.resourceType];
-  const project = useProject(workflowId.project);
+  const [project] = useProject(workflowId.project);
   const styles = useStyles({ resourceType: id.resourceType });
 
+  if (!project?.id) {
+    return <LoadingSpinner />;
+  }
+
   return (
-    <WaitForData {...project}>
-      <EntityDetailsHeader
-        project={project.value}
-        id={id}
-        launchable={sections.launch}
-        backToWorkflow
-      />
+    <>
+      <Box pl={2} pr={2}>
+        <EntityDetailsHeader
+          project={project.value}
+          id={id}
+          launchable={sections.launch}
+          backToWorkflow
+        />
+      </Box>
       <div className={styles.verionDetailsContainer}>
         {versionsSections.details && (
           <div className={styles.versionDetailsContainer}>
@@ -108,7 +118,7 @@ const EntityVersionsDetailsContainerImpl: React.FC<
           <EntityVersions id={id} showAll />
         </div>
       </div>
-    </WaitForData>
+    </>
   );
 };
 

diff --git a/packages/console/src/components/Entities/test/EntityDetails.test.tsx b/packages/console/src/components/Entities/test/EntityDetails.test.tsx
@@ -8,8 +8,11 @@ import { Workflow } from 'models/Workflow/types';
 import { projects } from 'mocks/data/projects';
 import * as projectApi from 'models/Project/api';
 import { MemoryRouter } from 'react-router';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { EntityDetails } from '../EntityDetails';
 
+const queryClient = new QueryClient();
+
 jest.mock('models/Project/api');
 
 describe('EntityDetails', () => {
@@ -27,9 +30,11 @@ describe('EntityDetails', () => {
 
   const renderDetails = (id: ResourceIdentifier) => {
     return render(
-      <MemoryRouter>
-        <EntityDetails id={id} />
-      </MemoryRouter>,
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>
+          <EntityDetails id={id} />
+        </MemoryRouter>
+      </QueryClientProvider>,
     );
   };
 

diff --git a/packages/console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx b/packages/console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Typography } from '@material-ui/core';
+import { Grid, Typography } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import classnames from 'classnames';
 import { dashedValueString } from 'common/constants';
@@ -18,19 +18,15 @@ const useStyles = makeStyles((theme: Theme) => {
   return {
     container: {
       background: secondaryBackgroundColor,
-      display: 'flex',
-      flexDirection: 'column',
-      position: 'relative',
+      width: '100%',
     },
     detailsContainer: {
-      alignItems: 'start',
       display: 'flex',
-      flex: '0 1 auto',
-      paddingTop: theme.spacing(3),
+      paddingTop: theme.spacing(1),
       paddingBottom: theme.spacing(2),
+      marginTop: 0,
     },
     detailItem: {
-      flexShrink: 0,
       marginLeft: theme.spacing(4),
     },
     expandCollapseButton: {
@@ -111,9 +107,13 @@ export const ExecutionMetadata: React.FC<{}> = () => {
 
   return (
     <div className={styles.container}>
-      <div className={styles.detailsContainer}>
+      <Grid container className={styles.detailsContainer} spacing={4}>
         {details.map(({ className, label, value }) => (
-          <div className={classnames(styles.detailItem, className)} key={label}>
+          <Grid
+            item
+            className={classnames(styles.detailItem, className)}
+            key={label}
+          >
             <Typography
               className={commonStyles.truncateText}
               variant="subtitle1"
@@ -127,10 +127,10 @@ export const ExecutionMetadata: React.FC<{}> = () => {
             >
               {value}
             </Typography>
-          </div>
+          </Grid>
         ))}
         <ExecutionMetadataExtra execution={execution} />
-      </div>
+      </Grid>
 
       {error || abortMetadata ? (
         <ExpandableExecutionError