Replug organizations page without assumable sessions

Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
2025-12-18 20:28:03 +01:00
committed by Bryan Frimin
parent 970a734964
commit ddf585fc18
14 changed files with 1342 additions and 69 deletions

View File

@@ -0,0 +1,116 @@
import { usePreloadedQuery, type PreloadedQuery } from "react-relay";
import { useTranslate } from "@probo/i18n";
import {
Button,
Card,
IconMagnifyingGlass,
IconPlusLarge,
Input,
} from "@probo/ui";
import { useMemo, useState } from "react";
import { OrganizationCard } from "./_components/OrganizationCard";
import { InvitationCard } from "./_components/InvitationCard";
import type {
OrganizationsQuery,
OrganizationsQuery$data,
} from "./__generated__/OrganizationsQuery.graphql";
import { organizationsQuery } from "./OrganizationsQuery";
interface PageProps {
queryRef: PreloadedQuery<OrganizationsQuery>;
}
export default function Page(props: PageProps) {
const { __ } = useTranslate();
const [search, setSearch] = useState("");
const { queryRef } = props;
const {
viewer: {
memberships: { edges: initialMemberships },
pendingInvitations: { edges: invitations },
},
} = usePreloadedQuery<OrganizationsQuery>(organizationsQuery, queryRef);
const memberships = useMemo<
OrganizationsQuery$data["viewer"]["memberships"]["edges"]
>(() => {
if (!search.trim()) {
return initialMemberships;
}
return initialMemberships.filter(({ node }) =>
node.organization.name.toLowerCase().includes(search.toLowerCase()),
);
}, [initialMemberships, search]);
return (
<>
<div className="space-y-6 w-full py-6">
<h1 className="text-3xl font-bold text-center">
{__("Select an organization")}
</h1>
<div className="space-y-4 w-full">
{invitations.length > 0 && (
<div className="space-y-3">
<h2 className="text-xl font-semibold">
{__("Pending invitations")}
</h2>
{invitations.map(({ node }) => (
<InvitationCard
key={node.id}
fKey={node}
// onAccept={handleAcceptInvitation}
// isAccepting={isAccepting}
/>
))}
</div>
)}
{memberships.length > 0 && (
<div className="space-y-3">
{invitations.length > 0 && (
<h2 className="text-xl font-semibold">
{__("Your organizations")}
</h2>
)}
{memberships.length > 3 && (
<div className="w-full">
<Input
icon={IconMagnifyingGlass}
placeholder={__("Search organizations...")}
value={search}
onValueChange={setSearch}
/>
</div>
)}
{memberships.length === 0 ? (
<div className="text-center text-txt-secondary py-4">
{__("No organizations found")}
</div>
) : (
memberships.map(({ node: { id, organization } }) => (
<OrganizationCard key={id} fKey={organization} />
))
)}
</div>
)}
<Card padded>
<h2 className="text-xl font-semibold mb-1">
{__("Create an organization")}
</h2>
<p className="text-txt-tertiary mb-4">
{__("Add a new organization to your account")}
</p>
<Button
to="/organizations/new"
variant="quaternary"
icon={IconPlusLarge}
className="w-full"
>
{__("Create organization")}
</Button>
</Card>
</div>
</div>
</>
);
}

View File

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

View File

