refactor: use external link (#5199)

canonical · Oct 20, 2023 · 9305276 · 9305276
1 parent 11bc40b
commit 9305276
Show file tree

Hide file tree

Showing 30 changed files with 113 additions and 195 deletions.
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@canonical/maas-react-components": "1.0.1",
+    "@canonical/maas-react-components": "1.3.0",
     "@canonical/macaroon-bakery": "1.3.2",
     "@canonical/react-components": "0.46.0",
     "@reduxjs/toolkit": "1.9.3",

diff --git a/src/app/base/components/CertificateDetails/CertificateDetails.tsx b/src/app/base/components/CertificateDetails/CertificateDetails.tsx
@@ -1,4 +1,4 @@
-import { Link } from "@canonical/react-components";
+import { ExternalLink } from "@canonical/maas-react-components";
 
 import CertificateDownload from "app/base/components/CertificateDownload";
 import CertificateMetadata from "app/base/components/CertificateMetadata";
@@ -29,21 +29,19 @@ const CertificateDetails = ({
     <div className="certificate-details">
       <p>Certificate</p>
       <p>
-        <Link
+        <ExternalLink
           data-testid="read-more-link"
-          href="https://discourse.maas.io/t/lxd-authentication/4856"
           onClick={() =>
             sendAnalytics(
               eventCategory,
               "Click link to LXD authentication discourse",
               "Read more about authentication"
             )
           }
-          rel="noopener noreferrer"
-          target="_blank"
+          to="https://discourse.maas.io/t/lxd-authentication/4856"
         >
           {Labels.ReadMore}
-        </Link>
+        </ExternalLink>
       </p>
       <CertificateMetadata metadata={metadata} />
       <CertificateDownload certificate={certificate} filename={metadata.CN} />

diff --git a/src/app/base/components/DHCPTable/DHCPTable.tsx b/src/app/base/components/DHCPTable/DHCPTable.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+import { ExternalLink } from "@canonical/maas-react-components";
 import { List, MainTable } from "@canonical/react-components";
 import { useSelector } from "react-redux";
 import { Link } from "react-router-dom-v5-compat";
@@ -204,9 +205,9 @@ const DHCPTable = ({
               <Link to={settingsURLs.dhcp.index}>
                 All snippets: Settings &gt; DHCP snippets
               </Link>,
-              <a href={docsUrls.dhcp} rel="noreferrer noopener" target="_blank">
+              <ExternalLink to={docsUrls.dhcp}>
                 About DHCP snippets
-              </a>,
+              </ExternalLink>,
             ]}
             middot
           />

diff --git a/src/app/base/components/SSHKeyForm/SSHKeyFormFields/SSHKeyFormFields.tsx b/src/app/base/components/SSHKeyForm/SSHKeyFormFields/SSHKeyFormFields.tsx
@@ -1,4 +1,5 @@
-import { Col, Link, Row, Select, Textarea } from "@canonical/react-components";
+import { ExternalLink } from "@canonical/maas-react-components";
+import { Col, Row, Select, Textarea } from "@canonical/react-components";
 import type { ColSize } from "@canonical/react-components";
 import { useFormikContext } from "formik";
 
@@ -55,8 +56,8 @@ export const SSHKeyFormFields = ({
                   <TooltipButton
                     iconName="help"
                     message={`Begins with 'ssh-rsa', 'ssh-dss', 'ssh-ed25519',
-                    'ecdsa-sha2-nistp256', 'ecdsa-sha2-nistp384', or
-                    'ecdsa-sha2-nistp521`}
+                  'ecdsa-sha2-nistp256', 'ecdsa-sha2-nistp384', or
+                  'ecdsa-sha2-nistp521`}
                     position="btm-left"
                   />
                 </>
@@ -73,9 +74,7 @@ export const SSHKeyFormFields = ({
           </p>
         </Col>
       </Row>
-      <Link href={docsUrls.sshKeys} rel="noreferrer noopener" target="_blank">
-        About SSH keys
-      </Link>
+      <ExternalLink to={docsUrls.sshKeys}>About SSH keys</ExternalLink>
     </>
   );
 };

diff --git a/src/app/base/components/node/OverviewCard/MachineStatusCard/MachineStatusCard.tsx b/src/app/base/components/node/OverviewCard/MachineStatusCard/MachineStatusCard.tsx
@@ -1,3 +1,4 @@
+import { ExternalLink } from "@canonical/maas-react-components";
 import { Tooltip } from "@canonical/react-components";
 import { formatDuration, intervalToDuration } from "date-fns";
 import { useSelector } from "react-redux";
@@ -115,14 +116,12 @@ const MachineStatusCard = ({ machine }: Props): JSX.Element => {
                     {formatSyncInterval(machine.sync_interval)}.{"\n"}
                     You can check it at the bottom, in the status bar.{"\n"}
                     More about this in the{" "}
-                    <a
+                    <ExternalLink
                       className="is-on-dark"
-                      href={docsUrls.customisingDeployedMachines}
-                      rel="noopener noreferrer"
-                      target="_blank"
+                      to={docsUrls.customisingDeployedMachines}
                     >
                       Hardware sync docs
-                    </a>
+                    </ExternalLink>
                     .
                   </>
                 }

diff --git a/src/app/controllers/components/ControllerForms/AddController/AddController.tsx b/src/app/controllers/components/ControllerForms/AddController/AddController.tsx
@@ -1,6 +1,7 @@
 import type { ChangeEvent } from "react";
 import { useState } from "react";
 
+import { ExternalLink } from "@canonical/maas-react-components";
 import { Button, CodeSnippet, Col, Row } from "@canonical/react-components";
 import { useSelector } from "react-redux";
 
@@ -95,16 +96,11 @@ export const AddController = ({
           data-testid="register-snippet"
         />
       )}
-
       <Row>
         <Col size={6}>
-          <a
-            href={docsUrls.rackController}
-            rel="noreferrer noopener"
-            target="_blank"
-          >
+          <ExternalLink to={docsUrls.rackController}>
             Help with adding a rack controller
-          </a>
+          </ExternalLink>
         </Col>
         <Col className="u-align--right" size={6}>
           <Button

diff --git a/src/app/controllers/views/ControllerList/ControllerListTable/ControllerListTable.tsx b/src/app/controllers/views/ControllerList/ControllerListTable/ControllerListTable.tsx
@@ -1,4 +1,5 @@
-import { MainTable, Link } from "@canonical/react-components";
+import { ExternalLink } from "@canonical/maas-react-components";
+import { MainTable } from "@canonical/react-components";
 import { useSelector } from "react-redux";
 
 import StatusColumn from "./StatusColumn";
@@ -119,14 +120,12 @@ const generateRows = ({
                         Vault is configured on this region controller for secret
                         storage.
                         <br />
-                        <Link
+                        <ExternalLink
                           className="is-on-dark"
-                          href={docsUrls.vaultIntegration}
-                          rel="noreferrer noopener"
-                          target="_blank"
+                          to={docsUrls.vaultIntegration}
                         >
                           Read more about Vault integration
-                        </Link>
+                        </ExternalLink>
                       </p>
                     }
                   />
@@ -143,14 +142,12 @@ const generateRows = ({
                         Vault is configured on this controller. <br />
                         Once all controllers are configured, migrate the
                         secrets. <br />
-                        <Link
+                        <ExternalLink
                           className="is-on-dark"
-                          href={docsUrls.vaultIntegration}
-                          rel="noreferrer noopener"
-                          target="_blank"
+                          to={docsUrls.vaultIntegration}
                         >
                           Read more about Vault integration
-                        </Link>
+                        </ExternalLink>
                       </p>
                     }
                   />
@@ -167,14 +164,12 @@ const generateRows = ({
                         <p id="tooltip-description-warning">
                           Missing Vault configuration.
                           <br />
-                          <Link
+                          <ExternalLink
                             className="is-on-dark"
-                            href={docsUrls.vaultIntegration}
-                            rel="noreferrer noopener"
-                            target="_blank"
+                            to={docsUrls.vaultIntegration}
                           >
                             Read more about Vault integration
-                          </Link>
+                          </ExternalLink>
                         </p>
                       }
                     />

diff --git a/src/app/controllers/views/ControllerList/ControllerListTable/StatusColumn/StatusColumn.tsx b/src/app/controllers/views/ControllerList/ControllerListTable/StatusColumn/StatusColumn.tsx
@@ -1,3 +1,4 @@
+import { ExternalLink } from "@canonical/maas-react-components";
 import { Icon } from "@canonical/react-components";
 import { useSelector } from "react-redux";
 
@@ -35,14 +36,12 @@ export const StatusColumn = ({ systemId }: Props): JSX.Element | null => {
           <>
             {issue}
             <br />
-            <a
+            <ExternalLink
               className="is-on-dark"
-              href="https://discourse.maas.io/t/4555"
-              rel="noreferrer noopener"
-              target="_blank"
+              to="https://discourse.maas.io/t/4555"
             >
               More info
-            </a>
+            </ExternalLink>
           </>
         }
         position="top-center"

diff --git a/src/app/dashboard/views/DashboardHeader/ClearAllForm/ClearAllForm.tsx b/src/app/dashboard/views/DashboardHeader/ClearAllForm/ClearAllForm.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 
+import { ExternalLink } from "@canonical/maas-react-components";
 import {
-  Link,
   Notification,
   NotificationSeverity,
 } from "@canonical/react-components";
@@ -46,13 +46,9 @@ const ClearAllForm = ({ closeForm }: Props): JSX.Element => {
         </p>
         <p>
           Learn more about{" "}
-          <Link
-            href={docsUrls.networkDiscovery}
-            rel="noreferrer noopener"
-            target="_blank"
-          >
+          <ExternalLink to={docsUrls.networkDiscovery}>
             network discovery
-          </Link>
+          </ExternalLink>
           .
         </p>
       </>

diff --git a/src/app/kvm/components/KVMForms/AddLxd/AuthenticationForm/AuthenticationForm.tsx b/src/app/kvm/components/KVMForms/AddLxd/AuthenticationForm/AuthenticationForm.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 
-import { Link, Spinner } from "@canonical/react-components";
+import { ExternalLink } from "@canonical/maas-react-components";
+import { Spinner } from "@canonical/react-components";
 import { useDispatch, useSelector } from "react-redux";
 import * as Yup from "yup";
 
@@ -146,13 +147,9 @@ export const AuthenticationForm = ({
         </div>
         <div>
           <p>
-            <Link
-              href="https://discourse.maas.io/t/lxd-authentication/4856"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
+            <ExternalLink to="https://discourse.maas.io/t/lxd-authentication/4856">
               How to trust a certificate in LXD
-            </Link>
+            </ExternalLink>
           </p>
         </div>
       </div>

diff --git a/src/app/machines/components/MachineForms/AddChassis/AddChassisForm/AddChassisForm.tsx b/src/app/machines/components/MachineForms/AddChassis/AddChassisForm/AddChassisForm.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 
-import { Link, Spinner, Strip } from "@canonical/react-components";
+import { ExternalLink } from "@canonical/maas-react-components";
+import { Spinner, Strip } from "@canonical/react-components";
 import { useDispatch, useSelector } from "react-redux";
 import * as Yup from "yup";
 
@@ -73,13 +74,9 @@ export const AddChassisForm = ({
         <FormikForm
           buttonsHelp={
             <p>
-              <Link
-                href={docsUrls.addNodesViaChassis}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
+              <ExternalLink to={docsUrls.addNodesViaChassis}>
                 Help with adding chassis
-              </Link>
+              </ExternalLink>
             </p>
           }
           buttonsHelpClassName="u-align--right"

diff --git a/src/app/machines/components/MachineForms/AddMachine/AddMachineForm/AddMachineForm.tsx b/src/app/machines/components/MachineForms/AddMachine/AddMachineForm/AddMachineForm.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 
-import { Link, Spinner, Strip } from "@canonical/react-components";
+import { ExternalLink } from "@canonical/maas-react-components";
+import { Spinner, Strip } from "@canonical/react-components";
 import { useDispatch, useSelector } from "react-redux";
 import * as Yup from "yup";
 
@@ -126,13 +127,9 @@ export const AddMachineForm = ({
         <FormikForm<AddMachineValues>
           buttonsHelp={
             <p>
-              <Link
-                href={docsUrls.addMachines}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
+              <ExternalLink to={docsUrls.addMachines}>
                 Help with adding machines
-              </Link>
+              </ExternalLink>
             </p>
           }
           buttonsHelpClassName="u-align--right"

diff --git a/src/app/machines/components/MachineForms/MachineActionFormWrapper/CloneForm/CloneForm.tsx b/src/app/machines/components/MachineForms/MachineActionFormWrapper/CloneForm/CloneForm.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import { Link } from "@canonical/react-components";
+import { ExternalLink } from "@canonical/maas-react-components";
 import { useDispatch } from "react-redux";
 import * as Yup from "yup";
 
@@ -91,13 +91,9 @@ export const CloneForm = ({
           The clone function allows you to apply storage and/or network
           interface configuration from the source machine to selected
           destination machines.{" "}
-          <Link
-            href="https://discourse.maas.io/t/cloning-ui/4855"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
+          <ExternalLink to="https://discourse.maas.io/t/cloning-ui/4855">
             Find out more
-          </Link>
+          </ExternalLink>
         </p>
       }
       initialValues={{