From 092a3aa462741f42cddfab507807dc782848b639 Mon Sep 17 00:00:00 2001
From: jared-dickman <zenador15@gmail.com>
Date: Fri, 22 Mar 2024 16:06:08 -0300
Subject: [PATCH] fix: nav link target (#166)

---
 .../GlobalNavigation.stories.tsx              | 121 +++++++++---------
 .../GlobalNavigationItems.d.ts                |   2 +-
 .../GlobalNavigation/NavigationItem.tsx       |  13 +-
 .../navigation/Steps/Steps.stories.tsx        |   2 +-
 4 files changed, 74 insertions(+), 64 deletions(-)

diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx
index 204b43b9e..3c46e8900 100644
--- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx
+++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx
@@ -49,9 +49,9 @@ const defaultTools: IGlobalNavigationItem[] = [
     icon: <ShieldKeyholeIcon />,
     type: 'menu',
     children: [
-      { label: 'option 1', href: '/' },
-      { label: 'option 2', href: '/' },
-      { label: 'option 3', href: '/' },
+      { label: 'option 1', hrefOptions: { href: '/' } },
+      { label: 'option 2', hrefOptions: { href: '/' } },
+      { label: 'option 3', hrefOptions: { href: '/' } },
     ],
   },
   {
@@ -59,15 +59,15 @@ const defaultTools: IGlobalNavigationItem[] = [
     icon: <HeartIcon />,
     type: 'menu',
     children: [
-      { label: 'option 1', href: '/' },
-      { label: 'option 2', href: '/' },
-      { label: 'option 3', href: '/' },
+      { label: 'option 1', hrefOptions: { href: '/' } },
+      { label: 'option 2', hrefOptions: { href: '/' } },
+      { label: 'option 3', hrefOptions: { href: '/' } },
     ],
   },
   {
     label: 'Tool 3',
     icon: <ConnectionsIcon />,
-    href: '/',
+    hrefOptions: { href: '/' },
   },
 ]
 
@@ -76,7 +76,7 @@ const defaultManagement: IGlobalNavigationItem[] = [
     label: 'Notifications',
     hideLabel: true,
     icon: <CloudIcon />,
-    href: '/',
+    hrefOptions: { href: '/' },
   },
   {
     label: 'Support',
@@ -84,9 +84,9 @@ const defaultManagement: IGlobalNavigationItem[] = [
     icon: <MessageQuestionIcon />,
     type: 'menu',
     children: [
-      { label: 'option 1', href: '/' },
-      { label: 'option 2', href: '/' },
-      { label: 'option 3', href: '/' },
+      { label: 'option 1', hrefOptions: { href: '/' } },
+      { label: 'option 2', hrefOptions: { href: '/' } },
+      { label: 'option 3', hrefOptions: { href: '/' } },
     ],
   },
   {
@@ -95,9 +95,9 @@ const defaultManagement: IGlobalNavigationItem[] = [
     icon: <GearIcon />,
     type: 'menu',
     children: [
-      { label: 'option 1', href: '/' },
-      { label: 'option 2', href: '/' },
-      { label: 'option 3', href: '/' },
+      { label: 'option 1', hrefOptions: { href: '/' } },
+      { label: 'option 2', hrefOptions: { href: '/' } },
+      { label: 'option 3', hrefOptions: { href: '/' } },
     ],
   },
 ]
@@ -195,9 +195,9 @@ const mpTools: IGlobalNavigationItem[] = [
     icon: <ChartLineIcon />,
     type: 'menu',
     children: [
-      { href: '/', label: 'Platform Trends' },
+      { hrefOptions: { href: '/' }, label: 'Platform Trends' },
       {
-        href: '/',
+        hrefOptions: { href: '/' },
         label: (
           <Space>
             System Alerts
@@ -205,8 +205,8 @@ const mpTools: IGlobalNavigationItem[] = [
           </Space>
         ),
       },
-      { href: '/', label: 'Event Forwarding' },
-      { href: '/', label: Beta('Observability') },
+      { hrefOptions: { href: '/' }, label: 'Event Forwarding' },
+      { hrefOptions: { href: '/' }, label: Beta('Observability') },
     ],
   },
   {
@@ -214,12 +214,12 @@ const mpTools: IGlobalNavigationItem[] = [
     icon: <DatabaseIcon />,
     type: 'menu',
     children: [
-      { href: '/', label: 'Catalog' },
-      { href: '/', label: 'Plans' },
-      { href: '/', label: 'Live Stream' },
-      { href: '/', label: Beta('User Groups') },
-      { href: '/', label: 'Calculated Attributes' },
-      { href: '/', label: 'Rules' },
+      { hrefOptions: { href: '/' }, label: 'Catalog' },
+      { hrefOptions: { href: '/' }, label: 'Plans' },
+      { hrefOptions: { href: '/' }, label: 'Live Stream' },
+      { hrefOptions: { href: '/' }, label: Beta('User Groups') },
+      { hrefOptions: { href: '/' }, label: 'Calculated Attributes' },
+      { hrefOptions: { href: '/' }, label: 'Rules' },
     ],
   },
   {
@@ -227,9 +227,9 @@ const mpTools: IGlobalNavigationItem[] = [
     icon: <UsersIcon />,
     type: 'menu',
     children: [
-      { href: '/', label: 'Real-time' },
-      { href: '/', label: 'Standard' },
-      { href: '/', label: 'Journeys' },
+      { hrefOptions: { href: '/' }, label: 'Real-time' },
+      { hrefOptions: { href: '/' }, label: 'Standard' },
+      { hrefOptions: { href: '/' }, label: 'Journeys' },
     ],
   },
   {
@@ -237,9 +237,9 @@ const mpTools: IGlobalNavigationItem[] = [
     icon: <ConnectionsIcon />,
     type: 'menu',
     children: [
-      { href: '/', label: 'Connect' },
-      { href: '/', label: 'Platform Filters' },
-      { href: '/', label: 'Feed Filters' },
+      { hrefOptions: { href: '/' }, label: 'Connect' },
+      { hrefOptions: { href: '/' }, label: 'Platform Filters' },
+      { hrefOptions: { href: '/' }, label: 'Feed Filters' },
     ],
   },
   {
@@ -247,16 +247,16 @@ const mpTools: IGlobalNavigationItem[] = [
     icon: <WrenchIcon />,
     type: 'menu',
     children: [
-      { href: '/', label: 'Inputs' },
-      { href: '/', label: 'Outputs' },
-      { href: '/', label: 'Data Warehouse' },
-      { href: '/', label: 'CRM' },
+      { hrefOptions: { href: '/' }, label: 'Inputs' },
+      { hrefOptions: { href: '/' }, label: 'Outputs' },
+      { hrefOptions: { href: '/' }, label: 'Data Warehouse' },
+      { hrefOptions: { href: '/' }, label: 'CRM' },
     ],
   },
   {
     label: 'Directory',
     icon: <GridIcon />,
-    href: '/',
+    hrefOptions: { href: '/' },
   },
 ]
 
@@ -268,9 +268,9 @@ const mpManagement: IGlobalNavigationItem[] = [
     icon: <MessageQuestionIcon />,
     type: 'menu',
     children: [
-      { label: 'option 1', href: '/' },
-      { label: 'option 2', href: '/' },
-      { label: 'option 3', href: '/' },
+      { label: 'option 1', hrefOptions: { href: '/' } },
+      { label: 'option 2', hrefOptions: { href: '/' } },
+      { label: 'option 3', hrefOptions: { href: '/' } },
     ],
   },
   {
@@ -279,9 +279,9 @@ const mpManagement: IGlobalNavigationItem[] = [
     icon: <GearIcon />,
     type: 'menu',
     children: [
-      { href: '/', label: 'Platform Settings' },
-      { href: '/', label: 'User Settings' },
-      { href: '/', label: <Button type="primary">Switch to Legacy UI</Button> },
+      { hrefOptions: { href: '/' }, label: 'Platform Settings' },
+      { hrefOptions: { href: '/' }, label: 'User Settings' },
+      { hrefOptions: { href: '/' }, label: <Button type="primary">Switch to Legacy UI</Button> },
     ],
   },
 ]
@@ -523,16 +523,17 @@ const indTools: IGlobalNavigationItem[] = [
     label: 'My Hub',
     icon: <GridIcon />,
     isActive: true,
+    hrefOptions: { href: '/' },
   },
   {
     label: 'Saved',
     icon: <FolderClosedIcon />,
-    href: '/',
+    hrefOptions: { href: '/' },
   },
   {
     label: 'Manage Data',
     icon: <DatabaseIcon />,
-    href: '/',
+    hrefOptions: { href: '/' },
   },
 ]
 
@@ -543,9 +544,9 @@ const indManagement: IGlobalNavigationItem[] = [
     icon: <MessageQuestionIcon />,
     type: 'menu',
     children: [
-      { label: 'option 1', href: '/' },
-      { label: 'option 2', href: '/' },
-      { label: 'option 3', href: '/' },
+      { label: 'option 1', hrefOptions: { href: '/' } },
+      { label: 'option 2', hrefOptions: { href: '/' } },
+      { label: 'option 3', hrefOptions: { href: '/' } },
     ],
   },
   {
@@ -554,9 +555,9 @@ const indManagement: IGlobalNavigationItem[] = [
     icon: <GearIcon />,
     type: 'menu',
     children: [
-      { label: 'option 1', href: '/' },
-      { label: 'option 2', href: '/' },
-      { label: 'option 3', href: '/' },
+      { label: 'option 1', hrefOptions: { href: '/' } },
+      { label: 'option 2', hrefOptions: { href: '/' } },
+      { label: 'option 3', hrefOptions: { href: '/' } },
     ],
   },
 ]
@@ -850,28 +851,28 @@ const cortexTools: IGlobalNavigationItem[] = [
   {
     label: 'Pipelines',
     icon: <CircleNodesIcon />,
-    href: '/',
+    hrefOptions: { href: '/' },
   },
   {
     label: 'Projects',
     icon: <SplitIcon />,
-    href: '/',
+    hrefOptions: { href: '/' },
     isActive: true,
   },
   {
     label: 'Data',
     icon: <DatabaseIcon />,
-    href: '/',
+    hrefOptions: { href: '/' },
   },
   {
     label: 'API',
     icon: <CloudIcon />,
-    href: '/',
+    hrefOptions: { href: '/' },
   },
   {
     label: 'Insights',
     icon: <LightBulbIcon />,
-    href: '/',
+    hrefOptions: { href: '/' },
   },
 ]
 
@@ -882,9 +883,9 @@ const cortexManagement: IGlobalNavigationItem[] = [
     icon: <MessageQuestionIcon />,
     type: 'menu',
     children: [
-      { label: 'option 1', href: '/' },
-      { label: 'option 2', href: '/' },
-      { label: 'option 3', href: '/' },
+      { label: 'option 1', hrefOptions: { href: '/' } },
+      { label: 'option 2', hrefOptions: { href: '/' } },
+      { label: 'option 3', hrefOptions: { href: '/' } },
     ],
   },
   {
@@ -893,9 +894,9 @@ const cortexManagement: IGlobalNavigationItem[] = [
     icon: <GearIcon />,
     type: 'menu',
     children: [
-      { label: 'option 1', href: '/' },
-      { label: 'option 2', href: '/' },
-      { label: 'option 3', href: '/' },
+      { label: 'option 1', hrefOptions: { href: '/' } },
+      { label: 'option 2', hrefOptions: { href: '/' } },
+      { label: 'option 3', hrefOptions: { href: '/' } },
     ],
   },
 ]
diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts
index 30bb6fc09..b3debaf66 100644
--- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts
+++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts
@@ -20,7 +20,7 @@ export interface IGlobalNavigationMenu extends IBaseGlobalNavigationItem {
 
 export interface IGlobalNavigationLink extends IBaseGlobalNavigationItem {
   type?: 'link'
-  href?: string
+  hrefOptions?: { href: string; hrefTarget?: '_self' | '_blank' }
   hideLabel?: boolean
   onClick?: (e: MouseEvent) => void
 }
diff --git a/src/components/navigation/GlobalNavigation/NavigationItem.tsx b/src/components/navigation/GlobalNavigation/NavigationItem.tsx
index 87274a6a1..7aa0457e1 100644
--- a/src/components/navigation/GlobalNavigation/NavigationItem.tsx
+++ b/src/components/navigation/GlobalNavigation/NavigationItem.tsx
@@ -11,7 +11,7 @@ export interface INavigationItemProps {
   items?: IGlobalNavigationItem[]
   isActive?: boolean
   onClick?: (e: MouseEvent) => void // link only
-  href?: string // link only
+  hrefOptions?: { href: string; hrefTarget?: '_self' | '_blank' } // link only
 }
 
 export function NavigationItem(props: INavigationItemProps) {
@@ -31,7 +31,16 @@ export function NavigationItem(props: INavigationItemProps) {
     />
   )
 
-  const resultNavigationIcon = props.href ? <a href={props.href}>{navigationIcon}</a> : navigationIcon
+  const resultNavigationIcon = props.hrefOptions ? (
+    <a
+      href={props.hrefOptions.href}
+      target={props.hrefOptions.hrefTarget ?? '_self'}
+      rel={props.hrefOptions.hrefTarget === '_blank' ? 'noopener' : undefined}>
+      {navigationIcon}
+    </a>
+  ) : (
+    navigationIcon
+  )
 
   if (props.hideLabel) {
     return (
diff --git a/src/components/navigation/Steps/Steps.stories.tsx b/src/components/navigation/Steps/Steps.stories.tsx
index 831ca4e02..30c0e1b9a 100644
--- a/src/components/navigation/Steps/Steps.stories.tsx
+++ b/src/components/navigation/Steps/Steps.stories.tsx
@@ -748,4 +748,4 @@ export const ExampleInline: Story = {
       </ExampleStory>
     )
   },
-}
\ No newline at end of file
+}