diff --git a/src/deepLink.ts b/src/deepLink.ts index 93d54e6..09db07a 100644 --- a/src/deepLink.ts +++ b/src/deepLink.ts @@ -229,12 +229,3 @@ export const getGitKrakenDeepLinkUrl = (provider: FocusViewSupportedProvider, ur return getGKDotDevLinkUrl(redirectUrl); }; - -export const openGitKrakenDeepLink = (provider: FocusViewSupportedProvider, url: string | null) => { - const deepLink = getGitKrakenDeepLinkUrl(provider, url); - if (!deepLink) { - return; - } - - window.open(deepLink, '_blank'); -}; diff --git a/src/popup/components/ConnectAProvider.tsx b/src/popup/components/ConnectAProvider.tsx index 11e6f47..9a0e83b 100644 --- a/src/popup/components/ConnectAProvider.tsx +++ b/src/popup/components/ConnectAProvider.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { GKDotDevUrl } from '../../shared'; +import { ExternalLink } from './ExternalLink'; export const ConnectAProvider = () => { return ( @@ -7,38 +8,34 @@ export const ConnectAProvider = () => {
Connect an integration to see all of your pull requests
-
GitHub
- - +
GitLab
- - +
Bitbucket
- - +
Azure DevOps
- +
*Only cloud-hosted providers are currently supported. diff --git a/src/popup/components/ExternalLink.tsx b/src/popup/components/ExternalLink.tsx new file mode 100644 index 0000000..97f751d --- /dev/null +++ b/src/popup/components/ExternalLink.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { tabs } from 'webextension-polyfill'; + +type ExternalLinkProps = { + children: React.ReactNode; + className?: string; + href?: string; + onClick?: () => any; + title?: string; +}; + +export const ExternalLink = ({ children, className, href, onClick, title }: ExternalLinkProps) => { + return ( + { + // Opening external links in Firefox will not cause the popup to automatically close, + // so we must manually close it. + + // Closing the popup window before the link has finished opening will cause Firefox to open + // the link in a new window instead of in a new tab. In order to prevent this, we manually + // open the link in a new tab and await that, then close the popup window afterwards. + e.preventDefault(); + + if (onClick) { + await onClick(); + } + if (href) { + await tabs.create({ url: href }); + } + + window.close(); + }} + > + {children} + + ); +}; diff --git a/src/popup/components/FocusView.tsx b/src/popup/components/FocusView.tsx index 6448f12..8478978 100644 --- a/src/popup/components/FocusView.tsx +++ b/src/popup/components/FocusView.tsx @@ -2,7 +2,7 @@ import { GitProviderUtils } from '@gitkraken/provider-apis'; import { useQueryClient } from '@tanstack/react-query'; import React, { useEffect, useMemo, useState } from 'react'; import { storage } from 'webextension-polyfill'; -import { openGitKrakenDeepLink } from '../../deepLink'; +import { getGitKrakenDeepLinkUrl } from '../../deepLink'; import { ProviderMeta } from '../../providers'; import { GKDotDevUrl } from '../../shared'; import type { @@ -12,6 +12,7 @@ import type { } from '../../types'; import { useFocusViewConnectedProviders, useFocusViewDataQuery, usePullRequestDraftCountsQuery } from '../hooks'; import { ConnectAProvider } from './ConnectAProvider'; +import { ExternalLink } from './ExternalLink'; type PullRequestRowProps = { userId: string; @@ -22,6 +23,7 @@ type PullRequestRowProps = { const PullRequestRow = ({ userId, pullRequest, provider, draftCount = 0 }: PullRequestRowProps) => { const queryClient = useQueryClient(); + const deepLinkUrl = getGitKrakenDeepLinkUrl(provider, pullRequest.url); return ( <> @@ -29,10 +31,9 @@ const PullRequestRow = ({ userId, pullRequest, provider, draftCount = 0 }: PullR
{pullRequest.title}
{pullRequest.repository.name}
- { // Since there is a decent chance that the PR will be acted upon after the user clicks on it, // mark the focus view data as stale so that it will be refetched when the user returns. @@ -41,32 +42,25 @@ const PullRequestRow = ({ userId, pullRequest, provider, draftCount = 0 }: PullR title={`View pull request on ${ProviderMeta[provider].name}`} > #{pullRequest.number} - +
- {pullRequest.url && ( - { - openGitKrakenDeepLink(provider, pullRequest.url); - }} - title="Open with GitKraken" - > + {deepLinkUrl && ( + - + )}
{draftCount > 0 && ( - Code Suggestion{draftCount === 1 ? '' : 's'} - + )} ); diff --git a/src/popup/components/SignedIn.tsx b/src/popup/components/SignedIn.tsx index 2140ff2..cc6fae9 100644 --- a/src/popup/components/SignedIn.tsx +++ b/src/popup/components/SignedIn.tsx @@ -3,6 +3,7 @@ import { logoutUser } from '../../gkApi'; import type { PermissionsRequest } from '../../permissions-helper'; import { GKDotDevUrl } from '../../shared'; import type { User } from '../../types'; +import { ExternalLink } from './ExternalLink'; import { FocusView } from './FocusView'; import { RequestPermissionsBanner } from './RequestPermissionsBanner'; @@ -45,9 +46,9 @@ export const SignedIn = ({ permissionsRequest, user }: { permissionsRequest?: Pe
{user.name || user.username}
{user.email}
- + - +