From 54f24457d9be732b523f55607dc867e2e08f5263 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Fri, 28 Jun 2024 08:15:25 -0700
Subject: [PATCH 1/4] feat: reset to default settings

---
 src/context/App.tsx                           |  7 ++++++
 src/routes/Settings.test.tsx                  | 23 +++++++++++++++++++
 src/routes/Settings.tsx                       | 14 ++++++++++-
 .../__snapshots__/Settings.test.tsx.snap      | 21 +++++++++++++++++
 4 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/src/context/App.tsx b/src/context/App.tsx
index 16904b58e..2f1340953 100644
--- a/src/context/App.tsx
+++ b/src/context/App.tsx
@@ -94,6 +94,7 @@ interface AppContextState {
     name: keyof SettingsState,
     value: boolean | Theme | string | null,
   ) => void;
+  resetSettings: () => void;
 }
 
 export const AppContext = createContext<Partial<AppContextState>>({});
@@ -158,6 +159,11 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     [auth, settings],
   );
 
+  const resetSettings = useCallback(() => {
+    setSettings(defaultSettings);
+    saveState({ auth, settings: defaultSettings });
+  }, [auth]);
+
   const isLoggedIn = useMemo(() => {
     return auth.accounts.length > 0;
   }, [auth]);
@@ -290,6 +296,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
 
         settings,
         updateSetting,
+        resetSettings,
       }}
     >
       {children}
