From a63104e75958a8991fdcb571faf179be8112744d Mon Sep 17 00:00:00 2001 From: Jose Garcia Date: Wed, 8 May 2024 17:53:56 -0700 Subject: [PATCH 1/2] Update external links so that they close the popup in Firefox --- src/popup/components/ConnectAProvider.tsx | 21 +++++------- src/popup/components/ExternalLink.tsx | 42 +++++++++++++++++++++++ src/popup/components/FocusView.tsx | 11 +++--- src/popup/components/SignedIn.tsx | 5 +-- src/popup/components/SignedOut.tsx | 9 ++--- 5 files changed, 64 insertions(+), 24 deletions(-) create mode 100644 src/popup/components/ExternalLink.tsx 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..d2af9a5 100644 --- a/src/popup/components/FocusView.tsx +++ b/src/popup/components/FocusView.tsx @@ -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; @@ -29,10 +30,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,7 +41,7 @@ const PullRequestRow = ({ userId, pullRequest, provider, draftCount = 0 }: PullR title={`View pull request on ${ProviderMeta[provider].name}`} > #{pullRequest.number} - +
{pullRequest.url && ( {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}
- + - +