rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move page loaders in lazy components + plug viewer membership

Browse Source 
Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
2025-12-22 13:14:03 +01:00
committed by Bryan Frimin
parent 7ea232cceb
commit d4016186c2
23 changed files with 496 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/console/src/pages/iam/auth/AuthLayout.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { Logo } from "@probo/ui";
import { Outlet } from "react-router";
import { IAMRelayProvider } from "/providers/IAMRelayProvider";
export default function () {
return (
<div className="grid grid-cols-1 lg:grid-cols-2 min-h-screen text-txt-primary">
<div className="bg-level-0 flex flex-col items-center justify-center">
<div className="w-full max-w-md px-6">
<IAMRelayProvider>
<Outlet />
</IAMRelayProvider>
</div>
</div>
<div className="hidden lg:flex bg-dialog font-bold flex-col items-center justify-center p-8 text-txt-primary lg:p-10">
<div className="flex flex-col items-center justify-center gap-4">
<Logo withPicto className="w-[440px]" />
</div>
</div>
</div>
);
}

2
apps/console/src/pages/iam/auth/SignInPage.tsx
View File

@@ -16,7 +16,7 @@ const signInMutation = graphql`
}
`;
// TODO initial screen + SAML login
// TODO initial screen + SAML login + after sign in URL state
export default function SignInPage() {
const { __ } = useTranslate();

24
apps/console/src/pages/iam/memberships/MembershipLayout.tsx
View File

@@ -1,5 +1,4 @@
import { usePreloadedQuery, type PreloadedQuery } from "react-relay";
import { membershipLayoutQuery } from "./MembershipLayoutQuery";
import { graphql, usePreloadedQuery, type PreloadedQuery } from "react-relay";
import { Link, Outlet } from "react-router";
import { Badge, Button, IconPeopleAdd, Layout, Skeleton } from "@probo/ui";
import { Sidebar } from "./_components/Sidebar";
@@ -11,7 +10,24 @@ import { Suspense } from "react";
import { useTranslate } from "@probo/i18n";
import { CoreRelayProvider } from "/providers/CoreRelayProvider";
export default function MembershipLayout(props: {
export const membershipLayoutQuery = graphql`
query MembershipLayoutQuery($organizationId: ID!) {
organization: node(id: $organizationId) @required(action: THROW) {
... on Organization {
...MembershipsDropdown_organizationFragment
...SessionDropdownFragment
}
}
viewer @required(action: THROW) {
...MembershipsDropdown_viewerFragment
pendingInvitations @required(action: THROW) {
totalCount @required(action: THROW)
}
}
}
`;
export function MembershipLayout(props: {
queryRef: PreloadedQuery<MembershipLayoutQuery>;
}) {
const { queryRef } = props;
@@ -47,7 +63,7 @@ export default function MembershipLayout(props: {
)}
</div>
<Suspense fallback={<Skeleton className="w-32 h-8" />}>
<SessionDropdown fKey={viewer} />
<SessionDropdown fKey={organization} />
</Suspense>
</>
}

38
apps/console/src/pages/iam/memberships/MembershipLayoutLoader.tsx Normal file
View File

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

49
apps/console/src/pages/iam/memberships/MembershipLayoutQuery.tsx
View File

@@ -1,49 +0,0 @@
import { lazy } from "@probo/react-lazy";
import { useQueryLoader } from "react-relay";
import { graphql } from "relay-runtime";
import { Suspense, useEffect } from "react";
import { Skeleton } from "@probo/ui";
import { useOrganizationId } from "/hooks/useOrganizationId";
import type { MembershipLayoutQuery } from "./__generated__/MembershipLayoutQuery.graphql";
const Layout = lazy(() => import("./MembershipLayout"));
export const membershipLayoutQuery = graphql`
query MembershipLayoutQuery($organizationId: ID!) {
organization: node(id: $organizationId) @required(action: THROW) {
... on Organization {
...MembershipsDropdown_organizationFragment
}
}
viewer @required(action: THROW) {
...MembershipsDropdown_viewerFragment
pendingInvitations @required(action: THROW) {
totalCount @required(action: THROW)
}
...SessionDropdownFragment @arguments(organizationId: $organizationId)
}
}
`;
export function MembershipLayoutQuery() {
const organizationId = useOrganizationId();
const [queryRef, loadQuery] = useQueryLoader<MembershipLayoutQuery>(
membershipLayoutQuery,
);
useEffect(() => {
loadQuery({
organizationId,
});
}, [loadQuery, organizationId]);
if (!queryRef) {
return <Skeleton className="w-full h-screen" />;
}
return (
<Suspense fallback={<Skeleton className="w-full h-screen" />}>
<Layout queryRef={queryRef} />
</Suspense>
);
}

39
apps/console/src/pages/iam/memberships/MembershipsPage.tsx
View File

@@ -1,4 +1,4 @@
import { usePreloadedQuery, type PreloadedQuery } from "react-relay";
import { graphql, usePreloadedQuery, type PreloadedQuery } from "react-relay";
import { useTranslate } from "@probo/i18n";
import {
Button,
@@ -9,15 +9,42 @@ import {
} from "@probo/ui";
import { useMemo, useState } from "react";
import { InvitationCard } from "./_components/InvitationCard";
import { membershipsPageQuery } from "./MembershipsPageQuery";
import { MembershipCard } from "./_components/MembershipCard";
import type { MembershipsPageQuery } from "./__generated__/MembershipsPageQuery.graphql";
interface PageProps {
queryRef: PreloadedQuery<MembershipsPageQuery>;
}
export const membershipsPageQuery = graphql`
query MembershipsPageQuery {
viewer @required(action: THROW) {
memberships(first: 1000, orderBy: { direction: DESC, field: CREATED_AT })
@required(action: THROW) {
edges @required(action: THROW) {
node @required(action: THROW) {
id
...MembershipCardFragment
organization @required(action: THROW) {
name
}
}
}
}
pendingInvitations(
first: 1000
orderBy: { direction: DESC, field: CREATED_AT }
) @required(action: THROW) {
edges @required(action: THROW) {
node @required(action: THROW) {
id
...InvitationCardFragment
}
}
}
}
}
`;
export default function MembershipsPage(props: PageProps) {
export function MembershipsPage(props: {
queryRef: PreloadedQuery<MembershipsPageQuery>;
}) {
const { __ } = useTranslate();
const [search, setSearch] = useState("");

33
apps/console/src/pages/iam/memberships/MembershipsPageLoader.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { useQueryLoader } from "react-relay";
import { Suspense, useEffect } from "react";
import { CenteredLayoutSkeleton } from "@probo/ui";
import type { MembershipsPageQuery } from "./__generated__/MembershipsPageQuery.graphql";
import { MembershipsPage, membershipsPageQuery } from "./MembershipsPage";
import { IAMRelayProvider } from "/providers/IAMRelayProvider";
function MembershipsPageLoader() {
const [queryRef, loadQuery] =
useQueryLoader<MembershipsPageQuery>(membershipsPageQuery);
useEffect(() => {
loadQuery({});
}, [loadQuery]);
if (!queryRef) {
return <CenteredLayoutSkeleton />;
}
return (
<Suspense fallback={<CenteredLayoutSkeleton />}>
<MembershipsPage queryRef={queryRef} />
</Suspense>
);
}
export default function () {
return (
<IAMRelayProvider>
<MembershipsPageLoader />
</IAMRelayProvider>
);
}

57
apps/console/src/pages/iam/memberships/MembershipsPageQuery.tsx
View File

@@ -1,57 +0,0 @@
import { lazy } from "@probo/react-lazy";
import { useQueryLoader } from "react-relay";
import { graphql } from "relay-runtime";
import { Suspense, useEffect } from "react";
import { CenteredLayoutSkeleton } from "@probo/ui";
import type { MembershipsPageQuery } from "./__generated__/MembershipsPageQuery.graphql";
const Page = lazy(() => import("./MembershipsPage"));
export const membershipsPageQuery = graphql`
query MembershipsPageQuery {
viewer @required(action: THROW) {
memberships(first: 1000, orderBy: { direction: DESC, field: CREATED_AT })
@required(action: THROW) {
edges @required(action: THROW) {
node @required(action: THROW) {
id
...MembershipCardFragment
organization @required(action: THROW) {
name
}
}
}
}
pendingInvitations(
first: 1000
orderBy: { direction: DESC, field: CREATED_AT }
) @required(action: THROW) {
edges @required(action: THROW) {
node @required(action: THROW) {
id
...InvitationCardFragment
}
}
}
}
}
`;
export function MembershipsPageQuery() {
const [queryRef, loadQuery] =
useQueryLoader<MembershipsPageQuery>(membershipsPageQuery);
useEffect(() => {
loadQuery({});
}, [loadQuery]);
if (!queryRef) {
return <CenteredLayoutSkeleton />;
}
return (
<Suspense fallback={<CenteredLayoutSkeleton />}>
<Page queryRef={queryRef} />
</Suspense>
);
}

118
apps/console/src/pages/iam/memberships/__generated__/MembershipLayoutQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<4b0d5d271f19e23939fc2b392aa79fbc>>
* @generated SignedSource<<5ad02f9e0c07f5e9900005150f93d6fe>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -15,13 +15,13 @@ export type MembershipLayoutQuery$variables = {
};
export type MembershipLayoutQuery$data = {
readonly organization: {
readonly " $fragmentSpreads": FragmentRefs<"MembershipsDropdown_organizationFragment">;
readonly " $fragmentSpreads": FragmentRefs<"MembershipsDropdown_organizationFragment" | "SessionDropdownFragment">;
};
readonly viewer: {
readonly pendingInvitations: {
readonly totalCount: number;
};
readonly " $fragmentSpreads": FragmentRefs<"MembershipsDropdown_viewerFragment" | "SessionDropdownFragment">;
readonly " $fragmentSpreads": FragmentRefs<"MembershipsDropdown_viewerFragment">;
};
};
export type MembershipLayoutQuery = {
@@ -51,14 +51,7 @@ v2 = {
"name": "totalCount",
"storageKey": null
},
v3 = [
{
"kind": "Variable",
"name": "organizationId",
"variableName": "organizationId"
}
],
v4 = {
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
@@ -89,6 +82,11 @@ return {
"args": null,
"kind": "FragmentSpread",
"name": "MembershipsDropdown_organizationFragment"
},
{
"args": null,
"kind": "FragmentSpread",
"name": "SessionDropdownFragment"
}
],
"type": "Organization",
@@ -133,11 +131,6 @@ return {
"storageKey": null
},
"action": "THROW"
},
{
"args": (v3/*: any*/),
"kind": "FragmentSpread",
"name": "SessionDropdownFragment"
}
],
"storageKey": null
@@ -178,12 +171,62 @@ return {
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "Membership",
"kind": "LinkedField",
"name": "viewerMembership",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Identity",
"kind": "LinkedField",
"name": "identity",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "email",
"storageKey": null
},
(v3/*: any*/)
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "MembershipProfile",
"kind": "LinkedField",
"name": "profile",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
},
(v3/*: any*/)
],
"storageKey": null
},
(v3/*: any*/)
],
"storageKey": null
}
],
"type": "Organization",
"abstractKey": null
},
(v4/*: any*/)
(v3/*: any*/)
],
"storageKey": null
},
@@ -207,56 +250,23 @@ return {
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "email",
"storageKey": null
},
{
"alias": null,
"args": (v3/*: any*/),
"concreteType": "IdentityProfile",
"kind": "LinkedField",
"name": "profileFor",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "firstName",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "lastName",
"storageKey": null
},
(v4/*: any*/)
],
"storageKey": null
},
(v4/*: any*/)
(v3/*: any*/)
],
"storageKey": null
}
]
},
"params": {
"cacheID": "a849dd96b5088ddc9a3bbab50273c411",
"cacheID": "1fcebe9376b82798d829d98e2bdabaf3",
"id": null,
"metadata": {},
"name": "MembershipLayoutQuery",
"operationKind": "query",
"text": "query MembershipLayoutQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n ...MembershipsDropdown_organizationFragment\n }\n id\n }\n viewer {\n ...MembershipsDropdown_viewerFragment\n pendingInvitations {\n totalCount\n }\n ...SessionDropdownFragment_4xMPKw\n id\n }\n}\n\nfragment MembershipsDropdown_organizationFragment on Organization {\n name\n}\n\nfragment MembershipsDropdown_viewerFragment on Identity {\n pendingInvitations {\n totalCount\n }\n}\n\nfragment SessionDropdownFragment_4xMPKw on Identity {\n email\n profileFor(organizationId: $organizationId) {\n firstName\n lastName\n id\n }\n}\n"
"text": "query MembershipLayoutQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n ...MembershipsDropdown_organizationFragment\n ...SessionDropdownFragment\n }\n id\n }\n viewer {\n ...MembershipsDropdown_viewerFragment\n pendingInvitations {\n totalCount\n }\n id\n }\n}\n\nfragment MembershipsDropdown_organizationFragment on Organization {\n name\n}\n\nfragment MembershipsDropdown_viewerFragment on Identity {\n pendingInvitations {\n totalCount\n }\n}\n\nfragment SessionDropdownFragment on Organization {\n viewerMembership {\n identity {\n email\n id\n }\n profile {\n fullName\n id\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "e28f1f5e510386718b39cd547d4ce59f";
(node as any).hash = "c703bc4dce3307a22e42b5fa528537b2";
export default node;

27
apps/console/src/pages/iam/memberships/_components/SessionDropdown.tsx
View File

@@ -17,12 +17,14 @@ import { useTranslate } from "@probo/i18n";
import type { SessionDropdownFragment$key } from "./__generated__/SessionDropdownFragment.graphql";
export const fragment = graphql`
fragment SessionDropdownFragment on Identity
@argumentDefinitions(organizationId: { type: "ID!" }) {
email
profileFor(organizationId: $organizationId) {
firstName
lastName
fragment SessionDropdownFragment on Organization {
viewerMembership @required(action: THROW) {
identity @required(action: THROW) {
email
}
profile @required(action: THROW) {
fullName
}
}
}
`;
@@ -43,8 +45,12 @@ export function SessionDropdown(props: { fKey: SessionDropdownFragment$key }) {
const { isAuthorized } = use(PermissionsContext);
const { toast } = useToast();
const { email, profileFor: profile } =
useFragment<SessionDropdownFragment$key>(fragment, fKey);
const {
viewerMembership: {
identity: { email },
profile: { fullName },
},
} = useFragment<SessionDropdownFragment$key>(fragment, fKey);
const [signOut] = useMutation(signOutMutation);
const handleLogout: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
@@ -65,11 +71,6 @@ export function SessionDropdown(props: { fKey: SessionDropdownFragment$key }) {
});
};
// FIXME: user should always have a default profile
const fullName = profile?.firstName
? `${profile.firstName} ${profile.lastName}`
: email;
return (
<UserDropdown fullName={fullName} email={email}>
{isAuthorized("Organization", "deleteOrganization") && (

120
apps/console/src/pages/iam/memberships/_components/__generated__/SessionDropdownFragment.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<ccb8e318151fff4495fb2eaacc671612>>
* @generated SignedSource<<0d0906bc941900bb200a6a9824aaacc4>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -11,11 +11,14 @@
import { ReaderFragment } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type SessionDropdownFragment$data = {
readonly email: any;
readonly profileFor: {
readonly firstName: string | null | undefined;
readonly lastName: string | null | undefined;
} | null | undefined;
readonly viewerMembership: {
readonly identity: {
readonly email: any;
};
readonly profile: {
readonly fullName: string;
};
};
readonly " $fragmentType": "SessionDropdownFragment";
};
export type SessionDropdownFragment$key = {
@@ -24,60 +27,75 @@ export type SessionDropdownFragment$key = {
};
const node: ReaderFragment = {
"argumentDefinitions": [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "organizationId"
}
],
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "SessionDropdownFragment",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "email",
"storageKey": null
},
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "organizationId",
"variableName": "organizationId"
}
],
"concreteType": "IdentityProfile",
"kind": "LinkedField",
"name": "profileFor",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "firstName",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "lastName",
"storageKey": null
}
],
"storageKey": null
"kind": "RequiredField",
"field": {
"alias": null,
"args": null,
"concreteType": "Membership",
"kind": "LinkedField",
"name": "viewerMembership",
"plural": false,
"selections": [
{
"kind": "RequiredField",
"field": {
"alias": null,
"args": null,
"concreteType": "Identity",
"kind": "LinkedField",
"name": "identity",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "email",
"storageKey": null
}
],
"storageKey": null
},
"action": "THROW"
},
{
"kind": "RequiredField",
"field": {
"alias": null,
"args": null,
"concreteType": "MembershipProfile",
"kind": "LinkedField",
"name": "profile",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
}
],
"storageKey": null
},
"action": "THROW"
}
],
"storageKey": null
},
"action": "THROW"
}
],
"type": "Identity",
"type": "Organization",
"abstractKey": null
};
(node as any).hash = "de1d0f069e5648898cab6a56a394d86f";
(node as any).hash = "c283fcefcab15b977b44ece82f7cf450";
export default node;

