add navigation to the overview map

mParticle · May 27, 2024 · 70ae713 · 70ae713
1 parent b175afe
commit 70ae713
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 32 deletions.
diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx
@@ -135,6 +135,14 @@ const meta: Meta<typeof GlobalNavigation> = {
       alert('Going to mP!')
     },
     minimapOptions: {
+      routes: [
+        { elementId: 'oversight', route: '/oversight', isAuthorized: true },
+        { elementId: 'dataPlatform', route: '/data-platform', isAuthorized: false },
+        { elementId: 'customer360', route: '/customer-360', isAuthorized: true },
+        { elementId: 'predictions', route: '/predictions', isAuthorized: false },
+        { elementId: 'analytics', route: '/analytics', isAuthorized: true },
+        { elementId: 'segmentation', route: '/segmentation', isAuthorized: false },
+      ],
       show: true,
     },
   },
@@ -472,7 +480,6 @@ export const MP: Story = {
       alert('going to overview map')
     },
     avatarOptions: {
-      // src: "https://static-qa1.qa.corp.mparticle.com/appimg/logo_af_916397d2-9732-8de6-77cc-80e3bba120ca.png",
       alt: 'avatar',
     },
   },

diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx
@@ -19,6 +19,7 @@ import { type IGlobalNavigationItem } from 'src/components/navigation/GlobalNavi
 import { NavigationItem } from 'src/components/navigation/GlobalNavigation/NavigationItem'
 import { useNewExperienceReminder } from 'src/hooks/NewExperienceReminder/useNewExperienceReminder'
 import { HomeButton } from 'src/components/navigation/GlobalNavigation/HomeButton'
+import { ISvgLink } from 'src/components/navigation/MiniMap/SvgLinker'
 
 export interface IGlobalNavigationProps {
   logo: IGlobalNavigationLogo
@@ -39,6 +40,7 @@ export interface IGlobalNavigationProps {
   minimapOptions: {
     overviewHref?: string
     show?: boolean
+    routes: ISvgLink[]
   }
 }
 

diff --git a/src/components/navigation/GlobalNavigation/HomeButton.tsx b/src/components/navigation/GlobalNavigation/HomeButton.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Center, IGlobalNavigationProps, Icon, Popover, Tooltip } from 'src/components'
 import MiniMap from 'src/components/navigation/MiniMap/MiniMap'
