diff --git a/packages/zapp/console/src/components/Navigation/DefaultAppBarContent.tsx b/packages/zapp/console/src/components/Navigation/DefaultAppBarContent.tsx
index 16a0e46bb..2832633da 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) => {
- {props.items?.length > 0 ? : false}
+ {props.items?.length > 0 ? (
+
+ ) : (
+ false
+ )}
{isFlagEnabled && }
diff --git a/packages/zapp/console/src/components/Navigation/NavBar.tsx b/packages/zapp/console/src/components/Navigation/NavBar.tsx
index 05bf9bede..e64e4f0e1 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 ? (
) : (
-
+
);
return (
diff --git a/packages/zapp/console/src/components/Navigation/NavigationDropdown.tsx b/packages/zapp/console/src/components/Navigation/NavigationDropdown.tsx
index 3c2ade937..62ebc37c9 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(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 d218e5039..373aba987 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 35e23a244..cbf7d4c20 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[];
}