feat: bitbucket cloud support

add bitbucket icon, implement account refresh

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

Author: setchy

src/components/icons/AuthMethodIcon.tsx

@@ -14,6 +14,7 @@ export const AuthMethodIcon: FC<IAuthMethodIcon> = (props: IAuthMethodIcon) => {
       {props.type === 'GitHub App' && <AppsIcon size={props.size} />}
       {props.type === 'Personal Access Token' && <KeyIcon size={props.size} />}
       {props.type === 'OAuth App' && <PersonIcon size={props.size} />}
+      {props.type === 'App Password' && <KeyIcon size={props.size} />}
     </span>
   );
 };

src/components/icons/BitbucketIcon.tsx

@@ -0,0 +1,50 @@
+import type { FC } from 'react';
+import { Size } from '../../types';
+import { cn } from '../../utils/cn';
+
+interface IBitbucketIcon {
+  onClick?: () => void;
+  size: Size;
+}
+
+export const BitbucketIcon: FC<IBitbucketIcon> = ({
+  onClick,
+  size = Size.MEDIUM,
+  ...props
+}: IBitbucketIcon) => (
+  <svg
+    className={cn(
+      size === Size.XSMALL && 'size-4',
+      size === Size.SMALL && 'size-6',
+      size === Size.MEDIUM && 'size-8',
+      size === Size.LARGE && 'size-10',
+    )}
+    onClick={() => onClick?.()}
+    xmlns="https://www.w3.org/2000/svg"
+    xmlnsXlink="https://www.w3.org/1999/xlink"
+    viewBox="0 0 512 512"
+    role="img"
+    aria-label="Bitbucket Cloud"
+    {...props}
+  >
+    <rect width="512" height="512" rx="15%" fill="none" fillRule="evenodd" />
+    <path
+      fill="#2684ff"
+      d="M422 130a10 10 0 00-9.9-11.7H100.5a10 10 0 00-10 11.7L136 409a10 10 0 009.9 8.4h221c5 0 9.2-3.5 10 -8.4L422 130zM291 316.8h-69.3l-18.7-98h104.8z"
+    />
+    <path
+      fill="url(#a)"
+      d="M59.632 25.2H40.94l-3.1 18.3h-13v18.9H52c1 0 1.7-.7 1.8-1.6l5.8-35.6z"
+      transform="translate(89.8 85) scale(5.3285)"
+    />
+    <linearGradient
+      id="a"
+      x2="1"
+      gradientTransform="rotate(141 22.239 22.239) scale(31.4)"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset="0" stopColor="#0052cc" />
+      <stop offset="1" stopColor="#2684ff" />
+    </linearGradient>
+  </svg>
+);

src/components/icons/PlatformIcon.tsx

@@ -1,7 +1,8 @@
-import { BeakerIcon, MarkGithubIcon, ServerIcon } from '@primer/octicons-react';
+import { MarkGithubIcon, ServerIcon } from '@primer/octicons-react';
 import type { FC } from 'react';
 import type { Size } from '../../types';
 import type { PlatformType } from '../../utils/auth/types';
+import { BitbucketIcon } from './BitbucketIcon';
 
 export interface IPlatformIcon {
   type: PlatformType;
@@ -15,7 +16,7 @@ export const PlatformIcon: FC<IPlatformIcon> = (props: IPlatformIcon) => {
       {props.type === 'GitHub Enterprise Server' && (
         <ServerIcon size={props.size} />
       )}
-      {props.type === 'Bitbucket Cloud' && <BeakerIcon size={props.size} />}
+      {props.type === 'Bitbucket Cloud' && <BitbucketIcon size={props.size} />}
     </span>
   );
 };

src/components/notification/Pills.tsx

@@ -1,4 +1,5 @@
 import {
+  CheckboxIcon,
   CommentIcon,
   IssueClosedIcon,
   MilestoneIcon,
@@ -24,6 +25,10 @@ export const Pills: FC<IPills> = ({ notification }: IPills) => {
     notification.subject.comments > 1 ? 'comments' : 'comment'
   }`;
 
+  const tasksPillDescription = `${notification.subject.tasks} ${
+    notification.subject.tasks > 1 ? 'tasks' : 'task'
+  }`;
+
   const labelsPillDescription = notification.subject.labels
     ?.map((label) => `🏷️ ${label}`)
     .join('\n');
@@ -87,6 +92,14 @@ export const Pills: FC<IPills> = ({ notification }: IPills) => {
             }
           />
         )}
+        {notification.subject?.tasks > 0 && (
+          <PillButton
+            title={tasksPillDescription}
+            metric={notification.subject.tasks}
+            icon={CheckboxIcon}
+            color={IconColor.GRAY}
+          />
+        )}
       </div>
     )
   );

src/context/App.tsx

@@ -251,7 +251,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
         auth,
         'App Password',
         token,
-        `https://api.bitbucket.org/internal/workspaces/${workspace}` as Hostname,
+        `https://api.bitbucket.org/internal/workspaces/${workspace}` as Hostname, // TODO - ideally we don't set it like this
         username,
       );
       setAuth(updatedAuth);