+import { ISvgLink } from 'src/components/navigation/MiniMap/SvgLinker'
 
 interface MpHomeButtonProps {
   onClick: () => void
@@ -9,6 +10,7 @@ interface MpHomeButtonProps {
 interface MinimapWithPopoverProps {
   overviewHref: string
   onClick: () => void
+  routes: ISvgLink[]
 }
 
 interface TooltipWithButtonProps {
@@ -19,6 +21,7 @@ interface HomeButtonProps {
   minimapOptions: {
     overviewHref?: string
     show?: boolean
+    routes: ISvgLink[]
   }
   onMpHomeClick: () => void
 }
@@ -28,8 +31,11 @@ const MpHomeButton: React.FC<MpHomeButtonProps> = ({ onClick }) => (
   </Center>
 )
 
-const MinimapWithPopover: React.FC<MinimapWithPopoverProps> = ({ overviewHref, onClick }) => (
-  <Popover content={() => <MiniMap overviewHref={overviewHref} />} placement="rightBottom" arrow={false}>
+const MinimapWithPopover: React.FC<MinimapWithPopoverProps> = ({ overviewHref, onClick, routes }) => (
+  <Popover
+    content={() => <MiniMap overviewHref={overviewHref} routes={routes} />}
+    placement="rightBottom"
+    arrow={false}>
     <MpHomeButton onClick={onClick} />
   </Popover>
 )
@@ -45,6 +51,7 @@ export const HomeButton: React.FC<HomeButtonProps> = props => {
     <MinimapWithPopover
       overviewHref={props.minimapOptions?.overviewHref || '/'}
       onClick={props.onMpHomeClick}
+      routes={props.minimapOptions.routes}
     />
   ) : (
     <TooltipWithButton onClick={props.onMpHomeClick} />

diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx
@@ -7,25 +7,6 @@ import MiniMapSvg from './miniMap.svg?react'
 import { Flex } from 'src/components/layout/Flex/Flex'
 import { ISvgLink, SvgLinker } from 'src/components/navigation/MiniMap/SvgLinker'
 
-export interface IMinimapProps {
-  overviewHref: string
-}
-
-const buttons: ISvgLink[] = [
-  { elementId: 'OversightBtn', route: '/path1', variant: 'drop-shadow' },
-  { elementId: 'DataPlatformBtn', route: '/path2', variant: 'drop-shadow' },
-  { elementId: 'c360Btn', route: '/data-oversight', variant: 'drop-shadow' },
-  { elementId: 'PredictionsBtn', route: '/data-oversight', variant: 'drop-shadow' },
-  { elementId: 'AnalyticsBtn', route: '/data-oversight', variant: 'drop-shadow' },
-  { elementId: 'AnalyticsBtn', route: '/data-oversight', variant: 'drop-shadow' },
-  { elementId: 'SegmentationBtn', route: '/data-oversight', variant: 'drop-shadow' },
-]
-
-const isAuthorizedRoute = (route: string): boolean => {
-  const authorizedRoutes = ['/path1', '/path2']
-  return authorizedRoutes.includes(route)
-}
-
 const minimap = (
   <svg width="385" height="374" viewBox="0 0 385 374" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g id="mini map content" clip-path="url(#clip0_5505_13516)">
@@ -437,24 +418,50 @@ const minimap = (
     </defs>
   </svg>
 )
+export interface IMinimapProps {
+  overviewHref: string
+  routes: { elementId: string; route: string; isAuthorized: boolean }[]
+}
+
+const isAuthorizedRoute = (route: string): boolean => {
+  const authorizedRoutes = ['/path1', '/path2', '/path3', '/path4', '/path5', '/path6']
+  return authorizedRoutes.includes(route)
+}
 
-const Minimap: React.FC<IMinimapProps> = props => {
+const Minimap: React.FC<IMinimapProps> = ({ overviewHref, routes }) => {
   const handleLinkClick = (route: string) => {
     if (isAuthorizedRoute(route)) {
+      // manejar ruta autorizada
     } else {
-      alert('You are not authorized to access this page.')
+      alert('No estás autorizado para acceder a esta página.')
     }
   }
+
+  const linkMap: { [key: string]: string } = {
+    oversight: 'OversightBtn',
+    dataPlatform: 'DataPlatformBtn',
+    customer360: 'c360Btn',
+    predictions: 'PredictionsBtn',
+    analytics: 'AnalyticsBtn',
+    segmentation: 'SegmentationBtn',
+  }
+
+  const buttonsWithRoutes: ISvgLink[] = routes.map(route => ({
+    elementId: linkMap[route.elementId] || route.elementId,
+    route: route.route,
+    variant: 'drop-shadow',
+    isAuthorized: route.isAuthorized,
+  }))
+
   return (
     <ConfigProvider>
       <div className="minimap_container">
         <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>
+            <Button href={overviewHref || '/'}>Go to overview</Button>
           </Flex>
-          <SvgLinker buttons={buttons} isAuthorizedRoute={isAuthorizedRoute} onLinkClick={handleLinkClick}>
-            {/*<MiniMapSvg id="svgRoot" />*/}
+          <SvgLinker buttons={buttonsWithRoutes} onLinkClick={handleLinkClick}>
             {minimap}
           </SvgLinker>
         </Flex>

diff --git a/src/components/navigation/MiniMap/SvgLinker.tsx b/src/components/navigation/MiniMap/SvgLinker.tsx
@@ -4,17 +4,17 @@ import './miniMap.css'
 export interface ISvgLink {
   elementId: string
   route: string
-  variant: 'regular' | 'black' | 'drop-shadow'
+  isAuthorized: boolean
+  variant?: 'regular' | 'black' | 'drop-shadow'
 }
 
 interface ISvgLinkerProps {
   buttons: ISvgLink[]
   children: React.ReactNode
   onLinkClick: (route: string) => void
-  isAuthorizedRoute: (route: string) => boolean
 }
 
-export const SvgLinker: React.FC<ISvgLinkerProps> = ({ buttons, children, onLinkClick, isAuthorizedRoute }) => {
+export const SvgLinker: React.FC<ISvgLinkerProps> = ({ buttons, children, onLinkClick }) => {
   const handleContainerClick = useCallback(
     (e: React.MouseEvent) => {
       e.preventDefault()
@@ -47,11 +47,11 @@ export const SvgLinker: React.FC<ISvgLinkerProps> = ({ buttons, children, onLink
                 key={id}
                 href={`/${button.route}`}
                 className={`svg-linker-root__button svg-linker-root__button--${button.variant}${
-                  isAuthorizedRoute(button.route) ? '' : ' svg-linker-root__button--disabled'
+                  button.isAuthorized ? '' : ' svg-linker-root__button--disabled'
                 }`}
                 onClick={e => {
                   e.preventDefault()
-                  if (isAuthorizedRoute(button.route)) {
+                  if (button.isAuthorized) {
                     onLinkClick(button.route)
                   } else {
                     alert('You are not authorized to access this page.')