feat(accounts): warn when missing scopes

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/routes/Accounts.test.tsx

@@ -58,6 +58,10 @@ describe('renderer/routes/Accounts.tsx', () => {
     });
 
     it('should render with PAT scopes warning', async () => {
+      const openExternalLinkMock = jest
+        .spyOn(comms, 'openExternalLink')
+        .mockImplementation();
+
       await act(async () => {
         render(
           <AppContext.Provider
@@ -83,6 +87,13 @@ describe('renderer/routes/Accounts.tsx', () => {
       });
 
       expect(screen.getByTestId('accounts')).toMatchSnapshot();
+
+      fireEvent.click(screen.getByLabelText('missing-scopes'));
+
+      expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
+      expect(openExternalLinkMock).toHaveBeenCalledWith(
+        'https://github.com/settings/tokens',
+      );
     });
 
     it('should go back by pressing the icon', async () => {

src/renderer/routes/Accounts.tsx

@@ -102,25 +102,23 @@ export const AccountsRoute: FC = () => {
                     </span>
                   </button>
 
-                  <span
-                    hidden={
-                      account.method === 'Personal Access Token' &&
-                      account.hasRequiredScopes === true
-                    }
-                    className="text-xs font-medium italic"
-                  >
-                    <button
-                      type="button"
-                      className="cursor-pointer"
-                      title={`This account is missing one or more required scopes: \n  - ${Constants.AUTH_SCOPE.join('\n  - ')}`}
-                      onClick={() => openDeveloperSettings(account)}
-                    >
-                      <AlertFillIcon
-                        size={Size.XSMALL}
-                        className={IconColor.RED}
-                      />
-                    </button>
-                  </span>
+                  {account.method === 'Personal Access Token' &&
+                    account.hasRequiredScopes === false && (
+                      <span className="text-xs font-medium italic">
+                        <button
+                          type="button"
+                          className="cursor-pointer"
+                          title={`This account is missing one or more required scopes: \n  - ${Constants.AUTH_SCOPE.join('\n  - ')}`}
+                          aria-label="missing-scopes"
+                          onClick={() => openDeveloperSettings(account)}
+                        >
+                          <AlertFillIcon
+                            size={Size.XSMALL}
+                            className={IconColor.RED}
+                          />
+                        </button>
+                      </span>
+                    )}
                 </div>
                 <div>
                   <button