feat: add bitbucket cloud support

setchy · setchy · commit 4cb2136fcd96 · 2024-08-28T08:16:00.000-04:00
Signed-off-by: Adam Setch &lt;adam.setch@outlook.com&gt;
diff --git a/src/app.tsx b/src/app.tsx
@@ -12,6 +12,7 @@ import { AppContext, AppProvider } from './context/App';
 import { AccountsRoute } from './routes/Accounts';
 import { FiltersRoute } from './routes/Filters';
 import { LoginRoute } from './routes/Login';
+import { LoginWithBitbucketCloud } from './routes/LoginWithBitbucketCloud';
 import { LoginWithOAuthApp } from './routes/LoginWithOAuthApp';
 import { LoginWithPersonalAccessToken } from './routes/LoginWithPersonalAccessToken';
 import { NotificationsRoute } from './routes/Notifications';
@@ -61,7 +62,7 @@ export const App = () => {
               }
             />
             <Route
-              path="/accounts"
+              path="/settings/accounts"
               element={
                 <RequireAuth>
                   <AccountsRoute />
@@ -74,6 +75,10 @@ export const App = () => {
               element={<LoginWithPersonalAccessToken />}
             />
             <Route path="/login-oauth-app" element={<LoginWithOAuthApp />} />
+            <Route
+              path="/login-bitbucket-cloud"
+              element={<LoginWithBitbucketCloud />}
+            />
           </Routes>
         </div>
       </Router>
diff --git a/src/components/settings/SettingsFooter.test.tsx b/src/components/settings/SettingsFooter.test.tsx
@@ -125,7 +125,7 @@ describe('routes/components/settings/SettingsFooter.tsx', () => {
     });
 
     fireEvent.click(screen.getByTitle('Accounts'));
-    expect(mockNavigate).toHaveBeenCalledWith('/accounts');
+    expect(mockNavigate).toHaveBeenCalledWith('/settings/accounts');
   });
 
   it('should quit the app', async () => {
diff --git a/src/components/settings/SettingsFooter.tsx b/src/components/settings/SettingsFooter.tsx
@@ -39,7 +39,7 @@ export const SettingsFooter: FC = () => {
           className={BUTTON_CLASS_NAME}
           title="Accounts"
           onClick={() => {
-            navigate('/accounts');
+            navigate('/settings/accounts');
           }}
         >
           <PersonIcon size={Size.LARGE} aria-label="Accounts" />
diff --git a/src/context/App.tsx b/src/context/App.tsx
@@ -15,6 +15,7 @@ import {
   type AuthState,
   type GitifyError,
   GroupBy,
+  type Hostname,
   OpenPreference,
   type SettingsState,
   type SettingsValue,
@@ -25,6 +26,7 @@ import type { Notification } from '../typesGitHub';
 import { headNotifications } from '../utils/api/client';
 import { migrateAuthenticatedAccounts } from '../utils/auth/migration';
 import type {
+  LoginBitbucketCloudOptions,
   LoginOAuthAppOptions,
   LoginPersonalAccessTokenOptions,
 } from '../utils/auth/types';
@@ -97,6 +99,7 @@ interface AppContextState {
   loginWithGitHubApp: () => void;
   loginWithOAuthApp: (data: LoginOAuthAppOptions) => void;
   loginWithPersonalAccessToken: (data: LoginPersonalAccessTokenOptions) => void;
+  loginWithBitbucketCloud: (data: LoginBitbucketCloudOptions) => void;
   logoutFromAccount: (account: Account) => void;
 
   notifications: AccountNotifications[];
@@ -242,6 +245,21 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     [auth, settings],
   );
 
+  const loginWithBitbucketCloud = useCallback(
+    async ({ token, workspace, username }: LoginBitbucketCloudOptions) => {
+      const updatedAuth = await addAccount(
+        auth,
+        'App Password',
+        token,
+        `https://api.bitbucket.org/internal/workspaces/${workspace}` as Hostname,
+        username,
+      );
+      setAuth(updatedAuth);
+      saveState({ auth: updatedAuth, settings });
+    },
+    [auth, settings],
+  );
+
   const logoutFromAccount = useCallback(
     async (account: Account) => {
       // Remove notifications for account
@@ -320,6 +338,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
         loginWithGitHubApp,
         loginWithOAuthApp,
         loginWithPersonalAccessToken,
+        loginWithBitbucketCloud,
         logoutFromAccount,
 
         notifications,
diff --git a/src/routes/Accounts.test.tsx b/src/routes/Accounts.test.tsx
@@ -196,7 +196,7 @@ describe('routes/Accounts.tsx', () => {
         'token-123-456',
       );
       await waitFor(() =>
-        expect(mockNavigate).toHaveBeenNthCalledWith(1, '/accounts', {
+        expect(mockNavigate).toHaveBeenNthCalledWith(1, '/settings/accounts', {
           replace: true,
         }),
       );
diff --git a/src/routes/Accounts.tsx b/src/routes/Accounts.tsx
@@ -1,4 +1,5 @@
 import {
+  BeakerIcon,
   FeedPersonIcon,
   KeyIcon,
   MarkGithubIcon,
@@ -48,7 +49,7 @@ export const AccountsRoute: FC = () => {
   const setAsPrimaryAccount = useCallback((account: Account) => {
     auth.accounts = [account, ...auth.accounts.filter((a) => a !== account)];
     saveState({ auth, settings });
-    navigate('/accounts', { replace: true });
+    navigate('/settings/accounts', { replace: true });
   }, []);
 
   const loginWithGitHub = useCallback(async () => {
@@ -67,6 +68,10 @@ export const AccountsRoute: FC = () => {
     return navigate('/login-oauth-app', { replace: true });
   }, []);
 
+  const loginWithBitbucketCloud = useCallback(() => {
+    return navigate('/login-bitbucket-cloud', { replace: true });
+  }, []);
+
   return (
     <div className="flex h-screen flex-col" data-testid="accounts">
       <Header icon={PersonIcon}>Accounts</Header>
@@ -155,7 +160,7 @@ export const AccountsRoute: FC = () => {
                   title={`Refresh ${account.user.login}`}
                   onClick={async () => {
                     await refreshAccount(account);
-                    navigate('/accounts', { replace: true });
+                    navigate('/settings/accounts', { replace: true });
                   }}
                 >
                   <SyncIcon
@@ -216,6 +221,18 @@ export const AccountsRoute: FC = () => {
             <PersonIcon size={Size.XLARGE} aria-label="Login with OAuth App" />
             <PlusIcon size={Size.SMALL} className="mb-2" />
           </button>
+          <button
+            type="button"
+            className={BUTTON_CLASS_NAME}
+            title="Login with Bitbucket Cloud"
+            onClick={loginWithBitbucketCloud}
+          >
+            <BeakerIcon
+              size={Size.XLARGE}
+              aria-label="Login with Bitbucket Cloud"
+            />
+            <PlusIcon size={Size.SMALL} className="mb-2" />
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
@@ -1,4 +1,9 @@
-import { KeyIcon, MarkGithubIcon, PersonIcon } from '@primer/octicons-react';
+import {
+  BeakerIcon,
+  KeyIcon,
+  MarkGithubIcon,
+  PersonIcon,
+} from '@primer/octicons-react';
 import log from 'electron-log';
 import { type FC, useCallback, useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -63,6 +68,14 @@ export const LoginRoute: FC = () => {
       >
         OAuth App
       </Button>
+      <Button
+        icon={{ icon: BeakerIcon }}
+        label="Login with Bitbucket Cloud"
+        className="mt-2 py-2"
+        onClick={() => navigate('/login-bitbucket-cloud')}
+      >
+        Bitbucket Cloud
+      </Button>
     </div>
   );
 };
diff --git a/src/routes/LoginWithBitbucketCloud.tsx b/src/routes/LoginWithBitbucketCloud.tsx
@@ -0,0 +1,137 @@
+import { BookIcon, KeyIcon, SignInIcon } from '@primer/octicons-react';
+import log from 'electron-log';
+import { type FC, useCallback, useContext, useState } from 'react';
+import { Form, type FormRenderProps } from 'react-final-form';
+import { useNavigate } from 'react-router-dom';
+import { Header } from '../components/Header';
+import { Button } from '../components/buttons/Button';
+import { FieldInput } from '../components/fields/FieldInput';
+import { AppContext } from '../context/App';
+import { Size, type Token, type Username, type Workspace } from '../types';
+import type { LoginBitbucketCloudOptions } from '../utils/auth/types';
+import { isValidAppPassword } from '../utils/auth/utils';
+import { Constants } from '../utils/constants';
+
+interface IValues {
+  username: Username;
+  token?: Token;
+  workspace?: Workspace;
+}
+
+interface IFormErrors {
+  username?: string;
+  token?: string;
+  workspace?: string;
+}
+
+export const validate = (values: IValues): IFormErrors => {
+  const errors: IFormErrors = {};
+
+  if (!values.username) {
+    errors.token = 'Required';
+  }
+
+  if (!values.token) {
+    errors.token = 'Required';
+  } else if (!isValidAppPassword(values.token)) {
+    errors.token = 'Invalid app password.';
+  }
+
+  if (!values.workspace) {
+    errors.workspace = 'Required';
+  }
+
+  return errors;
+};
+
+export const LoginWithBitbucketCloud: FC = () => {
+  const { loginWithBitbucketCloud } = useContext(AppContext);
+  const navigate = useNavigate();
+  const [isValidToken, setIsValidToken] = useState<boolean>(true);
+
+  const renderForm = (formProps: FormRenderProps) => {
+    const { handleSubmit, submitting, pristine, values } = formProps;
+
+    return (
+      <form onSubmit={handleSubmit}>
+        <FieldInput
+          name="username"
+          label="Username"
+          placeholder="Your Bitbucket Cloud username"
+        />
+
+        <FieldInput
+          name="token"
+          label="App Password"
+          placeholder="The 36 characters app password generated on Bitbucket Cloud"
+        />
+
+        <FieldInput
+          name="workspace"
+          label="Workspace"
+          placeholder="Your Bitbucket Cloud workspace name"
+        />
+
+        {!isValidToken && (
+          <div className="mt-4 text-sm font-medium text-red-500">
+            This token could not be validated with {values.workspace}.
+          </div>
+        )}
+
+        <div className="flex items-end justify-between mt-2">
+          <Button
+            label="Bitbucket Cloud Docs"
+            icon={{ icon: BookIcon, size: Size.XSMALL }}
+            url={Constants.ATLASSIAN_DOCS.BITBUCKET_APP_PASSWORD_URL}
+            size="xs"
+          >
+            Docs
+          </Button>
+          <Button
+            label="Login"
+            className="px-4 py-2 !text-sm"
+            icon={{ icon: SignInIcon, size: Size.MEDIUM }}
+            disabled={submitting || pristine}
+            type="submit"
+          >
+            Login
+          </Button>
+        </div>
+      </form>
+    );
+  };
+
+  const login = useCallback(
+    async (data: IValues) => {
+      setIsValidToken(true);
+      try {
+        await loginWithBitbucketCloud(data as LoginBitbucketCloudOptions);
+        navigate(-1);
+      } catch (err) {
+        log.error('Auth: failed to login with personal access token', err);
+        setIsValidToken(false);
+      }
+    },
+    [loginWithBitbucketCloud],
+  );
+
+  return (
+    <>
+      <Header icon={KeyIcon}>Login with Bitbucket Cloud</Header>
+
+      <div className="px-8">
+        <Form
+          initialValues={{
+            username: '' as Username,
+            token: '' as Token,
+            workspace: '' as Workspace,
+          }}
+          onSubmit={login}
+          validate={validate}
+        >
+          {renderForm}
+        </Form>
+      </div>
+    </>
+  );
+};
diff --git a/src/types.ts b/src/types.ts
@@ -39,6 +39,10 @@ export type ClientSecret = Branded<string, 'ClientSecret'>;
 
 export type Hostname = Branded<string, 'Hostname'>;
 
+export type Username = Branded<string, 'Username'>;
+
+export type Workspace = Branded<string, 'Workspace'>;
+
 export type Link = Branded<string, 'WebUrl'>;
 
 export type Status = 'loading' | 'success' | 'error';
diff --git a/src/utils/auth/types.ts b/src/utils/auth/types.ts
@@ -4,11 +4,20 @@ import type {
   ClientSecret,
   Hostname,
   Token,
+  Username,
+  Workspace,
 } from '../../types';
 
-export type AuthMethod = 'GitHub App' | 'Personal Access Token' | 'OAuth App';
+export type AuthMethod =
+  | 'GitHub App'
+  | 'Personal Access Token'
+  | 'OAuth App'
+  | 'App Password';
 
-export type PlatformType = 'GitHub Cloud' | 'GitHub Enterprise Server';
+export type PlatformType =
+  | 'GitHub Cloud'
+  | 'GitHub Enterprise Server'
+  | 'Bitbucket Cloud';
 
 export interface LoginOAuthAppOptions {
   hostname: Hostname;
@@ -21,6 +30,12 @@ export interface LoginPersonalAccessTokenOptions {
   token: Token;
 }
 
+export interface LoginBitbucketCloudOptions {
+  username: Username;
+  token: Token;
+  workspace: Workspace;
+}
+
 export interface AuthResponse {
   authCode: AuthCode;
   authOptions: LoginOAuthAppOptions;
diff --git a/src/utils/auth/utils.ts b/src/utils/auth/utils.ts
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
diff --git a/src/utils/notifications.ts b/src/utils/notifications.ts

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ export const SettingsFooter: FC = () => {`
`39`	`39`	`className={BUTTON_CLASS_NAME}`
`40`	`40`	`title="Accounts"`
`41`	`41`	`onClick={() => {`
`42`		`- navigate('/accounts');`
	`42`	`+ navigate('/settings/accounts');`
`43`	`43`	`}}`
`44`	`44`	`>`
`45`	`45`	`<PersonIcon size={Size.LARGE} aria-label="Accounts" />`