feat: move minimap to suite logo

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

@@ -6,6 +6,7 @@ import { Badge } from 'src/components/data-display/Badge/Badge'
 import {
   type IGlobalNavigationItem,
   type IGlobalNavigationLogo,
+  type IMiniMapOptions,
 } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
 import { generateOrgs } from 'src/components/navigation/GlobalNavigation/stories-utils'
 import { type INavigationOrg } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelectorItems'
@@ -1207,6 +1208,26 @@ export const MPWithNavSwitcherTour: Story = {
       },
     }
 
+    const minimapOptions: IMiniMapOptions = {
+      overviewHref: '/',
+      onLinkClick: link => {
+        alert(link.href)
+      },
+      onUnauthorizedClick: link => {
+        alert(`unauthorized ${link?.href} `)
+      },
+      unauthorizedLinks: ['dataPlatform'],
+      activeLink: 'oversight',
+      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' },
+      ],
+    }
+
     return (
       <div style={{ width: 800 }}>
         <GlobalNavigation
@@ -1221,6 +1242,7 @@ export const MPWithNavSwitcherTour: Story = {
             alert('going to overview map')
           }}
           navigationButtonItemOptions={navigationButtonItemOptions}
+          minimapOptions={minimapOptions}
         />
       </div>
     )

src/components/navigation/GlobalNavigation/GlobalNavigation.tsx

@@ -53,7 +53,7 @@ export const GlobalNavigation = ({ showSuiteLogo = true, ...props }: IGlobalNavi
           <div>
             {showSuiteLogo && (
               <>
-                <SuiteLogo {...props.logo} />
+                <SuiteLogo {...props.logo} minimapOptions={props.minimapOptions} />
                 <div className="globalNavigation__divider" />
               </>
             )}
@@ -82,9 +82,7 @@ export const GlobalNavigation = ({ showSuiteLogo = true, ...props }: IGlobalNavi
                 />
               )
             )}
-            {!props.hideMpHome && (
-              <HomeButton onMpHomeClick={props.onMpHomeClick} minimapOptions={props.minimapOptions} />
-            )}
+            {!props.hideMpHome && <HomeButton onMpHomeClick={props.onMpHomeClick} />}
           </div>
         </Flex>
       </Layout.Sider>

src/components/navigation/GlobalNavigation/HomeButton.tsx

@@ -1,22 +1,15 @@
-import React, { useState } from 'react'
-import { Center, Icon, Popover, Tooltip } from 'src/components'
-import MiniMap from 'src/components/navigation/MiniMap/MiniMap'
-import { IMiniMapOptions, MiniMapLink } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
+import React from 'react'
+import { Center, Icon, Tooltip } from 'src/components'
 
 interface MpHomeButtonProps {
   onClick: () => void
 }
 
-interface MinimapWithPopoverProps extends IMiniMapOptions {
-  onPopoverClick: () => void
-}
-
 interface TooltipWithButtonProps {
   onTooltipClick: () => void
 }
 
 interface HomeButtonProps {
-  minimapOptions?: IMiniMapOptions
   onMpHomeClick: () => void
 }
 
@@ -28,37 +21,6 @@ function MpHomeButton(props: MpHomeButtonProps) {
   )
 }
 
