feat(auth): add create oauth app link to enterprise route (#1119)

* feat(auth): add `create oauth app` link to enterprise route

* feat(auth): add `create oauth app` link to enterprise route

* feat(auth): add `create oauth app` link to enterprise route

* feat(auth): add `create oauth app` link to enterprise route

Author: setchy

src/routes/LoginEnterprise.test.tsx

@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import * as TestRenderer from 'react-test-renderer';
 const { ipcRenderer } = require('electron');
+import { shell } from 'electron';
 import { mockedEnterpriseAccounts } from '../__mocks__/mockedData';
 import { AppContext } from '../context/App';
 import type { AuthState } from '../types';
@@ -14,6 +15,8 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('routes/LoginEnterprise.tsx', () => {
+  const openExternalMock = jest.spyOn(shell, 'openExternal');
+
   const mockAccounts: AuthState = {
     enterpriseAccounts: [],
     user: null,
@@ -75,6 +78,40 @@ describe('routes/LoginEnterprise.tsx', () => {
     expect(validate(values).clientSecret).toBe('Invalid client secret.');
   });
 
+  describe("'Create new OAuth App' button", () => {
+    it('should be disabled if no hostname configured', async () => {
+      render(
+        <AppContext.Provider value={{ accounts: mockAccounts }}>
+          <MemoryRouter>
+            <LoginEnterpriseRoute />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+
+      fireEvent.click(screen.getByText('Create new OAuth App'));
+
+      expect(openExternalMock).toHaveBeenCalledTimes(0);
+    });
+
+    it('should open in browser if hostname configured', async () => {
+      render(
+        <AppContext.Provider value={{ accounts: mockAccounts }}>
+          <MemoryRouter>
+            <LoginEnterpriseRoute />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+
+      fireEvent.change(screen.getByLabelText('Hostname'), {
+        target: { value: 'company.github.com' },
+      });
+
+      fireEvent.click(screen.getByText('Create new OAuth App'));
+
+      expect(openExternalMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
   it('should receive a logged-in enterprise account', () => {
     const { rerender } = render(
       <AppContext.Provider value={{ accounts: mockAccounts }}>

src/routes/LoginEnterprise.tsx

@@ -9,6 +9,8 @@ import { useNavigate } from 'react-router-dom';
 import { FieldInput } from '../components/fields/FieldInput';
 import { AppContext } from '../context/App';
 import type { AuthOptions } from '../types';
+import { getNewOAuthAppURL } from '../utils/auth';
+import { openExternalLink } from '../utils/comms';
 
 interface IValues {
   hostname?: string;
@@ -65,15 +67,38 @@ export const LoginEnterpriseRoute: FC = () => {
     }
   }, [enterpriseAccounts]);
 
+  const openLink = useCallback((url: string) => {
+    openExternalLink(url);
+  }, []);
+
   const renderForm = (formProps: FormRenderProps) => {
-    const { handleSubmit, submitting, pristine } = formProps;
+    const { handleSubmit, submitting, pristine, values } = formProps;
+
+    const buttonClasses =
+      'rounded bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer';
 
     return (
       <form onSubmit={handleSubmit}>
         <FieldInput
           name="hostname"
           label="Hostname"
           placeholder="github.company.com"
+          helpText={
+            <div>
+              <div className="mb-1">
+                <button
+                  type="button"
+                  className={`px-2 py-1 text-xs ${buttonClasses}`}
+                  disabled={!values.hostname}
+                  onClick={() => openLink(getNewOAuthAppURL(values.hostname))}
+                >
+                  Create new OAuth App
+                </button>{' '}
+                then{' '}
+                <span className="italic">generate a new client secret</span>.
+              </div>
+            </div>
+          }
         />
 
         <FieldInput name="clientId" label="Client ID" placeholder="123456789" />

src/routes/__snapshots__/LoginEnterprise.test.tsx.snap

@@ -6,6 +6,7 @@ const browserWindow = new remote.BrowserWindow();
 import type { AuthState } from '../types';
 import * as apiRequests from './api/request';
 import * as auth from './auth';
+import { getNewOAuthAppURL } from './auth';
 
 describe('utils/auth.tsx', () => {
   describe('authGitHub', () => {
@@ -130,4 +131,22 @@ describe('utils/auth.tsx', () => {
       });
     });
   });
+
+  describe('getNewOAuthAppURL', () => {
+    it('should generate new oauth app url - github cloud', () => {
+      expect(
+        getNewOAuthAppURL('github.com').startsWith(
+          'https://github.com/settings/applications/new',
+        ),
+      ).toBeTruthy();
+    });
+
+    it('should generate new oauth app url - github server', () => {
+      expect(
+        getNewOAuthAppURL('github.gitify.io').startsWith(
+          'https://github.gitify.io/settings/applications/new',
+        ),
+      ).toBeTruthy();
+    });
+  });
 });

src/utils/auth.test.ts

@@ -1,5 +1,6 @@
 import { BrowserWindow } from '@electron/remote';
 
+import { format } from 'date-fns';
 import type {
   AuthResponse,
   AuthState,
@@ -136,3 +137,24 @@ export const addAccount = (
     ],
   };
 };
+
+export function getNewOAuthAppURL(hostname: string): string {
+  const date = format(new Date(), 'PP p');
+  const newOAuthAppURL = new URL(
+    `https://${hostname}/settings/applications/new`,
+  );
+  newOAuthAppURL.searchParams.append(
+    'oauth_application[name]',
+    `Gitify (Created on ${date})`,
+  );
+  newOAuthAppURL.searchParams.append(
+    'oauth_application[url]',
+    'https://www.gitify.io',
+  );
+  newOAuthAppURL.searchParams.append(
+    'oauth_application[callback_url]',
+    'https://www.gitify.io/callback',
+  );
+
+  return newOAuthAppURL.toString();
+}