OIDC header variant link fixes for new features

changelog/v0.0.36/header-section-oidc-fixes.yaml

@@ -0,0 +1,6 @@
+changelog:
+  - type: FIX
+    issueLink: https://github.com/solo-io/gloo-mesh-enterprise/issues/18658
+    description: >-
+      Adds links for the new teams + apps pages to the OIDC auth header variant.
+      This also includes some refactoring of that area.

projects/ui/src/Components/ApiDetails/gloo-gateway-components/ApiProductDetailsPageHeading.tsx

@@ -1,13 +1,13 @@
 import { Box, Flex, Select } from "@mantine/core";
-import { useContext, useState } from "react";
+import { useState } from "react";
 import toast from "react-hot-toast";
 import {
   ApiProductSummary,
   ApiVersion,
   ApiVersionSchema,
 } from "../../../Apis/api-types";
 import { Icon } from "../../../Assets/Icons";
-import { AuthContext } from "../../../Context/AuthContext";
+import { useIsLoggedIn } from "../../../Context/AuthContext";
 import { FormModalStyles } from "../../../Styles/shared/FormModalStyles";
 import { useGetImageURL } from "../../../Utility/custom-image-utility";
 import {
@@ -34,7 +34,7 @@ const ApiProductDetailsPageHeading = ({
   onSelectedApiVersionChange: (newVersionId: string | null) => void;
   apiVersionSpec: ApiVersionSchema | undefined;
 }) => {
-  const { isLoggedIn } = useContext(AuthContext);
+  const isLoggedIn = useIsLoggedIn();
   const [showSubscribeModal, setShowSubscribeModal] = useState(false);
 
   const downloadApiSpec = () => {

projects/ui/src/Components/Apis/EmptyApisPage.tsx

@@ -1,7 +1,6 @@
 import { Code } from "@mantine/core";
-import { useContext } from "react";
 import { Icon } from "../../Assets/Icons";
-import { AuthContext } from "../../Context/AuthContext";
+import { useIsLoggedIn } from "../../Context/AuthContext";
 import { apisImageURL } from "../../user_variables.tmplr";
 import { BannerHeading } from "../Common/Banner/BannerHeading";
 import { BannerHeadingTitle } from "../Common/Banner/BannerHeadingTitle";
@@ -28,7 +27,7 @@ export function EmptyApisPage() {
 }
 
 export const EmptyApisPageContent = () => {
-  const { isLoggedIn } = useContext(AuthContext);
+  const isLoggedIn = useIsLoggedIn();
 
   if (!!isLoggedIn)
     return <EmptyData>No API Products have been created.</EmptyData>;

projects/ui/src/Components/AppContent.tsx

@@ -2,10 +2,8 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { useContext } from "react";
 import { AppContext } from "../Context/AppContext";
-import { appliedOidcAuthCodeConfig } from "../user_variables.tmplr";
 import AppContentRoutes from "./AppContentRoutes";
-import { Header } from "./Structure/BasicAuthVariant/Header";
-import OidcAuthCodeHeaderVariant from "./Structure/OidcAuthCodeHeaderVariant/OidcAuthCodeHeaderVariant";
+import Header from "./Structure/Header";
 
 export const StyledAppContainer = styled.div(
   ({ theme }) => css`
@@ -32,7 +30,7 @@ function AppContent() {
    */
   return (
     <StyledAppContainer data-theme={isDarkMode ? "dark" : "light"}>
-      {!!appliedOidcAuthCodeConfig ? <OidcAuthCodeHeaderVariant /> : <Header />}
+      <Header />
       <AppContentRoutes />
     </StyledAppContainer>
   );

projects/ui/src/Components/AppContentRoutes.tsx

@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import { useContext } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { AppContext } from "../Context/AppContext";
-import { AuthContext } from "../Context/AuthContext";
+import { useIsLoggedIn } from "../Context/AuthContext";
 import {
   customPages,
   oidcAuthCodeConfigCallbackPath,
@@ -46,7 +46,7 @@ const MainContentContainer = styled.div`
  *      know the area that failed.
  **/
 function AppContentRoutes() {
-  const { isLoggedIn } = useContext(AuthContext);
+  const isLoggedIn = useIsLoggedIn();
   const { portalServerType } = useContext(AppContext);
 
   return (

projects/ui/src/Components/Structure/BasicAuth/BasicAuthHeaderSection.tsx

@@ -0,0 +1,23 @@
+import { useIsLoggedIn } from "../../../Context/AuthContext";
+import HeaderSectionLoggedIn from "./HeaderSectionLoggedIn";
+import HeaderSectionLoggedOut from "./HeaderSectionLoggedOut";
+
+if (!window.isSecureContext) {
+  // eslint-disable-next-line no-console
+  console.error(
+    "This page is not being delivered in a secure context (see https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts), " +
+      "so login will not work."
+  );
+}
+
+/**
+ * MAIN COMPONENT
+ **/
+export function BasicAuthHeaderSection() {
+  const isLoggedIn = useIsLoggedIn();
+
+  if (isLoggedIn) {
+    return <HeaderSectionLoggedIn />;
+  }
+  return <HeaderSectionLoggedOut />;
+}

projects/ui/src/Components/Structure/BasicAuthVariant/HeaderSectionLoggedIn.tsx → projects/ui/src/Components/Structure/BasicAuth/HeaderSectionLoggedIn.tsx

@@ -79,8 +79,8 @@ const HeaderSectionLoggedIn = () => {
           onClick={() => setOpened(!opened)}
         >
           <div className="userHolder">
-            <Icon.UserProfile className="userCircle" />{" "}
-            {!!user ? user.username : " "}
+            <Icon.UserProfile className="userCircle" />
+            {!!user ? user.username : " NO USER " + JSON.stringify(user)}
             <Icon.DownArrow
               className={`dropdownArrow canRotate ${opened ? "rotate180" : ""}`}
             />

projects/ui/src/Components/Structure/BasicAuthVariant/HeaderSectionLoggedOut.tsx → projects/ui/src/Components/Structure/BasicAuth/HeaderSectionLoggedOut.tsx

@@ -4,6 +4,7 @@ import {
   AuthContext,
   LOCAL_STORAGE_AUTH_STATE,
   LOCAL_STORAGE_AUTH_VERIFIER,
+  useIsLoggedIn,
 } from "../../../Context/AuthContext";
 import { doAccessTokenRequest } from "../../../Utility/accessTokenRequest";
 import {
@@ -103,7 +104,8 @@ const AuthFlowStarter = () => {
 };
 
 const HeaderSectionLoggedOut = () => {
-  const { onLogin, isLoggedIn } = useContext(AuthContext);
+  const { onLogin } = useContext(AuthContext);
+  const isLoggedIn = useIsLoggedIn();
   const [searchParams] = useSearchParams();
 
   //