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

Simplify UX of compliance access management

Browse Source 
Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
Bryan Frimin
2026-02-10 11:32:20 +01:00
parent 09b6934c04
commit 5f7d4689aa
23 changed files with 323 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/console/src/__generated__/core/CompliancePageAccessListItemFragment.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<c3f94c9533e0031a201dd75921757748>>
* @generated SignedSource<<e5a5b11ba24baf03ee3f94fa65cf3591>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,9 +9,9 @@
// @ts-nocheck
import { ReaderFragment } from 'relay-runtime';
export type TrustCenterAccessState = "ACTIVE" | "INACTIVE";
import { FragmentRefs } from "relay-runtime";
export type CompliancePageAccessListItemFragment$data = {
readonly active: boolean;
readonly activeCount: number;
readonly canDelete: boolean;
readonly canUpdate: boolean;
@@ -21,6 +21,7 @@ export type CompliancePageAccessListItemFragment$data = {
readonly id: string;
readonly name: string;
readonly pendingRequestCount: number;
readonly state: TrustCenterAccessState;
readonly " $fragmentType": "CompliancePageAccessListItemFragment";
};
export type CompliancePageAccessListItemFragment$key = {
@@ -66,7 +67,7 @@ const node: ReaderFragment = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "active",
"name": "state",
"storageKey": null
},
{
@@ -121,6 +122,6 @@ const node: ReaderFragment = {
"abstractKey": null
};
(node as any).hash = "e7120d76d08974b672e2ed1e66bf6cd7";
(node as any).hash = "4e78486a2c8edc2b5f73fb64dbeb4006";
export default node;

8
apps/console/src/__generated__/core/CompliancePageAccessListQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<3c657b1368adbcba6300b5b94eff92f2>>
* @generated SignedSource<<19cd995fe2d7406ddfadd5df6f2b2412>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -256,7 +256,7 @@ return {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "active",
"name": "state",
"storageKey": null
},
{
@@ -349,12 +349,12 @@ return {
]
},
"params": {
"cacheID": "75c843f8501c2e5bd2c1422f7cf35b5f",
"cacheID": "27720ebe7c7eee3a27c486be063d9f18",
"id": null,
"metadata": {},
"name": "CompliancePageAccessListQuery",
"operationKind": "query",
"text": "query CompliancePageAccessListQuery(\n $after: CursorKey = null\n $first: Int = 10\n $order: TrustCenterAccessOrder = {field: CREATED_AT, direction: DESC}\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...CompliancePageAccessListFragment_gOVF5\n id\n }\n}\n\nfragment CompliancePageAccessListFragment_gOVF5 on TrustCenter {\n accesses(first: $first, after: $after, orderBy: $order) {\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n edges {\n cursor\n node {\n id\n ...CompliancePageAccessListItemFragment\n __typename\n }\n }\n }\n id\n}\n\nfragment CompliancePageAccessListItemFragment on TrustCenterAccess {\n id\n name\n email\n createdAt\n active\n activeCount\n pendingRequestCount\n hasAcceptedNonDisclosureAgreement\n canUpdate: permission(action: \"core:trust-center-access:update\")\n canDelete: permission(action: \"core:trust-center-access:delete\")\n}\n"
"text": "query CompliancePageAccessListQuery(\n $after: CursorKey = null\n $first: Int = 10\n $order: TrustCenterAccessOrder = {field: CREATED_AT, direction: DESC}\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...CompliancePageAccessListFragment_gOVF5\n id\n }\n}\n\nfragment CompliancePageAccessListFragment_gOVF5 on TrustCenter {\n accesses(first: $first, after: $after, orderBy: $order) {\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n edges {\n cursor\n node {\n id\n ...CompliancePageAccessListItemFragment\n __typename\n }\n }\n }\n id\n}\n\nfragment CompliancePageAccessListItemFragment on TrustCenterAccess {\n id\n name\n email\n createdAt\n state\n activeCount\n pendingRequestCount\n hasAcceptedNonDisclosureAgreement\n canUpdate: permission(action: \"core:trust-center-access:update\")\n canDelete: permission(action: \"core:trust-center-access:delete\")\n}\n"
}
};
})();

