Merge pull request #443 from PagerDuty/improve-filters

.github/workflows/cd-workflow.yml

@@ -55,7 +55,7 @@ jobs:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
       - name: Install project dependencies (via cache)
-        run: yarn --prefer-offline
+        run: yarn --frozen-lockfile --prefer-offline --ignore-optional
       - name: Build application bundle
         run: yarn build
       - name: Deploy

.github/workflows/lint-workflow.yml

@@ -21,6 +21,6 @@ jobs:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
       - name: Install project dependencies (via cache)
-        run: yarn --prefer-offline
+        run: yarn --frozen-lockfile --prefer-offline --ignore-optional
       - name: Run ESLint
         run: npx eslint src --ext .js,.jsx,.ts,.tsx --exit-on-fatal-error

.github/workflows/test-workflow.yml

@@ -31,7 +31,7 @@ jobs:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
       - name: Install project dependencies (via cache)
-        run: yarn --prefer-offline
+        run: yarn --frozen-lockfile --prefer-offline --ignore-optional
 
   jest:
     needs: install
@@ -54,15 +54,15 @@ jobs:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
       - name: Install project dependencies (via cache)
-        run: yarn --prefer-offline
+        run: yarn --frozen-lockfile --prefer-offline --ignore-optional
       - name: Run Jest Tests
         run: yarn jest
 
   cypress-run:
     needs: install
     runs-on: ubuntu-latest
     container:
-      image: cypress/browsers:node-20.5.0-chrome-114.0.5735.133-1-ff-114.0.2-edge-114.0.1823.51-1
+      image: cypress/browsers:node-20.14.0-chrome-125.0.6422.141-1-ff-126.0.1-edge-125.0.2535.85-1
       options: --user 1001
     strategy:
       fail-fast: false
@@ -102,7 +102,7 @@ jobs:
           # Starts web server for E2E tests - replace with your own server invocation
           # https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server
           start: yarn start
-          wait-on: 'http://localhost:3000' # Waits for above
+          wait-on: 'http://127.0.0.1:3000' # Waits for above
           browser: chrome
           # Records to Cypress Cloud
           # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record
@@ -111,6 +111,7 @@ jobs:
           spec: cypress/e2e/${{ matrix.e2e }}
           parallel: false # Don't use Cypress in-built parallelization
           install: true
+          install-command: yarn --frozen-lockfile --prefer-offline --ignore-optional
           cache-key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
         env:
           # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY

.tool-versions

@@ -1,3 +1,3 @@
 # MUST match .node-version
-nodejs 20.5.1
-yarn 1.22.19
+nodejs 20.14.0
+yarn 1.22.22

README.md

@@ -29,7 +29,7 @@ If you wish to maintain + deploy your own version of PagerDuty Live, we recommen
 
 #### Local Development
 
-1. Install [NodeJS v20.5.1](https://nodejs.org/en/blog/release/v20.5.1/) via [`asdf install`](https://github.com/asdf-vm/asdf) / [`nvm`](https://github.com/nvm-sh/nvm)
+1. Install [NodeJS v20.14.0](https://nodejs.org/en/blog/release/v20.14.0/) via [`asdf install`](https://github.com/asdf-vm/asdf) / [`nvm`](https://github.com/nvm-sh/nvm)
 
 2. `$ git clone` repo to desired destination and `$ cd pd-live-react` into directory
 

cypress.config.js

@@ -20,7 +20,7 @@ module.exports = defineConfig({
       config.env.PD_USER_TOKEN = process.env.VITE_PD_USER_TOKEN;
       return config;
     },
-    baseUrl: 'http://localhost:3000/pd-live-react',
+    baseUrl: 'http://127.0.0.1:3000/pd-live-react',
     specPattern: 'cypress/e2e/**/*.spec.{js,ts,jsx,tsx}',
     testIsolation: true,
   },

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: