From 70ae71368746cedbe39f8816c76448d2f308e291 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 27 May 2024 15:08:02 +0200 Subject: [PATCH] add navigation to the overview map --- .../GlobalNavigation.stories.tsx | 9 ++- .../GlobalNavigation/GlobalNavigation.tsx | 2 + .../GlobalNavigation/HomeButton.tsx | 11 +++- src/components/navigation/MiniMap/MiniMap.tsx | 55 +++++++++++-------- .../navigation/MiniMap/SvgLinker.tsx | 10 ++-- 5 files changed, 55 insertions(+), 32 deletions(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index c794dfbb8..ac6a19d39 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -135,6 +135,14 @@ const meta: Meta = { 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 index e77df6f07..77b32ffb9 100644 --- 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 index 32e4e6aa4..45cbc2e13 100644 --- 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 = ({ onClick }) => ( ) -const MinimapWithPopover: React.FC = ({ overviewHref, onClick }) => ( - } placement="rightBottom" arrow={false}> +const MinimapWithPopover: React.FC = ({ overviewHref, onClick, routes }) => ( + } + placement="rightBottom" + arrow={false}> ) @@ -45,6 +51,7 @@ export const HomeButton: React.FC = props => { ) : ( diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx index 316016b62..b7c0d38b6 100644 --- 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 = ( @@ -437,24 +418,50 @@ const minimap = ( ) +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 = props => { +const Minimap: React.FC = ({ 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 (
- + - - {/**/} + {minimap} diff --git a/src/components/navigation/MiniMap/SvgLinker.tsx b/src/components/navigation/MiniMap/SvgLinker.tsx index 72ce8a722..da83a20f0 100644 --- 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 = ({ buttons, children, onLinkClick, isAuthorizedRoute }) => { +export const SvgLinker: React.FC = ({ buttons, children, onLinkClick }) => { const handleContainerClick = useCallback( (e: React.MouseEvent) => { e.preventDefault() @@ -47,11 +47,11 @@ export const SvgLinker: React.FC = ({ 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.')