8
apps/console/src/__generated__/core/CompliancePageAccessPageQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<e5353f41022bedfa45f3607edac692d7>>
* @generated SignedSource<<2ba5d01d3d1dbb4956627eae14df34ab>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -265,7 +265,7 @@ return {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "active",
"name": "state",
"storageKey": null
},
{
@@ -362,12 +362,12 @@ return {
]
},
"params": {
"cacheID": "651e7d8df512ab49f09e5b086a488266",
"cacheID": "6e4d46f7b3fdff2e4650ea27d96b8c5b",
"id": null,
"metadata": {},
"name": "CompliancePageAccessPageQuery",
"operationKind": "query",
"text": "query CompliancePageAccessPageQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n compliancePage: trustCenter {\n id\n canCreateAccess: permission(action: \"core:trust-center-access:create\")\n ...CompliancePageAccessListFragment\n }\n }\n id\n }\n}\n\nfragment CompliancePageAccessListFragment on TrustCenter {\n accesses(first: 10, 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 ...CompliancePageAccessListItemFragment\n __typename\n }\n }\n }\n id\n}\n\nfragment CompliancePageAccessListItemFragment on TrustCenterAccess {\n id\n name\n email\n createdAt\n active\n activeCount\n pendingRequestCount\n hasAcceptedNonDisclosureAgreement\n canUpdate: permission(action: \"core:trust-center-access:update\")\n canDelete: permission(action: \"core:trust-center-access:delete\")\n}\n"
"text": "query CompliancePageAccessPageQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n compliancePage: trustCenter {\n id\n canCreateAccess: permission(action: \"core:trust-center-access:create\")\n ...CompliancePageAccessListFragment\n }\n }\n id\n }\n}\n\nfragment CompliancePageAccessListFragment on TrustCenter {\n accesses(first: 10, 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 ...CompliancePageAccessListItemFragment\n __typename\n }\n }\n }\n id\n}\n\nfragment CompliancePageAccessListItemFragment on TrustCenterAccess {\n id\n name\n email\n createdAt\n state\n activeCount\n pendingRequestCount\n hasAcceptedNonDisclosureAgreement\n canUpdate: permission(action: \"core:trust-center-access:update\")\n canDelete: permission(action: \"core:trust-center-access:delete\")\n}\n"
}
};
})();

9
apps/console/src/__generated__/core/NewCompliancePageAccessDialogMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<953f0fbe58d5428b76797adcd479aa06>>
* @generated SignedSource<<8d43c1f38ab045ccce31f220486fcb88>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -11,7 +11,6 @@
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type CreateTrustCenterAccessInput = {
active: boolean;
email: string;
name: string;
trustCenterId: string;
@@ -182,7 +181,7 @@ return {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "active",
"name": "state",
"storageKey": null
},
{
@@ -260,12 +259,12 @@ return {
]
},
"params": {
"cacheID": "35604e9722512d1d60d70b6bce7d866b",
"cacheID": "ed150f3e2ca1f480ae7d18be081dfec1",
"id": null,
"metadata": {},
"name": "NewCompliancePageAccessDialogMutation",
"operationKind": "mutation",
"text": "mutation NewCompliancePageAccessDialogMutation(\n $input: CreateTrustCenterAccessInput!\n) {\n createTrustCenterAccess(input: $input) {\n trustCenterAccessEdge {\n cursor\n node {\n id\n ...CompliancePageAccessListItemFragment\n }\n }\n }\n}\n\nfragment CompliancePageAccessListItemFragment on TrustCenterAccess {\n id\n name\n email\n createdAt\n active\n activeCount\n pendingRequestCount\n hasAcceptedNonDisclosureAgreement\n canUpdate: permission(action: \"core:trust-center-access:update\")\n canDelete: permission(action: \"core:trust-center-access:delete\")\n}\n"
"text": "mutation NewCompliancePageAccessDialogMutation(\n $input: CreateTrustCenterAccessInput!\n) {\n createTrustCenterAccess(input: $input) {\n trustCenterAccessEdge {\n cursor\n node {\n id\n ...CompliancePageAccessListItemFragment\n }\n }\n }\n}\n\nfragment CompliancePageAccessListItemFragment on TrustCenterAccess {\n id\n name\n email\n createdAt\n state\n activeCount\n pendingRequestCount\n hasAcceptedNonDisclosureAgreement\n canUpdate: permission(action: \"core:trust-center-access:update\")\n canDelete: permission(action: \"core:trust-center-access:delete\")\n}\n"
}
};
})();

