added UserChecker for login flow.

Signed-off-by: Nicholas Bucher <behappy54321@gmail.com>

projects/ui/src/Apis/api-types.ts

@@ -106,6 +106,7 @@ export type App = {
   name: string;
   description: string;
   teamId: string;
+  metadata: AppMetadata;
 };
 
 export type ApiKey = {
@@ -155,6 +156,7 @@ export type Subscription = {
   id: string;
   requestedAt: string;
   updatedAt: string;
+  metadata: SubscriptionMetadata;
 };
 
 export type ApiVersionExtended = ApiVersion & {
@@ -165,10 +167,33 @@ export type ApiVersionExtended = ApiVersion & {
 export type OauthCredential = {
   id: string;
   idpClientId: string;
-  idpClientSecret: string;
+  idpClientSecret?: string;
   idpClientName: string;
 };
 
+export type RateLimit = {
+  requestsPerUnit: string;
+  unit: string;
+};
+
+export type SubscriptionMetadata = {
+  createdAt?: string;
+  customMetadata: Record<string, string>;
+  deletedAt?: string;
+  id: string;
+  rateLimit: RateLimit;
+  updatedAt: string;
+};
+
+export type AppMetadata = {
+  createdAt?: string;
+  customMetadata: Record<string, string>;
+  deletedAt?: string;
+  id: string;
+  rateLimit: RateLimit;
+  updatedAt: string;
+};
+
 //
 // Shared Types
 //

projects/ui/src/Apis/gg_hooks.ts

@@ -506,3 +506,17 @@ export function useDeleteOAuthMutation(appId: string) {
   };
   return useSWRMutation(`/apps/${appId}/oauth-credentials`, deleteOAuth);
 }
+
+// -------------------------------- //
+// region Create User
+
+export function useCreateUserMutation() {
+  const { latestAccessToken } = useContext(AuthContext);
+  const createUser = async () => {
+    await fetchJSON(`/me`, {
+      method: "PUT",
+      headers: getLatestAuthHeaders(latestAccessToken),
+    });
+  };
+  return useSWRMutation(`create-user`, createUser);
+}

projects/ui/src/Components/App.tsx

@@ -5,6 +5,7 @@ import { AppUtilsContextProvider } from "../Context/AppUtilsContext";
 import { defaultTheme, globalStyles } from "../Styles";
 import { mantineThemeOverride } from "../Styles/global-styles/mantine-theme";
 import PortalServerTypeChecker from "../Utility/PortalServerTypeChecker";
+import UserChecker from "../Utility/UserChecker.tsx";
 import AppContent from "./AppContent";
 
 /**
@@ -19,6 +20,7 @@ export function App() {
       <AppUtilsContextProvider>
         <AppContextProvider>
           <PortalServerTypeChecker />
+          <UserChecker />
 
           <MantineProvider
             withGlobalStyles

projects/ui/src/Components/Apps/AppMetadata/AppMetadataDisplay.tsx

@@ -0,0 +1,20 @@
+import { Box, Text } from "@mantine/core";
+import { App } from "../../../Apis/api-types";
+import { colors } from "../../../Styles";
+import { borderRadiusConstants } from "../../../Styles/constants";
+
+const AppMetadataDisplay = ({ app }: { app: App }) => {
+  return (
+    <Box
+      sx={{
+        border: "1px solid " + colors.splashBlue,
+        borderRadius: borderRadiusConstants.small,
+      }}
+      p="20px"
+    >
+      <Text size="md">Metadata for {app.name}</Text>
+    </Box>
+  );
+};
+
+export default AppMetadataDisplay;

projects/ui/src/Components/Apps/PageContent/AppSummaryCards/AppSummaryGridCard.tsx

@@ -9,6 +9,7 @@ import {
   getTeamDetailsLink,
 } from "../../../../Utility/link-builders";
 import { SubscriptionInfoCardStyles } from "../../../Common/SubscriptionsList/SubscriptionInfoCard/SubscriptionInfoCard.style";
+import AppMetadataDisplay from "../../AppMetadata/AppMetadataDisplay";
 import { AppWithTeam } from "../AppsList";
 
 /**
@@ -35,6 +36,7 @@ export function AppSummaryGridCard({ app }: { app: AppWithTeam }) {
                 </UtilityStyles.NavLinkContainer>
               </Tooltip>
             </Flex>
+            <AppMetadataDisplay app={app} />
             <CardStyles.Description>{app.description}</CardStyles.Description>
           </Flex>
         </Box>

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

@@ -82,8 +82,7 @@ const HeaderSectionLoggedIn = () => {
            * Note: The "userHolder" class is kept here for testing purposes.
            */}
           <div className="userHolder dropdownContainer">
-            <Icon.UserProfile className="userCircle" />
-            {!!user ? user.username : " NO USER " + JSON.stringify(user)}
+            <Icon.UserProfile className="userCircle" /> {user?.username ?? ""}
             <Icon.DownArrow
               className={`dropdownArrow canRotate ${opened ? "rotate180" : ""}`}
             />

projects/ui/src/Components/Structure/OidcAuthCodeHeader/OidcAuthCodeHeaderSection.tsx

@@ -44,7 +44,7 @@ export function OidcAuthCodeHeaderSection() {
            * Note: The "userHolder" class is kept here for testing purposes.
            */}
           <div className="userHolder dropdownContainer">
-            <Icon.UserProfile className="userCircle" /> {user?.username}
+            <Icon.UserProfile className="userCircle" /> {user?.username ?? ""}
             <Icon.DownArrow
               className={`dropdownArrow canRotate ${opened ? "rotate180" : ""}`}
             />

projects/ui/src/Utility/UserChecker.tsx.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react";
+import { useCreateUserMutation, useGetCurrentUser } from "../Apis/gg_hooks";
+
+const UserChecker = () => {
+  // For Gloo Gateway:
+  // If the user is logged into the IDP, but the portal server doesn't return data for it,
+  // then the user will need to be created.
+  const { error, mutate } = useGetCurrentUser();
+  const { trigger: createUser } = useCreateUserMutation();
+  const triedToCreateUser = useRef(false);
+
+  useEffect(() => {
+    if (
+      // This error occurs when the user has logged in through their IDP,
+      // but does not exist in the portal server DB.
+      error?.message ===
+        "logged in user is not found, this should not happen" &&
+      !triedToCreateUser.current
+    ) {
+      setTimeout(async () => {
+        // We can then create the current user.
+        await createUser();
+        // and then refetch their user information.
+        mutate();
+      }, 0);
+      triedToCreateUser.current = true;
+    }
+  }, [error, createUser, mutate]);
+
+  return null;
+};
+
+export default UserChecker;