[Tech] changes after code review

MTES-MCT · Sep 25, 2024 · 68c76e3 · 68c76e3
1 parent fff5586
commit 68c76e3
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 29 deletions.
diff --git a/frontend/src/components/CustomGlobalStyle.ts b/frontend/src/components/CustomGlobalStyle.ts
@@ -74,4 +74,8 @@ html {
       }
   }
 
+  h2 {
+    line-height: normal;
+  }
+
 `
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Accordion.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Accordion.tsx
@@ -12,7 +12,11 @@ type AccordionProps = {
 export function Accordion({ children, headerButton, isExpanded, setExpandedAccordion, title }: AccordionProps) {
   return (
     <AccordionContainer $withCursor={!headerButton}>
-      <AccordionHeader onClick={!headerButton ? setExpandedAccordion : undefined}>
+      <AccordionHeader
+        aria-controls={`${title}-accordion`}
+        aria-expanded={isExpanded}
+        onClick={!headerButton ? setExpandedAccordion : undefined}
+      >
         <TitleContainer>
           <Title>{title}</Title>
           {headerButton}
@@ -25,7 +29,9 @@ export function Accordion({ children, headerButton, isExpanded, setExpandedAccor
         />
       </AccordionHeader>
       <HeaderSeparator />
-      <AccordionContent $isExpanded={isExpanded}>{children}</AccordionContent>
+      <AccordionContent $isExpanded={isExpanded} id={`${title}-accordion`}>
+        {children}
+      </AccordionContent>
     </AccordionContainer>
   )
 }
@@ -48,7 +54,7 @@ const TitleContainer = styled.div`
   display: flex;
   gap: 16px;
 `
-const Title = styled.span`
+const Title = styled.h2`
   font-size: 16px;
   font-weight: 500;
 `

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/Panel.tsx b/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/Panel.tsx
@@ -15,7 +15,7 @@ import styled from 'styled-components'
 
 const FOUR_HOURS = 4 * 60 * 60 * 1000
 
