feat: mark as done on unsubscribe

src/__mocks__/state-mocks.ts

@@ -87,6 +87,7 @@ const mockNotificationSettings = {
   groupBy: GroupBy.REPOSITORY,
   participating: false,
   markAsDoneOnOpen: false,
+  markAsDoneOnUnsubscribe: false,
   delayNotificationState: false,
 };
 

src/components/settings/NotificationSettings.test.tsx

@@ -123,6 +123,34 @@ describe('routes/components/settings/NotificationSettings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledWith('markAsDoneOnOpen', false);
   });
 
+  it('should toggle the markAsDoneOnUnsubscribe checkbox', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            updateSetting,
+          }}
+        >
+          <MemoryRouter>
+            <NotificationSettings />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByLabelText('Mark as done on unsubscribe'), {
+      target: { checked: true },
+    });
+
+    expect(updateSetting).toHaveBeenCalledTimes(1);
+    expect(updateSetting).toHaveBeenCalledWith(
+      'markAsDoneOnUnsubscribe',
+      false,
+    );
+  });
+
   it('should toggle the delayNotificationState checkbox', async () => {
     await act(async () => {
       render(

src/components/settings/NotificationSettings.tsx

@@ -63,6 +63,20 @@ export const NotificationSettings: FC = () => {
           </div>
         }
       />
+      <Checkbox
+        name="markAsDoneOnUnsubscribe"
+        label="Mark as done on unsubscribe"
+        checked={settings.markAsDoneOnUnsubscribe}
+        onChange={(evt) =>
+          updateSetting('markAsDoneOnUnsubscribe', evt.target.checked)
+        }
+        tooltip={
+          <div>
+            <strong>Mark as Done</strong> feature is supported in GitHub Cloud
+            and GitHub Enterprise Server 3.13 or later.
+          </div>
+        }
+      />
       <Checkbox
         name="delayNotificationState"
         label="Delay notification state"

src/context/App.test.tsx

@@ -354,6 +354,7 @@ describe('context/App.tsx', () => {
           theme: 'SYSTEM',
           detailedNotifications: true,
           markAsDoneOnOpen: false,
+          markAsDoneOnUnsubscribe: false,
           showAccountHeader: false,
           delayNotificationState: false,
           showPills: true,
@@ -411,6 +412,7 @@ describe('context/App.tsx', () => {
           theme: 'SYSTEM',
           detailedNotifications: true,
           markAsDoneOnOpen: false,
+          markAsDoneOnUnsubscribe: false,
           showAccountHeader: false,
           delayNotificationState: false,
           showPills: true,

src/context/App.tsx

@@ -67,6 +67,7 @@ const defaultNotificationSettings = {
   groupBy: GroupBy.REPOSITORY,
   participating: false,
   markAsDoneOnOpen: false,
+  markAsDoneOnUnsubscribe: false,
   delayNotificationState: false,
 };
 

src/hooks/useNotifications.test.ts

@@ -426,7 +426,7 @@ describe('hooks/useNotifications.ts', () => {
   describe('unsubscribeNotification', () => {
     const id = 'notification-123';
 
-    it('should unsubscribe from a notification with success', async () => {
+    it('should unsubscribe from a notification with success - markAsDoneOnUnsubscribe = false', async () => {
       // The unsubscribe endpoint call.
       nock('https://api.github.com/')
         .put(`/notifications/threads/${id}/subscription`)
@@ -453,6 +453,39 @@ describe('hooks/useNotifications.ts', () => {
       expect(result.current.notifications.length).toBe(0);
     });
 
+    it('should unsubscribe from a notification with success - markAsDoneOnUnsubscribe = true', async () => {
+      // The unsubscribe endpoint call.
+      nock('https://api.github.com/')
+        .put(`/notifications/threads/${id}/subscription`)
+        .reply(200);
+
+      // The mark done endpoint call.
+      nock('https://api.github.com/')
+        .delete(`/notifications/threads/${id}`)
+        .reply(200);
+
+      const { result } = renderHook(() => useNotifications());
+
+      act(() => {
+        result.current.unsubscribeNotification(
+          {
+            ...mockState,
+            settings: {
+              ...mockState.settings,
+              markAsDoneOnUnsubscribe: true,
+            },
+          },
+          mockSingleNotification,
+        );
+      });
+
+      await waitFor(() => {
+        expect(result.current.status).toBe('success');
+      });
+
+      expect(result.current.notifications.length).toBe(0);
+    });
+
     it('should unsubscribe from a notification with failure', async () => {
       // The unsubscribe endpoint call.
       nock('https://api.github.com/')

src/hooks/useNotifications.ts

@@ -176,7 +176,12 @@ export const useNotifications = (): NotificationsState => {
           notification.account.hostname,
           notification.account.token,
         );
-        await markNotificationRead(state, notification);
+
+        if (state.settings.markAsDoneOnUnsubscribe) {
+          await markNotificationDone(state, notification);
+        } else {
+          await markNotificationRead(state, notification);
+        }
       } catch (err) {
         log.error(
           'Error occurred while unsubscribing from notification thread',

src/types.ts

@@ -78,6 +78,7 @@ interface NotificationSettingsState {
   participating: boolean;
   showNotifications: boolean;
   markAsDoneOnOpen: boolean;
+  markAsDoneOnUnsubscribe: boolean;
   delayNotificationState: boolean;
   groupBy: GroupBy;
 }