Fix UI filters bug

.github/workflows/develop_CD.yml

@@ -23,10 +23,10 @@ jobs:
     if: ${{ needs.should_run.outputs.should_run == 'true' }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
@@ -64,16 +64,16 @@ jobs:
     needs: deploy
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
 
       - name: Cypress CI Run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           wait-on: 'https://dev-datastore.iatistandard.org'
           config-file: cypress.config.dev.js

.github/workflows/develop_CI.yml

@@ -18,15 +18,15 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
 
       - name: Cypress CI Run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           command-prefix: "--"
           build: npm run build:development
@@ -41,6 +41,6 @@ jobs:
       pull-requests: write
       contents: write
     steps:
-      - uses: fastify/github-action-merge-dependabot@v3.9
+      - uses: fastify/github-action-merge-dependabot@v3.10
         with:
           github-token: ${{secrets.GITHUB_TOKEN}}

.github/workflows/main_CD.yml

@@ -12,10 +12,10 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: "npm"
@@ -52,16 +52,16 @@ jobs:
     needs: deploy
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: "npm"
 
       - name: Cypress CI Run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           wait-on: "https://datastore.iatistandard.org"
           config-file: cypress.config.prod.js

.github/workflows/main_CI.yml

@@ -18,15 +18,15 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
 
       - name: Cypress CI Run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           command-prefix: "--"
           build: npm run build:development

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

cypress/integration/advanced.spec.js

@@ -51,6 +51,12 @@ describe('The advanced search', { testIsolation: false }, () => {
         });
 
         it('captures a representation of the basic search input', () => {
+            cy.fixture('simple_q_test').then((simple_q_test) => {
+                cy.intercept(
+                    `https://dev-api.iatistandard.org/dss/activity/search*`,
+                    simple_q_test,
+                );
+            });
             const query = 'test';
             cy.visit(`/?q=${query}`);
             const validate = (value) => {
@@ -338,7 +344,7 @@ describe('The advanced search', { testIsolation: false }, () => {
             cy.fixture('advanced_q_test').then((advanced_q_test) => {
                 cy.intercept(
                     buildRouteMatcher({ q: '(location_point_latlon:[-31.7,-45.0 TO 31.7,45.0])' }),
-                    advanced_q_test
+                    advanced_q_test,
                 ).as('spatialQuery');
                 cy.get('[data-cy="run-filters"]').click({ force: true });
                 cy.wait('@spatialQuery').then((interception) => {
@@ -367,7 +373,7 @@ describe('The advanced search', { testIsolation: false }, () => {
             });
         });
 
-        it.only('can export and import filters', () => {
+        it('can export and import filters', () => {
             cy.get('[data-cy="add-rule"]').click();
             cy.contains('Select field').click();
             cy.wait(1000);
@@ -427,5 +433,118 @@ describe('The advanced search', { testIsolation: false }, () => {
                 });
             });
         });
+
+        it('restores exported and imported filters correctly', () => {
+            // Add some filters
+            cy.get('[data-cy="group-or"]').click();
+
+            cy.get('[data-cy="add-rule"]').click();
+            cy.contains('Select field').click();
+            cy.get('[data-cy="field-selector"]').contains('Sector Code');
+            cy.get('[data-cy="field-selector"]').type('Sector Code{enter}');
+            cy.get('[data-cy="filter-combo-input"]').type('11110');
+
+            cy.get('[data-cy="add-rule"]').click();
+            cy.contains('Select field').click();
+            cy.get('[data-cy="field-selector"]').last().contains('Sector Code');
+            cy.get('[data-cy="field-selector"]').last().type('Sector Code{enter}');
+            cy.get('[data-cy="filter-combo-input"]').last().type('11120');
+
+            // Export
+            const downloadsFolder = Cypress.config('downloadsFolder');
+            cy.get('[data-cy="open-export-modal"]').click();
+            cy.get('[data-cy="export-filters"]').click();
+
+            // Reset
+            cy.get('[data-cy="reset-filters"]').click();
+            cy.get('[data-cy="reset-filters"]').contains('Confirm').click();
+
+            //Import
+            cy.get('[data-cy="build-query"]').click();
+            cy.get('[data-cy="open-import-modal"]').click();
+            cy.task('isExistFile', downloadsFolder).then((filename) => {
+                cy.readFile(filename).then((fileContent) => {
+                    cy.get('input[type="file"]').attachFile({
+                        fileContent: fileContent,
+                        fileName: filename,
+                        mimeType: 'application/json',
+                    });
+                    cy.get('[data-cy="import-filters"]').click();
+                });
+            });
+
+            // Assert that filters are correct
+            cy.get('[data-cy="group-or"]').should('have.class', 'bg-blue-300');
+        });
+
+        it('restores filters after page refresh', () => {
+            // Add some filters
+            cy.get('[data-cy="group-or"]').click();
+
+            cy.get('[data-cy="add-rule"]').click();
+            cy.contains('Select field').click();
+            cy.get('[data-cy="field-selector"]').contains('Sector Code');
+            cy.get('[data-cy="field-selector"]').type('Sector Code{enter}');
+            cy.get('[data-cy="filter-combo-input"]').type('11110');
+
+            cy.get('[data-cy="add-rule"]').click();
+            cy.contains('Select field').click();
+            cy.get('[data-cy="field-selector"]').last().contains('Sector Code');
+            cy.get('[data-cy="field-selector"]').last().type('Sector Code{enter}');
+            cy.get('[data-cy="filter-combo-input"]').last().type('11120');
+
+            // Run the filter
+            cy.get('[data-cy="run-filters"]').click();
+
+            // Refresh the page
+            cy.reload();
+
+            // Assert that the filters are correct
+            cy.get('[data-cy="group-or"]').should('have.class', 'bg-blue-300');
+        });
+
+        it('persists filters correctly after export', () => {
+            // Set first group to OR
+            cy.get('[data-cy="group-or"]').click();
+
+            // Add second nested group with OR
+            cy.get('[data-cy="add-group"]').click();
+            cy.get('[data-cy="group-or"]').last().click();
+
+            // Add third nested group with OR
+            cy.get('[data-cy="add-group"]').last().click();
+            cy.get('[data-cy="group-or"]').last().click();
+
+            // Click export
+            cy.get('[data-cy="open-export-modal"]').click();
+            cy.get('[data-cy="export-filters"]').should('be.visible');
+
+            // Assert that all three ORs are still set
+            cy.get('[data-cy="group-or"]').eq(0).should('have.class', 'bg-blue-300');
+            cy.get('[data-cy="group-or"]').eq(1).should('have.class', 'bg-blue-300');
+            cy.get('[data-cy="group-or"]').eq(2).should('have.class', 'bg-blue-300');
+        });
+
+        it('persists filters correctly after export (2)', () => {
+            // Set first group to OR
+            cy.get('[data-cy="group-and"]').click();
+
+            // Add second nested group with OR
+            cy.get('[data-cy="add-group"]').click();
+            cy.get('[data-cy="group-or"]').last().click();
+
+            // Add third nested group with OR
+            cy.get('[data-cy="add-group"]').last().click();
+            cy.get('[data-cy="group-and"]').last().click();
+
+            // Click export
+            cy.get('[data-cy="open-export-modal"]').click();
+            cy.get('[data-cy="export-filters"]').should('be.visible');
+
+            // Assert that all three ORs are still set
+            cy.get('[data-cy="group-and"]').eq(0).should('have.class', 'bg-blue-300');
+            cy.get('[data-cy="group-or"]').eq(1).should('have.class', 'bg-blue-300');
+            cy.get('[data-cy="group-and"]').eq(2).should('have.class', 'bg-blue-300');
+        });
     });
 });

cypress/integration/results.spec.js

@@ -7,6 +7,9 @@ describe('The results view', () => {
         cy.get('[data-cy="search-input"]').should('be.visible');
     });
     it('has a visible button for showing the advanced search sidebar', () => {
+        cy.fixture('simple_q_test').then((simple_q_test) => {
+            cy.intercept(`https://dev-api.iatistandard.org/dss/activity/search*`, simple_q_test);
+        });
         const query = 'test';
         cy.visit(`/?q=${query}`);
         cy.get('[data-cy="advanced-search-results"]').should('be.visible');