Fix filter when empty value and add E2E (#381)

* Fix filter when empty value and add E2E

* Fix tests

* Fix tests

* Fix tests

django_project/_commit_hash.txt

@@ -1 +1 @@
-1d04e39274de0196f907e8a5c698d5404e949c89
+d1bbba31acd49b3a4ea83765a822f991aa4bbcdd

django_project/frontend/src/components/Map/Filter/Input/FilterInputData.tsx

@@ -262,7 +262,7 @@ export const FilterInputData = memo(
                        WHERE ${queryWhere}
                        ORDER BY concept_uuid`
         const _result = alasql(query, [data])
-        setResult(_result[0].concept_uuids)
+        setResult(_result[0].concept_uuids ? _result[0].concept_uuids : [])
       }
     }
 

django_project/frontend/src/components/Map/Filter/style.scss

@@ -397,7 +397,7 @@
     border: 1px solid $primary-color;
 
     & > .MuiInputBase-root {
-      width: 100%;
+      width: 100% !important;
     }
 
     .SelectWithSearchInput,

django_project/frontend/src/pages/Admin/Dashboard/Form/style.scss

@@ -276,8 +276,7 @@ main {
           border-right: none;
           border-bottom: none !important;
           border-left: 1px solid var(--primary-color);
-          padding: 5px 3px 0 3px;
-          width: 50px;
+          padding: 0;
           font-size: 0.8rem;
         }
       }

playwright/ci-test/tests/project_creation/create_default.ts

@@ -66,9 +66,14 @@ test.describe('Create project', () => {
     }).click();
     await page.locator('.AdminSelectDataForm .Save-Button button').click();
 
+
+    // --------------------------------
     // Add filters
+    // --------------------------------
     await new Promise(r => setTimeout(r, 2000));
     await page.locator('.TabPrimary').getByText('Filters').click();
+
+    // Filter 1
     await page.locator('.Filters').getByTestId('AddCircleIcon').click();
     await page.getByPlaceholder('Filter name').click();
     await page.getByText('Pick the field').click();
@@ -78,7 +83,10 @@ test.describe('Create project', () => {
     await page.getByRole('spinbutton').first().fill('70');
     await page.getByPlaceholder('Filter name').fill('Indicator A more than 10');
     await page.getByPlaceholder('Filter description').fill('Description 1');
+    await page.locator('.modal--content').getByRole('checkbox').check();
     await page.getByRole('button', { name: 'Create filter' }).click();
+
+    // Filter 1
     await page.locator('.Filters').getByTestId('AddCircleIcon').click();
     await page.getByText('Pick the field').click();
     await page.getByRole('option', { name: 'ucode' }).nth(1).click();
@@ -87,6 +95,7 @@ test.describe('Create project', () => {
     await page.getByPlaceholder('Put the value').fill('SOM_0002');
     await page.getByPlaceholder('Filter name').fill('Show SOM_0002');
     await page.getByPlaceholder('Filter description').fill('Description 2');
+    await page.locator('.modal--content').getByRole('checkbox').check();
     await page.getByRole('button', { name: 'Create filter' }).click();
 
     // --------------------------------------------
@@ -102,19 +111,41 @@ test.describe('Create project', () => {
     await page.waitForURL(editUrl)
     await page.goto('/project/test-project-default');
 
-    // Check filter
+    // --------------------------------------------
+    // TEST FILTERS
+    // --------------------------------------------
     expect(await page.getByRole('tab', { name: 'Filters' })).toBeVisible();
     await page.getByRole('tab', { name: 'Filters' }).click();
+    // Open
     await page.getByRole('button', { name: 'Indicator A more than' }).getByRole('checkbox').check();
-    await page.waitForTimeout(1000);
+    await page.waitForTimeout(500);
     await expect(lastLog).toEqual(["01da401b-09fc-4910-baa1-d42bdba5235a", "02ef3c1a-a9a1-43c6-8b35-1f67954b7106", "20f81ec5-8f1b-4056-b885-6560011cb8a8", "2698e715-18bb-47f4-b81c-cdadbdf3f142", "2773ed37-6fff-4e4f-b104-73883ab81fcf", "2943bd42-b7c8-45b7-9967-250ba0a72eec", "3d7e756f-8060-463e-ae20-b8b9be32e32f", "405e9a6b-97b4-4fd0-a273-089b2fe478ea", "58f04e3a-28c4-4754-84c0-345467550961", "5b747066-341a-43ec-9993-9d03bf1cfd2c", "6bddaec7-83a1-4da5-9d37-8a32bc925e64", "6f02fd37-83d5-4638-b078-6d0282114560", "8146eb81-6722-4918-8d9d-61395da58469", "82241b2d-5339-43cd-980e-d49205536c4c", "8323739b-392c-4268-8fd5-46d1fbf18e5d", "8bd15515-ea95-40de-bfa8-00813df2ccd3", "9e6b0956-fd2d-403b-8752-b13993cb1cdb", "a2006979-4f25-448c-891b-3935c4bcf6f0", "b57fdfe7-240a-48da-b050-26244e0fd5d4", "cc0748d8-e0a0-4cbe-a230-77dfdbcda220", "d7c57957-70cf-4e95-bc4d-c28e739b300a", "d928d4bc-d444-46a4-85ac-a64898841554", "f187b219-d4df-4831-84a3-886fde91b1e3", "f9cc24d3-40da-429b-a568-f02016d75131"]);
     await page.getByRole('button', { name: 'Show SOM_0002' }).getByRole('checkbox').check();
-    await page.waitForTimeout(1000);
+    await page.waitForTimeout(500);
     await expect(lastLog).toEqual(["2943bd42-b7c8-45b7-9967-250ba0a72eec", "8146eb81-6722-4918-8d9d-61395da58469", "a2006979-4f25-448c-891b-3935c4bcf6f0"]);
     await page.getByRole('button', { name: 'Indicator A more than' }).getByRole('checkbox').uncheck();
-    await page.waitForTimeout(1000);
+    await page.waitForTimeout(500);
     await expect(lastLog).toEqual(["1ddb6ad8-5651-4a20-bf70-f256335ee80a", "2943bd42-b7c8-45b7-9967-250ba0a72eec", "6ee97f02-b800-49fe-b73a-f55c1b57ed27", "8146eb81-6722-4918-8d9d-61395da58469", "8b1f017c-76cb-4d43-bbc1-5817a7c8b7fb", "a2006979-4f25-448c-891b-3935c4bcf6f0", "fab5edae-3df3-4f74-97bc-1d0afb5fc885"]);
 
+    // By changing data Indicator A more than 10
+    await page.getByRole('button', { name: 'Indicator A more than 10' }).click();
+    await page.getByRole('button', { name: 'Show SOM_0002' }).click();
+    await page.getByRole('button', { name: 'Indicator A more than 10' }).getByRole('checkbox').check();
+    await page.getByRole('button', { name: 'Show SOM_0002' }).getByRole('checkbox').uncheck();
+    await page.locator('.FilterInputWrapper').first().getByRole('spinbutton').first().fill('30');
+    await page.waitForTimeout(500);
+    await expect(lastLog).toEqual(["01da401b-09fc-4910-baa1-d42bdba5235a", "01fbc793-6079-4340-81e3-9ed9b699caa2", "01fd5c8f-c457-4b58-b760-cdfab5377515", "021f18bd-3ada-4225-b86a-a8230e7eb26a", "0296f796-2e6c-420c-a497-f74266c121d7", "02ef3c1a-a9a1-43c6-8b35-1f67954b7106", "073bf6b0-6836-4eac-b64c-3fbcdea250e7", "1ddb6ad8-5651-4a20-bf70-f256335ee80a", "1f8665a3-22d8-44ef-aaa7-7291c89b58db", "20f81ec5-8f1b-4056-b885-6560011cb8a8", "2698e715-18bb-47f4-b81c-cdadbdf3f142", "2773ed37-6fff-4e4f-b104-73883ab81fcf", "2943bd42-b7c8-45b7-9967-250ba0a72eec", "30052d36-45bb-46b2-83c8-63d642c22fb8", "354a10c0-7be6-40ee-9377-2ec7708a04d2", "3d7e756f-8060-463e-ae20-b8b9be32e32f", "3d8230d5-45b7-433d-a3cf-fc9d6f1868a0", "405e9a6b-97b4-4fd0-a273-089b2fe478ea", "424f4c39-bd47-4bf6-ba61-a9edc5316506", "48f88505-edb2-4cf6-86f2-8acce809af31", "4a84545d-1106-4689-849a-658650ce0bc2", "58f04e3a-28c4-4754-84c0-345467550961", "598882e1-a549-4f44-aaa8-e423e089008a", "5b747066-341a-43ec-9993-9d03bf1cfd2c", "656e13a9-4ba0-433f-94bc-cebec0c73ad0", "66c9b5ee-3315-45e6-8361-f1b93455e86d", "67180f2b-c20c-40fb-9a85-13552030d79c", "6bddaec7-83a1-4da5-9d37-8a32bc925e64", "6f02fd37-83d5-4638-b078-6d0282114560", "71b3b2da-4857-4c90-9683-e5056d80fb02", "75c01c2c-fdc4-4bdf-88e2-f79b935ebcd6", "7977bca3-3645-4072-bfe9-ad342c2674e8", "7bc8f9c0-7bf6-4873-b6ea-39beccb3e20c", "8146eb81-6722-4918-8d9d-61395da58469", "82241b2d-5339-43cd-980e-d49205536c4c", "8323739b-392c-4268-8fd5-46d1fbf18e5d", "8801e277-d8bd-41c1-8260-f96a5210be74", "8bd15515-ea95-40de-bfa8-00813df2ccd3", "90b303dc-c37b-440d-b05f-cb99ce52c73e", "921c006e-4b3e-4483-af5c-7d5eb92c0c45", "9862d9bb-d5a9-4eb6-b91e-98acc5a95484", "9e6b0956-fd2d-403b-8752-b13993cb1cdb", "a0fe3caa-57b4-4a0a-9f6d-abadc50770e3", "a2006979-4f25-448c-891b-3935c4bcf6f0", "a51dceb8-5861-4fe9-978e-b52f16eed328", "acf728d3-cf60-4ad7-9272-9a1f6f240fa3", "b0a64777-4a60-43c6-bd8d-2a486b5d46c4", "b1660c4a-aa48-4fcb-9b3e-b6c507b3a450", "b1b237cc-208e-4c1e-83ea-2f66de4f4656", "b1d27efa-bfc2-4a93-99da-cac93faba80b", "b57fdfe7-240a-48da-b050-26244e0fd5d4", "cc0748d8-e0a0-4cbe-a230-77dfdbcda220", "ce1d3979-c51f-41cf-aed7-deb2ac59fc32", "cefc6ec7-fd28-4151-8435-39144de1cb6d", "d1b527f5-b7d8-477e-b4e7-725527bdcbc0", "d354ddb3-c351-45fa-a244-87ef339a282b", "d7c57957-70cf-4e95-bc4d-c28e739b300a", "d928d4bc-d444-46a4-85ac-a64898841554", "de18312f-e653-4377-a3fe-a22466cc684e", "ee210c3e-6eec-4e90-a760-d78ef5aa73a2", "ef43390a-0275-4d43-b2e8-a8aba5c80404", "ef59c37d-29a6-4972-bc97-e53024df23f1", "f187b219-d4df-4831-84a3-886fde91b1e3", "f37df583-fb31-459f-8f2a-b14d4529f2e8", "f9cc24d3-40da-429b-a568-f02016d75131", "fab5edae-3df3-4f74-97bc-1d0afb5fc885", "fd693d32-653a-4f6f-9908-a1b7d81ffaf0"])
+
+    // Change first filter Show SOM_0002
+    await page.getByRole('button', { name: 'Indicator A more than' }).getByRole('checkbox').uncheck();
+    await page.getByRole('button', { name: 'Show SOM_0002' }).getByRole('checkbox').check();
+    await page.locator('.FilterInputWrapper').nth(1).locator('input').first().fill('SOM_0001');
+    await page.waitForTimeout(500);
+    await expect(lastLog).toEqual(["6bddaec7-83a1-4da5-9d37-8a32bc925e64", "7977bca3-3645-4072-bfe9-ad342c2674e8", "998e50ae-d1c4-48fa-8357-4dcbe3574517", "9e6b0956-fd2d-403b-8752-b13993cb1cdb", "a2006979-4f25-448c-891b-3935c4bcf6f0", "b1d27efa-bfc2-4a93-99da-cac93faba80b"])
+    await page.locator('.FilterInputWrapper').nth(1).locator('input').first().fill('SOM_002');
+    await page.waitForTimeout(500);
+    await expect(lastLog).toEqual([])
+
     // Check values
     await page.getByTitle('Edit project').getByRole('link').click();
     await page.waitForURL('http://localhost:2000/admin/project/test-project-default/edit')