@@ -0,0 +1,340 @@
/**
* @generated SignedSource<<c7e497311fbff76ab3b574012b9b9660>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type OrganizationsQuery$variables = Record<PropertyKey, never>;
export type OrganizationsQuery$data = {
readonly viewer: {
readonly memberships: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly createdAt: any;
readonly id: string;
readonly organization: {
readonly name: string;
readonly " $fragmentSpreads": FragmentRefs<"OrganizationCardFragment">;
};
};
}>;
};
readonly pendingInvitations: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly id: string;
readonly " $fragmentSpreads": FragmentRefs<"InvitationCardFragment">;
};
}>;
};
};
};
export type OrganizationsQuery = {
response: OrganizationsQuery$data;
variables: OrganizationsQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"kind": "Literal",
"name": "first",
"value": 1000
},
{
"kind": "Literal",
"name": "orderBy",
"value": {
"direction": "DESC",
"field": "CREATED_AT"
}
}
],
v1 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "OrganizationsQuery",
"selections": [
{
"kind": "RequiredField",
"field": {
"alias": null,
"args": null,
"concreteType": "Identity",
"kind": "LinkedField",
"name": "viewer",
"plural": false,
"selections": [
{
"alias": null,
"args": (v0/*: any*/),
"concreteType": "MembershipConnection",
"kind": "LinkedField",
"name": "memberships",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "MembershipEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Membership",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v1/*: any*/),
(v2/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "Organization",
"kind": "LinkedField",
"name": "organization",
"plural": false,
"selections": [
(v3/*: any*/),
{
"args": null,
"kind": "FragmentSpread",
"name": "OrganizationCardFragment"
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "memberships(first:1000,orderBy:{\"direction\":\"DESC\",\"field\":\"CREATED_AT\"})"
},
{
"alias": null,
"args": (v0/*: any*/),
"concreteType": "InvitationConnection",
"kind": "LinkedField",
"name": "pendingInvitations",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "InvitationEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Invitation",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v1/*: any*/),
{
"args": null,
"kind": "FragmentSpread",
"name": "InvitationCardFragment"
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "pendingInvitations(first:1000,orderBy:{\"direction\":\"DESC\",\"field\":\"CREATED_AT\"})"
}
],
"storageKey": null
},
"action": "THROW"
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [],
"kind": "Operation",
"name": "OrganizationsQuery",
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Identity",
"kind": "LinkedField",
"name": "viewer",
"plural": false,
"selections": [
{
"alias": null,
"args": (v0/*: any*/),
"concreteType": "MembershipConnection",
"kind": "LinkedField",
"name": "memberships",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "MembershipEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Membership",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v1/*: any*/),
(v2/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "Organization",
"kind": "LinkedField",
"name": "organization",
"plural": false,
"selections": [
(v3/*: any*/),
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "logoUrl",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "memberships(first:1000,orderBy:{\"direction\":\"DESC\",\"field\":\"CREATED_AT\"})"
},
{
"alias": null,
"args": (v0/*: any*/),
"concreteType": "InvitationConnection",
"kind": "LinkedField",
"name": "pendingInvitations",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "InvitationEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Invitation",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "role",
"storageKey": null
},
(v2/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "Organization",
"kind": "LinkedField",
"name": "organization",
"plural": false,
"selections": [
(v1/*: any*/),
(v3/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "pendingInvitations(first:1000,orderBy:{\"direction\":\"DESC\",\"field\":\"CREATED_AT\"})"
},
(v1/*: any*/)
],
"storageKey": null
}
]
},
"params": {
"cacheID": "145dddcd59c5c55a1c61913d9f43b38b",
"id": null,
"metadata": {},
"name": "OrganizationsQuery",
"operationKind": "query",
"text": "query OrganizationsQuery {\n viewer {\n memberships(first: 1000, orderBy: {direction: DESC, field: CREATED_AT}) {\n edges {\n node {\n id\n createdAt\n organization {\n name\n ...OrganizationCardFragment\n id\n }\n }\n }\n }\n pendingInvitations(first: 1000, orderBy: {direction: DESC, field: CREATED_AT}) {\n edges {\n node {\n id\n ...InvitationCardFragment\n }\n }\n }\n id\n }\n}\n\nfragment InvitationCardFragment on Invitation {\n id\n role\n createdAt\n organization {\n id\n name\n }\n}\n\nfragment OrganizationCardFragment on Organization {\n id\n name\n logoUrl\n}\n"
}
};
})();
(node as any).hash = "f85219c0fcd69be1b5cfb0a5b9c9b8db";
export default node;

View File