11
apps/console/src/pages/iam/organizations/NewOrganizationPage.tsx
View File

@@ -5,6 +5,7 @@ import type { FormEventHandler } from "react";
import { useNavigate } from "react-router";
import { formatError, type GraphQLError } from "@probo/helpers";
import type { NewOrganizationPageMutation } from "./__generated__/NewOrganizationPageMutation.graphql";
import { IAMRelayProvider } from "/providers/IAMRelayProvider";
const createOrganizationMutation = graphql`
mutation NewOrganizationPageMutation($input: CreateOrganizationInput!) {
@@ -17,7 +18,7 @@ const createOrganizationMutation = graphql`
}
`;
export default function Page() {
function NewOrganizationPage() {
const navigate = useNavigate();
const { toast } = useToast();
const { __ } = useTranslate();
@@ -97,3 +98,11 @@ export default function Page() {
</div>
);
}
export default function () {
return (
<IAMRelayProvider>
<NewOrganizationPage />
</IAMRelayProvider>
);
}

14
apps/console/src/pages/iam/organizations/settings/GeneralSettingsPage.tsx
View File

@@ -7,11 +7,23 @@ import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
import { graphql } from "relay-runtime";
import { usePreloadedQuery, type PreloadedQuery } from "react-relay";
import type { GeneralSettingsPageQuery } from "./__generated__/GeneralSettingsPageQuery.graphql";
import { generalSettingsPageQuery } from "./GeneralSettingsPageQuery";
import type { GeneralSettingsPage_deleteMutation } from "./__generated__/GeneralSettingsPage_deleteMutation.graphql";
import { DeleteOrganizationDialog } from "/components/organizations/DeleteOrganizationDialog";
import { OrganizationForm } from "./_components/OrganizationForm";
export const generalSettingsPageQuery = graphql`
query GeneralSettingsPageQuery($organizationId: ID!) {
organization: node(id: $organizationId) @required(action: THROW) {
__typename
... on Organization {
id
name @required(action: THROW)
...OrganizationFormFragment
}
}
}
`;
const deleteOrganizationMutation = graphql`
mutation GeneralSettingsPage_deleteMutation(
$input: DeleteOrganizationInput!

23
apps/console/src/pages/iam/organizations/settings/GeneralSettingsPageQuery.tsx → apps/console/src/pages/iam/organizations/settings/GeneralSettingsPageLoader.tsx
View File

@@ -1,25 +1,14 @@
import { graphql } from "relay-runtime";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { useQueryLoader } from "react-relay";
import { useEffect } from "react";
import { GeneralSettingsPage } from "./GeneralSettingsPage";
import {
GeneralSettingsPage,
generalSettingsPageQuery,
} from "./GeneralSettingsPage";
import type { GeneralSettingsPageQuery } from "./__generated__/GeneralSettingsPageQuery.graphql";
import { IAMRelayProvider } from "/providers/IAMRelayProvider";
export const generalSettingsPageQuery = graphql`
query GeneralSettingsPageQuery($organizationId: ID!) {
organization: node(id: $organizationId) @required(action: THROW) {
__typename
... on Organization {
id
name @required(action: THROW)
...OrganizationFormFragment
}
}
}
`;
function GeneralSettingsPageQuery() {
function GeneralSettingsPageLoader() {
const organizationId = useOrganizationId();
const [queryRef, loadQuery] = useQueryLoader<GeneralSettingsPageQuery>(
generalSettingsPageQuery,
@@ -41,7 +30,7 @@ function GeneralSettingsPageQuery() {
export default function () {
return (
<IAMRelayProvider>
<GeneralSettingsPageQuery />
<GeneralSettingsPageLoader />
</IAMRelayProvider>
);
}

2
apps/console/src/pages/iam/organizations/settings/SettingsLayout.tsx
View File

@@ -11,7 +11,7 @@ import { Outlet } from "react-router";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { useTranslate } from "@probo/i18n";
export default function SettingsLayout() {
export default function () {
const organizationId = useOrganizationId();
const { __ } = useTranslate();

35
apps/console/src/routes.tsx
View File

@@ -5,7 +5,7 @@ import {
useRouteError,
} from "react-router";
import { EmployeeLayout } from "./layouts/EmployeeLayout";
import { AuthLayout, CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui";
import { CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui";
import { PageSkeleton } from "./components/skeletons/PageSkeleton.tsx";
import { loadQuery } from "react-relay";
import { riskRoutes } from "./routes/riskRoutes.ts";
@@ -46,13 +46,6 @@ import {
UnAuthenticatedError,
UnauthorizedError,
} from "@probo/relay";
import { MembershipsPageQuery } from "./pages/iam/memberships/MembershipsPageQuery.tsx";
import { MembershipLayoutQuery } from "./pages/iam/memberships/MembershipLayoutQuery.tsx";
import { IAMRelayProvider } from "./providers/IAMRelayProvider.tsx";
const NewOrganizationPage = lazy(
() => import("./pages/iam/organizations/NewOrganizationPage"),
);
/**
* Top level error boundary
@@ -78,11 +71,7 @@ function ErrorBoundary({ error: propsError }: { error?: string }) {
const routes = [
{
path: "/auth",
Component: () => (
<IAMRelayProvider>
<AuthLayout />
</IAMRelayProvider>
),
Component: lazy(() => import("./pages/iam/auth/AuthLayout")),
children: [
{
path: "login",
@@ -118,18 +107,14 @@ const routes = [
children: [
{
index: true,
Component: () => (
<IAMRelayProvider>
<MembershipsPageQuery />
</IAMRelayProvider>
Component: lazy(
() => import("./pages/iam/memberships/MembershipsPageLoader"),
),
},
{
path: "organizations/new",
Component: () => (
<IAMRelayProvider>
<NewOrganizationPage />
</IAMRelayProvider>
Component: lazy(
() => import("./pages/iam/organizations/NewOrganizationPage"),
),
},
{
@@ -184,10 +169,8 @@ const routes = [
},
{
path: "/organizations/:organizationId",
Component: () => (
<IAMRelayProvider>
<MembershipLayoutQuery />
</IAMRelayProvider>
Component: lazy(
() => import("./pages/iam/memberships/MembershipLayoutLoader.tsx"),
),
ErrorBoundary: ErrorBoundary,
children: [
@@ -222,7 +205,7 @@ const routes = [
path: "general",
Component: lazy(
() =>
import("./pages/iam/organizations/settings/GeneralSettingsPageQuery.tsx"),
import("./pages/iam/organizations/settings/GeneralSettingsPageLoader.tsx"),
),
},
// {