improve column filters

cypress/e2e/Search/search.spec.js

@@ -113,4 +113,12 @@ describe('Search Incidents', { failFast: { enabled: true } }, () => {
     cy.get('#service-filter-icon').realHover();
     cy.get('button[aria-label="Clear Filter"]').filter(':visible').click();
   });
+
+  it('Column filtering on Service column for `zzzzzz` returns no incidents and clear filters button', () => {
+    cy.get('#service-filter-icon').realHover();
+    cy.get('input[placeholder="Filter"]').filter(':visible').click().type('zzzzzz');
+    cy.get('.empty-incidents-badge').should('be.visible');
+    cy.get('#clear-filters-button').filter(':visible').click();
+    waitForIncidentTable();
+  });
 });

src/components/IncidentTable/IncidentTableComponent.jsx

@@ -46,6 +46,7 @@ import {
 import {
   selectIncidentTableRows as selectIncidentTableRowsConnected,
   updateIncidentTableState as updateIncidentTableStateConnected,
+  CLEAR_INCIDENT_TABLE_FILTERS_COMPLETED,
 } from 'src/redux/incident_table/actions';
 
 import EmptyIncidentsComponent from './subcomponents/EmptyIncidentsComponent';
@@ -120,7 +121,7 @@ const doCsvExport = (tableData) => {
 
 const IncidentTableComponent = () => {
   const {
-    incidentTableState, incidentTableColumns,
+    incidentTableState, incidentTableColumns, status: incidentTableStatus,
   } = useSelector((state) => state.incidentTable);
   const {
     status: incidentActionsStatus,
@@ -221,7 +222,8 @@ const IncidentTableComponent = () => {
   // Debouncing for table state
   const debouncedUpdateIncidentTableState = useDebouncedCallback((state, action) => {
     // Only update store with sorted and column resizing state
-    if (action.type === 'toggleSortBy' || action.type === 'columnDoneResizing') {
+    // and filter state
+    if (action.type === 'toggleSortBy' || action.type === 'columnDoneResizing' || action.type === 'setFilter') {
       updateIncidentTableState(state);
     }
   }, 100);
@@ -251,7 +253,7 @@ const IncidentTableComponent = () => {
       // Set initial state from store
       initialState: incidentTableState,
       // Handle updates to table
-      stateReducer: (newState, action) => debouncedUpdateIncidentTableState(newState, action),
+      stateReducer: debouncedUpdateIncidentTableState,
     },
     // Plugins
     useFilters,
@@ -327,19 +329,17 @@ const IncidentTableComponent = () => {
     },
   );
 
-  // save filters when the user changes them
-  useEffect(() => {
-    updateIncidentTableState({
-      ...incidentTableState,
-      filters: tableInstance.state.filters,
-    });
-  }, [tableInstance.state.filters]);
-
   // Update table filters when columns change
   useEffect(() => {
     tableInstance.setAllFilters(incidentTableState.filters);
   }, [columns]);
 
+  useEffect(() => {
+    if (incidentTableStatus === CLEAR_INCIDENT_TABLE_FILTERS_COMPLETED) {
+      tableInstance.setAllFilters(incidentTableState.filters);
+    }
+  }, [incidentTableStatus]);
+
   const {
     getTableProps,
     getTableBodyProps,
@@ -536,19 +536,26 @@ const IncidentTableComponent = () => {
             </MenuItem>
           </ContextMenu>
         </Box>
-        <Box {...getTableBodyProps()}>
-          <FixedSizeList
-            className="incident-table-fixed-list"
-            height={tableHeight - 45}
-            itemCount={rows.length}
-            itemSize={60}
-            itemKey={(index) => rows[index].id}
-            itemData={rows}
-            width={totalColumnsWidth + scrollBarSize}
-          >
-            {MyIncidentRow}
-          </FixedSizeList>
-        </Box>
+        { rows.length > 0 && (
+          <Box {...getTableBodyProps()}>
+            <FixedSizeList
+              className="incident-table-fixed-list"
+              height={tableHeight - 45}
+              itemCount={rows.length}
+              itemSize={60}
+              itemKey={(index) => rows[index].id}
+              itemData={rows}
+              width={totalColumnsWidth + scrollBarSize}
+            >
+              {MyIncidentRow}
+            </FixedSizeList>
+          </Box>
+        )}
+        { rows.length === 0 && (
+          <EmptyIncidentsComponent
+            message={t('No incidents match your search criteria.')}
+          />
+        )}
         <GetAllModal
           isOpen={displayGetAllModal}
           onClose={() => setDisplayGetAllModal(false)}

src/components/QuerySettings/QuerySettingsComponent.jsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, {
+  useMemo,
+} from 'react';
 
 import {
   useSelector, useDispatch,
@@ -28,6 +30,7 @@ import DatePickerComponent from './subcomponents/DatePickerComponent';
 import StatusQueryComponent from './subcomponents/StatusQueryComponent';
 import UrgencyQueryComponent from './subcomponents/UrgencyQueryComponent';
 import PriorityQueryComponent from './subcomponents/PriorityQueryComponent';
+import ColumnFilterIndicatorComponent from './subcomponents/ColumnFilterIndicatorComponent';
 
 import './QuerySettingsComponent.scss';
 
@@ -52,6 +55,10 @@ const QuerySettingsComponent = () => {
   } = useSelector(
     (state) => state.querySettings,
   );
+  const {
+    filters,
+  } = useSelector((state) => state.incidentTable.incidentTableState);
+
   const dispatch = useDispatch();
   const updateQuerySettingsServices = (newServiceIds) => {
     dispatch(updateQuerySettingsServicesConnected(newServiceIds));
@@ -66,6 +73,13 @@ const QuerySettingsComponent = () => {
     dispatch(updateQuerySettingsTeamsConnected(newTeamIds));
   };
 
+  const filterCount = useMemo(() => {
+    if (filters instanceof Array) {
+      return filters.length;
+    }
+    return 0;
+  }, [filters]);
+
   return (
     <Box m={4}>
       <Flex
@@ -117,7 +131,11 @@ const QuerySettingsComponent = () => {
             isMulti
           />
         </BoxForInput>
-        {/* <GlobalSearchComponent /> */}
+        { filterCount > 0 && (
+          <BoxForInput label={`${t('Column Filters')}:`}>
+            <ColumnFilterIndicatorComponent />
+          </BoxForInput>
+        )}
       </Flex>
     </Box>
   );

src/components/QuerySettings/subcomponents/ColumnFilterIndicatorComponent.jsx

@@ -0,0 +1,63 @@
+import React, {
+  useMemo,
+} from 'react';
+
+import {
+  useSelector,
+  useDispatch,
+} from 'react-redux';
+
+import {
+  useTranslation,
+} from 'react-i18next';
+
+import {
+  Flex,
+  Button,
+  Tag,
+} from '@chakra-ui/react';
+
+import {
+  clearIncidentTableFilters as clearIncidentTableFiltersConnected,
+} from 'src/redux/incident_table/actions';
+
+const ColumnFilterIndicatorComponent = () => {
+  const {
+    t,
+  } = useTranslation();
+  const {
+    filters,
+  } = useSelector((state) => state.incidentTable.incidentTableState);
+
+  const dispatch = useDispatch();
+  const clearIncidentTableFilters = () => {
+    dispatch(clearIncidentTableFiltersConnected());
+  };
+
+  const filterCount = useMemo(() => {
+    if (filters instanceof Array) {
+      return filters.length;
+    }
+    return 0;
+  }, [filters]);
+
+  return (
+    <Flex>
+      <Tag colorScheme="blue">
+        {filterCount}
+      </Tag>
+      <Button
+        id="clear-filters-button"
+        size="xs"
+        ml={1}
+        colorScheme="red"
+        aria-label="clear"
+        onClick={clearIncidentTableFilters}
+      >
+        {t('Clear')}
+      </Button>
+    </Flex>
+  );
+};
+
+export default ColumnFilterIndicatorComponent;

src/redux/incident_table/actions.js

@@ -12,6 +12,9 @@ export const UPDATE_INCIDENT_TABLE_STATE_COMPLETED = 'UPDATE_INCIDENT_TABLE_STAT
 export const SELECT_INCIDENT_TABLE_ROWS_REQUESTED = 'SELECT_INCIDENT_TABLE_ROWS_REQUESTED';
 export const SELECT_INCIDENT_TABLE_ROWS_COMPLETED = 'SELECT_INCIDENT_TABLE_ROWS_COMPLETED';
 
+export const CLEAR_INCIDENT_TABLE_FILTERS_REQUESTED = 'CLEAR_INCIDENT_TABLE_FILTERS_REQUESTED';
+export const CLEAR_INCIDENT_TABLE_FILTERS_COMPLETED = 'CLEAR_INCIDENT_TABLE_FILTERS_COMPLETED';
+
 // Define Actions
 
 export const saveIncidentTable = (updatedIncidentTableColumns) => ({
@@ -35,3 +38,7 @@ export const selectIncidentTableRows = (allSelected, selectedCount, selectedRows
   selectedCount,
   selectedRows,
 });
+
+export const clearIncidentTableFilters = () => ({
+  type: CLEAR_INCIDENT_TABLE_FILTERS_REQUESTED,
+});

src/redux/incident_table/reducers.js

@@ -12,6 +12,8 @@ import {
   UPDATE_INCIDENT_TABLE_STATE_COMPLETED,
   SELECT_INCIDENT_TABLE_ROWS_REQUESTED,
   SELECT_INCIDENT_TABLE_ROWS_COMPLETED,
+  CLEAR_INCIDENT_TABLE_FILTERS_REQUESTED,
+  CLEAR_INCIDENT_TABLE_FILTERS_COMPLETED,
 } from './actions';
 
 const defaultColumns = [
@@ -70,6 +72,18 @@ const incidentTable = produce(
         draft.status = SELECT_INCIDENT_TABLE_ROWS_COMPLETED;
         break;
 
+      case CLEAR_INCIDENT_TABLE_FILTERS_REQUESTED:
+        draft.status = CLEAR_INCIDENT_TABLE_FILTERS_REQUESTED;
+        break;
+
+      case CLEAR_INCIDENT_TABLE_FILTERS_COMPLETED:
+        draft.incidentTableState = {
+          ...draft.incidentTableState,
+          filters: [],
+        };
+        draft.status = CLEAR_INCIDENT_TABLE_FILTERS_COMPLETED;
+        break;
+
       default:
         break;
     }

src/redux/incident_table/sagas.js

@@ -16,6 +16,8 @@ import {
   UPDATE_INCIDENT_TABLE_STATE_COMPLETED,
   SELECT_INCIDENT_TABLE_ROWS_REQUESTED,
   SELECT_INCIDENT_TABLE_ROWS_COMPLETED,
+  CLEAR_INCIDENT_TABLE_FILTERS_REQUESTED,
+  CLEAR_INCIDENT_TABLE_FILTERS_COMPLETED,
 } from './actions';
 
 import selectIncidentTable from './selectors';
@@ -122,3 +124,13 @@ export function* selectIncidentTableRowsImpl(action) {
     selectedRows,
   });
 }
+
+export function* clearIncidentTableFilters() {
+  yield takeLatest(CLEAR_INCIDENT_TABLE_FILTERS_REQUESTED, clearIncidentTableFiltersImpl);
+}
+
+export function* clearIncidentTableFiltersImpl() {
+  yield put({
+    type: CLEAR_INCIDENT_TABLE_FILTERS_COMPLETED,
+  });
+}

src/redux/incidents/reducers.js

@@ -56,6 +56,7 @@ const incidents = produce(
       case FETCH_INCIDENTS_REQUESTED:
         draft.fetchingIncidents = true;
         draft.status = FETCH_INCIDENTS_REQUESTED;
+        draft.error = null;
         break;
 
       case FETCH_INCIDENTS_COMPLETED:

src/redux/log_entries/sagas.js

@@ -169,9 +169,17 @@ export function* pollLogEntriesTask() {
       },
       incidents: {
         fetchingIncidents,
+        error: incidentsError,
       },
     } = yield select();
-    if (userAuthorized && userAcceptedDisclaimer && !fetchingIncidents && !DEBUG_DISABLE_POLLING) {
+
+    const tooManyIncidentsError = (
+      incidentsError
+      && typeof incidentsError === 'string'
+      && incidentsError.startsWith('Too many records')
+    );
+
+    if (userAuthorized && userAcceptedDisclaimer && !fetchingIncidents && !DEBUG_DISABLE_POLLING && !tooManyIncidentsError) {
       const lastPollStarted = new Date();
       yield put({
         type: UPDATE_LOG_ENTRIES_POLLING,
@@ -199,7 +207,7 @@ export function* pollLogEntriesTask() {
       yield delay((LOG_ENTRIES_POLLING_INTERVAL_SECONDS * 1000) - timeTaken);
     } else {
       // eslint-disable-next-line no-console
-      console.log('skipping poll', { userAuthorized, userAcceptedDisclaimer, fetchingIncidents, DEBUG_DISABLE_POLLING });
+      console.log('skipping poll', { userAuthorized, userAcceptedDisclaimer, fetchingIncidents, DEBUG_DISABLE_POLLING, tooManyIncidentsError });
       yield delay(LOG_ENTRIES_POLLING_INTERVAL_SECONDS * 1000);
     }
   }

src/redux/rootSaga.js

@@ -48,6 +48,7 @@ import {
   updateIncidentTableColumns,
   updateIncidentTableState,
   selectIncidentTableRows,
+  clearIncidentTableFilters,
 } from './incident_table/sagas';
 
 import {
@@ -185,6 +186,7 @@ export default function* rootSaga() {
       updateIncidentTableColumns(),
       updateIncidentTableState(),
       selectIncidentTableRows(),
+      clearIncidentTableFilters(),
 
       // Incident Actions
       doAction(),