@@ -0,0 +1,56 @@
import { formatDate } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Card } from "@probo/ui";
import { graphql } from "relay-runtime";
import { useFragment } from "react-relay";
import type { InvitationCardFragment$key } from "./__generated__/InvitationCardFragment.graphql";
const fragment = graphql`
fragment InvitationCardFragment on Invitation {
id
role
createdAt
organization {
id
name
}
}
`;
interface InvitationCardProps {
fKey: InvitationCardFragment$key;
// onAccept: (invitationId: string, organizationId: string) => void;
// isAccepting: boolean;
}
export function InvitationCard(props: InvitationCardProps) {
const { fKey } = props;
const { __ } = useTranslate();
const invitation = useFragment<InvitationCardFragment$key>(fragment, fKey);
return (
<Card padded className="w-full">
<div className="flex items-start justify-between gap-4">
<div className="flex-1 space-y-1">
<h3 className="text-lg font-semibold">
{invitation.organization.name}
</h3>
<p className="text-sm text-txt-secondary">
{__("Role")}: <span className="font-medium">{invitation.role}</span>
</p>
<p className="text-xs text-txt-tertiary">
{__("Invited on")} {formatDate(invitation.createdAt)}
</p>
</div>
{/* <Button
onClick={() => onAccept(invitation.id, invitation.organization.id)}
disabled={isAccepting}
>
{isAccepting ? __("Accepting...") : __("Accept invitation")}
</Button> */}
</div>
</Card>
);
}

View File

@@ -0,0 +1,126 @@
import { useTranslate } from "@probo/i18n";
import { Avatar, Badge, Button, Card, IconLock } from "@probo/ui";
import { Link } from "react-router";
import { graphql } from "relay-runtime";
import { useFragment } from "react-relay";
import type { OrganizationCardFragment$key } from "./__generated__/OrganizationCardFragment.graphql";
const fragment = graphql`
fragment OrganizationCardFragment on Organization {
id
name
logoUrl
}
`;
interface OrganizationCardProps {
fKey: OrganizationCardFragment$key;
}
export function OrganizationCard(props: OrganizationCardProps) {
const { fKey } = props;
const { __ } = useTranslate();
const organization = useFragment<OrganizationCardFragment$key>(
fragment,
fKey,
);
// const isAuthenticated = organization.authStatus === "authenticated";
// const isExpired = organization.authStatus === "expired";
// const needsAuth = organization.authStatus === "unauthenticated";
// Determine target URL and button text based on auth status
// const targetUrl = isAuthenticated
// ? `/organizations/${organization.id}`
// : organization.loginUrl;
const targetUrl = `/organizations/${organization.id}`;
const getAuthBadge = () => {
// if (isAuthenticated) {
// return (
// <Badge variant="success" className="flex items-center gap-1">
// <IconCheckmark1 size={14} />
// {__("Authenticated")}
// </Badge>
// );
// }
// if (isExpired) {
// return (
// <Badge variant="warning" className="flex items-center gap-1">
// <IconClock size={14} />
// {__("Session expired")}
// </Badge>
// );
// }
// if (needsAuth) {
return (
<Badge variant="neutral" className="flex items-center gap-1">
<IconLock size={14} />
{__("Authentication required")}
</Badge>
);
// }
return null;
};
// const getButtonText = () => {
// if (isAuthenticated) return __("Select");
// if (organization.authenticationMethod === "saml")
// return __("Login with SAML");
// return __("Login");
// };
// Check if the URL is a backend SAML endpoint
const isSAMLUrl = targetUrl.includes("/connect/saml/");
return (
<Card padded className="w-full">
<div className="flex items-center justify-between">
{isSAMLUrl ? (
<a
href={targetUrl}
className="flex items-center gap-4 hover:text-primary flex-1"
>
<Avatar
src={organization.logoUrl}
name={organization.name}
size="l"
/>
<div className="flex flex-col gap-1">
<h2 className="font-semibold text-xl">{organization.name}</h2>
{getAuthBadge()}
</div>
</a>
) : (
<Link
to={targetUrl}
className="flex items-center gap-4 hover:text-primary flex-1"
>
<Avatar
src={organization.logoUrl}
name={organization.name}
size="l"
/>
<div className="flex flex-col gap-1">
<h2 className="font-semibold text-xl">{organization.name}</h2>
{getAuthBadge()}
</div>
</Link>
)}
<div className="flex items-center gap-3">
<Button asChild>
{/* {isSAMLUrl ? (
<a href={targetUrl}>{getButtonText()}</a>
) : (
<Link to={targetUrl}>{getButtonText()}</Link>
)} */}
<Link to={targetUrl}>LOGIN</Link>
</Button>
</div>
</div>
</Card>
);
}

View File

