feat(filters): save worklist query filters to session storage so that they persist between navigation to the viewer and back (#3749)

Co-authored-by: ladeirarodolfo <39910206+ladeirarodolfo@users.noreply.github.com>

platform/app/cypress/integration/study-list/OHIFStudyList.spec.js

@@ -3,6 +3,7 @@
 describe('OHIF Study List', function () {
   context('Desktop resolution', function () {
     beforeEach(function () {
+      cy.window().then(win => win.sessionStorage.clear());
       cy.openStudyList();
 
       cy.viewport(1750, 720);
@@ -14,6 +15,10 @@ describe('OHIF Study List', function () {
       cy.get('@StudyDescription').clear();
     });
 
+    afterEach(function () {
+      cy.window().then(win => win.sessionStorage.clear());
+    });
+
     it('Displays several studies initially', function () {
       cy.waitStudyList();
       cy.get('@searchResult2').should($list => {
@@ -33,6 +38,21 @@ describe('OHIF Study List', function () {
       });
     });
 
+    it('maintains Patient Name filter upon return from viewer', function () {
+      cy.get('@PatientName').type('Juno');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('[data-cy="studyRow-1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1"]').click();
+      cy.get(
+        '[data-cy="mode-basic-test-1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1"]'
+      ).click();
+      cy.get('[data-cy="return-to-work-list"]').click();
+      cy.get('@searchResult2').should($list => {
+        expect($list.length).to.be.eq(1);
+        expect($list).to.contain('Juno');
+      });
+    });
+
     it('searches MRN with exact string', function () {
       cy.get('@MRN').type('0000003');
       //Wait result list to be displayed
@@ -43,6 +63,21 @@ describe('OHIF Study List', function () {
       });
     });
 
+    it('maintains MRN filter upon return from viewer', function () {
+      cy.get('@MRN').type('0000003');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('[data-cy="studyRow-1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1"]').click();
+      cy.get(
+        '[data-cy="mode-basic-test-1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1"]'
+      ).click();
+      cy.get('[data-cy="return-to-work-list"]').click();
+      cy.get('@searchResult2').should($list => {
+        expect($list.length).to.be.eq(1);
+        expect($list).to.contain('0000003');
+      });
+    });
+
     it('searches Accession with exact string', function () {
       cy.get('@AccessionNumber').type('321');
       //Wait result list to be displayed
@@ -53,6 +88,21 @@ describe('OHIF Study List', function () {
       });
     });
 
+    it('maintains Accession filter upon return from viewer', function () {
+      cy.get('@AccessionNumber').type('0000155811');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('[data-cy="studyRow-1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1"]').click();
+      cy.get(
+        '[data-cy="mode-basic-test-1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1"]'
+      ).click();
+      cy.get('[data-cy="return-to-work-list"]').click();
+      cy.get('@searchResult2').should($list => {
+        expect($list.length).to.be.eq(1);
+        expect($list).to.contain('0000155811');
+      });
+    });
+
     it('searches Description with exact string', function () {
       cy.get('@StudyDescription').type('PETCT');
       //Wait result list to be displayed
@@ -63,6 +113,21 @@ describe('OHIF Study List', function () {
       });
     });
 
+    it('maintains Description filter upon return from viewer', function () {
+      cy.get('@StudyDescription').type('PETCT');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('[data-cy="studyRow-1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1"]').click();
+      cy.get(
+        '[data-cy="mode-basic-test-1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1"]'
+      ).click();
+      cy.get('[data-cy="return-to-work-list"]').click();
+      cy.get('@searchResult2').should($list => {
+        expect($list.length).to.be.eq(1);
+        expect($list).to.contain('PETCT');
+      });
+    });
+
     /* Todo: fix react select
      it('searches Modality with camel case', function() {
        cy.get('@modalities').type('Ct');

platform/app/src/routes/WorkList/WorkList.tsx

@@ -26,6 +26,7 @@ import {
   AboutModal,
   UserPreferences,
   LoadingIndicatorProgress,
+  useSessionStorage,
 } from '@ohif/ui';
 
 import i18n from '@ohif/i18n';
@@ -60,9 +61,17 @@ function WorkList({
   const navigate = useNavigate();
   const STUDIES_LIMIT = 101;
   const queryFilterValues = _getQueryFilterValues(searchParams);
+  const [sessionQueryFilterValues, updateSessionQueryFilterValues] = useSessionStorage({
+    key: 'queryFilterValues',
+    defaultValue: queryFilterValues,
+    // ToDo: useSessionStorage currently uses an unload listener to clear the filters from session storage
+    // so on systems that do not support unload events a user will NOT be able to alter any existing filter
+    // in the URL, load the page and have it apply.
+    clearOnUnload: true,
+  });
   const [filterValues, _setFilterValues] = useState({
     ...defaultFilterValues,
-    ...queryFilterValues,
+    ...sessionQueryFilterValues,
   });
 
   const debouncedFilterValues = useDebounce(filterValues, 200);
@@ -119,6 +128,7 @@ function WorkList({
       val.pageNumber = 1;
     }
     _setFilterValues(val);
+    updateSessionQueryFilterValues(val);
     setExpandedRows([]);
   };
 
@@ -251,6 +261,7 @@ function WorkList({
       moment(time, ['HH', 'HHmm', 'HHmmss', 'HHmmss.SSS']).format('hh:mm A');
 
     return {
+      dataCY: `studyRow-${studyInstanceUid}`,
       row: [
         {
           key: 'patientName',
@@ -377,6 +388,7 @@ function WorkList({
                       disabled={!isValidMode}
                       endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
                       onClick={() => {}}
+                      data-cy={`mode-${mode.routeName}-${studyInstanceUid}`}
                     >
                       {t(`Modes:${mode.displayName}`)}
                     </LegacyButton>