-function MinimapWithPopover(props: MinimapWithPopoverProps) {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
-  const handleLinkClick = (link: MiniMapLink) => {
-    setIsPopoverOpen(false)
-    props.onLinkClick(link)
-  }
-  const handlePopoverOpenChange = (newPopoverState: boolean) => {
-    setIsPopoverOpen(newPopoverState)
-  }
-
-  return (
-    <Popover
-      content={
-        <MiniMap
-          overviewHref={props.overviewHref}
-          onUnauthorizedClick={props.onUnauthorizedClick}
-          links={props.links}
-          onLinkClick={handleLinkClick}
-          unauthorizedLinks={props.unauthorizedLinks}
-          activeLink={props.activeLink}
-        />
-      }
-      placement="rightBottom"
-      open={isPopoverOpen}
-      onOpenChange={handlePopoverOpenChange}
-      arrow={false}>
-      <MpHomeButton onClick={props.onPopoverClick} />
-    </Popover>
-  )
-}
-
 function TooltipWithButton(props: TooltipWithButtonProps) {
   return (
     <Tooltip title="mParticle Overview" placement="right">
@@ -68,19 +30,5 @@ function TooltipWithButton(props: TooltipWithButtonProps) {
 }
 
 export function HomeButton(props: HomeButtonProps) {
-  if (!props.minimapOptions) {
-    return <TooltipWithButton onTooltipClick={props.onMpHomeClick} />
-  }
-
-  return (
-    <MinimapWithPopover
-      onUnauthorizedClick={props.minimapOptions.onUnauthorizedClick}
-      overviewHref={props.minimapOptions.overviewHref}
-      links={props.minimapOptions.links}
-      onLinkClick={props.minimapOptions.onLinkClick}
-      unauthorizedLinks={props.minimapOptions.unauthorizedLinks}
-      onPopoverClick={props.onMpHomeClick}
-      activeLink={props.minimapOptions.activeLink}
-    />
-  )
+  return <TooltipWithButton onTooltipClick={props.onMpHomeClick} />
 }

src/components/navigation/GlobalNavigation/SuiteLogo.tsx

@@ -1,16 +1,23 @@
-import React, { type ReactNode, useRef } from 'react'
-import { Center, Icon, type ITourProps, Tour } from 'src/components'
+import React, { type ReactNode, useRef, useState } from 'react'
+import { Center, Icon, type ITourProps, Popover, Tour } from 'src/components'
 import { NavigationIcon } from 'src/components/navigation/GlobalNavigation/NavigationIcon'
+import MiniMap from 'src/components/navigation/MiniMap/MiniMap'
 import { type Icons } from 'src/constants/Icons'
 import {
   type IGlobalNavigationLogo,
+  type IMiniMapOptions,
   type INavSwitcherTourOptions,
+  type MiniMapLink,
 } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
 import { type IconColor } from 'src/components/general/Icon/Icon'
 
 // custom-size is the default size to prevent breaking changes.
 type IconColorOptions = 'default' | 'background-solid' | 'custom-size'
 
+interface SuiteLogoProps extends IGlobalNavigationLogo {
+  minimapOptions?: IMiniMapOptions
+}
+
 function isStringIcon(icon: ReactNode | string): icon is keyof typeof Icons {
   return typeof icon === 'string'
 }
@@ -21,18 +28,68 @@ export function SuiteLogo({
   type = 'custom-size',
   onSuiteLogoClick,
   navSwitcherTourOptions,
-}: IGlobalNavigationLogo) {
+  minimapOptions,
+}: SuiteLogoProps) {
   const logoRef = useRef(null)
 
+  if (!minimapOptions || navSwitcherTourOptions?.open) {
+    return <SuiteLogoContent />
+  }
+
   return (
-    <>
-      <div ref={logoRef}>
-        {renderNavLogo()}
-        {navSwitcherTourOptions && renderNavTour(navSwitcherTourOptions)}
-      </div>
-    </>
+    <MinimapWithPopover
+      onUnauthorizedClick={minimapOptions.onUnauthorizedClick}
+      overviewHref={minimapOptions.overviewHref}
+      links={minimapOptions.links}
+      onLinkClick={minimapOptions.onLinkClick}
+      unauthorizedLinks={minimapOptions.unauthorizedLinks}
+      activeLink={minimapOptions.activeLink}
+    />
   )
 
+  function SuiteLogoContent() {
+    return (
+      <>
+        <div ref={logoRef}>
+          {renderNavLogo()}
+          {navSwitcherTourOptions && renderNavTour(navSwitcherTourOptions)}
+        </div>
+      </>
+    )
+  }
+
+  function MinimapWithPopover(props: IMiniMapOptions) {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+    const handleLinkClick = (link: MiniMapLink) => {
+      setIsPopoverOpen(false)
+      props.onLinkClick(link)
+    }
+    const handlePopoverOpenChange = (newPopoverState: boolean) => {
+      setIsPopoverOpen(newPopoverState)
+    }
+
+    return (
+      <Popover
+        content={
+          <MiniMap
+            overviewHref={props.overviewHref}
+            onUnauthorizedClick={props.onUnauthorizedClick}
+            links={props.links}
+            onLinkClick={handleLinkClick}
+            unauthorizedLinks={props.unauthorizedLinks}
+            activeLink={props.activeLink}
+          />
+        }
+        placement="bottomLeft"
+        open={isPopoverOpen}
+        trigger="hover"
+        onOpenChange={handlePopoverOpenChange}
+        arrow={false}>
+        <SuiteLogoContent />
+      </Popover>
+    )
+  }
+
   function renderNavLogo() {
     const classMap = {
       default: '',

src/components/navigation/MiniMap/MiniMap.tsx

@@ -2,7 +2,6 @@ import 'src/styles/_variables.css'
 import './miniMap.css'
 import React from 'react'
 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 { type ISvgLink, SvgLinker } from 'src/components/navigation/MiniMap/SvgLinker'
@@ -33,15 +32,14 @@ const Minimap = (props: IMiniMapProps) => {
 
   return (
     <ConfigProvider>
-      <div className="u-padding-sm">
+      <div className="u-padding-xxs">
         <Flex align="normal" component="div" flex="0 1 auto" gap="small" justify="stretch" vertical wrap="nowrap">
-          <Flex align="center" justify="space-between">
-            <Logo />
-            <Button href={props.overviewHref || '/'}>Go to overview</Button>
-          </Flex>
           <SvgLinker links={svgLinks} onLinkClick={handleLinkClick}>
             {minimap}
           </SvgLinker>
+          <Flex align="center" justify="end">
+            <Button href={props.overviewHref || '/'}>Go to overview</Button>
+          </Flex>
         </Flex>
       </div>
     </ConfigProvider>

src/utils/utils.css

@@ -17,3 +17,7 @@
 .u-padding-sm {
   padding:var(--padding-sm) !important;
 }
+
+.u-padding-xxs {
+  padding: var(--padding-xxs) !important;
+}