@@ -0,0 +1,85 @@
/**
* @generated SignedSource<<5193da6ee4b5da0bed510c255c3407b1>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from 'relay-runtime';
export type MembershipRole = "ADMIN" | "AUDITOR" | "EMPLOYEE" | "OWNER" | "VIEWER";
import { FragmentRefs } from "relay-runtime";
export type InvitationCardFragment$data = {
readonly createdAt: any;
readonly id: string;
readonly organization: {
readonly id: string;
readonly name: string;
};
readonly role: MembershipRole;
readonly " $fragmentType": "InvitationCardFragment";
};
export type InvitationCardFragment$key = {
readonly " $data"?: InvitationCardFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"InvitationCardFragment">;
};
const node: ReaderFragment = (function(){
var v0 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
};
return {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "InvitationCardFragment",
"selections": [
(v0/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "role",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "Organization",
"kind": "LinkedField",
"name": "organization",
"plural": false,
"selections": [
(v0/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
}
],
"storageKey": null
}
],
"type": "Invitation",
"abstractKey": null
};
})();
(node as any).hash = "1f61b5f07abc69ad33c880bc39cd0e96";
export default node;

View File

@@ -0,0 +1,58 @@
/**
* @generated SignedSource<<06aa55abfa21c09c85bb308f813565d8>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type OrganizationCardFragment$data = {
readonly id: string;
readonly logoUrl: string | null | undefined;
readonly name: string;
readonly " $fragmentType": "OrganizationCardFragment";
};
export type OrganizationCardFragment$key = {
readonly " $data"?: OrganizationCardFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"OrganizationCardFragment">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "OrganizationCardFragment",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "logoUrl",
"storageKey": null
}
],
"type": "Organization",
"abstractKey": null
};
(node as any).hash = "a8b9f4a515650db79f41507fb52f7b96";
export default node;

View File

@@ -49,7 +49,7 @@ import {
UnAuthenticatedError,
UnauthorizedError,
} from "@probo/relay";
import { OrganizationListLoading } from "./pages/iam/organization/list/loading.tsx";
import { OrganizationsQuery } from "./pages/iam/organizations/OrganizationsQuery.tsx";
/**
* Top level error boundary
@@ -121,7 +121,7 @@ const routes = [
index: true,
Component: () => (
<RelayEnvironmentProvider environment={connectEnvironment}>
<OrganizationListLoading />
<OrganizationsQuery />
</RelayEnvironmentProvider>
),
},
@@ -134,7 +134,7 @@ const routes = [
{
path: "documents/signing-requests",
Component: lazy(
() => import("./pages/DocumentSigningRequestsPage.tsx")
() => import("./pages/DocumentSigningRequestsPage.tsx"),
),
},
{
@@ -154,12 +154,13 @@ const routes = [
loader: loaderFromQueryLoader(({ organizationId }) =>
loadQuery(consoleEnvironment, employeeDocumentsQuery, {
organizationId: organizationId!,
})
}),
),
Component: withQueryRef(
lazy(
() => import("./pages/organizations/employee/EmployeeDocumentsPage")
)
() =>
import("./pages/organizations/employee/EmployeeDocumentsPage"),
),
),
},
{
@@ -169,13 +170,13 @@ const routes = [
loader: loaderFromQueryLoader(({ documentId }) =>
loadQuery(consoleEnvironment, employeeDocumentSignatureQuery, {
documentId: documentId!,
})
}),
),
Component: withQueryRef(
lazy(
() =>
import("./pages/organizations/employee/EmployeeDocumentSignaturePage")
)
import("./pages/organizations/employee/EmployeeDocumentSignaturePage"),
),
),
},
],
@@ -209,10 +210,10 @@ const routes = [
loader: loaderFromQueryLoader(({ organizationId }) =>
loadQuery(consoleEnvironment, organizationViewQuery, {
organizationId: organizationId!,
})
}),
),
Component: withQueryRef(
lazy(() => import("./pages/organizations/SettingsPage"))
lazy(() => import("./pages/organizations/SettingsPage")),
),
children: [
{
@@ -236,7 +237,7 @@ const routes = [
{
path: "domain",
Component: lazy(
() => import("./pages/organizations/settings/DomainSettingsTab")
() => import("./pages/organizations/settings/DomainSettingsTab"),
),
},
// {