diff --git a/src/routes/Settings.test.tsx b/src/routes/Settings.test.tsx
index 333cc184e..93a23827f 100644
--- a/src/routes/Settings.test.tsx
+++ b/src/routes/Settings.test.tsx
@@ -15,6 +15,8 @@ jest.mock('react-router-dom', () => ({
 describe('routes/Settings.tsx', () => {
   let originalPlatform: NodeJS.Platform;
   const updateSetting = jest.fn();
+  const resetSettings = jest.fn();
+
   const fetchNotifications = jest.fn();
 
   beforeAll(() => {
@@ -624,6 +626,27 @@ describe('routes/Settings.tsx', () => {
       );
     });
 
+    it('should reset default settings', async () => {
+      await act(async () => {
+        render(
+          <AppContext.Provider
+            value={{
+              auth: mockAuth,
+              settings: mockSettings,
+              resetSettings,
+            }}
+          >
+            <MemoryRouter>
+              <SettingsRoute />
+            </MemoryRouter>
+          </AppContext.Provider>,
+        );
+      });
+
+      fireEvent.click(screen.getByTitle('Reset default settings'));
+      expect(resetSettings).toHaveBeenCalled();
+    });
+
     it('should open account management', async () => {
       await act(async () => {
         render(
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index fada57163..b6d3ce558 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -5,6 +5,7 @@ import {
   MilestoneIcon,
   PersonIcon,
   TagIcon,
+  UndoIcon,
   XCircleIcon,
 } from '@primer/octicons-react';
 import { ipcRenderer } from 'electron';
@@ -32,7 +33,7 @@ import { isLinux, isMacOS } from '../utils/platform';
 import { setTheme } from '../utils/theme';
 
 export const SettingsRoute: FC = () => {
-  const { settings, updateSetting } = useContext(AppContext);
+  const { settings, updateSetting, resetSettings } = useContext(AppContext);
   const navigate = useNavigate();
 
   const [appVersion, setAppVersion] = useState<string | null>(null);
@@ -302,6 +303,17 @@ export const SettingsRoute: FC = () => {
           <span title="app-version">Gitify {appVersion}</span>
         </button>
         <div>
+          <button
+            type="button"
+            className={BUTTON_CLASS_NAME}
+            title="Reset default settings"
+            onClick={() => {
+              resetSettings();
+            }}
+          >
+            <UndoIcon size={Size.LARGE} aria-label="Reset default settings" />
+          </button>
+
           <button
             type="button"
             className={BUTTON_CLASS_NAME}
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 7dc308869..cb8948b88 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -688,6 +688,27 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
       </span>
     </button>
     <div>
+      <button
+        class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+        title="Reset default settings"
+        type="button"
+      >
+        <svg
+          aria-label="Reset default settings"
+          class="octicon octicon-undo"
+          fill="currentColor"
+          focusable="false"
+          height="18"
+          role="img"
+          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          viewBox="0 0 16 16"
+          width="18"
+        >
+          <path
+            d="M1.22 6.28a.749.749 0 0 1 0-1.06l3.5-3.5a.749.749 0 1 1 1.06 1.06L3.561 5h7.188l.001.007L10.749 5c.058 0 .116.007.171.019A4.501 4.501 0 0 1 10.5 14H8.796a.75.75 0 0 1 0-1.5H10.5a3 3 0 1 0 0-6H3.561L5.78 8.72a.749.749 0 1 1-1.06 1.06l-3.5-3.5Z"
+          />
+        </svg>
+      </button>
       <button
         class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
         title="Accounts"

From 4cd437058612f288df34a3d42c7668b334e8b67e Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Fri, 28 Jun 2024 08:55:23 -0700
Subject: [PATCH 2/4] add test coverage

---
 src/context/App.test.tsx | 42 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/context/App.test.tsx b/src/context/App.test.tsx
index bc0e2d675..de2bc769a 100644
--- a/src/context/App.test.tsx
+++ b/src/context/App.test.tsx
@@ -9,7 +9,7 @@ import * as comms from '../utils/comms';
 import Constants from '../utils/constants';
 import * as notifications from '../utils/notifications';
 import * as storage from '../utils/storage';
-import { AppContext, AppProvider } from './App';
+import { AppContext, AppProvider, defaultSettings } from './App';
 
 jest.mock('../hooks/useNotifications');
 
@@ -327,6 +327,14 @@ describe('context/App.tsx', () => {
   });
 
   describe('settings methods', () => {
+    const fetchNotificationsMock = jest.fn();
+
+    beforeEach(() => {
+      (useNotifications as jest.Mock).mockReturnValue({
+        fetchNotifications: fetchNotificationsMock,
+      });
+    });
+
     it('should call updateSetting', async () => {
       const saveStateMock = jest
         .spyOn(storage, 'saveState')
@@ -429,5 +437,37 @@ describe('context/App.tsx', () => {
         } as SettingsState,
       });
     });
+
+    it('should call resetSettings', async () => {
+      const saveStateMock = jest
+        .spyOn(storage, 'saveState')
+        .mockImplementation(jest.fn());
+
+      const TestComponent = () => {
+        const { resetSettings } = useContext(AppContext);
+
+        return (
+          <button type="button" onClick={() => resetSettings()}>
+            Test Case
+          </button>
+        );
+      };
+
+      const { getByText } = customRender(<TestComponent />);
+
+      act(() => {
+        fireEvent.click(getByText('Test Case'));
+      });
+
+      expect(saveStateMock).toHaveBeenCalledWith({
+        auth: {
+          accounts: [],
+          enterpriseAccounts: [],
+          token: null,
+          user: null,
+        } as AuthState,
+        settings: defaultSettings,
+      });
+    });
   });
 });

From db14e66906c58c8f6d72b7528cc5de2fe57e5aa6 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 3 Jul 2024 18:15:29 -0800
Subject: [PATCH 3/4] add confirm dialog

---
 .../settings/SettingsFooter.test.tsx          | 27 ++++++++++++++++++-
 src/components/settings/SettingsFooter.tsx    |  3 ++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/settings/SettingsFooter.test.tsx b/src/components/settings/SettingsFooter.test.tsx
index 1defda81a..b4738754e 100644
--- a/src/components/settings/SettingsFooter.test.tsx
+++ b/src/components/settings/SettingsFooter.test.tsx
@@ -106,7 +106,9 @@ describe('routes/components/SettingsFooter.tsx', () => {
     );
   });
 
-  it('should reset default settings', async () => {
+  it('should reset default settings when `OK`', async () => {
+    window.confirm = jest.fn(() => true); // always click 'OK'
+
     await act(async () => {
       render(
         <AppContext.Provider
@@ -127,6 +129,29 @@ describe('routes/components/SettingsFooter.tsx', () => {
     expect(resetSettings).toHaveBeenCalled();
   });
 
+  it('should skip reset default settings when `cancelled`', async () => {
+    window.confirm = jest.fn(() => false); // always click 'cancel'
+
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            resetSettings,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsFooter />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByTitle('Reset default settings'));
+    expect(resetSettings).not.toHaveBeenCalled();
+  });
+
   it('should open account management', async () => {
     await act(async () => {
       render(
diff --git a/src/components/settings/SettingsFooter.tsx b/src/components/settings/SettingsFooter.tsx
index 1b6652da7..1386c21a3 100644
--- a/src/components/settings/SettingsFooter.tsx
+++ b/src/components/settings/SettingsFooter.tsx
@@ -39,7 +39,8 @@ export const SettingsFooter: FC = () => {
           className={BUTTON_CLASS_NAME}
           title="Reset default settings"
           onClick={() => {
-            resetSettings();
+            confirm('Are you sure you want to reset all settings?') &&
+              resetSettings();
           }}
         >
           <UndoIcon size={Size.LARGE} aria-label="Reset default settings" />

From c88c564a609184038bb72f007c24dd61c6dc571e Mon Sep 17 00:00:00 2001
From: Afonso Jorge Ramos <afonsojorgeramos@gmail.com>
Date: Fri, 5 Jul 2024 18:55:46 +0100
Subject: [PATCH 4/4] chore: test reset settings text at the end of settings

---
 .../settings/AppearanceSettings.tsx           |  2 +-
 .../settings/NotificationSettings.tsx         |  2 +-
 .../settings/SettingsFooter.test.tsx          | 48 -------------------
 src/components/settings/SettingsFooter.tsx    | 17 +------
 src/components/settings/SystemSettings.tsx    |  2 +-
 src/routes/Settings.test.tsx                  | 47 ++++++++++++++++++
 src/routes/Settings.tsx                       | 16 ++++++-
 .../__snapshots__/Settings.test.tsx.snap      | 41 ++++------------
 8 files changed, 76 insertions(+), 99 deletions(-)

diff --git a/src/components/settings/AppearanceSettings.tsx b/src/components/settings/AppearanceSettings.tsx
index 4efd91340..8c6825e43 100644
--- a/src/components/settings/AppearanceSettings.tsx
+++ b/src/components/settings/AppearanceSettings.tsx
@@ -25,7 +25,7 @@ export const AppearanceSettings: FC = () => {
   }, [settings.theme]);
 
   return (
-    <fieldset className="mb-3">
+    <fieldset>
       <legend id="appearance" className="mb-1 mt-2 font-semibold">
         Appearance
       </legend>
diff --git a/src/components/settings/NotificationSettings.tsx b/src/components/settings/NotificationSettings.tsx
index c0880c223..2913c4fee 100644
--- a/src/components/settings/NotificationSettings.tsx
+++ b/src/components/settings/NotificationSettings.tsx
@@ -9,7 +9,7 @@ export const NotificationSettings: FC = () => {
   const { settings, updateSetting } = useContext(AppContext);
 
   return (
-    <fieldset className="mb-3">
+    <fieldset>
       <legend id="notifications" className="mb-1 mt-2 font-semibold">
         Notifications
       </legend>
diff --git a/src/components/settings/SettingsFooter.test.tsx b/src/components/settings/SettingsFooter.test.tsx
index b4738754e..546c75997 100644
--- a/src/components/settings/SettingsFooter.test.tsx
+++ b/src/components/settings/SettingsFooter.test.tsx
@@ -12,8 +12,6 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('routes/components/SettingsFooter.tsx', () => {
-  const resetSettings = jest.fn();
-
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -106,52 +104,6 @@ describe('routes/components/SettingsFooter.tsx', () => {
     );
   });
 
-  it('should reset default settings when `OK`', async () => {
-    window.confirm = jest.fn(() => true); // always click 'OK'
-
-    await act(async () => {
-      render(
-        <AppContext.Provider
-          value={{
-            auth: mockAuth,
-            settings: mockSettings,
-            resetSettings,
-          }}
-        >
-          <MemoryRouter>
-            <SettingsFooter />
-          </MemoryRouter>
-        </AppContext.Provider>,
-      );
-    });
-
-    fireEvent.click(screen.getByTitle('Reset default settings'));
-    expect(resetSettings).toHaveBeenCalled();
-  });
-
-  it('should skip reset default settings when `cancelled`', async () => {
-    window.confirm = jest.fn(() => false); // always click 'cancel'
-
-    await act(async () => {
-      render(
-        <AppContext.Provider
-          value={{
-            auth: mockAuth,
-            settings: mockSettings,
-            resetSettings,
-          }}
-        >
-          <MemoryRouter>
-            <SettingsFooter />
-          </MemoryRouter>
-        </AppContext.Provider>,
-      );
-    });
-
-    fireEvent.click(screen.getByTitle('Reset default settings'));
-    expect(resetSettings).not.toHaveBeenCalled();
-  });
-
   it('should open account management', async () => {
     await act(async () => {
       render(
diff --git a/src/components/settings/SettingsFooter.tsx b/src/components/settings/SettingsFooter.tsx
index 1386c21a3..54d4c4708 100644
--- a/src/components/settings/SettingsFooter.tsx
+++ b/src/components/settings/SettingsFooter.tsx
@@ -1,14 +1,12 @@
-import { PersonIcon, UndoIcon, XCircleIcon } from '@primer/octicons-react';
-import { type FC, useContext, useEffect, useState } from 'react';
+import { PersonIcon, XCircleIcon } from '@primer/octicons-react';
+import { type FC, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { AppContext } from '../../context/App';
 import { BUTTON_CLASS_NAME } from '../../styles/gitify';
 import { Size } from '../../types';
 import { getAppVersion, quitApp } from '../../utils/comms';
 import { openGitifyReleaseNotes } from '../../utils/links';
 
 export const SettingsFooter: FC = () => {
-  const { resetSettings } = useContext(AppContext);
   const [appVersion, setAppVersion] = useState<string | null>(null);
   const navigate = useNavigate();
 
@@ -34,17 +32,6 @@ export const SettingsFooter: FC = () => {
         <span title="app-version">Gitify {appVersion}</span>
       </button>
       <div>
-        <button
-          type="button"
-          className={BUTTON_CLASS_NAME}
-          title="Reset default settings"
-          onClick={() => {
-            confirm('Are you sure you want to reset all settings?') &&
-              resetSettings();
-          }}
-        >
-          <UndoIcon size={Size.LARGE} aria-label="Reset default settings" />
-        </button>
         <button
           type="button"
           className={BUTTON_CLASS_NAME}
diff --git a/src/components/settings/SystemSettings.tsx b/src/components/settings/SystemSettings.tsx
index 44e7a9363..c121b2784 100644
--- a/src/components/settings/SystemSettings.tsx
+++ b/src/components/settings/SystemSettings.tsx
@@ -8,7 +8,7 @@ export const SystemSettings: FC = () => {
   const { settings, updateSetting } = useContext(AppContext);
 
   return (
-    <fieldset className="mb-3">
+    <fieldset>
       <legend id="system" className="mb-1 mt-2 font-semibold">
         System
       </legend>
diff --git a/src/routes/Settings.test.tsx b/src/routes/Settings.test.tsx
index 962984fa6..6b645ae85 100644
--- a/src/routes/Settings.test.tsx
+++ b/src/routes/Settings.test.tsx
@@ -14,6 +14,7 @@ jest.mock('react-router-dom', () => ({
 describe('routes/Settings.tsx', () => {
   let originalPlatform: NodeJS.Platform;
   const fetchNotifications = jest.fn();
+  const resetSettings = jest.fn();
 
   beforeAll(() => {
     // Save the original platform value
@@ -72,4 +73,50 @@ describe('routes/Settings.tsx', () => {
     expect(fetchNotifications).toHaveBeenCalledTimes(1);
     expect(mockNavigate).toHaveBeenNthCalledWith(1, -1);
   });
+
+  it('should reset default settings when `OK`', async () => {
+    window.confirm = jest.fn(() => true); // always click 'OK'
+
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            resetSettings,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsRoute />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByText('Restore settings to their defaults'));
+    expect(resetSettings).toHaveBeenCalled();
+  });
+
+  it('should skip reset default settings when `cancelled`', async () => {
+    window.confirm = jest.fn(() => false); // always click 'cancel'
+
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            resetSettings,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsRoute />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByText('Restore settings to their defaults'));
+    expect(resetSettings).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index 878a6e1d7..5cc98ed48 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -1,19 +1,31 @@
-import type { FC } from 'react';
+import { type FC, useContext } from 'react';
 import { Header } from '../components/Header';
 import { AppearanceSettings } from '../components/settings/AppearanceSettings';
 import { NotificationSettings } from '../components/settings/NotificationSettings';
 import { SettingsFooter } from '../components/settings/SettingsFooter';
 import { SystemSettings } from '../components/settings/SystemSettings';
+import { AppContext } from '../context/App';
 
 export const SettingsRoute: FC = () => {
+  const { resetSettings } = useContext(AppContext);
   return (
     <div className="flex h-screen flex-col" data-testid="settings">
       <Header fetchOnBack={true}>Settings</Header>
 
-      <div className="flex-grow overflow-x-auto px-8">
+      <div className="flex flex-col flex-grow overflow-x-auto px-8 gap-3">
         <AppearanceSettings />
         <NotificationSettings />
         <SystemSettings />
+        <button
+          type="button"
+          onClick={() => {
+            confirm('Are you sure you want to reset all settings?') &&
+              resetSettings();
+          }}
+          className="text-sm hover:underline mb-4 hover:cursor-pointer"
+        >
+          Restore settings to their defaults
+        </button>
       </div>
 
       <SettingsFooter />
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 86ba7d5c0..f52fe8198 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -36,11 +36,9 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
     </h3>
   </div>
   <div
-    class="flex-grow overflow-x-auto px-8"
+    class="flex flex-col flex-grow overflow-x-auto px-8 gap-3"
   >
-    <fieldset
-      class="mb-3"
-    >
+    <fieldset>
       <legend
         class="mb-1 mt-2 font-semibold"
         id="appearance"
@@ -247,9 +245,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
     </fieldset>
-    <fieldset
-      class="mb-3"
-    >
+    <fieldset>
       <legend
         class="mb-1 mt-2 font-semibold"
         id="notifications"
@@ -437,9 +433,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
     </fieldset>
-    <fieldset
-      class="mb-3"
-    >
+    <fieldset>
       <legend
         class="mb-1 mt-2 font-semibold"
         id="system"
@@ -605,6 +599,12 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
     </fieldset>
+    <button
+      class="text-sm hover:underline mb-4 hover:cursor-pointer"
+      type="button"
+    >
+      Restore settings to their defaults
+    </button>
   </div>
   <div
     class="flex items-center justify-between bg-gray-200 px-8 py-1 text-sm dark:bg-gray-darker"
@@ -622,27 +622,6 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
       </span>
     </button>
     <div>
-      <button
-        class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
-        title="Reset default settings"
-        type="button"
-      >
-        <svg
-          aria-label="Reset default settings"
-          class="octicon octicon-undo"
-          fill="currentColor"
-          focusable="false"
-          height="18"
-          role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-          viewBox="0 0 16 16"
-          width="18"
-        >
-          <path
-            d="M1.22 6.28a.749.749 0 0 1 0-1.06l3.5-3.5a.749.749 0 1 1 1.06 1.06L3.561 5h7.188l.001.007L10.749 5c.058 0 .116.007.171.019A4.501 4.501 0 0 1 10.5 14H8.796a.75.75 0 0 1 0-1.5H10.5a3 3 0 1 0 0-6H3.561L5.78 8.72a.749.749 0 1 1-1.06 1.06l-3.5-3.5Z"
-          />
-        </svg>
-      </button>
       <button
         class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
         title="Accounts"