feat: add "Mark as done on open" setting (#746)

* feat: add button to mark a notification as done

* tests: add tests for `markNotificationDone()`

* feat: update "mark notification as read" icon

* tests: update snaps

* fix: remove now obsolete `markOnClick`

* feat: add "Mark as done on open" setting

Author: adufr

src/__mocks__/mock-state.ts

@@ -19,4 +19,5 @@ export const mockSettings: SettingsState = {
   openAtStartup: false,
   appearance: Appearance.SYSTEM,
   colors: false,
+  markAsDoneOnOpen: false,
 };

src/components/NotificationRow.test.tsx

@@ -41,7 +41,7 @@ describe('components/Notification.js', () => {
     const { getByRole } = render(
       <AppContext.Provider
         value={{
-          settings: mockSettings,
+          settings: { ...mockSettings, markAsDoneOnOpen: false },
           markNotification,
           accounts: mockAccounts,
         }}
@@ -54,6 +54,31 @@ describe('components/Notification.js', () => {
     expect(shell.openExternal).toHaveBeenCalledTimes(1);
   });
 
+  it('should open a notification in browser & mark it as done', () => {
+    const markNotificationDone = jest.fn();
+
+    const props = {
+      notification: mockedSingleNotification,
+      hostname: 'github.com',
+    };
+
+    const { getByRole } = render(
+      <AppContext.Provider
+        value={{
+          settings: { ...mockSettings, markAsDoneOnOpen: true },
+          markNotificationDone,
+          accounts: mockAccounts,
+        }}
+      >
+        <NotificationRow {...props} />
+      </AppContext.Provider>,
+    );
+
+    fireEvent.click(getByRole('main'));
+    expect(shell.openExternal).toHaveBeenCalledTimes(1);
+    expect(markNotificationDone).toHaveBeenCalledTimes(1);
+  });
+
   it('should mark a notification as read', () => {
     const markNotification = jest.fn();
 
@@ -65,7 +90,7 @@ describe('components/Notification.js', () => {
     const { getByTitle } = render(
       <AppContext.Provider
         value={{
-          settings: mockSettings,
+          settings: { ...mockSettings, markAsDoneOnOpen: false },
           accounts: mockAccounts,
         }}
       >

src/components/NotificationRow.tsx

@@ -30,6 +30,10 @@ export const NotificationRow: React.FC<IProps> = ({
 
   const pressTitle = useCallback(() => {
     openBrowser();
+
+    if (settings.markAsDoneOnOpen) {
+      markNotificationDone(notification.id, hostname);
+    }
   }, [settings]);
 
   const openBrowser = useCallback(

src/context/App.test.tsx

@@ -291,6 +291,7 @@ describe('context/App.tsx', () => {
         playSound: true,
         showNotifications: true,
         colors: false,
+        markAsDoneOnOpen: false,
       },
     );
   });
@@ -328,6 +329,7 @@ describe('context/App.tsx', () => {
         playSound: true,
         showNotifications: true,
         colors: false,
+        markAsDoneOnOpen: false,
       },
     );
   });

src/context/App.tsx

@@ -37,6 +37,7 @@ export const defaultSettings: SettingsState = {
   openAtStartup: false,
   appearance: Appearance.SYSTEM,
   colors: false,
+  markAsDoneOnOpen: false,
 };
 
 interface AppContextState {

src/routes/Settings.test.tsx

@@ -182,6 +182,34 @@ describe('routes/Settings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledWith('showNotifications', false);
   });
 
+  it('should toggle the markAsDoneOnOpen checkbox', async () => {
+    let getByLabelText;
+
+    await act(async () => {
+      const { getByLabelText: getByLabelTextLocal } = render(
+        <AppContext.Provider
+          value={{
+            settings: mockSettings,
+            accounts: mockAccounts,
+            updateSetting,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsRoute />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+      getByLabelText = getByLabelTextLocal;
+    });
+
+    fireEvent.click(getByLabelText('Mark as done on open'), {
+      target: { checked: true },
+    });
+
+    expect(updateSetting).toHaveBeenCalledTimes(1);
+    expect(updateSetting).toHaveBeenCalledWith('markAsDoneOnOpen', false);
+  });
+
   it('should toggle the openAtStartup checkbox', async () => {
     let getByLabelText;
 

src/routes/Settings.tsx

@@ -139,6 +139,14 @@ export const SettingsRoute: React.FC = () => {
             updateSetting('showNotifications', evt.target.checked)
           }
         />
+        <FieldCheckbox
+          name="markAsDoneOnOpen"
+          label="Mark as done on open"
+          checked={settings.markAsDoneOnOpen}
+          onChange={(evt) =>
+            updateSetting('markAsDoneOnOpen', evt.target.checked)
+          }
+        />
         {!isLinux && (
           <FieldCheckbox
             name="openAtStartUp"

src/routes/__snapshots__/Settings.test.tsx.snap

@@ -230,6 +230,29 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </label>
       </div>
     </div>
+    <div
+      class="flex items-start mt-1 mb-3"
+    >
+      <div
+        class="flex items-center h-5"
+      >
+        <input
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+          id="markAsDoneOnOpen"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class="ml-3 text-sm"
+      >
+        <label
+          class="font-medium text-gray-700 dark:text-gray-200"
+          for="markAsDoneOnOpen"
+        >
+          Mark as done on open
+        </label>
+      </div>
+    </div>
     <div
       class="flex items-start mt-1 mb-3"
     >

src/types.ts

@@ -13,6 +13,7 @@ export interface SettingsState {
   openAtStartup: boolean;
   appearance: Appearance;
   colors: boolean;
+  markAsDoneOnOpen: boolean;
 }
 
 export enum Appearance {