fix(settings): allow showBots only when detailedNotifications is selected (#1007)

* fix: allow showBots only when detailedNotifications is selected. make null safe

* fix: allow showBots only when detailedNotifications is selected. make null safe

Author: setchy

src/hooks/useNotifications.ts

@@ -174,7 +174,7 @@ export const useNotifications = (): NotificationsState => {
                         return notifications.filter((notification) => {
                           if (
                             !settings.showBots &&
-                            notification.subject?.user.type === 'Bot'
+                            notification.subject?.user?.type === 'Bot'
                           ) {
                             return false;
                           }

src/routes/Settings.test.tsx

@@ -119,12 +119,16 @@ describe('routes/Settings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledWith('participating', false);
   });
 
-  it('should toggle the showBots checkbox', async () => {
+  it('should not be able to toggle the showBots checkbox when detailedNotifications is disabled', async () => {
     await act(async () => {
       render(
         <AppContext.Provider
           value={{
-            settings: mockSettings,
+            settings: {
+              ...mockSettings,
+              detailedNotifications: false,
+              showBots: true,
+            },
             accounts: mockAccounts,
             updateSetting,
           }}
@@ -136,15 +140,65 @@ describe('routes/Settings.tsx', () => {
       );
     });
 
+    expect(
+      screen
+        .getByLabelText('Show notifications from Bot accounts')
+        .closest('input'),
+    ).toHaveProperty('disabled', true);
+
+    // click the checkbox
     fireEvent.click(
       screen.getByLabelText('Show notifications from Bot accounts'),
-      {
-        target: { checked: true },
-      },
     );
 
-    expect(updateSetting).toHaveBeenCalledTimes(1);
+    // check if the checkbox is still unchecked
+    expect(updateSetting).not.toHaveBeenCalled();
+
+    expect(
+      screen.getByLabelText('Show notifications from Bot accounts').parentNode
+        .parentNode,
+    ).toMatchSnapshot();
+  });
+
+  it('should be able to toggle the showBots checkbox when detailedNotifications is enabled', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            settings: {
+              ...mockSettings,
+              detailedNotifications: true,
+              showBots: true,
+            },
+            accounts: mockAccounts,
+            updateSetting,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsRoute />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    expect(
+      screen
+        .getByLabelText('Show notifications from Bot accounts')
+        .closest('input'),
+    ).toHaveProperty('disabled', false);
+
+    // click the checkbox
+    fireEvent.click(
+      screen.getByLabelText('Show notifications from Bot accounts'),
+    );
+
+    // check if the checkbox is still unchecked
     expect(updateSetting).toHaveBeenCalledWith('showBots', false);
+
+    expect(
+      screen.getByLabelText('Show notifications from Bot accounts').parentNode
+        .parentNode,
+    ).toMatchSnapshot();
   });
 
   it('should toggle the showNotificationsCountInTray checkbox', async () => {

src/routes/Settings.tsx

@@ -181,8 +181,24 @@ export const SettingsRoute: FC = () => {
           <Checkbox
             name="showBots"
             label="Show notifications from Bot accounts"
-            checked={settings.showBots}
-            onChange={(evt) => updateSetting('showBots', evt.target.checked)}
+            checked={!settings.detailedNotifications || settings.showBots}
+            onChange={(evt) =>
+              settings.detailedNotifications &&
+              updateSetting('showBots', evt.target.checked)
+            }
+            disabled={!settings.detailedNotifications}
+            tooltip={
+              <div>
+                <div className="pb-3">
+                  Show or hide notifications from Bot accounts, such as
+                  @dependabot, @renovatebot, etc
+                </div>
+                <div className="text-orange-600">
+                  ⚠️ This setting requires{' '}
+                  <strong>Detailed Notifications</strong> to be enabled.
+                </div>
+              </div>
+            }
           />
           <Checkbox
             name="markAsDoneOnOpen"