From 9b3fc64271fe8fb9b3a313f9849bcf6fbfd3951a Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Thu, 7 Nov 2024 14:55:28 -0500 Subject: [PATCH 1/4] -m Signed-off-by: Nicholas Bucher --- projects/ui/src/Components/Structure/Header.tsx | 1 + .../OidcAuthCodeHeaderVariant/OidcAuthCodeHeaderVariant.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/projects/ui/src/Components/Structure/Header.tsx b/projects/ui/src/Components/Structure/Header.tsx index b5a1d2ef..0cba29a1 100644 --- a/projects/ui/src/Components/Structure/Header.tsx +++ b/projects/ui/src/Components/Structure/Header.tsx @@ -89,6 +89,7 @@ export function Header() { */} (window.location.href = "/apis")} className={`navLink ${inAPIsArea ? "active" : ""}`} > APIs diff --git a/projects/ui/src/Components/Structure/OidcAuthCodeHeaderVariant/OidcAuthCodeHeaderVariant.tsx b/projects/ui/src/Components/Structure/OidcAuthCodeHeaderVariant/OidcAuthCodeHeaderVariant.tsx index 7811bf0c..bc94efec 100644 --- a/projects/ui/src/Components/Structure/OidcAuthCodeHeaderVariant/OidcAuthCodeHeaderVariant.tsx +++ b/projects/ui/src/Components/Structure/OidcAuthCodeHeaderVariant/OidcAuthCodeHeaderVariant.tsx @@ -36,6 +36,7 @@ const OidcAuthCodeHeaderVariant = () => { (window.location.href = "/apis")} className={`navLink ${inAPIsArea ? "active" : ""}`} > APIs From 56004fb0ea6be5166294fdf5b5d75ee27c35dc0c Mon Sep 17 00:00:00 2001 From: JM Huibonhoa Date: Fri, 8 Nov 2024 00:31:54 -0500 Subject: [PATCH 2/4] working --- Dockerfile | 4 +++- Makefile | 7 +++++++ README.md | 1 + projects/ui/src/Components/Structure/Header.tsx | 5 +++-- .../OidcAuthCodeHeaderVariant.tsx | 3 ++- projects/ui/src/user_variables.tmplr.ts | 8 ++++++++ 6 files changed, 24 insertions(+), 4 deletions(-) diff --git a/Dockerfile b/Dockerfile index 3b3f43cc..7b04e347 100644 --- a/Dockerfile +++ b/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 diff --git a/Makefile b/Makefile index ccfdb8fc..f4fdcdf7 100644 --- a/Makefile +++ b/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_COMPANY_NAME=$(VITE_API_PAGE_RELOAD) +else ifneq ($(API_PAGE_RELOAD),) + UI_ARGS += VITE_API_PAGE_RELOAD=$(API_PAGE_RELOAD) +endif diff --git a/README.md b/README.md index fa8203bb..620e4891 100644 --- a/README.md +++ b/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 diff --git a/projects/ui/src/Components/Structure/Header.tsx b/projects/ui/src/Components/Structure/Header.tsx index 0cba29a1..36b9e2c3 100644 --- a/projects/ui/src/Components/Structure/Header.tsx +++ b/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,7 +89,8 @@ export function Header() { */} (window.location.href = "/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 diff --git a/projects/ui/src/Components/Structure/OidcAuthCodeHeaderVariant/OidcAuthCodeHeaderVariant.tsx b/projects/ui/src/Components/Structure/OidcAuthCodeHeaderVariant/OidcAuthCodeHeaderVariant.tsx index bc94efec..4069e260 100644 --- a/projects/ui/src/Components/Structure/OidcAuthCodeHeaderVariant/OidcAuthCodeHeaderVariant.tsx +++ b/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,7 +37,7 @@ const OidcAuthCodeHeaderVariant = () => { (window.location.href = "/apis")} + onClick={apiPageReload === "true" ? () => (window.location.href = "/apis") : undefined} className={`navLink ${inAPIsArea ? "active" : ""}`} > APIs diff --git a/projects/ui/src/user_variables.tmplr.ts b/projects/ui/src/user_variables.tmplr.ts index f06da005..9d083fa1 100644 --- a/projects/ui/src/user_variables.tmplr.ts +++ b/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" +); + From 64f9072ba75bfb4d838cacd07004855a4b847d90 Mon Sep 17 00:00:00 2001 From: JM Huibonhoa Date: Fri, 8 Nov 2024 00:35:00 -0500 Subject: [PATCH 3/4] add changelog --- changelog/v0.0.36/api-page-reload-env-var.yaml | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 changelog/v0.0.36/api-page-reload-env-var.yaml diff --git a/changelog/v0.0.36/api-page-reload-env-var.yaml b/changelog/v0.0.36/api-page-reload-env-var.yaml new file mode 100644 index 00000000..226aafe5 --- /dev/null +++ b/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. From 6ff61846d405962b49c601ce92b198a111d46100 Mon Sep 17 00:00:00 2001 From: Nicholas Bucher Date: Fri, 8 Nov 2024 07:58:43 -0500 Subject: [PATCH 4/4] Update Makefile --- Makefile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Makefile b/Makefile index f4fdcdf7..61b33136 100644 --- a/Makefile +++ b/Makefile @@ -107,7 +107,7 @@ endif # # API_PAGE_RELOAD ifneq ($(VITE_API_PAGE_RELOAD),) - UI_ARGS += VITE_COMPANY_NAME=$(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