feat: always show account header

Signed-off-by: Adam Setch <adam.setch@outlook.com>
setchy · Sep 14, 2024 · 650fcc5 · 650fcc5
1 parent e3cf67d
commit 650fcc5
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 161 deletions.
diff --git a/src/__mocks__/state-mocks.ts b/src/__mocks__/state-mocks.ts
@@ -33,7 +33,6 @@ export const mockAuth: AuthState = {
 const mockAppearanceSettings = {
   theme: Theme.SYSTEM,
   zoomPercentage: 100,
-  showAccountHeader: false,
 };
 
 const mockNotificationSettings = {

diff --git a/src/components/AccountNotifications.test.tsx b/src/components/AccountNotifications.test.tsx
@@ -20,11 +20,10 @@ describe('components/AccountNotifications.tsx', () => {
     mockDirectoryPath();
   });
 
-  it('should render itself - group notifications by repositories', () => {
+  it('should render itself - group notifications by products', () => {
     const props = {
       account: mockAtlassianCloudAccount,
       notifications: mockAtlasifyNotification,
-      showAccountHeader: true,
       error: null,
     };
 
@@ -42,7 +41,6 @@ describe('components/AccountNotifications.tsx', () => {
     const props = {
       account: mockAtlassianCloudAccount,
       notifications: mockAtlasifyNotification,
-      showAccountHeader: true,
       error: null,
     };
 
@@ -60,7 +58,6 @@ describe('components/AccountNotifications.tsx', () => {
     const props = {
       account: mockAtlassianCloudAccount,
       notifications: [],
-      showAccountHeader: true,
       error: null,
     };
 
@@ -81,7 +78,6 @@ describe('components/AccountNotifications.tsx', () => {
         descriptions: ['Error description'],
         emojis: ['🔥'],
       },
-      showAccountHeader: true,
     };
 
     const tree = render(
@@ -100,7 +96,6 @@ describe('components/AccountNotifications.tsx', () => {
     const props = {
       account: mockAtlassianCloudAccount,
       notifications: [],
-      showAccountHeader: true,
       error: null,
     };
 
@@ -128,7 +123,6 @@ describe('components/AccountNotifications.tsx', () => {
     const props = {
       account: mockAtlassianCloudAccount,
       notifications: [],
-      showAccountHeader: true,
       error: null,
     };
 
@@ -153,7 +147,6 @@ describe('components/AccountNotifications.tsx', () => {
     const props = {
       account: mockAtlassianCloudAccount,
       notifications: [],
-      showAccountHeader: true,
       error: null,
     };
 
@@ -174,7 +167,6 @@ describe('components/AccountNotifications.tsx', () => {
     const props = {
       account: mockAtlassianCloudAccount,
       notifications: mockAtlasifyNotification,
-      showAccountHeader: true,
       error: null,
     };
 

diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
@@ -26,15 +26,14 @@ interface IAccountNotifications {
   account: Account;
   notifications: AtlasifyNotification[];
   error: AtlasifyError | null;
-  showAccountHeader: boolean;
 }
 
 export const AccountNotifications: FC<IAccountNotifications> = (
   props: IAccountNotifications,
 ) => {
   const [showOnlyUnread, setShowOnlyUnread] = useState(false);
 
-  const { account, showAccountHeader, notifications } = props;
+  const { account, notifications } = props;
 
   const { settings } = useContext(AppContext);
 
@@ -80,61 +79,59 @@ export const AccountNotifications: FC<IAccountNotifications> = (
 
   return (
     <>
-      {showAccountHeader && (
-        <div
-          className={cn(
-            'group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white',
-            props.error
-              ? 'bg-red-300 dark:bg-red-500'
-              : 'bg-gray-300 dark:bg-gray-darkest',
-            Opacity.LOW,
-          )}
-          onClick={toggleAccountNotifications}
-        >
-          <div className="flex">
-            <button
-              type="button"
-              onClick={(event: MouseEvent<HTMLElement>) => {
-                // Don't trigger onClick of parent element.
-                event.stopPropagation();
-                openAccountProfile(account);
-              }}
-            >
-              <div className="flex">
-                <Tooltip content={account.user.name}>
-                  <Avatar
-                    name={account.user.name}
-                    src={account.user.avatar}
-                    size="xsmall"
-                    appearance="circle"
-                  />
-                </Tooltip>
-                <span className="ml-2">{account.user.login}</span>
-              </div>
-            </button>
-          </div>
-
-          <Tooltip content={showOnlyUnread ? 'Show all' : 'Only show unread'}>
-            <Toggle
-              id="toggle-default"
-              size="regular"
-              label="Show unread"
-              onChange={() => setShowOnlyUnread((prev) => !prev)}
-            />
-          </Tooltip>
-
-          <HoverGroup>
-            <IconButton
-              icon={ChevronIcon}
-              label={toggleAccountNotificationsLabel}
-              isTooltipDisabled={false}
-              shape="circle"
-              spacing="compact"
-              appearance="subtle"
-            />
-          </HoverGroup>
+      <div
+        className={cn(
+          'group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white',
+          props.error
+            ? 'bg-red-300 dark:bg-red-500'
+            : 'bg-gray-300 dark:bg-gray-darkest',
+          Opacity.LOW,
+        )}
+        onClick={toggleAccountNotifications}
+      >
+        <div className="flex">
+          <button
+            type="button"
+            onClick={(event: MouseEvent<HTMLElement>) => {
+              // Don't trigger onClick of parent element.
+              event.stopPropagation();
+              openAccountProfile(account);
+            }}
+          >
+            <div className="flex">
+              <Tooltip content={account.user.name}>
+                <Avatar
+                  name={account.user.name}
+                  src={account.user.avatar}
+                  size="xsmall"
+                  appearance="circle"
+                />
+              </Tooltip>
+              <span className="ml-2">{account.user.login}</span>
+            </div>
+          </button>
         </div>
-      )}
+
+        <Tooltip content={showOnlyUnread ? 'Show all' : 'Only show unread'}>
+          <Toggle
+            id="toggle-default"
+            size="regular"
+            label="Show unread"
+            onChange={() => setShowOnlyUnread((prev) => !prev)}
+          />
+        </Tooltip>
+
+        <HoverGroup>
+          <IconButton
+            icon={ChevronIcon}
+            label={toggleAccountNotificationsLabel}
+            isTooltipDisabled={false}
+            shape="circle"
+            spacing="compact"
+            appearance="subtle"
+          />
+        </HoverGroup>
+      </div>
 
       {showAccountNotifications && (
         <>

diff --git a/src/components/settings/AppearanceSettings.test.tsx b/src/components/settings/AppearanceSettings.test.tsx
@@ -1,11 +1,7 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { webFrame } from 'electron';
 import { MemoryRouter } from 'react-router-dom';
-import {
-  mockAtlassianCloudAccount,
-  mockAuth,
-  mockSettings,
-} from '../../__mocks__/state-mocks';
+import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';
 import { AppearanceSettings } from './AppearanceSettings';
 
@@ -198,31 +194,4 @@ describe('routes/components/settings/AppearanceSettings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledTimes(1);
     expect(updateSetting).toHaveBeenCalledWith('showNumber', false);
   });
-
-  it('should toggle account header checkbox', async () => {
-    await act(async () => {
-      render(
-        <AppContext.Provider
-          value={{
-            auth: {
-              accounts: [mockAtlassianCloudAccount],
-            },
-            settings: mockSettings,
-            updateSetting,
-          }}
-        >
-          <MemoryRouter>
-            <AppearanceSettings />
-          </MemoryRouter>
-        </AppContext.Provider>,
-      );
-    });
-
-    await screen.findByLabelText('Show account header');
-
-    fireEvent.click(screen.getByLabelText('Show account header'));
-
-    expect(updateSetting).toHaveBeenCalledTimes(1);
-    expect(updateSetting).toHaveBeenCalledWith('showAccountHeader', true);
-  });
 });
diff --git a/src/components/settings/AppearanceSettings.tsx b/src/components/settings/AppearanceSettings.tsx
@@ -3,19 +3,17 @@ import { ipcRenderer, webFrame } from 'electron';
 import { type FC, useContext, useEffect, useState } from 'react';
 import { AppContext } from '../../context/App';
 import { 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';
-import { Checkbox } from '../fields/Checkbox';
 import { RadioGroup } from '../fields/RadioGroup';
 import { Legend } from './Legend';
 
 let timeout: NodeJS.Timeout;
 const DELAY = 200;
 
 export const AppearanceSettings: FC = () => {
-  const { auth, settings, updateSetting } = useContext(AppContext);
+  const { settings, updateSetting } = useContext(AppContext);
   const [zoomPercentage, setZoomPercentage] = useState(
     zoomLevelToPercentage(webFrame.getZoomLevel()),
   );
@@ -99,16 +97,6 @@ export const AppearanceSettings: FC = () => {
           X
         </Button>
       </div>
-
-      <Checkbox
-        name="showAccountHeader"
-        label="Show account header"
-        checked={settings.showAccountHeader || hasMultipleAccounts(auth)}
-        disabled={hasMultipleAccounts(auth)}
-        onChange={(evt) =>
-          updateSetting('showAccountHeader', evt.target.checked)
-        }
-      />
     </fieldset>
   );
 };
diff --git a/src/context/App.tsx b/src/context/App.tsx
@@ -49,7 +49,6 @@ export const defaultAuth: AuthState = {
 const defaultAppearanceSettings = {
   theme: Theme.SYSTEM,
   zoomPercentage: 100,
-  showAccountHeader: false,
 };
 
 const defaultNotificationSettings = {

diff --git a/src/routes/Accounts.tsx b/src/routes/Accounts.tsx
@@ -20,7 +20,7 @@ import type { Account } from '../types';
 import { getAccountUUID, refreshAccount } from '../utils/auth/utils';
 import { cn } from '../utils/cn';
 import { updateTrayIcon, updateTrayTitle } from '../utils/comms';
-import { openAccountProfile, openManageProfileSecurity } from '../utils/links';
+import { openAccountProfile } from '../utils/links';
 import { saveState } from '../utils/storage';
 
 export const AccountsRoute: FC = () => {
@@ -71,28 +71,21 @@ export const AccountsRoute: FC = () => {
               </div>
               <div className="flex flex-col gap-1">
                 <div className="text-sm font-semibold">{account.user.name}</div>
-                <div className="text-xs">
-                  <button
-                    type="button"
-                    className="flex flex-1 gap-11 cursor-pointer align-middle"
-                  >
+                <div className="flex flex-1 gap-1 align-center text-xs">
+                  <div>
                     <Tooltip content="Username">
                       <PersonIcon label="Username" size="small" />
-                      {account.user.login}
                     </Tooltip>
-                  </button>
+                  </div>
+                  <div>{account.user.login}</div>
                 </div>
-                <div className="text-xs">
-                  <button
-                    type="button"
-                    className="flex flex-1 gap-1 cursor-pointer align-middle"
-                    onClick={() => openManageProfileSecurity()}
-                  >
-                    <Tooltip content="Open profile security">
+                <div className="flex flex-1 gap-1 align-center text-xs">
+                  <div>
+                    <Tooltip content="Authentication method">
                       <LockIcon label="Authentication method" size="small" />
-                      {account.method}
                     </Tooltip>
-                  </button>
+                  </div>
+                  <div>{account.method}</div>
                 </div>
               </div>
 

diff --git a/src/routes/Notifications.test.tsx b/src/routes/Notifications.test.tsx
@@ -1,6 +1,5 @@
 import { render } from '@testing-library/react';
 import { mockAccountNotifications } from '../__mocks__/notifications-mocks';
-import { mockSettings } from '../__mocks__/state-mocks';
 import { AppContext } from '../context/App';
 import { Errors } from '../utils/errors';
 import { NotificationsRoute } from './Notifications';
@@ -28,7 +27,7 @@ describe('routes/Notifications.tsx', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('should render itself & its children (all read notifications)', () => {
+  it('should render itself & its children', () => {
     const tree = render(
       <AppContext.Provider value={{ notifications: [] }}>
         <NotificationsRoute />
@@ -37,20 +36,6 @@ describe('routes/Notifications.tsx', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('should render itself & its children (show account header)', () => {
-    const tree = render(
-      <AppContext.Provider
-        value={{
-          notifications: [mockAccountNotifications[0]],
-          settings: { ...mockSettings, showAccountHeader: true },
-        }}
-      >
-        <NotificationsRoute />
-      </AppContext.Provider>,
-    );
-    expect(tree).toMatchSnapshot();
-  });
-
   describe('should render itself & its children (error conditions - oops)', () => {
     it('bad credentials', () => {
       const tree = render(