Top level masonry refactor (#771)

* chore: new nav bar Signed-off-by: Frank Flitton <[email protected]> * feat: url breadcrumbs feature (#784) * chore: new nav bar Signed-off-by: Frank Flitton <[email protected]> * chore: navbar quick links Signed-off-by: Frank Flitton <[email protected]> * chore: task, workflow, launchplans Signed-off-by: Frank Flitton <[email protected]> * chore: remove unused import Signed-off-by: Frank Flitton <[email protected]> * chore: fixup navbar integration Signed-off-by: Frank Flitton <[email protected]> * chore: fix linter Signed-off-by: Frank Flitton <[email protected]> * chore: execution async value Signed-off-by: Frank Flitton <[email protected]> * chore: fix types build fail Signed-off-by: Frank Flitton <[email protected]> * chore: async self link Signed-off-by: Frank Flitton <[email protected]> * chore: add some exports Signed-off-by: Frank Flitton <[email protected]> * chore: change to names export Signed-off-by: Frank Flitton <[email protected]> * chore: spelling Signed-off-by: Carina Ursu <[email protected]> * chore: fix timestamps Signed-off-by: Carina Ursu <[email protected]> * chore: fix file upload type failure Signed-off-by: Frank Flitton <[email protected]> * chore: fix Executions title not updating Signed-off-by: Frank Flitton <[email protected]> * chore: remove depricated types file for dropzone Signed-off-by: Frank Flitton <[email protected]> * chore: fix execution launch plan self link Signed-off-by: Frank Flitton <[email protected]> * chore: pass custom component Signed-off-by: Frank Flitton <[email protected]> * chore: fix named entity cases Signed-off-by: Frank Flitton <[email protected]> * chore: different custom component style Signed-off-by: Frank Flitton <[email protected]> * chore: dynamic breadcrumb hook with event dispatch Signed-off-by: Frank Flitton <[email protected]> * chore: dynamic breadcrumb hook with event dispatch Signed-off-by: Frank Flitton <[email protected]> * chore: project and domains link to dashboard Signed-off-by: Frank Flitton <[email protected]> * chore: add localstorage setting Signed-off-by: Frank Flitton <[email protected]> * chore: get localstorage setting Signed-off-by: Frank Flitton <[email protected]> * chore: named entities self links Signed-off-by: Frank Flitton <[email protected]> * chore: spacing and scaffolding Signed-off-by: Frank Flitton <[email protected]> * chore: grey header color Signed-off-by: Frank Flitton <[email protected]> * fix/dropdown breadcrumbs (#799) fix: dropdown breadcrumbs Signed-off-by: Soham Parekh <[email protected]> Co-authored-by: Soham Parekh <[email protected]> * chore: global inject without emotion Signed-off-by: Frank Flitton <[email protected]> * chore: generate id Signed-off-by: Frank Flitton <[email protected]> * chore: initial unit tests Signed-off-by: Frank Flitton <[email protected]> * chore: fix incorrect localstore value Signed-off-by: Frank Flitton <[email protected]> * chore: named entities execution tests Signed-off-by: Frank Flitton <[email protected]> * chore: domain and project util tests Signed-off-by: Frank Flitton <[email protected]> * chore: fix execution list page title 404 ing Signed-off-by: Frank Flitton <[email protected]> * chore: fix swipe left to go back Signed-off-by: Frank Flitton <[email protected]> * chore: feature flag breadcrumb UI content Signed-off-by: Frank Flitton <[email protected]> * chore: set flags from url Signed-off-by: Frank Flitton <[email protected]> * chore: set flags from exxternal config Signed-off-by: Frank Flitton <[email protected]> * chore: set feature flags from env Signed-off-by: Frank Flitton <[email protected]> * chore: get flags from external env Signed-off-by: Frank Flitton <[email protected]> * chore: better docs from breadcrumbs interface Signed-off-by: Frank Flitton <[email protected]> --------- Signed-off-by: Frank Flitton <[email protected]> Signed-off-by: Carina Ursu <[email protected]> Signed-off-by: Soham Parekh <[email protected]> Co-authored-by: Carina Ursu <[email protected]> Co-authored-by: etdotal <[email protected]> Co-authored-by: Soham Parekh <[email protected]> * chore: console version bump Signed-off-by: Frank Flitton <[email protected]> --------- Signed-off-by: Frank Flitton <[email protected]> Signed-off-by: Carina Ursu <[email protected]> Signed-off-by: Soham Parekh <[email protected]> Co-authored-by: Carina Ursu <[email protected]> Co-authored-by: etdotal <[email protected]> Co-authored-by: Soham Parekh <[email protected]>
flyteorg · Jul 26, 2023 · fd145ec · fd145ec
1 parent 16abb34
commit fd145ec
Show file tree

Hide file tree

Showing 79 changed files with 7,191 additions and 3,234 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,6 @@
   "workspaces": {
     "packages": [
       "packages/*",
-      "packages/**",
       "website"
     ]
   },

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/package.json b/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",

diff --git a/packages/console/src/basics/ExternalConfigurationProvider/ExternalConfigurationProvider.tsx b/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;

diff --git a/packages/console/src/basics/FeatureFlags/FeatureFlags.tsx b/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,
   });
 

diff --git a/packages/console/src/basics/FeatureFlags/defaultConfig.ts b/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,
 };
 

diff --git a/packages/console/src/common/utils.ts b/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 */

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,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>