feat(settings): allow user configurable notification fetch intervals

src/renderer/__mocks__/state-mocks.ts

@@ -89,6 +89,7 @@ const mockAppearanceSettings: AppearanceSettingsState = {
 const mockNotificationSettings: NotificationSettingsState = {
   groupBy: GroupBy.REPOSITORY,
   fetchType: FetchType.INTERVAL,
+  fetchInterval: Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
   fetchAllNotifications: true,
   detailedNotifications: true,
   showPills: true,

src/renderer/components/settings/NotificationSettings.test.tsx

@@ -2,6 +2,7 @@ import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
+import { Constants } from '../../constants';
 import { AppContext } from '../../context/App';
 import * as comms from '../../utils/comms';
 import { NotificationSettings } from './NotificationSettings';
@@ -55,6 +56,161 @@ describe('renderer/components/settings/NotificationSettings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledWith('fetchType', 'INACTIVITY');
   });
 
+  describe('fetch interval settings', () => {
+    it('should update the fetch interval values when using the buttons', async () => {
+      await act(async () => {
+        render(
+          <AppContext.Provider
+            value={{
+              auth: mockAuth,
+              settings: mockSettings,
+              updateSetting,
+            }}
+          >
+            <NotificationSettings />
+          </AppContext.Provider>,
+        );
+      });
+
+      // Increase fetch interval
+      await act(async () => {
+        await userEvent.click(
+          screen.getByTestId('settings-fetch-interval-increase'),
+        );
+
+        expect(updateSetting).toHaveBeenCalledTimes(1);
+        expect(updateSetting).toHaveBeenCalledWith('fetchInterval', 120000);
+      });
+
+      await act(async () => {
+        await userEvent.click(
+          screen.getByTestId('settings-fetch-interval-increase'),
+        );
+
+        expect(updateSetting).toHaveBeenCalledTimes(2);
+        expect(updateSetting).toHaveBeenNthCalledWith(
+          2,
+          'fetchInterval',
+          180000,
+        );
+      });
+
+      // Decrease fetch interval
+      await act(async () => {
+        await userEvent.click(
+          screen.getByTestId('settings-fetch-interval-decrease'),
+        );
+
+        expect(updateSetting).toHaveBeenCalledTimes(3);
+        expect(updateSetting).toHaveBeenNthCalledWith(
+          3,
+          'fetchInterval',
+          120000,
+        );
+      });
+
+      // Fetch interval reset
+      await act(async () => {
+        await userEvent.click(
+          screen.getByTestId('settings-fetch-interval-reset'),
+        );
+
+        expect(updateSetting).toHaveBeenCalledTimes(4);
+        expect(updateSetting).toHaveBeenNthCalledWith(
+          4,
+          'fetchInterval',
+          60000,
+        );
+      });
+    });
+
+    it('should prevent going lower than minimum interval', async () => {
+      await act(async () => {
+        render(
+          <AppContext.Provider
+            value={{
+              auth: mockAuth,
+              settings: {
+                ...mockSettings,
+                fetchInterval:
+                  Constants.MIN_FETCH_NOTIFICATIONS_INTERVAL_MS +
+                  Constants.FETCH_NOTIFICATIONS_INTERVAL_STEP_MS,
+              },
+              updateSetting,
+            }}
+          >
+            <NotificationSettings />
+          </AppContext.Provider>,
+        );
+      });
+
+      await act(async () => {
+        await userEvent.click(
+          screen.getByTestId('settings-fetch-interval-decrease'),
+        );
+
+        expect(updateSetting).toHaveBeenCalledTimes(1);
+        expect(updateSetting).toHaveBeenNthCalledWith(
+          1,
+          'fetchInterval',
+          60000,
+        );
+      });
+
+      // Attempt to go below the minimum interval, update settings should not be called
+      await act(async () => {
+        await userEvent.click(
+          screen.getByTestId('settings-fetch-interval-decrease'),
+        );
+
+        expect(updateSetting).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('should prevent going above maximum interval', async () => {
+      await act(async () => {
+        render(
+          <AppContext.Provider
+            value={{
+              auth: mockAuth,
+              settings: {
+                ...mockSettings,
+                fetchInterval:
+                  Constants.MAX_FETCH_NOTIFICATIONS_INTERVAL_MS -
+                  Constants.FETCH_NOTIFICATIONS_INTERVAL_STEP_MS,
+              },
+              updateSetting,
+            }}
+          >
+            <NotificationSettings />
+          </AppContext.Provider>,
+        );
+      });
+
+      await act(async () => {
+        await userEvent.click(
+          screen.getByTestId('settings-fetch-interval-increase'),
+        );
+
+        expect(updateSetting).toHaveBeenCalledTimes(1);
+        expect(updateSetting).toHaveBeenNthCalledWith(
+          1,
+          'fetchInterval',
+          3600000,
+        );
+      });
+
+      // Attempt to go above the maximum interval, update settings should not be called
+      await act(async () => {
+        await userEvent.click(
+          screen.getByTestId('settings-fetch-interval-increase'),
+        );
+
+        expect(updateSetting).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
   it('should toggle the fetchAllNotifications checkbox', async () => {
     await act(async () => {
       render(

src/renderer/components/settings/NotificationSettings.tsx

@@ -1,27 +1,47 @@
-import { type FC, type MouseEvent, useContext } from 'react';
+import {
+  type FC,
+  type MouseEvent,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 
 import {
   BellIcon,
   CheckIcon,
   CommentIcon,
+  DashIcon,
   GitPullRequestIcon,
   IssueOpenedIcon,
   MilestoneIcon,
+  PlusIcon,
+  SyncIcon,
   TagIcon,
 } from '@primer/octicons-react';
-import { Stack, Text } from '@primer/react';
+import { Button, ButtonGroup, IconButton, Stack, Text } from '@primer/react';
+
+import { formatDuration, millisecondsToMinutes } from 'date-fns';
 
 import { APPLICATION } from '../../../shared/constants';
 
+import { Constants } from '../../constants';
 import { AppContext } from '../../context/App';
 import { FetchType, GroupBy, Size } from '../../types';
 import { openGitHubParticipatingDocs } from '../../utils/links';
 import { Checkbox } from '../fields/Checkbox';
+import { FieldLabel } from '../fields/FieldLabel';
 import { RadioGroup } from '../fields/RadioGroup';
 import { Title } from '../primitives/Title';
 
 export const NotificationSettings: FC = () => {
   const { settings, updateSetting } = useContext(AppContext);
+  const [fetchInterval, setFetchInterval] = useState<number>(
+    settings.fetchInterval,
+  );
+
+  useEffect(() => {
+    setFetchInterval(settings.fetchInterval);
+  }, [settings.fetchInterval]);
 
   return (
     <fieldset>
@@ -68,6 +88,81 @@ export const NotificationSettings: FC = () => {
           value={settings.fetchType}
         />
 
+        <Stack
+          align="center"
+          className="text-sm"
+          direction="horizontal"
+          gap="condensed"
+        >
+          <FieldLabel label="Fetch interval:" name="fetchInterval" />
+
+          <ButtonGroup className="ml-2">
+            <IconButton
+              aria-label="Decrease fetch interval"
+              data-testid="settings-fetch-interval-decrease"
+              icon={DashIcon}
+              onClick={() => {
+                const newInterval = Math.max(
+                  fetchInterval -
+                    Constants.FETCH_NOTIFICATIONS_INTERVAL_STEP_MS,
+                  Constants.MIN_FETCH_NOTIFICATIONS_INTERVAL_MS,
+                );
+
+                if (newInterval !== fetchInterval) {
+                  setFetchInterval(newInterval);
+                  updateSetting('fetchInterval', newInterval);
+                }
+              }}
+              size="small"
+              unsafeDisableTooltip={true}
+            />
+
+            <Button aria-label="Fetch interval" disabled size="small">
+              {formatDuration({
+                minutes: millisecondsToMinutes(fetchInterval),
+              })}
+            </Button>
+
+            <IconButton
+              aria-label="Increase fetch interval"
+              data-testid="settings-fetch-interval-increase"
+              icon={PlusIcon}
+              onClick={() => {
+                const newInterval = Math.min(
+                  fetchInterval +
+                    Constants.FETCH_NOTIFICATIONS_INTERVAL_STEP_MS,
+                  Constants.MAX_FETCH_NOTIFICATIONS_INTERVAL_MS,
+                );
+
+                if (newInterval !== fetchInterval) {
+                  setFetchInterval(newInterval);
+                  updateSetting('fetchInterval', newInterval);
+                }
+              }}
+              size="small"
+              unsafeDisableTooltip={true}
+            />
+
+            <IconButton
+              aria-label="Reset fetch interval"
+              data-testid="settings-fetch-interval-reset"
+              icon={SyncIcon}
+              onClick={() => {
+                setFetchInterval(
+                  Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
+                );
+                updateSetting(
+                  'fetchInterval',
+                  Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
+                );
+              }}
+              size="small"
+              unsafeDisableTooltip={true}
+              variant="danger"
+            />
+          </ButtonGroup>
+        </Stack>
+
         <Checkbox
           checked={settings.fetchAllNotifications}
           label="Fetch all notifications"

src/renderer/constants.ts

@@ -20,7 +20,10 @@ export const Constants = {
 
   ALL_READ_EMOJIS: ['🎉', '🎊', '🥳', '👏', '🙌', '😎', '🏖️', '🚀', '✨', '🏆'],
 
-  FETCH_NOTIFICATIONS_INTERVAL_MS: 60 * 1000, // 1 minute
+  DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS: 60 * 1000, // 1 minute
+  MIN_FETCH_NOTIFICATIONS_INTERVAL_MS: 60 * 1000, // 1 minute
+  MAX_FETCH_NOTIFICATIONS_INTERVAL_MS: 60 * 60 * 1000, // 1 hour
+  FETCH_NOTIFICATIONS_INTERVAL_STEP_MS: 60 * 1000, // 1 minute
 
   REFRESH_ACCOUNTS_INTERVAL_MS: 60 * 60 * 1000, // 1 hour
 

src/renderer/context/App.test.tsx

@@ -77,19 +77,25 @@ describe('renderer/context/App.tsx', () => {
       );
 
       act(() => {
-        jest.advanceTimersByTime(Constants.FETCH_NOTIFICATIONS_INTERVAL_MS);
+        jest.advanceTimersByTime(
+          Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
+        );
         return;
       });
       expect(fetchNotificationsMock).toHaveBeenCalledTimes(2);
 
       act(() => {
-        jest.advanceTimersByTime(Constants.FETCH_NOTIFICATIONS_INTERVAL_MS);
+        jest.advanceTimersByTime(
+          Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
+        );
         return;
       });
       expect(fetchNotificationsMock).toHaveBeenCalledTimes(3);
 
       act(() => {
-        jest.advanceTimersByTime(Constants.FETCH_NOTIFICATIONS_INTERVAL_MS);
+        jest.advanceTimersByTime(
+          Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
+        );
         return;
       });
       expect(fetchNotificationsMock).toHaveBeenCalledTimes(4);

src/renderer/context/App.tsx

@@ -148,18 +148,14 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     () => {
       fetchNotifications({ auth, settings });
     },
-    settings.fetchType === FetchType.INTERVAL
-      ? Constants.FETCH_NOTIFICATIONS_INTERVAL_MS
-      : null,
+    settings.fetchType === FetchType.INTERVAL ? settings.fetchInterval : null,
   );
 
   useInactivityTimer(
     () => {
       fetchNotifications({ auth, settings });
     },
-    settings.fetchType === FetchType.INACTIVITY
-      ? Constants.FETCH_NOTIFICATIONS_INTERVAL_MS
-      : null,
+    settings.fetchType === FetchType.INACTIVITY ? settings.fetchInterval : null,
   );
 
   useIntervalTimer(() => {

src/renderer/context/defaults.ts

@@ -1,3 +1,4 @@
+import { Constants } from '../constants';
 import {
   type AppearanceSettingsState,
   type AuthState,
@@ -27,6 +28,7 @@ const defaultAppearanceSettings: AppearanceSettingsState = {
 const defaultNotificationSettings: NotificationSettingsState = {
   groupBy: GroupBy.REPOSITORY,
   fetchType: FetchType.INTERVAL,
+  fetchInterval: Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
   fetchAllNotifications: true,
   detailedNotifications: true,
   showPills: true,