From 161d7ee06dfeda1cc02198736cda2d95ec0730d1 Mon Sep 17 00:00:00 2001
From: Nastya <55718143+anrusina@users.noreply.github.com>
Date: Thu, 23 Jun 2022 13:25:38 -0700
Subject: [PATCH] chore: update navigationDropdown usage (#517)

Signed-off-by: Work <awork@narusina.fritz.box>

Co-authored-by: Work <awork@narusina.fritz.box>
---
 .../Navigation/DefaultAppBarContent.tsx         |  7 ++++++-
 .../src/components/Navigation/NavBar.tsx        |  2 +-
 .../Navigation/NavigationDropdown.tsx           | 17 ++++++++++-------
 .../console/src/components/Navigation/Readme.md |  7 ++++---
 .../console/src/components/Navigation/utils.ts  |  1 +
 5 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/packages/zapp/console/src/components/Navigation/DefaultAppBarContent.tsx b/packages/zapp/console/src/components/Navigation/DefaultAppBarContent.tsx
index 16a0e46bb4..2832633dad 100644
--- 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
index 05bf9bede4..e64e4f0e1b 100644
--- 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
index 3c2ade9378..62ebc37c9b 100644
--- 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
index d218e5039f..373aba987d 100644
--- 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
index 35e23a2447..cbf7d4c207 100644
--- 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[];
 }