15
apps/console/src/__generated__/core/TrustCenterAccessGraphUpdateMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<d0efc00be7fc303cb2c45ae11fe587c7>>
* @generated SignedSource<<8060916e92063b503b064a3ce7675e1a>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,13 +9,14 @@
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type TrustCenterAccessState = "ACTIVE" | "INACTIVE";
export type TrustCenterDocumentAccessStatus = "GRANTED" | "REJECTED" | "REQUESTED" | "REVOKED";
export type UpdateTrustCenterAccessInput = {
active?: boolean | null | undefined;
documents?: ReadonlyArray<TrustCenterDocumentAccessInput> | null | undefined;
id: string;
name?: string | null | undefined;
reports?: ReadonlyArray<TrustCenterDocumentAccessInput> | null | undefined;
state?: TrustCenterAccessState | null | undefined;
trustCenterFiles?: ReadonlyArray<TrustCenterDocumentAccessInput> | null | undefined;
};
export type TrustCenterDocumentAccessInput = {
@@ -28,7 +29,6 @@ export type TrustCenterAccessGraphUpdateMutation$variables = {
export type TrustCenterAccessGraphUpdateMutation$data = {
readonly updateTrustCenterAccess: {
readonly trustCenterAccess: {
readonly active: boolean;
readonly activeCount: number;
readonly createdAt: string;
readonly email: string;
@@ -36,6 +36,7 @@ export type TrustCenterAccessGraphUpdateMutation$data = {
readonly id: string;
readonly name: string;
readonly pendingRequestCount: number;
readonly state: TrustCenterAccessState;
readonly updatedAt: string;
};
};
@@ -101,7 +102,7 @@ v1 = [
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "active",
"name": "state",
"storageKey": null
},
{
@@ -164,16 +165,16 @@ return {
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "1367c160aa881878e5eed860509e7610",
"cacheID": "bfc1209ce4d692ddb3692305aff7a33d",
"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 hasAcceptedNonDisclosureAgreement\n createdAt\n updatedAt\n pendingRequestCount\n activeCount\n }\n }\n}\n"
"text": "mutation TrustCenterAccessGraphUpdateMutation(\n $input: UpdateTrustCenterAccessInput!\n) {\n updateTrustCenterAccess(input: $input) {\n trustCenterAccess {\n id\n email\n name\n state\n hasAcceptedNonDisclosureAgreement\n createdAt\n updatedAt\n pendingRequestCount\n activeCount\n }\n }\n}\n"
}
};
})();
(node as any).hash = "7e5d2ce261f3e877ef54e5acfbd00bde";
(node as any).hash = "750e100701bf905c8fff08f3f5155b5b";
export default node;

2
apps/console/src/hooks/graph/TrustCenterAccessGraph.ts
View File

@@ -9,7 +9,7 @@ export const updateTrustCenterAccessMutation = graphql`
id
email
name
active
state
hasAcceptedNonDisclosureAgreement
createdAt
updatedAt

2
apps/console/src/pages/organizations/compliance-page/access/_components/CompliancePageAccessList.tsx
View File

@@ -77,7 +77,6 @@ export function CompliancePageAccessList(props: {
<Th>{__("Name")}</Th>
<Th>{__("Email")}</Th>
<Th>{__("Date")}</Th>
<Th className="text-center">{__("Active")}</Th>
<Th className="text-center">{__("Access")}</Th>
<Th className="text-center">{__("Requests")}</Th>
<Th className="text-center">{__("NDA")}</Th>
@@ -89,7 +88,6 @@ export function CompliancePageAccessList(props: {
<CompliancePageAccessListItem
key={`${access.id}-${editingAccessId === access.id}`}
fragmentRef={access}
connectionId={accesses.__id}
dialogOpen={editingAccessId === access.id}
/>
))}

106
apps/console/src/pages/organizations/compliance-page/access/_components/CompliancePageAccessListItem.tsx
View File

@@ -1,12 +1,13 @@
import { formatDate } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Button, IconCheckmark1, IconCrossLargeX, IconPencil, IconTrashCan, Td, Tr } from "@probo/ui";
import { ActionDropdown, DropdownItem, IconArchive, IconCheckmark1, IconPencil, IconRotateCw, Td, Tr } from "@probo/ui";
import { useCallback, useState } from "react";
import { useFragment } from "react-relay";
import { type DataID, graphql } from "relay-runtime";
import { graphql } from "relay-runtime";
import type { CompliancePageAccessListItem_deleteMutation } from "#/__generated__/core/CompliancePageAccessListItem_deleteMutation.graphql";
import type { CompliancePageAccessListItemFragment$key } from "#/__generated__/core/CompliancePageAccessListItemFragment.graphql";
import type { TrustCenterAccessGraphUpdateMutation } from "#/__generated__/core/TrustCenterAccessGraphUpdateMutation.graphql";
import { updateTrustCenterAccessMutation } from "#/hooks/graph/TrustCenterAccessGraph";
import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import { TrustCenterAccessEditDialog } from "#/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessEditDialog";
@@ -16,79 +17,61 @@ const fragment = graphql`
name
email
createdAt
active
state
activeCount
pendingRequestCount
hasAcceptedNonDisclosureAgreement
canUpdate: permission(action: "core:trust-center-access:update")
canDelete: permission(action: "core:trust-center-access:delete")
}
`;
const deleteCompliancePageAccessMutation = graphql`
mutation CompliancePageAccessListItem_deleteMutation(
$input: DeleteTrustCenterAccessInput!
$connections: [ID!]!
) {
deleteTrustCenterAccess(input: $input) {
deletedTrustCenterAccessId @deleteEdge(connections: $connections)
}
}
`;
export function CompliancePageAccessListItem(props: {
connectionId: DataID;
fragmentRef: CompliancePageAccessListItemFragment$key;
dialogOpen: boolean;
}) {
const { connectionId, fragmentRef, dialogOpen: initialDialogOpen } = props;
const { fragmentRef, dialogOpen: initialDialogOpen } = props;
const { __ } = useTranslate();
const [dialogOpen, setDialogOpen] = useState<boolean>(initialDialogOpen);
const access = useFragment<CompliancePageAccessListItemFragment$key>(fragment, fragmentRef);
const [deleteInvitation, isDeleting] = useMutationWithToasts<CompliancePageAccessListItem_deleteMutation>(
deleteCompliancePageAccessMutation,
const isActive = access.state === "ACTIVE";
const [updateAccess, isUpdating] = useMutationWithToasts<TrustCenterAccessGraphUpdateMutation>(
updateTrustCenterAccessMutation,
{
successMessage: __("Access deleted successfully"),
errorMessage: __("Failed to delete access"),
successMessage: isActive
? __("Access deactivated successfully")
: __("Access activated successfully"),
errorMessage: isActive
? __("Failed to deactivate access")
: __("Failed to activate access"),
},
);
const handleDelete = useCallback(
async (id: string) => {
await deleteInvitation({
variables: {
input: { id },
connections: [connectionId],
const handleToggleState = useCallback(() => {
updateAccess({
variables: {
input: {
id: access.id,
name: access.name,
state: isActive ? "INACTIVE" : "ACTIVE",
},
});
},
[deleteInvitation, connectionId],
);
},
});
}, [updateAccess, access.id, access.name, isActive]);
return (
<>
<Tr
key={access.id}
onClick={() => access.canUpdate && setDialogOpen(true)}
className="cursor-pointer hover:bg-bg-secondary transition-colors"
onClick={() => access.canUpdate && isActive && setDialogOpen(true)}
className={`cursor-pointer hover:bg-bg-secondary transition-colors${!isActive ? " opacity-50" : ""}`}
>
<Td className="font-medium">{access.name}</Td>
<Td>{access.email}</Td>
<Td>{formatDate(access.createdAt)}</Td>
<Td>
<div className="flex justify-center">
{access.active
? (
<IconCheckmark1 size={16} className="text-txt-success" />
)
: (
<IconCrossLargeX size={16} className="text-txt-danger" />
)}
</div>
</Td>
<Td className="text-center">{access.activeCount}</Td>
<Td className="text-center">
{access.pendingRequestCount > 0 ? access.pendingRequestCount : ""}
@@ -106,25 +89,30 @@ export function CompliancePageAccessListItem(props: {
onClick={e => e.stopPropagation()}
>
{access.canUpdate && (
<Button
variant="secondary"
onClick={() => setDialogOpen(true)}
icon={IconPencil}
/>
)}
{access.canDelete && (
<Button
variant="danger"
onClick={() => void handleDelete(access.id)}
disabled={isDeleting}
icon={IconTrashCan}
/>
<ActionDropdown>
{isActive && (
<DropdownItem
icon={IconPencil}
onClick={() => setDialogOpen(true)}
>
{__("Edit")}
</DropdownItem>
)}
<DropdownItem
icon={isActive ? IconArchive : IconRotateCw}
onClick={handleToggleState}
disabled={isUpdating}
variant={isActive ? "danger" : "primary"}
>
{isActive ? __("Deactivate") : __("Activate")}
</DropdownItem>
</ActionDropdown>
)}
</div>
</Td>
</Tr>
{access.canUpdate && dialogOpen && (
{access.canUpdate && isActive && dialogOpen && (
<TrustCenterAccessEditDialog
access={access}
onClose={() => setDialogOpen(false)}

1
apps/console/src/pages/organizations/compliance-page/access/_components/NewCompliancePageAccessDialog.tsx
View File

@@ -64,7 +64,6 @@ export function NewCompliancePageAccessDialog(props: {
trustCenterId: compliancePageId,
email: email,
name: data.name.trim(),
active: false,
},
connections: connectionId ? [connectionId] : [],
},

19
apps/console/src/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessEditDialog.tsx
View File

@@ -6,7 +6,6 @@ import {
import { useTranslate } from "@probo/i18n";
import {
Button,
Checkbox,
Dialog,
DialogContent,
DialogFooter,
@@ -151,7 +150,7 @@ export function TrustCenterAccessEditForm(
active: z.boolean(),
});
const editForm = useFormWithSchema(editSchema, {
defaultValues: { name: access.name, active: access.active },
defaultValues: { name: access.name, active: access.state === "ACTIVE" },
});
const [updateTrustCenterAccess, isUpdating] = useMutationWithToasts(
@@ -196,7 +195,7 @@ export function TrustCenterAccessEditForm(
input: {
id: access.id,
name: data.name.trim(),
active: data.active,
state: data.active ? "ACTIVE" : "INACTIVE",
documents,
reports,
trustCenterFiles,
@@ -222,20 +221,6 @@ export function TrustCenterAccessEditForm(
placeholder={__("John Doe")}
/>
<div className="flex items-center justify-between mt-6">
<div>
<label className="font-medium text-txt-primary">
{__("Active Status")}
</label>
<p className="text-sm text-txt-secondary">
{__("Enable or disable access for this user")}
</p>
</div>
<Checkbox
checked={editForm.watch("active")}
onChange={checked => editForm.setValue("active", checked)}
/>
</div>
</div>
<TrustCenterDocumentAccessList