fix: signout onclick being triggered on render when there are no orgs (…

…#337)

Co-authored-by: mparticle-automation <[email protected]>

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.21.1-fix-signout-onclick-trigger.1](https://github.com/mParticle/aquarium/compare/v1.21.0...v1.21.1-fix-signout-onclick-trigger.1) (2024-07-22)
+
+### Bug Fixes
+
+- auto triggering of signout onClick when there are no orgs ([d2645fd](https://github.com/mParticle/aquarium/commit/d2645fd164a37557b0f8b475f093b2f0c6b35058))
+
 # [1.21.0](https://github.com/mParticle/aquarium/compare/v1.20.0...v1.21.0) (2024-07-16)
 
 ### Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mparticle/aquarium",
-  "version": "1.21.0",
+  "version": "1.21.1-fix-signout-onclick-trigger.1",
   "description": "mParticle Component Library",
   "license": "Apache-2.0",
   "keywords": [

src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx

@@ -485,8 +485,12 @@ export const MP: Story = {
     orgs: mpOrgs,
     minimapOptions: {
       overviewHref: '/',
-      onLinkClick: link => alert(link.href),
-      onUnauthorizedClick: link => alert(`unauthorized ${link?.href} `),
+      onLinkClick: link => {
+        alert(link.href)
+      },
+      onUnauthorizedClick: link => {
+        alert(`unauthorized ${link?.href} `)
+      },
       unauthorizedLinks: ['dataPlatform'],
       activeLink: 'oversight',
       links: [
@@ -1015,6 +1019,27 @@ export const Cortex: Story = {
     onMpHomeClick: () => {
       alert('going to overview map')
     },
+    navigationButtonItemOptions: {
+      label: 'Sign Out of mParticle',
+      onClick: () => {
+        alert('onSignout click')
+      },
+    },
+    minimapOptions: {
+      overviewHref: '/',
+      onLinkClick: link => {
+        if (link.linkId !== 'predictions') alert(link.href)
+      },
+      links: [
+        { linkId: 'oversight', href: '/oversight' },
+        { linkId: 'dataPlatform', href: '/data-platform' },
+        { linkId: 'customer360', href: '/customer-360' },
+        { linkId: 'predictions', href: '/predictions' },
+        { linkId: 'analytics', href: '/analytics' },
+        { linkId: 'segmentation', href: '/segmentation' },
+      ],
+      activeLink: 'predictions',
+    },
   },
 }
 

src/components/navigation/GlobalNavigation/GlobalNavigation.tsx

@@ -72,7 +72,7 @@ export const GlobalNavigation = ({ showSuiteLogo = true, ...props }: IGlobalNavi
                 avatarOptions={props.avatarOptions}
               />
             ) : (
-              !!props.navigationButtonItemOptions?.onClick() && (
+              !!props.navigationButtonItemOptions?.onClick && (
                 <NavigationItem
                   type="link"
                   icon={<Icon name="signout" />}

src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode, type MouseEvent, ReactElement } from 'react'
 import { type HrefOptions } from 'src/utils/utils'
-import { Icons } from 'src/constants/Icons'
+import { type Icons } from 'src/constants/Icons'
 
 export interface IBaseGlobalNavigationItem {
   type?: 'menu' | 'link'
@@ -42,7 +42,7 @@ export interface IMiniMapOptions {
   overviewHref: string
   links: MiniMapLink[]
   onLinkClick: (link: MiniMapLink) => void
-  onUnauthorizedClick: (link?: MiniMapLink) => void
-  unauthorizedLinks: MiniMapLinks[]
+  onUnauthorizedClick?: (link?: MiniMapLink) => void
+  unauthorizedLinks?: MiniMapLinks[]
   activeLink: MiniMapLinks
 }

src/components/navigation/MiniMap/MiniMap.tsx

@@ -5,8 +5,11 @@ import { Button, ConfigProvider } from 'src/components'
 import Logo from 'src/assets/svg/mp-logo-wordmark.svg?react'
 import { minimap } from './minimap-svg'
 import { Flex } from 'src/components/layout/Flex/Flex'
-import { ISvgLink, SvgLinker } from 'src/components/navigation/MiniMap/SvgLinker'
-import { IMiniMapOptions, MiniMapLinks } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
+import { type ISvgLink, SvgLinker } from 'src/components/navigation/MiniMap/SvgLinker'
+import {
+  type IMiniMapOptions,
+  type MiniMapLinks,
+} from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
 
 type IMiniMapProps = IMiniMapOptions
 
@@ -24,7 +27,7 @@ const Minimap = (props: IMiniMapProps) => {
     elementId: elementIdMap[link.linkId],
     href: link.href,
     variant: 'drop-shadow',
-    isUnauthorized: props.unauthorizedLinks.includes(link.linkId),
+    isUnauthorized: props.unauthorizedLinks?.includes(link.linkId),
     isActive: props.activeLink === link.linkId,
   }))
 
@@ -44,10 +47,12 @@ const Minimap = (props: IMiniMapProps) => {
     </ConfigProvider>
   )
   function handleLinkClick(svgLink: ISvgLink): void {
-    const miniMapLink = props.links.find(link => link.href === svgLink.href)!
+    const miniMapLink = props.links.find(link => link.href === svgLink.href)
 
-    if (svgLink.isUnauthorized) props.onUnauthorizedClick(miniMapLink)
-    else props.onLinkClick(miniMapLink)
+    if (miniMapLink) {
+      if (svgLink.isUnauthorized) props.onUnauthorizedClick?.(miniMapLink)
+      else props.onLinkClick(miniMapLink)
+    }
   }
 }