Hide legend when indicator layer is off (#380)

* Hide legend when indicator layer is off * Add E2E test for hiding legend
unicef-drp · Jan 24, 2025 · 9014faf · 9014faf
1 parent 425e10f
commit 9014faf
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/django_project/frontend/src/pages/Dashboard/MiddlePanel/MapLegend/index.jsx b/django_project/frontend/src/pages/Dashboard/MiddlePanel/MapLegend/index.jsx
@@ -135,10 +135,13 @@ export default function MapLegend() {
   const { compareMode } = useSelector(state => state.mapMode)
   const selectedIndicatorLayer = useSelector(state => state.selectedIndicatorLayer);
   const selectedIndicatorSecondLayer = useSelector(state => state.selectedIndicatorSecondLayer);
+  const {
+    indicatorShow
+  } = useSelector(state => state.map);
 
   return <div className='MapLegend'>
     {
-      selectedIndicatorLayer.id ?
+      selectedIndicatorLayer.id && indicatorShow ?
         <RenderIndicatorLegend
           layer={selectedIndicatorLayer}
           name={
@@ -148,7 +151,7 @@ export default function MapLegend() {
         : ""
     }
     {
-      selectedIndicatorSecondLayer.id ?
+      selectedIndicatorSecondLayer.id && indicatorShow?
         <RenderIndicatorLegend
           layer={selectedIndicatorSecondLayer}
           name={selectedIndicatorSecondLayer.name + " (Inner)"}

diff --git a/playwright/ci-test/tests/project_view/view.ts b/playwright/ci-test/tests/project_view/view.ts
@@ -30,8 +30,13 @@ test.describe('View project', () => {
     const layer2 = 'Dynamic Layer based on a list of interventions'
     await expect(page.getByLabel(layer1)).toBeVisible();
     await expect(page.locator('.MapLegendSectionTitle')).toContainText(layer1);
+    await expect(page.locator('.MapLegend')).toBeVisible();
     await expect(page.getByLabel(layer1)).toBeChecked();
     await expect(page.getByLabel(layer2)).not.toBeChecked();
+    await page.locator('#simple-tab-1 svg').click();
+    await expect(page.locator('.MapLegendSection')).toHaveCount(0);
+    await page.locator('#simple-tab-1 svg').click();
+    await expect(page.locator('.MapLegendSection')).toHaveCount(1);
 
     // Check widgets
     await expect(page.locator('.widget__sw__content')).toContainText('895');