Fix employee layout has no sidebar

Signed-off-by: Émile Ré <nemile.re@gmail.com>

apps/console/src/pages/iam/memberships/MembershipLayout.tsx

@@ -10,13 +10,13 @@ import { useTranslate } from "@probo/i18n";
 import { CoreRelayProvider } from "/providers/CoreRelayProvider";
 
 export const membershipLayoutQuery = graphql`
-  query MembershipLayoutQuery($organizationId: ID!) {
+  query MembershipLayoutQuery($organizationId: ID!, $hideSidebar: Boolean!) {
     organization: node(id: $organizationId) @required(action: THROW) {
       __typename
       ... on Organization {
         ...MembershipsDropdown_organizationFragment
         ...SessionDropdownFragment
-        ...SidebarFragment
+        ...SidebarFragment @skip(if: $hideSidebar)
         viewerMembership @required(action: THROW) {
           role
         }
@@ -32,9 +32,10 @@ export const membershipLayoutQuery = graphql`
 `;
 
 export function MembershipLayout(props: {
+  hideSidebar?: boolean;
   queryRef: PreloadedQuery<MembershipLayoutQuery>;
 }) {
-  const { queryRef } = props;
+  const { hideSidebar = false, queryRef } = props;
 
   const { __ } = useTranslate();
 
@@ -73,7 +74,7 @@ export function MembershipLayout(props: {
           </Suspense>
         </>
       }
-      sidebar={<Sidebar fKey={organization} />}
+      sidebar={!hideSidebar && <Sidebar fKey={organization} />}
     >
       <CoreRelayProvider>
         <Outlet context={organization.viewerMembership.role} />

apps/console/src/pages/iam/memberships/MembershipLayoutLoader.tsx

@@ -15,6 +15,7 @@ function MembershipLayoutLoader() {
   useEffect(() => {
     loadQuery({
       organizationId,
+      hideSidebar: false,
     });
   }, [loadQuery, organizationId]);
 

apps/console/src/pages/organizations/employee/EmployeeLayoutLoader.tsx

@@ -0,0 +1,42 @@
+import { useQueryLoader } from "react-relay";
+import { Suspense, useEffect } from "react";
+import { Skeleton } from "@probo/ui";
+import { useOrganizationId } from "/hooks/useOrganizationId";
+import { IAMRelayProvider } from "/providers/IAMRelayProvider";
+import {
+  MembershipLayout,
+  membershipLayoutQuery,
+} from "/pages/iam/memberships/MembershipLayout";
+import type { MembershipLayoutQuery } from "/__generated__/iam/MembershipLayoutQuery.graphql";
+
+function EmployeeLayoutLoader() {
+  const organizationId = useOrganizationId();
+  const [queryRef, loadQuery] = useQueryLoader<MembershipLayoutQuery>(
+    membershipLayoutQuery,
+  );
+
+  useEffect(() => {
+    loadQuery({
+      organizationId,
+      hideSidebar: true,
+    });
+  }, [loadQuery, organizationId]);
+
+  if (!queryRef) {
+    return <Skeleton className="w-full h-screen" />;
+  }
+
+  return (
+    <Suspense fallback={<Skeleton className="w-full h-screen" />}>
+      <MembershipLayout queryRef={queryRef} hideSidebar />
+    </Suspense>
+  );
+}
+
+export default function () {
+  return (
+    <IAMRelayProvider>
+      <EmployeeLayoutLoader />
+    </IAMRelayProvider>
+  );
+}