Change state of applicability
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
@@ -21,7 +21,9 @@ import { useNavigate, useOutletContext } from "react-router";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import { LinkedDocumentsCard } from "/components/documents/LinkedDocumentsCard";
|
||||
import { LinkedAuditsCard } from "/components/audits/LinkedAuditsCard";
|
||||
import { LinkedObligationsCard } from "/components/obligations/LinkedObligationsCard";
|
||||
import { LinkedSnapshotsCard } from "/components/snapshots/LinkedSnapshotsCard";
|
||||
import { LinkedStatesOfApplicabilityCard } from "/components/states-of-applicability/LinkedStatesOfApplicabilityCard";
|
||||
import { FrameworkControlDialog } from "./dialogs/FrameworkControlDialog";
|
||||
import { promisifyMutation } from "@probo/helpers";
|
||||
import type { FrameworkGraphControlNodeQuery } from "/hooks/graph/__generated__/FrameworkGraphControlNodeQuery.graphql";
|
||||
@@ -30,6 +32,35 @@ import type { FrameworkDetailPageFragment$data } from "./__generated__/Framework
|
||||
import { use } from "react";
|
||||
import { PermissionsContext } from "/providers/PermissionsContext";
|
||||
|
||||
const attachStateOfApplicabilityMutation = graphql`
|
||||
mutation FrameworkControlPageAttachStateOfApplicabilityMutation(
|
||||
$input: CreateStateOfApplicabilityControlMappingInput!
|
||||
$connections: [ID!]!
|
||||
) {
|
||||
createStateOfApplicabilityControlMapping(input: $input) {
|
||||
stateOfApplicabilityControlEdge @prependEdge(connections: $connections) {
|
||||
node {
|
||||
id
|
||||
...LinkedStatesOfApplicabilityCardFragment
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const detachStateOfApplicabilityMutation = graphql`
|
||||
mutation FrameworkControlPageDetachStateOfApplicabilityMutation(
|
||||
$input: DeleteStateOfApplicabilityControlMappingInput!
|
||||
$connections: [ID!]!
|
||||
) {
|
||||
deleteStateOfApplicabilityControlMapping(input: $input) {
|
||||
deletedStateOfApplicabilityId
|
||||
deletedControlId
|
||||
deletedStateOfApplicabilityControlId @deleteEdge(connections: $connections)
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const attachMeasureMutation = graphql`
|
||||
mutation FrameworkControlPageAttachMutation(
|
||||
$input: CreateControlMeasureMappingInput!
|
||||
@@ -111,6 +142,33 @@ const detachAuditMutation = graphql`
|
||||
}
|
||||
`;
|
||||
|
||||
const attachObligationMutation = graphql`
|
||||
mutation FrameworkControlPageAttachObligationMutation(
|
||||
$input: CreateControlObligationMappingInput!
|
||||
$connections: [ID!]!
|
||||
) {
|
||||
createControlObligationMapping(input: $input) {
|
||||
obligationEdge @prependEdge(connections: $connections) {
|
||||
node {
|
||||
id
|
||||
...LinkedObligationsCardFragment
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const detachObligationMutation = graphql`
|
||||
mutation FrameworkControlPageDetachObligationMutation(
|
||||
$input: DeleteControlObligationMappingInput!
|
||||
$connections: [ID!]!
|
||||
) {
|
||||
deleteControlObligationMapping(input: $input) {
|
||||
deletedObligationId @deleteEdge(connections: $connections)
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const attachSnapshotMutation = graphql`
|
||||
mutation FrameworkControlPageAttachSnapshotMutation(
|
||||
$input: CreateControlSnapshotMappingInput!
|
||||
@@ -168,16 +226,24 @@ export default function FrameworkControlPage({ queryRef }: Props) {
|
||||
const confirm = useConfirm();
|
||||
const navigate = useNavigate();
|
||||
const { isAuthorized } = use(PermissionsContext);
|
||||
const [detachStateOfApplicability, isDetachingStateOfApplicability] = useMutation(detachStateOfApplicabilityMutation);
|
||||
const [attachStateOfApplicability, isAttachingStateOfApplicability] = useMutation(attachStateOfApplicabilityMutation);
|
||||
const [detachMeasure, isDetachingMeasure] = useMutation(detachMeasureMutation);
|
||||
const [attachMeasure, isAttachingMeasure] = useMutation(attachMeasureMutation);
|
||||
const [detachDocument, isDetachingDocument] = useMutation(detachDocumentMutation);
|
||||
const [attachDocument, isAttachingDocument] = useMutation(attachDocumentMutation);
|
||||
const [detachAudit, isDetachingAudit] = useMutation(detachAuditMutation);
|
||||
const [attachAudit, isAttachingAudit] = useMutation(attachAuditMutation);
|
||||
const [detachObligation, isDetachingObligation] = useMutation(detachObligationMutation);
|
||||
const [attachObligation, isAttachingObligation] = useMutation(attachObligationMutation);
|
||||
const [detachSnapshot, isDetachingSnapshot] = useMutation(detachSnapshotMutation);
|
||||
const [attachSnapshot, isAttachingSnapshot] = useMutation(attachSnapshotMutation);
|
||||
const [deleteControl] = useMutation(deleteControlMutation);
|
||||
|
||||
const canLinkStateOfApplicability = isAuthorized("Control", "createStateOfApplicabilityControlMapping");
|
||||
const canUnlinkStateOfApplicability = isAuthorized("Control", "deleteStateOfApplicabilityControlMapping");
|
||||
const statesOfApplicabilityReadOnly = !canLinkStateOfApplicability && !canUnlinkStateOfApplicability;
|
||||
|
||||
const canLinkMeasure = isAuthorized("Control", "createControlMeasureMapping");
|
||||
const canUnlinkMeasure = isAuthorized("Control", "deleteControlMeasureMapping");
|
||||
const measuresReadOnly = !canLinkMeasure && !canUnlinkMeasure;
|
||||
@@ -190,6 +256,10 @@ export default function FrameworkControlPage({ queryRef }: Props) {
|
||||
const canUnlinkAudit = isAuthorized("Control", "deleteControlAuditMapping");
|
||||
const auditsReadOnly = !canLinkAudit && !canUnlinkAudit;
|
||||
|
||||
const canLinkObligation = isAuthorized("Control", "createControlObligationMapping");
|
||||
const canUnlinkObligation = isAuthorized("Control", "deleteControlObligationMapping");
|
||||
const obligationsReadOnly = !canLinkObligation && !canUnlinkObligation;
|
||||
|
||||
const canLinkSnapshot = isAuthorized("Control", "createControlSnapshotMapping");
|
||||
const canUnlinkSnapshot = isAuthorized("Control", "deleteControlSnapshotMapping");
|
||||
const snapshotsReadOnly = !canLinkSnapshot && !canUnlinkSnapshot;
|
||||
@@ -278,20 +348,20 @@ export default function FrameworkControlPage({ queryRef }: Props) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{control.status === "EXCLUDED" && (
|
||||
<div className="bg-danger border border-border-danger rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="font-medium text-txt-danger">
|
||||
{__("This control is excluded")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<strong>{__("Justification:")}</strong> {control.exclusionJustification || __("No justification provided")}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={control.status === "EXCLUDED" ? "opacity-60" : ""}>
|
||||
<div className="text-base mb-4">{control.name}</div>
|
||||
<div className="mb-4">
|
||||
<LinkedStatesOfApplicabilityCard
|
||||
variant="card"
|
||||
statesOfApplicability={control.stateOfApplicabilityControls?.edges.map((edge) => edge.node) ?? []}
|
||||
params={{ controlId: control.id }}
|
||||
connectionId={control.stateOfApplicabilityControls?.__id ?? ""}
|
||||
onAttach={withErrorHandling(attachStateOfApplicability, __("Failed to link state of applicability"))}
|
||||
onDetach={withErrorHandling(detachStateOfApplicability, __("Failed to unlink state of applicability"))}
|
||||
disabled={isAttachingStateOfApplicability || isDetachingStateOfApplicability}
|
||||
readOnly={statesOfApplicabilityReadOnly}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<LinkedMeasuresCard
|
||||
variant="card"
|
||||
@@ -328,6 +398,18 @@ export default function FrameworkControlPage({ queryRef }: Props) {
|
||||
readOnly={auditsReadOnly}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<LinkedObligationsCard
|
||||
variant="card"
|
||||
obligations={control.obligations?.edges.map((edge) => edge.node) ?? []}
|
||||
params={{ controlId: control.id }}
|
||||
connectionId={control.obligations?.__id ?? ""}
|
||||
onAttach={withErrorHandling(attachObligation, __("Failed to link obligation"))}
|
||||
onDetach={withErrorHandling(detachObligation, __("Failed to unlink obligation"))}
|
||||
disabled={isAttachingObligation || isDetachingObligation}
|
||||
readOnly={obligationsReadOnly}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<LinkedSnapshotsCard
|
||||
variant="card"
|
||||
|
||||
@@ -53,6 +53,7 @@ const frameworkDetailFragment = graphql`
|
||||
name
|
||||
status
|
||||
exclusionJustification
|
||||
bestPractice
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,235 @@
|
||||
/**
|
||||
* @generated SignedSource<<b06f8ea18b076203f2e1ab8bae17d45f>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type CreateControlObligationMappingInput = {
|
||||
controlId: string;
|
||||
obligationId: string;
|
||||
};
|
||||
export type FrameworkControlPageAttachObligationMutation$variables = {
|
||||
connections: ReadonlyArray<string>;
|
||||
input: CreateControlObligationMappingInput;
|
||||
};
|
||||
export type FrameworkControlPageAttachObligationMutation$data = {
|
||||
readonly createControlObligationMapping: {
|
||||
readonly obligationEdge: {
|
||||
readonly node: {
|
||||
readonly id: string;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"LinkedObligationsCardFragment">;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
export type FrameworkControlPageAttachObligationMutation = {
|
||||
response: FrameworkControlPageAttachObligationMutation$data;
|
||||
variables: FrameworkControlPageAttachObligationMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "connections"
|
||||
},
|
||||
v1 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
},
|
||||
v2 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
v3 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": [
|
||||
(v0/*: any*/),
|
||||
(v1/*: any*/)
|
||||
],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "FrameworkControlPageAttachObligationMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "CreateControlObligationMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createControlObligationMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "ObligationEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "obligationEdge",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Obligation",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"args": null,
|
||||
"kind": "FragmentSpread",
|
||||
"name": "LinkedObligationsCardFragment"
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [
|
||||
(v1/*: any*/),
|
||||
(v0/*: any*/)
|
||||
],
|
||||
"kind": "Operation",
|
||||
"name": "FrameworkControlPageAttachObligationMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "CreateControlObligationMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createControlObligationMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "ObligationEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "obligationEdge",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Obligation",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "requirement",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "area",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "source",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "status",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "People",
|
||||
"kind": "LinkedField",
|
||||
"name": "owner",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "fullName",
|
||||
"storageKey": null
|
||||
},
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"filters": null,
|
||||
"handle": "prependEdge",
|
||||
"key": "",
|
||||
"kind": "LinkedHandle",
|
||||
"name": "obligationEdge",
|
||||
"handleArgs": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "connections",
|
||||
"variableName": "connections"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "e5dce8dc0bc03faa0e4d42696c76b59d",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "FrameworkControlPageAttachObligationMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation FrameworkControlPageAttachObligationMutation(\n $input: CreateControlObligationMappingInput!\n) {\n createControlObligationMapping(input: $input) {\n obligationEdge {\n node {\n id\n ...LinkedObligationsCardFragment\n }\n }\n }\n}\n\nfragment LinkedObligationsCardFragment on Obligation {\n id\n requirement\n area\n source\n status\n owner {\n fullName\n id\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "3c4bfe48fd9db37ce70cecd890d7248a";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,237 @@
|
||||
/**
|
||||
* @generated SignedSource<<6798ad28a0faeedef40b1b0a89f7563e>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type CreateStateOfApplicabilityControlMappingInput = {
|
||||
applicability: boolean;
|
||||
controlId: string;
|
||||
justification?: string | null | undefined;
|
||||
stateOfApplicabilityId: string;
|
||||
};
|
||||
export type FrameworkControlPageAttachStateOfApplicabilityMutation$variables = {
|
||||
connections: ReadonlyArray<string>;
|
||||
input: CreateStateOfApplicabilityControlMappingInput;
|
||||
};
|
||||
export type FrameworkControlPageAttachStateOfApplicabilityMutation$data = {
|
||||
readonly createStateOfApplicabilityControlMapping: {
|
||||
readonly stateOfApplicabilityControlEdge: {
|
||||
readonly node: {
|
||||
readonly id: string;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"LinkedStatesOfApplicabilityCardFragment">;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
export type FrameworkControlPageAttachStateOfApplicabilityMutation = {
|
||||
response: FrameworkControlPageAttachStateOfApplicabilityMutation$data;
|
||||
variables: FrameworkControlPageAttachStateOfApplicabilityMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "connections"
|
||||
},
|
||||
v1 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
},
|
||||
v2 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
v3 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": [
|
||||
(v0/*: any*/),
|
||||
(v1/*: any*/)
|
||||
],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "FrameworkControlPageAttachStateOfApplicabilityMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "CreateStateOfApplicabilityControlMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createStateOfApplicabilityControlMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "StateOfApplicabilityControlEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "stateOfApplicabilityControlEdge",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "StateOfApplicabilityControl",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"args": null,
|
||||
"kind": "FragmentSpread",
|
||||
"name": "LinkedStatesOfApplicabilityCardFragment"
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [
|
||||
(v1/*: any*/),
|
||||
(v0/*: any*/)
|
||||
],
|
||||
"kind": "Operation",
|
||||
"name": "FrameworkControlPageAttachStateOfApplicabilityMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "CreateStateOfApplicabilityControlMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createStateOfApplicabilityControlMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "StateOfApplicabilityControlEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "stateOfApplicabilityControlEdge",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "StateOfApplicabilityControl",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "stateOfApplicabilityId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "controlId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "StateOfApplicability",
|
||||
"kind": "LinkedField",
|
||||
"name": "stateOfApplicability",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "applicability",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "justification",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"filters": null,
|
||||
"handle": "prependEdge",
|
||||
"key": "",
|
||||
"kind": "LinkedHandle",
|
||||
"name": "stateOfApplicabilityControlEdge",
|
||||
"handleArgs": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "connections",
|
||||
"variableName": "connections"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "205bc4f133e268c943ef9df9881350f0",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "FrameworkControlPageAttachStateOfApplicabilityMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation FrameworkControlPageAttachStateOfApplicabilityMutation(\n $input: CreateStateOfApplicabilityControlMappingInput!\n) {\n createStateOfApplicabilityControlMapping(input: $input) {\n stateOfApplicabilityControlEdge {\n node {\n id\n ...LinkedStatesOfApplicabilityCardFragment\n }\n }\n }\n}\n\nfragment LinkedStatesOfApplicabilityCardFragment on StateOfApplicabilityControl {\n id\n stateOfApplicabilityId\n controlId\n stateOfApplicability {\n id\n name\n }\n applicability\n justification\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "8da7bd1e22eb2eaf857a4e97cea47e90";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,133 @@
|
||||
/**
|
||||
* @generated SignedSource<<b1b8d1f4c0dc579cacc0434be9b36259>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type DeleteControlObligationMappingInput = {
|
||||
controlId: string;
|
||||
obligationId: string;
|
||||
};
|
||||
export type FrameworkControlPageDetachObligationMutation$variables = {
|
||||
connections: ReadonlyArray<string>;
|
||||
input: DeleteControlObligationMappingInput;
|
||||
};
|
||||
export type FrameworkControlPageDetachObligationMutation$data = {
|
||||
readonly deleteControlObligationMapping: {
|
||||
readonly deletedObligationId: string;
|
||||
};
|
||||
};
|
||||
export type FrameworkControlPageDetachObligationMutation = {
|
||||
response: FrameworkControlPageDetachObligationMutation$data;
|
||||
variables: FrameworkControlPageDetachObligationMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "connections"
|
||||
},
|
||||
v1 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
},
|
||||
v2 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
v3 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "deletedObligationId",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": [
|
||||
(v0/*: any*/),
|
||||
(v1/*: any*/)
|
||||
],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "FrameworkControlPageDetachObligationMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "DeleteControlObligationMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "deleteControlObligationMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [
|
||||
(v1/*: any*/),
|
||||
(v0/*: any*/)
|
||||
],
|
||||
"kind": "Operation",
|
||||
"name": "FrameworkControlPageDetachObligationMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "DeleteControlObligationMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "deleteControlObligationMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"filters": null,
|
||||
"handle": "deleteEdge",
|
||||
"key": "",
|
||||
"kind": "ScalarHandle",
|
||||
"name": "deletedObligationId",
|
||||
"handleArgs": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "connections",
|
||||
"variableName": "connections"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "90f4a67d3a22217cc62841266c5a0450",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "FrameworkControlPageDetachObligationMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation FrameworkControlPageDetachObligationMutation(\n $input: DeleteControlObligationMappingInput!\n) {\n deleteControlObligationMapping(input: $input) {\n deletedObligationId\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "92da0169c3d421a658aa560b4e5ba1c8";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,153 @@
|
||||
/**
|
||||
* @generated SignedSource<<b5ac3d2a6151aa858185089d6d979a34>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type DeleteStateOfApplicabilityControlMappingInput = {
|
||||
controlId: string;
|
||||
stateOfApplicabilityId: string;
|
||||
};
|
||||
export type FrameworkControlPageDetachStateOfApplicabilityMutation$variables = {
|
||||
connections: ReadonlyArray<string>;
|
||||
input: DeleteStateOfApplicabilityControlMappingInput;
|
||||
};
|
||||
export type FrameworkControlPageDetachStateOfApplicabilityMutation$data = {
|
||||
readonly deleteStateOfApplicabilityControlMapping: {
|
||||
readonly deletedControlId: string;
|
||||
readonly deletedStateOfApplicabilityControlId: string;
|
||||
readonly deletedStateOfApplicabilityId: string;
|
||||
};
|
||||
};
|
||||
export type FrameworkControlPageDetachStateOfApplicabilityMutation = {
|
||||
response: FrameworkControlPageDetachStateOfApplicabilityMutation$data;
|
||||
variables: FrameworkControlPageDetachStateOfApplicabilityMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "connections"
|
||||
},
|
||||
v1 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
},
|
||||
v2 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
v3 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "deletedStateOfApplicabilityId",
|
||||
"storageKey": null
|
||||
},
|
||||
v4 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "deletedControlId",
|
||||
"storageKey": null
|
||||
},
|
||||
v5 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "deletedStateOfApplicabilityControlId",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": [
|
||||
(v0/*: any*/),
|
||||
(v1/*: any*/)
|
||||
],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "FrameworkControlPageDetachStateOfApplicabilityMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "DeleteStateOfApplicabilityControlMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "deleteStateOfApplicabilityControlMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
(v4/*: any*/),
|
||||
(v5/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [
|
||||
(v1/*: any*/),
|
||||
(v0/*: any*/)
|
||||
],
|
||||
"kind": "Operation",
|
||||
"name": "FrameworkControlPageDetachStateOfApplicabilityMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "DeleteStateOfApplicabilityControlMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "deleteStateOfApplicabilityControlMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
(v4/*: any*/),
|
||||
(v5/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"filters": null,
|
||||
"handle": "deleteEdge",
|
||||
"key": "",
|
||||
"kind": "ScalarHandle",
|
||||
"name": "deletedStateOfApplicabilityControlId",
|
||||
"handleArgs": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "connections",
|
||||
"variableName": "connections"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "f0ec8162516546b2cdd221c0c9832908",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "FrameworkControlPageDetachStateOfApplicabilityMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation FrameworkControlPageDetachStateOfApplicabilityMutation(\n $input: DeleteStateOfApplicabilityControlMappingInput!\n) {\n deleteStateOfApplicabilityControlMapping(input: $input) {\n deletedStateOfApplicabilityId\n deletedControlId\n deletedStateOfApplicabilityControlId\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "f1a4efbd039ed9f457905903df50a160";
|
||||
|
||||
export default node;
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<1da75e11f49e841800329ded9f67a1d4>>
|
||||
* @generated SignedSource<<1c21fa202a0315a19517c79eb93932f3>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -16,6 +16,7 @@ export type FrameworkDetailPageFragment$data = {
|
||||
readonly __id: string;
|
||||
readonly edges: ReadonlyArray<{
|
||||
readonly node: {
|
||||
readonly bestPractice: boolean;
|
||||
readonly exclusionJustification: string | null | undefined;
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
@@ -155,6 +156,13 @@ return {
|
||||
"kind": "ScalarField",
|
||||
"name": "exclusionJustification",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "bestPractice",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
@@ -183,6 +191,6 @@ return {
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "34a82531b8812ee16e75eb035bc739e8";
|
||||
(node as any).hash = "e7be231a4f5cbad12945d2ca627cc442";
|
||||
|
||||
export default node;
|
||||
|
||||
@@ -6,8 +6,8 @@ import {
|
||||
DialogFooter,
|
||||
Input,
|
||||
Textarea,
|
||||
Option,
|
||||
useDialogRef,
|
||||
Checkbox,
|
||||
} from "@probo/ui";
|
||||
import type { ReactNode } from "react";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
@@ -17,7 +17,6 @@ import type { FrameworkControlDialogFragment$key } from "./__generated__/Framewo
|
||||
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||
import { z } from "zod";
|
||||
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
|
||||
import { ControlledSelect } from "/components/form/ControlledField";
|
||||
import { useEffect, useMemo } from "react";
|
||||
|
||||
type Props = {
|
||||
@@ -35,6 +34,7 @@ const controlFragment = graphql`
|
||||
sectionTitle
|
||||
status
|
||||
exclusionJustification
|
||||
bestPractice
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -67,16 +67,7 @@ const schema = z.object({
|
||||
name: z.string(),
|
||||
description: z.string().optional().nullable(),
|
||||
sectionTitle: z.string(),
|
||||
status: z.enum(["INCLUDED", "EXCLUDED"]),
|
||||
exclusionJustification: z.string().optional(),
|
||||
}).refine((data) => {
|
||||
if (data.status === "EXCLUDED") {
|
||||
return data.exclusionJustification && data.exclusionJustification.trim().length > 0;
|
||||
}
|
||||
return true;
|
||||
}, {
|
||||
message: "Exclusion justification is required when status is excluded",
|
||||
path: ["exclusionJustification"],
|
||||
bestPractice: z.boolean(),
|
||||
});
|
||||
|
||||
export function FrameworkControlDialog(props: Props) {
|
||||
@@ -92,11 +83,10 @@ export function FrameworkControlDialog(props: Props) {
|
||||
name: frameworkControl?.name ?? "",
|
||||
description: frameworkControl?.description ?? "",
|
||||
sectionTitle: frameworkControl?.sectionTitle ?? "",
|
||||
status: frameworkControl?.status ?? "INCLUDED",
|
||||
exclusionJustification: frameworkControl?.exclusionJustification ?? "",
|
||||
bestPractice: frameworkControl?.bestPractice ?? true,
|
||||
}), [frameworkControl]);
|
||||
|
||||
const { control, handleSubmit, register, reset, watch } = useFormWithSchema(schema, {
|
||||
const { handleSubmit, register, reset, watch, setValue } = useFormWithSchema(schema, {
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
@@ -104,8 +94,7 @@ export function FrameworkControlDialog(props: Props) {
|
||||
reset(defaultValues);
|
||||
}, [defaultValues, reset]);
|
||||
|
||||
const statusValue = watch("status");
|
||||
const showExclusionJustification = statusValue === "EXCLUDED";
|
||||
const bestPracticeValue = watch("bestPractice");
|
||||
|
||||
const onSubmit = handleSubmit(async (data) => {
|
||||
if (frameworkControl) {
|
||||
@@ -117,8 +106,7 @@ export function FrameworkControlDialog(props: Props) {
|
||||
name: data.name,
|
||||
description: data.description || null,
|
||||
sectionTitle: data.sectionTitle,
|
||||
status: data.status,
|
||||
exclusionJustification: data.status === "EXCLUDED" ? data.exclusionJustification : null,
|
||||
bestPractice: data.bestPractice,
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -131,8 +119,7 @@ export function FrameworkControlDialog(props: Props) {
|
||||
name: data.name,
|
||||
description: data.description || null,
|
||||
sectionTitle: data.sectionTitle,
|
||||
status: data.status,
|
||||
exclusionJustification: data.status === "EXCLUDED" ? data.exclusionJustification : null,
|
||||
bestPractice: data.bestPractice ?? true,
|
||||
},
|
||||
connections: [props.connectionId!],
|
||||
},
|
||||
@@ -178,23 +165,13 @@ export function FrameworkControlDialog(props: Props) {
|
||||
placeholder={__("Add description")}
|
||||
{...register("description")}
|
||||
/>
|
||||
<ControlledSelect
|
||||
control={control}
|
||||
name="status"
|
||||
placeholder={__("Select status")}
|
||||
>
|
||||
<Option value="INCLUDED">{__("Included")}</Option>
|
||||
<Option value="EXCLUDED">{__("Excluded")}</Option>
|
||||
</ControlledSelect>
|
||||
{showExclusionJustification && (
|
||||
<Textarea
|
||||
required
|
||||
id="exclusionJustification"
|
||||
variant="bordered"
|
||||
placeholder={__("Reason for exclusion")}
|
||||
{...register("exclusionJustification")}
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<Checkbox
|
||||
checked={bestPracticeValue}
|
||||
onChange={(checked) => setValue("bestPractice", checked)}
|
||||
/>
|
||||
)}
|
||||
<span className="text-sm">{__("Best Practice")}</span>
|
||||
</label>
|
||||
</DialogContent>
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={isMutating}>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<7985268ac23df51ae6187b72c4f33d83>>
|
||||
* @generated SignedSource<<35c2c66dca0c895c7abca2b0f4917a68>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -12,6 +12,7 @@ import { ConcreteRequest } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type ControlStatus = "EXCLUDED" | "INCLUDED";
|
||||
export type CreateControlInput = {
|
||||
bestPractice: boolean;
|
||||
description?: string | null | undefined;
|
||||
exclusionJustification?: string | null | undefined;
|
||||
frameworkId: string;
|
||||
@@ -181,6 +182,13 @@ return {
|
||||
"kind": "ScalarField",
|
||||
"name": "exclusionJustification",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "bestPractice",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
@@ -210,12 +218,12 @@ return {
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "3df2d5a0a51c774ccf711423e947093d",
|
||||
"cacheID": "81df1f9c65937d3e387edffc6e9a28ac",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "FrameworkControlDialogCreateMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation FrameworkControlDialogCreateMutation(\n $input: CreateControlInput!\n) {\n createControl(input: $input) {\n controlEdge {\n node {\n ...FrameworkControlDialogFragment\n id\n }\n }\n }\n}\n\nfragment FrameworkControlDialogFragment on Control {\n id\n name\n description\n sectionTitle\n status\n exclusionJustification\n}\n"
|
||||
"text": "mutation FrameworkControlDialogCreateMutation(\n $input: CreateControlInput!\n) {\n createControl(input: $input) {\n controlEdge {\n node {\n ...FrameworkControlDialogFragment\n id\n }\n }\n }\n}\n\nfragment FrameworkControlDialogFragment on Control {\n id\n name\n description\n sectionTitle\n status\n exclusionJustification\n bestPractice\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<67703eb04d68c2798f5549ed6d948339>>
|
||||
* @generated SignedSource<<3a62e5f931a990d83caca02ab629b0c0>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -12,6 +12,7 @@ import { ReaderFragment } from 'relay-runtime';
|
||||
export type ControlStatus = "EXCLUDED" | "INCLUDED";
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type FrameworkControlDialogFragment$data = {
|
||||
readonly bestPractice: boolean;
|
||||
readonly description: string | null | undefined;
|
||||
readonly exclusionJustification: string | null | undefined;
|
||||
readonly id: string;
|
||||
@@ -72,12 +73,19 @@ const node: ReaderFragment = {
|
||||
"kind": "ScalarField",
|
||||
"name": "exclusionJustification",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "bestPractice",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Control",
|
||||
"abstractKey": null
|
||||
};
|
||||
|
||||
(node as any).hash = "856a8302abf15737b6a4d4316b77f8cc";
|
||||
(node as any).hash = "481f75ce8c525c1fa12517ef173ad868";
|
||||
|
||||
export default node;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<7d04994d5cabbbfc12f82754e8da0d83>>
|
||||
* @generated SignedSource<<7ee3c72e16fa86d6c006c004e4f93c95>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -12,6 +12,7 @@ import { ConcreteRequest } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type ControlStatus = "EXCLUDED" | "INCLUDED";
|
||||
export type UpdateControlInput = {
|
||||
bestPractice?: boolean | null | undefined;
|
||||
description?: string | null | undefined;
|
||||
exclusionJustification?: string | null | undefined;
|
||||
id: string;
|
||||
@@ -150,6 +151,13 @@ return {
|
||||
"kind": "ScalarField",
|
||||
"name": "exclusionJustification",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "bestPractice",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
@@ -160,12 +168,12 @@ return {
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "cee79ce9185400bad478453c44930dd6",
|
||||
"cacheID": "374c69b33dd6e94dec75829fe0777f58",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "FrameworkControlDialogUpdateMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation FrameworkControlDialogUpdateMutation(\n $input: UpdateControlInput!\n) {\n updateControl(input: $input) {\n control {\n ...FrameworkControlDialogFragment\n id\n }\n }\n}\n\nfragment FrameworkControlDialogFragment on Control {\n id\n name\n description\n sectionTitle\n status\n exclusionJustification\n}\n"
|
||||
"text": "mutation FrameworkControlDialogUpdateMutation(\n $input: UpdateControlInput!\n) {\n updateControl(input: $input) {\n control {\n ...FrameworkControlDialogFragment\n id\n }\n }\n}\n\nfragment FrameworkControlDialogFragment on Control {\n id\n name\n description\n sectionTitle\n status\n exclusionJustification\n bestPractice\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -32,7 +32,7 @@ import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||
import { Controller } from "react-hook-form";
|
||||
import { formatError, type GraphQLError } from "@probo/helpers";
|
||||
import z from "zod";
|
||||
import { getObligationStatusVariant, getObligationStatusLabel, formatDatetime, getObligationStatusOptions, validateSnapshotConsistency } from "@probo/helpers";
|
||||
import { getObligationStatusVariant, getObligationStatusLabel, formatDatetime, getObligationStatusOptions, getObligationTypeOptions, validateSnapshotConsistency } from "@probo/helpers";
|
||||
import { SnapshotBanner } from "/components/SnapshotBanner";
|
||||
import type { ObligationGraphNodeQuery } from "/hooks/graph/__generated__/ObligationGraphNodeQuery.graphql";
|
||||
import { use } from "react";
|
||||
@@ -44,6 +44,7 @@ const updateObligationSchema = z.object({
|
||||
requirement: z.string().optional(),
|
||||
actionsToBeImplemented: z.string().optional(),
|
||||
regulator: z.string().optional(),
|
||||
type: z.enum(["LEGAL", "CONTRACTUAL"]),
|
||||
lastReviewDate: z.string().optional(),
|
||||
dueDate: z.string().optional(),
|
||||
status: z.enum(["NON_COMPLIANT", "PARTIALLY_COMPLIANT", "COMPLIANT"]),
|
||||
@@ -68,6 +69,7 @@ export default function ObligationDetailsPage(props: Props) {
|
||||
|
||||
const updateObligation = useUpdateObligation();
|
||||
const statusOptions = getObligationStatusOptions(__);
|
||||
const typeOptions = getObligationTypeOptions(__);
|
||||
|
||||
const connectionId = ConnectionHandler.getConnectionID(
|
||||
organizationId,
|
||||
@@ -88,6 +90,7 @@ export default function ObligationDetailsPage(props: Props) {
|
||||
requirement: obligation?.requirement || "",
|
||||
actionsToBeImplemented: obligation?.actionsToBeImplemented || "",
|
||||
regulator: obligation?.regulator || "",
|
||||
type: obligation?.type ?? "LEGAL",
|
||||
lastReviewDate: obligation?.lastReviewDate
|
||||
? new Date(obligation.lastReviewDate).toISOString().split("T")[0]
|
||||
: "",
|
||||
@@ -109,6 +112,7 @@ export default function ObligationDetailsPage(props: Props) {
|
||||
requirement: formData.requirement || undefined,
|
||||
actionsToBeImplemented: formData.actionsToBeImplemented || undefined,
|
||||
regulator: formData.regulator || undefined,
|
||||
type: formData.type,
|
||||
lastReviewDate: formatDatetime(formData.lastReviewDate) ?? null,
|
||||
dueDate: formatDatetime(formData.dueDate) ?? null,
|
||||
status: formData.status,
|
||||
@@ -247,6 +251,29 @@ export default function ObligationDetailsPage(props: Props) {
|
||||
disabled={isSnapshotMode}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label={__("Type")} error={formState.errors.type?.message}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="type"
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
variant="editor"
|
||||
placeholder={__("Select type")}
|
||||
onValueChange={field.onChange}
|
||||
value={field.value}
|
||||
className="w-full"
|
||||
disabled={isSnapshotMode}
|
||||
>
|
||||
{typeOptions.map((option) => (
|
||||
<Option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
|
||||
@@ -21,7 +21,7 @@ import { useCreateObligation } from "../../../../hooks/graph/ObligationGraph";
|
||||
import { PeopleSelectField } from "/components/form/PeopleSelectField";
|
||||
import { Controller } from "react-hook-form";
|
||||
import { formatError, type GraphQLError } from "@probo/helpers";
|
||||
import { formatDatetime, getObligationStatusOptions } from "@probo/helpers";
|
||||
import { formatDatetime, getObligationStatusOptions, getObligationTypeOptions } from "@probo/helpers";
|
||||
|
||||
const schema = z.object({
|
||||
area: z.string().optional(),
|
||||
@@ -29,6 +29,7 @@ const schema = z.object({
|
||||
requirement: z.string().optional(),
|
||||
actionsToBeImplemented: z.string().optional(),
|
||||
regulator: z.string().optional(),
|
||||
type: z.enum(["LEGAL", "CONTRACTUAL"]),
|
||||
ownerId: z.string().min(1, "Owner is required"),
|
||||
lastReviewDate: z.string().optional(),
|
||||
dueDate: z.string().optional(),
|
||||
@@ -54,6 +55,7 @@ export function CreateObligationDialog({
|
||||
|
||||
const createObligation = useCreateObligation(connection || "");
|
||||
const statusOptions = getObligationStatusOptions(__);
|
||||
const typeOptions = getObligationTypeOptions(__);
|
||||
|
||||
const { register, handleSubmit, formState, reset, control } = useFormWithSchema(schema, {
|
||||
defaultValues: {
|
||||
@@ -62,6 +64,7 @@ export function CreateObligationDialog({
|
||||
requirement: "",
|
||||
actionsToBeImplemented: "",
|
||||
regulator: "",
|
||||
type: "LEGAL" as const,
|
||||
ownerId: "",
|
||||
lastReviewDate: "",
|
||||
dueDate: "",
|
||||
@@ -78,6 +81,7 @@ export function CreateObligationDialog({
|
||||
requirement: formData.requirement || undefined,
|
||||
actionsToBeImplemented: formData.actionsToBeImplemented || undefined,
|
||||
regulator: formData.regulator || undefined,
|
||||
type: formData.type,
|
||||
ownerId: formData.ownerId,
|
||||
lastReviewDate: formatDatetime(formData.lastReviewDate),
|
||||
dueDate: formatDatetime(formData.dueDate),
|
||||
@@ -169,6 +173,31 @@ export function CreateObligationDialog({
|
||||
placeholder={__("Enter regulator")}
|
||||
error={formState.errors.regulator?.message}
|
||||
/>
|
||||
|
||||
<Field label={__("Type")}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="type"
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
variant="editor"
|
||||
placeholder={__("Select type")}
|
||||
onValueChange={field.onChange}
|
||||
value={field.value}
|
||||
className="w-full"
|
||||
>
|
||||
{typeOptions.map((option) => (
|
||||
<Option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
{formState.errors.type && (
|
||||
<p className="text-sm text-red-500 mt-1">{formState.errors.type.message}</p>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<79d48ab0fd5b269022244b0777eac279>>
|
||||
* @generated SignedSource<<e9e261236245bcf1724038c76fe9918c>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -9,7 +9,7 @@
|
||||
// @ts-nocheck
|
||||
|
||||
import { ReaderFragment } from 'relay-runtime';
|
||||
export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "VENDORS";
|
||||
export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "STATES_OF_APPLICABILITY" | "VENDORS";
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type SnapshotsPageFragment$data = {
|
||||
readonly snapshots: {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<4a28eec1f25c5d290bc070a534042521>>
|
||||
* @generated SignedSource<<d0a4f2beac754ba3a7865f227b9d6aae>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -9,7 +9,7 @@
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "VENDORS";
|
||||
export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "STATES_OF_APPLICABILITY" | "VENDORS";
|
||||
export type CreateSnapshotInput = {
|
||||
description?: string | null | undefined;
|
||||
name: string;
|
||||
|
||||
@@ -0,0 +1,364 @@
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import {
|
||||
ActionDropdown,
|
||||
Breadcrumb,
|
||||
DropdownItem,
|
||||
IconTrashCan,
|
||||
IconArrowDown,
|
||||
PageHeader,
|
||||
Card,
|
||||
Button,
|
||||
IconPencil,
|
||||
IconCheckmark1,
|
||||
IconCrossLargeX,
|
||||
Input,
|
||||
} from "@probo/ui";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import {
|
||||
ConnectionHandler,
|
||||
graphql,
|
||||
type PreloadedQuery,
|
||||
usePreloadedQuery,
|
||||
} from "react-relay";
|
||||
import type {
|
||||
StateOfApplicabilityGraphNodeQuery,
|
||||
} from "/hooks/graph/__generated__/StateOfApplicabilityGraphNodeQuery.graphql";
|
||||
import type { StateOfApplicabilityDetailPageExportMutation } from "./__generated__/StateOfApplicabilityDetailPageExportMutation.graphql";
|
||||
import {
|
||||
StateOfApplicabilityConnectionKey,
|
||||
stateOfApplicabilityNodeQuery,
|
||||
useDeleteStateOfApplicability,
|
||||
updateStateOfApplicabilityMutation,
|
||||
} from "/hooks/graph/StateOfApplicabilityGraph";
|
||||
import { use, useState, Suspense } from "react";
|
||||
import { PermissionsContext } from "/providers/PermissionsContext";
|
||||
import { usePageTitle } from "@probo/hooks";
|
||||
import { formatDate, validateSnapshotConsistency } from "@probo/helpers";
|
||||
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
|
||||
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||
import { z } from "zod";
|
||||
import StateOfApplicabilityControlsTab from "./tabs/StateOfApplicabilityControlsTab";
|
||||
import { SnapshotBanner } from "/components/SnapshotBanner";
|
||||
import { PeopleSelectField } from "/components/form/PeopleSelectField";
|
||||
|
||||
const exportStateOfApplicabilityPDFMutation = graphql`
|
||||
mutation StateOfApplicabilityDetailPageExportMutation($input: ExportStateOfApplicabilityPDFInput!) {
|
||||
exportStateOfApplicabilityPDF(input: $input) {
|
||||
data
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
queryRef: PreloadedQuery<StateOfApplicabilityGraphNodeQuery>;
|
||||
};
|
||||
|
||||
export default function StateOfApplicabilityDetailPage(props: Props) {
|
||||
const { stateOfApplicabilityId, snapshotId } = useParams<{ stateOfApplicabilityId: string; snapshotId?: string }>();
|
||||
const organizationId = useOrganizationId();
|
||||
const data = usePreloadedQuery(stateOfApplicabilityNodeQuery, props.queryRef);
|
||||
const stateOfApplicability = data.node;
|
||||
const { __ } = useTranslate();
|
||||
const navigate = useNavigate();
|
||||
const { isAuthorized } = use(PermissionsContext);
|
||||
const isSnapshotMode = Boolean(snapshotId);
|
||||
|
||||
if (!stateOfApplicabilityId || !stateOfApplicability) {
|
||||
throw new Error(
|
||||
"Cannot load state of applicability detail page without stateOfApplicabilityId parameter",
|
||||
);
|
||||
}
|
||||
|
||||
validateSnapshotConsistency(stateOfApplicability, snapshotId);
|
||||
|
||||
const connectionId = ConnectionHandler.getConnectionID(
|
||||
organizationId,
|
||||
StateOfApplicabilityConnectionKey,
|
||||
);
|
||||
|
||||
const deleteStateOfApplicability = useDeleteStateOfApplicability(
|
||||
stateOfApplicability,
|
||||
connectionId,
|
||||
() => navigate(`/organizations/${organizationId}/states-of-applicability`),
|
||||
);
|
||||
|
||||
usePageTitle(stateOfApplicability.name || __("State of Applicability"));
|
||||
|
||||
const [isEditingName, setIsEditingName] = useState(false);
|
||||
const [isEditingOwner, setIsEditingOwner] = useState(false);
|
||||
const [updateStateOfApplicability, isUpdating] = useMutationWithToasts(
|
||||
updateStateOfApplicabilityMutation,
|
||||
{
|
||||
successMessage: __("State of Applicability updated successfully."),
|
||||
errorMessage: __("Failed to update State of Applicability"),
|
||||
}
|
||||
);
|
||||
|
||||
const canUpdate = !isSnapshotMode && isAuthorized("StateOfApplicability", "updateStateOfApplicability");
|
||||
const canDelete = !isSnapshotMode && isAuthorized("StateOfApplicability", "deleteStateOfApplicability");
|
||||
|
||||
const [exportStateOfApplicabilityPDF, isExporting] = useMutationWithToasts<StateOfApplicabilityDetailPageExportMutation>(
|
||||
exportStateOfApplicabilityPDFMutation,
|
||||
{
|
||||
successMessage: __("State of Applicability exported successfully."),
|
||||
errorMessage: __("Failed to export State of Applicability"),
|
||||
}
|
||||
);
|
||||
|
||||
const handleExport = () => {
|
||||
if (!stateOfApplicability.id) return;
|
||||
|
||||
exportStateOfApplicabilityPDF({
|
||||
variables: {
|
||||
input: {
|
||||
stateOfApplicabilityId: stateOfApplicability.id,
|
||||
},
|
||||
},
|
||||
onCompleted: (data) => {
|
||||
if (data.exportStateOfApplicabilityPDF?.data) {
|
||||
const link = window.document.createElement("a");
|
||||
link.href = data.exportStateOfApplicabilityPDF.data;
|
||||
link.download = `${stateOfApplicability.name || "state-of-applicability"}.pdf`;
|
||||
window.document.body.appendChild(link);
|
||||
link.click();
|
||||
window.document.body.removeChild(link);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const nameSchema = z.object({
|
||||
name: z.string().min(1, __("Name is required")),
|
||||
});
|
||||
|
||||
const ownerSchema = z.object({
|
||||
ownerId: z.string().min(1, __("Owner is required")),
|
||||
});
|
||||
|
||||
const { register: registerName, handleSubmit: handleSubmitName, reset: resetName } = useFormWithSchema(
|
||||
nameSchema,
|
||||
{
|
||||
defaultValues: {
|
||||
name: stateOfApplicability.name || "",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const { control: controlOwner, handleSubmit: handleSubmitOwner, reset: resetOwner } = useFormWithSchema(
|
||||
ownerSchema,
|
||||
{
|
||||
defaultValues: {
|
||||
ownerId: stateOfApplicability.owner?.id || "",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const handleUpdateName = handleSubmitName((data) => {
|
||||
if (!stateOfApplicability.id) return;
|
||||
|
||||
updateStateOfApplicability({
|
||||
variables: {
|
||||
input: {
|
||||
id: stateOfApplicability.id,
|
||||
name: data.name,
|
||||
},
|
||||
},
|
||||
onSuccess: () => {
|
||||
setIsEditingName(false);
|
||||
resetName({ name: data.name });
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const handleUpdateOwner = handleSubmitOwner((data) => {
|
||||
if (!stateOfApplicability.id) return;
|
||||
|
||||
updateStateOfApplicability({
|
||||
variables: {
|
||||
input: {
|
||||
id: stateOfApplicability.id,
|
||||
ownerId: data.ownerId,
|
||||
},
|
||||
},
|
||||
onSuccess: () => {
|
||||
setIsEditingOwner(false);
|
||||
resetOwner({ ownerId: data.ownerId });
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const handleCancelNameEdit = () => {
|
||||
setIsEditingName(false);
|
||||
resetName({
|
||||
name: stateOfApplicability.name || "",
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancelOwnerEdit = () => {
|
||||
setIsEditingOwner(false);
|
||||
resetOwner({
|
||||
ownerId: stateOfApplicability.owner?.id || "",
|
||||
});
|
||||
};
|
||||
|
||||
const listUrl = snapshotId
|
||||
? `/organizations/${organizationId}/snapshots/${snapshotId}/states-of-applicability`
|
||||
: `/organizations/${organizationId}/states-of-applicability`;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{snapshotId && <SnapshotBanner snapshotId={snapshotId} />}
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{
|
||||
label: __("States of Applicability"),
|
||||
to: listUrl,
|
||||
},
|
||||
{
|
||||
label: stateOfApplicability.name || __("State of Applicability detail"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<PageHeader
|
||||
title={
|
||||
isEditingName && canUpdate ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
{...registerName("name")}
|
||||
variant="title"
|
||||
className="flex-1"
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape") {
|
||||
handleCancelNameEdit();
|
||||
}
|
||||
if (e.key === "Enter" && e.ctrlKey) {
|
||||
handleUpdateName();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="quaternary"
|
||||
icon={IconCheckmark1}
|
||||
onClick={handleUpdateName}
|
||||
disabled={isUpdating}
|
||||
/>
|
||||
<Button
|
||||
variant="quaternary"
|
||||
icon={IconCrossLargeX}
|
||||
onClick={handleCancelNameEdit}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{stateOfApplicability.name || ""}</span>
|
||||
{canUpdate && (
|
||||
<Button
|
||||
variant="quaternary"
|
||||
icon={IconPencil}
|
||||
onClick={() => setIsEditingName(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={IconArrowDown}
|
||||
onClick={handleExport}
|
||||
disabled={isExporting}
|
||||
>
|
||||
{__("Export")}
|
||||
</Button>
|
||||
{canDelete && (
|
||||
<ActionDropdown variant="secondary">
|
||||
<DropdownItem variant="danger" icon={IconTrashCan} onClick={deleteStateOfApplicability}>
|
||||
{__("Delete")}
|
||||
</DropdownItem>
|
||||
</ActionDropdown>
|
||||
)}
|
||||
</PageHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-base font-medium">{__("Details")}</h2>
|
||||
<Card className="space-y-4" padded>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-xs text-txt-tertiary font-semibold mb-1">
|
||||
{__("Owner")}
|
||||
</div>
|
||||
{isEditingOwner && canUpdate ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Suspense fallback={<div>{__("Loading...")}</div>}>
|
||||
<PeopleSelectField
|
||||
organizationId={organizationId}
|
||||
control={controlOwner}
|
||||
name="ownerId"
|
||||
/>
|
||||
</Suspense>
|
||||
<Button
|
||||
variant="quaternary"
|
||||
icon={IconCheckmark1}
|
||||
onClick={handleUpdateOwner}
|
||||
disabled={isUpdating}
|
||||
/>
|
||||
<Button
|
||||
variant="quaternary"
|
||||
icon={IconCrossLargeX}
|
||||
onClick={handleCancelOwnerEdit}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-sm text-txt-primary">
|
||||
{stateOfApplicability.owner?.fullName || "-"}
|
||||
</div>
|
||||
{canUpdate && (
|
||||
<Button
|
||||
variant="quaternary"
|
||||
icon={IconPencil}
|
||||
onClick={() => setIsEditingOwner(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-xs text-txt-tertiary font-semibold mb-1">
|
||||
{__("Created at")}
|
||||
</div>
|
||||
<div className="text-sm text-txt-primary">
|
||||
{formatDate(stateOfApplicability.createdAt)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-txt-tertiary font-semibold mb-1">
|
||||
{__("Updated at")}
|
||||
</div>
|
||||
<div className="text-sm text-txt-primary">
|
||||
{formatDate(stateOfApplicability.updatedAt)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{stateOfApplicability.id && (
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-base font-medium">{__("Controls")}</h2>
|
||||
<StateOfApplicabilityControlsTab
|
||||
stateOfApplicability={stateOfApplicability as typeof stateOfApplicability & { id: string }}
|
||||
isSnapshotMode={isSnapshotMode}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
import {
|
||||
Button,
|
||||
IconPlusLarge,
|
||||
PageHeader,
|
||||
Card,
|
||||
Thead,
|
||||
Tbody,
|
||||
Tr,
|
||||
Th,
|
||||
Td,
|
||||
ActionDropdown,
|
||||
DropdownItem,
|
||||
IconTrashCan,
|
||||
Table,
|
||||
} from "@probo/ui";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import type { StateOfApplicabilityGraphPaginatedQuery } from "/hooks/graph/__generated__/StateOfApplicabilityGraphPaginatedQuery.graphql";
|
||||
import { type PreloadedQuery } from "react-relay";
|
||||
import {
|
||||
useStateOfApplicabilityQuery,
|
||||
useDeleteStateOfApplicability,
|
||||
} from "/hooks/graph/StateOfApplicabilityGraph";
|
||||
import type { StateOfApplicabilityGraphPaginatedFragment$data } from "/hooks/graph/__generated__/StateOfApplicabilityGraphPaginatedFragment.graphql";
|
||||
import type { NodeOf } from "/types";
|
||||
import { usePageTitle } from "@probo/hooks";
|
||||
import { CreateStateOfApplicabilityDialog } from "./dialogs/CreateStateOfApplicabilityDialog";
|
||||
import { PermissionsContext } from "/providers/PermissionsContext";
|
||||
import { use, useEffect } from "react";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import { formatDate } from "@probo/helpers";
|
||||
import { useParams } from "react-router";
|
||||
import { SnapshotBanner } from "/components/SnapshotBanner";
|
||||
|
||||
type StateOfApplicability = NodeOf<
|
||||
StateOfApplicabilityGraphPaginatedFragment$data["statesOfApplicability"]
|
||||
>;
|
||||
|
||||
export default function StatesOfApplicabilityPage({
|
||||
queryRef,
|
||||
}: {
|
||||
queryRef: PreloadedQuery<StateOfApplicabilityGraphPaginatedQuery>;
|
||||
}) {
|
||||
const { __ } = useTranslate();
|
||||
const { isAuthorized } = use(PermissionsContext);
|
||||
const { snapshotId } = useParams<{ snapshotId?: string }>();
|
||||
const isSnapshotMode = Boolean(snapshotId);
|
||||
const {
|
||||
statesOfApplicability,
|
||||
connectionId,
|
||||
hasNext,
|
||||
loadNext,
|
||||
isLoadingNext,
|
||||
refetch,
|
||||
} = useStateOfApplicabilityQuery(queryRef);
|
||||
|
||||
usePageTitle(__("States of Applicability"));
|
||||
|
||||
// Refetch with snapshot filter when in snapshot mode
|
||||
useEffect(() => {
|
||||
if (snapshotId) {
|
||||
refetch({ filter: { snapshotId } }, { fetchPolicy: 'store-or-network' });
|
||||
}
|
||||
}, [snapshotId, refetch]);
|
||||
|
||||
const hasAnyAction = !isSnapshotMode &&
|
||||
isAuthorized("StateOfApplicability", "deleteStateOfApplicability");
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{snapshotId && <SnapshotBanner snapshotId={snapshotId} />}
|
||||
<PageHeader
|
||||
title={__("States of Applicability")}
|
||||
description={__(
|
||||
"Manage states of applicability for your organization's frameworks.",
|
||||
)}
|
||||
>
|
||||
{!isSnapshotMode && isAuthorized("Organization", "createStateOfApplicability") && (
|
||||
<CreateStateOfApplicabilityDialog connectionId={connectionId}>
|
||||
<Button icon={IconPlusLarge}>
|
||||
{__("Add state of applicability")}
|
||||
</Button>
|
||||
</CreateStateOfApplicabilityDialog>
|
||||
)}
|
||||
</PageHeader>
|
||||
|
||||
{statesOfApplicability && statesOfApplicability.length > 0 ? (
|
||||
<Card>
|
||||
<Table>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>{__("Name")}</Th>
|
||||
<Th>{__("Created at")}</Th>
|
||||
<Th>{__("Controls")}</Th>
|
||||
{hasAnyAction && <Th>{__("Actions")}</Th>}
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{statesOfApplicability.map((soa) => (
|
||||
<StateOfApplicabilityRow
|
||||
key={soa.id}
|
||||
stateOfApplicability={soa}
|
||||
connectionId={connectionId}
|
||||
hasAnyAction={hasAnyAction}
|
||||
/>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
|
||||
{hasNext && (
|
||||
<div className="p-4 border-t">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => loadNext(50)}
|
||||
disabled={isLoadingNext}
|
||||
>
|
||||
{isLoadingNext ? __("Loading...") : __("Load more")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
) : (
|
||||
<Card padded>
|
||||
<div className="text-center py-12">
|
||||
<h3 className="text-lg font-semibold mb-2">
|
||||
{__("No states of applicability yet")}
|
||||
</h3>
|
||||
<p className="text-txt-tertiary mb-4">
|
||||
{__("Create your first state of applicability to get started.")}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StateOfApplicabilityRow({
|
||||
stateOfApplicability,
|
||||
connectionId,
|
||||
hasAnyAction,
|
||||
}: {
|
||||
stateOfApplicability: StateOfApplicability;
|
||||
connectionId: string;
|
||||
hasAnyAction: boolean;
|
||||
}) {
|
||||
const { __ } = useTranslate();
|
||||
const organizationId = useOrganizationId();
|
||||
const { snapshotId } = useParams<{ snapshotId?: string }>();
|
||||
const deleteStateOfApplicability = useDeleteStateOfApplicability(
|
||||
stateOfApplicability,
|
||||
connectionId,
|
||||
);
|
||||
const { isAuthorized } = use(PermissionsContext);
|
||||
|
||||
const detailUrl = snapshotId
|
||||
? `/organizations/${organizationId}/snapshots/${snapshotId}/states-of-applicability/${stateOfApplicability.id}`
|
||||
: `/organizations/${organizationId}/states-of-applicability/${stateOfApplicability.id}`;
|
||||
|
||||
return (
|
||||
<Tr to={detailUrl}>
|
||||
<Td>{stateOfApplicability.name}</Td>
|
||||
<Td>
|
||||
<time dateTime={stateOfApplicability.createdAt}>
|
||||
{formatDate(stateOfApplicability.createdAt)}
|
||||
</time>
|
||||
</Td>
|
||||
<Td>{stateOfApplicability.controlsInfo?.totalCount ?? 0}</Td>
|
||||
{hasAnyAction && (
|
||||
<Td noLink width={50} className="text-end">
|
||||
<ActionDropdown>
|
||||
{isAuthorized(
|
||||
"StateOfApplicability",
|
||||
"deleteStateOfApplicability",
|
||||
) && (
|
||||
<DropdownItem
|
||||
icon={IconTrashCan}
|
||||
variant="danger"
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
deleteStateOfApplicability();
|
||||
}}
|
||||
>
|
||||
{__("Delete")}
|
||||
</DropdownItem>
|
||||
)}
|
||||
</ActionDropdown>
|
||||
</Td>
|
||||
)}
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* @generated SignedSource<<9dc238538172b956fb81954024522ee1>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type ExportStateOfApplicabilityPDFInput = {
|
||||
stateOfApplicabilityId: string;
|
||||
};
|
||||
export type StateOfApplicabilityDetailPageExportMutation$variables = {
|
||||
input: ExportStateOfApplicabilityPDFInput;
|
||||
};
|
||||
export type StateOfApplicabilityDetailPageExportMutation$data = {
|
||||
readonly exportStateOfApplicabilityPDF: {
|
||||
readonly data: string;
|
||||
};
|
||||
};
|
||||
export type StateOfApplicabilityDetailPageExportMutation = {
|
||||
response: StateOfApplicabilityDetailPageExportMutation$data;
|
||||
variables: StateOfApplicabilityDetailPageExportMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
"concreteType": "ExportStateOfApplicabilityPDFPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "exportStateOfApplicabilityPDF",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "data",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "StateOfApplicabilityDetailPageExportMutation",
|
||||
"selections": (v1/*: any*/),
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "StateOfApplicabilityDetailPageExportMutation",
|
||||
"selections": (v1/*: any*/)
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "dbc24d23ab71abb76f95b114f86f200d",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "StateOfApplicabilityDetailPageExportMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation StateOfApplicabilityDetailPageExportMutation(\n $input: ExportStateOfApplicabilityPDFInput!\n) {\n exportStateOfApplicabilityPDF(input: $input) {\n data\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "36be308a451ada118c2bcc9c3b0c0a2b";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,110 @@
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import {
|
||||
Breadcrumb,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
Field,
|
||||
useDialogRef,
|
||||
} from "@probo/ui";
|
||||
import type { ReactNode } from "react";
|
||||
import { useNavigate } from "react-router";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import z from "zod";
|
||||
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
|
||||
import { createStateOfApplicabilityMutation } from "/hooks/graph/StateOfApplicabilityGraph";
|
||||
import type { StateOfApplicabilityGraphCreateMutation } from "/hooks/graph/__generated__/StateOfApplicabilityGraphCreateMutation.graphql";
|
||||
import { PeopleSelectField } from "/components/form/PeopleSelectField";
|
||||
import { Suspense } from "react";
|
||||
|
||||
type Props = {
|
||||
children: ReactNode;
|
||||
connectionId: string;
|
||||
};
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().min(1),
|
||||
ownerId: z.string().min(1),
|
||||
});
|
||||
|
||||
export function CreateStateOfApplicabilityDialog({
|
||||
children,
|
||||
connectionId,
|
||||
}: Props) {
|
||||
const { __ } = useTranslate();
|
||||
const organizationId = useOrganizationId();
|
||||
const navigate = useNavigate();
|
||||
const { control, register, handleSubmit, reset } = useFormWithSchema(schema, {
|
||||
defaultValues: {
|
||||
name: "",
|
||||
ownerId: "",
|
||||
},
|
||||
});
|
||||
const ref = useDialogRef();
|
||||
|
||||
const [mutate, isMutating] = useMutationWithToasts<StateOfApplicabilityGraphCreateMutation>(
|
||||
createStateOfApplicabilityMutation,
|
||||
{
|
||||
successMessage: __("State of applicability created successfully."),
|
||||
errorMessage: __("Failed to create state of applicability"),
|
||||
},
|
||||
);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
mutate({
|
||||
variables: {
|
||||
input: {
|
||||
name: data.name,
|
||||
organizationId,
|
||||
ownerId: data.ownerId,
|
||||
},
|
||||
connections: [connectionId],
|
||||
},
|
||||
onCompleted: (response) => {
|
||||
reset();
|
||||
ref.current?.close();
|
||||
const stateOfApplicabilityId = response.createStateOfApplicability.stateOfApplicabilityEdge.node.id;
|
||||
navigate(`/organizations/${organizationId}/states-of-applicability/${stateOfApplicabilityId}`);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
ref={ref}
|
||||
trigger={children}
|
||||
title={
|
||||
<Breadcrumb
|
||||
items={[__("States of Applicability"), __("New State of Applicability")]}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<form onSubmit={onSubmit}>
|
||||
<DialogContent padded className="space-y-4">
|
||||
<Field
|
||||
label={__("Name")}
|
||||
{...register("name")}
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
<Field label={__("Owner")}>
|
||||
<Suspense fallback={<div>{__("Loading...")}</div>}>
|
||||
<PeopleSelectField
|
||||
organizationId={organizationId}
|
||||
control={control}
|
||||
name="ownerId"
|
||||
/>
|
||||
</Suspense>
|
||||
</Field>
|
||||
</DialogContent>
|
||||
<DialogFooter>
|
||||
<Button disabled={isMutating} type="submit">
|
||||
{__("Create")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import {
|
||||
Breadcrumb,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
Field,
|
||||
Select,
|
||||
Option,
|
||||
Textarea,
|
||||
useDialogRef,
|
||||
Badge,
|
||||
} from "@probo/ui";
|
||||
import { forwardRef, useImperativeHandle, useState } from "react";
|
||||
import { graphql } from "react-relay";
|
||||
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
|
||||
import { z } from "zod";
|
||||
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||
|
||||
const linkControlMutation = graphql`
|
||||
mutation EditControlDialogLinkMutation($input: CreateStateOfApplicabilityControlMappingInput!) {
|
||||
createStateOfApplicabilityControlMapping(input: $input) {
|
||||
stateOfApplicabilityControlEdge {
|
||||
node {
|
||||
stateOfApplicabilityId
|
||||
controlId
|
||||
applicability
|
||||
justification
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export type EditControlDialogRef = {
|
||||
open: (control: {
|
||||
stateOfApplicabilityId: string;
|
||||
controlId: string;
|
||||
sectionTitle: string;
|
||||
name: string;
|
||||
frameworkName: string;
|
||||
applicability: boolean;
|
||||
justification: string | null;
|
||||
}) => void;
|
||||
};
|
||||
|
||||
const schema = z.object({
|
||||
applicability: z.boolean(),
|
||||
justification: z.string().optional(),
|
||||
});
|
||||
|
||||
export const EditControlDialog = forwardRef<EditControlDialogRef, { onSuccess?: () => void }>(
|
||||
({ onSuccess }, ref) => {
|
||||
const { __ } = useTranslate();
|
||||
const dialogRef = useDialogRef();
|
||||
const [control, setControl] = useState<{
|
||||
stateOfApplicabilityId: string;
|
||||
controlId: string;
|
||||
sectionTitle: string;
|
||||
name: string;
|
||||
frameworkName: string;
|
||||
applicability: boolean;
|
||||
justification: string | null;
|
||||
} | null>(null);
|
||||
|
||||
const [linkMutate, isLinking] = useMutationWithToasts(linkControlMutation, {
|
||||
successMessage: __("Control updated successfully."),
|
||||
errorMessage: __("Failed to update control"),
|
||||
});
|
||||
|
||||
const { register, handleSubmit, setValue, watch } = useFormWithSchema(schema, {
|
||||
defaultValues: {
|
||||
applicability: true,
|
||||
justification: "",
|
||||
},
|
||||
});
|
||||
const applicability = watch("applicability");
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
open: (ctrl) => {
|
||||
setControl(ctrl);
|
||||
setValue("applicability", ctrl.applicability);
|
||||
setValue("justification", ctrl.justification || "");
|
||||
dialogRef.current?.open();
|
||||
},
|
||||
}));
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
if (!control) return;
|
||||
|
||||
linkMutate({
|
||||
variables: {
|
||||
input: {
|
||||
stateOfApplicabilityId: control.stateOfApplicabilityId,
|
||||
controlId: control.controlId,
|
||||
applicability: data.applicability,
|
||||
justification: !data.applicability ? data.justification || null : null,
|
||||
},
|
||||
},
|
||||
onSuccess: () => {
|
||||
dialogRef.current?.close();
|
||||
setControl(null);
|
||||
onSuccess?.();
|
||||
},
|
||||
updater: (store) => {
|
||||
const stateOfApplicability = store.get(control.stateOfApplicabilityId);
|
||||
if (stateOfApplicability) {
|
||||
stateOfApplicability.invalidateRecord();
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
ref={dialogRef}
|
||||
className="max-w-lg"
|
||||
title={
|
||||
<Breadcrumb
|
||||
items={[__("States of Applicability"), __("Edit Control")]}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{control ? (
|
||||
<form onSubmit={onSubmit}>
|
||||
<DialogContent padded className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-medium text-txt-secondary">
|
||||
{control.frameworkName}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge size="md">{control.sectionTitle}</Badge>
|
||||
<span className="text-base font-medium text-txt-primary">{control.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Field label={__("Applicability")}>
|
||||
<Select
|
||||
variant="editor"
|
||||
value={applicability ? "yes" : "no"}
|
||||
onValueChange={(value) => setValue("applicability", value === "yes")}
|
||||
>
|
||||
<Option value="yes">{__("Yes")}</Option>
|
||||
<Option value="no">{__("No")}</Option>
|
||||
</Select>
|
||||
</Field>
|
||||
|
||||
{!applicability && (
|
||||
<Field label={__("Justification")}>
|
||||
<Textarea
|
||||
{...register("justification")}
|
||||
placeholder={__("Reason for non-applicability")}
|
||||
autogrow
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => dialogRef.current?.close()}
|
||||
>
|
||||
{__("Cancel")}
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLinking}>
|
||||
{__("Save")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
) : null}
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,385 @@
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import {
|
||||
Breadcrumb,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
Select,
|
||||
Option,
|
||||
Textarea,
|
||||
useDialogRef,
|
||||
Spinner,
|
||||
Badge,
|
||||
Input,
|
||||
IconMagnifyingGlass,
|
||||
IconChevronDown,
|
||||
IconChevronUp,
|
||||
IconCheckmark1,
|
||||
} from "@probo/ui";
|
||||
import { forwardRef, useImperativeHandle, useState, Suspense, useMemo } from "react";
|
||||
import { useLazyLoadQuery } from "react-relay";
|
||||
import { graphql } from "react-relay";
|
||||
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
|
||||
|
||||
const linkControlQuery = graphql`
|
||||
query LinkControlDialogQuery($stateOfApplicabilityId: ID!) {
|
||||
node(id: $stateOfApplicabilityId) {
|
||||
... on StateOfApplicability {
|
||||
id
|
||||
availableControls {
|
||||
controlId
|
||||
sectionTitle
|
||||
name
|
||||
frameworkId
|
||||
frameworkName
|
||||
organizationId
|
||||
stateOfApplicabilityId
|
||||
applicability
|
||||
justification
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const linkControlMutation = graphql`
|
||||
mutation LinkControlDialogLinkMutation($input: CreateStateOfApplicabilityControlMappingInput!) {
|
||||
createStateOfApplicabilityControlMapping(input: $input) {
|
||||
stateOfApplicabilityControlEdge {
|
||||
node {
|
||||
stateOfApplicabilityId
|
||||
controlId
|
||||
applicability
|
||||
justification
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const unlinkControlMutation = graphql`
|
||||
mutation LinkControlDialogUnlinkMutation($input: DeleteStateOfApplicabilityControlMappingInput!) {
|
||||
deleteStateOfApplicabilityControlMapping(input: $input) {
|
||||
deletedStateOfApplicabilityId
|
||||
deletedControlId
|
||||
deletedStateOfApplicabilityControlId
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export type LinkControlDialogRef = {
|
||||
open: (stateOfApplicabilityId: string, onUpdate?: () => void) => void;
|
||||
};
|
||||
|
||||
type Control = {
|
||||
controlId: string;
|
||||
sectionTitle: string;
|
||||
name: string;
|
||||
frameworkId: string;
|
||||
frameworkName: string;
|
||||
organizationId: string;
|
||||
stateOfApplicabilityId: string | null;
|
||||
applicability: boolean | null;
|
||||
justification: string | null;
|
||||
};
|
||||
|
||||
function ControlRow({
|
||||
control,
|
||||
stateOfApplicabilityId,
|
||||
isLinked,
|
||||
onUpdate,
|
||||
}: {
|
||||
control: Control;
|
||||
stateOfApplicabilityId: string;
|
||||
isLinked: boolean;
|
||||
onUpdate?: () => void;
|
||||
}) {
|
||||
const { __ } = useTranslate();
|
||||
const [selectedState, setSelectedState] = useState<string>(() => {
|
||||
if (!isLinked) return "not-linked";
|
||||
return control.applicability ? "applicable" : "not-applicable";
|
||||
});
|
||||
const [justification, setJustification] = useState(
|
||||
control.justification || ""
|
||||
);
|
||||
const [showJustification, setShowJustification] = useState(false);
|
||||
|
||||
const [linkMutate, isLinking] = useMutationWithToasts(linkControlMutation, {
|
||||
successMessage: __("Control updated successfully."),
|
||||
errorMessage: __("Failed to update control"),
|
||||
});
|
||||
|
||||
const [unlinkMutate, isUnlinking] = useMutationWithToasts(unlinkControlMutation, {
|
||||
successMessage: __("Control removed successfully."),
|
||||
errorMessage: __("Failed to remove control"),
|
||||
});
|
||||
|
||||
const handleStateChange = (newState: string) => {
|
||||
setSelectedState(newState);
|
||||
|
||||
if (newState === "not-linked") {
|
||||
unlinkMutate({
|
||||
variables: {
|
||||
input: {
|
||||
stateOfApplicabilityId,
|
||||
controlId: control.controlId,
|
||||
},
|
||||
},
|
||||
onSuccess: () => {
|
||||
setShowJustification(false);
|
||||
onUpdate?.();
|
||||
},
|
||||
});
|
||||
} else if (newState === "applicable") {
|
||||
setShowJustification(false);
|
||||
linkMutate({
|
||||
variables: {
|
||||
input: {
|
||||
stateOfApplicabilityId,
|
||||
controlId: control.controlId,
|
||||
applicability: true,
|
||||
justification: null,
|
||||
},
|
||||
},
|
||||
onSuccess: () => {
|
||||
onUpdate?.();
|
||||
},
|
||||
});
|
||||
} else if (newState === "not-applicable") {
|
||||
setShowJustification(true);
|
||||
setJustification(control.justification || "");
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveJustification = () => {
|
||||
linkMutate({
|
||||
variables: {
|
||||
input: {
|
||||
stateOfApplicabilityId,
|
||||
controlId: control.controlId,
|
||||
applicability: false,
|
||||
justification: justification || null,
|
||||
},
|
||||
},
|
||||
onSuccess: () => {
|
||||
setShowJustification(false);
|
||||
onUpdate?.();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-4 border-b border-border-low">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge size="md">{control.sectionTitle}</Badge>
|
||||
<span className="text-sm font-medium text-txt-primary">{control.name}</span>
|
||||
</div>
|
||||
{isLinked && control.applicability !== null && !showJustification && control.justification && (
|
||||
<div className="mt-2 text-sm text-txt-secondary">
|
||||
{control.justification}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<Select
|
||||
variant="editor"
|
||||
value={selectedState}
|
||||
onValueChange={handleStateChange}
|
||||
disabled={isLinking || isUnlinking}
|
||||
className="w-48"
|
||||
>
|
||||
<Option value="not-linked">
|
||||
{__("Not Linked")}
|
||||
</Option>
|
||||
<Option value="applicable">
|
||||
{__("Applicable")}
|
||||
</Option>
|
||||
<Option value="not-applicable">
|
||||
{__("Not Applicable")}
|
||||
</Option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
{showJustification && (
|
||||
<div className="mt-3 flex items-start gap-2">
|
||||
<Textarea
|
||||
value={justification}
|
||||
onChange={(e) => setJustification(e.target.value)}
|
||||
placeholder={__("Reason for non-applicability")}
|
||||
className="flex-1"
|
||||
autogrow
|
||||
/>
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={IconCheckmark1}
|
||||
onClick={handleSaveJustification}
|
||||
disabled={isLinking}
|
||||
aria-label={__("Save")}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LinkControlDialogContent({
|
||||
stateOfApplicabilityId,
|
||||
onUpdate,
|
||||
}: {
|
||||
stateOfApplicabilityId: string;
|
||||
onUpdate?: () => void;
|
||||
}) {
|
||||
const { __ } = useTranslate();
|
||||
const [search, setSearch] = useState("");
|
||||
const [collapsedFrameworks, setCollapsedFrameworks] = useState<Set<string>>(new Set());
|
||||
const data = useLazyLoadQuery(
|
||||
linkControlQuery,
|
||||
{ stateOfApplicabilityId },
|
||||
{ fetchPolicy: "store-or-network" }
|
||||
) as {
|
||||
node: {
|
||||
availableControls?: Control[];
|
||||
} | null;
|
||||
};
|
||||
|
||||
const filteredControls = useMemo(() => {
|
||||
const controls = data.node?.availableControls || [];
|
||||
if (!search) return controls;
|
||||
const lowerSearch = search.toLowerCase();
|
||||
return controls.filter(
|
||||
(c) =>
|
||||
c.name.toLowerCase().includes(lowerSearch) ||
|
||||
c.sectionTitle.toLowerCase().includes(lowerSearch) ||
|
||||
c.frameworkName.toLowerCase().includes(lowerSearch)
|
||||
);
|
||||
}, [data.node?.availableControls, search]);
|
||||
|
||||
const groupedControls = useMemo(() => {
|
||||
const groups: Record<string, Record<string, Control[]>> = {};
|
||||
filteredControls.forEach((control) => {
|
||||
if (!groups[control.frameworkName]) {
|
||||
groups[control.frameworkName] = {};
|
||||
}
|
||||
if (!groups[control.frameworkName][control.sectionTitle]) {
|
||||
groups[control.frameworkName][control.sectionTitle] = [];
|
||||
}
|
||||
groups[control.frameworkName][control.sectionTitle].push(control);
|
||||
});
|
||||
return groups;
|
||||
}, [filteredControls]);
|
||||
|
||||
const toggleFramework = (frameworkName: string) => {
|
||||
setCollapsedFrameworks((prev) => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(frameworkName)) {
|
||||
newSet.delete(frameworkName);
|
||||
} else {
|
||||
newSet.add(frameworkName);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent className="p-0">
|
||||
<div className="sticky top-0 bg-level-2 p-4 border-b border-border-low z-10">
|
||||
<Input
|
||||
icon={IconMagnifyingGlass}
|
||||
placeholder={__("Search controls...")}
|
||||
onValueChange={setSearch}
|
||||
/>
|
||||
</div>
|
||||
<div className="max-h-[60vh] overflow-y-auto">
|
||||
{filteredControls.length === 0 ? (
|
||||
<div className="p-8 text-center text-txt-secondary">
|
||||
{__("No controls found")}
|
||||
</div>
|
||||
) : (
|
||||
Object.entries(groupedControls).map(([frameworkName, sections]) => {
|
||||
const isCollapsed = collapsedFrameworks.has(frameworkName);
|
||||
return (
|
||||
<div key={frameworkName}>
|
||||
<div className="sticky top-0 bg-level-1 px-4 py-2 border-b border-border-low z-10 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-txt-primary">{frameworkName}</h3>
|
||||
<Button
|
||||
variant="tertiary"
|
||||
icon={isCollapsed ? IconChevronDown : IconChevronUp}
|
||||
onClick={() => toggleFramework(frameworkName)}
|
||||
aria-label={isCollapsed ? __("Expand") : __("Collapse")}
|
||||
/>
|
||||
</div>
|
||||
{!isCollapsed && Object.entries(sections).map(([sectionTitle, sectionControls]) => (
|
||||
<div key={`${frameworkName}-${sectionTitle}`}>
|
||||
{sectionControls.map((control) => (
|
||||
<ControlRow
|
||||
key={control.controlId}
|
||||
control={control}
|
||||
stateOfApplicabilityId={stateOfApplicabilityId}
|
||||
isLinked={control.stateOfApplicabilityId !== null}
|
||||
onUpdate={onUpdate}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
<DialogFooter exitLabel={__("Close")}></DialogFooter>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export const LinkControlDialog = forwardRef<LinkControlDialogRef>((_props, ref) => {
|
||||
const { __ } = useTranslate();
|
||||
const dialogRef = useDialogRef();
|
||||
const [stateOfApplicabilityId, setStateOfApplicabilityId] = useState<string | null>(null);
|
||||
const [onUpdateCallback, setOnUpdateCallback] = useState<(() => void) | undefined>(undefined);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
open: (soaId: string, callback?: () => void) => {
|
||||
setStateOfApplicabilityId(soaId);
|
||||
setOnUpdateCallback(() => callback);
|
||||
dialogRef.current?.open();
|
||||
},
|
||||
}), [dialogRef]);
|
||||
|
||||
const handleClose = () => {
|
||||
setStateOfApplicabilityId(null);
|
||||
setOnUpdateCallback(undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
ref={dialogRef}
|
||||
className="max-w-3xl"
|
||||
title={
|
||||
<Breadcrumb
|
||||
items={[__("States of Applicability"), __("Add Controls")]}
|
||||
/>
|
||||
}
|
||||
onClose={handleClose}
|
||||
>
|
||||
{stateOfApplicabilityId ? (
|
||||
<Suspense
|
||||
fallback={
|
||||
<DialogContent padded className="flex items-center justify-center py-8">
|
||||
<Spinner />
|
||||
</DialogContent>
|
||||
}
|
||||
>
|
||||
<LinkControlDialogContent
|
||||
stateOfApplicabilityId={stateOfApplicabilityId}
|
||||
onUpdate={onUpdateCallback}
|
||||
/>
|
||||
</Suspense>
|
||||
) : null}
|
||||
</Dialog>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,194 @@
|
||||
/**
|
||||
* @generated SignedSource<<100330ea65f9914591271a9a1f78fd2e>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type CreateStateOfApplicabilityControlMappingInput = {
|
||||
applicability: boolean;
|
||||
controlId: string;
|
||||
justification?: string | null | undefined;
|
||||
stateOfApplicabilityId: string;
|
||||
};
|
||||
export type EditControlDialogLinkMutation$variables = {
|
||||
input: CreateStateOfApplicabilityControlMappingInput;
|
||||
};
|
||||
export type EditControlDialogLinkMutation$data = {
|
||||
readonly createStateOfApplicabilityControlMapping: {
|
||||
readonly stateOfApplicabilityControlEdge: {
|
||||
readonly node: {
|
||||
readonly applicability: boolean;
|
||||
readonly controlId: string;
|
||||
readonly justification: string | null | undefined;
|
||||
readonly stateOfApplicabilityId: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
export type EditControlDialogLinkMutation = {
|
||||
response: EditControlDialogLinkMutation$data;
|
||||
variables: EditControlDialogLinkMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
v2 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "stateOfApplicabilityId",
|
||||
"storageKey": null
|
||||
},
|
||||
v3 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "controlId",
|
||||
"storageKey": null
|
||||
},
|
||||
v4 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "applicability",
|
||||
"storageKey": null
|
||||
},
|
||||
v5 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "justification",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "EditControlDialogLinkMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": "CreateStateOfApplicabilityControlMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createStateOfApplicabilityControlMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "StateOfApplicabilityControlEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "stateOfApplicabilityControlEdge",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "StateOfApplicabilityControl",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/),
|
||||
(v4/*: any*/),
|
||||
(v5/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "EditControlDialogLinkMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": "CreateStateOfApplicabilityControlMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createStateOfApplicabilityControlMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "StateOfApplicabilityControlEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "stateOfApplicabilityControlEdge",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "StateOfApplicabilityControl",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/),
|
||||
(v4/*: any*/),
|
||||
(v5/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "e15d97ea6b798532fb82fc577cbccd64",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "EditControlDialogLinkMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation EditControlDialogLinkMutation(\n $input: CreateStateOfApplicabilityControlMappingInput!\n) {\n createStateOfApplicabilityControlMapping(input: $input) {\n stateOfApplicabilityControlEdge {\n node {\n stateOfApplicabilityId\n controlId\n applicability\n justification\n id\n }\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "e7a83ce3daa0051a0b2bb03b0429f2c4";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,194 @@
|
||||
/**
|
||||
* @generated SignedSource<<ab6168a4560a52cdd137c9090c37dacc>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type CreateStateOfApplicabilityControlMappingInput = {
|
||||
applicability: boolean;
|
||||
controlId: string;
|
||||
justification?: string | null | undefined;
|
||||
stateOfApplicabilityId: string;
|
||||
};
|
||||
export type LinkControlDialogLinkMutation$variables = {
|
||||
input: CreateStateOfApplicabilityControlMappingInput;
|
||||
};
|
||||
export type LinkControlDialogLinkMutation$data = {
|
||||
readonly createStateOfApplicabilityControlMapping: {
|
||||
readonly stateOfApplicabilityControlEdge: {
|
||||
readonly node: {
|
||||
readonly applicability: boolean;
|
||||
readonly controlId: string;
|
||||
readonly justification: string | null | undefined;
|
||||
readonly stateOfApplicabilityId: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
export type LinkControlDialogLinkMutation = {
|
||||
response: LinkControlDialogLinkMutation$data;
|
||||
variables: LinkControlDialogLinkMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
v2 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "stateOfApplicabilityId",
|
||||
"storageKey": null
|
||||
},
|
||||
v3 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "controlId",
|
||||
"storageKey": null
|
||||
},
|
||||
v4 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "applicability",
|
||||
"storageKey": null
|
||||
},
|
||||
v5 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "justification",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "LinkControlDialogLinkMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": "CreateStateOfApplicabilityControlMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createStateOfApplicabilityControlMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "StateOfApplicabilityControlEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "stateOfApplicabilityControlEdge",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "StateOfApplicabilityControl",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/),
|
||||
(v4/*: any*/),
|
||||
(v5/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "LinkControlDialogLinkMutation",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": "CreateStateOfApplicabilityControlMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createStateOfApplicabilityControlMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "StateOfApplicabilityControlEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "stateOfApplicabilityControlEdge",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "StateOfApplicabilityControl",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/),
|
||||
(v4/*: any*/),
|
||||
(v5/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "59e215d4f18e0429cbf813aae4db8c94",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "LinkControlDialogLinkMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation LinkControlDialogLinkMutation(\n $input: CreateStateOfApplicabilityControlMappingInput!\n) {\n createStateOfApplicabilityControlMapping(input: $input) {\n stateOfApplicabilityControlEdge {\n node {\n stateOfApplicabilityId\n controlId\n applicability\n justification\n id\n }\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "47757e096c6beeba6be6290a2154f841";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,211 @@
|
||||
/**
|
||||
* @generated SignedSource<<feca91fd2418eba0f5714a2c76346d08>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type LinkControlDialogQuery$variables = {
|
||||
stateOfApplicabilityId: string;
|
||||
};
|
||||
export type LinkControlDialogQuery$data = {
|
||||
readonly node: {
|
||||
readonly availableControls?: ReadonlyArray<{
|
||||
readonly applicability: boolean | null | undefined;
|
||||
readonly controlId: string;
|
||||
readonly frameworkId: string;
|
||||
readonly frameworkName: string;
|
||||
readonly justification: string | null | undefined;
|
||||
readonly name: string;
|
||||
readonly organizationId: string;
|
||||
readonly sectionTitle: string;
|
||||
readonly stateOfApplicabilityId: string | null | undefined;
|
||||
}>;
|
||||
readonly id?: string;
|
||||
};
|
||||
};
|
||||
export type LinkControlDialogQuery = {
|
||||
response: LinkControlDialogQuery$data;
|
||||
variables: LinkControlDialogQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "stateOfApplicabilityId"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "id",
|
||||
"variableName": "stateOfApplicabilityId"
|
||||
}
|
||||
],
|
||||
v2 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
v3 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "AvailableStateOfApplicabilityControl",
|
||||
"kind": "LinkedField",
|
||||
"name": "availableControls",
|
||||
"plural": true,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "controlId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "sectionTitle",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "frameworkId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "frameworkName",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "organizationId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "stateOfApplicabilityId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "applicability",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "justification",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "LinkControlDialogQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"type": "StateOfApplicability",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "LinkControlDialogQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__typename",
|
||||
"storageKey": null
|
||||
},
|
||||
(v2/*: any*/),
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"type": "StateOfApplicability",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "a0d70e15a1236fe0e8626e685ea16a15",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "LinkControlDialogQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query LinkControlDialogQuery(\n $stateOfApplicabilityId: ID!\n) {\n node(id: $stateOfApplicabilityId) {\n __typename\n ... on StateOfApplicability {\n id\n availableControls {\n controlId\n sectionTitle\n name\n frameworkId\n frameworkName\n organizationId\n stateOfApplicabilityId\n applicability\n justification\n }\n }\n id\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "26daf3c064517bdbbf025da7ce5fc30f";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* @generated SignedSource<<3bb4d04e228ac7dbda8ebfb8b7c2567f>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type DeleteStateOfApplicabilityControlMappingInput = {
|
||||
controlId: string;
|
||||
stateOfApplicabilityId: string;
|
||||
};
|
||||
export type LinkControlDialogUnlinkMutation$variables = {
|
||||
input: DeleteStateOfApplicabilityControlMappingInput;
|
||||
};
|
||||
export type LinkControlDialogUnlinkMutation$data = {
|
||||
readonly deleteStateOfApplicabilityControlMapping: {
|
||||
readonly deletedControlId: string;
|
||||
readonly deletedStateOfApplicabilityControlId: string;
|
||||
readonly deletedStateOfApplicabilityId: string;
|
||||
};
|
||||
};
|
||||
export type LinkControlDialogUnlinkMutation = {
|
||||
response: LinkControlDialogUnlinkMutation$data;
|
||||
variables: LinkControlDialogUnlinkMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
"concreteType": "DeleteStateOfApplicabilityControlMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "deleteStateOfApplicabilityControlMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "deletedStateOfApplicabilityId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "deletedControlId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "deletedStateOfApplicabilityControlId",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "LinkControlDialogUnlinkMutation",
|
||||
"selections": (v1/*: any*/),
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "LinkControlDialogUnlinkMutation",
|
||||
"selections": (v1/*: any*/)
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "766d15d5071197ed2907d876caf37995",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "LinkControlDialogUnlinkMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation LinkControlDialogUnlinkMutation(\n $input: DeleteStateOfApplicabilityControlMappingInput!\n) {\n deleteStateOfApplicabilityControlMapping(input: $input) {\n deletedStateOfApplicabilityId\n deletedControlId\n deletedStateOfApplicabilityControlId\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "a184d521b495bf3ff76796530e9eb0e1";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,267 @@
|
||||
import { graphql, useRefetchableFragment } from "react-relay";
|
||||
import { Badge, Table, Tbody, Td, Th, Thead, Tr, Button, IconPlusLarge, IconPencil, IconTrashCan, ActionDropdown, DropdownItem } from "@probo/ui";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import type { StateOfApplicabilityControlsTabFragment$key } from "./__generated__/StateOfApplicabilityControlsTabFragment.graphql";
|
||||
import { Suspense, useMemo, useRef } from "react";
|
||||
import { LinkControlDialog, type LinkControlDialogRef } from "../dialogs/LinkControlDialog";
|
||||
import { EditControlDialog, type EditControlDialogRef } from "../dialogs/EditControlDialog";
|
||||
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
|
||||
import { use } from "react";
|
||||
import { PermissionsContext } from "/providers/PermissionsContext";
|
||||
|
||||
export const controlsFragment = graphql`
|
||||
fragment StateOfApplicabilityControlsTabFragment on StateOfApplicability
|
||||
@refetchable(queryName: "StateOfApplicabilityControlsTabRefetchQuery") {
|
||||
id
|
||||
controlsInfo: controls(first: 0) {
|
||||
totalCount
|
||||
}
|
||||
availableControls {
|
||||
controlId
|
||||
sectionTitle
|
||||
name
|
||||
frameworkId
|
||||
frameworkName
|
||||
organizationId
|
||||
stateOfApplicabilityId
|
||||
applicability
|
||||
justification
|
||||
bestPractice
|
||||
regulatory
|
||||
contractual
|
||||
riskAssessment
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const unlinkControlMutation = graphql`
|
||||
mutation StateOfApplicabilityControlsTabUnlinkMutation($input: DeleteStateOfApplicabilityControlMappingInput!) {
|
||||
deleteStateOfApplicabilityControlMapping(input: $input) {
|
||||
deletedStateOfApplicabilityId
|
||||
deletedControlId
|
||||
deletedStateOfApplicabilityControlId
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function StateOfApplicabilityControlsTab({
|
||||
stateOfApplicability,
|
||||
isSnapshotMode = false,
|
||||
}: {
|
||||
stateOfApplicability: StateOfApplicabilityControlsTabFragment$key & { id: string };
|
||||
isSnapshotMode?: boolean;
|
||||
}) {
|
||||
const { __ } = useTranslate();
|
||||
const [data, refetch] = useRefetchableFragment(controlsFragment, stateOfApplicability);
|
||||
const organizationId = useOrganizationId();
|
||||
const manageDialogRef = useRef<LinkControlDialogRef>(null);
|
||||
const editDialogRef = useRef<EditControlDialogRef>(null);
|
||||
const { isAuthorized } = use(PermissionsContext);
|
||||
|
||||
const linkedControls = useMemo(
|
||||
() => (data.availableControls || []).filter((c) => c.stateOfApplicabilityId !== null),
|
||||
[data.availableControls]
|
||||
);
|
||||
|
||||
const [unlinkControl, isUnlinking] = useMutationWithToasts(
|
||||
unlinkControlMutation,
|
||||
{
|
||||
successMessage: __("Control removed successfully."),
|
||||
errorMessage: __("Failed to remove control"),
|
||||
},
|
||||
);
|
||||
|
||||
const canLink = !isSnapshotMode && isAuthorized("StateOfApplicability", "updateStateOfApplicability");
|
||||
const canUnlink = !isSnapshotMode && isAuthorized("StateOfApplicability", "updateStateOfApplicability");
|
||||
|
||||
const handleOpenManageDialog = () => {
|
||||
manageDialogRef.current?.open(data.id, () => {
|
||||
refetch({}, { fetchPolicy: "store-and-network" });
|
||||
});
|
||||
};
|
||||
|
||||
const handleOpenEditDialog = (control: {
|
||||
controlId: string;
|
||||
sectionTitle: string;
|
||||
name: string;
|
||||
frameworkName: string;
|
||||
applicability: boolean;
|
||||
justification: string | null;
|
||||
}) => {
|
||||
editDialogRef.current?.open({
|
||||
stateOfApplicabilityId: data.id,
|
||||
controlId: control.controlId,
|
||||
sectionTitle: control.sectionTitle,
|
||||
name: control.name,
|
||||
frameworkName: control.frameworkName,
|
||||
applicability: control.applicability,
|
||||
justification: control.justification,
|
||||
});
|
||||
};
|
||||
|
||||
const handleUnlink = (controlId: string) => {
|
||||
unlinkControl({
|
||||
variables: {
|
||||
input: {
|
||||
stateOfApplicabilityId: data.id,
|
||||
controlId,
|
||||
},
|
||||
},
|
||||
onSuccess: () => {
|
||||
refetch({}, { fetchPolicy: "network-only" });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
{canLink && (
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
icon={IconPlusLarge}
|
||||
onClick={handleOpenManageDialog}
|
||||
>
|
||||
{__("Add Controls")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Table>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th className="w-32">{__("Framework")}</Th>
|
||||
<Th>{__("Control")}</Th>
|
||||
<Th className="w-28 text-center">{__("Applicability")}</Th>
|
||||
<Th className="min-w-48">{__("Justification")}</Th>
|
||||
<Th className="w-24 text-center">{__("Regulatory")}</Th>
|
||||
<Th className="w-24 text-center">{__("Contractual")}</Th>
|
||||
<Th className="w-32 text-center">{__("Best Practice")}</Th>
|
||||
<Th className="w-36 text-center">{__("Risk Assessment")}</Th>
|
||||
{(canLink || canUnlink) && <Th className="w-12"></Th>}
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{linkedControls.length === 0 && (
|
||||
<Tr>
|
||||
<Td colSpan={canLink || canUnlink ? 9 : 8} className="text-center text-txt-secondary py-12">
|
||||
{__("No controls linked")}
|
||||
</Td>
|
||||
</Tr>
|
||||
)}
|
||||
{linkedControls.map((control) => (
|
||||
<Tr
|
||||
key={control.controlId}
|
||||
to={`/organizations/${organizationId}/frameworks/${control.frameworkId}/controls/${control.controlId}`}
|
||||
>
|
||||
<Td className="font-medium text-txt-secondary">{control.frameworkName}</Td>
|
||||
<Td>
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs font-medium text-txt-tertiary">{control.sectionTitle}</div>
|
||||
<div className="text-sm">{control.name}</div>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex justify-center">
|
||||
{control.applicability !== null ? (
|
||||
<Badge variant={control.applicability ? "success" : "danger"} size="sm">
|
||||
{control.applicability ? __("Yes") : __("No")}
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-txt-tertiary">-</span>
|
||||
)}
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="text-sm text-txt-secondary line-clamp-2">
|
||||
{control.justification || <span className="text-txt-tertiary italic">-</span>}
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex justify-center">
|
||||
<Badge variant={control.regulatory ? "success" : "danger"} size="sm">
|
||||
{control.regulatory ? __("Yes") : __("No")}
|
||||
</Badge>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex justify-center">
|
||||
<Badge variant={control.contractual ? "success" : "danger"} size="sm">
|
||||
{control.contractual ? __("Yes") : __("No")}
|
||||
</Badge>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex justify-center">
|
||||
<Badge variant={control.bestPractice ? "success" : "danger"} size="sm">
|
||||
{control.bestPractice ? __("Yes") : __("No")}
|
||||
</Badge>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex justify-center">
|
||||
<Badge variant={control.riskAssessment ? "success" : "danger"} size="sm">
|
||||
{control.riskAssessment ? __("Yes") : __("No")}
|
||||
</Badge>
|
||||
</div>
|
||||
</Td>
|
||||
{(canLink || canUnlink) && (
|
||||
<Td noLink className="text-end">
|
||||
<ActionDropdown>
|
||||
{canLink && (
|
||||
<DropdownItem
|
||||
icon={IconPencil}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (typeof control.applicability === 'boolean') {
|
||||
handleOpenEditDialog({
|
||||
controlId: control.controlId,
|
||||
sectionTitle: control.sectionTitle,
|
||||
name: control.name,
|
||||
frameworkName: control.frameworkName,
|
||||
applicability: control.applicability,
|
||||
justification: control.justification ?? null,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
{__("Edit")}
|
||||
</DropdownItem>
|
||||
)}
|
||||
{canUnlink && (
|
||||
<DropdownItem
|
||||
icon={IconTrashCan}
|
||||
variant="danger"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleUnlink(control.controlId);
|
||||
}}
|
||||
disabled={isUnlinking}
|
||||
>
|
||||
{__("Remove")}
|
||||
</DropdownItem>
|
||||
)}
|
||||
</ActionDropdown>
|
||||
</Td>
|
||||
)}
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<Suspense fallback={null}>
|
||||
<LinkControlDialog ref={manageDialogRef} />
|
||||
<EditControlDialog
|
||||
ref={editDialogRef}
|
||||
onSuccess={() => {
|
||||
refetch({}, { fetchPolicy: "network-only" });
|
||||
}}
|
||||
/>
|
||||
</Suspense>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { useOutletContext } from "react-router";
|
||||
import { Card, Field } from "@probo/ui";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { formatDate } from "@probo/helpers";
|
||||
import type { StateOfApplicabilityGraphNodeQuery$data } from "/hooks/graph/__generated__/StateOfApplicabilityGraphNodeQuery.graphql";
|
||||
|
||||
type StateOfApplicabilityNode = NonNullable<StateOfApplicabilityGraphNodeQuery$data["node"]>;
|
||||
|
||||
export default function StateOfApplicabilityOverviewTab() {
|
||||
const { stateOfApplicability } = useOutletContext<{
|
||||
stateOfApplicability: StateOfApplicabilityNode;
|
||||
}>();
|
||||
const { __ } = useTranslate();
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-base font-medium">{__("State of Applicability details")}</h2>
|
||||
<Card className="space-y-4" padded>
|
||||
<Field
|
||||
label={__("Name")}
|
||||
value={stateOfApplicability.name}
|
||||
disabled
|
||||
/>
|
||||
{stateOfApplicability.sourceId && (
|
||||
<Field
|
||||
label={__("Source")}
|
||||
value={stateOfApplicability.sourceId}
|
||||
disabled
|
||||
/>
|
||||
)}
|
||||
{stateOfApplicability.snapshotId && (
|
||||
<Field
|
||||
label={__("Snapshot")}
|
||||
value={stateOfApplicability.snapshotId}
|
||||
disabled
|
||||
/>
|
||||
)}
|
||||
<Field
|
||||
label={__("Created at")}
|
||||
value={formatDate(stateOfApplicability.createdAt)}
|
||||
disabled
|
||||
/>
|
||||
<Field
|
||||
label={__("Updated at")}
|
||||
value={formatDate(stateOfApplicability.updatedAt)}
|
||||
disabled
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
/**
|
||||
* @generated SignedSource<<306449631752d4277aa96b77601e2d8f>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ReaderFragment } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type StateOfApplicabilityControlsTabFragment$data = {
|
||||
readonly availableControls: ReadonlyArray<{
|
||||
readonly applicability: boolean | null | undefined;
|
||||
readonly bestPractice: boolean;
|
||||
readonly contractual: boolean;
|
||||
readonly controlId: string;
|
||||
readonly frameworkId: string;
|
||||
readonly frameworkName: string;
|
||||
readonly justification: string | null | undefined;
|
||||
readonly name: string;
|
||||
readonly organizationId: string;
|
||||
readonly regulatory: boolean;
|
||||
readonly riskAssessment: boolean;
|
||||
readonly sectionTitle: string;
|
||||
readonly stateOfApplicabilityId: string | null | undefined;
|
||||
}>;
|
||||
readonly controlsInfo: {
|
||||
readonly totalCount: number;
|
||||
};
|
||||
readonly id: string;
|
||||
readonly " $fragmentType": "StateOfApplicabilityControlsTabFragment";
|
||||
};
|
||||
export type StateOfApplicabilityControlsTabFragment$key = {
|
||||
readonly " $data"?: StateOfApplicabilityControlsTabFragment$data;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"StateOfApplicabilityControlsTabFragment">;
|
||||
};
|
||||
|
||||
import StateOfApplicabilityControlsTabRefetchQuery_graphql from './StateOfApplicabilityControlsTabRefetchQuery.graphql';
|
||||
|
||||
const node: ReaderFragment = {
|
||||
"argumentDefinitions": [],
|
||||
"kind": "Fragment",
|
||||
"metadata": {
|
||||
"refetch": {
|
||||
"connection": null,
|
||||
"fragmentPathInResult": [
|
||||
"node"
|
||||
],
|
||||
"operation": StateOfApplicabilityControlsTabRefetchQuery_graphql,
|
||||
"identifierInfo": {
|
||||
"identifierField": "id",
|
||||
"identifierQueryVariableName": "id"
|
||||
}
|
||||
}
|
||||
},
|
||||
"name": "StateOfApplicabilityControlsTabFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": "controlsInfo",
|
||||
"args": [
|
||||
{
|
||||
"kind": "Literal",
|
||||
"name": "first",
|
||||
"value": 0
|
||||
}
|
||||
],
|
||||
"concreteType": "ControlConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "controls",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "totalCount",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": "controls(first:0)"
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "AvailableStateOfApplicabilityControl",
|
||||
"kind": "LinkedField",
|
||||
"name": "availableControls",
|
||||
"plural": true,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "controlId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "sectionTitle",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "frameworkId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "frameworkName",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "organizationId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "stateOfApplicabilityId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "applicability",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "justification",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "bestPractice",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "regulatory",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "contractual",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "riskAssessment",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "StateOfApplicability",
|
||||
"abstractKey": null
|
||||
};
|
||||
|
||||
(node as any).hash = "e72695289b29d1a4b60e3f7c18ba1165";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,247 @@
|
||||
/**
|
||||
* @generated SignedSource<<06d34888ed5b3e0d66f2159e1a916196>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type StateOfApplicabilityControlsTabRefetchQuery$variables = {
|
||||
id: string;
|
||||
};
|
||||
export type StateOfApplicabilityControlsTabRefetchQuery$data = {
|
||||
readonly node: {
|
||||
readonly " $fragmentSpreads": FragmentRefs<"StateOfApplicabilityControlsTabFragment">;
|
||||
};
|
||||
};
|
||||
export type StateOfApplicabilityControlsTabRefetchQuery = {
|
||||
response: StateOfApplicabilityControlsTabRefetchQuery$data;
|
||||
variables: StateOfApplicabilityControlsTabRefetchQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "id"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "id",
|
||||
"variableName": "id"
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "StateOfApplicabilityControlsTabRefetchQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"args": null,
|
||||
"kind": "FragmentSpread",
|
||||
"name": "StateOfApplicabilityControlsTabFragment"
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "StateOfApplicabilityControlsTabRefetchQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v1/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__typename",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "controlsInfo",
|
||||
"args": [
|
||||
{
|
||||
"kind": "Literal",
|
||||
"name": "first",
|
||||
"value": 0
|
||||
}
|
||||
],
|
||||
"concreteType": "ControlConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "controls",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "totalCount",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": "controls(first:0)"
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "AvailableStateOfApplicabilityControl",
|
||||
"kind": "LinkedField",
|
||||
"name": "availableControls",
|
||||
"plural": true,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "controlId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "sectionTitle",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "frameworkId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "frameworkName",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "organizationId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "stateOfApplicabilityId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "applicability",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "justification",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "bestPractice",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "regulatory",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "contractual",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "riskAssessment",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "StateOfApplicability",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "50874b763d9f2cfc01d097ec9b68ec82",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "StateOfApplicabilityControlsTabRefetchQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query StateOfApplicabilityControlsTabRefetchQuery(\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...StateOfApplicabilityControlsTabFragment\n id\n }\n}\n\nfragment StateOfApplicabilityControlsTabFragment on StateOfApplicability {\n id\n controlsInfo: controls(first: 0) {\n totalCount\n }\n availableControls {\n controlId\n sectionTitle\n name\n frameworkId\n frameworkName\n organizationId\n stateOfApplicabilityId\n applicability\n justification\n bestPractice\n regulatory\n contractual\n riskAssessment\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "e72695289b29d1a4b60e3f7c18ba1165";
|
||||
|
||||
export default node;
|
||||
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* @generated SignedSource<<a9742800c22e683eb17d46d52b7d6aa5>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type DeleteStateOfApplicabilityControlMappingInput = {
|
||||
controlId: string;
|
||||
stateOfApplicabilityId: string;
|
||||
};
|
||||
export type StateOfApplicabilityControlsTabUnlinkMutation$variables = {
|
||||
input: DeleteStateOfApplicabilityControlMappingInput;
|
||||
};
|
||||
export type StateOfApplicabilityControlsTabUnlinkMutation$data = {
|
||||
readonly deleteStateOfApplicabilityControlMapping: {
|
||||
readonly deletedControlId: string;
|
||||
readonly deletedStateOfApplicabilityControlId: string;
|
||||
readonly deletedStateOfApplicabilityId: string;
|
||||
};
|
||||
};
|
||||
export type StateOfApplicabilityControlsTabUnlinkMutation = {
|
||||
response: StateOfApplicabilityControlsTabUnlinkMutation$data;
|
||||
variables: StateOfApplicabilityControlsTabUnlinkMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
"concreteType": "DeleteStateOfApplicabilityControlMappingPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "deleteStateOfApplicabilityControlMapping",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "deletedStateOfApplicabilityId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "deletedControlId",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "deletedStateOfApplicabilityControlId",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "StateOfApplicabilityControlsTabUnlinkMutation",
|
||||
"selections": (v1/*: any*/),
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "StateOfApplicabilityControlsTabUnlinkMutation",
|
||||
"selections": (v1/*: any*/)
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "6bf3ac32bd032b215e3e4f48100353d7",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "StateOfApplicabilityControlsTabUnlinkMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation StateOfApplicabilityControlsTabUnlinkMutation(\n $input: DeleteStateOfApplicabilityControlMappingInput!\n) {\n deleteStateOfApplicabilityControlMapping(input: $input) {\n deletedStateOfApplicabilityId\n deletedControlId\n deletedStateOfApplicabilityControlId\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "b8c3e0ca44bde75468fcfab09151854d";
|
||||
|
||||
export default node;
|
||||
Reference in New Issue
Block a user