Top level masonry refactor

package.json

@@ -10,7 +10,6 @@
   "workspaces": {
     "packages": [
       "packages/*",
-      "packages/**",
       "website"
     ]
   },

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: {

packages/console/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyteorg/console",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "description": "Flyteconsole main app module",
   "main": "./dist/index.js",
   "module": "./lib/index.js",
@@ -126,7 +126,6 @@
     "@types/pure-render-decorator": "^0.2.27",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
-    "@types/react-dropzone": "^5.1.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized": "^9.21.4",
     "@types/serve-static": "^1.7.31",

packages/console/src/basics/ExternalConfigurationProvider/ExternalConfigurationProvider.tsx

@@ -1,11 +1,14 @@
 import React, { PropsWithChildren, useContext } from 'react';
 import { AppConfig } from '@flyteorg/common';
+import { Breadcrumb } from 'components';
 
 export interface ExternalConfigurationProviderProps {
   registry?: {
     nav?: React.FC<any>;
+    topLevelLayout?: React.FC<any>;
     taskExecutionAttemps?: React.FC<any>;
-    additionalRoutes?: any;
+    additionalRoutes?: any[];
+    breadcrumbs?: Breadcrumb[];
   };
   env?: any;
   config?: AppConfig;

packages/console/src/basics/FeatureFlags/FeatureFlags.tsx

@@ -18,10 +18,31 @@ import {
 
 export { FeatureFlag } from './defaultConfig';
 
+/**
+ * Set feature flag value for current session using URLSearchParams values
+ * @param search
+ * @returns
+ */
+const getSearchParamFlags = (search: string): FeatureFlagConfig => {
+  const urlParams = new URLSearchParams(search);
+  const flags: FeatureFlagConfig = {};
+  for (const [key, value] of urlParams.entries()) {
+    if (value === 'true') {
+      flags[key] = true;
+    } else if (value === 'false') {
+      flags[key] = false;
+    }
+  }
+  return flags as FeatureFlagConfig;
+};
+
+const search: string = window.location.search || '';
+
 // To turn on flag for local development only - update flag value here
 // REMOVE change prior to commit
 let runtimeConfig: FeatureFlagConfig = {
   ...defaultFlagConfig,
+  ...getSearchParamFlags(search),
   // 'test-flag-true': true,  <== locally turns flag on
 };
 
@@ -32,6 +53,7 @@ interface FeatureFlagState {
 }
 
 interface FeatureFlagProviderProps {
+  externalFlags?: { [k: string]: boolean };
   children?: React.ReactNode;
 }
 
@@ -55,6 +77,7 @@ export const useFeatureFlagContext = () => useContext(FeatureFlagContext);
 export const FeatureFlagsProvider = (props: FeatureFlagProviderProps) => {
   const [flags, setFlags] = useState<FeatureFlagConfig>({
     ...defaultFlagConfig,
+    ...props.externalFlags,
     ...runtimeConfig,
   });
 

packages/console/src/basics/FeatureFlags/defaultConfig.ts

@@ -10,6 +10,12 @@ export enum FeatureFlag {
   // Production flags
   LaunchPlan = 'launch-plan',
 
+  // Makes the header inline with the content
+  HorizontalLayout = 'horizontal-layout',
+
+  // Replace the page header with the breadcrumb context navigation with related item quicklinks
+  breadcrumbs = 'breadcrumbs',
+
   // Test Only Mine flag
   OnlyMine = 'only-mine',
 }
@@ -24,6 +30,10 @@ export const defaultFlagConfig: FeatureFlagConfig = {
   // If you need to turn it on locally -> update runtimeConfig in ./index.tsx file
   'launch-plan': false,
 
+  'horizontal-layout': false,
+
+  breadcrumbs: false,
+
   'only-mine': false,
 };
 

packages/console/src/common/utils.ts

@@ -11,7 +11,7 @@ import { Routes } from 'routes/routes';
 export function isValidDate(input: string | Date): boolean {
   const date = input instanceof Date ? input : new Date(input);
   const time = date.getTime();
-  return !isNaN(time) && time > 0;
+  return !Number.isNaN(time) && time > 0;
 }
 
 /** Converts a Protobuf Timestamp object to a JS Date */

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,20 @@ export const AppComponent: React.FC<AppComponentProps> = (
   }
   const apiState = useAPIState();
 
+  const horizontalLayoutFlag =
+    `${env.HORIZONTAL_LAYOUT}`.trim().toLowerCase() === 'true';
+
+  const breadcrumbsFlag = `${env.BREADCRUMBS}`.trim().toLowerCase() === 'true';
+
   return (
-    <FeatureFlagsProvider>
+    <FeatureFlagsProvider
+      externalFlags={{
+        ...props.env,
+        breadcrumbs: breadcrumbsFlag,
+        'horizontal-layout': horizontalLayoutFlag,
+      }}
+    >
+      <GlobalStyles />
       <LocalCacheProvider>
         <StylesProvider
           generateClassName={createGenerateClassName({
@@ -82,16 +98,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>