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

Add risk snapshots

Browse Source 
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
2025-09-02 18:52:07 +02:00
parent 781026d3e7
commit 16ced9638d
22 changed files with 639 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/console/src/components/SnapshotBanner.tsx
View File

@@ -3,7 +3,7 @@ import { useTranslate } from "@probo/i18n";
import { useLazyLoadQuery, graphql } from "react-relay";
import { useLocation } from "react-router";
import type { SnapshotBannerQuery } from "./__generated__/SnapshotBannerQuery.graphql";
import { getSnapshotTypeUrlPath } from "@probo/helpers";
import { getSnapshotTypeUrlPath, getSnapshotTypeLabel, sprintf } from "@probo/helpers";
const snapshotQuery = graphql`
query SnapshotBannerQuery($snapshotId: ID!) {
@@ -50,7 +50,11 @@ export function SnapshotBanner({ snapshotId }: Props) {
<span className="font-medium text-warning-800">{__("Snapshot")} {snapshot.name}</span>
</div>
<p className="text-sm text-warning-700">
{__("You are viewing a snapshot from")} {dateFormat(snapshot.createdAt, { year: "numeric", month: "short", day: "numeric" })}
{sprintf(
__("You are viewing a %s snapshot from %s"),
getSnapshotTypeLabel(__, snapshot.type).toLocaleLowerCase(),
dateFormat(snapshot.createdAt, { year: "numeric", month: "short", day: "numeric" })
)}
</p>
</div>
</div>

14
apps/console/src/hooks/graph/RiskGraph.ts
View File

@@ -31,10 +31,10 @@ export function useDeleteRiskMutation() {
}
export const risksQuery = graphql`
query RiskGraphListQuery($organizationId: ID!) {
query RiskGraphListQuery($organizationId: ID!, $snapshotId: ID) {
organization: node(id: $organizationId) {
id
...RiskGraphFragment
...RiskGraphFragment @arguments(snapshotId: $snapshotId)
}
}
`;
@@ -48,6 +48,7 @@ const risksFragment = graphql`
after: { type: "CursorKey", defaultValue: null }
before: { type: "CursorKey", defaultValue: null }
last: { type: "Int", defaultValue: null }
snapshotId: { type: "ID", defaultValue: null }
) {
risks(
first: $first
@@ -55,10 +56,12 @@ const risksFragment = graphql`
last: $last
before: $before
orderBy: $order
) @connection(key: "RisksListQuery_risks") {
filter: { snapshotId: $snapshotId }
) @connection(key: "RisksListQuery_risks", filters: ["filter"]) {
edges {
node {
id
snapshotId
name
category
treatment
@@ -77,7 +80,7 @@ const risksFragment = graphql`
export const RisksConnectionKey = "RisksListQuery_risks";
export function useRisksQuery(queryRef: PreloadedQuery<RiskGraphListQuery>) {
export function useRisksQuery(queryRef: PreloadedQuery<RiskGraphListQuery>, snapshotId?: string | null) {
const data = usePreloadedQuery(risksQuery, queryRef);
const [dataFragment, refetch] = useRefetchableFragment(
risksFragment,
@@ -90,6 +93,7 @@ export function useRisksQuery(queryRef: PreloadedQuery<RiskGraphListQuery>) {
connectionId: ConnectionHandler.getConnectionID(
data.organization.id,
RisksConnectionKey,
{ filter: { snapshotId: snapshotId || null } }
),
};
}
@@ -98,6 +102,8 @@ export const riskNodeQuery = graphql`
query RiskGraphNodeQuery($riskId: ID!) {
node(id: $riskId) {
... on Risk {
id
snapshotId
name
description
treatment

29
apps/console/src/hooks/graph/__generated__/RiskGraphFragment.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<d65dc38bcf11079a304f8a5cc4070389>>
* @generated SignedSource<<2b964bdee12b49230932678f583c7401>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -25,6 +25,7 @@ export type RiskGraphFragment$data = {
readonly residualImpact: number;
readonly residualLikelihood: number;
readonly residualRiskScore: number;
readonly snapshotId: string | null | undefined;
readonly treatment: RiskTreatment;
readonly " $fragmentSpreads": FragmentRefs<"useRiskFormFragment">;
};
@@ -76,6 +77,11 @@ return {
"defaultValue": null,
"kind": "LocalArgument",
"name": "order"
},
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "snapshotId"
}
],
"kind": "Fragment",
@@ -116,9 +122,15 @@ return {
"alias": "risks",
"args": [
{
"kind": "Variable",
"name": "orderBy",
"variableName": "order"
"fields": [
{
"kind": "Variable",
"name": "snapshotId",
"variableName": "snapshotId"
}
],
"kind": "ObjectValue",
"name": "filter"
}
],
"concreteType": "RiskConnection",
@@ -143,6 +155,13 @@ return {
"plural": false,
"selections": [
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "snapshotId",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -280,6 +299,6 @@ return {
};
})();
(node as any).hash = "dc662098b9aceaa2400f4656ed1b2d01";
(node as any).hash = "95c68a022cbf075eede9b7417393a369";
export default node;

51
apps/console/src/hooks/graph/__generated__/RiskGraphListQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<8ae6d82b30ec5657f8a55bd47fab4e7e>>
* @generated SignedSource<<af89b7b79cdb083497eabebd82b51991>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -12,6 +12,7 @@ import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type RiskGraphListQuery$variables = {
organizationId: string;
snapshotId?: string | null | undefined;
};
export type RiskGraphListQuery$data = {
readonly organization: {
@@ -30,6 +31,11 @@ var v0 = [
"defaultValue": null,
"kind": "LocalArgument",
"name": "organizationId"
},
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "snapshotId"
}
],
v1 = [
@@ -46,14 +52,26 @@ v2 = {
"name": "id",
"storageKey": null
},
v3 = {
v3 = [
{
"kind": "Variable",
"name": "snapshotId",
"variableName": "snapshotId"
}
],
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v4 = [
v5 = [
{
"fields": (v3/*: any*/),
"kind": "ObjectValue",
"name": "filter"
},
{
"kind": "Literal",
"name": "first",
@@ -77,7 +95,7 @@ return {
"selections": [
(v2/*: any*/),
{
"args": null,
"args": (v3/*: any*/),
"kind": "FragmentSpread",
"name": "RiskGraphFragment"
}
@@ -102,14 +120,14 @@ return {
"name": "node",
"plural": false,
"selections": [
(v3/*: any*/),
(v4/*: any*/),
(v2/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v4/*: any*/),
"args": (v5/*: any*/),
"concreteType": "RiskConnection",
"kind": "LinkedField",
"name": "risks",
@@ -132,6 +150,13 @@ return {
"plural": false,
"selections": [
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "snapshotId",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -221,7 +246,7 @@ return {
],
"storageKey": null
},
(v3/*: any*/)
(v4/*: any*/)
],
"storageKey": null
},
@@ -275,13 +300,13 @@ return {
"storageKey": null
}
],
"storageKey": "risks(first:50)"
"storageKey": null
},
{
"alias": null,
"args": (v4/*: any*/),
"args": (v5/*: any*/),
"filters": [
"orderBy"
"filter"
],
"handle": "connection",
"key": "RisksListQuery_risks",
@@ -298,16 +323,16 @@ return {
]
},
"params": {
"cacheID": "36e237e142f201c74ebc23ff46d7345a",
"cacheID": "b2114c476ed7e095fc9d2317b6b1c554",
"id": null,
"metadata": {},
"name": "RiskGraphListQuery",
"operationKind": "query",
"text": "query RiskGraphListQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n id\n ...RiskGraphFragment\n }\n}\n\nfragment RiskGraphFragment on Organization {\n risks(first: 50) {\n edges {\n node {\n id\n name\n category\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n inherentRiskScore\n residualRiskScore\n ...useRiskFormFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n\nfragment useRiskFormFragment on Risk {\n id\n name\n category\n description\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n note\n owner {\n id\n }\n}\n"
"text": "query RiskGraphListQuery(\n $organizationId: ID!\n $snapshotId: ID\n) {\n organization: node(id: $organizationId) {\n __typename\n id\n ...RiskGraphFragment_3iomuz\n }\n}\n\nfragment RiskGraphFragment_3iomuz on Organization {\n risks(first: 50, filter: {snapshotId: $snapshotId}) {\n edges {\n node {\n id\n snapshotId\n name\n category\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n inherentRiskScore\n residualRiskScore\n ...useRiskFormFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n\nfragment useRiskFormFragment on Risk {\n id\n name\n category\n description\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n note\n owner {\n id\n }\n}\n"
}
};
})();
(node as any).hash = "5d41ad11b598f63829f481ff0ae8aec7";
(node as any).hash = "a6e146d7d0f9d2713796935d0d615311";
export default node;

136
apps/console/src/hooks/graph/__generated__/RiskGraphNodeQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<a4b7866dde478255ad0bb04a93ada596>>
* @generated SignedSource<<494ff8512e4a50c2bbc2cb3453dbab1c>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -23,6 +23,7 @@ export type RiskGraphNodeQuery$data = {
readonly documentsInfo?: {
readonly totalCount: number;
};
readonly id?: string;
readonly inherentRiskScore?: number;
readonly measuresInfo?: {
readonly totalCount: number;
@@ -34,6 +35,7 @@ export type RiskGraphNodeQuery$data = {
readonly id: string;
} | null | undefined;
readonly residualRiskScore?: number;
readonly snapshotId?: string | null | undefined;
readonly treatment?: RiskTreatment;
readonly " $fragmentSpreads": FragmentRefs<"RiskControlsTabFragment" | "RiskDocumentsTabFragment" | "RiskMeasuresTabFragment" | "RiskOverviewTabFragment" | "useRiskFormFragment">;
};
@@ -62,31 +64,38 @@ v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"name": "id",
"storageKey": null
},
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"name": "snapshotId",
"storageKey": null
},
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "treatment",
"name": "name",
"storageKey": null
},
v5 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"name": "description",
"storageKey": null
},
v6 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "treatment",
"storageKey": null
},
v7 = {
"alias": null,
"args": null,
"concreteType": "People",
@@ -94,7 +103,7 @@ v6 = {
"name": "owner",
"plural": false,
"selections": [
(v5/*: any*/),
(v2/*: any*/),
{
"alias": null,
"args": null,
@@ -105,35 +114,35 @@ v6 = {
],
"storageKey": null
},
v7 = {
v8 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "note",
"storageKey": null
},
v8 = {
v9 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentRiskScore",
"storageKey": null
},
v9 = {
v10 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualRiskScore",
"storageKey": null
},
v10 = [
v11 = [
{
"kind": "Literal",
"name": "first",
"value": 0
}
],
v11 = [
v12 = [
{
"alias": null,
"args": null,
@@ -142,72 +151,72 @@ v11 = [
"storageKey": null
}
],
v12 = {
v13 = {
"alias": "measuresInfo",
"args": (v10/*: any*/),
"args": (v11/*: any*/),
"concreteType": "MeasureConnection",
"kind": "LinkedField",
"name": "measures",
"plural": false,
"selections": (v11/*: any*/),
"selections": (v12/*: any*/),
"storageKey": "measures(first:0)"
},
v13 = {
v14 = {
"alias": "documentsInfo",
"args": (v10/*: any*/),
"args": (v11/*: any*/),
"concreteType": "DocumentConnection",
"kind": "LinkedField",
"name": "documents",
"plural": false,
"selections": (v11/*: any*/),
"selections": (v12/*: any*/),
"storageKey": "documents(first:0)"
},
v14 = {
v15 = {
"alias": "controlsInfo",
"args": (v10/*: any*/),
"args": (v11/*: any*/),
"concreteType": "ControlConnection",
"kind": "LinkedField",
"name": "controls",
"plural": false,
"selections": (v11/*: any*/),
"selections": (v12/*: any*/),
"storageKey": "controls(first:0)"
},
v15 = {
v16 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v16 = [
v17 = [
{
"kind": "Literal",
"name": "first",
"value": 100
}
],
v17 = {
v18 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
},
v18 = {
v19 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
v19 = {
v20 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
},
v20 = {
v21 = {
"alias": null,
"args": null,
"concreteType": "PageInfo",
@@ -215,12 +224,12 @@ v20 = {
"name": "pageInfo",
"plural": false,
"selections": [
(v18/*: any*/),
(v19/*: any*/)
(v19/*: any*/),
(v20/*: any*/)
],
"storageKey": null
},
v21 = {
v22 = {
"kind": "ClientExtension",
"selections": [
{
@@ -232,7 +241,7 @@ v21 = {
}
]
},
v22 = [
v23 = [
{
"kind": "Literal",
"name": "first",
@@ -260,13 +269,15 @@ return {
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
(v7/*: any*/),
(v8/*: any*/),
(v9/*: any*/),
(v12/*: any*/),
(v10/*: any*/),
(v13/*: any*/),
(v14/*: any*/),
(v15/*: any*/),
{
"args": null,
"kind": "FragmentSpread",
@@ -317,21 +328,22 @@ return {
"name": "node",
"plural": false,
"selections": [
(v15/*: any*/),
(v5/*: any*/),
(v16/*: any*/),
(v2/*: any*/),
{
"kind": "InlineFragment",
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
(v7/*: any*/),
(v8/*: any*/),
(v9/*: any*/),
(v12/*: any*/),
(v10/*: any*/),
(v13/*: any*/),
(v14/*: any*/),
(v15/*: any*/),
{
"alias": null,
"args": null,
@@ -369,7 +381,7 @@ return {
},
{
"alias": null,
"args": (v16/*: any*/),
"args": (v17/*: any*/),
"concreteType": "MeasureConnection",
"kind": "LinkedField",
"name": "measures",
@@ -391,8 +403,8 @@ return {
"name": "node",
"plural": false,
"selections": [
(v5/*: any*/),
(v2/*: any*/),
(v4/*: any*/),
{
"alias": null,
"args": null,
@@ -400,22 +412,22 @@ return {
"name": "state",
"storageKey": null
},
(v15/*: any*/)
(v16/*: any*/)
],
"storageKey": null
},
(v17/*: any*/)
(v18/*: any*/)
],
"storageKey": null
},
(v20/*: any*/),
(v21/*: any*/)
(v21/*: any*/),
(v22/*: any*/)
],
"storageKey": "measures(first:100)"
},
{
"alias": null,
"args": (v16/*: any*/),
"args": (v17/*: any*/),
"filters": null,
"handle": "connection",
"key": "Risk__measures",
@@ -424,7 +436,7 @@ return {
},
{
"alias": null,
"args": (v16/*: any*/),
"args": (v17/*: any*/),
"concreteType": "DocumentConnection",
"kind": "LinkedField",
"name": "documents",
@@ -446,7 +458,7 @@ return {
"name": "node",
"plural": false,
"selections": [
(v5/*: any*/),
(v2/*: any*/),
{
"alias": null,
"args": null,
@@ -498,7 +510,7 @@ return {
"name": "node",
"plural": false,
"selections": [
(v5/*: any*/),
(v2/*: any*/),
{
"alias": null,
"args": null,
@@ -515,22 +527,22 @@ return {
],
"storageKey": "versions(first:1)"
},
(v15/*: any*/)
(v16/*: any*/)
],
"storageKey": null
},
(v17/*: any*/)
(v18/*: any*/)
],
"storageKey": null
},
(v20/*: any*/),
(v21/*: any*/)
(v21/*: any*/),
(v22/*: any*/)
],
"storageKey": "documents(first:100)"
},
{
"alias": null,
"args": (v16/*: any*/),
"args": (v17/*: any*/),
"filters": null,
"handle": "connection",
"key": "Risk__documents",
@@ -539,7 +551,7 @@ return {
},
{
"alias": null,
"args": (v22/*: any*/),
"args": (v23/*: any*/),
"concreteType": "ControlConnection",
"kind": "LinkedField",
"name": "controls",
@@ -561,7 +573,7 @@ return {
"name": "node",
"plural": false,
"selections": [
(v5/*: any*/),
(v2/*: any*/),
{
"alias": null,
"args": null,
@@ -569,7 +581,7 @@ return {
"name": "sectionTitle",
"storageKey": null
},
(v2/*: any*/),
(v4/*: any*/),
{
"alias": null,
"args": null,
@@ -578,16 +590,16 @@ return {
"name": "framework",
"plural": false,
"selections": [
(v5/*: any*/),
(v2/*: any*/)
(v2/*: any*/),
(v4/*: any*/)
],
"storageKey": null
},
(v15/*: any*/)
(v16/*: any*/)
],
"storageKey": null
},
(v17/*: any*/)
(v18/*: any*/)
],
"storageKey": null
},
@@ -599,8 +611,8 @@ return {
"name": "pageInfo",
"plural": false,
"selections": [
(v18/*: any*/),
(v19/*: any*/),
(v20/*: any*/),
{
"alias": null,
"args": null,
@@ -623,7 +635,7 @@ return {
},
{
"alias": null,
"args": (v22/*: any*/),
"args": (v23/*: any*/),
"filters": [
"orderBy",
"filter"
@@ -643,16 +655,16 @@ return {
]
},
"params": {
"cacheID": "5cb3fdf2f48c4b0d2714a06ac2a8fc4d",
"cacheID": "03ef938803c52b572e23e691d50c4188",
"id": null,
"metadata": {},
"name": "RiskGraphNodeQuery",
"operationKind": "query",
"text": "query RiskGraphNodeQuery(\n $riskId: ID!\n) {\n node(id: $riskId) {\n __typename\n ... on Risk {\n name\n description\n treatment\n owner {\n id\n fullName\n }\n note\n inherentRiskScore\n residualRiskScore\n measuresInfo: measures(first: 0) {\n totalCount\n }\n documentsInfo: documents(first: 0) {\n totalCount\n }\n controlsInfo: controls(first: 0) {\n totalCount\n }\n ...useRiskFormFragment\n ...RiskOverviewTabFragment\n ...RiskMeasuresTabFragment\n ...RiskDocumentsTabFragment\n ...RiskControlsTabFragment\n }\n id\n }\n}\n\nfragment LinkedDocumentsCardFragment on Document {\n id\n title\n createdAt\n documentType\n versions(first: 1) {\n edges {\n node {\n id\n status\n }\n }\n }\n}\n\nfragment LinkedMeasuresCardFragment on Measure {\n id\n name\n state\n}\n\nfragment RiskControlsTabFragment on Risk {\n id\n controls(first: 20) {\n edges {\n node {\n id\n sectionTitle\n name\n framework {\n id\n name\n }\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}\n\nfragment RiskDocumentsTabFragment on Risk {\n id\n documents(first: 100) {\n edges {\n node {\n id\n ...LinkedDocumentsCardFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n\nfragment RiskMeasuresTabFragment on Risk {\n id\n measures(first: 100) {\n edges {\n node {\n id\n ...LinkedMeasuresCardFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n\nfragment RiskOverviewTabFragment on Risk {\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n inherentRiskScore\n residualRiskScore\n}\n\nfragment useRiskFormFragment on Risk {\n id\n name\n category\n description\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n note\n owner {\n id\n }\n}\n"
"text": "query RiskGraphNodeQuery(\n $riskId: ID!\n) {\n node(id: $riskId) {\n __typename\n ... on Risk {\n id\n snapshotId\n name\n description\n treatment\n owner {\n id\n fullName\n }\n note\n inherentRiskScore\n residualRiskScore\n measuresInfo: measures(first: 0) {\n totalCount\n }\n documentsInfo: documents(first: 0) {\n totalCount\n }\n controlsInfo: controls(first: 0) {\n totalCount\n }\n ...useRiskFormFragment\n ...RiskOverviewTabFragment\n ...RiskMeasuresTabFragment\n ...RiskDocumentsTabFragment\n ...RiskControlsTabFragment\n }\n id\n }\n}\n\nfragment LinkedDocumentsCardFragment on Document {\n id\n title\n createdAt\n documentType\n versions(first: 1) {\n edges {\n node {\n id\n status\n }\n }\n }\n}\n\nfragment LinkedMeasuresCardFragment on Measure {\n id\n name\n state\n}\n\nfragment RiskControlsTabFragment on Risk {\n id\n controls(first: 20) {\n edges {\n node {\n id\n sectionTitle\n name\n framework {\n id\n name\n }\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}\n\nfragment RiskDocumentsTabFragment on Risk {\n id\n documents(first: 100) {\n edges {\n node {\n id\n ...LinkedDocumentsCardFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n\nfragment RiskMeasuresTabFragment on Risk {\n id\n measures(first: 100) {\n edges {\n node {\n id\n ...LinkedMeasuresCardFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n\nfragment RiskOverviewTabFragment on Risk {\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n inherentRiskScore\n residualRiskScore\n}\n\nfragment useRiskFormFragment on Risk {\n id\n name\n category\n description\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n note\n owner {\n id\n }\n}\n"
}
};
})();
(node as any).hash = "a190e4ead5b381da07e69f00650d8372";
(node as any).hash = "43dcdf60f1d1b28414650fe5f9294faa";
export default node;

80
apps/console/src/hooks/graph/__generated__/RisksListQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<6369aba92b58ca2a67d57110a829bde4>>
* @generated SignedSource<<4a0922eabd4e20c574db91e75f45a562>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -23,6 +23,7 @@ export type RisksListQuery$variables = {
id: string;
last?: number | null | undefined;
order?: RiskOrder | null | undefined;
snapshotId?: string | null | undefined;
};
export type RisksListQuery$data = {
readonly node: {
@@ -65,52 +66,69 @@ v5 = {
"kind": "LocalArgument",
"name": "order"
},
v6 = [
v6 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "snapshotId"
},
v7 = [
{
"kind": "Variable",
"name": "id",
"variableName": "id"
}
],
v7 = {
v8 = {
"kind": "Variable",
"name": "after",
"variableName": "after"
},
v8 = {
v9 = {
"kind": "Variable",
"name": "before",
"variableName": "before"
},
v9 = {
v10 = {
"kind": "Variable",
"name": "first",
"variableName": "first"
},
v10 = {
v11 = {
"kind": "Variable",
"name": "last",
"variableName": "last"
},
v11 = {
v12 = {
"kind": "Variable",
"name": "snapshotId",
"variableName": "snapshotId"
},
v13 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v12 = {
v14 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v13 = [
(v7/*: any*/),
v15 = [
(v8/*: any*/),
(v9/*: any*/),
{
"fields": [
(v12/*: any*/)
],
"kind": "ObjectValue",
"name": "filter"
},
(v10/*: any*/),
(v11/*: any*/),
{
"kind": "Variable",
"name": "orderBy",
@@ -125,7 +143,8 @@ return {
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/)
(v5/*: any*/),
(v6/*: any*/)
],
"kind": "Fragment",
"metadata": null,
@@ -133,7 +152,7 @@ return {
"selections": [
{
"alias": null,
"args": (v6/*: any*/),
"args": (v7/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
@@ -141,15 +160,16 @@ return {
"selections": [
{
"args": [
(v7/*: any*/),
(v8/*: any*/),
(v9/*: any*/),
(v10/*: any*/),
(v11/*: any*/),
{
"kind": "Variable",
"name": "order",
"variableName": "order"
}
},
(v12/*: any*/)
],
"kind": "FragmentSpread",
"name": "RiskGraphFragment"
@@ -169,6 +189,7 @@ return {
(v2/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
(v3/*: any*/)
],
"kind": "Operation",
@@ -176,20 +197,20 @@ return {
"selections": [
{
"alias": null,
"args": (v6/*: any*/),
"args": (v7/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v11/*: any*/),
(v12/*: any*/),
(v13/*: any*/),
(v14/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v13/*: any*/),
"args": (v15/*: any*/),
"concreteType": "RiskConnection",
"kind": "LinkedField",
"name": "risks",
@@ -211,7 +232,14 @@ return {
"name": "node",
"plural": false,
"selections": [
(v12/*: any*/),
(v14/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "snapshotId",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -297,11 +325,11 @@ return {
"name": "owner",
"plural": false,
"selections": [
(v12/*: any*/)
(v14/*: any*/)
],
"storageKey": null
},
(v11/*: any*/)
(v13/*: any*/)
],
"storageKey": null
},
@@ -359,9 +387,9 @@ return {
},
{
"alias": null,
"args": (v13/*: any*/),
"args": (v15/*: any*/),
"filters": [
"orderBy"
"filter"
],
"handle": "connection",
"key": "RisksListQuery_risks",
@@ -378,16 +406,16 @@ return {
]
},
"params": {
"cacheID": "ca8ad189a3d134eecaaf9adfe090277e",
"cacheID": "161eb78d1d5100120c68db5d8106aa7e",
"id": null,
"metadata": {},
"name": "RisksListQuery",
"operationKind": "query",
"text": "query RisksListQuery(\n $after: CursorKey = null\n $before: CursorKey = null\n $first: Int = 50\n $last: Int = null\n $order: RiskOrder = null\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...RiskGraphFragment_16fISc\n id\n }\n}\n\nfragment RiskGraphFragment_16fISc on Organization {\n risks(first: $first, after: $after, last: $last, before: $before, orderBy: $order) {\n edges {\n node {\n id\n name\n category\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n inherentRiskScore\n residualRiskScore\n ...useRiskFormFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n\nfragment useRiskFormFragment on Risk {\n id\n name\n category\n description\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n note\n owner {\n id\n }\n}\n"
"text": "query RisksListQuery(\n $after: CursorKey = null\n $before: CursorKey = null\n $first: Int = 50\n $last: Int = null\n $order: RiskOrder = null\n $snapshotId: ID = null\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...RiskGraphFragment_25MC8O\n id\n }\n}\n\nfragment RiskGraphFragment_25MC8O on Organization {\n risks(first: $first, after: $after, last: $last, before: $before, orderBy: $order, filter: {snapshotId: $snapshotId}) {\n edges {\n node {\n id\n snapshotId\n name\n category\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n inherentRiskScore\n residualRiskScore\n ...useRiskFormFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n\nfragment useRiskFormFragment on Risk {\n id\n name\n category\n description\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n note\n owner {\n id\n }\n}\n"
}
};
})();
(node as any).hash = "dc662098b9aceaa2400f4656ed1b2d01";
(node as any).hash = "95c68a022cbf075eede9b7417393a369";
export default node;

88
apps/console/src/pages/organizations/measures/tabs/MeasureEvidencesTab.tsx
View File

@@ -91,7 +91,7 @@ export default function MeasureEvidencesTab() {
const { measure } = useOutletContext<{
measure: MeasureEvidencesTabFragment$key & { id: string; name: string };
}>();
const { evidenceId } = useParams<{ evidenceId: string }>();
const { evidenceId, snapshotId } = useParams<{ evidenceId: string; snapshotId?: string }>();
const pagination = usePaginationFragment(evidencesFragment, measure);
const connectionId = pagination.data.evidences.__id;
const evidences =
@@ -101,6 +101,7 @@ export default function MeasureEvidencesTab() {
const evidence = evidences.find((e) => e.id === evidenceId);
const organizationId = useOrganizationId();
const dialogRef = useDialogRef();
const isSnapshotMode = Boolean(snapshotId);
usePageTitle(measure.name + " - " + __("Evidences"));
@@ -124,34 +125,41 @@ export default function MeasureEvidencesTab() {
measureId={measure.id}
organizationId={organizationId}
connectionId={connectionId}
hideActions={isSnapshotMode}
snapshotId={snapshotId}
/>
))}
<TrButton
colspan={5}
onClick={() => dialogRef.current?.open()}
icon={IconPlusLarge}
>
{__("Add evidence")}
</TrButton>
{!isSnapshotMode && (
<TrButton
colspan={5}
onClick={() => dialogRef.current?.open()}
icon={IconPlusLarge}
>
{__("Add evidence")}
</TrButton>
)}
</Tbody>
</SortableTable>
{evidence && (
<EvidencePreviewDialog
key={evidence?.id}
onClose={() =>
navigate(
`/organizations/${organizationId}/measures/${measure.id}/evidences`
)
}
onClose={() => {
const baseUrl = isSnapshotMode
? `/organizations/${organizationId}/snapshots/${snapshotId}/risks/measures/${measure.id}/evidences`
: `/organizations/${organizationId}/measures/${measure.id}/evidences`;
navigate(baseUrl);
}}
evidenceId={evidence.id}
filename={evidence.filename}
/>
)}
<CreateEvidenceDialog
ref={dialogRef}
measureId={measure.id}
connectionId={connectionId}
/>
{!isSnapshotMode && (
<CreateEvidenceDialog
ref={dialogRef}
measureId={measure.id}
connectionId={connectionId}
/>
)}
</div>
);
}
@@ -161,6 +169,8 @@ function EvidenceRow(props: {
measureId: string;
organizationId: string;
connectionId: string;
hideActions?: boolean;
snapshotId?: string;
}) {
const evidence = useFragment(evidenceFragment, props.evidenceKey);
const { __, dateFormat } = useTranslate();
@@ -203,6 +213,10 @@ function EvidenceRow(props: {
);
};
const evidenceUrl = props.snapshotId
? `/organizations/${props.organizationId}/snapshots/${props.snapshotId}/risks/measures/${props.measureId}/evidences/${evidence.id}`
: `/organizations/${props.organizationId}/measures/${props.measureId}/evidences/${evidence.id}`;
return (
<>
{isDownloading && (
@@ -211,30 +225,30 @@ function EvidenceRow(props: {
onClose={() => setIsDownloading(false)}
/>
)}
<Tr
to={`/organizations/${props.organizationId}/measures/${props.measureId}/evidences/${evidence.id}`}
>
<Tr to={evidenceUrl}>
<Td>{evidence.filename}</Td>
<Td>{fileType(__, evidence)}</Td>
<Td>{fileSize(__, evidence.size)}</Td>
<Td>{dateFormat(evidence.createdAt)}</Td>
<Td noLink>
<div className="flex gap-2">
<ActionDropdown>
<DropdownItem onClick={() => setIsDownloading(true)}>
<IconArrowInbox size={16} />
{__("Download")}
</DropdownItem>
<DropdownItem
variant="danger"
icon={IconTrashCan}
onClick={handleDelete}
disabled={isDeleting}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
</div>
{!props.hideActions && (
<div className="flex gap-2">
<ActionDropdown>
<DropdownItem onClick={() => setIsDownloading(true)}>
<IconArrowInbox size={16} />
{__("Download")}
</DropdownItem>
<DropdownItem
variant="danger"
icon={IconTrashCan}
onClick={handleDelete}
disabled={isDeleting}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
</div>
)}
</Td>
</Tr>
</>

107
apps/console/src/pages/organizations/risks/RiskDetailPage.tsx
View File

@@ -17,7 +17,7 @@ import {
} from "@probo/ui";
import { Outlet, useNavigate, useParams } from "react-router";
import { useTranslate } from "@probo/i18n";
import { getTreatment, sprintf } from "@probo/helpers";
import { getTreatment, sprintf, validateSnapshotConsistency } from "@probo/helpers";
import { ConnectionHandler } from "relay-runtime";
import { usePreloadedQuery, type PreloadedQuery } from "react-relay";
import FormRiskDialog from "./FormRiskDialog";
@@ -29,23 +29,27 @@ import {
useDeleteRiskMutation,
} from "/hooks/graph/RiskGraph";
import type { RiskGraphNodeQuery } from "/hooks/graph/__generated__/RiskGraphNodeQuery.graphql";
import { SnapshotBanner } from "/components/SnapshotBanner";
type Props = {
queryRef: PreloadedQuery<RiskGraphNodeQuery>;
};
export default function RiskDetailPage(props: Props) {
const { riskId } = useParams<{ riskId: string }>();
const { riskId, snapshotId } = useParams<{ riskId: string; snapshotId?: string }>();
const organizationId = useOrganizationId();
const navigate = useNavigate();
const isSnapshotMode = Boolean(snapshotId);
if (!riskId) {
throw new Error("Cannot load risk detail page without riskId parameter");
}
const { __ } = useTranslate();
const data = usePreloadedQuery(riskNodeQuery, props.queryRef);
const data = usePreloadedQuery<RiskGraphNodeQuery>(riskNodeQuery, props.queryRef);
const risk = data.node;
validateSnapshotConsistency(risk, snapshotId);
const [deleteRisk] = useDeleteRiskMutation();
usePageTitle(risk.name ?? "Risk detail");
@@ -54,7 +58,8 @@ export default function RiskDetailPage(props: Props) {
const onDelete = () => {
const connectionId = ConnectionHandler.getConnectionID(
organizationId,
RisksConnectionKey
RisksConnectionKey,
{ filter: { snapshotId: snapshotId || null } }
);
confirm(
() =>
@@ -65,7 +70,10 @@ export default function RiskDetailPage(props: Props) {
connections: [connectionId],
},
onSuccess() {
navigate(`/organizations/${organizationId}/risks`);
const risksUrl = isSnapshotMode && snapshotId
? `/organizations/${organizationId}/snapshots/${snapshotId}/risks`
: `/organizations/${organizationId}/risks`;
navigate(risksUrl);
resolve();
},
});
@@ -85,68 +93,75 @@ export default function RiskDetailPage(props: Props) {
const measuresCount = risk.measuresInfo?.totalCount ?? 0;
const controlsCount = risk.controlsInfo?.totalCount ?? 0;
const risksUrl = isSnapshotMode && snapshotId
? `/organizations/${organizationId}/snapshots/${snapshotId}/risks`
: `/organizations/${organizationId}/risks`;
const baseTabUrl = isSnapshotMode && snapshotId
? `/organizations/${organizationId}/snapshots/${snapshotId}/risks/${riskId}`
: `/organizations/${organizationId}/risks/${riskId}`;
return (
<div className="space-y-6">
{snapshotId && <SnapshotBanner snapshotId={snapshotId} />}
{/* Header */}
<div className="flex justify-between items-center mb-4">
<Breadcrumb
items={[
{
label: __("Risks"),
to: `/organizations/${organizationId}/risks`,
to: risksUrl,
},
{
label: __("Risk detail"),
},
]}
/>
<div className="flex gap-2">
<FormRiskDialog
trigger={
<Button icon={IconPencil} variant="secondary">
{__("Edit")}
</Button>
}
risk={{ id: riskId, ...risk }}
/>
<ActionDropdown variant="secondary">
<DropdownItem
variant="danger"
icon={IconTrashCan}
onClick={onDelete}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
</div>
{!isSnapshotMode && (
<div className="flex gap-2">
<FormRiskDialog
trigger={
<Button icon={IconPencil} variant="secondary">
{__("Edit")}
</Button>
}
risk={{ id: riskId, ...risk }}
/>
<ActionDropdown variant="secondary">
<DropdownItem
variant="danger"
icon={IconTrashCan}
onClick={onDelete}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
</div>
)}
</div>
<PageHeader title={risk.name} />
<Tabs>
<TabLink
to={`/organizations/${organizationId}/risks/${riskId}/overview`}
>
<TabLink to={`${baseTabUrl}/overview`}>
{__("Overview")}
</TabLink>
<TabLink
to={`/organizations/${organizationId}/risks/${riskId}/measures`}
>
{__("Measures")}
<TabBadge>{measuresCount}</TabBadge>
</TabLink>
<TabLink
to={`/organizations/${organizationId}/risks/${riskId}/documents`}
>
{__("Documents")}
<TabBadge>{documentsCount}</TabBadge>
</TabLink>
<TabLink
to={`/organizations/${organizationId}/risks/${riskId}/controls`}
>
{__("Controls")}
<TabBadge>{controlsCount}</TabBadge>
</TabLink>
{!isSnapshotMode && (
<>
<TabLink to={`${baseTabUrl}/measures`}>
{__("Measures")}
<TabBadge>{measuresCount}</TabBadge>
</TabLink>
<TabLink to={`${baseTabUrl}/documents`}>
{__("Documents")}
<TabBadge>{documentsCount}</TabBadge>
</TabLink>
<TabLink to={`${baseTabUrl}/controls`}>
{__("Controls")}
<TabBadge>{controlsCount}</TabBadge>
</TabLink>
</>
)}
</Tabs>
<Outlet context={{ risk }} />

77
apps/console/src/pages/organizations/risks/RisksPage.tsx
View File

@@ -27,6 +27,8 @@ import { SortableTable, SortableTh } from "/components/SortableTable";
import type { PreloadedQuery } from "react-relay";
import type { RiskGraphListQuery } from "/hooks/graph/__generated__/RiskGraphListQuery.graphql";
import type { RiskGraphFragment$data } from "/hooks/graph/__generated__/RiskGraphFragment.graphql";
import { useParams } from "react-router";
import { SnapshotBanner } from "/components/SnapshotBanner";
type Props = {
queryRef: PreloadedQuery<RiskGraphListQuery>;
@@ -35,18 +37,28 @@ type Props = {
export default function RisksPage(props: Props) {
const { __ } = useTranslate();
const organizationId = useOrganizationId();
const { snapshotId } = useParams<{ snapshotId?: string }>();
const isSnapshotMode = Boolean(snapshotId);
const { connectionId, risks, refetch } = useRisksQuery(props.queryRef);
const { connectionId, risks, refetch } = useRisksQuery(props.queryRef, snapshotId);
usePageTitle(__("Risks"));
return (
<div className="space-y-6">
<PageHeader title={__("Risks")}>
<FormRiskDialog
connection={connectionId}
trigger={<Button icon={IconPlusLarge}>{__("New Risk")}</Button>}
/>
{snapshotId && <SnapshotBanner snapshotId={snapshotId} />}
<PageHeader
title={__("Risks")}
description={__(
"Risks are potential threats to your organization. Manage them by identifying, assessing, and implementing mitigation measures."
)}
>
{!isSnapshotMode && (
<FormRiskDialog
connection={connectionId}
trigger={<Button icon={IconPlusLarge}>{__("New Risk")}</Button>}
/>
)}
</PageHeader>
<div className="grid grid-cols-2 gap-4">
@@ -100,6 +112,8 @@ type RowProps = {
function RiskRow(props: RowProps) {
const { __ } = useTranslate();
const { risk, connectionId, organizationId } = props;
const { snapshotId } = useParams<{ snapshotId?: string }>();
const isSnapshotMode = Boolean(snapshotId);
const [deleteRisk] = useDeleteRiskMutation();
const confirm = useConfirm();
const onDelete = () => {
@@ -125,14 +139,21 @@ function RiskRow(props: RowProps) {
);
};
const formDialogRef = useDialogRef();
const riskUrl = isSnapshotMode && snapshotId
? `/organizations/${organizationId}/snapshots/${snapshotId}/risks/${risk.id}/overview`
: `/organizations/${organizationId}/risks/${risk.id}/overview`;
return (
<>
<FormRiskDialog
ref={formDialogRef}
risk={risk}
connection={connectionId}
/>
<Tr to={`/organizations/${organizationId}/risks/${risk.id}`}>
{!isSnapshotMode && (
<FormRiskDialog
ref={formDialogRef}
risk={risk}
connection={connectionId}
/>
)}
<Tr to={riskUrl}>
<Td>{risk.name}</Td>
<Td>{risk.category}</Td>
<Td>{getTreatment(__, risk.treatment)}</Td>
@@ -143,22 +164,24 @@ function RiskRow(props: RowProps) {
<SeverityBadge score={risk.residualRiskScore} />
</Td>
<Td noLink className="text-end">
<ActionDropdown>
<DropdownItem
icon={IconPencil}
onClick={() => formDialogRef.current?.open()}
>
{__("Edit")}
</DropdownItem>
{!isSnapshotMode && (
<ActionDropdown>
<DropdownItem
icon={IconPencil}
onClick={() => formDialogRef.current?.open()}
>
{__("Edit")}
</DropdownItem>
<DropdownItem
variant="danger"
icon={IconTrashCan}
onClick={onDelete}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
<DropdownItem
variant="danger"
icon={IconTrashCan}
onClick={onDelete}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
)}
</Td>
</Tr>
</>

38
apps/console/src/routes/riskRoutes.ts
View File

@@ -14,7 +14,20 @@ export const riskRoutes = [
path: "risks",
fallback: RisksPageSkeleton,
queryLoader: ({ organizationId }) =>
loadQuery(relayEnvironment, risksQuery, { organizationId }),
loadQuery(relayEnvironment, risksQuery, {
organizationId,
snapshotId: null
}),
Component: lazy(() => import("/pages/organizations/risks/RisksPage")),
},
{
path: "snapshots/:snapshotId/risks",
fallback: RisksPageSkeleton,
queryLoader: ({ organizationId, snapshotId }) =>
loadQuery(relayEnvironment, risksQuery, {
organizationId,
snapshotId
}),
Component: lazy(() => import("/pages/organizations/risks/RisksPage")),
},
{
@@ -61,4 +74,27 @@ export const riskRoutes = [
},
],
},
{
path: "snapshots/:snapshotId/risks/:riskId",
fallback: PageSkeleton,
queryLoader: ({ riskId }) =>
loadQuery(relayEnvironment, riskNodeQuery, { riskId }),
Component: lazy(() => import("/pages/organizations/risks/RiskDetailPage")),
children: [
{
path: "",
loader: () => {
throw redirect("overview");
},
Component: Fragment,
},
{
path: "overview",
fallback: LinkCardSkeleton,
Component: lazy(
() => import("/pages/organizations/risks/tabs/RiskOverviewTab.tsx")
),
},
],
},
] satisfies AppRoute[];