src/routes/Accounts.tsx

@@ -1,5 +1,4 @@
 import {
-  BeakerIcon,
   FeedPersonIcon,
   KeyIcon,
   MarkGithubIcon,
@@ -17,6 +16,7 @@ import { useNavigate } from 'react-router-dom';
 import { Header } from '../components/Header';
 import { AuthMethodIcon } from '../components/icons/AuthMethodIcon';
 import { AvatarIcon } from '../components/icons/AvatarIcon';
+import { BitbucketIcon } from '../components/icons/BitbucketIcon';
 import { PlatformIcon } from '../components/icons/PlatformIcon';
 import { AppContext } from '../context/App';
 import { BUTTON_CLASS_NAME } from '../styles/gitify';
@@ -112,8 +112,13 @@ export const AccountsRoute: FC = () => {
                     title="Open Host"
                     onClick={() => openHost(account.hostname)}
                   >
-                    <PlatformIcon type={account.platform} size={Size.XSMALL} />
-                    {account.hostname}
+                    <div className="flex flex-col-1">
+                      <PlatformIcon
+                        type={account.platform}
+                        size={Size.XSMALL}
+                      />
+                      {account.hostname.split('/').pop()}
+                    </div>
                   </button>
                 </div>
                 <div>
@@ -227,11 +232,13 @@ export const AccountsRoute: FC = () => {
             title="Login with Bitbucket Cloud"
             onClick={loginWithBitbucketCloud}
           >
-            <BeakerIcon
-              size={Size.XLARGE}
-              aria-label="Login with Bitbucket Cloud"
-            />
-            <PlusIcon size={Size.SMALL} className="mb-2" />
+            <div className="flex flex-col-1">
+              <BitbucketIcon
+                size={Size.MEDIUM}
+                aria-label="Login with Bitbucket Cloud"
+              />
+              <PlusIcon size={Size.SMALL} className="mb-2" />
+            </div>
           </button>
         </div>
       </div>

src/typesGitHub.ts

@@ -268,6 +268,7 @@ export interface GitifySubject {
   reviews?: GitifyPullRequestReview[];
   linkedIssues?: string[];
   comments?: number;
+  tasks?: number;
   labels?: string[];
   milestone?: Milestone;
 }

src/utils/api/bitbucket.ts

@@ -0,0 +1,38 @@
+import type { AxiosPromise } from 'axios';
+import type { Account, Link } from '../../types';
+import type { Notification, UserDetails } from '../../typesGitHub';
+import { apiRequestBitbucket } from './request';
+/**
+ * List all notifications for the current user, sorted by most recently updated.
+ *
+ * Endpoint documentation: https://docs.github.com/en/rest/activity/notifications#list-notifications-for-the-authenticated-user
+ */
+// TODO - Correct types
+export function listBitbucketWork(
+  account: Account,
+): AxiosPromise<Notification[]> {
+  const url = `${account.hostname}/overview-view-state?fields=pullRequests.reviewing.id,pullRequests.reviewing.title,pullRequest.reviewing.state,pullRequests.reviewing.author,pullRequests.reviewing.created_on,pullRequests.reviewing.updated_on,pullRequests.reviewing.links,pullRequests.reviewing.task_count,pullRequests.reviewing.comment_count,pullRequests.reviewing.destination.repository.*`;
+
+  return apiRequestBitbucket(
+    url.toString() as Link,
+    'GET',
+    account.user.login,
+    account.token,
+  );
+}
+
+/**
+ * Get the authenticated user
+ *
+ * Endpoint documentation: https://docs.github.com/en/rest/users/users#get-the-authenticated-user
+ */
+export function getBitbucketUser(account: Account): AxiosPromise<UserDetails> {
+  const url = 'https://api.bitbucket.org/2.0/user';
+
+  return apiRequestBitbucket(
+    url.toString() as Link,
+    'GET',
+    account.user.login,
+    account.token,
+  );
+}

src/utils/api/client.ts

@@ -24,7 +24,7 @@ import type {
 } from '../../typesGitHub';
 import { QUERY_SEARCH_DISCUSSIONS } from './graphql/discussions';
 import { formatAsGitHubSearchSyntax } from './graphql/utils';
-import { apiRequestAuth, apiRequestBitbucket } from './request';
+import { apiRequestAuth } from './request';
 import { getGitHubAPIBaseUrl, getGitHubGraphQLUrl } from './utils';
 
 /**
@@ -69,25 +69,6 @@ export function listNotificationsForAuthenticatedUser(
   return apiRequestAuth(url.toString() as Link, 'GET', account.token);
 }
 
-/**
- * List all notifications for the current user, sorted by most recently updated.
- *
- * Endpoint documentation: https://docs.github.com/en/rest/activity/notifications#list-notifications-for-the-authenticated-user
- */
-export function listBitbucketWork(
-  account: Account,
-): AxiosPromise<Notification[]> {
-  const url = `${account.hostname}/overview-view-state?fields=pullRequests.reviewing.id,pullRequests.reviewing.title,pullRequest.reviewing.state,pullRequests.reviewing.author,pullRequests.reviewing.created_on,pullRequests.reviewing.updated_on,pullRequests.reviewing.links,pullRequests.reviewing.task_count,pullRequests.reviewing.comment_count,pullRequests.reviewing.destination.repository.*`;
-
-  console.log(url);
-  return apiRequestBitbucket(
-    url.toString() as Link,
-    'GET',
-    account.user.login,
-    account.token,
-  );
-}
-
 /**
  * Marks a thread as "read." Marking a thread as "read" is equivalent to
  * clicking a notification in your notification inbox on GitHub.

src/utils/auth/utils.ts

@@ -13,6 +13,7 @@ import type {
   Username,
 } from '../../types';
 import type { UserDetails } from '../../typesGitHub';
+import { getBitbucketUser } from '../api/bitbucket';
 import { getAuthenticatedUser } from '../api/client';
 import { apiRequest } from '../api/request';
 import { Constants } from '../constants';
@@ -138,16 +139,7 @@ export async function addAccount(
     token: token,
   } as Account;
 
-  if (newAccount.platform === 'Bitbucket Cloud') {
-    newAccount.user = {
-      id: 0,
-      login: username,
-      name: username,
-      avatar: null,
-    };
-  } else {
-    newAccount = await refreshAccount(newAccount);
-  }
+  newAccount = await refreshAccount(newAccount);
 
   return {
     accounts: [...auth.accounts, newAccount],
@@ -165,6 +157,38 @@ export function removeAccount(auth: AuthState, account: Account): AuthState {
 }
 
 export async function refreshAccount(account: Account): Promise<Account> {
+  if (account.platform === 'Bitbucket Cloud') {
+    return refreshBitbucketAccount(account);
+  }
+
+  return refreshGitHubAccount(account);
+}
+
+export async function refreshBitbucketAccount(
+  account: Account,
+): Promise<Account> {
+  try {
+    // TODO correctly type
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    const res: any = await getBitbucketUser(account);
+
+    console.log(JSON.stringify(res));
+
+    // Refresh user data
+    account.user = {
+      id: res.data.account_id,
+      login: res.data.username,
+      name: res.data.display_name,
+      avatar: res.data.links.avatar.href,
+    };
+  } catch (error) {
+    log.error('Failed to refresh account', error);
+  }
+
+  return account;
+}
+
+export async function refreshGitHubAccount(account: Account): Promise<Account> {
   try {
     const res = await getAuthenticatedUser(account.hostname, account.token);
 

src/utils/notifications.ts

@@ -5,10 +5,8 @@ import type {
   SettingsState,
 } from '../types';
 import { Notification } from '../typesGitHub';
-import {
-  listBitbucketWork,
-  listNotificationsForAuthenticatedUser,
-} from './api/client';
+import { listBitbucketWork } from './api/bitbucket';
+import { listNotificationsForAuthenticatedUser } from './api/client';
 import { determineFailureType } from './api/errors';
 import { getAccountUUID } from './auth/utils';
 import { hideWindow, showWindow, updateTrayIcon } from './comms';
@@ -142,7 +140,7 @@ export async function getAllNotifications(
               ((await accountNotifications.notifications).data as any)
                 .pullRequests?.reviewing;
 
-            // console.log(pulls);
+            console.log(pulls);
             const notifications = pulls?.map((pull: any) => ({
               id: `${pull.destination.repository.full_name}-${pull.id}`,
               reason: 'review_requested',
@@ -167,6 +165,8 @@ export async function getAllNotifications(
                   avatar_url: pull.author.links.avatar.href,
                   type: 'User',
                 },
+                comments: pull.comment_count,
+                tasks: pull.task_count,
               },
               account: accountNotifications.account,
             }));