Merge pull request #110 from solo-io/charlesthebird/apisPageReloadFix

Apis Page Reload Fix

Author: jmhbh

changelog/v0.0.37/api-page-reload-env-var-fix.yaml

@@ -0,0 +1,5 @@
+changelog:
+  - type: NEW_FEATURE
+    description: >-
+      Fixes the API page reload behavior when navigating to it with `VITE_API_PAGE_RELOAD=true`,
+      so that the React Router behavior is overridden in that case.

projects/ui/src/Components/Structure/Header.tsx

@@ -1,9 +1,9 @@
-import { useContext, useMemo } from "react";
+import { MouseEventHandler, useContext, useMemo } from "react";
 import { Link, NavLink, useLocation } from "react-router-dom";
 import { ReactComponent as Logo } from "../../Assets/logo.svg";
 import { AppContext } from "../../Context/AppContext";
 import { AuthContext } from "../../Context/AuthContext";
-import {apiPageReload, logoImageURL} from "../../user_variables.tmplr";
+import { apiPageReload, logoImageURL } from "../../user_variables.tmplr";
 import { ErrorBoundary } from "../Common/ErrorBoundary";
 import { HeaderStyles } from "./Header.style";
 import HeaderSectionLoggedIn from "./HeaderSectionLoggedIn";
@@ -17,6 +17,17 @@ if (!window.isSecureContext) {
   );
 }
 
+// If apiPageReload is true use the onclick to reload the page
+export const onApisPageClick: MouseEventHandler<HTMLAnchorElement> | undefined =
+  apiPageReload === "true"
+    ? (e) => {
+        // If we are using `apiPageReload=true`, we want to override the react router
+        // behavior here, otherwise we get 2 `/apis` page history entries.
+        e.preventDefault();
+        window.location.href = "/apis";
+      }
+    : undefined;
+
 /**
  * MAIN COMPONENT
  **/
@@ -89,8 +100,7 @@ export function Header() {
           */}
           <NavLink
             to={"/apis"}
-            // if apiPageReload is true use the onclick to reload the page
-            onClick={apiPageReload === "true" ? () => (window.location.href = "/apis") : undefined}
+            onClick={onApisPageClick}
             className={`navLink ${inAPIsArea ? "active" : ""}`}
           >
             APIs

projects/ui/src/Components/Structure/OidcAuthCodeHeaderVariant/OidcAuthCodeHeaderVariant.tsx

@@ -3,9 +3,9 @@ import { Link, NavLink, useLocation } from "react-router-dom";
 import { ReactComponent as Logo } from "../../../Assets/logo.svg";
 import { AppContext } from "../../../Context/AppContext";
 import { ErrorBoundary } from "../../Common/ErrorBoundary";
+import { onApisPageClick } from "../Header";
 import { HeaderStyles } from "../Header.style";
 import { OidcAuthCodeHeaderDropdown } from "./OidcAuthCodeHeaderDropdown";
-import {apiPageReload} from "../../../user_variables.tmplr";
 
 /**
  * This is for when there is an
@@ -37,7 +37,7 @@ const OidcAuthCodeHeaderVariant = () => {
           </NavLink>
           <NavLink
             to={"/apis"}
-            onClick={apiPageReload === "true" ? () => (window.location.href = "/apis") : undefined}
+            onClick={onApisPageClick}
             className={`navLink ${inAPIsArea ? "active" : ""}`}
           >
             APIs