feat(login): add help docs to login flows

src/routes/LoginEnterprise.test.tsx

@@ -23,6 +23,7 @@ describe('routes/LoginEnterprise.tsx', () => {
   };
 
   beforeEach(() => {
+    openExternalMock.mockReset();
     mockNavigate.mockReset();
 
     jest.spyOn(ipcRenderer, 'send');
@@ -160,10 +161,24 @@ describe('routes/LoginEnterprise.tsx', () => {
       target: { value: 'abc' },
     });
 
-    fireEvent.submit(screen.getByTitle('Login Button'));
+    fireEvent.submit(screen.getByTitle('Login'));
 
     expect(screen.getByText('Invalid hostname.')).toBeTruthy();
     expect(screen.getByText('Invalid client id.')).toBeTruthy();
     expect(screen.getByText('Invalid client secret.')).toBeTruthy();
   });
+
+  it('should open help docs in the browser', async () => {
+    render(
+      <AppContext.Provider value={{ accounts: mockAccounts }}>
+        <MemoryRouter>
+          <LoginEnterpriseRoute />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
+
+    fireEvent.click(screen.getByLabelText('GitHub Docs'));
+
+    expect(openExternalMock).toHaveBeenCalledTimes(1);
+  });
 });

src/routes/LoginEnterprise.tsx

@@ -1,6 +1,6 @@
 const ipcRenderer = require('electron').ipcRenderer;
 
-import { ArrowLeftIcon } from '@primer/octicons-react';
+import { ArrowLeftIcon, BookIcon, SignInIcon } from '@primer/octicons-react';
 
 import { type FC, useCallback, useContext, useEffect } from 'react';
 import { Form, type FormRenderProps } from 'react-final-form';
@@ -12,6 +12,9 @@ import type { AuthOptions } from '../types';
 import { getNewOAuthAppURL } from '../utils/auth';
 import { openExternalLink } from '../utils/comms';
 
+const GITHUB_DOCS_URL =
+  'https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authenticating-to-the-rest-api-with-an-oauth-app';
+
 interface IValues {
   hostname?: string;
   clientId?: string;
@@ -109,14 +112,28 @@ export const LoginEnterpriseRoute: FC = () => {
           placeholder="ABC123DEF456"
         />
 
-        <button
-          className="float-right px-4 py-2 my-4 bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none"
-          title="Login Button"
-          disabled={submitting || pristine}
-          type="submit"
-        >
-          Login
-        </button>
+        <div className="flex justify-between items-center">
+          <div className="text-xs italic hover:text-blue-500 justify-center items-center">
+            <button
+              type="button"
+              aria-label="GitHub Docs"
+              className={`px-2 py-1 text-xs ${buttonClasses}`}
+              onClick={() => openLink(GITHUB_DOCS_URL)}
+            >
+              <BookIcon size={12} /> Docs
+            </button>
+          </div>
+          <div className="justify-center items-center">
+            <button
+              className={`float-right px-4 py-2 my-4 ${buttonClasses}`}
+              title="Login"
+              disabled={submitting || pristine}
+              type="submit"
+            >
+              <SignInIcon size={14} /> Login
+            </button>
+          </div>
+        </div>
       </form>
     );
   };

src/routes/LoginWithToken.test.tsx

@@ -124,7 +124,7 @@ describe('routes/LoginWithToken.tsx', () => {
       target: { value: 'github.com' },
     });
 
-    fireEvent.submit(screen.getByTitle('Submit Button'));
+    fireEvent.submit(screen.getByTitle('Login'));
 
     await waitFor(() => expect(mockValidateToken).toHaveBeenCalledTimes(1));
 
@@ -150,7 +150,7 @@ describe('routes/LoginWithToken.tsx', () => {
       fireEvent.change(screen.getByLabelText('Hostname'), {
         target: { value: 'github.com' },
       });
-      fireEvent.submit(screen.getByTitle('Submit Button'));
+      fireEvent.submit(screen.getByTitle('Login'));
     });
 
     await waitFor(() => expect(mockValidateToken).toHaveBeenCalledTimes(1));
@@ -173,9 +173,23 @@ describe('routes/LoginWithToken.tsx', () => {
       target: { value: '123' },
     });
 
-    fireEvent.submit(screen.getByTitle('Submit Button'));
+    fireEvent.submit(screen.getByTitle('Login'));
 
     expect(screen.getByText('Invalid hostname.')).toBeDefined();
     expect(screen.getByText('Invalid token.')).toBeDefined();
   });
+
+  it('should open help docs in the browser', async () => {
+    render(
+      <AppContext.Provider value={{ validateToken: mockValidateToken }}>
+        <MemoryRouter>
+          <LoginWithToken />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
+
+    fireEvent.click(screen.getByLabelText('GitHub Docs'));
+
+    expect(openExternalMock).toHaveBeenCalledTimes(1);
+  });
 });

src/routes/LoginWithToken.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeftIcon } from '@primer/octicons-react';
+import { ArrowLeftIcon, BookIcon, SignInIcon } from '@primer/octicons-react';
 
 import { type FC, useCallback, useContext, useState } from 'react';
 import { Form, type FormRenderProps } from 'react-final-form';
@@ -12,6 +12,9 @@ import { Constants } from '../utils/constants';
 
 import { format } from 'date-fns';
 
+const GITHUB_DOCS_URL =
+  'https://docs.github.com/en/enterprise-server@3.13/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens';
+
 interface IValues {
   token?: string;
   hostname?: string;
@@ -104,14 +107,28 @@ export const LoginWithToken: FC = () => {
           </div>
         )}
 
-        <button
-          className={`float-right px-4 py-2 my-4 ${buttonClasses}`}
-          title="Submit Button"
-          disabled={submitting || pristine}
-          type="submit"
-        >
-          Submit
-        </button>
+        <div className="flex justify-between items-center">
+          <div className="text-xs italic hover:text-blue-500 justify-center items-center">
+            <button
+              type="button"
+              aria-label="GitHub Docs"
+              className={`px-2 py-1 text-xs ${buttonClasses}`}
+              onClick={() => openLink(GITHUB_DOCS_URL)}
+            >
+              <BookIcon size={12} /> Docs
+            </button>
+          </div>
+          <div className="justify-center items-center">
+            <button
+              className={`float-right px-4 py-2 my-4 ${buttonClasses}`}
+              title="Login"
+              disabled={submitting || pristine}
+              type="submit"
+            >
+              <SignInIcon size={14} /> Login
+            </button>
+          </div>
+        </div>
       </form>
     );
   };