ref(notifications): Use `ExternalLink` (#28188)

static/app/components/events/interfaces/spans/inlineDocs.tsx

@@ -4,6 +4,7 @@ import * as Sentry from '@sentry/react';
 
 import {loadDocs} from 'app/actionCreators/projects';
 import {Client} from 'app/api';
+import ExternalLink from 'app/components/links/externalLink';
 import LoadingIndicator from 'app/components/loadingIndicator';
 import {PlatformKey} from 'app/data/platformCategories';
 import {t, tct} from 'app/locale';
@@ -110,7 +111,7 @@ class InlineDocs extends Component<Props, State> {
             `To manually instrument certain regions of your code, view [docLink:our documentation].`,
             {
               docLink: (
-                <a href="https://docs.sentry.io/product/performance/getting-started/" />
+                <ExternalLink href="https://docs.sentry.io/product/performance/getting-started/" />
               ),
             }
           )}

static/app/components/repositoryEditForm.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import ExternalLink from 'app/components/links/externalLink';
 import {IconWarning} from 'app/icons';
 import {t, tct} from 'app/locale';
 import {Repository} from 'app/types';
@@ -64,7 +65,7 @@ export default class RepositoryEditForm extends React.Component<Props> {
             'Changing the [name:repo name] may have consequences if it no longer matches the repo name used when [link:sending commits with releases].',
             {
               link: (
-                <a href="https://docs.sentry.io/product/cli/releases/#sentry-cli-commit-integration" />
+                <ExternalLink href="https://docs.sentry.io/product/cli/releases/#sentry-cli-commit-integration" />
               ),
               name: <strong>repo name</strong>,
             }

static/app/views/organizationIntegrations/integrationListDirectory.tsx

@@ -10,6 +10,7 @@ import * as queryString from 'query-string';
 
 import AsyncComponent from 'app/components/asyncComponent';
 import SelectControl from 'app/components/forms/selectControl';
+import ExternalLink from 'app/components/links/externalLink';
 import {Panel, PanelBody} from 'app/components/panels';
 import SearchBar from 'app/components/searchBar';
 import SentryDocumentTitle from 'app/components/sentryDocumentTitle';
@@ -508,7 +509,7 @@ export class IntegrationListDirectory extends AsyncComponent<
                 <EmptyResultsBody>
                   {tct('[link:Build it on the Sentry Integration Platform.]', {
                     link: (
-                      <a href="https://docs.sentry.io/product/integrations/integration-platform/" />
+                      <ExternalLink href="https://docs.sentry.io/product/integrations/integration-platform/" />
                     ),
                   })}
                 </EmptyResultsBody>

static/app/views/settings/account/accountAuthorizations.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import {addErrorMessage, addSuccessMessage} from 'app/actionCreators/indicator';
 import Button from 'app/components/button';
+import ExternalLink from 'app/components/links/externalLink';
 import Link from 'app/components/links/link';
 import {Panel, PanelBody, PanelHeader, PanelItem} from 'app/components/panels';
 import {IconDelete} from 'app/icons';
@@ -90,9 +91,9 @@ class AccountAuthorizations extends AsyncView<Props, State> {
                       <ApplicationName>{authorization.application.name}</ApplicationName>
                       {authorization.homepageUrl && (
                         <Url>
-                          <a href={authorization.homepageUrl}>
+                          <ExternalLink href={authorization.homepageUrl}>
                             {authorization.homepageUrl}
-                          </a>
+                          </ExternalLink>
                         </Url>
                       )}
                       <Scopes>{authorization.scopes.join(', ')}</Scopes>

static/app/views/settings/account/apiNewToken.tsx

@@ -2,6 +2,7 @@ import {Component} from 'react';
 import DocumentTitle from 'react-document-title';
 import {browserHistory} from 'react-router';
 
+import ExternalLink from 'app/components/links/externalLink';
 import {Panel, PanelBody, PanelHeader} from 'app/components/panels';
 import {API_ACCESS_SCOPES, DEFAULT_API_ACCESS_SCOPES} from 'app/constants';
 import {t, tct} from 'app/locale';
@@ -39,7 +40,7 @@ export default class ApiNewToken extends Component {
             {tct(
               'For more information on how to use the web API, see our [link:documentation].',
               {
-                link: <a href="https://docs.sentry.io/api/" />,
+                link: <ExternalLink href="https://docs.sentry.io/api/" />,
               }
             )}
           </TextBlock>

static/app/views/settings/account/apiTokens.tsx

@@ -5,6 +5,7 @@ import {
 } from 'app/actionCreators/indicator';
 import AlertLink from 'app/components/alertLink';
 import Button from 'app/components/button';
+import ExternalLink from 'app/components/links/externalLink';
 import {Panel, PanelBody, PanelHeader} from 'app/components/panels';
 import {t, tct} from 'app/locale';
 import {InternalAppApiToken, Organization} from 'app/types';
@@ -101,7 +102,7 @@ export class ApiTokens extends AsyncView<Props, State> {
           {tct(
             'For more information on how to use the web API, see our [link:documentation].',
             {
-              link: <a href="https://docs.sentry.io/api/" />,
+              link: <ExternalLink href="https://docs.sentry.io/api/" />,
             }
           )}
         </TextBlock>

static/app/views/settings/organizationRepositories/organizationRepositories.tsx

@@ -3,6 +3,7 @@ import {RouteComponentProps} from 'react-router';
 import {Client} from 'app/api';
 import AlertLink from 'app/components/alertLink';
 import Button from 'app/components/button';
+import ExternalLink from 'app/components/links/externalLink';
 import {Panel, PanelBody, PanelHeader} from 'app/components/panels';
 import RepositoryRow from 'app/components/repositoryRow';
 import {IconCommit} from 'app/icons';
@@ -40,7 +41,7 @@ const OrganizationRepositories = ({itemList, onRepositoryChange, api, params}: P
             )}
              
             {tct('See our [link:documentation] for more details.', {
-              link: <a href="https://docs.sentry.io/learn/releases/" />,
+              link: <ExternalLink href="https://docs.sentry.io/learn/releases/" />,
             })}
           </TextBlock>
         </div>

static/app/views/settings/organizationTeams/teamNotifications.tsx

@@ -2,6 +2,7 @@ import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 
 import AsyncComponent from 'app/components/asyncComponent';
+import ExternalLink from 'app/components/links/externalLink';
 import {Panel, PanelBody, PanelHeader} from 'app/components/panels';
 import {t, tct} from 'app/locale';
 import space from 'app/styles/space';
@@ -81,7 +82,7 @@ class TeamNotificationSettings extends AsyncView<Props, State> {
           <NotDisabledSubText>
             {tct('Head over to Slack and type [code] to get started. [link].', {
               code: <code>/sentry link team</code>,
-              link: <a href={DOCS_LINK}>{t('Learn more')}</a>,
+              link: <ExternalLink href={DOCS_LINK}>{t('Learn more')}</ExternalLink>,
             })}
           </NotDisabledSubText>
         </EmptyMessage>
@@ -105,7 +106,7 @@ class TeamNotificationSettings extends AsyncView<Props, State> {
             <NotDisabledSubText>
               {tct('Unlink this channel in Slack with [code]. [link].', {
                 code: <code>/sentry unlink team</code>,
-                link: <a href={DOCS_LINK}>{t('Learn more')}</a>,
+                link: <ExternalLink href={DOCS_LINK}>{t('Learn more')}</ExternalLink>,
               })}
             </NotDisabledSubText>
           </div>

static/app/views/settings/project/projectReleaseTracking.tsx

@@ -5,6 +5,7 @@ import Alert from 'app/components/alert';
 import AutoSelectText from 'app/components/autoSelectText';
 import Button from 'app/components/button';
 import Confirm from 'app/components/confirm';
+import ExternalLink from 'app/components/links/externalLink';
 import LoadingIndicator from 'app/components/loadingIndicator';
 import {Panel, PanelBody, PanelHeader} from 'app/components/panels';
 import PluginList from 'app/components/pluginList';
@@ -140,9 +141,9 @@ class ProjectReleaseTracking extends AsyncView<Props, State> {
                 'Start by binding the [release] attribute in your application, take a look at [link] to see how to configure this for the SDK you are using.',
                 {
                   link: (
-                    <a href="https://docs.sentry.io/platform-redirect/?next=/configuration/releases/">
+                    <ExternalLink href="https://docs.sentry.io/platform-redirect/?next=/configuration/releases/">
                       our docs
-                    </a>
+                    </ExternalLink>
                   ),
                   release: <code>release</code>,
                 }
@@ -248,7 +249,7 @@ class ProjectReleaseTracking extends AsyncView<Props, State> {
 
             <p>
               {tct('See the [link:releases documentation] for more information.', {
-                link: <a href="https://docs.sentry.io/workflow/releases/" />,
+                link: <ExternalLink href="https://docs.sentry.io/workflow/releases/" />,
               })}
             </p>
           </PanelBody>