refactor all anchors to use Link component to make they all have safe url

ui-cra/src/components/Applications/Add/index.tsx

@@ -11,11 +11,10 @@ import {
   Button,
   CallbackStateContextProvider,
   getProviderToken,
-  isAllowedLink,
+  Link,
   LoadingPage,
 } from '@weaveworks/weave-gitops';
 import { useHistory } from 'react-router-dom';
-import { theme as weaveTheme } from '@weaveworks/weave-gitops';
 import { isUnauthenticated, removeToken } from '../../../utils/request';
 import useNotifications from '../../../contexts/Notifications';
 import { GitProvider } from '@weaveworks/weave-gitops/ui/lib/api/applications/applications.pb';
@@ -74,38 +73,16 @@ const AddApplication = ({ clusterName }: { clusterName?: string }) => {
       url
     );
     if (branch) {
-      return isAllowedLink(getGitRepoHTTPSURL(url, branch)) ? (
-        <a
-          title="Visit repository"
-          style={{
-            color: weaveTheme.colors.primary,
-            fontSize: weaveTheme.fontSizes.medium,
-          }}
-          href={getGitRepoHTTPSURL(url, branch)}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
+      return (
+        <Link href={getGitRepoHTTPSURL(url, branch)} newTab>
           {linkText}
-        </a>
-      ) : (
-        <span>{linkText}</span>
+        </Link>
       );
     } else {
-      return isAllowedLink(getGitRepoHTTPSURL(url)) ? (
-        <a
-          title="Visit repository"
-          style={{
-            color: weaveTheme.colors.primary,
-            fontSize: weaveTheme.fontSizes.medium,
-          }}
-          href={getGitRepoHTTPSURL(url)}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
+      return (
+        <Link href={getGitRepoHTTPSURL(url)} newTab>
           {linkText}
-        </a>
-      ) : (
-        <span>{linkText}</span>
+        </Link>
       );
     }
   };
@@ -294,14 +271,9 @@ const AddApplication = ({ clusterName }: { clusterName?: string }) => {
           {
             message: {
               component: (
-                <a
-                  style={{ color: weaveTheme.colors.primary }}
-                  href={response.webUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
+                <Link href={response.webUrl} newTab>
                   PR created successfully.
-                </a>
+                </Link>
               ),
             },
             variant: 'success',

ui-cra/src/components/Applications/__tests__/__snapshots__/index.test.tsx.snap

@@ -34,6 +34,15 @@ exports[`Applications index test snapshots loading 1`] = `
   justify-content: center;
 }
 
+.c17 {
+  font-family: 'proxima-nova',Helvetica,Arial,sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  text-transform: none;
+  font-style: normal;
+  color: #00b3ec;
+}
+
 .c8 svg {
   fill: !important;
   height: 24px;
@@ -52,6 +61,10 @@ exports[`Applications index test snapshots loading 1`] = `
   transform: initial;
 }
 
+.c8 .c16 {
+  margin-left: 4px;
+}
+
 .c12 svg {
   fill: !important;
   height: 16px;
@@ -70,6 +83,10 @@ exports[`Applications index test snapshots loading 1`] = `
   transform: initial;
 }
 
+.c12 .c16 {
+  margin-left: 4px;
+}
+
 .c11.MuiButton-root {
   height: 32px;
   font-size: 12px;
@@ -87,6 +104,11 @@ exports[`Applications index test snapshots loading 1`] = `
   border-color: #d8d8d8;
 }
 
+.c15 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
 .c6 {
   height: 40px;
   width: 40px;
@@ -367,9 +389,17 @@ exports[`Applications index test snapshots loading 1`] = `
         <div>
           Need help? Raise a 
           <a
+            class="c15"
             href="https://weavesupport.zendesk.com/"
+            rel="noreferrer"
+            target="_blank"
           >
-            support ticket
+            <span
+              class="c16 c17"
+              color="primary"
+            >
+              support ticket
+            </span>
           </a>
         </div>
         <div
@@ -555,6 +585,15 @@ exports[`Applications index test snapshots success 1`] = `
   justify-content: flex-start;
 }
 
+.c45 {
+  font-family: 'proxima-nova',Helvetica,Arial,sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  text-transform: none;
+  font-style: normal;
+  color: #00b3ec;
+}
+
 .c36 {
   font-family: 'proxima-nova',Helvetica,Arial,sans-serif;
   font-size: 14px;
@@ -870,6 +909,11 @@ exports[`Applications index test snapshots success 1`] = `
   background-color: #E5F7FD;
 }
 
+.c44 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
 .c16 td:nth-child(7) {
   white-space: pre-wrap;
   overflow-wrap: break-word;
@@ -2032,9 +2076,17 @@ exports[`Applications index test snapshots success 1`] = `
         <div>
           Need help? Raise a 
           <a
+            class="c44"
             href="https://weavesupport.zendesk.com/"
+            rel="noreferrer"
+            target="_blank"
           >
-            support ticket
+            <span
+              class="c35 c45"
+              color="primary"
+            >
+              support ticket
+            </span>
           </a>
         </div>
         <div

ui-cra/src/components/Clusters/ConnectInfoBox.tsx

@@ -7,6 +7,7 @@ import {
 } from '@material-ui/core';
 import styled from 'styled-components';
 import { CloseIconButton } from '../../assets/img/close-icon-button';
+import { Link } from '@weaveworks/weave-gitops';
 
 const DialogWrapper = styled(Dialog)`
   div[class*='MuiDialog-paper'] {
@@ -34,13 +35,12 @@ export const ConnectClusterDialog: FC<Props> = ({ onFinish }) => {
       <DialogContent>
         For instructions on how to connect and disconnect clusters, have a look
         at the&nbsp;
-        <a
+        <Link
           href=" https://docs.gitops.weave.works/docs/cluster-management/managing-existing-clusters/#how-to-connect-a-cluster"
-          target="_blank"
-          rel="noopener noreferrer"
+          newTab
         >
           documentation.
-        </a>
+        </Link>
       </DialogContent>
     </DialogWrapper>
   );

ui-cra/src/components/Clusters/DashboardsList.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import useClusters from '../../hooks/clusters';
 import { List, ListItem } from '@material-ui/core';
 import { GitopsClusterEnriched } from '../../types/custom';
-import { isAllowedLink } from '@weaveworks/weave-gitops';
+import { Link } from '@weaveworks/weave-gitops';
 
 // FIXME: move "a" styling up to a top level CSS rule
 const ListWrapper = styled(List)`
@@ -25,13 +25,11 @@ export const DashboardsList: FC<{
     <ListWrapper style={{ padding: 0 }}>
       {Object.entries(annotations).map(([key, value]) => (
         <ListItem key={key}>
-          {isAllowedLink(value) ? (
-            <a href={value} target="_blank" rel="noopener noreferrer">
+          {
+            <Link href={value} newTab>
               {key}
-            </a>
-          ) : (
-            <span>{key}</span>
-          )}
+            </Link>
+          }
         </ListItem>
       ))}
     </ListWrapper>

ui-cra/src/components/Clusters/Delete.tsx

@@ -18,7 +18,7 @@ import {
   getProviderToken,
   Icon,
   IconType,
-  theme,
+  Link,
 } from '@weaveworks/weave-gitops';
 import { GitProvider } from '@weaveworks/weave-gitops/ui/lib/api/applications/applications.pb';
 import { isUnauthenticated, removeToken } from '../../utils/request';
@@ -114,14 +114,9 @@ export const DeleteClusterDialog: FC<Props> = ({
           {
             message: {
               component: (
-                <a
-                  style={{ color: theme.colors.primary }}
-                  href={response.webUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
+                <Link href={response.webUrl} newTab>
                   PR created successfully.
-                </a>
+                </Link>
               ),
             },
             variant: 'success',

ui-cra/src/components/Clusters/Form/index.tsx

@@ -11,6 +11,7 @@ import {
   CallbackStateContextProvider,
   clearCallbackState,
   getProviderToken,
+  Link,
   LoadingPage,
   theme as weaveTheme,
 } from '@weaveworks/weave-gitops';
@@ -321,14 +322,9 @@ const ClusterForm: FC<ClusterFormProps> = ({ template, cluster }) => {
           {
             message: {
               component: (
-                <a
-                  style={{ color: weaveTheme.colors.primary }}
-                  href={response.webUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
+                <Link href={response.webUrl} newTab>
                   PR created successfully.
-                </a>
+                </Link>
               ),
             },
             variant: 'success',

ui-cra/src/components/Layout/ContentWrapper.tsx

@@ -1,7 +1,7 @@
 import { Box, CircularProgress } from '@material-ui/core';
 import Alert from '@material-ui/lab/Alert';
 import { createStyles, makeStyles } from '@material-ui/styles';
-import { Flex, theme } from '@weaveworks/weave-gitops';
+import { Flex, Link, theme } from '@weaveworks/weave-gitops';
 import { FC, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { ListError } from '../../cluster-services/cluster_services.pb';
@@ -147,7 +147,9 @@ export const ContentWrapper: FC<Props> = ({
       <HelpLinkWrapper>
         <div>
           Need help? Raise a&nbsp;
-          <a href="https://weavesupport.zendesk.com/">support ticket</a>
+          <Link newTab href="https://weavesupport.zendesk.com/">
+            support ticket
+          </Link>
         </div>
         <Tooltip
           title={`Server Version ${versions?.capiServer}`}

ui-cra/src/components/Pipelines/PipelineDetails/__tests__/__snapshots__/PipelineDetails.test.tsx.snap

@@ -557,9 +557,17 @@ exports[`PipelineDetails snapshots renders 1`] = `
         <div>
           Need help? Raise a 
           <a
+            class="c14"
             href="https://weavesupport.zendesk.com/"
+            rel="noreferrer"
+            target="_blank"
           >
-            support ticket
+            <span
+              class="c15 c16"
+              color="primary"
+            >
+              support ticket
+            </span>
           </a>
         </div>
         <div

ui-cra/src/components/ProgressiveDelivery/CanaryDetails/ManagedObjects/ManagedObjectsTable.tsx

@@ -1,5 +1,5 @@
 import { UnstructuredObject } from '@weaveworks/progressive-delivery/api/prog/types.pb';
-import { DataTable } from '@weaveworks/weave-gitops';
+import { DataTable, Link } from '@weaveworks/weave-gitops';
 import { TableWrapper } from '../../../Shared';
 import CanaryStatus from '../../SharedComponent/CanaryStatus';
 export const ManagedObjectsTable = ({
@@ -50,14 +50,9 @@ export const ManagedObjectsTable = ({
                 }}
               >
                 {images?.map((image, indx) => (
-                  <a
-                    target="_blank"
-                    rel="noreferrer"
-                    href={`https://${image}`}
-                    key={indx}
-                  >
+                  <Link newTab href={`https://${image}`} key={indx}>
                     {image}
-                  </a>
+                  </Link>
                 ))}
               </div>
             ),

ui-cra/src/components/ProgressiveDelivery/CanaryStyles.tsx

@@ -1,5 +1,5 @@
 import { createStyles, makeStyles } from '@material-ui/styles';
-import { theme } from '@weaveworks/weave-gitops';
+import { Link, theme } from '@weaveworks/weave-gitops';
 import styled from 'styled-components';
 
 const { small, xs, medium, base, large, xxl } = theme.spacing;
@@ -124,6 +124,6 @@ export const FlexCenter = styled.div`
   justify-content: center;
 `;
 
-export const LinkTag = styled.a`
+export const LinkTag = styled(Link)`
   color: ${theme.colors.primary};
 `;

ui-cra/src/components/ProgressiveDelivery/ListCanaries/Table/index.tsx

@@ -4,11 +4,10 @@ import {
   CanaryStatus as Status,
   CanaryTargetDeployment,
 } from '@weaveworks/progressive-delivery/api/prog/types.pb';
-import { DataTable, filterConfig, theme } from '@weaveworks/weave-gitops';
+import { DataTable, filterConfig, Link, theme } from '@weaveworks/weave-gitops';
 import _ from 'lodash';
 import moment from 'moment';
 import React, { FC } from 'react';
-import { Link } from 'react-router-dom';
 import { ReactComponent as ABIcon } from '../../../../assets/img/ab.svg';
 import { ReactComponent as BlueGreenIcon } from '../../../../assets/img/blue-green.svg';
 import { ReactComponent as CanaryIcon } from '../../../../assets/img/canary.svg';
@@ -64,9 +63,9 @@ export function getProgressValue(
 
 function toLink(img: string) {
   return (
-    <a target="_blank" rel="noreferrer" href={`https://${img}`}>
+    <Link newTab href={`https://${img}`}>
       {img}
-    </a>
+    </Link>
   );
 }