Merge pull request #1398 from flanksource/add-clerk-controls-to-skele…

…leton-loader Add User Profile and Organization Switcher to Toolbar
flanksource · Sep 15, 2023 · e5c5ff8 · e5c5ff8
2 parents 94c5022 + 93c8cbe
commit e5c5ff8
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 10 deletions.
diff --git a/src/components/Authentication/Clerk/ClerkAuthErrors.tsx b/src/components/Authentication/Clerk/ClerkAuthErrors.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { Head } from "../../Head/Head";
 import ErrorPage from "../../Errors/ErrorPage";
+import { OrganizationSwitcher, UserButton } from "@clerk/nextjs";
 
 export default function ClerkAuthErrors() {
   const { query } = useRouter();
@@ -11,8 +12,19 @@ export default function ClerkAuthErrors() {
   return (
     <>
       <Head prefix="Bad Session Error" />
-      <div className="flex min-h-screen bg-gray-50 justify-center">
-        <div className="flex min-h-full flex-col justify-center pt-12 pb-28 sm:px-6 lg:px-8">
+      <div className="flex flex-row h-auto w-full bg-gray-50 p-3 space-x-4 items-end border-b border-gray-300">
+        <div className="flex-1 "></div>
+        <div className="h-12 flex flex-row gap-2 items-center">
+          <OrganizationSwitcher
+            hidePersonal
+            createOrganizationMode="modal"
+            afterSwitchOrganizationUrl="/"
+          />
+          <UserButton />
+        </div>
+      </div>
+      <div className="flex flex-col flex-1 bg-gray-50 justify-center">
+        <div className="flex min-h-full flex-col justify-center mx-auto">
           <div className="flex flex-col max-w-screen-lg gap-2 text-center">
             {code === "BAD_SESSION" ? (
               <ErrorPage

diff --git a/src/components/SkeletonLoader/FullPageSkeletonLoader.tsx b/src/components/SkeletonLoader/FullPageSkeletonLoader.tsx
@@ -1,7 +1,12 @@
+import { OrganizationSwitcher, UserButton } from "@clerk/nextjs";
+import useDetermineAuthSystem from "../Authentication/useDetermineAuthSystem";
+
 export default function FullPageSkeletonLoader() {
+  const authSystem = useDetermineAuthSystem();
+
   return (
-    <div className="h-screen w-screen flex flex-row animate-pulse">
-      <div className="flex flex-col w-56 pt-4 px-4 space-y-6 h-full bg-gray-50 border-r border-gray-300">
+    <div className="h-screen w-screen flex flex-row">
+      <div className="flex flex-col w-56 pt-4 px-4 space-y-6 h-full bg-gray-50 border-r border-gray-300 animate-pulse">
         <div className="w-full bg-gray-200 rounded-md h-12 "></div>
         <div className="w-full bg-gray-200 rounded-md h-12"></div>
         <div className="w-full bg-gray-200 rounded-md h-12"></div>
@@ -12,11 +17,22 @@ export default function FullPageSkeletonLoader() {
       </div>
       <div className="flex flex-col flex-1 h-full">
         <div className="flex flex-row h-auto w-full bg-gray-50 p-3 space-x-4 items-end border-b border-gray-300">
-          <div className="w-36 bg-gray-200 h-full rounded-md "></div>
-          <div className="flex-1"></div>
-          <div className="h-12 w-12 bg-gray-300 rounded-full"></div>
+          <div className="w-36 bg-gray-200 h-full rounded-md animate-pulse"></div>
+          <div className="flex-1 animate-pulse"></div>
+          {authSystem === "kratos" ? (
+            <div className="h-12 w-12 bg-gray-300 rounded-full"></div>
+          ) : (
+            <div className="h-12 flex flex-row gap-2 items-center">
+              <OrganizationSwitcher
+                hidePersonal
+                createOrganizationMode="modal"
+                afterSwitchOrganizationUrl="/"
+              />
+              <UserButton />
+            </div>
+          )}
         </div>
-        <div className="flex flex-row flex-1 p-4">
+        <div className="flex flex-row flex-1 p-4 animate-pulse">
           <div className="flex flex-row space-x-4 w-full">
             <div className="flex flex-col w-1/2 p-4 space-y-6 h-48 rounded-md bg-gray-50">
               <div className="w-full bg-gray-200 h-12 rounded-md "></div>

diff --git a/src/context/UserAccessContext/UserAccessContext.tsx b/src/context/UserAccessContext/UserAccessContext.tsx
@@ -83,7 +83,7 @@ export const UserAccessStateContextProvider = ({
 
   const fetchUserRoleInfo = async (userId: string) => {
     const { data = [] } = await fetchPeopleRoles([userId]);
-    let roles = data!.find((item) => item.id === userId)?.roles || [];
+    let roles = (data ?? []).find((item) => item.id === userId)?.roles || [];
     if (!roles.length) {
       roles = [Roles.viewer];
     }

diff --git a/src/services/permissions/permissionsService.ts b/src/services/permissions/permissionsService.ts
@@ -20,7 +20,7 @@ class PermissionService {
     const parentResource =
       featureToParentMap[featureName as keyof typeof featureToParentMap];
     let isDisabled = Boolean(
-      properties.find((item) => item.name === name && item.value === "true")
+      properties?.find((item) => item.name === name && item.value === "true")
     );
     if (isDisabled || !parentResource) {
       return isDisabled;