Show an error message when Launchpad fails to load data (#45)

src/popup/components/FocusView.tsx

@@ -6,7 +6,7 @@ import { storage } from 'webextension-polyfill';
 import { getGitKrakenDeepLinkUrl } from '../../deepLink';
 import { ProviderMeta } from '../../providers';
 import { GKDotDevUrl } from '../../shared';
-import type { FocusViewSupportedProvider } from '../../types';
+import type { FocusViewDataError, FocusViewSupportedProvider } from '../../types';
 import { useFocusViewConnectedProviders, useFocusViewDataQuery, usePullRequestDraftCountsQuery } from '../hooks';
 import { ConnectAProvider } from './ConnectAProvider';
 import { ExternalLink } from './ExternalLink';
@@ -189,6 +189,52 @@ export const FocusView = ({ userId }: { userId: string }) => {
 		return <ConnectAProvider />;
 	}
 
+	let content: JSX.Element | null = null;
+	if (focusViewDataQuery.isLoading) {
+		content = (
+			<div className="text-center">
+				<i className="fa-regular fa-spinner-third fa-spin" />
+			</div>
+		);
+	} else if (focusViewDataQuery.error) {
+		const error = focusViewDataQuery.error as FocusViewDataError;
+		content = (
+			<div className="focus-view-error text-secondary">
+				<div className="italic">
+					An unexpected error occurred trying to load Launchpad data.{' '}
+					{error.domain ? (
+						<>
+							Make sure the service at{' '}
+							<ExternalLink className="text-link" href={error.domain}>
+								{error.domain}
+							</ExternalLink>{' '}
+							is reachable. If it is, make sure your access token is still valid.
+						</>
+					) : (
+						'Make sure your access token is still valid.'
+					)}
+				</div>
+				<ExternalLink className="text-link manage-integrations" href={`${GKDotDevUrl}/settings/integrations`}>
+					Manage Integration Settings
+				</ExternalLink>
+			</div>
+		);
+	} else {
+		content = (
+			<div className="pull-request-buckets">
+				{filteredBuckets?.map(bucket => (
+					<Bucket
+						key={bucket.id}
+						userId={userId}
+						bucket={bucket}
+						provider={selectedProvider}
+						prDraftCountsByEntityID={prDraftCountsQuery.data}
+					/>
+				))}
+			</div>
+		);
+	}
+
 	return (
 		<div className="focus-view">
 			{selectedProvider && (
@@ -224,23 +270,7 @@ export const FocusView = ({ userId }: { userId: string }) => {
 					</select>
 				</div>
 			)}
-			{focusViewDataQuery.isLoading ? (
-				<div className="text-center">
-					<i className="fa-regular fa-spinner-third fa-spin" />
-				</div>
-			) : (
-				<div className="pull-request-buckets">
-					{filteredBuckets?.map(bucket => (
-						<Bucket
-							key={bucket.id}
-							userId={userId}
-							bucket={bucket}
-							provider={selectedProvider}
-							prDraftCountsByEntityID={prDraftCountsQuery.data}
-						/>
-					))}
-				</div>
-			)}
+			{content}
 		</div>
 	);
 };

src/providers.ts

@@ -133,20 +133,27 @@ export const fetchFocusViewData = async (provider: FocusViewSupportedProvider):
 		return null;
 	}
 
-	switch (provider) {
-		case 'github':
-		case 'githubEnterprise':
-			return fetchGitHubFocusViewData(providerToken);
-		case 'gitlab':
-		case 'gitlabSelfHosted':
-			return fetchGitLabFocusViewData(providerToken);
-		case 'bitbucket':
-			return fetchBitbucketFocusViewData(providerToken);
-		case 'bitbucketServer':
-			return fetchBitbucketServerFocusViewData(providerToken);
-		case 'azure':
-			return fetchAzureFocusViewData(providerToken);
-		default:
-			throw new Error(`Attempted to fetch pull requests for unsupported provider: ${provider as Provider}`);
+	try {
+		switch (provider) {
+			case 'github':
+			case 'githubEnterprise':
+				return await fetchGitHubFocusViewData(providerToken);
+			case 'gitlab':
+			case 'gitlabSelfHosted':
+				return await fetchGitLabFocusViewData(providerToken);
+			case 'bitbucket':
+				return await fetchBitbucketFocusViewData(providerToken);
+			case 'bitbucketServer':
+				return await fetchBitbucketServerFocusViewData(providerToken);
+			case 'azure':
+				return await fetchAzureFocusViewData(providerToken);
+			default:
+				throw new Error(`Attempted to fetch pull requests for unsupported provider: ${provider as Provider}`);
+		}
+	} catch (e) {
+		if (e) {
+			Object.assign(e, { provider: provider, domain: providerToken.domain });
+		}
+		throw e;
 	}
 };

src/types.ts

@@ -40,6 +40,11 @@ export type FocusViewData = {
 	pullRequests: PullRequestWithUniqueID[];
 };
 
+export type FocusViewDataError = Error & {
+	provider?: Provider;
+	domain?: string;
+};
+
 export interface ProviderConnection {
 	provider: Provider;
 	type: string;

static/popup.css

@@ -269,6 +269,16 @@ html {
 	margin-right: 4px;
 }
 
+/* Focus View - Error */
+.focus-view .focus-view-error {
+	display: flex;
+	flex-direction: column;
+}
+.focus-view .focus-view-error .manage-integrations {
+	text-align: center;
+	margin-top: 8px;
+}
+
 /* Generic components */
 button.icon-btn {
 	background: none;