-export function RegulatoryPanel({ $marginLeft, dashboardId }: { $marginLeft: number; dashboardId: number }) {
+export function RegulatoryPanel({ className, dashboardId }: { className: string; dashboardId: number }) {
   const dispatch = useAppDispatch()
   const openPanel = useAppSelector(state => state.dashboard.dashboards?.[dashboardId]?.openPanel)
 
@@ -38,7 +38,7 @@ export function RegulatoryPanel({ $marginLeft, dashboardId }: { $marginLeft: num
   }
 
   return (
-    <Wrapper $isOpen={!!openPanel} $marginLeft={$marginLeft}>
+    <Wrapper $isOpen={!!openPanel} className={className}>
       {regulatoryMetadata ? (
         <>
           <Header data-cy="regulatory-metadata-header">
@@ -74,16 +74,12 @@ export function RegulatoryPanel({ $marginLeft, dashboardId }: { $marginLeft: num
   )
 }
 
-const Wrapper = styled.div<{ $isOpen: boolean; $marginLeft: number }>`
+const Wrapper = styled.div<{ $isOpen: boolean }>`
   background-color: ${p => p.theme.color.white};
   box-shadow: 0px 3px 5px #70778540;
   position: absolute;
   width: 400px;
   z-index: 1;
-  left: ${p =>
-    `calc(
-    ${p.$marginLeft}px + 40px + 64px + 20px
-  )`}; // 40px is the padding, 64px is the width of the lsidebar, 20px is the margin
 `
 
 const RegulatoryZoneName = styled.span`

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx
@@ -3,31 +3,30 @@ import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.styl
 import { useAppSelector } from '@hooks/useAppSelector'
 import { pluralize } from '@mtes-mct/monitor-ui'
 import { groupBy } from 'lodash'
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 import styled from 'styled-components'
 
 import { ListLayerGroup } from './ListLayerGroup'
 import { RegulatoryPanel } from './Panel'
 import { Accordion } from '../Accordion'
-import { SmallAccordion } from '../SmallAccordion'
+import { SelectedAccordion } from '../SelectedAccordion'
 
 import type { RegulatoryLayerCompactFromAPI } from 'domain/entities/regulatory'
 
 type RegulatoriesAreasProps = {
+  columnWidth: number
   dashboardId: number
   isExpanded: boolean
   regulatoryAreas: RegulatoryLayerCompactFromAPI[] | undefined
   setExpandedAccordion: () => void
 }
 export function RegulatoryAreas({
+  columnWidth,
   dashboardId,
   isExpanded,
   regulatoryAreas,
   setExpandedAccordion
 }: RegulatoriesAreasProps) {
-  const ref = useRef<HTMLDivElement>(null)
-  const width = ref.current?.clientWidth
-
   const selectedLayerIds = useAppSelector(
     state => state.dashboard.dashboards?.[dashboardId]?.[Dashboard.Block.REGULATORY_AREAS]
   )
@@ -39,8 +38,8 @@ export function RegulatoryAreas({
   const selectedRegulatoryAreasByLayerName = groupBy(selectedRegulatoryAreaIds, r => r.layer_name)
 
   return (
-    <div ref={ref}>
-      <RegulatoryPanel $marginLeft={width ?? 0} dashboardId={dashboardId} />
+    <div>
+      <StyledPanel $marginLeft={columnWidth ?? 0} className="regulatory-panel" dashboardId={dashboardId} />
 
       <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Zones règlementaires">
         <StyledLayerList
@@ -62,7 +61,7 @@ export function RegulatoryAreas({
           })}
         </StyledLayerList>
       </Accordion>
-      <SmallAccordion
+      <SelectedAccordion
         isExpanded={isExpandedSmallAccordion}
         isReadOnly={selectedLayerIds?.length === 0}
         setExpandedAccordion={() => setExpandedSmallAccordion(!isExpandedSmallAccordion)}
@@ -84,11 +83,17 @@ export function RegulatoryAreas({
             />
           )
         })}
-      </SmallAccordion>
+      </SelectedAccordion>
     </div>
   )
 }
 
 const StyledLayerList = styled(LayerSelector.LayerList)`
   height: auto;
 `
+const StyledPanel = styled(RegulatoryPanel)<{ $marginLeft: number }>`
+  left: ${p =>
+    `calc(
+    ${p.$marginLeft}px + 40px + 64px
+  )`}; // 40px is the padding, 64px is the width of the sidebar
+`
diff --git a/...mponents/DashboardForm/SmallAccordion.tsx → ...nents/DashboardForm/SelectedAccordion.tsx b/...mponents/DashboardForm/SmallAccordion.tsx → ...nents/DashboardForm/SelectedAccordion.tsx
@@ -1,24 +1,28 @@
 import { Accent, Icon, IconButton } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
-type AccordionProps = {
+type SelectedAccordionProps = {
   children: React.ReactNode
   isExpanded: boolean
   isReadOnly?: boolean
   setExpandedAccordion: () => void
   title: string
 }
 
-export function SmallAccordion({
+export function SelectedAccordion({
   children,
   isExpanded,
   isReadOnly = false,
   setExpandedAccordion,
   title
-}: AccordionProps) {
+}: SelectedAccordionProps) {
   return (
     <AccordionContainer>
-      <AccordionHeader onClick={setExpandedAccordion}>
+      <AccordionHeader
+        aria-controls={`selected-${title}-accordion`}
+        aria-expanded={isExpanded}
+        onClick={setExpandedAccordion}
+      >
         <TitleContainer>
           <Title>{title}</Title>
         </TitleContainer>
@@ -31,15 +35,16 @@ export function SmallAccordion({
           />
         )}
       </AccordionHeader>
-      <AccordionContent $isExpanded={isExpanded}>{children}</AccordionContent>
+      <AccordionContent $isExpanded={isExpanded} id={`selected-${title}-accordion`}>
+        {children}
+      </AccordionContent>
     </AccordionContainer>
   )
 }
 
 const AccordionContainer = styled.div`
   background-color: ${p => p.theme.color.blueGray25};
   box-shadow: 0px 3px 6px #70778540;
-  cursor: pointer;
   padding-bottom: 4px;
 `
 const StyledIconButton = styled(IconButton)<{ $isExpanded: boolean }>`
@@ -48,6 +53,7 @@ const StyledIconButton = styled(IconButton)<{ $isExpanded: boolean }>`
 `
 const AccordionHeader = styled.header`
   color: ${p => p.theme.color.blueYonder};
+  cursor: pointer;
   display: flex;
   font-weight: 500;
   justify-content: space-between;

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/index.tsx
@@ -3,7 +3,7 @@ import { SideWindowContent } from '@features/SideWindow/style'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { Accent, Icon, IconButton } from '@mtes-mct/monitor-ui'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import styled from 'styled-components'
 
 import { Accordion } from './Accordion'
@@ -13,6 +13,9 @@ import { dashboardActions } from '../../slice'
 export function DashboardForm() {
   const extractedArea = useAppSelector(state => state.dashboard.extractedArea)
 
+  const firstColumnRef = useRef<HTMLDivElement>(null)
+  const firstColumnWidth = firstColumnRef.current?.clientWidth
+
   const dispatch = useAppDispatch()
   const dashboardId = 1 // TODO replace with real value
   const [expandedAccordionFirstColumn, setExpandedAccordionFirstColumn] = useState<Dashboard.Block | undefined>(
@@ -51,8 +54,9 @@ export function DashboardForm() {
 
   return (
     <Container>
-      <Column>
+      <Column ref={firstColumnRef}>
         <RegulatoryAreas
+          columnWidth={firstColumnWidth ?? 0}
           dashboardId={dashboardId}
           isExpanded={expandedAccordionFirstColumn === Dashboard.Block.REGULATORY_AREAS}
           regulatoryAreas={extractedArea?.regulatoryAreas}
@@ -162,9 +166,9 @@ const Column = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
+  gap: 16px;
   height: calc(100vh- 48px - 40px); // 48px = navbar height, 40px = padding
-  overflow-y: scroll;
+  overflow-y: auto;
   overflow-x: visible;
-  box-sizing: content-box;
   padding: 12px;
 `