[Dashboard] fix tooltip and control unit filters

MTES-MCT · Oct 14, 2024 · 815f2f9 · 815f2f9
1 parent 22dfe1d
commit 815f2f9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 26 deletions.
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/ControlUnits/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/ControlUnits/index.tsx
@@ -77,10 +77,12 @@ export function ControlUnits({
     dispatch(dashboardActions.setControlUnitsFilters({ key: 'type', value: nextValue }))
   }
 
+  const hasChildren = !!(controlUnitResults && controlUnitResults?.length > 5)
+
   return (
     <div>
       <Accordion isExpanded={isExpanded} setExpandedAccordion={setExpandedAccordion} title="Unités">
-        <Wrapper $hasChildren={!!(controlUnitResults && controlUnitResults?.length > 1)}>
+        <Wrapper $hasChildren={hasChildren}>
           <StyledTextInput
             Icon={Icon.Search}
             isLabelHidden
@@ -91,10 +93,7 @@ export function ControlUnits({
             placeholder="Rechercher une unité"
             value={filters?.query}
           />
-          <SelectFilters
-            $hasChildren={!!(controlUnitResults && controlUnitResults?.length > 1)}
-            $isExpanded={isExpanded}
-          >
+          <SelectFilters $hasChildren={hasChildren} $isExpanded={isExpanded}>
             <StyledSelect
               isLabelHidden
               isTransparent
@@ -130,13 +129,10 @@ export function ControlUnits({
               value={filters?.stationId}
             />
           </SelectFilters>
-          {controlUnitResults && controlUnitResults.length > 0 && (
-            <ResultList>
-              {controlUnitResults.map(controlUnit => (
-                <Item key={controlUnit.id} controlUnit={controlUnit} />
-              ))}
-            </ResultList>
-          )}
+          <ResultList $hasResults={hasChildren}>
+            {controlUnitResults &&
+              controlUnitResults.map(controlUnit => <Item key={controlUnit.id} controlUnit={controlUnit} />)}
+          </ResultList>
         </Wrapper>
       </Accordion>
       <SelectedControlUnits controlUnits={controlUnits} isSelectedAccordionOpen={isSelectedAccordionOpen} />
@@ -150,7 +146,6 @@ const Wrapper = styled.div<{ $hasChildren: boolean }>`
   flex-direction: column;
   gap: 16px;
   padding: 16px 24px;
-  ${({ $hasChildren }) => !$hasChildren && 'padding-bottom: 58px;'}
 `
 
 const StyledTextInput = styled(TextInput)`
@@ -179,11 +174,12 @@ const SelectFilters = styled.div<{ $hasChildren: boolean; $isExpanded: boolean }
     }}
   ${({ $hasChildren }) => !$hasChildren && 'position: absolute;  margin-top: 41px; width: 27%;'}
 `
-const ResultList = styled.ul`
+const ResultList = styled.ul<{ $hasResults: boolean }>`
   display: flex;
   flex-direction: column;
   gap: 8px;
   list-style-type: none;
   padding: 0px;
   width: 100%;
+  ${({ $hasResults }) => !$hasResults && 'margin-top: 37px;'}
 `
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/TerritorialPressure/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/TerritorialPressure/index.tsx
@@ -59,18 +59,20 @@ export function TerritorialPressure({ isExpanded, setExpandedAccordion }: Territ
   const department = useAppSelector(state => (activeDashboardId ? state.dashboard.extractedArea?.inseeCode : undefined))
 
   const titleWithTooltip = (
-    <TitleContainer ref={ref}>
+    <TitleContainer>
       <span>Pression territoriale des contrôles et surveillances</span>
       <>
-        <Icon.Info
-          aria-describedby="territorialPressureTooltip"
-          color={THEME.color.slateGray}
-          onBlur={() => setIsVisibleTooltip(false)}
-          onFocus={() => setIsVisibleTooltip(true)}
-          onMouseLeave={() => setIsVisibleTooltip(false)}
-          onMouseOver={() => setIsVisibleTooltip(true)}
-          tabIndex={0}
-        />
+        <div ref={ref}>
+          <Icon.Info
+            aria-describedby="territorialPressureTooltip"
+            color={THEME.color.slateGray}
+            onBlur={() => setIsVisibleTooltip(false)}
+            onFocus={() => setIsVisibleTooltip(true)}
+            onMouseLeave={() => setIsVisibleTooltip(false)}
+            onMouseOver={() => setIsVisibleTooltip(true)}
+            tabIndex={0}
+          />
+        </div>
         {isVisibleTooltip && (
           <StyledTooltip $marginLeft={refLeftPosition} id="territorialPressureTooltip" role="tooltip">
             Les liens suivants envoient vers des tableaux Metabase montrant la pression territoriale sur les zones REG,
@@ -145,7 +147,7 @@ const StyledTooltip = styled.p<{ $marginLeft: number }>`
   font-size: 11px;
   padding: 4px 8px;
   position: absolute;
-  left: calc(${p => p.$marginLeft}px + 40px + 310px + 16px);
+  left: calc(${p => p.$marginLeft}px + 30px);
   width: 310px;
   z-index: 2;
 `
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/index.tsx
@@ -202,6 +202,7 @@ const Container = styled(SideWindowContent)`
   // gap and padding are 3px less than the mockup because of box-shadow is hidden because of overflow @see AccordionWrapper
   column-gap: 45px;
   padding: 21px 21px 0 21px;
+  overflow: hidden;
 `
 
 const Column = styled.div`
@@ -211,7 +212,6 @@ const Column = styled.div`
   height: calc(100vh - 48px - 24px); // 48px = navbar height, 24px = padding
   scrollbar-gutter: stable;
   overflow-y: auto;
-
   padding: 3px;
 `
 const StyledTextarea = styled(Textarea)`