UIEUS-374: Add reportRelease filter

CHANGELOG.md

@@ -13,6 +13,7 @@
 * COUNTER statistics: Show the COUNTER release version for reports in an additional column ([UIEUS-368](https://folio-org.atlassian.net/browse/UIEUS-368))
 * Leverage `yarn.lock` ([UIEUS-377](https://folio-org.atlassian.net/browse/UIEUS-377))
 * COUNTER 5.1 Support: Harvesting configuration for usage data providers ([UIEUS-357](https://folio-org.atlassian.net/browse/UIEUS-357))
+* Add filter for COUNTER report release ([UIEUS-374](https://folio-org.atlassian.net/browse/UIEUS-374))
 
 ## [9.0.0](https://github.com/folio-org/ui-erm-usage/tree/v9.0.0) (2024-04-17)
 * *BREAKING* Use `multipart/form-data` to upload COUNTER reports ([UIEUS-353](https://folio-org.atlassian.net/browse/UIEUS-353))

src/components/UDPFilters/UDPFilters.js

@@ -30,6 +30,7 @@ const UDPFilters = ({
     tags: [],
     errorCodes: [],
     reportTypes: [],
+    reportReleases: [],
   });
 
   const isFilterDefinedLocally = filter => {
@@ -134,94 +135,31 @@ const UDPFilters = ({
     );
   };
 
-  const renderTagsFilter = () => {
-    const tagFilters = activeFilters.tags || [];
-
-    return (
-      <Accordion
-        closedByDefault
-        id="clickable-tags-filter"
-        displayClearButton={tagFilters.length > 0}
-        header={FilterAccordionHeader}
-        label={<FormattedMessage id="ui-erm-usage.general.tags" />}
-        onClearFilter={() => {
-          filterHandlers.clearGroup('tags');
-        }}
-        separator={false}
-      >
-        <MultiSelectionFilter
-          ariaLabelledBy="clickable-tags-filter"
-          dataOptions={filterState.tags}
-          id="tags-filter"
-          name="tags"
-          onChange={e => filterHandlers.state({
-            ...activeFilters,
-            tags: e.values
-          })
-          }
-          selectedValues={tagFilters}
-        />
-      </Accordion>
-    );
-  };
-
-  const renderErrorCodesFilter = () => {
-    const errorCodesFilters = activeFilters.errorCodes || [];
-
-    return (
-      <Accordion
-        closedByDefault
-        id="clickable-error-codes-filter"
-        displayClearButton={errorCodesFilters.length > 0}
-        header={FilterAccordionHeader}
-        label={<FormattedMessage id="ui-erm-usage.general.errorCodes" />}
-        onClearFilter={() => {
-          filterHandlers.clearGroup('errorCodes');
-        }}
-        separator={false}
-      >
-        <MultiSelectionFilter
-          ariaLabelledBy="clickable-error-codes-filter"
-          dataOptions={filterState.errorCodes}
-          id="error-codes-filter"
-          name="errorCodes"
-          onChange={e => filterHandlers.state({
-            ...activeFilters,
-            errorCodes: e.values
-          })
-          }
-          selectedValues={errorCodesFilters}
-        />
-      </Accordion>
-    );
-  };
-
-  const renderReportTypesFiler = () => {
-    const reportTypesFilters = activeFilters.reportTypes || [];
+  const renderMultiSelectionFilter = (key, closedByDefault = true) => {
+    const groupFilters = activeFilters[key] || [];
 
     return (
       <Accordion
-        closedByDefault
-        id="clickable-report-types-filter"
-        displayClearButton={reportTypesFilters.length > 0}
+        closedByDefault={closedByDefault}
+        displayClearButton={groupFilters.length > 0}
         header={FilterAccordionHeader}
-        label={<FormattedMessage id="ui-erm-usage.general.reportTypes" />}
-        onClearFilter={() => {
-          filterHandlers.clearGroup('reportTypes');
-        }}
+        id={`filter-accordion-${key}`}
+        label={<FormattedMessage id={`ui-erm-usage.general.${key}`} />}
+        onClearFilter={() => { filterHandlers.clearGroup(key); }}
         separator={false}
       >
         <MultiSelectionFilter
-          ariaLabelledBy="clickable-report-types-filter"
-          dataOptions={filterState.reportTypes}
-          id="report-types-filter"
-          name="reportTypes"
-          onChange={e => filterHandlers.state({
-            ...activeFilters,
-            reportTypes: e.values
-          })
-          }
-          selectedValues={reportTypesFilters}
+          ariaLabelledBy={`clickable-filter-${key}`}
+          dataOptions={filterState[key]}
+          id={`filter-${key}`}
+          name={key}
+          onChange={group => {
+            filterHandlers.state({
+              ...activeFilters,
+              [group.name]: group.values
+            });
+          }}
+          selectedValues={groupFilters}
         />
       </Accordion>
     );
@@ -232,10 +170,11 @@ const UDPFilters = ({
       {renderCheckboxFilter('harvestingStatus')}
       {renderCheckboxFilter('harvestVia')}
       {renderCheckboxFilter('aggregators', true)}
-      {renderReportTypesFiler()}
+      {renderMultiSelectionFilter('reportTypes')}
+      {renderMultiSelectionFilter('reportReleases')}
       {renderCheckboxFilter('hasFailedReport', true)}
-      {renderTagsFilter()}
-      {renderErrorCodesFilter()}
+      {renderMultiSelectionFilter('tags')}
+      {renderMultiSelectionFilter('errorCodes')}
     </AccordionSet>
   );
 };

src/components/views/UDPs.test.js

@@ -136,28 +136,36 @@ describe('UDPs SASQ View', () => {
   });
 
   describe('check filters', () => {
-    it('harvesting status filter should be present', () => {
-      expect(document.querySelector('#filter-accordion-harvestingStatus')).toBeInTheDocument();
+    it('should be present the harvesting status filter', () => {
+      expect(screen.getByRole('button', { name: 'Harvesting status filter list' })).toBeInTheDocument();
     });
 
-    it('harvestVia filter should be present', () => {
-      expect(document.querySelector('#filter-accordion-harvestVia')).toBeInTheDocument();
+    it('should be present the harvestVia filter', () => {
+      expect(screen.getByRole('button', { name: 'Harvest via filter list' })).toBeInTheDocument();
     });
 
-    it('aggregators filter should be present', () => {
-      expect(document.querySelector('#filter-accordion-aggregators')).toBeInTheDocument();
+    it('should be present the aggregators filter', () => {
+      expect(screen.getByRole('button', { name: 'Aggregators filter list' })).toBeInTheDocument();
     });
 
-    it('report types filter should be present', () => {
-      expect(document.querySelector('#clickable-report-types-filter')).toBeInTheDocument();
+    it('should be present the report types filter', () => {
+      expect(screen.getByRole('button', { name: 'Report types filter list' })).toBeInTheDocument();
     });
 
-    it('has failed reports filter should be present', () => {
-      expect(document.querySelector('#filter-accordion-hasFailedReport')).toBeInTheDocument();
+    it('should be present the report releases filter', () => {
+      expect(screen.getByRole('button', { name: 'Report Releases filter list' })).toBeInTheDocument();
     });
 
-    it('error codes filter should be present', () => {
-      expect(document.querySelector('#clickable-error-codes-filter')).toBeInTheDocument();
+    it('should be present the has failed reports filter', () => {
+      expect(screen.getByRole('button', { name: 'Has failed report(s) filter list' })).toBeInTheDocument();
+    });
+
+    it('should be present the tags filter', () => {
+      expect(screen.getByRole('button', { name: 'Tags filter list' })).toBeInTheDocument();
+    });
+
+    it('should be present the error codes filter', () => {
+      expect(screen.getByRole('button', { name: 'Error codes filter list' })).toBeInTheDocument();
     });
 
     it('reset all button should be present', () => {

src/routes/UDPsRoute.js

@@ -62,6 +62,11 @@ class UDPsRoute extends React.Component {
       path: 'counter-reports/reports/types',
       records: 'reportTypes'
     },
+    reportReleases: {
+      type: 'okapi',
+      path: 'counter-reports/reports/releases',
+      records: 'reportReleases'
+    },
     numFiltersLoaded: { initialValue: 1 }, // will be incremented as each filter loads
     initializedFilterConfig: { initialValue: false },
     query: {
@@ -193,7 +198,8 @@ class UDPsRoute extends React.Component {
           aggregators: get(resources, 'aggregatorSettings.records', []),
           tags: get(resources, 'tags.records', []),
           errorCodes: get(resources, 'errorCodes.records', []),
-          reportTypes: get(resources, 'reportTypes.records', [])
+          reportTypes: get(resources, 'reportTypes.records', []),
+          reportReleases: get(resources, 'reportReleases.records', []),
         }}
         selectedRecordId={match.params.id}
         onNeedMoreData={this.handleNeedMoreData}

src/util/data/filterGroups.js

@@ -55,6 +55,13 @@ const filterGroups = [
     cql: 'reportTypes',
     operator: '=',
     values: [],
+  },
+  {
+    label: 'Report Releases',
+    name: 'reportReleases',
+    cql: 'reportReleases',
+    operator: '=',
+    values: [],
   }
 ];
 

translations/ui-erm-usage/en.json

@@ -35,6 +35,7 @@
   "general.tags": "Tags",
   "general.errorCodes": "Error codes",
   "general.reportTypes": "Report types",
+  "general.reportReleases": "Report Releases",
   "general.edit": "Edit",
   "general.note": "Note",
   "general.year": "Year",