Refactor compliange page access code

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
Bryan Frimin
2026-02-20 12:24:28 +01:00
parent 069b47d240
commit 79084bca23
7 changed files with 318 additions and 131 deletions

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<88767d7e81f9900c5bd01a14ffb14bfa>>
* @generated SignedSource<<6356fdb9136b757a766816656cdf9eea>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -12,10 +12,10 @@ import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type DocumentType = "ISMS" | "OTHER" | "POLICY" | "PROCEDURE";
export type TrustCenterDocumentAccessStatus = "GRANTED" | "REJECTED" | "REQUESTED" | "REVOKED";
export type TrustCenterAccessGraphLoadDocumentAccessesQuery$variables = {
export type CompliancePageAccessEditDialogQuery$variables = {
accessId: string;
};
export type TrustCenterAccessGraphLoadDocumentAccessesQuery$data = {
export type CompliancePageAccessEditDialogQuery$data = {
readonly node: {
readonly availableDocumentAccesses?: {
readonly edges: ReadonlyArray<{
@@ -51,9 +51,9 @@ export type TrustCenterAccessGraphLoadDocumentAccessesQuery$data = {
} | null | undefined;
};
};
export type TrustCenterAccessGraphLoadDocumentAccessesQuery = {
response: TrustCenterAccessGraphLoadDocumentAccessesQuery$data;
variables: TrustCenterAccessGraphLoadDocumentAccessesQuery$variables;
export type CompliancePageAccessEditDialogQuery = {
response: CompliancePageAccessEditDialogQuery$data;
variables: CompliancePageAccessEditDialogQuery$variables;
};
const node: ConcreteRequest = (function(){
@@ -165,7 +165,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "TrustCenterAccessGraphLoadDocumentAccessesQuery",
"name": "CompliancePageAccessEditDialogQuery",
"selections": [
{
"alias": null,
@@ -284,7 +284,7 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "TrustCenterAccessGraphLoadDocumentAccessesQuery",
"name": "CompliancePageAccessEditDialogQuery",
"selections": [
{
"alias": null,
@@ -450,16 +450,16 @@ return {
]
},
"params": {
"cacheID": "175c4de41f02ea26f9a4ebc2124d6a51",
"cacheID": "2c1a84490b7c138adbd06cd36a247f8b",
"id": null,
"metadata": {},
"name": "TrustCenterAccessGraphLoadDocumentAccessesQuery",
"name": "CompliancePageAccessEditDialogQuery",
"operationKind": "query",
"text": "query TrustCenterAccessGraphLoadDocumentAccessesQuery(\n $accessId: ID!\n) {\n node(id: $accessId) {\n __typename\n ... on TrustCenterAccess {\n id\n ndaSignature {\n ...ElectronicSignatureSectionFragment\n id\n }\n availableDocumentAccesses(first: 100, orderBy: {field: CREATED_AT, direction: DESC}) {\n edges {\n node {\n id\n status\n document {\n id\n title\n documentType\n }\n report {\n id\n filename\n audit {\n id\n framework {\n name\n id\n }\n }\n }\n trustCenterFile {\n id\n name\n category\n }\n }\n }\n }\n }\n id\n }\n}\n\nfragment ElectronicSignatureSectionFragment on ElectronicSignature {\n status\n signedAt\n certificateFileUrl\n events {\n id\n eventType\n actorEmail\n occurredAt\n }\n}\n"
"text": "query CompliancePageAccessEditDialogQuery(\n $accessId: ID!\n) {\n node(id: $accessId) {\n __typename\n ... on TrustCenterAccess {\n id\n ndaSignature {\n ...ElectronicSignatureSectionFragment\n id\n }\n availableDocumentAccesses(first: 100, orderBy: {field: CREATED_AT, direction: DESC}) {\n edges {\n node {\n id\n status\n document {\n id\n title\n documentType\n }\n report {\n id\n filename\n audit {\n id\n framework {\n name\n id\n }\n }\n }\n trustCenterFile {\n id\n name\n category\n }\n }\n }\n }\n }\n id\n }\n}\n\nfragment ElectronicSignatureSectionFragment on ElectronicSignature {\n status\n signedAt\n certificateFileUrl\n events {\n id\n eventType\n actorEmail\n occurredAt\n }\n}\n"
}
};
})();
(node as any).hash = "d104626a4915648265550778f1ce6606";
(node as any).hash = "22c0951e589902a84654ef96af8887a7";
export default node;

View File

@@ -0,0 +1,180 @@
/**
* @generated SignedSource<<7c575bd72e0d697cf92b9dd57038995c>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type TrustCenterAccessState = "ACTIVE" | "INACTIVE";
export type TrustCenterDocumentAccessStatus = "GRANTED" | "REJECTED" | "REQUESTED" | "REVOKED";
export type UpdateTrustCenterAccessInput = {
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 = {
id: string;
status: TrustCenterDocumentAccessStatus;
};
export type CompliancePageAccessEditDialogUpdateMutation$variables = {
input: UpdateTrustCenterAccessInput;
};
export type CompliancePageAccessEditDialogUpdateMutation$data = {
readonly updateTrustCenterAccess: {
readonly trustCenterAccess: {
readonly activeCount: number;
readonly createdAt: string;
readonly email: string;
readonly hasAcceptedNonDisclosureAgreement: boolean;
readonly id: string;
readonly name: string;
readonly pendingRequestCount: number;
readonly state: TrustCenterAccessState;
readonly updatedAt: string;
};
};
};
export type CompliancePageAccessEditDialogUpdateMutation = {
response: CompliancePageAccessEditDialogUpdateMutation$data;
variables: CompliancePageAccessEditDialogUpdateMutation$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": "state",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasAcceptedNonDisclosureAgreement",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "pendingRequestCount",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "activeCount",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "CompliancePageAccessEditDialogUpdateMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "CompliancePageAccessEditDialogUpdateMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "e8401f17211bce414eee9048b939235a",
"id": null,
"metadata": {},
"name": "CompliancePageAccessEditDialogUpdateMutation",
"operationKind": "mutation",
"text": "mutation CompliancePageAccessEditDialogUpdateMutation(\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 = "e511d9060cc29db26cd6ff281fe2722b";
export default node;

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<8060916e92063b503b064a3ce7675e1a>>
* @generated SignedSource<<ca74f6c0f80146a4ed4e90bcee385300>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -23,10 +23,10 @@ export type TrustCenterDocumentAccessInput = {
id: string;
status: TrustCenterDocumentAccessStatus;
};
export type TrustCenterAccessGraphUpdateMutation$variables = {
export type CompliancePageAccessListItemUpdateMutation$variables = {
input: UpdateTrustCenterAccessInput;
};
export type TrustCenterAccessGraphUpdateMutation$data = {
export type CompliancePageAccessListItemUpdateMutation$data = {
readonly updateTrustCenterAccess: {
readonly trustCenterAccess: {
readonly activeCount: number;
@@ -41,9 +41,9 @@ export type TrustCenterAccessGraphUpdateMutation$data = {
};
};
};
export type TrustCenterAccessGraphUpdateMutation = {
response: TrustCenterAccessGraphUpdateMutation$data;
variables: TrustCenterAccessGraphUpdateMutation$variables;
export type CompliancePageAccessListItemUpdateMutation = {
response: CompliancePageAccessListItemUpdateMutation$data;
variables: CompliancePageAccessListItemUpdateMutation$variables;
};
const node: ConcreteRequest = (function(){
@@ -152,7 +152,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "TrustCenterAccessGraphUpdateMutation",
"name": "CompliancePageAccessListItemUpdateMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
@@ -161,20 +161,20 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "TrustCenterAccessGraphUpdateMutation",
"name": "CompliancePageAccessListItemUpdateMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "bfc1209ce4d692ddb3692305aff7a33d",
"cacheID": "a943d051a8be76541af43131995defbe",
"id": null,
"metadata": {},
"name": "TrustCenterAccessGraphUpdateMutation",
"name": "CompliancePageAccessListItemUpdateMutation",
"operationKind": "mutation",
"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"
"text": "mutation CompliancePageAccessListItemUpdateMutation(\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 = "750e100701bf905c8fff08f3f5155b5b";
(node as any).hash = "82b5fb2e5d6ff48f7cf660007b4366ed";
export default node;

View File

@@ -1,65 +0,0 @@
import { graphql } from "react-relay";
export const updateTrustCenterAccessMutation = graphql`
mutation TrustCenterAccessGraphUpdateMutation(
$input: UpdateTrustCenterAccessInput!
) {
updateTrustCenterAccess(input: $input) {
trustCenterAccess {
id
email
name
state
hasAcceptedNonDisclosureAgreement
createdAt
updatedAt
pendingRequestCount
activeCount
}
}
}
`;
export const loadTrustCenterAccessDocumentAccessesQuery = graphql`
query TrustCenterAccessGraphLoadDocumentAccessesQuery($accessId: ID!) {
node(id: $accessId) {
... on TrustCenterAccess {
id
ndaSignature {
...ElectronicSignatureSectionFragment
}
availableDocumentAccesses(
first: 100
orderBy: { field: CREATED_AT, direction: DESC }
) {
edges {
node {
id
status
document {
id
title
documentType
}
report {
id
filename
audit {
id
framework {
name
}
}
}
trustCenterFile {
id
name
category
}
}
}
}
}
}
}
`;

View File

@@ -18,39 +18,96 @@ import {
usePreloadedQuery,
useQueryLoader,
} from "react-relay";
import { graphql } from "relay-runtime";
import { z } from "zod";
import type { CompliancePageAccessEditDialogQuery as CompliancePageAccessEditDialogQueryType } from "#/__generated__/core/CompliancePageAccessEditDialogQuery.graphql";
import type { CompliancePageAccessEditDialogUpdateMutation } from "#/__generated__/core/CompliancePageAccessEditDialogUpdateMutation.graphql";
import type { CompliancePageAccessListItemFragment$data } from "#/__generated__/core/CompliancePageAccessListItemFragment.graphql";
import type { TrustCenterAccessGraphLoadDocumentAccessesQuery } from "#/__generated__/core/TrustCenterAccessGraphLoadDocumentAccessesQuery.graphql";
import {
loadTrustCenterAccessDocumentAccessesQuery,
updateTrustCenterAccessMutation,
} from "#/hooks/graph/TrustCenterAccessGraph";
import { useFormWithSchema } from "#/hooks/useFormWithSchema";
import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import { CompliancePageDocumentAccessList } from "#/pages/organizations/compliance-page/access/_components/CompliancePageDocumentAccessList";
import { ElectronicSignatureSection } from "#/pages/organizations/compliance-page/access/_components/ElectronicSignatureSection";
import { TrustCenterDocumentAccessList } from "./TrustCenterDocumentAccessList";
interface TrustCenterAccessEditDialogProps {
const compliancePageAccessEditDialogQuery = graphql`
query CompliancePageAccessEditDialogQuery($accessId: ID!) {
node(id: $accessId) {
... on TrustCenterAccess {
id
ndaSignature {
...ElectronicSignatureSectionFragment
}
availableDocumentAccesses(
first: 100
orderBy: { field: CREATED_AT, direction: DESC }
) {
edges {
node {
id
status
document {
id
title
documentType
}
report {
id
filename
audit {
id
framework {
name
}
}
}
trustCenterFile {
id
name
category
}
}
}
}
}
}
}
`;
const updateAccessMutation = graphql`
mutation CompliancePageAccessEditDialogUpdateMutation(
$input: UpdateTrustCenterAccessInput!
) {
updateTrustCenterAccess(input: $input) {
trustCenterAccess {
id
email
name
state
hasAcceptedNonDisclosureAgreement
createdAt
updatedAt
pendingRequestCount
activeCount
}
}
}
`;
export function CompliancePageAccessEditDialog(props: {
access: CompliancePageAccessListItemFragment$data;
onClose: () => void;
}
export function TrustCenterAccessEditDialog(
props: TrustCenterAccessEditDialogProps,
) {
}) {
const { access, onClose } = props;
const { __ } = useTranslate();
const [queryRef, loadDocumentAccessesQuery]
= useQueryLoader<TrustCenterAccessGraphLoadDocumentAccessesQuery>(
loadTrustCenterAccessDocumentAccessesQuery,
const [queryRef, loadQuery]
= useQueryLoader<CompliancePageAccessEditDialogQueryType>(
compliancePageAccessEditDialogQuery,
);
useEffect(() => {
loadDocumentAccessesQuery(
loadQuery(
{
accessId: access.id,
},
@@ -58,13 +115,13 @@ export function TrustCenterAccessEditDialog(
fetchPolicy: "network-only",
},
);
}, [access.id, loadDocumentAccessesQuery]);
}, [access.id, loadQuery]);
return (
<Dialog defaultOpen={true} title={__("Edit Access")} onClose={onClose}>
{queryRef && (
<Suspense>
<TrustCenterAccessEditForm
<CompliancePageAccessEditForm
access={access}
queryRef={queryRef}
onSubmit={onClose}
@@ -75,21 +132,17 @@ export function TrustCenterAccessEditDialog(
);
}
interface TrustCenterAccessEditFormProps {
function CompliancePageAccessEditForm(props: {
access: CompliancePageAccessListItemFragment$data;
onSubmit: () => void;
queryRef: PreloadedQuery<TrustCenterAccessGraphLoadDocumentAccessesQuery>;
}
export function TrustCenterAccessEditForm(
props: TrustCenterAccessEditFormProps,
) {
queryRef: PreloadedQuery<CompliancePageAccessEditDialogQueryType>;
}) {
const { access, onSubmit, queryRef } = props;
const { __ } = useTranslate();
const data
= usePreloadedQuery<TrustCenterAccessGraphLoadDocumentAccessesQuery>(
loadTrustCenterAccessDocumentAccessesQuery,
= usePreloadedQuery<CompliancePageAccessEditDialogQueryType>(
compliancePageAccessEditDialogQuery,
queryRef,
);
@@ -154,8 +207,8 @@ export function TrustCenterAccessEditForm(
defaultValues: { name: access.name, active: access.state === "ACTIVE" },
});
const [updateTrustCenterAccess, isUpdating] = useMutationWithToasts(
updateTrustCenterAccessMutation,
const [updateTrustCenterAccess, isUpdating] = useMutationWithToasts<CompliancePageAccessEditDialogUpdateMutation>(
updateAccessMutation,
{
successMessage: __("Access updated successfully"),
errorMessage: __("Failed to update access"),
@@ -228,7 +281,7 @@ export function TrustCenterAccessEditForm(
<ElectronicSignatureSection fragmentRef={data.node.ndaSignature} />
)}
<TrustCenterDocumentAccessList
<CompliancePageDocumentAccessList
documentAccesses={documentAccesses}
initialStatusByID={initialStatusByID}
onGrantAll={handleGrantAllDocumentAccess}

View File

@@ -6,11 +6,10 @@ import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
import type { CompliancePageAccessListItemFragment$key } from "#/__generated__/core/CompliancePageAccessListItemFragment.graphql";
import type { TrustCenterAccessGraphUpdateMutation } from "#/__generated__/core/TrustCenterAccessGraphUpdateMutation.graphql";
import { updateTrustCenterAccessMutation } from "#/hooks/graph/TrustCenterAccessGraph";
import type { CompliancePageAccessListItemUpdateMutation } from "#/__generated__/core/CompliancePageAccessListItemUpdateMutation.graphql";
import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import { TrustCenterAccessEditDialog } from "#/pages/organizations/trustCenter/TrustCenterAccessTab/TrustCenterAccessEditDialog";
import { CompliancePageAccessEditDialog } from "./CompliancePageAccessEditDialog";
import { NdaSignatureBadge } from "./NdaSignatureBadge";
const fragment = graphql`
@@ -29,6 +28,26 @@ const fragment = graphql`
}
`;
const toggleAccessStateMutation = graphql`
mutation CompliancePageAccessListItemUpdateMutation(
$input: UpdateTrustCenterAccessInput!
) {
updateTrustCenterAccess(input: $input) {
trustCenterAccess {
id
email
name
state
hasAcceptedNonDisclosureAgreement
createdAt
updatedAt
pendingRequestCount
activeCount
}
}
}
`;
export function CompliancePageAccessListItem(props: {
fragmentRef: CompliancePageAccessListItemFragment$key;
dialogOpen: boolean;
@@ -42,8 +61,8 @@ export function CompliancePageAccessListItem(props: {
const isActive = access.state === "ACTIVE";
const [updateAccess, isUpdating] = useMutationWithToasts<TrustCenterAccessGraphUpdateMutation>(
updateTrustCenterAccessMutation,
const [toggleAccessState, isToggling] = useMutationWithToasts<CompliancePageAccessListItemUpdateMutation>(
toggleAccessStateMutation,
{
successMessage: isActive
? __("Access deactivated successfully")
@@ -55,7 +74,7 @@ export function CompliancePageAccessListItem(props: {
);
const handleToggleState = useCallback(() => {
void updateAccess({
void toggleAccessState({
variables: {
input: {
id: access.id,
@@ -64,7 +83,7 @@ export function CompliancePageAccessListItem(props: {
},
},
});
}, [updateAccess, access.id, access.name, isActive]);
}, [toggleAccessState, access.id, access.name, isActive]);
return (
<>
@@ -109,7 +128,7 @@ export function CompliancePageAccessListItem(props: {
<DropdownItem
icon={isActive ? IconArchive : IconRotateCw}
onClick={handleToggleState}
disabled={isUpdating}
disabled={isToggling}
variant={isActive ? "danger" : "primary"}
>
{isActive ? __("Deactivate") : __("Activate")}
@@ -121,7 +140,7 @@ export function CompliancePageAccessListItem(props: {
</Tr>
{access.canUpdate && isActive && dialogOpen && (
<TrustCenterAccessEditDialog
<CompliancePageAccessEditDialog
access={access}
onClose={() => setDialogOpen(false)}
/>

View File

@@ -3,7 +3,7 @@ import { getTrustCenterDocumentAccessStatusBadgeVariant, getTrustCenterDocumentA
import { useTranslate } from "@probo/i18n";
import { Badge, Button, Table, Tbody, Td, Th, Thead, Tr } from "@probo/ui";
interface TrustCenterDocumentAccessListProps {
interface CompliancePageDocumentAccessListProps {
documentAccesses: TrustCenterDocumentAccessInfo[];
initialStatusByID: Record<string, TrustCenterDocumentAccessStatus>;
onGrantAll: () => void;
@@ -11,7 +11,7 @@ interface TrustCenterDocumentAccessListProps {
onUpdateStatus: (docAccess: TrustCenterDocumentAccessInfo, status: TrustCenterDocumentAccessStatus) => void;
}
export function TrustCenterDocumentAccessList(props: TrustCenterDocumentAccessListProps) {
export function CompliancePageDocumentAccessList(props: CompliancePageDocumentAccessListProps) {
const { documentAccesses, initialStatusByID, onGrantAll, onRejectOrRevokeAll, onUpdateStatus } = props;
const { __ } = useTranslate();