Skip to content

Commit

Permalink
fix: nav link target (#166)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jared-dickman
jared-dickman authored Mar 22, 2024
1 parent 0331b8e commit 092a3aa
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 64 deletions.
121 changes: 61 additions & 60 deletions src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,25 +49,25 @@ 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: '/' } },
],
},
{
label: 'Tool 2',
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: '/' },
},
]

Expand All @@ -76,17 +76,17 @@ const defaultManagement: IGlobalNavigationItem[] = [
label: 'Notifications',
hideLabel: true,
icon: <CloudIcon />,
href: '/',
hrefOptions: { href: '/' },
},
{
label: 'Support',
hideLabel: true,
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: '/' } },
],
},
{
Expand All @@ -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: '/' } },
],
},
]
Expand Down Expand Up @@ -195,68 +195,68 @@ const mpTools: IGlobalNavigationItem[] = [
icon: <ChartLineIcon />,
type: 'menu',
children: [
{ href: '/', label: 'Platform Trends' },
{ hrefOptions: { href: '/' }, label: 'Platform Trends' },
{
href: '/',
hrefOptions: { href: '/' },
label: (
<Space>
System Alerts
<Badge color="red" />
</Space>
),
},
{ href: '/', label: 'Event Forwarding' },
{ href: '/', label: Beta('Observability') },
{ hrefOptions: { href: '/' }, label: 'Event Forwarding' },
{ hrefOptions: { href: '/' }, label: Beta('Observability') },
],
},
{
label: 'Data Master',
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' },
],
},
{
label: 'Audiences',
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' },
],
},
{
label: 'Connections',
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' },
],
},
{
label: 'Setup',
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: '/' },
},
]

Expand All @@ -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: '/' } },
],
},
{
Expand All @@ -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> },
],
},
]
Expand Down Expand Up @@ -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: '/' },
},
]

Expand All @@ -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: '/' } },
],
},
{
Expand All @@ -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: '/' } },
],
},
]
Expand Down Expand Up @@ -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: '/' },
},
]

Expand All @@ -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: '/' } },
],
},
{
Expand All @@ -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: '/' } },
],
},
]
Expand Down
2 changes: 1 addition & 1 deletion src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
13 changes: 11 additions & 2 deletions src/components/navigation/GlobalNavigation/NavigationItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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 (
Expand Down
2 changes: 1 addition & 1 deletion src/components/navigation/Steps/Steps.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -748,4 +748,4 @@ export const ExampleInline: Story = {
</ExampleStory>
)
},
}
}

0 comments on commit 092a3aa

Please sign in to comment.