chore: update navigationDropdown usage (#517)

Signed-off-by: Work <[email protected]> Co-authored-by: Work <[email protected]>
flyteorg · Jun 23, 2022 · 161d7ee · 161d7ee
1 parent 075a1f9
commit 161d7ee
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git a/packages/zapp/console/src/components/Navigation/DefaultAppBarContent.tsx b/packages/zapp/console/src/components/Navigation/DefaultAppBarContent.tsx
@@ -28,6 +28,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 interface DefaultAppBarProps {
   items: FlyteNavItem[];
+  console?: string;
 }
 
 /** Renders the default content for the app bar, which is the logo and help links */
@@ -61,7 +62,11 @@ export const DefaultAppBarContent = (props: DefaultAppBarProps) => {
       <Link className={classnames(commonStyles.linkUnstyled)} to={Routes.SelectProject.path}>
         <FlyteLogo size={32} />
       </Link>
-      {props.items?.length > 0 ? <NavigationDropdown items={props.items} /> : false}
+      {props.items?.length > 0 ? (
+        <NavigationDropdown items={props.items} console={props.console} />
+      ) : (
+        false
+      )}
       <div className={styles.spacer} />
       {isFlagEnabled && <OnlyMine />}
       <UserInformation />

diff --git a/packages/zapp/console/src/components/Navigation/NavBar.tsx b/packages/zapp/console/src/components/Navigation/NavBar.tsx
@@ -16,7 +16,7 @@ export const NavBar = (props: NavBarProps) => {
   const content = props.useCustomContent ? (
     <div id={navBarContentId} />
   ) : (
-    <DefaultAppBarContent items={navData?.items ?? []} />
+    <DefaultAppBarContent items={navData?.items ?? []} console={navData?.console} />
   );
 
   return (

diff --git a/packages/zapp/console/src/components/Navigation/NavigationDropdown.tsx b/packages/zapp/console/src/components/Navigation/NavigationDropdown.tsx
@@ -27,17 +27,20 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 interface NavigationDropdownProps {
-  items: FlyteNavItem[];
+  items: FlyteNavItem[]; // all other navigation items
+  console?: string; // name for default navigation, if not provided "Console" is used.
 }
 
-// Flyte Console list item - always there ans is first in the list
-const ConsoleItem: FlyteNavItem = {
-  title: 'Console',
-  url: makeRoute('/'),
-};
-
 /** Renders the default content for the app bar, which is the logo and help links */
 export const NavigationDropdown = (props: NavigationDropdownProps) => {
+  // Flyte Console list item - always there ans is first in the list
+  const ConsoleItem: FlyteNavItem = React.useMemo(() => {
+    return {
+      title: props.console ?? 'Console',
+      url: makeRoute('/'),
+    };
+  }, [props.console]);
+
   const [selectedPage, setSelectedPage] = React.useState<string>(ConsoleItem.title);
   const [open, setOpen] = React.useState(false);
 

diff --git a/packages/zapp/console/src/components/Navigation/Readme.md b/packages/zapp/console/src/components/Navigation/Readme.md
@@ -21,9 +21,10 @@ Essentially FLYTE_NAVIGATION is a JSON object
 
 ```
 {
-    color:"white",       // default NavBar text color
-    background:"black",  // default NavBar background color
-    items:[
+    color:"white",          // optional - default NavBar text color, if not provided uses Flyte colors
+    background:"black",     // optional - default NavBar background color, if not provided uses Flyte colors
+    console:"FlyteConsole"  // optional - name of the default navigation, if not provided uses "Console"
+    items:[                 // required - if no dropdown needed provide an empty array
         {title:"Remote", url:"https://remote.site/"},
         {title:"Dashboard", url:"+/projects/flytesnacks/executions?domain=development&duration=all"},
         {title:"Information", url:"/information"}

diff --git a/packages/zapp/console/src/components/Navigation/utils.ts b/packages/zapp/console/src/components/Navigation/utils.ts
@@ -8,6 +8,7 @@ export interface FlyteNavItem {
 export interface FlyteNavigation {
   color?: string;
   background?: string;
+  console?: string;
   items: FlyteNavItem[];
 }