Merge pull request #109 from solo-io/charlesthebird/apisPageReload

/apis page full reload

Author: Charlesthebird

Dockerfile

@@ -45,7 +45,8 @@ ENV VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \
     VITE_HOME_IMAGE_URL=$VITE_HOME_IMAGE_URL \
     VITE_APIS_IMAGE_URL=$VITE_APIS_IMAGE_URL \
     VITE_LOGO_IMAGE_URL=$VITE_LOGO_IMAGE_URL \
-    VITE_COMPANY_NAME=$VITE_COMPANY_NAME
+    VITE_COMPANY_NAME=$VITE_COMPANY_NAME \
+    VITE_API_PAGE_RELOAD=$VITE_API_PAGE_RELOAD
 
 # Copy the server files, (this includes the UI build).
 WORKDIR /app
@@ -70,4 +71,5 @@ ENTRYPOINT VITE_PORTAL_SERVER_URL=$VITE_PORTAL_SERVER_URL \
     VITE_APIS_IMAGE_URL=$VITE_APIS_IMAGE_URL \
     VITE_LOGO_IMAGE_URL=$VITE_LOGO_IMAGE_URL \
     VITE_COMPANY_NAME=$VITE_COMPANY_NAME \
+    VITE_API_PAGE_RELOAD=$VITE_API_PAGE_RELOAD \
     node ./bin/www

Makefile

@@ -104,6 +104,13 @@ ifneq ($(VITE_COMPANY_NAME),)
 else ifneq ($(COMPANY_NAME),)
 	UI_ARGS += VITE_COMPANY_NAME=$(COMPANY_NAME)
 endif
+#
+# API_PAGE_RELOAD
+ifneq ($(VITE_API_PAGE_RELOAD),)
+	UI_ARGS += VITE_API_PAGE_RELOAD=$(VITE_API_PAGE_RELOAD)
+else ifneq ($(API_PAGE_RELOAD),)
+	UI_ARGS += VITE_API_PAGE_RELOAD=$(API_PAGE_RELOAD)
+endif
 
 
 

README.md

@@ -137,6 +137,7 @@ You can add these environment variables to a `.env.local` file in the `projects/
 - `VITE_HOME_IMAGE_URL` - This is an optional parameter to set the image URL on the home page.
 - `VITE_APIS_IMAGE_URL` - This is an optional parameter to set the image URL on the apis page.
 - `VITE_LOGO_IMAGE_URL` - This is an optional parameter to set the image URL for the logo in the upper left.
+- `VITE_API_PAGE_RELOAD` - This is an optional parameter that ensures the API page reloads when navigating to it. This is useful when gating the API page behind an auth flow.
 
 #### Environment Variables for PKCE Authorization Flow
 

changelog/v0.0.36/api-page-reload-env-var.yaml

@@ -0,0 +1,5 @@
+changelog:
+  - type: NEW_FEATURE
+    description: >-
+      Adds a new env var for ensuring the API page reloads when navigating to it. This is necessary when using
+      auth with the portal frontend for gloo v1.17.x installations.

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

@@ -3,7 +3,7 @@ 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 { 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";
@@ -89,6 +89,8 @@ 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}
             className={`navLink ${inAPIsArea ? "active" : ""}`}
           >
             APIs

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

@@ -5,6 +5,7 @@ import { AppContext } from "../../../Context/AppContext";
 import { ErrorBoundary } from "../../Common/ErrorBoundary";
 import { HeaderStyles } from "../Header.style";
 import { OidcAuthCodeHeaderDropdown } from "./OidcAuthCodeHeaderDropdown";
+import {apiPageReload} from "../../../user_variables.tmplr";
 
 /**
  * This is for when there is an
@@ -36,6 +37,7 @@ const OidcAuthCodeHeaderVariant = () => {
           </NavLink>
           <NavLink
             to={"/apis"}
+            onClick={apiPageReload === "true" ? () => (window.location.href = "/apis") : undefined}
             className={`navLink ${inAPIsArea ? "active" : ""}`}
           >
             APIs

projects/ui/src/user_variables.tmplr.ts

@@ -168,3 +168,11 @@ export const logoImageURL = templateString(
   import.meta.env.VITE_LOGO_IMAGE_URL,
   ""
 );
+
+export const apiPageReload = templateString(
+    "{{ tmplr.apiPageReload }}",
+    insertedEnvironmentVariables?.VITE_API_PAGE_RELOAD,
+    import.meta.env.VITE_API_PAGE_RELOAD,
+    "false"
+);
+