From 9014faf28935b35a7512c4acc1b1b45a65013a9b Mon Sep 17 00:00:00 2001
From: Zulfikar Akbar Muzakki <zakki@kartoza.com>
Date: Fri, 24 Jan 2025 09:48:29 +0700
Subject: [PATCH] Hide legend when indicator layer is off (#380)

* Hide legend when indicator layer is off

* Add E2E test for hiding legend
---
 .../src/pages/Dashboard/MiddlePanel/MapLegend/index.jsx    | 7 +++++--
 playwright/ci-test/tests/project_view/view.ts              | 5 +++++
 2 files changed, 10 insertions(+), 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
index eaaa94dd5..aab62bb88 100644
--- 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
index fec1155bc..d7ae9185a 100644
--- 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');