feat(settings): disable show accounts when multiple accounts are authenticated

src/components/settings/AppearanceSettings.test.tsx

@@ -1,7 +1,11 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { webFrame } from 'electron';
 import { MemoryRouter } from 'react-router-dom';
-import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
+import {
+  mockAuth,
+  mockGitHubAppAccount,
+  mockSettings,
+} from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';
 import { AppearanceSettings } from './AppearanceSettings';
 
@@ -200,7 +204,9 @@ describe('routes/components/settings/AppearanceSettings.tsx', () => {
       render(
         <AppContext.Provider
           value={{
-            auth: mockAuth,
+            auth: {
+              accounts: [mockGitHubAppAccount],
+            },
             settings: mockSettings,
             updateSetting,
           }}

src/components/settings/AppearanceSettings.tsx

@@ -11,6 +11,7 @@ import { ipcRenderer, webFrame } from 'electron';
 import { type FC, useContext, useEffect, useState } from 'react';
 import { AppContext } from '../../context/App';
 import { Size, Theme } from '../../types';
+import { hasMultipleAccounts } from '../../utils/auth/utils';
 import { setTheme } from '../../utils/theme';
 import { zoomLevelToPercentage, zoomPercentageToLevel } from '../../utils/zoom';
 import { Button } from '../buttons/Button';
@@ -22,7 +23,7 @@ let timeout: NodeJS.Timeout;
 const DELAY = 200;
 
 export const AppearanceSettings: FC = () => {
-  const { settings, updateSetting } = useContext(AppContext);
+  const { auth, settings, updateSetting } = useContext(AppContext);
   const [zoomPercentage, setZoomPercentage] = useState(
     zoomLevelToPercentage(webFrame.getZoomLevel()),
   );
@@ -198,7 +199,8 @@ export const AppearanceSettings: FC = () => {
       <Checkbox
         name="showAccountHeader"
         label="Show account header"
-        checked={settings.showAccountHeader}
+        checked={settings.showAccountHeader || hasMultipleAccounts(auth)}
+        disabled={hasMultipleAccounts(auth)}
         onChange={(evt) =>
           updateSetting('showAccountHeader', evt.target.checked)
         }

src/context/App.tsx

@@ -32,6 +32,7 @@ import {
   addAccount,
   authGitHub,
   getToken,
+  hasAccounts,
   refreshAccount,
   removeAccount,
 } from '../utils/auth/utils';
@@ -203,7 +204,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
   );
 
   const isLoggedIn = useMemo(() => {
-    return auth.accounts.length > 0;
+    return hasAccounts(auth);
   }, [auth]);
 
   const loginWithGitHubApp = useCallback(async () => {

src/utils/auth/utils.test.ts

@@ -368,4 +368,37 @@ describe('utils/auth/utils.ts', () => {
       expect(auth.isValidToken('1234567890asdfg' as Token)).toBeFalsy();
     });
   });
+
+  describe('hasAccounts', () => {
+    it('should return true', () => {
+      expect(auth.hasAccounts(mockAuth)).toBeTruthy();
+    });
+
+    it('should validate false', () => {
+      expect(
+        auth.hasAccounts({
+          accounts: [],
+        }),
+      ).toBeFalsy();
+    });
+  });
+
+  describe('hasMultipleAccounts', () => {
+    it('should return true', () => {
+      expect(auth.hasMultipleAccounts(mockAuth)).toBeTruthy();
+    });
+
+    it('should validate false', () => {
+      expect(
+        auth.hasMultipleAccounts({
+          accounts: [],
+        }),
+      ).toBeFalsy();
+      expect(
+        auth.hasMultipleAccounts({
+          accounts: [mockGitHubCloudAccount],
+        }),
+      ).toBeFalsy();
+    });
+  });
 });

src/utils/auth/utils.ts

@@ -241,3 +241,11 @@ export function isValidToken(token: Token) {
 export function getAccountUUID(account: Account): string {
   return btoa(`${account.hostname}-${account.user.id}-${account.method}`);
 }
+
+export function hasAccounts(auth: AuthState) {
+  return auth.accounts.length > 0;
+}
+
+export function hasMultipleAccounts(auth: AuthState) {
+  return auth.accounts.length > 1;
+}