feat: add state filter

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/__mocks__/state-mocks.ts

@@ -109,6 +109,7 @@ const mockFilters: FilterSettingsState = {
   filterUserTypes: [],
   filterIncludeHandles: [],
   filterExcludeHandles: [],
+  filterStates: [],
   filterReasons: [],
 };
 

src/renderer/components/filters/StateFilter.test.tsx

@@ -0,0 +1,108 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { mockSettings } from '../../__mocks__/state-mocks';
+import { AppContext } from '../../context/App';
+import type { SettingsState } from '../../types';
+import { StateFilter } from './StateFilter';
+
+describe('renderer/components/filters/StateFilter.tsx', () => {
+  const updateFilter = jest.fn();
+
+  it('should render itself & its children - detailed notifications enabled', () => {
+    const tree = render(
+      <AppContext.Provider
+        value={{
+          settings: {
+            ...mockSettings,
+            detailedNotifications: true,
+          } as SettingsState,
+          notifications: [],
+        }}
+      >
+        <MemoryRouter>
+          <StateFilter />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render itself & its children - detailed notifications disabled', () => {
+    const tree = render(
+      <AppContext.Provider
+        value={{
+          settings: {
+            ...mockSettings,
+            detailedNotifications: false,
+          } as SettingsState,
+          notifications: [],
+        }}
+      >
+        <MemoryRouter>
+          <StateFilter />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should be able to toggle user type - none already set', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            settings: {
+              ...mockSettings,
+              filterStates: [],
+            },
+            notifications: [],
+            updateFilter,
+          }}
+        >
+          <MemoryRouter>
+            <StateFilter />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByLabelText('Open'));
+
+    expect(updateFilter).toHaveBeenCalledWith('filterStates', 'open', true);
+
+    expect(
+      screen.getByLabelText('Open').parentNode.parentNode,
+    ).toMatchSnapshot();
+  });
+
+  it('should be able to toggle user type - some filters already set', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            settings: {
+              ...mockSettings,
+              filterStates: ['open'],
+            },
+            notifications: [],
+            updateFilter,
+          }}
+        >
+          <MemoryRouter>
+            <StateFilter />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByLabelText('Closed'));
+
+    expect(updateFilter).toHaveBeenCalledWith('filterStates', 'closed', true);
+
+    expect(
+      screen.getByLabelText('Closed').parentNode.parentNode,
+    ).toMatchSnapshot();
+  });
+});

src/renderer/components/filters/StateFilter.tsx

@@ -0,0 +1,68 @@
+import { type FC, useContext } from 'react';
+
+import { BellIcon } from '@primer/octicons-react';
+import { Stack, Text } from '@primer/react';
+
+import { AppContext } from '../../context/App';
+import type { FilterStateType } from '../../types';
+import {
+  FILTERS_STATE_TYPES,
+  getStateDetails,
+  getStateFilterCount,
+  isStateFilterSet,
+} from '../../utils/notifications/filters/state';
+import { Checkbox } from '../fields/Checkbox';
+import { Tooltip } from '../fields/Tooltip';
+import { Title } from '../primitives/Title';
+
+export const StateFilter: FC = () => {
+  const { updateFilter, settings, notifications } = useContext(AppContext);
+
+  return (
+    <fieldset id="filter-state" className="mb-3">
+      <Stack direction="horizontal" gap="condensed" align="baseline">
+        <Title icon={BellIcon}>State</Title>
+        <Tooltip
+          name="tooltip-filter-state"
+          tooltip={
+            <Stack direction="vertical" gap="condensed">
+              <Text>Filter notifications by state.</Text>
+              <Text className="text-gitify-caution">
+                ⚠️ This filter requires the{' '}
+                <Text as="strong">Detailed Notifications</Text> setting to be
+                enabled.
+              </Text>
+            </Stack>
+          }
+        />
+      </Stack>
+
+      <Stack direction="vertical" gap="condensed">
+        {Object.keys(FILTERS_STATE_TYPES).map((stateType: FilterStateType) => {
+          const stateDetails = getStateDetails(stateType);
+          const stateTitle = stateDetails.title;
+          const stateDescription = stateDetails.description;
+          const isStateChecked = isStateFilterSet(settings, stateType);
+          const stateCount = getStateFilterCount(notifications, stateType);
+
+          return (
+            <Checkbox
+              key={stateType}
+              name={stateTitle}
+              label={stateTitle}
+              checked={isStateChecked}
+              onChange={(evt) =>
+                updateFilter('filterStates', stateType, evt.target.checked)
+              }
+              tooltip={
+                stateDescription ? <Text>{stateDescription}</Text> : null
+              }
+              disabled={!settings.detailedNotifications}
+              counter={stateCount}
+            />
+          );
+        })}
+      </Stack>
+    </fieldset>
+  );
+};