Clean trust center access

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
2025-08-04 18:20:37 +02:00
parent 032fd14135
commit 5fb0b9cffc
16 changed files with 50 additions and 1409 deletions

View File

@@ -25,7 +25,6 @@ export const trustCenterAccessesQuery = graphql`
id
email
name
active
createdAt
}
}
@@ -35,20 +34,6 @@ export const trustCenterAccessesQuery = graphql`
}
`;
export const revokeTrustCenterAccessMutation = graphql`
mutation TrustCenterAccessGraphRevokeMutation($input: RevokeTrustCenterAccessInput!) {
revokeTrustCenterAccess(input: $input) {
trustCenterAccess {
id
email
name
active
createdAt
}
}
}
`;
export const createTrustCenterAccessMutation = graphql`
mutation TrustCenterAccessGraphCreateMutation(
$input: CreateTrustCenterAccessInput!
@@ -61,7 +46,6 @@ export const createTrustCenterAccessMutation = graphql`
id
email
name
active
createdAt
}
}
@@ -69,20 +53,6 @@ export const createTrustCenterAccessMutation = graphql`
}
`;
export const updateTrustCenterAccessMutation = graphql`
mutation TrustCenterAccessGraphUpdateMutation($input: UpdateTrustCenterAccessInput!) {
updateTrustCenterAccess(input: $input) {
trustCenterAccess {
id
email
name
active
createdAt
}
}
}
`;
export const deleteTrustCenterAccessMutation = graphql`
mutation TrustCenterAccessGraphDeleteMutation(
$input: DeleteTrustCenterAccessInput!
@@ -94,6 +64,15 @@ export const deleteTrustCenterAccessMutation = graphql`
}
`;
export function useTrustCenterAccesses(trustCenterId: string): TrustCenterAccessGraphQuery$data {
return useLazyLoadQuery<TrustCenterAccessGraphQuery>(trustCenterAccessesQuery, { trustCenterId });
export function useTrustCenterAccesses(trustCenterId: string): TrustCenterAccessGraphQuery$data | null {
// Always call useLazyLoadQuery to maintain consistent hook order
// Use a placeholder value when trustCenterId is empty
const data = useLazyLoadQuery<TrustCenterAccessGraphQuery>(
trustCenterAccessesQuery,
{ trustCenterId: trustCenterId || "" },
{ fetchPolicy: 'store-and-network' }
);
// Return null if trustCenterId was empty, otherwise return the data
return trustCenterId ? data : null;
}

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<79b53f51663ada6e9899523400d54996>>
* @generated SignedSource<<08687dbafb5515e9d2073b292a05ea0c>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -12,7 +12,6 @@ import { ConcreteRequest } from 'relay-runtime';
export type CreateTrustCenterAccessInput = {
email: string;
name: string;
sendEmail?: boolean;
trustCenterId: string;
};
export type TrustCenterAccessGraphCreateMutation$variables = {
@@ -24,7 +23,6 @@ export type TrustCenterAccessGraphCreateMutation$data = {
readonly trustCenterAccessEdge: {
readonly cursor: any;
readonly node: {
readonly active: boolean;
readonly createdAt: any;
readonly email: string;
readonly id: string;
@@ -100,13 +98,6 @@ v3 = {
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "active",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -186,16 +177,16 @@ return {
]
},
"params": {
"cacheID": "eafddcd0263963235d3249c22eb50593",
"cacheID": "86c21ac139bec74f2a4abad9caef68b1",
"id": null,
"metadata": {},
"name": "TrustCenterAccessGraphCreateMutation",
"operationKind": "mutation",
"text": "mutation TrustCenterAccessGraphCreateMutation(\n $input: CreateTrustCenterAccessInput!\n) {\n createTrustCenterAccess(input: $input) {\n trustCenterAccessEdge {\n cursor\n node {\n id\n email\n name\n active\n createdAt\n }\n }\n }\n}\n"
"text": "mutation TrustCenterAccessGraphCreateMutation(\n $input: CreateTrustCenterAccessInput!\n) {\n createTrustCenterAccess(input: $input) {\n trustCenterAccessEdge {\n cursor\n node {\n id\n email\n name\n createdAt\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "99676fee0b2de06a92cdad66c577eee7";
(node as any).hash = "59e0ab46fd6b68747566d666f5315292";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<2333a6a7d5415f1a08a5612dcaceee8f>>
* @generated SignedSource<<cbee2b0f0f7bc70f542094f32bd1b91b>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -19,7 +19,6 @@ export type TrustCenterAccessGraphQuery$data = {
readonly edges: ReadonlyArray<{
readonly cursor: any;
readonly node: {
readonly active: boolean;
readonly createdAt: any;
readonly email: string;
readonly id: string;
@@ -156,13 +155,6 @@ v5 = [
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "active",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -290,7 +282,7 @@ return {
]
},
"params": {
"cacheID": "5b83cd4ae2434ce2e00de7230d264432",
"cacheID": "47681869f07fbe7df45ae3f663827c10",
"id": null,
"metadata": {
"connection": [
@@ -307,11 +299,11 @@ return {
},
"name": "TrustCenterAccessGraphQuery",
"operationKind": "query",
"text": "query TrustCenterAccessGraphQuery(\n $trustCenterId: ID!\n) {\n node(id: $trustCenterId) {\n __typename\n ... on TrustCenter {\n id\n accesses(first: 100, orderBy: {field: CREATED_AT, direction: DESC}) {\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n edges {\n cursor\n node {\n id\n email\n name\n active\n createdAt\n __typename\n }\n }\n }\n }\n id\n }\n}\n"
"text": "query TrustCenterAccessGraphQuery(\n $trustCenterId: ID!\n) {\n node(id: $trustCenterId) {\n __typename\n ... on TrustCenter {\n id\n accesses(first: 100, orderBy: {field: CREATED_AT, direction: DESC}) {\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n edges {\n cursor\n node {\n id\n email\n name\n createdAt\n __typename\n }\n }\n }\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "af598fd2af198e63ed84fd618857a985";
(node as any).hash = "06d7307ac23675de91ba2f9cb9d604bc";
export default node;

View File

@@ -1,137 +0,0 @@
/**
* @generated SignedSource<<a234c36ae13e75cd1b0d893c4e232fc4>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type RevokeTrustCenterAccessInput = {
accessId: string;
};
export type TrustCenterAccessGraphRevokeMutation$variables = {
input: RevokeTrustCenterAccessInput;
};
export type TrustCenterAccessGraphRevokeMutation$data = {
readonly revokeTrustCenterAccess: {
readonly trustCenterAccess: {
readonly active: boolean;
readonly createdAt: any;
readonly email: string;
readonly id: string;
readonly name: string;
};
};
};
export type TrustCenterAccessGraphRevokeMutation = {
response: TrustCenterAccessGraphRevokeMutation$data;
variables: TrustCenterAccessGraphRevokeMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
}
],
v1 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
"concreteType": "RevokeTrustCenterAccessPayload",
"kind": "LinkedField",
"name": "revokeTrustCenterAccess",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "TrustCenterAccess",
"kind": "LinkedField",
"name": "trustCenterAccess",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "email",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "active",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "TrustCenterAccessGraphRevokeMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "TrustCenterAccessGraphRevokeMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "b26927a2b8d02eb2e3754850b0a44d8b",
"id": null,
"metadata": {},
"name": "TrustCenterAccessGraphRevokeMutation",
"operationKind": "mutation",
"text": "mutation TrustCenterAccessGraphRevokeMutation(\n $input: RevokeTrustCenterAccessInput!\n) {\n revokeTrustCenterAccess(input: $input) {\n trustCenterAccess {\n id\n email\n name\n active\n createdAt\n }\n }\n}\n"
}
};
})();
(node as any).hash = "269cce2fe60fac04d807f1004ef0777f";
export default node;

View File

@@ -1,141 +0,0 @@
/**
* @generated SignedSource<<54ac79c4d292eb19f73bbf2363015dd9>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type UpdateTrustCenterAccessInput = {
accessId: string;
active?: boolean | null | undefined;
email?: string | null | undefined;
name?: string | null | undefined;
sendEmail?: boolean;
};
export type TrustCenterAccessGraphUpdateMutation$variables = {
input: UpdateTrustCenterAccessInput;
};
export type TrustCenterAccessGraphUpdateMutation$data = {
readonly updateTrustCenterAccess: {
readonly trustCenterAccess: {
readonly active: boolean;
readonly createdAt: any;
readonly email: string;
readonly id: string;
readonly name: string;
};
};
};
export type TrustCenterAccessGraphUpdateMutation = {
response: TrustCenterAccessGraphUpdateMutation$data;
variables: TrustCenterAccessGraphUpdateMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
}
],
v1 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
"concreteType": "UpdateTrustCenterAccessPayload",
"kind": "LinkedField",
"name": "updateTrustCenterAccess",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "TrustCenterAccess",
"kind": "LinkedField",
"name": "trustCenterAccess",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "email",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "active",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "TrustCenterAccessGraphUpdateMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "TrustCenterAccessGraphUpdateMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "8e284c8129de02d689385cae38cc3876",
"id": null,
"metadata": {},
"name": "TrustCenterAccessGraphUpdateMutation",
"operationKind": "mutation",
"text": "mutation TrustCenterAccessGraphUpdateMutation(\n $input: UpdateTrustCenterAccessInput!\n) {\n updateTrustCenterAccess(input: $input) {\n trustCenterAccess {\n id\n email\n name\n active\n createdAt\n }\n }\n}\n"
}
};
})();
(node as any).hash = "235754d40be56785bd0e7a36ac8c4ec2";
export default node;

View File

@@ -1,11 +1,10 @@
import { Badge, Button, Card, Dialog, DialogContent, DialogFooter, Field, Input, Spinner, Table, Tbody, Td, Th, Thead, Tr, useDialogRef, useToast, IconCheckmark1, IconCrossLargeX, IconTrashCan } from "@probo/ui";
import { Button, Card, Dialog, DialogContent, DialogFooter, Field, Input, Spinner, Table, Tbody, Td, Th, Thead, Tr, useDialogRef, useToast, IconTrashCan } from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import { useOutletContext } from "react-router";
import { useState, useCallback } from "react";
import {
useTrustCenterAccesses,
createTrustCenterAccessMutation,
updateTrustCenterAccessMutation,
deleteTrustCenterAccessMutation
} from "/hooks/graph/TrustCenterAccessGraph";
import { useMutation } from "react-relay";
@@ -25,7 +24,6 @@ export default function TrustCenterAccessTab() {
const { organization } = useOutletContext<ContextType>();
const [createInvitation, isCreating] = useMutation(createTrustCenterAccessMutation);
const [updateInvitation, isUpdating] = useMutation(updateTrustCenterAccessMutation);
const [deleteInvitation, isDeleting] = useMutation(deleteTrustCenterAccessMutation);
const dialogRef = useDialogRef();
@@ -36,40 +34,17 @@ export default function TrustCenterAccessTab() {
id: string;
email: string;
name: string;
active: boolean;
createdAt: Date;
};
};
const trustCenterData = useTrustCenterAccesses(organization.trustCenter?.id || "");
if (!organization.trustCenter?.id) {
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h3 className="text-base font-medium">{__("External Access")}</h3>
<p className="text-sm text-txt-tertiary">
{__("Manage who can access your trust center with time-limited tokens")}
</p>
</div>
</div>
<Card padded>
<div className="text-center text-txt-tertiary py-8">
<Spinner />
</div>
</Card>
</div>
);
}
const accesses: AccessType[] = trustCenterData?.node?.accesses?.edges ?
trustCenterData.node.accesses.edges.map(edge => ({
id: edge.node.id,
email: edge.node.email,
name: edge.node.name,
active: edge.node.active,
createdAt: new Date(edge.node.createdAt)
})) : [];
const accesses: AccessType[] = trustCenterData?.node?.accesses?.edges?.map(edge => ({
id: edge.node.id,
email: edge.node.email,
name: edge.node.name,
createdAt: new Date(edge.node.createdAt)
})) ?? [];
const handleInvite = useCallback(async () => {
if (!organization.trustCenter?.id) {
@@ -99,7 +74,6 @@ export default function TrustCenterAccessTab() {
trustCenterId: organization.trustCenter.id,
email: email.trim(),
name: name.trim(),
sendEmail: true,
},
connections: connectionId ? [connectionId] : [],
},
@@ -142,84 +116,6 @@ export default function TrustCenterAccessTab() {
}
}, [organization.trustCenter?.id, email, name, trustCenterData, createInvitation, toast, __, dialogRef]);
const handleRevoke = useCallback(async (accessId: string) => {
updateInvitation({
variables: {
input: {
accessId,
active: false,
sendEmail: false,
},
},
onCompleted: () => {
toast({
title: __("Success"),
description: __("Access revoked successfully"),
variant: "success",
});
},
onError: (error) => {
toast({
title: __("Error"),
description: error.message,
variant: "error",
});
},
});
}, [updateInvitation, toast, __]);
const handleReinvite = useCallback(async (access: AccessType) => {
if (!organization.trustCenter?.id) {
toast({
title: __("Error"),
description: __("Trust center not found"),
variant: "error",
});
return;
}
try {
updateInvitation({
variables: {
input: {
accessId: access.id,
active: true,
sendEmail: true,
},
},
onCompleted: (_, errors) => {
if (errors && errors.length > 0) {
toast({
title: __("Error"),
description: errors[0]?.message || __("Failed to send reinvitation"),
variant: "error",
});
return;
}
toast({
title: __("Success"),
description: __("Reinvitation sent successfully"),
variant: "success",
});
},
onError: (error) => {
toast({
title: __("Error"),
description: error.message || __("Failed to send reinvitation. Please try again."),
variant: "error",
});
},
});
} catch (error) {
toast({
title: __("Error"),
description: __("An unexpected error occurred. Please try again."),
variant: "error",
});
}
}, [organization.trustCenter?.id, updateInvitation, toast, __]);
const handleDelete = useCallback(async (accessId: string) => {
const connectionId = trustCenterData?.node?.accesses?.__id;
@@ -256,13 +152,19 @@ export default function TrustCenterAccessTab() {
{__("Manage who can access your trust center with time-limited tokens")}
</p>
</div>
<Button onClick={() => dialogRef.current?.open()}>
{__("Invite")}
</Button>
{organization.trustCenter?.id && (
<Button onClick={() => dialogRef.current?.open()}>
{__("Invite")}
</Button>
)}
</div>
<Card padded>
{accesses.length === 0 ? (
{!organization.trustCenter?.id ? (
<div className="text-center text-txt-tertiary py-8">
<Spinner />
</div>
) : accesses.length === 0 ? (
<div className="text-center text-txt-tertiary py-8">
{__("No external access granted yet")}
</div>
@@ -272,7 +174,6 @@ export default function TrustCenterAccessTab() {
<Tr>
<Th>{__("Name")}</Th>
<Th>{__("Email")}</Th>
<Th>{__("Status")}</Th>
<Th>{__("Date")}</Th>
<Th></Th>
</Tr>
@@ -282,22 +183,11 @@ export default function TrustCenterAccessTab() {
<Tr key={access.id}>
<Td className="font-medium">{access.name}</Td>
<Td>{access.email}</Td>
<Td>
<Badge variant={access.active ? "success" : "neutral"}>
{access.active ? __("Active") : __("Revoked")}
</Badge>
</Td>
<Td>
{access.createdAt.toLocaleDateString()}
</Td>
<Td noLink width={120} className="text-end">
<div className="flex gap-2 justify-end">
<Button
variant="secondary"
onClick={() => access.active ? handleRevoke(access.id) : handleReinvite(access)}
disabled={isUpdating}
icon={access.active ? IconCrossLargeX : IconCheckmark1}
/>
<Button
variant="secondary"
onClick={() => handleDelete(access.id)}