feat: url breadcrumbs feature

package.json

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

packages/console/package.json

@@ -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,12 +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[];
+    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

@@ -13,6 +13,9 @@ export enum FeatureFlag {
   // 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',
 }
@@ -29,6 +32,8 @@ export const defaultFlagConfig: FeatureFlagConfig = {
 
   '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

@@ -62,8 +62,16 @@ export const AppComponent: React.FC<AppComponentProps> = (
   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