OHIF-260 - "Clear Filters" button should not be visible on first load, when no filters are set (#1873)

platform/ui/src/components/StudyListPagination/StudyListPagination.js

@@ -20,7 +20,7 @@ const StudyListPagination = ({
           <div className="flex items-center">
             <div className="relative mr-3">
               <select
-                defaultValue={perPage}
+                value={perPage}
                 className="block appearance-none w-full bg-transparent border border-common-active text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none h-8"
                 onChange={e => onChangePerPage(e.target.value)}
                 onBlur={() => {}}

platform/viewer/src/routes/WorkList/WorkList.jsx

@@ -1,9 +1,10 @@
-import React, { Suspense, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
 import qs from 'query-string';
+import isEqual from 'lodash.isequal';
 //
 import filtersMeta from './filtersMeta.js';
 import { useAppConfig } from '@state';
@@ -40,6 +41,7 @@ function WorkList({ history, data: studies, isLoadingData, dataSource }) {
     ...defaultFilterValues,
     ...queryFilterValues,
   });
+
   const debouncedFilterValues = useDebounce(filterValues, 200);
   const { resultsPerPage, pageNumber, sortBy, sortDirection } = filterValues;
 
@@ -181,9 +183,7 @@ function WorkList({ history, data: studies, isLoadingData, dataSource }) {
   }, [expandedRows, studies]);
 
   const isFiltering = (filterValues, defaultFilterValues) => {
-    return Object.keys(defaultFilterValues).some(name => {
-      return filterValues[name] !== defaultFilterValues[name];
-    });
+    return !isEqual(filterValues, defaultFilterValues);
   };
 
   const tableDataSource = sortedStudies.map((study, key) => {
@@ -312,6 +312,7 @@ function WorkList({ history, data: studies, isLoadingData, dataSource }) {
                   disabled={false}
                   endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
                   className={classnames('font-bold', { 'ml-2': !isFirst })}
+                  onClick={() => {}}
                 >
                   {mode.displayName}
                 </Button>
@@ -391,14 +392,15 @@ WorkList.propTypes = {
   dataSource: PropTypes.shape({
     query: PropTypes.object.isRequired,
   }).isRequired,
+  isLoadingData: PropTypes.bool.isRequired,
 };
 
 const defaultFilterValues = {
   patientName: '',
   mrn: '',
   studyDate: {
-    startDate: undefined,
-    endDate: undefined,
+    startDate: null,
+    endDate: null,
   },
   description: '',
   modalities: [],