Fix remaining relative links in react codebase. (#1198)

canonical · Jun 4, 2020 · 8c59f1d · 8c59f1d
1 parent 729f738
commit 8c59f1d
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 21 deletions.
diff --git a/...pp/machines/components/HeaderStrip/ActionFormWrapper/OverrideTestForm/OverrideTestForm.js b/...pp/machines/components/HeaderStrip/ActionFormWrapper/OverrideTestForm/OverrideTestForm.js
@@ -5,6 +5,7 @@ import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import * as Yup from "yup";
 
+import { generateLegacyURL } from "app/utils";
 import { machine as machineActions } from "app/base/actions";
 import {
   machine as machineSelectors,
@@ -23,11 +24,19 @@ const generateFailedTestsMessage = (numFailedTests, selectedMachines) => {
       numFailedTests
     )}.`;
     if (singleMachine) {
-      const url = `${process.env.REACT_APP_BASENAME}${process.env.REACT_APP_ANGULAR_BASENAME}/machine/${singleMachine.system_id}`;
+      const url = generateLegacyURL(`/machine/${singleMachine.system_id}`);
       return (
         <span>
           Machine <strong>{singleMachine.hostname}</strong> has{" "}
-          <a href={url}>{numFailedTestsString}</a>
+          <a
+            href={url}
+            onClick={(evt) => {
+              evt.preventDefault();
+              window.history.pushState(null, null, url);
+            }}
+          >
+            {numFailedTestsString}
+          </a>
         </span>
       );
     }
@@ -160,7 +169,19 @@ export const OverrideTestForm = ({
                       <br />
                       {selectedMachines.length === 1 ? (
                         <a
-                          href={`${process.env.REACT_APP_BASENAME}${process.env.REACT_APP_ANGULAR_BASENAME}/machine/${selectedMachines[0].system_id}`}
+                          href={generateLegacyURL(
+                            `/machine/${selectedMachines[0].system_id}`
+                          )}
+                          onClick={(evt) => {
+                            evt.preventDefault();
+                            window.history.pushState(
+                              null,
+                              null,
+                              generateLegacyURL(
+                                `/machine/${selectedMachines[0].system_id}`
+                              )
+                            );
+                          }}
                         >
                           Machine > Hardware tests
                         </a>

diff --git a/ui/src/app/machines/views/MachineList/MachineListTable/FabricColumn/FabricColumn.js b/ui/src/app/machines/views/MachineList/MachineListTable/FabricColumn/FabricColumn.js
@@ -14,6 +14,7 @@ export const FabricColumn = ({ systemId }) => {
 
   const fabricID = machine.vlan && machine.vlan.fabric_id;
   const fabricName = machine.vlan && machine.vlan.fabric_name;
+  const fabricURL = generateLegacyURL(`/fabric/${fabricID}`);
   const vlan = machine.vlan && machine.vlan.name ? machine.vlan.name : "";
 
   return (
@@ -30,6 +31,10 @@ export const FabricColumn = ({ systemId }) => {
             <a
               className="p-link--soft"
               href={generateLegacyURL(`/fabric/${fabricID}`)}
+              onClick={(evt) => {
+                evt.preventDefault();
+                window.history.pushState(null, null, fabricURL);
+              }}
             >
               {fabricName}
             </a>

diff --git a/...s/views/MachineList/MachineListTable/FabricColumn/__snapshots__/FabricColumn.test.js.snap b/...s/views/MachineList/MachineListTable/FabricColumn/__snapshots__/FabricColumn.test.js.snap
@@ -20,6 +20,7 @@ exports[`FabricColumn renders 1`] = `
         <a
           className="p-link--soft"
           href="/MAAS/l/fabric/0"
+          onClick={[Function]}
         >
           fabric-0
         </a>
@@ -68,6 +69,7 @@ exports[`FabricColumn renders 1`] = `
               <a
                 className="p-link--soft"
                 href="/MAAS/l/fabric/0"
+                onClick={[Function]}
               >
                 fabric-0
               </a>

diff --git a/ui/src/app/machines/views/MachineList/MachineListTable/NameColumn/NameColumn.js b/ui/src/app/machines/views/MachineList/MachineListTable/NameColumn/NameColumn.js
@@ -3,6 +3,7 @@ import { useSelector } from "react-redux";
 import React from "react";
 import PropTypes from "prop-types";
 
+import { generateLegacyURL } from "app/utils";
 import { machine as machineSelectors } from "app/base/selectors";
 import DoubleRow from "app/base/components/DoubleRow";
 import Tooltip from "app/base/components/Tooltip";
@@ -13,11 +14,7 @@ const generateFQDN = (machine, machineURL) => {
       href={machineURL}
       onClick={(evt) => {
         evt.preventDefault();
-        window.history.pushState(
-          null,
-          null,
-          `${process.env.REACT_APP_BASENAME}${machineURL}`
-        );
+        window.history.pushState(null, null, machineURL);
       }}
       title={machine.fqdn}
     >
@@ -87,11 +84,27 @@ const generateIPAddresses = (machine) => {
 const generateMAC = (machine, machineURL) => {
   return (
     <>
-      <a href={machineURL} title={machine.pxe_mac_vendor}>
+      <a
+        href={machineURL}
+        onClick={(evt) => {
+          evt.preventDefault();
+          window.history.pushState(null, null, machineURL);
+        }}
+        title={machine.pxe_mac_vendor}
+      >
         {machine.pxe_mac}
       </a>
       {machine.extra_macs && machine.extra_macs.length > 0 ? (
-        <a href={machineURL}> (+{machine.extra_macs.length})</a>
+        <a
+          href={machineURL}
+          onClick={(evt) => {
+            evt.preventDefault();
+            window.history.pushState(null, null, machineURL);
+          }}
+        >
+          {" "}
+          (+{machine.extra_macs.length})
+        </a>
       ) : null}
     </>
   );
@@ -101,7 +114,9 @@ export const NameColumn = ({ handleCheckbox, selected, showMAC, systemId }) => {
   const machine = useSelector((state) =>
     machineSelectors.getBySystemId(state, systemId)
   );
-  const machineURL = `${process.env.REACT_APP_ANGULAR_BASENAME}/${machine.link_type}/${machine.system_id}`;
+  const machineURL = generateLegacyURL(
+    `/${machine.link_type}/${machine.system_id}`
+  );
   const primaryRow = showMAC
     ? generateMAC(machine, machineURL)
     : generateFQDN(machine, machineURL);

diff --git a/...hines/views/MachineList/MachineListTable/NameColumn/__snapshots__/NameColumn.test.js.snap b/...hines/views/MachineList/MachineListTable/NameColumn/__snapshots__/NameColumn.test.js.snap
@@ -12,7 +12,7 @@ exports[`NameColumn renders 1`] = `
         id="abc123"
         label={
           <a
-            href="/l/undefined/abc123"
+            href="/MAAS/l/undefined/abc123"
             onClick={[Function]}
           >
             <strong>
@@ -50,7 +50,7 @@ exports[`NameColumn renders 1`] = `
               id="abc123"
               label={
                 <a
-                  href="/l/undefined/abc123"
+                  href="/MAAS/l/undefined/abc123"
                   onClick={[Function]}
                 >
                   <strong>
@@ -71,7 +71,7 @@ exports[`NameColumn renders 1`] = `
                 forId="abc123"
                 label={
                   <a
-                    href="/l/undefined/abc123"
+                    href="/MAAS/l/undefined/abc123"
                     onClick={[Function]}
                   >
                     <strong>
@@ -105,7 +105,7 @@ exports[`NameColumn renders 1`] = `
                         htmlFor="abc123"
                       >
                         <a
-                          href="/l/undefined/abc123"
+                          href="/MAAS/l/undefined/abc123"
                           onClick={[Function]}
                         >
                           <strong>

diff --git a/ui/src/app/machines/views/MachineList/MachineListTable/ZoneColumn/ZoneColumn.js b/ui/src/app/machines/views/MachineList/MachineListTable/ZoneColumn/ZoneColumn.js
@@ -62,6 +62,8 @@ export const ZoneColumn = ({ onToggleMenu, systemId }) => {
     }
   }, [updating, machine.zone.id]);
 
+  const zoneURL = generateLegacyURL(`/zone/${machine.zone.id}`);
+
   return (
     <DoubleRow
       menuLinks={zoneLinks}
@@ -74,7 +76,11 @@ export const ZoneColumn = ({ onToggleMenu, systemId }) => {
           ) : null}
           <a
             className="p-link--soft"
-            href={generateLegacyURL(`/zone/${machine.zone.id}`)}
+            href={zoneURL}
+            onClick={(evt) => {
+              evt.preventDefault();
+              window.history.pushState(null, null, zoneURL);
+            }}
           >
             {machine.zone.name}
           </a>

diff --git a/...hines/views/MachineList/MachineListTable/ZoneColumn/__snapshots__/ZoneColumn.test.js.snap b/...hines/views/MachineList/MachineListTable/ZoneColumn/__snapshots__/ZoneColumn.test.js.snap
@@ -23,6 +23,7 @@ exports[`ZoneColumn renders 1`] = `
         <a
           className="p-link--soft"
           href="/MAAS/l/zone/0"
+          onClick={[Function]}
         >
           zone-north
         </a>
@@ -57,6 +58,7 @@ exports[`ZoneColumn renders 1`] = `
               <a
                 className="p-link--soft"
                 href="/MAAS/l/zone/0"
+                onClick={[Function]}
               >
                 zone-north
               </a>

diff --git a/ui/src/app/settings/views/Dhcp/DhcpTarget/DhcpTarget.js b/ui/src/app/settings/views/Dhcp/DhcpTarget/DhcpTarget.js
@@ -2,11 +2,9 @@ import { Link, Spinner } from "@canonical/react-components";
 import PropTypes from "prop-types";
 import React from "react";
 
+import { generateLegacyURL } from "app/utils";
 import { useDhcpTarget } from "app/settings/hooks";
 
-const generateURL = (url) =>
-  `${process.env.REACT_APP_BASENAME}${process.env.REACT_APP_ANGULAR_BASENAME}${url}`;
-
 const DhcpTarget = ({ nodeId, subnetId }) => {
   const { loading, loaded, target, type } = useDhcpTarget(nodeId, subnetId);
 
@@ -22,8 +20,18 @@ const DhcpTarget = ({ nodeId, subnetId }) => {
       <small>.{target.domain.name}</small>
     </>
   );
-  const url = generateURL(`/${type}/${nodeId || subnetId}`);
-  return <Link href={url}>{name}</Link>;
+  const url = generateLegacyURL(`/${type}/${nodeId || subnetId}`);
+  return (
+    <Link
+      href={url}
+      onClick={(evt) => {
+        evt.preventDefault();
+        window.history.pushState(null, null, url);
+      }}
+    >
+      {name}
+    </Link>
+  );
 };
 
 DhcpTarget.propTypes = {

diff --git a/ui/src/app/settings/views/Dhcp/DhcpTarget/__snapshots__/DhcpTarget.test.js.snap b/ui/src/app/settings/views/Dhcp/DhcpTarget/__snapshots__/DhcpTarget.test.js.snap
@@ -3,10 +3,12 @@
 exports[`DhcpTarget can display a node link 1`] = `
 <Link
   href="/MAAS/l/machine/xyz"
+  onClick={[Function]}
 >
   <a
     className=""
     href="/MAAS/l/machine/xyz"
+    onClick={[Function]}
   >
     machine1
     <small>