From 51472e9a9320d084ffd05537008d96e735729016 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Tue, 21 May 2024 17:59:32 +0200 Subject: [PATCH 01/26] wip minimap svg linker --- src/components/navigation/MiniMap/MiniMap.tsx | 510 +++++++++++++++++- .../navigation/MiniMap/SvgLinker.tsx | 63 +++ src/components/navigation/MiniMap/miniMap.svg | 356 ++++++------ 3 files changed, 775 insertions(+), 154 deletions(-) create mode 100644 src/components/navigation/MiniMap/SvgLinker.tsx diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx index 086df935b..e69f5e7ef 100644 --- a/src/components/navigation/MiniMap/MiniMap.tsx +++ b/src/components/navigation/MiniMap/MiniMap.tsx @@ -5,10 +5,34 @@ import { Button, ConfigProvider } from 'src/components' import Logo from 'src/assets/svg/mp-logo-wordmark.svg?react' import MiniMap 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: 'ObservabilityBtn', route: '/bla', variant: 'regular' }, + { elementId: 'SystemAlertsBtn', route: '/bla', variant: 'regular' }, + { elementId: 'PrivacyBtn', route: '/bla', variant: 'regular' }, + { elementId: 'DSRBtn', route: '/bla', variant: 'regular' }, + { elementId: 'TrendsBtn', route: '/bla', variant: 'regular' }, + { elementId: 'LiveStreamBtn', route: '/bla', variant: 'regular' }, + { elementId: 'DataCatalogBtn', route: '/bla', variant: 'regular' }, + { elementId: 'ForwardingBtn', route: '/bla', variant: 'regular' }, + { elementId: 'RulesBtn', route: '/bla', variant: 'black' }, + { elementId: 'PlansBtn', route: '/bla', variant: 'black' }, + { elementId: 'IdentityBtn', route: '/bla', variant: 'black' }, + { elementId: 'FiltersBtn', route: '/bla', variant: 'black' }, + { elementId: 'OutboundRulesBtn', route: '/bla', variant: 'black' }, + { elementId: 'ProfilesBtn', route: '/bla', variant: 'regular' }, + { elementId: 'GroupsBtn', route: '/bla', variant: 'regular' }, + { elementId: 'CABtn', route: '/bla', variant: 'regular' }, + { elementId: 'IAsBtn', route: '/bla', variant: 'regular' }, + { elementId: 'IntelligenceBtn', route: '/bla', variant: 'drop-shadow' }, + { elementId: 'AnalyticsBtn', route: '/bla', variant: 'drop-shadow' }, + { elementId: 'SegmentationBtn', route: '/bla', variant: 'drop-shadow' }, +] + const Minimap: React.FC = props => { return ( @@ -18,7 +42,491 @@ const Minimap: React.FC = props => { - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/navigation/MiniMap/SvgLinker.tsx b/src/components/navigation/MiniMap/SvgLinker.tsx new file mode 100644 index 000000000..5b4308d84 --- /dev/null +++ b/src/components/navigation/MiniMap/SvgLinker.tsx @@ -0,0 +1,63 @@ +import React, { Children, ReactElement } from 'react' + +export interface ISvgLink { + elementId: string + route: string + variant: 'regular' | 'black' | 'drop-shadow' +} + +interface ISvgLinkerProps { + buttons: ISvgLink[] + children: React.ReactNode +} + +export const SvgLinker: React.FC = ({ buttons, children }) => { + const wrapButtonsIntoLinks = (parent: React.ReactNode): React.ReactNode => { + return Children.map(parent, child => { + if (!React.isValidElement(child)) return child + + const childElement = child as ReactElement + if (childElement.type === 'svg') { + const svgContent = childElement.props.children + const idsInSVG = findIdsInSvg(svgContent) + console.log(svgContent, 'childElement') + + return idsInSVG.map((id: string) => { + const button = buttons.find(b => b.elementId === id) + if (button) { + return ( + + {React.cloneElement(childElement, { key: id })} {/* Clone SVG element with a unique key */} + + ) + } else { + return null + } + }) + } else { + return child // Return non-SVG elements as is + } + }) + } + + const findIdsInSvg = (svgContent: React.ReactNode): string[] => { + const ids: string[] = [] + Children.forEach(svgContent, child => { + if (React.isValidElement(child)) { + const childElement = child as ReactElement + const id = childElement.props['id'] || childElement.props['id'] // Accessing 'id' attribute for SVG elements + if (id) { + ids.push(id) + } + } + }) + return ids + } + + return
{wrapButtonsIntoLinks(children)}
+} + +export default SvgLinker diff --git a/src/components/navigation/MiniMap/miniMap.svg b/src/components/navigation/MiniMap/miniMap.svg index edc4255dc..138b5c45c 100644 --- a/src/components/navigation/MiniMap/miniMap.svg +++ b/src/components/navigation/MiniMap/miniMap.svg @@ -1,153 +1,203 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 789465a75335a01c6e132e5451ae50eba99ebd35 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Fri, 24 May 2024 17:13:52 +0200 Subject: [PATCH 02/26] WIP map links --- src/components/navigation/MiniMap/MiniMap.tsx | 955 +++++++++--------- .../navigation/MiniMap/SvgLinker.tsx | 72 +- src/components/navigation/MiniMap/miniMap.css | 45 +- 3 files changed, 546 insertions(+), 526 deletions(-) diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx index e69f5e7ef..d89b9663b 100644 --- a/src/components/navigation/MiniMap/MiniMap.tsx +++ b/src/components/navigation/MiniMap/MiniMap.tsx @@ -3,529 +3,480 @@ 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?react' +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: 'ObservabilityBtn', route: '/bla', variant: 'regular' }, - { elementId: 'SystemAlertsBtn', route: '/bla', variant: 'regular' }, - { elementId: 'PrivacyBtn', route: '/bla', variant: 'regular' }, - { elementId: 'DSRBtn', route: '/bla', variant: 'regular' }, - { elementId: 'TrendsBtn', route: '/bla', variant: 'regular' }, - { elementId: 'LiveStreamBtn', route: '/bla', variant: 'regular' }, - { elementId: 'DataCatalogBtn', route: '/bla', variant: 'regular' }, - { elementId: 'ForwardingBtn', route: '/bla', variant: 'regular' }, - { elementId: 'RulesBtn', route: '/bla', variant: 'black' }, - { elementId: 'PlansBtn', route: '/bla', variant: 'black' }, - { elementId: 'IdentityBtn', route: '/bla', variant: 'black' }, - { elementId: 'FiltersBtn', route: '/bla', variant: 'black' }, - { elementId: 'OutboundRulesBtn', route: '/bla', variant: 'black' }, - { elementId: 'ProfilesBtn', route: '/bla', variant: 'regular' }, - { elementId: 'GroupsBtn', route: '/bla', variant: 'regular' }, - { elementId: 'CABtn', route: '/bla', variant: 'regular' }, - { elementId: 'IAsBtn', route: '/bla', variant: 'regular' }, - { elementId: 'IntelligenceBtn', route: '/bla', variant: 'drop-shadow' }, - { elementId: 'AnalyticsBtn', route: '/bla', variant: 'drop-shadow' }, - { elementId: 'SegmentationBtn', route: '/bla', variant: 'drop-shadow' }, + { elementId: 'DataOversightBtn', route: '/data-oversight', variant: 'regular' }, + { elementId: 'ObservabilityBtn', route: '/observability', variant: 'regular' }, + { elementId: 'SystemAlertsBtn', route: '/system-alerts', variant: 'regular' }, + { elementId: 'PrivacyBtn', route: '/privacy', variant: 'regular' }, + { elementId: 'DSRBtn', route: '/dsr', variant: 'regular' }, + { elementId: 'TrendsBtn', route: '/trends', variant: 'regular' }, + { elementId: 'LiveStreamBtn', route: '/live-stream', variant: 'regular' }, + { elementId: 'DataCatalogBtn', route: '/data-catalog', variant: 'regular' }, + { elementId: 'ForwardingBtn', route: '/forwarding', variant: 'regular' }, + { elementId: 'RulesBtn', route: '/rules', variant: 'black' }, + { elementId: 'PlansBtn', route: '/plans', variant: 'black' }, + { elementId: 'IdentityBtn', route: '/identity', variant: 'black' }, + { elementId: 'FiltersBtn', route: '/filters', variant: 'black' }, + { elementId: 'OutboundRulesBtn', route: '/outbound-rules', variant: 'black' }, + { elementId: 'ProfilesBtn', route: '/profiles', variant: 'regular' }, + { elementId: 'GroupsBtn', route: '/groups', variant: 'regular' }, + { elementId: 'CABtn', route: '/ca', variant: 'regular' }, + { elementId: 'IAsBtn', route: '/ias', variant: 'regular' }, + { elementId: 'IntelligenceBtn', route: '/intelligence', variant: 'drop-shadow' }, + { elementId: 'AnalyticsBtn', route: '/analytics', variant: 'drop-shadow' }, + { elementId: 'SegmentationBtn', route: '/segmentation', variant: 'drop-shadow' }, ] -const Minimap: React.FC = props => { - return ( - -
- - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) + +const Minimap: React.FC = props => { + return ( + +
+ + + + + + + {/**/} + {minimap}
diff --git a/src/components/navigation/MiniMap/SvgLinker.tsx b/src/components/navigation/MiniMap/SvgLinker.tsx index 5b4308d84..53834305b 100644 --- a/src/components/navigation/MiniMap/SvgLinker.tsx +++ b/src/components/navigation/MiniMap/SvgLinker.tsx @@ -1,4 +1,5 @@ import React, { Children, ReactElement } from 'react' +import './miniMap.css' export interface ISvgLink { elementId: string @@ -12,48 +13,73 @@ interface ISvgLinkerProps { } export const SvgLinker: React.FC = ({ buttons, children }) => { + console.log(children, 'children') + const wrapButtonsIntoLinks = (parent: React.ReactNode): React.ReactNode => { - return Children.map(parent, child => { - if (!React.isValidElement(child)) return child + const wrapElement = (element: ReactElement): ReactElement => { + if (element.type === 'svg') { + const idsInSVG = findIdsInSvg(element.props.children) + console.log(idsInSVG, 'IDs in SVG') - const childElement = child as ReactElement - if (childElement.type === 'svg') { - const svgContent = childElement.props.children - const idsInSVG = findIdsInSvg(svgContent) - console.log(svgContent, 'childElement') + const wrappedSvgContent = Children.map(element.props.children, child => { + if (!React.isValidElement(child)) return child + return wrapElement(child) + }) - return idsInSVG.map((id: string) => { + return React.cloneElement(element, { children: wrappedSvgContent }) + } else { + const id = element.props.id + if (id) { const button = buttons.find(b => b.elementId === id) if (button) { + console.log(`Wrapping element with id: ${id} with link to ${button.route}`) return ( - {React.cloneElement(childElement, { key: id })} {/* Clone SVG element with a unique key */} + {element} ) - } else { - return null } - }) - } else { - return child // Return non-SVG elements as is + } + if (element.props.children) { + const wrappedChildren = Children.map(element.props.children, child => { + if (!React.isValidElement(child)) return child + return wrapElement(child) + }) + return React.cloneElement(element, { children: wrappedChildren }) + } + return element } + } + + return Children.map(parent, child => { + if (!React.isValidElement(child)) return child + return wrapElement(child as ReactElement) }) } const findIdsInSvg = (svgContent: React.ReactNode): string[] => { const ids: string[] = [] - Children.forEach(svgContent, child => { - if (React.isValidElement(child)) { - const childElement = child as ReactElement - const id = childElement.props['id'] || childElement.props['id'] // Accessing 'id' attribute for SVG elements - if (id) { - ids.push(id) + + const searchIds = (node: React.ReactNode) => { + Children.forEach(node, child => { + if (React.isValidElement(child)) { + const childElement = child as ReactElement + const id = childElement.props.id + if (id) { + ids.push(id) + } + if (childElement.props.children) { + searchIds(childElement.props.children) + } } - } - }) + }) + } + + searchIds(svgContent) return ids } diff --git a/src/components/navigation/MiniMap/miniMap.css b/src/components/navigation/MiniMap/miniMap.css index 8321637f0..5f0cb54f5 100644 --- a/src/components/navigation/MiniMap/miniMap.css +++ b/src/components/navigation/MiniMap/miniMap.css @@ -1,3 +1,46 @@ .minimap_container{ padding: var(--padding-sm); -} \ No newline at end of file +} + +.overview-map-root__button.overview-map-root__button--disabled { + cursor: default; + + &.overview-map-root__button--regular { + & rect:first-child { + fill: transparent; + stroke: var(--color-border); + } + + & path { + fill: var(--color-text-disabled); + } + + &:hover rect:first-child { + fill: transparent; + } + } + + &.overview-map-root__button--drop-shadow { + & > g > g > rect { + fill: var(--mp-brand-secondary-3); + } + + & path { + fill: var(--color-text-disabled); + } + + &:hover { + filter: none; + } + } + + &.overview-map-root__button--black { + & rect:first-child { + fill: var(--mp-brand-secondary-6); + } + + &:hover rect:first-child { + fill: var(--mp-brand-secondary-6); + } + } +} From d17fef791b4f5e6c34f0398f30de9c6cbc164c41 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Fri, 24 May 2024 18:29:03 +0200 Subject: [PATCH 03/26] wip minimap linking --- src/components/navigation/MiniMap/MiniMap.tsx | 51 ++++++++-------- .../navigation/MiniMap/SvgLinker.tsx | 60 +++++++++---------- src/components/navigation/MiniMap/miniMap.css | 24 ++++++-- 3 files changed, 72 insertions(+), 63 deletions(-) diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx index d89b9663b..4ca822342 100644 --- a/src/components/navigation/MiniMap/MiniMap.tsx +++ b/src/components/navigation/MiniMap/MiniMap.tsx @@ -12,29 +12,20 @@ export interface IMinimapProps { } const buttons: ISvgLink[] = [ - { elementId: 'DataOversightBtn', route: '/data-oversight', variant: 'regular' }, - { elementId: 'ObservabilityBtn', route: '/observability', variant: 'regular' }, - { elementId: 'SystemAlertsBtn', route: '/system-alerts', variant: 'regular' }, - { elementId: 'PrivacyBtn', route: '/privacy', variant: 'regular' }, - { elementId: 'DSRBtn', route: '/dsr', variant: 'regular' }, - { elementId: 'TrendsBtn', route: '/trends', variant: 'regular' }, - { elementId: 'LiveStreamBtn', route: '/live-stream', variant: 'regular' }, - { elementId: 'DataCatalogBtn', route: '/data-catalog', variant: 'regular' }, - { elementId: 'ForwardingBtn', route: '/forwarding', variant: 'regular' }, - { elementId: 'RulesBtn', route: '/rules', variant: 'black' }, - { elementId: 'PlansBtn', route: '/plans', variant: 'black' }, - { elementId: 'IdentityBtn', route: '/identity', variant: 'black' }, - { elementId: 'FiltersBtn', route: '/filters', variant: 'black' }, - { elementId: 'OutboundRulesBtn', route: '/outbound-rules', variant: 'black' }, - { elementId: 'ProfilesBtn', route: '/profiles', variant: 'regular' }, - { elementId: 'GroupsBtn', route: '/groups', variant: 'regular' }, - { elementId: 'CABtn', route: '/ca', variant: 'regular' }, - { elementId: 'IAsBtn', route: '/ias', variant: 'regular' }, - { elementId: 'IntelligenceBtn', route: '/intelligence', variant: 'drop-shadow' }, - { elementId: 'AnalyticsBtn', route: '/analytics', variant: 'drop-shadow' }, - { elementId: 'SegmentationBtn', route: '/segmentation', variant: 'drop-shadow' }, + { elementId: 'DataOversightBtn', route: '/path1', variant: 'drop-shadow' }, + { elementId: 'DataPlatformBtn', route: '/path2', variant: 'drop-shadow' }, + { elementId: 'Customer360Btn', 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 = ( @@ -48,14 +39,14 @@ const minimap = ( fill-rule="evenodd" clip-rule="evenodd" d="M40 61.9952L49.4782 56V61.9952L58.9564 56L58.9564 61.9953L49.4782 67.9905L49.4782 61.9953L40 67.9905V61.9952ZM49.4782 74.0048L40 80V74.0048L49.4782 67.9905V74.0048ZM58.9564 67.9905V61.9953L68.4155 56V61.9953L58.9564 67.9905ZM58.9564 74.0048L49.4782 80L49.4782 74.0048L58.9564 67.9905L58.9564 74.0048ZM58.9564 74.0048L68.4155 67.9905V74.0048L58.9564 80L58.9564 74.0048Z" - fill="currentColor" + fill="#0F0E0E" /> @@ -207,7 +198,7 @@ const minimap = ( @@ -259,7 +250,7 @@ const minimap = ( @@ -292,7 +283,7 @@ const minimap = ( @@ -466,6 +457,12 @@ const minimap = ( ) const Minimap: React.FC = props => { + const handleLinkClick = (route: string) => { + if (isAuthorizedRoute(route)) { + } else { + alert('You are not authorized to access this page.') + } + } return (
@@ -474,7 +471,7 @@ const Minimap: React.FC = props => { - + {/**/} {minimap} diff --git a/src/components/navigation/MiniMap/SvgLinker.tsx b/src/components/navigation/MiniMap/SvgLinker.tsx index 53834305b..72ce8a722 100644 --- a/src/components/navigation/MiniMap/SvgLinker.tsx +++ b/src/components/navigation/MiniMap/SvgLinker.tsx @@ -1,4 +1,4 @@ -import React, { Children, ReactElement } from 'react' +import React, { Children, ReactElement, useCallback } from 'react' import './miniMap.css' export interface ISvgLink { @@ -10,17 +10,27 @@ export interface ISvgLink { interface ISvgLinkerProps { buttons: ISvgLink[] children: React.ReactNode + onLinkClick: (route: string) => void + isAuthorizedRoute: (route: string) => boolean } -export const SvgLinker: React.FC = ({ buttons, children }) => { - console.log(children, 'children') +export const SvgLinker: React.FC = ({ buttons, children, onLinkClick, isAuthorizedRoute }) => { + const handleContainerClick = useCallback( + (e: React.MouseEvent) => { + e.preventDefault() + const target = e.target as HTMLElement + const href = target.closest('a')?.getAttribute('href') + if (href) { + const route = href.substring(1) + onLinkClick(route) + } + }, + [onLinkClick], + ) const wrapButtonsIntoLinks = (parent: React.ReactNode): React.ReactNode => { const wrapElement = (element: ReactElement): ReactElement => { if (element.type === 'svg') { - const idsInSVG = findIdsInSvg(element.props.children) - console.log(idsInSVG, 'IDs in SVG') - const wrappedSvgContent = Children.map(element.props.children, child => { if (!React.isValidElement(child)) return child return wrapElement(child) @@ -32,13 +42,21 @@ export const SvgLinker: React.FC = ({ buttons, children }) => { if (id) { const button = buttons.find(b => b.elementId === id) if (button) { - console.log(`Wrapping element with id: ${id} with link to ${button.route}`) return ( + className={`svg-linker-root__button svg-linker-root__button--${button.variant}${ + isAuthorizedRoute(button.route) ? '' : ' svg-linker-root__button--disabled' + }`} + onClick={e => { + e.preventDefault() + if (isAuthorizedRoute(button.route)) { + onLinkClick(button.route) + } else { + alert('You are not authorized to access this page.') + } + }}> {element} ) @@ -61,29 +79,7 @@ export const SvgLinker: React.FC = ({ buttons, children }) => { }) } - const findIdsInSvg = (svgContent: React.ReactNode): string[] => { - const ids: string[] = [] - - const searchIds = (node: React.ReactNode) => { - Children.forEach(node, child => { - if (React.isValidElement(child)) { - const childElement = child as ReactElement - const id = childElement.props.id - if (id) { - ids.push(id) - } - if (childElement.props.children) { - searchIds(childElement.props.children) - } - } - }) - } - - searchIds(svgContent) - return ids - } - - return
{wrapButtonsIntoLinks(children)}
+ return
{wrapButtonsIntoLinks(children)}
} export default SvgLinker diff --git a/src/components/navigation/MiniMap/miniMap.css b/src/components/navigation/MiniMap/miniMap.css index 5f0cb54f5..afdf3f8c2 100644 --- a/src/components/navigation/MiniMap/miniMap.css +++ b/src/components/navigation/MiniMap/miniMap.css @@ -2,10 +2,10 @@ padding: var(--padding-sm); } -.overview-map-root__button.overview-map-root__button--disabled { +.svg-linker-root__button.svg-linker-root__button--disabled { cursor: default; - &.overview-map-root__button--regular { + &.svg-linker-root__button--regular { & rect:first-child { fill: transparent; stroke: var(--color-border); @@ -20,7 +20,7 @@ } } - &.overview-map-root__button--drop-shadow { + &.svg-linker-root__button--drop-shadow { & > g > g > rect { fill: var(--mp-brand-secondary-3); } @@ -34,7 +34,7 @@ } } - &.overview-map-root__button--black { + &.svg-linker-root__button--black { & rect:first-child { fill: var(--mp-brand-secondary-6); } @@ -44,3 +44,19 @@ } } } + +.svg-linker-root__button { + &.svg-linker-root__button--drop-shadow:hover { + filter: drop-shadow(0px 9px 28px rgba(0, 0, 0, 0.05)) + drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.12)) + drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.08)); + } + + &.svg-linker-root__button--regular:hover rect:first-child { + fill: var(--mp-brand-primary-2); + } + + &.svg-linker-root__button--black:hover rect:first-child { + fill: var(--mp-brand-secondary-7); + } +} \ No newline at end of file From b175afe290c8123533b18672b6db328b2212682a Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 27 May 2024 12:06:45 +0200 Subject: [PATCH 04/26] update minimap --- src/components/navigation/MiniMap/MiniMap.tsx | 550 +++++++++--------- 1 file changed, 266 insertions(+), 284 deletions(-) diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx index 4ca822342..316016b62 100644 --- a/src/components/navigation/MiniMap/MiniMap.tsx +++ b/src/components/navigation/MiniMap/MiniMap.tsx @@ -12,9 +12,9 @@ export interface IMinimapProps { } const buttons: ISvgLink[] = [ - { elementId: 'DataOversightBtn', route: '/path1', variant: 'drop-shadow' }, + { elementId: 'OversightBtn', route: '/path1', variant: 'drop-shadow' }, { elementId: 'DataPlatformBtn', route: '/path2', variant: 'drop-shadow' }, - { elementId: 'Customer360Btn', route: '/data-oversight', 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' }, @@ -27,277 +27,250 @@ const isAuthorizedRoute = (route: string): boolean => { } const minimap = ( - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + - - - - + + + + + + + + + + + + - - - + - - - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - + + + + + + + + + - - - - - - - - - - - + - + + + + + + + + @@ -311,15 +284,15 @@ const minimap = ( - - + + @@ -333,15 +306,15 @@ const minimap = ( - - + + @@ -355,15 +328,15 @@ const minimap = ( - - + + @@ -377,15 +350,15 @@ const minimap = ( - - + + @@ -399,15 +372,15 @@ const minimap = ( - - + + @@ -421,15 +394,15 @@ const minimap = ( - - + + @@ -443,14 +416,23 @@ const minimap = ( - - + + - - + + + + + + + + + + + - - + + From 70ae71368746cedbe39f8816c76448d2f308e291 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 27 May 2024 15:08:02 +0200 Subject: [PATCH 05/26] 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.') From bfeca9b146ac60c3ecb63b494b64242e13a4efd8 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 27 May 2024 15:40:27 +0200 Subject: [PATCH 06/26] props cleanup --- .../GlobalNavigation.stories.tsx | 15 +++++++++++++-- .../GlobalNavigation/GlobalNavigation.tsx | 11 +++++------ .../GlobalNavigation/GlobalNavigationItems.d.ts | 16 +++++++++++++++- 3 files changed, 33 insertions(+), 9 deletions(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index ac6a19d39..a1fdb9d15 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -475,7 +475,18 @@ export const MP: Story = { tools: mpTools, management: mpManagement, orgs: mpOrgs, - minimapOptions: { overviewHref: '/', show: true }, + minimapOptions: { + overviewHref: '/', + show: true, + 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 }, + ], + }, onMpHomeClick: () => { alert('going to overview map') }, @@ -500,7 +511,7 @@ export const MPThousandOrgs: Story = { tools={mpTools} management={mpManagement} orgs={thousandOrgs} - minimapOptions={{ overviewHref: '/' }} + minimapOptions={{ show: false }} onMpHomeClick={() => { alert('going to overview map') }} diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx index 77b32ffb9..1bb515a81 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx @@ -15,7 +15,10 @@ import { NavigationSearch } from 'src/components/navigation/GlobalNavigation/Nav import { NavigationList } from 'src/components/navigation/GlobalNavigation/NavigationList' import { NavigationCreate } from 'src/components/navigation/GlobalNavigation/NavigationCreate' import { WorkspaceSelector } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector' -import { type IGlobalNavigationItem } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' +import { + type IGlobalNavigationItem, + IMinimapOptions, +} from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' import { NavigationItem } from 'src/components/navigation/GlobalNavigation/NavigationItem' import { useNewExperienceReminder } from 'src/hooks/NewExperienceReminder/useNewExperienceReminder' import { HomeButton } from 'src/components/navigation/GlobalNavigation/HomeButton' @@ -37,11 +40,7 @@ export interface IGlobalNavigationProps { onClick: () => void withoutContainer?: boolean } - minimapOptions: { - overviewHref?: string - show?: boolean - routes: ISvgLink[] - } + minimapOptions: IMinimapOptions } export const GlobalNavWidth = 90 as const diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts index bd074d2ed..1d9243818 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts +++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts @@ -1,6 +1,6 @@ import type { ReactNode, type MouseEvent } from 'react' import { type HrefOptions } from 'src/utils/utils' - +import { ISvgLink } from 'src/components/navigation/MiniMap/SvgLinker' export interface IBaseGlobalNavigationItem { type?: 'menu' | 'link' label: ReactNode @@ -28,3 +28,17 @@ export interface IGlobalNavigationLink extends IBaseGlobalNavigationItem { } export type IGlobalNavigationItem = IGlobalNavigationMenu | IGlobalNavigationLink + +interface IMinimapOptionsShow { + show: true + overviewHref: string + routes: ISvgLink[] +} + +interface IMinimapOptionsHide { + show: false + overviewHref: undefined + routes: [] +} + +export type IMinimapOptions = IMinimapOptionsShow | IMinimapOptionsHide From 15b336c7a3bc615d118dc839c985738ba17ea128 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 27 May 2024 16:46:55 +0200 Subject: [PATCH 07/26] remove the show prop. only show or hide the minimap depening on if it has the minimap options --- .../GlobalNavigation.stories.tsx | 4 +--- .../GlobalNavigation/GlobalNavigation.tsx | 2 +- .../GlobalNavigationItems.d.ts | 16 ++-------------- .../navigation/GlobalNavigation/HomeButton.tsx | 18 +++++++++--------- 4 files changed, 13 insertions(+), 27 deletions(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index a1fdb9d15..831100c8b 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -143,7 +143,7 @@ const meta: Meta = { { elementId: 'analytics', route: '/analytics', isAuthorized: true }, { elementId: 'segmentation', route: '/segmentation', isAuthorized: false }, ], - show: true, + overviewHref: '#', }, }, } @@ -477,7 +477,6 @@ export const MP: Story = { orgs: mpOrgs, minimapOptions: { overviewHref: '/', - show: true, routes: [ { elementId: 'oversight', route: '/oversight', isAuthorized: true }, { elementId: 'dataPlatform', route: '/data-platform', isAuthorized: false }, @@ -511,7 +510,6 @@ export const MPThousandOrgs: Story = { tools={mpTools} management={mpManagement} orgs={thousandOrgs} - minimapOptions={{ show: false }} onMpHomeClick={() => { alert('going to overview map') }} diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx index 1bb515a81..76292b76f 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx @@ -40,7 +40,7 @@ export interface IGlobalNavigationProps { onClick: () => void withoutContainer?: boolean } - minimapOptions: IMinimapOptions + minimapOptions?: IMinimapOptions } export const GlobalNavWidth = 90 as const diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts index 1d9243818..b57943e05 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts +++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts @@ -23,22 +23,10 @@ export interface IGlobalNavigationLink extends IBaseGlobalNavigationItem { label: ReactNode hrefOptions?: HrefOptions hideLabel?: boolean - onClick?: (e: MouseEvent) => void + onClick?: (e: MouseEvent) => voida buttonOptions?: { onClick?: () => void; href?: string; target?: '_self' | '_blank' } } export type IGlobalNavigationItem = IGlobalNavigationMenu | IGlobalNavigationLink -interface IMinimapOptionsShow { - show: true - overviewHref: string - routes: ISvgLink[] -} - -interface IMinimapOptionsHide { - show: false - overviewHref: undefined - routes: [] -} - -export type IMinimapOptions = IMinimapOptionsShow | IMinimapOptionsHide +export type IMinimapOptions = { overviewHref: string; routes: ISvgLink[] } diff --git a/src/components/navigation/GlobalNavigation/HomeButton.tsx b/src/components/navigation/GlobalNavigation/HomeButton.tsx index 45cbc2e13..5ad1fbd56 100644 --- a/src/components/navigation/GlobalNavigation/HomeButton.tsx +++ b/src/components/navigation/GlobalNavigation/HomeButton.tsx @@ -1,7 +1,8 @@ import React from 'react' -import { Center, IGlobalNavigationProps, Icon, Popover, Tooltip } from 'src/components' +import { Center, Icon, Popover, Tooltip } from 'src/components' import MiniMap from 'src/components/navigation/MiniMap/MiniMap' import { ISvgLink } from 'src/components/navigation/MiniMap/SvgLinker' +import { IMinimapOptions } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' interface MpHomeButtonProps { onClick: () => void @@ -18,13 +19,10 @@ interface TooltipWithButtonProps { } interface HomeButtonProps { - minimapOptions: { - overviewHref?: string - show?: boolean - routes: ISvgLink[] - } + minimapOptions?: IMinimapOptions onMpHomeClick: () => void } + const MpHomeButton: React.FC = ({ onClick }) => (
@@ -47,11 +45,13 @@ const TooltipWithButton: React.FC = ({ onClick }) => ( ) export const HomeButton: React.FC = props => { - return props.minimapOptions?.show ? ( + const { minimapOptions } = props + + return minimapOptions ? ( ) : ( From 4aca9b536d28f892f8c796e4aa3d685041fdb834 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 27 May 2024 17:01:47 +0200 Subject: [PATCH 08/26] fix TS issue --- .../GlobalNavigation/GlobalNavigation.stories.tsx | 11 ----------- .../navigation/GlobalNavigation/HomeButton.tsx | 12 +++++++----- 2 files changed, 7 insertions(+), 16 deletions(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index 831100c8b..521e27ee3 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -134,17 +134,6 @@ const meta: Meta = { onMpHomeClick: () => { 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 }, - ], - overviewHref: '#', - }, }, } export default meta diff --git a/src/components/navigation/GlobalNavigation/HomeButton.tsx b/src/components/navigation/GlobalNavigation/HomeButton.tsx index 5ad1fbd56..756920216 100644 --- a/src/components/navigation/GlobalNavigation/HomeButton.tsx +++ b/src/components/navigation/GlobalNavigation/HomeButton.tsx @@ -45,15 +45,17 @@ const TooltipWithButton: React.FC = ({ onClick }) => ( ) export const HomeButton: React.FC = props => { - const { minimapOptions } = props + const { minimapOptions, onMpHomeClick } = props - return minimapOptions ? ( + if (!minimapOptions) { + return + } + + return ( - ) : ( - ) } From 239420793367462ec230653d4a0e9dc2258ffde4 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Mon, 27 May 2024 18:18:04 +0200 Subject: [PATCH 09/26] add handle click --- .../GlobalNavigation.stories.tsx | 4 +--- .../GlobalNavigation/GlobalNavigationItems.d.ts | 4 ++-- .../navigation/GlobalNavigation/HomeButton.tsx | 7 +++++-- src/components/navigation/MiniMap/MiniMap.tsx | 16 ++-------------- src/components/navigation/MiniMap/SvgLinker.tsx | 9 +++++++-- 5 files changed, 17 insertions(+), 23 deletions(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index cc571b73a..6f8aedcf3 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -485,6 +485,7 @@ export const MP: Story = { orgs: mpOrgs, minimapOptions: { overviewHref: '/', + handleLinkClick: string => alert(string), routes: [ { elementId: 'oversight', route: '/oversight', isAuthorized: true }, { elementId: 'dataPlatform', route: '/data-platform', isAuthorized: false }, @@ -1101,7 +1102,6 @@ export const MPWithoutLogo: Story = { tools: mpTools, management: mpManagement, orgs: mpOrgs, - minimapOptions: { overviewHref: '/', show: true }, onMpHomeClick: () => { alert('going to overview map') }, @@ -1122,7 +1122,6 @@ export const MPWithBackgroundLogo: Story = { tools: mpTools, management: mpManagement, orgs: mpOrgs, - minimapOptions: { overviewHref: '/', show: true }, onMpHomeClick: () => { alert('going to overview map') }, @@ -1143,7 +1142,6 @@ export const MPWithoutCustomSizeLogo: Story = { tools: mpTools, management: mpManagement, orgs: mpOrgs, - minimapOptions: { overviewHref: '/', show: true }, onMpHomeClick: () => { alert('going to overview map') }, diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts index 21871f5dc..a73cbba94 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts +++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts @@ -27,10 +27,10 @@ export interface IGlobalNavigationLink extends IBaseGlobalNavigationItem { label: ReactNode hrefOptions?: HrefOptions hideLabel?: boolean - onClick?: (e: MouseEvent) => voida + onClick?: (e: MouseEvent) => void buttonOptions?: { onClick?: () => void; href?: string; target?: '_self' | '_blank' } } export type IGlobalNavigationItem = IGlobalNavigationMenu | IGlobalNavigationLink -export type IMinimapOptions = { overviewHref: string; routes: ISvgLink[] } +export type IMinimapOptions = { overviewHref: string; routes: ISvgLink[]; handleLinkClick: (route: string) => void } diff --git a/src/components/navigation/GlobalNavigation/HomeButton.tsx b/src/components/navigation/GlobalNavigation/HomeButton.tsx index 7b6349ec0..08e3f1783 100644 --- a/src/components/navigation/GlobalNavigation/HomeButton.tsx +++ b/src/components/navigation/GlobalNavigation/HomeButton.tsx @@ -12,6 +12,7 @@ interface MinimapWithPopoverProps { overviewHref: string onClick: () => void routes: ISvgLink[] + handleLinkClick: (route: string) => void } interface TooltipWithButtonProps { @@ -29,9 +30,9 @@ const MpHomeButton: React.FC = ({ onClick }) => (
) -const MinimapWithPopover: React.FC = ({ overviewHref, onClick, routes }) => ( +const MinimapWithPopover: React.FC = ({ overviewHref, onClick, routes, handleLinkClick }) => ( } + content={() => } placement="rightBottom" arrow={false}> @@ -56,5 +57,7 @@ export const HomeButton: React.FC = props => { overviewHref={minimapOptions.overviewHref} onClick={onMpHomeClick} routes={minimapOptions.routes} + handleLinkClick={minimapOptions.handleLinkClick} /> + ) } diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx index b7c0d38b6..c88b0b2ec 100644 --- a/src/components/navigation/MiniMap/MiniMap.tsx +++ b/src/components/navigation/MiniMap/MiniMap.tsx @@ -421,22 +421,10 @@ const minimap = ( export interface IMinimapProps { overviewHref: string routes: { elementId: string; route: string; isAuthorized: boolean }[] + handleLinkClick: (route: string) => void } -const isAuthorizedRoute = (route: string): boolean => { - const authorizedRoutes = ['/path1', '/path2', '/path3', '/path4', '/path5', '/path6'] - return authorizedRoutes.includes(route) -} - -const Minimap: React.FC = ({ overviewHref, routes }) => { - const handleLinkClick = (route: string) => { - if (isAuthorizedRoute(route)) { - // manejar ruta autorizada - } else { - alert('No estás autorizado para acceder a esta página.') - } - } - +const Minimap: React.FC = ({ overviewHref, routes, handleLinkClick }) => { const linkMap: { [key: string]: string } = { oversight: 'OversightBtn', dataPlatform: 'DataPlatformBtn', diff --git a/src/components/navigation/MiniMap/SvgLinker.tsx b/src/components/navigation/MiniMap/SvgLinker.tsx index da83a20f0..761184139 100644 --- a/src/components/navigation/MiniMap/SvgLinker.tsx +++ b/src/components/navigation/MiniMap/SvgLinker.tsx @@ -22,10 +22,15 @@ export const SvgLinker: React.FC = ({ buttons, children, onLink const href = target.closest('a')?.getAttribute('href') if (href) { const route = href.substring(1) - onLinkClick(route) + const button = buttons.find(b => b.route === route) + if (button?.isAuthorized) { + onLinkClick(route) + } else { + alert('You are not authorized to access this page.') + } } }, - [onLinkClick], + [buttons, onLinkClick], ) const wrapButtonsIntoLinks = (parent: React.ReactNode): React.ReactNode => { From aaa65f9ed7e710e74c2c462f18721af5b56b021f Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Tue, 28 May 2024 21:59:08 +0200 Subject: [PATCH 10/26] clean up code --- .../GlobalNavigation.stories.tsx | 17 +- .../GlobalNavigation/GlobalNavigation.tsx | 3 +- .../GlobalNavigationItems.d.ts | 7 +- .../GlobalNavigation/HomeButton.tsx | 85 ++-- src/components/navigation/MiniMap/MiniMap.tsx | 435 +----------------- .../navigation/MiniMap/SvgLinker.tsx | 124 +++-- src/components/navigation/MiniMap/miniMap.css | 3 +- .../navigation/MiniMap/minimap-svg.tsx | 413 +++++++++++++++++ 8 files changed, 547 insertions(+), 540 deletions(-) create mode 100644 src/components/navigation/MiniMap/minimap-svg.tsx diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index 6f8aedcf3..7ed7a58cc 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -485,14 +485,15 @@ export const MP: Story = { orgs: mpOrgs, minimapOptions: { overviewHref: '/', - handleLinkClick: string => alert(string), - 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 }, + onLinkClick: route => console.log(route), + unauthorizedButtons: ['oversight', 'dataPlatform'], + links: [ + { elementId: 'oversight', link: '/oversight' }, + { elementId: 'dataPlatform', link: '/data-platform' }, + { elementId: 'customer360', link: '/customer-360' }, + { elementId: 'predictions', link: '/predictions' }, + { elementId: 'analytics', link: '/analytics' }, + { elementId: 'segmentation', link: '/segmentation' }, ], }, onMpHomeClick: () => { diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx index cf27103af..68c5d939a 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx @@ -17,12 +17,11 @@ import { NavigationCreate } from 'src/components/navigation/GlobalNavigation/Nav import { WorkspaceSelector } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector' import { type IGlobalNavigationItem, - IMinimapOptions, + type IMinimapOptions, } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' 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 diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts index a73cbba94..ffa0e1543 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts +++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts @@ -33,4 +33,9 @@ export interface IGlobalNavigationLink extends IBaseGlobalNavigationItem { export type IGlobalNavigationItem = IGlobalNavigationMenu | IGlobalNavigationLink -export type IMinimapOptions = { overviewHref: string; routes: ISvgLink[]; handleLinkClick: (route: string) => void } +export interface IMinimapOptions { + overviewHref: string + links: ISvgLink[] + onLinkClick: (link: string) => void + unauthorizedButtons: string[] +} diff --git a/src/components/navigation/GlobalNavigation/HomeButton.tsx b/src/components/navigation/GlobalNavigation/HomeButton.tsx index 08e3f1783..26d5443be 100644 --- a/src/components/navigation/GlobalNavigation/HomeButton.tsx +++ b/src/components/navigation/GlobalNavigation/HomeButton.tsx @@ -1,22 +1,18 @@ import React from 'react' import { Center, Icon, Popover, Tooltip } from 'src/components' import MiniMap from 'src/components/navigation/MiniMap/MiniMap' -import { ISvgLink } from 'src/components/navigation/MiniMap/SvgLinker' import { IMinimapOptions } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' interface MpHomeButtonProps { onClick: () => void } -interface MinimapWithPopoverProps { - overviewHref: string - onClick: () => void - routes: ISvgLink[] - handleLinkClick: (route: string) => void +interface MinimapWithPopoverProps extends IMinimapOptions { + onPopoverClick: () => void } interface TooltipWithButtonProps { - onClick: () => void + onTooltipClick: () => void } interface HomeButtonProps { @@ -24,40 +20,55 @@ interface HomeButtonProps { onMpHomeClick: () => void } -const MpHomeButton: React.FC = ({ onClick }) => ( -
- -
-) - -const MinimapWithPopover: React.FC = ({ overviewHref, onClick, routes, handleLinkClick }) => ( - } - placement="rightBottom" - arrow={false}> - - -) - -const TooltipWithButton: React.FC = ({ onClick }) => ( - - - -) - -export const HomeButton: React.FC = props => { - const { minimapOptions, onMpHomeClick } = props - - if (!minimapOptions) { - return +function MpHomeButton(props: MpHomeButtonProps) { + return ( +
+ +
+ ) +} + +function MinimapWithPopover(props: MinimapWithPopoverProps) { + console.log(props, 'props') + return ( + ( + + )} + placement="rightBottom" + arrow={false}> + + + ) +} + +function TooltipWithButton(props: TooltipWithButtonProps) { + return ( + + + + ) +} + +export function HomeButton(props: HomeButtonProps) { + if (!props.minimapOptions) { + return } + console.log(props.minimapOptions, 'minimap options') + return ( ) } diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx index c88b0b2ec..f6e6d3f92 100644 --- a/src/components/navigation/MiniMap/MiniMap.tsx +++ b/src/components/navigation/MiniMap/MiniMap.tsx @@ -3,428 +3,21 @@ 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 MiniMapSvg from './miniMap.svg?react' +import { minimap } from './minimap-svg' import { Flex } from 'src/components/layout/Flex/Flex' import { ISvgLink, SvgLinker } from 'src/components/navigation/MiniMap/SvgLinker' -const minimap = ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -) -export interface IMinimapProps { +interface IMinimapOptions { overviewHref: string - routes: { elementId: string; route: string; isAuthorized: boolean }[] - handleLinkClick: (route: string) => void + links: ISvgLink[] + onLinkClick: (link: string) => void } -const Minimap: React.FC = ({ overviewHref, routes, handleLinkClick }) => { +interface IMinimapProps extends IMinimapOptions { + unauthorizedButtons: string[] +} + +const Minimap = ({ overviewHref, unauthorizedButtons, links, onLinkClick }: IMinimapProps) => { const linkMap: { [key: string]: string } = { oversight: 'OversightBtn', dataPlatform: 'DataPlatformBtn', @@ -434,11 +27,9 @@ const Minimap: React.FC = ({ overviewHref, routes, handleLinkClic segmentation: 'SegmentationBtn', } - const buttonsWithRoutes: ISvgLink[] = routes.map(route => ({ - elementId: linkMap[route.elementId] || route.elementId, - route: route.route, - variant: 'drop-shadow', - isAuthorized: route.isAuthorized, + const linksWithRoutes: ISvgLink[] = links.map(link => ({ + ...link, + linkId: linkMap[link.elementId], })) return ( @@ -449,7 +40,7 @@ const Minimap: React.FC = ({ overviewHref, routes, handleLinkClic - + {minimap} diff --git a/src/components/navigation/MiniMap/SvgLinker.tsx b/src/components/navigation/MiniMap/SvgLinker.tsx index 761184139..e3bc66ed2 100644 --- a/src/components/navigation/MiniMap/SvgLinker.tsx +++ b/src/components/navigation/MiniMap/SvgLinker.tsx @@ -1,90 +1,76 @@ -import React, { Children, ReactElement, useCallback } from 'react' +import React, { Children, ReactElement } from 'react' import './miniMap.css' export interface ISvgLink { elementId: string - route: string - isAuthorized: boolean + link: string variant?: 'regular' | 'black' | 'drop-shadow' } +interface ISvgLinkComplete extends ISvgLink { + linkId: string +} interface ISvgLinkerProps { - buttons: ISvgLink[] + links: ISvgLinkComplete[] children: React.ReactNode - onLinkClick: (route: string) => void + onLinkClick: (link: string) => void + unauthorizedButtons: string[] } -export const SvgLinker: React.FC = ({ buttons, children, onLinkClick }) => { - const handleContainerClick = useCallback( - (e: React.MouseEvent) => { - e.preventDefault() - const target = e.target as HTMLElement - const href = target.closest('a')?.getAttribute('href') - if (href) { - const route = href.substring(1) - const button = buttons.find(b => b.route === route) - if (button?.isAuthorized) { - onLinkClick(route) - } else { - alert('You are not authorized to access this page.') - } - } - }, - [buttons, onLinkClick], - ) +export const SvgLinker = ({ links, children, onLinkClick, unauthorizedButtons = [] }: ISvgLinkerProps) => { + const handleContainerClick = (e: React.MouseEvent) => { + e.preventDefault() + const target = e.target as HTMLElement + const href = target.closest('a')?.getAttribute('href') + if (href) { + const link = href.substring(1) + handleLinkClick(link) + } + } + + return
{wrapButtonsIntoLinks(children)}
+ + function handleLinkClick(link: string) { + const button = links.find(b => b.link === link) + if (button && !unauthorizedButtons.includes(button.elementId)) { + onLinkClick(link) + } + } - const wrapButtonsIntoLinks = (parent: React.ReactNode): React.ReactNode => { + function wrapButtonsIntoLinks(parent: React.ReactNode): React.ReactNode { const wrapElement = (element: ReactElement): ReactElement => { - if (element.type === 'svg') { - const wrappedSvgContent = Children.map(element.props.children, child => { - if (!React.isValidElement(child)) return child - return wrapElement(child) - }) + const { id, children } = element.props + const button = id && links.find(b => b.linkId === id) - return React.cloneElement(element, { children: wrappedSvgContent }) - } else { - const id = element.props.id - if (id) { - const button = buttons.find(b => b.elementId === id) - if (button) { - return ( - { - e.preventDefault() - if (button.isAuthorized) { - onLinkClick(button.route) - } else { - alert('You are not authorized to access this page.') - } - }}> - {element} - - ) - } - } - if (element.props.children) { - const wrappedChildren = Children.map(element.props.children, child => { - if (!React.isValidElement(child)) return child - return wrapElement(child) - }) - return React.cloneElement(element, { children: wrappedChildren }) - } - return element + if (button) { + const isUnauthorized = unauthorizedButtons.includes(button.elementId) + const className = `svg-linker-root__button svg-linker-root__button--${button.variant}${ + isUnauthorized ? 'svg-linker-root__button--disabled' : '' + }` + + return ( + { + e.preventDefault() + handleLinkClick(button.link) + }}> + {element} + + ) } + + const wrappedChildren = Children.map(children, child => + React.isValidElement(child) ? wrapElement(child as ReactElement) : child, + ) + + return React.cloneElement(element, { children: wrappedChildren }) } - return Children.map(parent, child => { - if (!React.isValidElement(child)) return child - return wrapElement(child as ReactElement) - }) + return Children.map(parent, child => (React.isValidElement(child) ? wrapElement(child as ReactElement) : child)) } - - return
{wrapButtonsIntoLinks(children)}
} export default SvgLinker diff --git a/src/components/navigation/MiniMap/miniMap.css b/src/components/navigation/MiniMap/miniMap.css index afdf3f8c2..b0bc5c2cb 100644 --- a/src/components/navigation/MiniMap/miniMap.css +++ b/src/components/navigation/MiniMap/miniMap.css @@ -2,8 +2,9 @@ padding: var(--padding-sm); } -.svg-linker-root__button.svg-linker-root__button--disabled { +.svg-linker-root__button .svg-linker-root__button--disabled { cursor: default; + background-color: #2c00aa; &.svg-linker-root__button--regular { & rect:first-child { diff --git a/src/components/navigation/MiniMap/minimap-svg.tsx b/src/components/navigation/MiniMap/minimap-svg.tsx new file mode 100644 index 000000000..0666e85b3 --- /dev/null +++ b/src/components/navigation/MiniMap/minimap-svg.tsx @@ -0,0 +1,413 @@ +import React from 'react' + +export const minimap = ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) From db04989a40a87a17ffb5283a330e36400b64480a Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Wed, 29 May 2024 12:41:34 +0200 Subject: [PATCH 11/26] update svg to remove warnings, cleanup --- .../GlobalNavigation/HomeButton.tsx | 1 + src/components/navigation/MiniMap/MiniMap.tsx | 1 + src/components/navigation/MiniMap/miniMap.css | 8 +- .../navigation/MiniMap/minimap-svg.tsx | 84 +++++++++---------- 4 files changed, 43 insertions(+), 51 deletions(-) diff --git a/src/components/navigation/GlobalNavigation/HomeButton.tsx b/src/components/navigation/GlobalNavigation/HomeButton.tsx index 26d5443be..958be13bc 100644 --- a/src/components/navigation/GlobalNavigation/HomeButton.tsx +++ b/src/components/navigation/GlobalNavigation/HomeButton.tsx @@ -32,6 +32,7 @@ function MinimapWithPopover(props: MinimapWithPopoverProps) { console.log(props, 'props') return ( ( ({ ...link, linkId: linkMap[link.elementId], + variant: 'drop-shadow', })) return ( diff --git a/src/components/navigation/MiniMap/miniMap.css b/src/components/navigation/MiniMap/miniMap.css index b0bc5c2cb..5efbf2e98 100644 --- a/src/components/navigation/MiniMap/miniMap.css +++ b/src/components/navigation/MiniMap/miniMap.css @@ -1,11 +1,9 @@ -.minimap_container{ +.minimap_container { padding: var(--padding-sm); } -.svg-linker-root__button .svg-linker-root__button--disabled { +.svg-linker-root__button.svg-linker-root__button--disabled { cursor: default; - background-color: #2c00aa; - &.svg-linker-root__button--regular { & rect:first-child { fill: transparent; @@ -60,4 +58,4 @@ &.svg-linker-root__button--black:hover rect:first-child { fill: var(--mp-brand-secondary-7); } -} \ No newline at end of file +} diff --git a/src/components/navigation/MiniMap/minimap-svg.tsx b/src/components/navigation/MiniMap/minimap-svg.tsx index 0666e85b3..6368e36bf 100644 --- a/src/components/navigation/MiniMap/minimap-svg.tsx +++ b/src/components/navigation/MiniMap/minimap-svg.tsx @@ -2,28 +2,20 @@ import React from 'react' export const minimap = ( - + - + - + - + @@ -58,7 +50,7 @@ export const minimap = ( /> - + - + - - + +
{wrapButtonsIntoLinks(children)}
+ return
{wrapButtonsIntoLinks(props.children)}
function handleLinkClick(link: string) { - const button = links.find(b => b.link === link) - if (button && !unauthorizedButtons.includes(button.elementId)) { - onLinkClick(link) + const button = props.links.find(b => b.link === link) + if (button && !props.unauthorizedButtons.includes(button.elementId)) { + props.onLinkClick(link) } } function wrapButtonsIntoLinks(parent: React.ReactNode): React.ReactNode { const wrapElement = (element: ReactElement): ReactElement => { const { id, children } = element.props - const button = id && links.find(b => b.linkId === id) + const button = id && props.links.find(b => b.linkId === id) if (button) { - const isUnauthorized = unauthorizedButtons.includes(button.elementId) + const isUnauthorized = props.unauthorizedButtons.includes(button.elementId) const className = `svg-linker-root__button svg-linker-root__button--${button.variant}${ isUnauthorized ? ' svg-linker-root__button--disabled' : '' }` From ba828e80fb4535d2db4d0b6119e9efc3706d7805 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Wed, 29 May 2024 18:04:45 +0200 Subject: [PATCH 17/26] replace likn --- .../navigation/GlobalNavigation/GlobalNavigation.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index 7ed7a58cc..9f3a02f15 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -485,7 +485,7 @@ export const MP: Story = { orgs: mpOrgs, minimapOptions: { overviewHref: '/', - onLinkClick: route => console.log(route), + onLinkClick: link => alert(link), unauthorizedButtons: ['oversight', 'dataPlatform'], links: [ { elementId: 'oversight', link: '/oversight' }, From 4aea897c1d505d855d793655b4ac67ea4832823d Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Wed, 29 May 2024 23:37:56 +0200 Subject: [PATCH 18/26] update types --- .../GlobalNavigation.stories.tsx | 15 +++--- .../GlobalNavigationItems.d.ts | 14 ++++-- .../GlobalNavigation/HomeButton.tsx | 3 ++ src/components/navigation/MiniMap/MiniMap.tsx | 35 ++++++------- .../navigation/MiniMap/SvgLinker.tsx | 50 ++++++------------- 5 files changed, 51 insertions(+), 66 deletions(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index 9f3a02f15..80183ed2b 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -485,15 +485,16 @@ export const MP: Story = { orgs: mpOrgs, minimapOptions: { overviewHref: '/', - onLinkClick: link => alert(link), + onLinkClick: link => alert(link.href), + onUnAuthorizedClick: link => alert(`unauthorized ${link.href} `), unauthorizedButtons: ['oversight', 'dataPlatform'], links: [ - { elementId: 'oversight', link: '/oversight' }, - { elementId: 'dataPlatform', link: '/data-platform' }, - { elementId: 'customer360', link: '/customer-360' }, - { elementId: 'predictions', link: '/predictions' }, - { elementId: 'analytics', link: '/analytics' }, - { elementId: 'segmentation', link: '/segmentation' }, + { 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' }, ], }, onMpHomeClick: () => { diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts index ffa0e1543..5f58ca0ed 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts +++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts @@ -1,6 +1,5 @@ import type { ReactNode, type MouseEvent, ReactElement } from 'react' import { type HrefOptions } from 'src/utils/utils' -import { ISvgLink } from 'src/components/navigation/MiniMap/SvgLinker' import { Icons } from 'src/constants/Icons' export interface IBaseGlobalNavigationItem { @@ -33,9 +32,16 @@ export interface IGlobalNavigationLink extends IBaseGlobalNavigationItem { export type IGlobalNavigationItem = IGlobalNavigationMenu | IGlobalNavigationLink +export type MiniMapLinks = 'oversight' | 'dataPlatform' | 'customer360' | 'predictions' | 'analytics' | 'segmentation' +export type MiniMapLink = { + linkId: MiniMapLinks + href: string +} + export interface IMinimapOptions { overviewHref: string - links: ISvgLink[] - onLinkClick: (link: string) => void - unauthorizedButtons: string[] + links: MiniMapLink[] + onLinkClick: (link: MiniMapLink) => void + onUnAuthorizedClick: (link: MiniMapLink) => void + unauthorizedButtons: MiniMapLinks[] } diff --git a/src/components/navigation/GlobalNavigation/HomeButton.tsx b/src/components/navigation/GlobalNavigation/HomeButton.tsx index 5e5ede0f9..ea25f1e8b 100644 --- a/src/components/navigation/GlobalNavigation/HomeButton.tsx +++ b/src/components/navigation/GlobalNavigation/HomeButton.tsx @@ -31,9 +31,11 @@ function MpHomeButton(props: MpHomeButtonProps) { function MinimapWithPopover(props: MinimapWithPopoverProps) { return ( ( void -} - -interface IMinimapProps extends IMinimapOptions { - unauthorizedButtons: string[] -} +type IMiniMapProps = IMinimapOptions -const Minimap = (props: IMinimapProps) => { - const linkMap: { [key: string]: string } = { +const Minimap = (props: IMiniMapProps) => { + const elementIdMap: Record = { oversight: 'OversightBtn', dataPlatform: 'DataPlatformBtn', customer360: 'c360Btn', @@ -27,10 +20,11 @@ const Minimap = (props: IMinimapProps) => { segmentation: 'SegmentationBtn', } as const - const linksWithRoutes: ISvgLinkComplete[] = props.links.map(link => ({ - ...link, - linkId: linkMap[link.elementId], + const svgLinks: ISvgLink[] = props.links.map(link => ({ + elementId: elementIdMap[link.linkId], + href: link.href, variant: 'drop-shadow', + isUnAuthorized: props.unauthorizedButtons.includes(link.linkId), })) return ( @@ -41,16 +35,19 @@ const Minimap = (props: IMinimapProps) => { - + {minimap}
) + function handleLinkClick(svgLink: ISvgLink): void { + const miniMapLink = props.links.find(link => link.href === svgLink.href)! + + if (svgLink.isUnAuthorized) props.onUnAuthorizedClick(miniMapLink) + else props.onLinkClick(miniMapLink) + } } export default Minimap diff --git a/src/components/navigation/MiniMap/SvgLinker.tsx b/src/components/navigation/MiniMap/SvgLinker.tsx index 5f012cca3..cf92e9265 100644 --- a/src/components/navigation/MiniMap/SvgLinker.tsx +++ b/src/components/navigation/MiniMap/SvgLinker.tsx @@ -3,70 +3,48 @@ import './miniMap.css' export interface ISvgLink { elementId: string - link: string + href: string variant?: 'regular' | 'black' | 'drop-shadow' -} - -export interface ISvgLinkComplete extends ISvgLink { - linkId: string + isUnAuthorized?: boolean } interface ISvgLinkerProps { - links: ISvgLinkComplete[] + links: ISvgLink[] children: React.ReactNode - onLinkClick: (link: string) => void - unauthorizedButtons: string[] + onLinkClick: (link: ISvgLink) => void } export const SvgLinker = (props: ISvgLinkerProps) => { + console.log(props, 'props') const handleContainerClick = (e: React.MouseEvent) => { e.preventDefault() const target = e.target as HTMLElement const href = target.closest('a')?.getAttribute('href') - if (href) { - const link = href.substring(1) - handleLinkClick(link) - } + const link = props.links.find(b => b.href === href) + + if (link) props.onLinkClick(link) } return
{wrapButtonsIntoLinks(props.children)}
- function handleLinkClick(link: string) { - const button = props.links.find(b => b.link === link) - if (button && !props.unauthorizedButtons.includes(button.elementId)) { - props.onLinkClick(link) - } - } - function wrapButtonsIntoLinks(parent: React.ReactNode): React.ReactNode { const wrapElement = (element: ReactElement): ReactElement => { const { id, children } = element.props - const button = id && props.links.find(b => b.linkId === id) + const link = props.links.find(b => b.elementId === id) - if (button) { - const isUnauthorized = props.unauthorizedButtons.includes(button.elementId) - const className = `svg-linker-root__button svg-linker-root__button--${button.variant}${ - isUnauthorized ? ' svg-linker-root__button--disabled' : '' + if (link) { + const className = `svg-linker-root__button svg-linker-root__button--${link.variant}${ + link.isUnAuthorized ? ' svg-linker-root__button--disabled' : '' }` return ( - { - e.preventDefault() - e.stopPropagation() - handleLinkClick(button.link) - }}> + {element} ) } - const wrappedChildren = Children.map(children, child => - React.isValidElement(child) ? wrapElement(child as ReactElement) : child, - ) + const wrappedChildren = wrapButtonsIntoLinks(children) return React.cloneElement(element, { children: wrappedChildren }) } From 77441f61c5b1f5a0c173f71e73684928cde9f4f6 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Thu, 30 May 2024 12:40:31 +0200 Subject: [PATCH 19/26] replace clone element for create element (performance) --- src/components/navigation/MiniMap/SvgLinker.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/navigation/MiniMap/SvgLinker.tsx b/src/components/navigation/MiniMap/SvgLinker.tsx index cf92e9265..e9dadc640 100644 --- a/src/components/navigation/MiniMap/SvgLinker.tsx +++ b/src/components/navigation/MiniMap/SvgLinker.tsx @@ -15,7 +15,6 @@ interface ISvgLinkerProps { } export const SvgLinker = (props: ISvgLinkerProps) => { - console.log(props, 'props') const handleContainerClick = (e: React.MouseEvent) => { e.preventDefault() const target = e.target as HTMLElement @@ -46,7 +45,7 @@ export const SvgLinker = (props: ISvgLinkerProps) => { const wrappedChildren = wrapButtonsIntoLinks(children) - return React.cloneElement(element, { children: wrappedChildren }) + return React.createElement(element.type, { ...element.props, children: wrappedChildren }) } return Children.map(parent, child => (React.isValidElement(child) ? wrapElement(child as ReactElement) : child)) From 633ae5f16433df7dba3895dd9ca25f888da18b64 Mon Sep 17 00:00:00 2001 From: mparticle-automation Date: Thu, 30 May 2024 10:43:24 +0000 Subject: [PATCH 20/26] chore(release): 1.15.1-minimap-linker.1 [skip ci] ## [1.15.1-minimap-linker.1](https://github.com/mParticle/aquarium/compare/v1.15.0...v1.15.1-minimap-linker.1) (2024-05-30) --- CHANGELOG.md | 2 ++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 547cf3e3c..991600a46 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,5 @@ +## [1.15.1-minimap-linker.1](https://github.com/mParticle/aquarium/compare/v1.15.0...v1.15.1-minimap-linker.1) (2024-05-30) + # [1.15.0](https://github.com/mParticle/aquarium/compare/v1.14.0...v1.15.0) (2024-05-24) diff --git a/package-lock.json b/package-lock.json index 507d2748a..6895e7bd2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@mparticle/aquarium", - "version": "1.15.0", + "version": "1.15.1-minimap-linker.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@mparticle/aquarium", - "version": "1.15.0", + "version": "1.15.1-minimap-linker.1", "license": "Apache-2.0", "dependencies": { "lodash.clonedeep": "4.5.0" diff --git a/package.json b/package.json index 8f580037a..b74a35765 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mparticle/aquarium", - "version": "1.15.0", + "version": "1.15.1-minimap-linker.1", "description": "mParticle Component Library", "license": "Apache-2.0", "keywords": [ From 381541e01dd987bb3418d1ec54d94ccbb32efec0 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Thu, 30 May 2024 14:41:44 +0200 Subject: [PATCH 21/26] rename unauthorized buttons to unautorhized links --- .../navigation/GlobalNavigation/GlobalNavigation.stories.tsx | 2 +- .../navigation/GlobalNavigation/GlobalNavigationItems.d.ts | 2 +- src/components/navigation/GlobalNavigation/HomeButton.tsx | 4 ++-- src/components/navigation/MiniMap/MiniMap.tsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index 80183ed2b..6df31237f 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -487,7 +487,7 @@ export const MP: Story = { overviewHref: '/', onLinkClick: link => alert(link.href), onUnAuthorizedClick: link => alert(`unauthorized ${link.href} `), - unauthorizedButtons: ['oversight', 'dataPlatform'], + unauthorizedLinks: ['oversight', 'dataPlatform'], links: [ { linkId: 'oversight', href: '/oversight' }, { linkId: 'dataPlatform', href: '/data-platform' }, diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts index 5f58ca0ed..417309d8a 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts +++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts @@ -43,5 +43,5 @@ export interface IMinimapOptions { links: MiniMapLink[] onLinkClick: (link: MiniMapLink) => void onUnAuthorizedClick: (link: MiniMapLink) => void - unauthorizedButtons: MiniMapLinks[] + unauthorizedLinks: MiniMapLinks[] } diff --git a/src/components/navigation/GlobalNavigation/HomeButton.tsx b/src/components/navigation/GlobalNavigation/HomeButton.tsx index ea25f1e8b..def61e88a 100644 --- a/src/components/navigation/GlobalNavigation/HomeButton.tsx +++ b/src/components/navigation/GlobalNavigation/HomeButton.tsx @@ -38,7 +38,7 @@ function MinimapWithPopover(props: MinimapWithPopoverProps) { onUnAuthorizedClick={props.onUnAuthorizedClick} links={props.links} onLinkClick={props.onLinkClick} - unauthorizedButtons={props.unauthorizedButtons} + unauthorizedLinks={props.unauthorizedLinks} /> )} placement="rightBottom" @@ -67,7 +67,7 @@ export function HomeButton(props: HomeButtonProps) { overviewHref={props.minimapOptions.overviewHref} links={props.minimapOptions.links} onLinkClick={props.minimapOptions.onLinkClick} - unauthorizedButtons={props.minimapOptions.unauthorizedButtons} + unauthorizedLinks={props.minimapOptions.unauthorizedLinks} onPopoverClick={props.onMpHomeClick} /> ) diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx index bd0d14462..85808db0c 100644 --- a/src/components/navigation/MiniMap/MiniMap.tsx +++ b/src/components/navigation/MiniMap/MiniMap.tsx @@ -24,7 +24,7 @@ const Minimap = (props: IMiniMapProps) => { elementId: elementIdMap[link.linkId], href: link.href, variant: 'drop-shadow', - isUnAuthorized: props.unauthorizedButtons.includes(link.linkId), + isUnAuthorized: props.unauthorizedLinks.includes(link.linkId), })) return ( From c8dd5ff43a2e64a10c01a666dee4b6fabc15a066 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Thu, 30 May 2024 14:48:25 +0200 Subject: [PATCH 22/26] remove open = true in the HomeButton.tsx --- src/components/navigation/GlobalNavigation/HomeButton.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/navigation/GlobalNavigation/HomeButton.tsx b/src/components/navigation/GlobalNavigation/HomeButton.tsx index def61e88a..cca7593c6 100644 --- a/src/components/navigation/GlobalNavigation/HomeButton.tsx +++ b/src/components/navigation/GlobalNavigation/HomeButton.tsx @@ -31,7 +31,6 @@ function MpHomeButton(props: MpHomeButtonProps) { function MinimapWithPopover(props: MinimapWithPopoverProps) { return ( ( Date: Thu, 30 May 2024 15:05:43 +0200 Subject: [PATCH 23/26] make parameter optional --- .../navigation/GlobalNavigation/GlobalNavigationItems.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts index 417309d8a..5523b7a51 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts +++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts @@ -42,6 +42,6 @@ export interface IMinimapOptions { overviewHref: string links: MiniMapLink[] onLinkClick: (link: MiniMapLink) => void - onUnAuthorizedClick: (link: MiniMapLink) => void + onUnAuthorizedClick: (link?: MiniMapLink) => void unauthorizedLinks: MiniMapLinks[] } From 50d54747e630529419cb590a308c4a39ef44245c Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Thu, 30 May 2024 16:41:19 +0200 Subject: [PATCH 24/26] update names --- .../navigation/GlobalNavigation/GlobalNavigation.tsx | 4 ++-- .../GlobalNavigation/GlobalNavigationItems.d.ts | 2 +- src/components/navigation/GlobalNavigation/HomeButton.tsx | 6 +++--- src/components/navigation/MiniMap/MiniMap.tsx | 8 ++++---- src/components/navigation/MiniMap/SvgLinker.tsx | 4 ++-- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx index 68c5d939a..a8adf9686 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.tsx @@ -17,7 +17,7 @@ import { NavigationCreate } from 'src/components/navigation/GlobalNavigation/Nav import { WorkspaceSelector } from 'src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector' import { type IGlobalNavigationItem, - type IMinimapOptions, + type IMiniMapOptions, } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' import { NavigationItem } from 'src/components/navigation/GlobalNavigation/NavigationItem' import { useNewExperienceReminder } from 'src/hooks/NewExperienceReminder/useNewExperienceReminder' @@ -40,7 +40,7 @@ export interface IGlobalNavigationProps { onClick: () => void withoutContainer?: boolean } - minimapOptions?: IMinimapOptions + minimapOptions?: IMiniMapOptions } export const GlobalNavWidth = 90 as const diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts index 5523b7a51..1ccd2b75a 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts +++ b/src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts @@ -38,7 +38,7 @@ export type MiniMapLink = { href: string } -export interface IMinimapOptions { +export interface IMiniMapOptions { overviewHref: string links: MiniMapLink[] onLinkClick: (link: MiniMapLink) => void diff --git a/src/components/navigation/GlobalNavigation/HomeButton.tsx b/src/components/navigation/GlobalNavigation/HomeButton.tsx index cca7593c6..d14dcbcb8 100644 --- a/src/components/navigation/GlobalNavigation/HomeButton.tsx +++ b/src/components/navigation/GlobalNavigation/HomeButton.tsx @@ -1,13 +1,13 @@ import React from 'react' import { Center, Icon, Popover, Tooltip } from 'src/components' import MiniMap from 'src/components/navigation/MiniMap/MiniMap' -import { IMinimapOptions } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' +import { IMiniMapOptions } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' interface MpHomeButtonProps { onClick: () => void } -interface MinimapWithPopoverProps extends IMinimapOptions { +interface MinimapWithPopoverProps extends IMiniMapOptions { onPopoverClick: () => void } @@ -16,7 +16,7 @@ interface TooltipWithButtonProps { } interface HomeButtonProps { - minimapOptions?: IMinimapOptions + minimapOptions?: IMiniMapOptions onMpHomeClick: () => void } diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx index 85808db0c..21a20887a 100644 --- a/src/components/navigation/MiniMap/MiniMap.tsx +++ b/src/components/navigation/MiniMap/MiniMap.tsx @@ -6,9 +6,9 @@ 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 { IMiniMapOptions, MiniMapLinks } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems' -type IMiniMapProps = IMinimapOptions +type IMiniMapProps = IMiniMapOptions const Minimap = (props: IMiniMapProps) => { const elementIdMap: Record = { @@ -24,7 +24,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), })) return ( @@ -45,7 +45,7 @@ const Minimap = (props: IMiniMapProps) => { function handleLinkClick(svgLink: ISvgLink): void { const miniMapLink = props.links.find(link => link.href === svgLink.href)! - if (svgLink.isUnAuthorized) props.onUnAuthorizedClick(miniMapLink) + if (svgLink.isUnauthorized) props.onUnAuthorizedClick(miniMapLink) else props.onLinkClick(miniMapLink) } } diff --git a/src/components/navigation/MiniMap/SvgLinker.tsx b/src/components/navigation/MiniMap/SvgLinker.tsx index e9dadc640..2c435147f 100644 --- a/src/components/navigation/MiniMap/SvgLinker.tsx +++ b/src/components/navigation/MiniMap/SvgLinker.tsx @@ -5,7 +5,7 @@ export interface ISvgLink { elementId: string href: string variant?: 'regular' | 'black' | 'drop-shadow' - isUnAuthorized?: boolean + isUnauthorized?: boolean } interface ISvgLinkerProps { @@ -33,7 +33,7 @@ export const SvgLinker = (props: ISvgLinkerProps) => { if (link) { const className = `svg-linker-root__button svg-linker-root__button--${link.variant}${ - link.isUnAuthorized ? ' svg-linker-root__button--disabled' : '' + link.isUnauthorized ? ' svg-linker-root__button--disabled' : '' }` return ( From 4a12d8d5c8e439240f410852dd010c9740e285bf Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Thu, 30 May 2024 16:44:17 +0200 Subject: [PATCH 25/26] fix ts errors --- .../navigation/GlobalNavigation/GlobalNavigation.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index 6df31237f..6eed680b8 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -486,7 +486,7 @@ export const MP: Story = { minimapOptions: { overviewHref: '/', onLinkClick: link => alert(link.href), - onUnAuthorizedClick: link => alert(`unauthorized ${link.href} `), + onUnAuthorizedClick: link => alert(`unauthorized ${link?.href} `), unauthorizedLinks: ['oversight', 'dataPlatform'], links: [ { linkId: 'oversight', href: '/oversight' }, From 1a2ff18d221c81660e2c8d1ee3bd71157591ae34 Mon Sep 17 00:00:00 2001 From: Gaby Zifferman Date: Thu, 30 May 2024 17:06:41 +0200 Subject: [PATCH 26/26] replace container class for utility class --- src/components/navigation/MiniMap/MiniMap.tsx | 2 +- src/components/navigation/MiniMap/miniMap.css | 4 ---- src/utils/utils.css | 4 ++++ 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/navigation/MiniMap/MiniMap.tsx b/src/components/navigation/MiniMap/MiniMap.tsx index 21a20887a..f2be439cc 100644 --- a/src/components/navigation/MiniMap/MiniMap.tsx +++ b/src/components/navigation/MiniMap/MiniMap.tsx @@ -29,7 +29,7 @@ const Minimap = (props: IMiniMapProps) => { return ( -
+
diff --git a/src/components/navigation/MiniMap/miniMap.css b/src/components/navigation/MiniMap/miniMap.css index 5efbf2e98..8efd9583d 100644 --- a/src/components/navigation/MiniMap/miniMap.css +++ b/src/components/navigation/MiniMap/miniMap.css @@ -1,7 +1,3 @@ -.minimap_container { - padding: var(--padding-sm); -} - .svg-linker-root__button.svg-linker-root__button--disabled { cursor: default; &.svg-linker-root__button--regular { diff --git a/src/utils/utils.css b/src/utils/utils.css index 5e8a7a9f0..e49aed216 100644 --- a/src/utils/utils.css +++ b/src/utils/utils.css @@ -8,4 +8,8 @@ .u-align-items-center { align-items: center !important; +} + +.u-padding-sm { + padding:var(--padding-sm) } \ No newline at end of file