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

Add risk assessment system

Browse Source 
Introduce a hierarchical risk assessment model with six entity types:

- Risk Assessment: top-level container scoped to an organization
- Risk Assessment Scope: sub-container for scoping threat modeling
  exercises within an assessment
- Risk Assessment Node: DFD elements typed as ENTITY, BOUNDARY,
  ASSET, or DATA within a scope
- Risk Assessment Process: directed data flows between two nodes
- Risk Assessment Threat: descriptive threats attached to a process
  with a free-text category (e.g. Confidentiality, Integrity)
- Risk Scenario: thin join linking a threat to a risk from the
  register, carrying only a name and description

Risk scoring (likelihood, impact, treatment) remains on the existing
Risk entity. Threats are purely descriptive. Risk Scenarios connect
the threat model to the risk register without duplicating scores.

Backend: migration with PG enum for node types, coredata structs,
service layer with full CRUD and validation, GraphQL schema with
18 mutations and paginated connections, authorization actions and
policies, and base_resolvers.go Node dispatch for all entity types.

Frontend: Risk Assessments list page with create dialog, detail page
showing scopes as cards with nodes/processes/threats tables, inline
create/edit/delete actions on all entities, and a Scenarios tab on
the Risk detail page linking threats to risks. Existing RiskGraph.ts
hook file removed in favor of colocated queries in page files.

E2E tests cover CRUD for all entity types, RBAC, and tenant
isolation.

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
2026-05-11 14:55:06 +02:00
parent 8f8f09008a
commit b9262b5150
71 changed files with 10256 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,190 +0,0 @@
// Copyright (c) 2025-2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
type PreloadedQuery,
usePaginationFragment,
usePreloadedQuery,
} from "react-relay";
import { graphql } from "relay-runtime";
import type { RiskGraphDeleteMutation } from "#/__generated__/core/RiskGraphDeleteMutation.graphql";
import type { RiskGraphFragment$key } from "#/__generated__/core/RiskGraphFragment.graphql";
import type { RiskGraphListQuery } from "#/__generated__/core/RiskGraphListQuery.graphql";
import type { RisksListQuery } from "#/__generated__/core/RisksListQuery.graphql";
import { useMutationWithToasts } from "../useMutationWithToasts";
/* eslint-disable relay/unused-fields, relay/must-colocate-fragment-spreads */
const deleteRiskMutation = graphql`
mutation RiskGraphDeleteMutation(
$input: DeleteRiskInput!
$connections: [ID!]!
) {
deleteRisk(input: $input) {
deletedRiskId @deleteEdge(connections: $connections)
}
}
`;
export function useDeleteRiskMutation() {
const { __ } = useTranslate();
return useMutationWithToasts<RiskGraphDeleteMutation>(deleteRiskMutation, {
successMessage: __("Risk deleted successfully."),
errorMessage: __("Failed to delete risk"),
});
}
export const risksQuery = graphql`
query RiskGraphListQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
id
...RiskGraphFragment
}
}
`;
const risksFragment = graphql`
fragment RiskGraphFragment on Organization
@refetchable(queryName: "RisksListQuery")
@argumentDefinitions(
first: { type: "Int", defaultValue: 50 }
order: {
type: "RiskOrder"
defaultValue: { direction: DESC, field: CREATED_AT }
}
after: { type: "CursorKey", defaultValue: null }
before: { type: "CursorKey", defaultValue: null }
last: { type: "Int", defaultValue: null }
) {
canCreateRisk: permission(action: "core:risk:create")
canPublishRisk: permission(action: "core:risk:publish")
risksDocument {
id
currentPublishedMajor
currentPublishedMinor
defaultApprovers {
id
}
}
risks(
first: $first
after: $after
last: $last
before: $before
orderBy: $order
) @connection(key: "RisksListQuery_risks", filters: []) {
__id
edges {
node {
id
name
category
treatment
owner {
id
fullName
}
inherentLikelihood
inherentImpact
residualLikelihood
residualImpact
inherentRiskScore
residualRiskScore
canUpdate: permission(action: "core:risk:update")
canDelete: permission(action: "core:risk:delete")
...useRiskFormFragment
}
}
}
}
`;
export const RisksConnectionKey = "RisksListQuery_risks";
export function useRisksQuery(queryRef: PreloadedQuery<RiskGraphListQuery>) {
const data = usePreloadedQuery(risksQuery, queryRef);
const pagination = usePaginationFragment<RisksListQuery, RiskGraphFragment$key>(
risksFragment,
data.organization as RiskGraphFragment$key,
);
const risks = pagination.data?.risks?.edges.map(edge => edge.node);
return {
...pagination,
risks,
connectionId: pagination.data.risks.__id,
};
}
export const riskNodeQuery = graphql`
query RiskGraphNodeQuery($riskId: ID!) {
node(id: $riskId) {
... on Risk {
id
name
description
treatment
owner {
id
fullName
}
note
inherentRiskScore
residualRiskScore
measuresInfo: measures(first: 0) {
totalCount
}
documentsInfo: documents(first: 0) {
totalCount
}
controlsInfo: controls(first: 0) {
totalCount
}
obligationsInfo: obligations(first: 0) {
totalCount
}
canUpdate: permission(action: "core:risk:update")
canDelete: permission(action: "core:risk:delete")
canCreateDocumentMapping: permission(
action: "core:risk:create-document-mapping"
)
canDeleteDocumentMapping: permission(
action: "core:risk:delete-document-mapping"
)
canCreateMeasureMapping: permission(
action: "core:risk:create-measure-mapping"
)
canDeleteMeasureMapping: permission(
action: "core:risk:delete-measure-mapping"
)
canCreateObligationMapping: permission(
action: "core:risk:create-obligation-mapping"
)
canDeleteObligationMapping: permission(
action: "core:risk:delete-obligation-mapping"
)
...useRiskFormFragment
...RiskOverviewTabFragment
...RiskMeasuresTabFragment
...RiskDocumentsTabFragment
...RiskControlsTabFragment
...RiskObligationsTabFragment
}
}
}
`;

2
apps/console/src/pages/iam/organizations/_components/Sidebar.tsx
View File

@@ -48,6 +48,7 @@ const fragment = graphql`
canListTasks: permission(action: "core:task:list")
canListMeasures: permission(action: "core:measure:list")
canListRisks: permission(action: "core:risk:list")
canListFrameworks: permission(action: "core:framework:list")
canListMembers: permission(action: "iam:membership:list")
canListThirdParties: permission(action: "core:thirdParty:list")
@@ -113,6 +114,7 @@ export function Sidebar(props: { fKey: SidebarFragment$key }) {
to={`${prefix}/risks`}
/>
)}
{organization.canListFrameworks && (
<SidebarItem
label={__("Frameworks")}

225
apps/console/src/pages/organizations/risk-assessments/RiskAssessmentDetailPage.tsx Normal file
View File

@@ -0,0 +1,225 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { formatDate, formatError, type GraphQLError } from "@probo/helpers";
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import {
ActionDropdown,
Breadcrumb,
Card,
DropdownItem,
IconTrashCan,
PageHeader,
useConfirm,
useToast,
} from "@probo/ui";
import {
ConnectionHandler,
graphql,
type PreloadedQuery,
useMutation,
usePreloadedQuery,
} from "react-relay";
import { useNavigate } from "react-router";
import type { RiskAssessmentDetailPageDeleteMutation } from "#/__generated__/core/RiskAssessmentDetailPageDeleteMutation.graphql";
import type { RiskAssessmentDetailPageQuery } from "#/__generated__/core/RiskAssessmentDetailPageQuery.graphql";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import { CreateScopeDialog } from "./_components/CreateScopeDialog";
import { ScopeCard } from "./_components/ScopeCard";
export const riskAssessmentDetailPageQuery = graphql`
query RiskAssessmentDetailPageQuery($riskAssessmentId: ID!) {
node(id: $riskAssessmentId) {
... on RiskAssessment {
id
name
description
createdAt
updatedAt
canDelete: permission(action: "core:risk-assessment:delete")
scopes(first: 50)
@connection(key: "RiskAssessmentDetailPage_scopes", filters: []) {
__id
edges {
node {
id
...ScopeCardFragment
}
}
}
}
}
}
`;
const deleteMutation = graphql`
mutation RiskAssessmentDetailPageDeleteMutation(
$input: DeleteRiskAssessmentInput!
$connections: [ID!]!
) {
deleteRiskAssessment(input: $input) {
deletedRiskAssessmentId @deleteEdge(connections: $connections)
}
}
`;
const RiskAssessmentsConnectionKey = "RiskAssessmentsPage_riskAssessments";
interface RiskAssessmentDetailPageProps {
queryRef: PreloadedQuery<RiskAssessmentDetailPageQuery>;
}
export default function RiskAssessmentDetailPage({ queryRef }: RiskAssessmentDetailPageProps) {
const { __ } = useTranslate();
const organizationId = useOrganizationId();
const navigate = useNavigate();
const confirm = useConfirm();
const { toast } = useToast();
const data = usePreloadedQuery(riskAssessmentDetailPageQuery, queryRef);
const ra = data.node;
const [deleteRiskAssessment] = useMutation<RiskAssessmentDetailPageDeleteMutation>(deleteMutation);
usePageTitle(ra?.name ?? __("Risk Assessment"));
if (!ra?.id) {
return null;
}
const raId = ra.id;
const scopes = ra.scopes?.edges.map(e => e.node) ?? [];
const scopesConnectionId = ra.scopes?.__id ?? "";
const listConnectionId = ConnectionHandler.getConnectionID(
organizationId,
RiskAssessmentsConnectionKey,
);
const listUrl = `/organizations/${organizationId}/risk-assessments`;
const handleDelete = () => {
confirm(
() =>
new Promise<void>((resolve, reject) => {
deleteRiskAssessment({
variables: {
input: { riskAssessmentId: raId },
connections: [listConnectionId],
},
onCompleted(_, errors) {
if (errors?.length) {
toast({
title: __("Error"),
description: errors[0].message,
variant: "error",
});
reject(new Error(errors[0].message));
return;
}
void navigate(listUrl);
resolve();
},
onError(error) {
toast({
title: __("Error"),
description: formatError(__("Failed to delete risk assessment"), error as GraphQLError),
variant: "error",
});
reject(error);
},
});
}),
{ message: __("This will permanently delete this risk assessment and all its scopes, nodes, processes, and threats. This action cannot be undone.") },
);
};
return (
<div className="space-y-6">
<Breadcrumb
items={[
{ label: __("Risk Assessments"), to: listUrl },
{ label: ra.name ?? "" },
]}
/>
<PageHeader
title={ra.name}
>
{ra.canDelete && (
<ActionDropdown variant="secondary">
<DropdownItem
variant="danger"
icon={IconTrashCan}
onClick={handleDelete}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
)}
</PageHeader>
<div className="space-y-4">
<h2 className="text-base font-medium">{__("Details")}</h2>
<Card className="space-y-4" padded>
{ra.description && (
<div className="text-sm text-txt-secondary">{ra.description}</div>
)}
<div className="grid grid-cols-3 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(ra.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(ra.updatedAt)}
</div>
</div>
</div>
</Card>
</div>
<div className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-base font-medium">{__("Scopes")}</h2>
<CreateScopeDialog
connectionId={scopesConnectionId}
/>
</div>
{scopes.length === 0 && (
<Card padded>
<div className="text-center text-txt-secondary">
{__("No scopes yet. Create a scope to start defining nodes, processes, and threats.")}
</div>
</Card>
)}
{scopes.map(scope => (
<ScopeCard
key={scope.id}
scopeRef={scope}
scopesConnectionId={scopesConnectionId}
/>
))}
</div>
</div>
);
}

44
apps/console/src/pages/organizations/risk-assessments/RiskAssessmentDetailPageLoader.tsx Normal file
View File

@@ -0,0 +1,44 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { Suspense, useEffect } from "react";
import { useQueryLoader } from "react-relay";
import { useParams } from "react-router";
import type { RiskAssessmentDetailPageQuery } from "#/__generated__/core/RiskAssessmentDetailPageQuery.graphql";
import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
import RiskAssessmentDetailPage, { riskAssessmentDetailPageQuery } from "./RiskAssessmentDetailPage";
export default function RiskAssessmentDetailPageLoader() {
const { riskAssessmentId } = useParams<{ riskAssessmentId: string }>();
const [queryRef, loadQuery]
= useQueryLoader<RiskAssessmentDetailPageQuery>(riskAssessmentDetailPageQuery);
useEffect(() => {
if (riskAssessmentId) {
loadQuery({ riskAssessmentId });
}
}, [loadQuery, riskAssessmentId]);
if (!queryRef) {
return <PageSkeleton />;
}
return (
<Suspense fallback={<PageSkeleton />}>
<RiskAssessmentDetailPage queryRef={queryRef} />
</Suspense>
);
}

169
apps/console/src/pages/organizations/risk-assessments/RiskAssessmentsPage.tsx Normal file
View File

@@ -0,0 +1,169 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { formatDate } from "@probo/helpers";
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import {
PageHeader,
Tbody,
Td,
Th,
Thead,
Tr,
} from "@probo/ui";
import {
graphql,
type PreloadedQuery,
usePaginationFragment,
usePreloadedQuery,
} from "react-relay";
import type { RiskAssessmentsPageFragment$key } from "#/__generated__/core/RiskAssessmentsPageFragment.graphql";
import type { RiskAssessmentsPageQuery } from "#/__generated__/core/RiskAssessmentsPageQuery.graphql";
import type { RiskAssessmentsPageRefetchQuery } from "#/__generated__/core/RiskAssessmentsPageRefetchQuery.graphql";
import { SortableTable, SortableTh } from "#/components/SortableTable";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import { CreateRiskAssessmentDialog } from "./_components/CreateRiskAssessmentDialog";
export const riskAssessmentsPageQuery = graphql`
query RiskAssessmentsPageQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
id
...RiskAssessmentsPageFragment
}
}
`;
const riskAssessmentsFragment = graphql`
fragment RiskAssessmentsPageFragment on Organization
@refetchable(queryName: "RiskAssessmentsPageRefetchQuery")
@argumentDefinitions(
first: { type: "Int", defaultValue: 50 }
order: {
type: "RiskAssessmentOrder"
defaultValue: { direction: DESC, field: CREATED_AT }
}
after: { type: "CursorKey", defaultValue: null }
before: { type: "CursorKey", defaultValue: null }
last: { type: "Int", defaultValue: null }
) {
canCreateRiskAssessment: permission(
action: "core:risk-assessment:create"
)
riskAssessments(
first: $first
after: $after
last: $last
before: $before
orderBy: $order
)
@connection(
key: "RiskAssessmentsPage_riskAssessments"
filters: []
) {
__id
edges {
node {
id
name
description
createdAt
}
}
}
}
`;
interface RiskAssessmentsPageProps {
queryRef: PreloadedQuery<RiskAssessmentsPageQuery>;
}
export default function RiskAssessmentsPage({ queryRef }: RiskAssessmentsPageProps) {
const { __ } = useTranslate();
const organizationId = useOrganizationId();
const data = usePreloadedQuery(riskAssessmentsPageQuery, queryRef);
const { data: fragmentData, ...pagination } = usePaginationFragment<
RiskAssessmentsPageRefetchQuery,
RiskAssessmentsPageFragment$key
>(riskAssessmentsFragment, data.organization);
const riskAssessments
= fragmentData.riskAssessments?.edges.map(edge => edge.node) ?? [];
const connectionId = fragmentData.riskAssessments.__id;
const canCreate = fragmentData.canCreateRiskAssessment;
const refetch = ({
order,
}: {
order: { direction: string; field: string };
}) => {
pagination.refetch(
{
order: {
direction: order.direction as "ASC" | "DESC",
field: order.field as "NAME" | "CREATED_AT",
},
},
{ fetchPolicy: "network-only" },
);
};
usePageTitle(__("Risk Assessments"));
return (
<div className="space-y-6">
<PageHeader
title={__("Risk Assessments")}
description={__(
"Manage risk assessments with scopes, nodes, processes, threats, and scenarios.",
)}
>
{canCreate && (
<CreateRiskAssessmentDialog
connectionId={connectionId}
/>
)}
</PageHeader>
<SortableTable {...pagination} refetch={refetch}>
<Thead>
<Tr>
<SortableTh field="NAME">{__("Name")}</SortableTh>
<Th>{__("Description")}</Th>
<SortableTh field="CREATED_AT">{__("Created")}</SortableTh>
</Tr>
</Thead>
<Tbody>
{riskAssessments.map(ra => (
<Tr
key={ra.id}
to={`/organizations/${organizationId}/risk-assessments/${ra.id}`}
>
<Td className="font-medium">{ra.name}</Td>
<Td className="text-txt-secondary truncate max-w-xs">
{ra.description || "—"}
</Td>
<Td className="text-txt-secondary">
{formatDate(ra.createdAt)}
</Td>
</Tr>
))}
</Tbody>
</SortableTable>
</div>
);
}

42
apps/console/src/pages/organizations/risk-assessments/RiskAssessmentsPageLoader.tsx Normal file
View File

@@ -0,0 +1,42 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { Suspense, useEffect } from "react";
import { useQueryLoader } from "react-relay";
import type { RiskAssessmentsPageQuery } from "#/__generated__/core/RiskAssessmentsPageQuery.graphql";
import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import RiskAssessmentsPage, { riskAssessmentsPageQuery } from "./RiskAssessmentsPage";
export default function RiskAssessmentsPageLoader() {
const organizationId = useOrganizationId();
const [queryRef, loadQuery]
= useQueryLoader<RiskAssessmentsPageQuery>(riskAssessmentsPageQuery);
useEffect(() => {
loadQuery({ organizationId });
}, [loadQuery, organizationId]);
if (!queryRef) {
return <PageSkeleton />;
}
return (
<Suspense fallback={<PageSkeleton />}>
<RiskAssessmentsPage queryRef={queryRef} />
</Suspense>
);
}

90
apps/console/src/pages/organizations/risk-assessments/_components/CreateNodeDialog.tsx Normal file
View File

@@ -0,0 +1,90 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Breadcrumb,
Button,
Dialog,
DialogContent,
DialogFooter,
Field,
IconPlusLarge,
Option,
useDialogRef,
} from "@probo/ui";
import { useForm } from "react-hook-form";
import { graphql, useMutation } from "react-relay";
import type { CreateNodeDialogMutation } from "#/__generated__/core/CreateNodeDialogMutation.graphql";
import { ControlledField } from "#/components/form/ControlledField";
const createNodeMutation = graphql`
mutation CreateNodeDialogMutation(
$input: CreateRiskAssessmentNodeInput!
$connections: [ID!]!
) {
createRiskAssessmentNode(input: $input) {
riskAssessmentNodeEdge @appendEdge(connections: $connections) {
node { id nodeType name }
}
}
}
`;
export function CreateNodeDialog(props: { scopeId: string; connectionId: string }) {
const { __ } = useTranslate();
const dialogRef = useDialogRef();
const [createNode, isCreating] = useMutation<CreateNodeDialogMutation>(createNodeMutation);
const { register, control, handleSubmit, reset, formState } = useForm({
defaultValues: { name: "", nodeType: "ASSET" },
});
const onSubmit = (data: { name: string; nodeType: string }) => {
createNode({
variables: {
input: {
riskAssessmentScopeId: props.scopeId,
nodeType: data.nodeType as "ENTITY" | "BOUNDARY" | "ASSET" | "DATA",
name: data.name,
},
connections: [props.connectionId],
},
onCompleted: () => {
reset();
dialogRef.current?.close();
},
});
};
return (
<Dialog
className="max-w-lg"
ref={dialogRef}
trigger={<Button icon={IconPlusLarge} variant="secondary">{__("Add")}</Button>}
title={<Breadcrumb items={[__("Nodes"), __("Add Node")]} />}
>
<form onSubmit={e => void handleSubmit(onSubmit)(e)}>
<DialogContent padded className="space-y-4">
<ControlledField label={__("Type")} name="nodeType" control={control} type="select">
<Option value="ENTITY">{__("Entity")}</Option>
<Option value="BOUNDARY">{__("Boundary")}</Option>
<Option value="ASSET">{__("Asset")}</Option>
<Option value="DATA">{__("Data")}</Option>
</ControlledField>
<Field label={__("Name")} {...register("name", { required: __("This field is required") })} type="text" error={formState.errors.name?.message} />
</DialogContent>
<DialogFooter><Button type="submit" disabled={isCreating}>{__("Add")}</Button></DialogFooter>
</form>
</Dialog>
);
}

97
apps/console/src/pages/organizations/risk-assessments/_components/CreateProcessDialog.tsx Normal file
View File

@@ -0,0 +1,97 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Breadcrumb,
Button,
Dialog,
DialogContent,
DialogFooter,
Field,
IconPlusLarge,
Option,
useDialogRef,
} from "@probo/ui";
import { useForm } from "react-hook-form";
import { graphql, useMutation } from "react-relay";
import type { CreateProcessDialogMutation } from "#/__generated__/core/CreateProcessDialogMutation.graphql";
import { ControlledField } from "#/components/form/ControlledField";
const createProcessMutation = graphql`
mutation CreateProcessDialogMutation(
$input: CreateRiskAssessmentProcessInput!
$connections: [ID!]!
) {
createRiskAssessmentProcess(input: $input) {
riskAssessmentProcessEdge @appendEdge(connections: $connections) {
node { id sourceNodeId targetNodeId name }
}
}
}
`;
export function CreateProcessDialog(props: {
scopeId: string;
nodes: { id: string; name: string }[];
connectionId: string;
}) {
const { __ } = useTranslate();
const dialogRef = useDialogRef();
const [createProcess, isCreating] = useMutation<CreateProcessDialogMutation>(createProcessMutation);
const { register, control, handleSubmit, reset, formState } = useForm({
defaultValues: { name: "", sourceNodeId: "", targetNodeId: "" },
});
const onSubmit = (data: { name: string; sourceNodeId: string; targetNodeId: string }) => {
createProcess({
variables: {
input: {
riskAssessmentScopeId: props.scopeId,
sourceNodeId: data.sourceNodeId,
targetNodeId: data.targetNodeId,
name: data.name,
},
connections: [props.connectionId],
},
onCompleted: () => {
reset();
dialogRef.current?.close();
},
});
};
return (
<Dialog
className="max-w-lg"
ref={dialogRef}
trigger={<Button icon={IconPlusLarge} variant="secondary" disabled={props.nodes.length < 2}>{__("Add")}</Button>}
title={<Breadcrumb items={[__("Processes"), __("Add Process")]} />}
>
<form onSubmit={e => void handleSubmit(onSubmit)(e)}>
<DialogContent padded className="space-y-4">
<ControlledField label={__("Source")} name="sourceNodeId" control={control} rules={{ required: __("This field is required") }} type="select" placeholder={__("Select source node")}>
{props.nodes.map(n => <Option key={n.id} value={n.id}>{n.name}</Option>)}
</ControlledField>
<ControlledField label={__("Target")} name="targetNodeId" control={control} rules={{ required: __("This field is required") }} type="select" placeholder={__("Select target node")}>
{props.nodes.map(n => <Option key={n.id} value={n.id}>{n.name}</Option>)}
</ControlledField>
<Field label={__("Name")} {...register("name", { required: __("This field is required") })} type="text" error={formState.errors.name?.message} placeholder={__("e.g. User → API")} />
</DialogContent>
<DialogFooter>
<Button type="submit" disabled={isCreating || props.nodes.length < 2}>{__("Add")}</Button>
</DialogFooter>
</form>
</Dialog>
);
}

118
apps/console/src/pages/organizations/risk-assessments/_components/CreateRiskAssessmentDialog.tsx Normal file
View File

@@ -0,0 +1,118 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Breadcrumb,
Button,
Dialog,
DialogContent,
DialogFooter,
Field,
IconPlusLarge,
useDialogRef,
} from "@probo/ui";
import { useForm } from "react-hook-form";
import { graphql, useMutation } from "react-relay";
import type { CreateRiskAssessmentDialogCreateMutation } from "#/__generated__/core/CreateRiskAssessmentDialogCreateMutation.graphql";
import { useOrganizationId } from "#/hooks/useOrganizationId";
const createMutation = graphql`
mutation CreateRiskAssessmentDialogCreateMutation(
$input: CreateRiskAssessmentInput!
$connections: [ID!]!
) {
createRiskAssessment(input: $input) {
riskAssessmentEdge @prependEdge(connections: $connections) {
node {
id
name
description
createdAt
}
}
}
}
`;
export function CreateRiskAssessmentDialog(props: {
connectionId: string;
}) {
const { __ } = useTranslate();
const organizationId = useOrganizationId();
const dialogRef = useDialogRef();
const [createRiskAssessment, isCreating] = useMutation<CreateRiskAssessmentDialogCreateMutation>(createMutation);
const { register, handleSubmit, reset, formState } = useForm({
defaultValues: { name: "", description: "" },
});
const onSubmit = (data: { name: string; description: string }) => {
createRiskAssessment({
variables: {
input: {
organizationId,
name: data.name,
description: data.description || null,
},
connections: [props.connectionId],
},
onCompleted: () => {
reset();
dialogRef.current?.close();
},
});
};
return (
<Dialog
className="max-w-lg"
ref={dialogRef}
trigger={(
<Button icon={IconPlusLarge} variant="primary">
{__("New Risk Assessment")}
</Button>
)}
title={(
<Breadcrumb
items={[__("Risk Assessments"), __("New Risk Assessment")]}
/>
)}
>
<form onSubmit={e => void handleSubmit(onSubmit)(e)}>
<DialogContent padded className="space-y-4">
<Field
label={__("Name")}
{...register("name", { required: __("This field is required") })}
type="text"
error={formState.errors.name?.message}
placeholder={__("e.g. Platform Threat Model 2026")}
/>
<Field
label={__("Description")}
{...register("description")}
type="textarea"
rows={3}
placeholder={__("Describe the scope and purpose of this assessment...")}
/>
</DialogContent>
<DialogFooter>
<Button type="submit" disabled={isCreating}>
{__("Create")}
</Button>
</DialogFooter>
</form>
</Dialog>
);
}

180
apps/console/src/pages/organizations/risk-assessments/_components/CreateScenarioInScopeDialog.tsx Normal file
View File

@@ -0,0 +1,180 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Badge,
Breadcrumb,
Button,
Dialog,
DialogContent,
DialogFooter,
Field,
IconCrossLargeX,
IconPlusLarge,
Option,
Select,
useDialogRef,
} from "@probo/ui";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { graphql, useMutation } from "react-relay";
import type { CreateScenarioInScopeDialogLinkThreatMutation } from "#/__generated__/core/CreateScenarioInScopeDialogLinkThreatMutation.graphql";
import type { CreateScenarioInScopeDialogMutation } from "#/__generated__/core/CreateScenarioInScopeDialogMutation.graphql";
const createScenarioMutation = graphql`
mutation CreateScenarioInScopeDialogMutation(
$input: CreateRiskAssessmentScenarioInput!
$connections: [ID!]!
) {
createRiskAssessmentScenario(input: $input) {
riskAssessmentScenarioEdge @appendEdge(connections: $connections) {
node {
id name description
risks(first: 10) { edges { node { id name } } }
threats(first: 10) { edges { node { id name } } }
}
}
}
}
`;
const linkThreatMutation = graphql`
mutation CreateScenarioInScopeDialogLinkThreatMutation(
$input: LinkRiskAssessmentScenarioThreatInput!
) {
linkRiskAssessmentScenarioThreat(input: $input) {
riskAssessmentScenario { id }
}
}
`;
export function CreateScenarioInScopeDialog(props: {
scopeId: string;
threats: { id: string; name: string }[];
connectionId: string;
}) {
const { __ } = useTranslate();
const dialogRef = useDialogRef();
const [selectedThreats, setSelectedThreats] = useState<Map<string, string>>(new Map());
const [createScenario, isCreating] = useMutation<CreateScenarioInScopeDialogMutation>(createScenarioMutation);
const [linkThreat] = useMutation<CreateScenarioInScopeDialogLinkThreatMutation>(linkThreatMutation);
const { register, handleSubmit, reset, formState } = useForm({
defaultValues: { name: "", description: "" },
});
const availableThreats = props.threats.filter(t => !selectedThreats.has(t.id));
const onSubmit = (data: { name: string; description: string }) => {
createScenario({
variables: {
input: {
riskAssessmentScopeId: props.scopeId,
name: data.name,
description: data.description || null,
},
connections: [props.connectionId],
},
onCompleted(response) {
const scenarioId = response.createRiskAssessmentScenario.riskAssessmentScenarioEdge.node.id;
for (const threatId of selectedThreats.keys()) {
linkThreat({
variables: {
input: { riskAssessmentScenarioId: scenarioId, threatId },
},
});
}
reset();
setSelectedThreats(new Map());
dialogRef.current?.close();
},
});
};
return (
<Dialog
className="max-w-lg"
ref={dialogRef}
trigger={<Button icon={IconPlusLarge} variant="secondary">{__("Add")}</Button>}
title={<Breadcrumb items={[__("Scenarios"), __("Add Scenario")]} />}
>
<form onSubmit={e => void handleSubmit(onSubmit)(e)}>
<DialogContent padded className="space-y-4">
<Field
label={__("Name")}
{...register("name", { required: __("This field is required") })}
type="text"
error={formState.errors.name?.message}
placeholder={__("e.g. Data breach via compromised API")}
/>
<Field
label={__("Description")}
{...register("description")}
type="textarea"
rows={3}
/>
{props.threats.length > 0 && (
<div>
<div className="text-sm font-medium mb-2">{__("Threats")}</div>
{selectedThreats.size > 0 && (
<div className="flex flex-wrap gap-1 mb-2">
{[...selectedThreats.entries()].map(([id, name]) => (
<Badge key={id}>
{name}
<button
type="button"
className="ml-1 hover:text-txt-danger"
onClick={() => {
setSelectedThreats((prev) => {
const next = new Map(prev);
next.delete(id);
return next;
});
}}
>
<IconCrossLargeX size={12} />
</button>
</Badge>
))}
</div>
)}
{availableThreats.length > 0 && (
<Select
placeholder={__("Select a threat to link...")}
onValueChange={(threatId) => {
if (typeof threatId !== "string") return;
const threat = props.threats.find(t => t.id === threatId);
if (threat) {
setSelectedThreats((prev) => {
const next = new Map(prev);
next.set(threat.id, threat.name);
return next;
});
}
}}
>
{availableThreats.map(t => (
<Option key={t.id} value={t.id}>{t.name}</Option>
))}
</Select>
)}
</div>
)}
</DialogContent>
<DialogFooter><Button type="submit" disabled={isCreating}>{__("Add")}</Button></DialogFooter>
</form>
</Dialog>
);
}

84
apps/console/src/pages/organizations/risk-assessments/_components/CreateScopeDialog.tsx Normal file
View File

@@ -0,0 +1,84 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Breadcrumb,
Button,
Dialog,
DialogContent,
DialogFooter,
Field,
IconPlusLarge,
useDialogRef,
} from "@probo/ui";
import { useForm } from "react-hook-form";
import { graphql, useMutation } from "react-relay";
import { useParams } from "react-router";
import type { CreateScopeDialogMutation } from "#/__generated__/core/CreateScopeDialogMutation.graphql";
const createScopeMutation = graphql`
mutation CreateScopeDialogMutation(
$input: CreateRiskAssessmentScopeInput!
$connections: [ID!]!
) {
createRiskAssessmentScope(input: $input) {
riskAssessmentScopeEdge @appendEdge(connections: $connections) {
node {
id
...ScopeCardFragment
}
}
}
}
`;
export function CreateScopeDialog(props: { connectionId: string }) {
const { riskAssessmentId } = useParams<{ riskAssessmentId: string }>();
const { __ } = useTranslate();
const dialogRef = useDialogRef();
const [createScope, isCreating] = useMutation<CreateScopeDialogMutation>(createScopeMutation);
const { register, handleSubmit, reset, formState } = useForm({
defaultValues: { name: "" },
});
const onSubmit = (data: { name: string }) => {
if (!riskAssessmentId) return;
createScope({
variables: {
input: { riskAssessmentId, name: data.name },
connections: [props.connectionId],
},
onCompleted: () => {
reset();
dialogRef.current?.close();
},
});
};
return (
<Dialog
className="max-w-lg"
ref={dialogRef}
trigger={<Button icon={IconPlusLarge} variant="secondary">{__("Add Scope")}</Button>}
title={<Breadcrumb items={[__("Scopes"), __("New Scope")]} />}
>
<form onSubmit={e => void handleSubmit(onSubmit)(e)}>
<DialogContent padded className="space-y-4">
<Field label={__("Name")} {...register("name", { required: __("This field is required") })} type="text" error={formState.errors.name?.message} placeholder={__("e.g. API layer")} />
</DialogContent>
<DialogFooter><Button type="submit" disabled={isCreating}>{__("Create")}</Button></DialogFooter>
</form>
</Dialog>
);
}

93
apps/console/src/pages/organizations/risk-assessments/_components/CreateThreatDialog.tsx Normal file
View File

@@ -0,0 +1,93 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Breadcrumb,
Button,
Dialog,
DialogContent,
DialogFooter,
Field,
IconPlusLarge,
Option,
useDialogRef,
} from "@probo/ui";
import { useForm } from "react-hook-form";
import { graphql, useMutation } from "react-relay";
import type { CreateThreatDialogMutation } from "#/__generated__/core/CreateThreatDialogMutation.graphql";
import { ControlledField } from "#/components/form/ControlledField";
const createThreatMutation = graphql`
mutation CreateThreatDialogMutation(
$input: CreateRiskAssessmentThreatInput!
$connections: [ID!]!
) {
createRiskAssessmentThreat(input: $input) {
riskAssessmentThreatEdge @appendEdge(connections: $connections) {
node { id processId name category }
}
}
}
`;
export function CreateThreatDialog(props: {
scopeId: string;
processes: { id: string; name: string }[];
connectionId: string;
}) {
const { __ } = useTranslate();
const dialogRef = useDialogRef();
const [createThreat, isCreating] = useMutation<CreateThreatDialogMutation>(createThreatMutation);
const { register, control, handleSubmit, reset, formState } = useForm({
defaultValues: { name: "", processId: "", category: "Confidentiality" },
});
const onSubmit = (data: { name: string; processId: string; category: string }) => {
createThreat({
variables: {
input: {
riskAssessmentScopeId: props.scopeId,
processId: data.processId,
name: data.name,
category: data.category,
},
connections: [props.connectionId],
},
onCompleted: () => {
reset();
dialogRef.current?.close();
},
});
};
return (
<Dialog
className="max-w-lg"
ref={dialogRef}
trigger={<Button icon={IconPlusLarge} variant="secondary" disabled={props.processes.length === 0}>{__("Add")}</Button>}
title={<Breadcrumb items={[__("Threats"), __("Add Threat")]} />}
>
<form onSubmit={e => void handleSubmit(onSubmit)(e)}>
<DialogContent padded className="space-y-4">
<ControlledField label={__("Process")} name="processId" control={control} rules={{ required: __("This field is required") }} type="select" placeholder={__("Select process")}>
{props.processes.map(p => <Option key={p.id} value={p.id}>{p.name}</Option>)}
</ControlledField>
<Field label={__("Name")} {...register("name", { required: __("This field is required") })} type="text" error={formState.errors.name?.message} placeholder={__("e.g. SQL injection")} />
<Field label={__("Category")} {...register("category", { required: __("This field is required") })} type="text" error={formState.errors.category?.message} placeholder={__("e.g. Confidentiality")} />
</DialogContent>
<DialogFooter><Button type="submit" disabled={isCreating || props.processes.length === 0}>{__("Add")}</Button></DialogFooter>
</form>
</Dialog>
);
}

115
apps/console/src/pages/organizations/risk-assessments/_components/NodeActions.tsx Normal file
View File

@@ -0,0 +1,115 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
ActionDropdown,
Breadcrumb,
Button,
Dialog,
DialogContent,
DialogFooter,
DropdownItem,
Field,
IconPencil,
IconTrashCan,
Option,
useConfirm,
useDialogRef,
} from "@probo/ui";
import { useForm } from "react-hook-form";
import { graphql, useMutation } from "react-relay";
import type { NodeActionsDeleteMutation } from "#/__generated__/core/NodeActionsDeleteMutation.graphql";
import type { NodeActionsUpdateMutation } from "#/__generated__/core/NodeActionsUpdateMutation.graphql";
import { ControlledField } from "#/components/form/ControlledField";
const updateNodeMutation = graphql`
mutation NodeActionsUpdateMutation($input: UpdateRiskAssessmentNodeInput!) {
updateRiskAssessmentNode(input: $input) {
riskAssessmentNode { id nodeType name }
}
}
`;
const deleteNodeMutation = graphql`
mutation NodeActionsDeleteMutation(
$input: DeleteRiskAssessmentNodeInput!
$connections: [ID!]!
) {
deleteRiskAssessmentNode(input: $input) {
deletedRiskAssessmentNodeId @deleteEdge(connections: $connections)
}
}
`;
export function NodeActions(props: {
node: { id: string; name: string; nodeType: string };
connectionId: string;
}) {
const { __ } = useTranslate();
const confirm = useConfirm();
const dialogRef = useDialogRef();
const [updateNode] = useMutation<NodeActionsUpdateMutation>(updateNodeMutation);
const [deleteNode] = useMutation<NodeActionsDeleteMutation>(deleteNodeMutation);
const { register, control, handleSubmit } = useForm({
values: { name: props.node.name, nodeType: props.node.nodeType },
});
return (
<>
<ActionDropdown>
<DropdownItem icon={IconPencil} onSelect={() => dialogRef.current?.open()}>
{__("Edit")}
</DropdownItem>
<DropdownItem
icon={IconTrashCan}
variant="danger"
onSelect={() => confirm(
() => {
deleteNode({
variables: {
input: { riskAssessmentNodeId: props.node.id },
connections: [props.connectionId],
},
});
},
{ message: __("Delete this node?") },
)}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
<Dialog className="max-w-lg" ref={dialogRef} title={<Breadcrumb items={[__("Nodes"), __("Edit")]} />}>
<form onSubmit={e => void handleSubmit((d) => {
updateNode({
variables: { input: { id: props.node.id, name: d.name, nodeType: d.nodeType as "ENTITY" | "BOUNDARY" | "ASSET" | "DATA" } },
onCompleted: () => { dialogRef.current?.close(); },
});
})(e)}
>
<DialogContent padded className="space-y-4">
<ControlledField label={__("Type")} name="nodeType" control={control} type="select">
<Option value="ENTITY">{__("Entity")}</Option>
<Option value="BOUNDARY">{__("Boundary")}</Option>
<Option value="ASSET">{__("Asset")}</Option>
<Option value="DATA">{__("Data")}</Option>
</ControlledField>
<Field label={__("Name")} {...register("name", { required: __("This field is required") })} type="text" />
</DialogContent>
<DialogFooter><Button type="submit">{__("Save")}</Button></DialogFooter>
</form>
</Dialog>
</>
);
}

127
apps/console/src/pages/organizations/risk-assessments/_components/ProcessActions.tsx Normal file
View File

@@ -0,0 +1,127 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
ActionDropdown,
Breadcrumb,
Button,
Dialog,
DialogContent,
DialogFooter,
DropdownItem,
Field,
IconPencil,
IconTrashCan,
Option,
useConfirm,
useDialogRef,
} from "@probo/ui";
import { useForm } from "react-hook-form";
import { graphql, useMutation } from "react-relay";
import type { ProcessActionsDeleteMutation } from "#/__generated__/core/ProcessActionsDeleteMutation.graphql";
import type { ProcessActionsUpdateMutation } from "#/__generated__/core/ProcessActionsUpdateMutation.graphql";
import { ControlledField } from "#/components/form/ControlledField";
const updateProcessMutation = graphql`
mutation ProcessActionsUpdateMutation($input: UpdateRiskAssessmentProcessInput!) {
updateRiskAssessmentProcess(input: $input) {
riskAssessmentProcess { id sourceNodeId targetNodeId name }
}
}
`;
const deleteProcessMutation = graphql`
mutation ProcessActionsDeleteMutation(
$input: DeleteRiskAssessmentProcessInput!
$connections: [ID!]!
) {
deleteRiskAssessmentProcess(input: $input) {
deletedRiskAssessmentProcessId @deleteEdge(connections: $connections)
}
}
`;
export function ProcessActions(props: {
process: { id: string; name: string; sourceNodeId: string; targetNodeId: string };
nodes: { id: string; name: string }[];
connectionId: string;
}) {
const { __ } = useTranslate();
const confirm = useConfirm();
const dialogRef = useDialogRef();
const [updateProcess] = useMutation<ProcessActionsUpdateMutation>(updateProcessMutation);
const [deleteProcess] = useMutation<ProcessActionsDeleteMutation>(deleteProcessMutation);
const { register, control, handleSubmit } = useForm({
values: {
name: props.process.name,
sourceNodeId: props.process.sourceNodeId,
targetNodeId: props.process.targetNodeId,
},
});
return (
<>
<ActionDropdown>
<DropdownItem icon={IconPencil} onSelect={() => dialogRef.current?.open()}>
{__("Edit")}
</DropdownItem>
<DropdownItem
icon={IconTrashCan}
variant="danger"
onSelect={() => confirm(
() => {
deleteProcess({
variables: {
input: { riskAssessmentProcessId: props.process.id },
connections: [props.connectionId],
},
});
},
{ message: __("Delete this process?") },
)}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
<Dialog className="max-w-lg" ref={dialogRef} title={<Breadcrumb items={[__("Processes"), __("Edit")]} />}>
<form onSubmit={e => void handleSubmit((d) => {
updateProcess({
variables: {
input: {
id: props.process.id,
name: d.name,
sourceNodeId: d.sourceNodeId,
targetNodeId: d.targetNodeId,
},
},
onCompleted: () => { dialogRef.current?.close(); },
});
})(e)}
>
<DialogContent padded className="space-y-4">
<ControlledField label={__("Source")} name="sourceNodeId" control={control} type="select" placeholder={__("Select source node")}>
{props.nodes.map(n => <Option key={n.id} value={n.id}>{n.name}</Option>)}
</ControlledField>
<ControlledField label={__("Target")} name="targetNodeId" control={control} type="select" placeholder={__("Select target node")}>
{props.nodes.map(n => <Option key={n.id} value={n.id}>{n.name}</Option>)}
</ControlledField>
<Field label={__("Name")} {...register("name", { required: __("This field is required") })} type="text" />
</DialogContent>
<DialogFooter><Button type="submit">{__("Save")}</Button></DialogFooter>
</form>
</Dialog>
</>
);
}

303
apps/console/src/pages/organizations/risk-assessments/_components/ScenarioInScopeActions.tsx Normal file
View File

@@ -0,0 +1,303 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
ActionDropdown,
Badge,
Breadcrumb,
Button,
Dialog,
DialogContent,
DialogFooter,
DropdownItem,
Field,
IconCrossLargeX,
IconPencil,
IconTrashCan,
Option,
Select,
useConfirm,
useDialogRef,
} from "@probo/ui";
import { Suspense } from "react";
import { useForm } from "react-hook-form";
import { graphql, useLazyLoadQuery, useMutation } from "react-relay";
import type { ScenarioInScopeActionsDeleteMutation } from "#/__generated__/core/ScenarioInScopeActionsDeleteMutation.graphql";
import type { ScenarioInScopeActionsLinkRiskMutation } from "#/__generated__/core/ScenarioInScopeActionsLinkRiskMutation.graphql";
import type { ScenarioInScopeActionsLinkThreatMutation } from "#/__generated__/core/ScenarioInScopeActionsLinkThreatMutation.graphql";
import type { ScenarioInScopeActionsRisksQuery } from "#/__generated__/core/ScenarioInScopeActionsRisksQuery.graphql";
import type { ScenarioInScopeActionsUnlinkRiskMutation } from "#/__generated__/core/ScenarioInScopeActionsUnlinkRiskMutation.graphql";
import type { ScenarioInScopeActionsUnlinkThreatMutation } from "#/__generated__/core/ScenarioInScopeActionsUnlinkThreatMutation.graphql";
import type { ScenarioInScopeActionsUpdateMutation } from "#/__generated__/core/ScenarioInScopeActionsUpdateMutation.graphql";
import { useOrganizationId } from "#/hooks/useOrganizationId";
const updateScenarioMutation = graphql`
mutation ScenarioInScopeActionsUpdateMutation($input: UpdateRiskAssessmentScenarioInput!) {
updateRiskAssessmentScenario(input: $input) {
riskAssessmentScenario {
id name description
risks(first: 10) { edges { node { id name } } }
threats(first: 10) { edges { node { id name } } }
}
}
}
`;
const deleteScenarioMutation = graphql`
mutation ScenarioInScopeActionsDeleteMutation(
$input: DeleteRiskAssessmentScenarioInput!
$connections: [ID!]!
) {
deleteRiskAssessmentScenario(input: $input) {
deletedRiskAssessmentScenarioId @deleteEdge(connections: $connections)
}
}
`;
const linkThreatMutation = graphql`
mutation ScenarioInScopeActionsLinkThreatMutation($input: LinkRiskAssessmentScenarioThreatInput!) {
linkRiskAssessmentScenarioThreat(input: $input) {
riskAssessmentScenario {
id
threats(first: 10) { edges { node { id name } } }
}
}
}
`;
const unlinkThreatMutation = graphql`
mutation ScenarioInScopeActionsUnlinkThreatMutation($input: UnlinkRiskAssessmentScenarioThreatInput!) {
unlinkRiskAssessmentScenarioThreat(input: $input) {
riskAssessmentScenario {
id
threats(first: 10) { edges { node { id name } } }
}
}
}
`;
const linkRiskMutation = graphql`
mutation ScenarioInScopeActionsLinkRiskMutation($input: LinkRiskAssessmentScenarioRiskInput!) {
linkRiskAssessmentScenarioRisk(input: $input) {
riskAssessmentScenario {
id
risks(first: 10) { edges { node { id name } } }
}
riskAssessmentScenarioEdge { node { id } }
}
}
`;
const unlinkRiskMutation = graphql`
mutation ScenarioInScopeActionsUnlinkRiskMutation($input: UnlinkRiskAssessmentScenarioRiskInput!) {
unlinkRiskAssessmentScenarioRisk(input: $input) {
riskAssessmentScenario {
id
risks(first: 10) { edges { node { id name } } }
}
deletedRiskAssessmentScenarioId
}
}
`;
const risksQuery = graphql`
query ScenarioInScopeActionsRisksQuery($organizationId: ID!) {
node(id: $organizationId) {
... on Organization {
risks(first: 100) {
edges { node { id name } }
}
}
}
}
`;
function RiskSelector(props: {
scenarioId: string;
linkedRiskIds: Set<string>;
}) {
const { __ } = useTranslate();
const organizationId = useOrganizationId();
const [linkRisk] = useMutation<ScenarioInScopeActionsLinkRiskMutation>(linkRiskMutation);
const data = useLazyLoadQuery<ScenarioInScopeActionsRisksQuery>(
risksQuery,
{ organizationId },
{ fetchPolicy: "store-or-network" },
);
const allRisks = data.node?.risks?.edges?.map(e => e.node) ?? [];
const availableRisks = allRisks.filter(r => !props.linkedRiskIds.has(r.id));
if (availableRisks.length === 0) {
return <p className="text-xs text-txt-tertiary">{__("No more risks available.")}</p>;
}
return (
<Select
placeholder={__("Select a risk to link...")}
onValueChange={(riskId) => {
if (typeof riskId !== "string") return;
linkRisk({
variables: { input: { riskAssessmentScenarioId: props.scenarioId, riskId } },
});
}}
>
{availableRisks.map(r => (
<Option key={r.id} value={r.id}>{r.name}</Option>
))}
</Select>
);
}
export function ScenarioInScopeActions(props: {
scenario: {
id: string;
name: string;
description: string | null;
risks: readonly { id: string; name: string }[];
threats: readonly { id: string; name: string }[];
};
scopeThreats: readonly { id: string; name: string }[];
connectionId: string;
}) {
const { __ } = useTranslate();
const confirm = useConfirm();
const dialogRef = useDialogRef();
const [updateScenario] = useMutation<ScenarioInScopeActionsUpdateMutation>(updateScenarioMutation);
const [deleteScenario] = useMutation<ScenarioInScopeActionsDeleteMutation>(deleteScenarioMutation);
const [linkThreat] = useMutation<ScenarioInScopeActionsLinkThreatMutation>(linkThreatMutation);
const [unlinkThreat] = useMutation<ScenarioInScopeActionsUnlinkThreatMutation>(unlinkThreatMutation);
const [unlinkRisk] = useMutation<ScenarioInScopeActionsUnlinkRiskMutation>(unlinkRiskMutation);
const { register, handleSubmit } = useForm({
values: { name: props.scenario.name, description: props.scenario.description ?? "" },
});
const linkedThreatIds = new Set(props.scenario.threats.map(t => t.id));
const linkedRiskIds = new Set(props.scenario.risks.map(r => r.id));
const availableThreats = props.scopeThreats.filter(t => !linkedThreatIds.has(t.id));
return (
<>
<ActionDropdown>
<DropdownItem icon={IconPencil} onSelect={() => dialogRef.current?.open()}>
{__("Edit")}
</DropdownItem>
<DropdownItem
icon={IconTrashCan}
variant="danger"
onSelect={() => confirm(
() => {
deleteScenario({
variables: {
input: { riskAssessmentScenarioId: props.scenario.id },
connections: [props.connectionId],
},
});
},
{ message: __("Delete this scenario?") },
)}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
<Dialog className="max-w-lg" ref={dialogRef} title={<Breadcrumb items={[__("Scenarios"), __("Edit")]} />}>
<form onSubmit={e => void handleSubmit((d) => {
updateScenario({
variables: { input: { id: props.scenario.id, name: d.name, description: d.description || null } },
onCompleted: () => { dialogRef.current?.close(); },
});
})(e)}
>
<DialogContent padded className="space-y-4">
<Field label={__("Name")} {...register("name", { required: __("This field is required") })} type="text" />
<Field label={__("Description")} {...register("description")} type="textarea" rows={3} />
<div>
<div className="text-sm font-medium mb-2">{__("Threats")}</div>
{props.scenario.threats.length > 0 && (
<div className="flex flex-wrap gap-1 mb-2">
{props.scenario.threats.map(threat => (
<Badge key={threat.id}>
{threat.name}
<button
type="button"
className="ml-1 hover:text-txt-danger"
onClick={() => {
unlinkThreat({
variables: {
input: { riskAssessmentScenarioId: props.scenario.id, threatId: threat.id },
},
});
}}
>
<IconCrossLargeX size={12} />
</button>
</Badge>
))}
</div>
)}
{availableThreats.length > 0 && (
<Select
placeholder={__("Select a threat to link...")}
onValueChange={(threatId) => {
if (typeof threatId !== "string") return;
linkThreat({ variables: { input: { riskAssessmentScenarioId: props.scenario.id, threatId } } });
}}
>
{availableThreats.map(t => (
<Option key={t.id} value={t.id}>{t.name}</Option>
))}
</Select>
)}
</div>
<div>
<div className="text-sm font-medium mb-2">{__("Risks")}</div>
{props.scenario.risks.length > 0 && (
<div className="flex flex-wrap gap-1 mb-2">
{props.scenario.risks.map(risk => (
<Badge key={risk.id}>
{risk.name}
<button
type="button"
className="ml-1 hover:text-txt-danger"
onClick={() => {
unlinkRisk({
variables: {
input: { riskAssessmentScenarioId: props.scenario.id, riskId: risk.id },
},
});
}}
>
<IconCrossLargeX size={12} />
</button>
</Badge>
))}
</div>
)}
<Suspense fallback={<p className="text-xs text-txt-tertiary">{__("Loading risks...")}</p>}>
<RiskSelector
scenarioId={props.scenario.id}
linkedRiskIds={linkedRiskIds}
/>
</Suspense>
</div>
</DialogContent>
<DialogFooter><Button type="submit">{__("Save")}</Button></DialogFooter>
</form>
</Dialog>
</>
);
}

131
apps/console/src/pages/organizations/risk-assessments/_components/ScopeActions.tsx Normal file
View File

@@ -0,0 +1,131 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
ActionDropdown,
Breadcrumb,
Button,
Dialog,
DialogContent,
DialogFooter,
DropdownItem,
Field,
IconPencil,
IconTrashCan,
useConfirm,
useDialogRef,
} from "@probo/ui";
import { useForm } from "react-hook-form";
import { graphql, useMutation } from "react-relay";
import type { ScopeActionsDeleteMutation } from "#/__generated__/core/ScopeActionsDeleteMutation.graphql";
import type { ScopeActionsUpdateMutation } from "#/__generated__/core/ScopeActionsUpdateMutation.graphql";
const updateScopeMutation = graphql`
mutation ScopeActionsUpdateMutation(
$input: UpdateRiskAssessmentScopeInput!
) {
updateRiskAssessmentScope(input: $input) {
riskAssessmentScope { id name }
}
}
`;
const deleteScopeMutation = graphql`
mutation ScopeActionsDeleteMutation(
$input: DeleteRiskAssessmentScopeInput!
$connections: [ID!]!
) {
deleteRiskAssessmentScope(input: $input) {
deletedRiskAssessmentScopeId @deleteEdge(connections: $connections)
}
}
`;
export function ScopeActions(props: {
scope: { id: string; name: string };
connectionId: string;
}) {
const { __ } = useTranslate();
const confirm = useConfirm();
const dialogRef = useDialogRef();
const [updateScope] = useMutation<ScopeActionsUpdateMutation>(updateScopeMutation);
const [deleteScope] = useMutation<ScopeActionsDeleteMutation>(deleteScopeMutation);
const { register, handleSubmit, formState } = useForm({
values: {
name: props.scope.name,
},
});
const onEdit = (data: { name: string }) => {
updateScope({
variables: {
input: {
id: props.scope.id,
name: data.name,
},
},
onCompleted: () => {
dialogRef.current?.close();
},
});
};
const onDelete = () => {
confirm(
() => {
deleteScope({
variables: {
input: { riskAssessmentScopeId: props.scope.id },
connections: [props.connectionId],
},
});
},
{ message: __("Delete this scope and all its nodes, processes, and threats?") },
);
};
return (
<>
<ActionDropdown>
<DropdownItem icon={IconPencil} onSelect={() => dialogRef.current?.open()}>
{__("Edit")}
</DropdownItem>
<DropdownItem icon={IconTrashCan} variant="danger" onSelect={onDelete}>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
<Dialog
className="max-w-lg"
ref={dialogRef}
title={<Breadcrumb items={[__("Scopes"), __("Edit Scope")]} />}
>
<form onSubmit={e => void handleSubmit(onEdit)(e)}>
<DialogContent padded className="space-y-4">
<Field
label={__("Name")}
{...register("name", { required: __("This field is required") })}
type="text"
error={formState.errors.name?.message}
/>
</DialogContent>
<DialogFooter>
<Button type="submit">{__("Save")}</Button>
</DialogFooter>
</form>
</Dialog>
</>
);
}

376
apps/console/src/pages/organizations/risk-assessments/_components/ScopeCard.tsx Normal file
View File

@@ -0,0 +1,376 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Badge,
Card,
IconChevronDown,
IconChevronRight,
Table,
Tbody,
Td,
Th,
Thead,
Tr,
} from "@probo/ui";
import { type ReactNode, useState } from "react";
import { graphql, useFragment } from "react-relay";
import { Link } from "react-router";
import type { ScopeCardFragment$key } from "#/__generated__/core/ScopeCardFragment.graphql";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import { CreateNodeDialog } from "./CreateNodeDialog";
import { CreateProcessDialog } from "./CreateProcessDialog";
import { CreateScenarioInScopeDialog } from "./CreateScenarioInScopeDialog";
import { CreateThreatDialog } from "./CreateThreatDialog";
import { NodeActions } from "./NodeActions";
import { ProcessActions } from "./ProcessActions";
import { ScenarioInScopeActions } from "./ScenarioInScopeActions";
import { ScopeActions } from "./ScopeActions";
import { ThreatActions } from "./ThreatActions";
export const scopeCardFragment = graphql`
fragment ScopeCardFragment on RiskAssessmentScope {
id
name
nodes(first: 100)
@connection(key: "RiskAssessmentScope_nodes", filters: []) {
__id
edges {
node { id nodeType name }
}
}
processes(first: 100)
@connection(key: "RiskAssessmentScope_processes", filters: []) {
__id
edges {
node { id sourceNodeId targetNodeId name }
}
}
threats(first: 100)
@connection(key: "RiskAssessmentScope_threats", filters: []) {
__id
edges {
node { id processId name category }
}
}
scenarios(first: 100)
@connection(key: "RiskAssessmentScope_scenarios", filters: []) {
__id
edges {
node {
id name description
risks(first: 10) {
edges { node { id name } }
}
threats(first: 10) {
edges { node { id name } }
}
}
}
}
}
`;
function SectionHeader(props: { title: string; hint?: string; children: ReactNode }) {
return (
<div className="mb-3">
<div className="flex items-center justify-between">
<h3 className="text-sm font-semibold">{props.title}</h3>
{props.children}
</div>
{props.hint && (
<p className="text-xs text-txt-tertiary mt-1">{props.hint}</p>
)}
</div>
);
}
export function ScopeCard(props: {
scopeRef: ScopeCardFragment$key;
scopesConnectionId: string;
}) {
const { __ } = useTranslate();
const organizationId = useOrganizationId();
const [isOpen, setIsOpen] = useState(true);
const scope = useFragment(scopeCardFragment, props.scopeRef);
const { scopesConnectionId } = props;
const nodes = scope.nodes?.edges.map(e => e.node) ?? [];
const processes = scope.processes?.edges.map(e => e.node) ?? [];
const threats = scope.threats?.edges.map(e => e.node) ?? [];
const scenarios = scope.scenarios?.edges.map(e => e.node) ?? [];
const nodeMap = new Map(nodes.map(n => [n.id, n]));
const nodesConnId = scope.nodes?.__id ?? "";
const processesConnId = scope.processes?.__id ?? "";
const threatsConnId = scope.threats?.__id ?? "";
const scenariosConnId = scope.scenarios?.__id ?? "";
const ChevronIcon = isOpen ? IconChevronDown : IconChevronRight;
return (
<Card>
<button
type="button"
className="flex w-full items-center justify-between px-4 py-3"
onClick={() => setIsOpen(v => !v)}
>
<div className="text-left">
<h3 className="text-sm font-semibold">{scope.name}</h3>
</div>
<div className="flex items-center gap-2">
<span className="text-xs text-txt-tertiary">
{nodes.length}
{" "}
{__("nodes")}
{" · "}
{processes.length}
{" "}
{__("processes")}
{" · "}
{threats.length}
{" "}
{__("threats")}
{" · "}
{scenarios.length}
{" "}
{__("scenarios")}
</span>
<div
onClick={e => e.stopPropagation()}
onKeyDown={e => e.stopPropagation()}
>
<ScopeActions
scope={{ id: scope.id, name: scope.name }}
connectionId={scopesConnectionId}
/>
</div>
<ChevronIcon size={16} className="text-txt-tertiary" />
</div>
</button>
{isOpen && (
<div className="border-t border-border-low px-4 py-4 space-y-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div>
<SectionHeader
title={`${__("Nodes")} (${nodes.length})`}
hint={__("Entities, boundaries, assets, and data involved in this scope.")}
>
<CreateNodeDialog scopeId={scope.id} connectionId={nodesConnId} />
</SectionHeader>
<Table>
<Thead>
<Tr>
<Th>{__("Name")}</Th>
<Th>{__("Type")}</Th>
<Th className="w-12" />
</Tr>
</Thead>
<Tbody>
{nodes.map(node => (
<Tr key={node.id}>
<Td className="font-medium">{node.name}</Td>
<Td><Badge>{node.nodeType}</Badge></Td>
<Td>
<NodeActions
node={{ id: node.id, name: node.name, nodeType: node.nodeType }}
connectionId={nodesConnId}
/>
</Td>
</Tr>
))}
{nodes.length === 0 && (
<Tr>
<Td colSpan={3} className="text-center text-txt-secondary">{__("No nodes")}</Td>
</Tr>
)}
</Tbody>
</Table>
</div>
<div>
<SectionHeader
title={`${__("Processes")} (${processes.length})`}
hint={__("Data flows and interactions between nodes.")}
>
<CreateProcessDialog
scopeId={scope.id}
nodes={nodes.map(n => ({ id: n.id, name: n.name }))}
connectionId={processesConnId}
/>
</SectionHeader>
<Table>
<Thead>
<Tr>
<Th>{__("Name")}</Th>
<Th>{__("From")}</Th>
<Th>{__("To")}</Th>
<Th className="w-12" />
</Tr>
</Thead>
<Tbody>
{processes.map(process => (
<Tr key={process.id}>
<Td className="font-medium">{process.name}</Td>
<Td className="text-txt-secondary">{nodeMap.get(process.sourceNodeId)?.name ?? "—"}</Td>
<Td className="text-txt-secondary">{nodeMap.get(process.targetNodeId)?.name ?? "—"}</Td>
<Td>
<ProcessActions
process={{
id: process.id,
name: process.name,
sourceNodeId: process.sourceNodeId,
targetNodeId: process.targetNodeId,
}}
nodes={nodes.map(n => ({ id: n.id, name: n.name }))}
connectionId={processesConnId}
/>
</Td>
</Tr>
))}
{processes.length === 0 && (
<Tr>
<Td colSpan={4} className="text-center text-txt-secondary">{__("No processes")}</Td>
</Tr>
)}
</Tbody>
</Table>
</div>
</div>
<div>
<SectionHeader
title={`${__("Threats")} (${threats.length})`}
hint={__("Potential threats targeting a process. Link threats to risks via scenarios.")}
>
<CreateThreatDialog
scopeId={scope.id}
processes={processes.map(p => ({ id: p.id, name: p.name }))}
connectionId={threatsConnId}
/>
</SectionHeader>
<Table>
<Thead>
<Tr>
<Th>{__("Threat")}</Th>
<Th>{__("Category")}</Th>
<Th>{__("Process")}</Th>
<Th className="w-12" />
</Tr>
</Thead>
<Tbody>
{threats.map((threat) => {
const process = processes.find(p => p.id === threat.processId);
return (
<Tr key={threat.id}>
<Td className="font-medium">{threat.name}</Td>
<Td><Badge>{threat.category}</Badge></Td>
<Td className="text-txt-secondary">{process?.name ?? "—"}</Td>
<Td>
<ThreatActions
threat={{ id: threat.id, name: threat.name, category: threat.category }}
connectionId={threatsConnId}
/>
</Td>
</Tr>
);
})}
{threats.length === 0 && (
<Tr>
<Td colSpan={4} className="text-center text-txt-secondary">{__("No threats")}</Td>
</Tr>
)}
</Tbody>
</Table>
</div>
<div>
<SectionHeader
title={`${__("Scenarios")} (${scenarios.length})`}
hint={__("Risk scenarios linking threats to risks.")}
>
<CreateScenarioInScopeDialog
scopeId={scope.id}
threats={threats.map(t => ({ id: t.id, name: t.name }))}
connectionId={scenariosConnId}
/>
</SectionHeader>
<Table>
<Thead>
<Tr>
<Th>{__("Scenario")}</Th>
<Th>{__("Risks")}</Th>
<Th>{__("Threats")}</Th>
<Th className="w-12" />
</Tr>
</Thead>
<Tbody>
{scenarios.map((scenario) => {
const scenarioRisks = scenario.risks?.edges.map(e => e.node) ?? [];
const scenarioThreats = scenario.threats?.edges.map(e => e.node) ?? [];
return (
<Tr key={scenario.id}>
<Td className="font-medium">{scenario.name}</Td>
<Td className="text-txt-secondary">
{scenarioRisks.length > 0
? scenarioRisks.map((risk, i) => (
<span key={risk.id}>
{i > 0 && ", "}
<Link
to={`/organizations/${organizationId}/risks/${risk.id}`}
className="text-txt-primary underline"
>
{risk.name}
</Link>
</span>
))
: "—"}
</Td>
<Td className="text-txt-secondary">
{scenarioThreats.length > 0
? scenarioThreats.map(t => t.name).join(", ")
: "—"}
</Td>
<Td>
<ScenarioInScopeActions
scenario={{
id: scenario.id,
name: scenario.name,
description: scenario.description ?? null,
risks: scenarioRisks,
threats: scenarioThreats,
}}
scopeThreats={threats.map(t => ({ id: t.id, name: t.name }))}
connectionId={scenariosConnId}
/>
</Td>
</Tr>
);
})}
{scenarios.length === 0 && (
<Tr>
<Td colSpan={4} className="text-center text-txt-secondary">{__("No scenarios")}</Td>
</Tr>
)}
</Tbody>
</Table>
</div>
</div>
)}
</Card>
);
}

113
apps/console/src/pages/organizations/risk-assessments/_components/ThreatActions.tsx Normal file
View File

@@ -0,0 +1,113 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
ActionDropdown,
Breadcrumb,
Button,
Dialog,
DialogContent,
DialogFooter,
DropdownItem,
Field,
IconPencil,
IconTrashCan,
useConfirm,
useDialogRef,
} from "@probo/ui";
import { useForm } from "react-hook-form";
import { graphql, useMutation } from "react-relay";
import type { ThreatActionsDeleteMutation } from "#/__generated__/core/ThreatActionsDeleteMutation.graphql";
import type { ThreatActionsUpdateMutation } from "#/__generated__/core/ThreatActionsUpdateMutation.graphql";
const updateThreatMutation = graphql`
mutation ThreatActionsUpdateMutation($input: UpdateRiskAssessmentThreatInput!) {
updateRiskAssessmentThreat(input: $input) {
riskAssessmentThreat { id processId name category }
}
}
`;
const deleteThreatMutation = graphql`
mutation ThreatActionsDeleteMutation(
$input: DeleteRiskAssessmentThreatInput!
$connections: [ID!]!
) {
deleteRiskAssessmentThreat(input: $input) {
deletedRiskAssessmentThreatId @deleteEdge(connections: $connections)
}
}
`;
export function ThreatActions(props: {
threat: { id: string; name: string; category: string };
connectionId: string;
}) {
const { __ } = useTranslate();
const confirm = useConfirm();
const dialogRef = useDialogRef();
const [updateThreat] = useMutation<ThreatActionsUpdateMutation>(updateThreatMutation);
const [deleteThreat] = useMutation<ThreatActionsDeleteMutation>(deleteThreatMutation);
const { register, handleSubmit } = useForm({
values: { name: props.threat.name, category: props.threat.category },
});
return (
<>
<ActionDropdown>
<DropdownItem icon={IconPencil} onSelect={() => dialogRef.current?.open()}>
{__("Edit")}
</DropdownItem>
<DropdownItem
icon={IconTrashCan}
variant="danger"
onSelect={() => confirm(
() => {
deleteThreat({
variables: {
input: { riskAssessmentThreatId: props.threat.id },
connections: [props.connectionId],
},
});
},
{ message: __("Delete this threat?") },
)}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
<Dialog className="max-w-lg" ref={dialogRef} title={<Breadcrumb items={[__("Threats"), __("Edit")]} />}>
<form onSubmit={e => void handleSubmit((d) => {
updateThreat({
variables: { input: { id: props.threat.id, name: d.name, category: d.category } },
onCompleted: () => { dialogRef.current?.close(); },
});
})(e)}
>
<DialogContent padded className="space-y-4">
<Field label={__("Name")} {...register("name", { required: __("This field is required") })} type="text" />
<Field
label={__("Category")}
{...register("category", { required: __("This field is required") })}
type="text"
placeholder={__("e.g. Confidentiality")}
/>
</DialogContent>
<DialogFooter><Button type="submit">{__("Save")}</Button></DialogFooter>
</form>
</Dialog>
</>
);
}

37
apps/console/src/pages/organizations/risk-assessments/routes.ts Normal file
View File

@@ -0,0 +1,37 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { lazy } from "@probo/react-lazy";
import type { AppRoute } from "@probo/routes";
import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
export const riskAssessmentRoutes = [
{
path: "risk-assessments",
Fallback: PageSkeleton,
Component: lazy(
() =>
import("./RiskAssessmentsPageLoader"),
),
},
{
path: "risk-assessments/:riskAssessmentId",
Fallback: PageSkeleton,
Component: lazy(
() =>
import("./RiskAssessmentDetailPageLoader"),
),
},
] satisfies AppRoute[];

108
apps/console/src/pages/organizations/risks/RiskDetailPage.tsx → apps/console/src/pages/organizations/risks/RiskDetailLayout.tsx
View File

@@ -32,25 +32,97 @@ import {
Tabs,
useConfirm,
} from "@probo/ui";
import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
import { graphql, type PreloadedQuery, useMutation, usePreloadedQuery } from "react-relay";
import { Outlet, useNavigate, useParams } from "react-router";
import { ConnectionHandler } from "relay-runtime";
import type { RiskGraphNodeQuery } from "#/__generated__/core/RiskGraphNodeQuery.graphql";
import {
riskNodeQuery,
RisksConnectionKey,
useDeleteRiskMutation,
} from "#/hooks/graph/RiskGraph";
import type { RiskDetailLayoutDeleteMutation } from "#/__generated__/core/RiskDetailLayoutDeleteMutation.graphql";
import type { RiskDetailLayoutQuery } from "#/__generated__/core/RiskDetailLayoutQuery.graphql";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import { RisksConnectionKey } from "#/pages/organizations/risks/RisksPage";
import FormRiskDialog from "./FormRiskDialog";
/* eslint-disable relay/unused-fields, relay/must-colocate-fragment-spreads */
export const riskDetailLayoutQuery = graphql`
query RiskDetailLayoutQuery($riskId: ID!) {
node(id: $riskId) {
... on Risk {
id
name
description
treatment
owner {
id
fullName
}
note
inherentRiskScore
residualRiskScore
measuresInfo: measures(first: 0) {
totalCount
}
documentsInfo: documents(first: 0) {
totalCount
}
controlsInfo: controls(first: 0) {
totalCount
}
obligationsInfo: obligations(first: 0) {
totalCount
}
scenariosInfo: scenarios(first: 0) {
totalCount
}
canUpdate: permission(action: "core:risk:update")
canDelete: permission(action: "core:risk:delete")
canCreateDocumentMapping: permission(
action: "core:risk:create-document-mapping"
)
canDeleteDocumentMapping: permission(
action: "core:risk:delete-document-mapping"
)
canCreateMeasureMapping: permission(
action: "core:risk:create-measure-mapping"
)
canDeleteMeasureMapping: permission(
action: "core:risk:delete-measure-mapping"
)
canCreateObligationMapping: permission(
action: "core:risk:create-obligation-mapping"
)
canDeleteObligationMapping: permission(
action: "core:risk:delete-obligation-mapping"
)
...useRiskFormFragment
...RiskOverviewTabFragment
...RiskMeasuresTabFragment
...RiskDocumentsTabFragment
...RiskControlsTabFragment
...RiskObligationsTabFragment
...RiskScenariosPageFragment
}
}
}
`;
const deleteRiskMutation = graphql`
mutation RiskDetailLayoutDeleteMutation(
$input: DeleteRiskInput!
$connections: [ID!]!
) {
deleteRisk(input: $input) {
deletedRiskId @deleteEdge(connections: $connections)
}
}
`;
type Props = {
queryRef: PreloadedQuery<RiskGraphNodeQuery>;
queryRef: PreloadedQuery<RiskDetailLayoutQuery>;
};
export default function RiskDetailPage(props: Props) {
export default function RiskDetailLayout(props: Props) {
const { riskId } = useParams<{
riskId: string;
}>();
@@ -62,12 +134,12 @@ export default function RiskDetailPage(props: Props) {
}
const { __ } = useTranslate();
const { node: risk } = usePreloadedQuery<RiskGraphNodeQuery>(
riskNodeQuery,
const { node: risk } = usePreloadedQuery(
riskDetailLayoutQuery,
props.queryRef,
);
const [deleteRisk] = useDeleteRiskMutation();
const [deleteRisk] = useMutation<RiskDetailLayoutDeleteMutation>(deleteRiskMutation);
usePageTitle(risk.name ?? "Risk detail");
const confirm = useConfirm();
@@ -79,16 +151,19 @@ export default function RiskDetailPage(props: Props) {
);
confirm(
() =>
new Promise<void>((resolve) => {
new Promise<void>((resolve, reject) => {
void deleteRisk({
variables: {
input: { riskId },
connections: [connectionId],
},
onSuccess() {
onCompleted() {
void navigate(`/organizations/${organizationId}/risks`);
resolve();
},
onError(error) {
reject(error);
},
});
}),
{
@@ -106,6 +181,7 @@ export default function RiskDetailPage(props: Props) {
const measuresCount = risk.measuresInfo?.totalCount ?? 0;
const controlsCount = risk.controlsInfo?.totalCount ?? 0;
const obligationsCount = risk.obligationsInfo?.totalCount ?? 0;
const scenariosCount = risk.scenariosInfo?.totalCount ?? 0;
const risksUrl = `/organizations/${organizationId}/risks`;
const baseTabUrl = `/organizations/${organizationId}/risks/${riskId}`;
@@ -169,6 +245,10 @@ export default function RiskDetailPage(props: Props) {
{__("Obligations")}
<TabBadge>{obligationsCount}</TabBadge>
</TabLink>
<TabLink to={`${baseTabUrl}/scenarios`}>
{__("Scenarios")}
<TabBadge>{scenariosCount}</TabBadge>
</TabLink>
</Tabs>
<Outlet context={{ risk }} />

44
apps/console/src/pages/organizations/risks/RiskDetailLayoutLoader.tsx Normal file
View File

@@ -0,0 +1,44 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { Suspense, useEffect } from "react";
import { useQueryLoader } from "react-relay";
import { useParams } from "react-router";
import type { RiskDetailLayoutQuery } from "#/__generated__/core/RiskDetailLayoutQuery.graphql";
import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
import RiskDetailLayout, { riskDetailLayoutQuery } from "./RiskDetailLayout";
export default function RiskDetailLayoutLoader() {
const { riskId } = useParams<{ riskId: string }>();
const [queryRef, loadQuery]
= useQueryLoader<RiskDetailLayoutQuery>(riskDetailLayoutQuery);
useEffect(() => {
if (riskId) {
loadQuery({ riskId });
}
}, [loadQuery, riskId]);
if (!queryRef) {
return <PageSkeleton />;
}
return (
<Suspense fallback={<PageSkeleton />}>
<RiskDetailLayout queryRef={queryRef} />
</Suspense>
);
}

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

@@ -35,21 +35,108 @@ import {
useConfirm,
useDialogRef,
} from "@probo/ui";
import type { PreloadedQuery } from "react-relay";
import {
graphql,
type PreloadedQuery,
useMutation,
usePaginationFragment,
usePreloadedQuery,
} from "react-relay";
import { useNavigate } from "react-router";
import type { RiskGraphFragment$data } from "#/__generated__/core/RiskGraphFragment.graphql";
import type { RiskGraphListQuery } from "#/__generated__/core/RiskGraphListQuery.graphql";
import type { RisksPageDeleteMutation } from "#/__generated__/core/RisksPageDeleteMutation.graphql";
import type { RisksPageFragment$data, RisksPageFragment$key } from "#/__generated__/core/RisksPageFragment.graphql";
import type { RisksPageQuery } from "#/__generated__/core/RisksPageQuery.graphql";
import type { RisksPageRefetchQuery } from "#/__generated__/core/RisksPageRefetchQuery.graphql";
import { SortableTable, SortableTh } from "#/components/SortableTable";
import { useDeleteRiskMutation, useRisksQuery } from "#/hooks/graph/RiskGraph";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import type { NodeOf } from "#/types";
import { PublishRiskListDialog } from "./dialogs/PublishRiskListDialog";
import FormRiskDialog from "./FormRiskDialog";
/* eslint-disable relay/unused-fields, relay/must-colocate-fragment-spreads */
export const risksPageQuery = graphql`
query RisksPageQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
id
...RisksPageFragment
}
}
`;
const risksFragment = graphql`
fragment RisksPageFragment on Organization
@refetchable(queryName: "RisksPageRefetchQuery")
@argumentDefinitions(
first: { type: "Int", defaultValue: 50 }
order: {
type: "RiskOrder"
defaultValue: { direction: DESC, field: CREATED_AT }
}
after: { type: "CursorKey", defaultValue: null }
before: { type: "CursorKey", defaultValue: null }
last: { type: "Int", defaultValue: null }
) {
canCreateRisk: permission(action: "core:risk:create")
canPublishRisk: permission(action: "core:risk:publish")
risksDocument {
id
currentPublishedMajor
currentPublishedMinor
defaultApprovers {
id
}
}
risks(
first: $first
after: $after
last: $last
before: $before
orderBy: $order
) @connection(key: "RisksPage_risks", filters: []) {
__id
edges {
node {
id
name
category
treatment
owner {
id
fullName
}
inherentLikelihood
inherentImpact
residualLikelihood
residualImpact
inherentRiskScore
residualRiskScore
canUpdate: permission(action: "core:risk:update")
canDelete: permission(action: "core:risk:delete")
...useRiskFormFragment
}
}
}
}
`;
const deleteRiskMutation = graphql`
mutation RisksPageDeleteMutation(
$input: DeleteRiskInput!
$connections: [ID!]!
) {
deleteRisk(input: $input) {
deletedRiskId @deleteEdge(connections: $connections)
}
}
`;
export const RisksConnectionKey = "RisksPage_risks";
type Props = {
queryRef: PreloadedQuery<RiskGraphListQuery>;
queryRef: PreloadedQuery<RisksPageQuery>;
};
export default function RisksPage(props: Props) {
@@ -57,12 +144,17 @@ export default function RisksPage(props: Props) {
const organizationId = useOrganizationId();
const navigate = useNavigate();
const {
data: { canCreateRisk, canPublishRisk, risksDocument },
connectionId,
risks,
...pagination
} = useRisksQuery(props.queryRef);
const queryData = usePreloadedQuery(risksPageQuery, props.queryRef);
const { data: fragmentData, ...pagination } = usePaginationFragment<
RisksPageRefetchQuery,
RisksPageFragment$key
>(risksFragment, queryData.organization);
const canCreateRisk = fragmentData.canCreateRisk;
const canPublishRisk = fragmentData.canPublishRisk;
const risksDocument = fragmentData.risksDocument;
const risks = fragmentData.risks?.edges.map(edge => edge.node) ?? [];
const connectionId = fragmentData.risks.__id;
const refetch = ({
order,
@@ -185,7 +277,7 @@ export default function RisksPage(props: Props) {
}
type RowProps = {
risk: NodeOf<RiskGraphFragment$data["risks"]>;
risk: NodeOf<RisksPageFragment$data["risks"]>;
connectionId: string;
organizationId: string;
hasAnyAction: boolean;
@@ -194,7 +286,7 @@ type RowProps = {
function RiskRow(props: RowProps) {
const { __ } = useTranslate();
const { risk, connectionId, organizationId } = props;
const [deleteRisk] = useDeleteRiskMutation();
const [deleteRisk] = useMutation<RisksPageDeleteMutation>(deleteRiskMutation);
const confirm = useConfirm();
const onDelete = () => {
confirm(

42
apps/console/src/pages/organizations/risks/RisksPageLoader.tsx Normal file
View File

@@ -0,0 +1,42 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { Suspense, useEffect } from "react";
import { useQueryLoader } from "react-relay";
import type { RisksPageQuery } from "#/__generated__/core/RisksPageQuery.graphql";
import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import RisksPage, { risksPageQuery } from "./RisksPage";
export default function RisksPageLoader() {
const organizationId = useOrganizationId();
const [queryRef, loadQuery]
= useQueryLoader<RisksPageQuery>(risksPageQuery);
useEffect(() => {
loadQuery({ organizationId });
}, [loadQuery, organizationId]);
if (!queryRef) {
return <PageSkeleton />;
}
return (
<Suspense fallback={<PageSkeleton />}>
<RisksPage queryRef={queryRef} />
</Suspense>
);
}

202
apps/console/src/pages/organizations/risks/_components/LinkScenarioDialog.tsx Normal file
View File

@@ -0,0 +1,202 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Button,
Dialog,
DialogContent,
DialogFooter,
IconMagnifyingGlass,
IconPlusLarge,
IconTrashCan,
InfiniteScrollTrigger,
Input,
Spinner,
} from "@probo/ui";
import { type ReactNode, Suspense, useMemo, useState } from "react";
import { useLazyLoadQuery, usePaginationFragment } from "react-relay";
import { graphql } from "relay-runtime";
import type {
LinkScenarioDialogFragment$data,
LinkScenarioDialogFragment$key,
} from "#/__generated__/core/LinkScenarioDialogFragment.graphql";
import type { LinkScenarioDialogQuery } from "#/__generated__/core/LinkScenarioDialogQuery.graphql";
import type { LinkScenarioDialogQuery_fragment } from "#/__generated__/core/LinkScenarioDialogQuery_fragment.graphql";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import type { NodeOf } from "#/types";
const scenariosQuery = graphql`
query LinkScenarioDialogQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
id
... on Organization {
...LinkScenarioDialogFragment
}
}
}
`;
const scenariosFragment = graphql`
fragment LinkScenarioDialogFragment on Organization
@refetchable(queryName: "LinkScenarioDialogQuery_fragment")
@argumentDefinitions(
first: { type: "Int", defaultValue: 20 }
after: { type: "CursorKey", defaultValue: null }
before: { type: "CursorKey", defaultValue: null }
last: { type: "Int", defaultValue: null }
) {
riskAssessmentScenarios(first: $first, after: $after, last: $last, before: $before)
@connection(key: "LinkScenarioDialogQuery_riskAssessmentScenarios") {
edges {
node {
id
name
description
}
}
}
}
`;
type Props = {
children: ReactNode;
connectionId: string;
disabled?: boolean;
linkedScenarios?: { id: string }[];
onLink: (scenarioId: string) => void;
onUnlink: (scenarioId: string) => void;
};
export function LinkScenarioDialog({ children, ...props }: Props) {
const { __ } = useTranslate();
return (
<Dialog trigger={children} title={__("Link scenarios")}>
<DialogContent>
<Suspense fallback={<Spinner centered />}>
<LinkScenarioDialogContent {...props} />
</Suspense>
</DialogContent>
<DialogFooter exitLabel={__("Close")} />
</Dialog>
);
}
function LinkScenarioDialogContent(props: Omit<Props, "children">) {
const organizationId = useOrganizationId();
const query = useLazyLoadQuery<LinkScenarioDialogQuery>(
scenariosQuery,
{
organizationId,
},
{ fetchPolicy: "network-only" },
);
const { data, loadNext, hasNext, isLoadingNext }
= usePaginationFragment<LinkScenarioDialogQuery_fragment, LinkScenarioDialogFragment$key>(
scenariosFragment,
query.organization as LinkScenarioDialogFragment$key,
);
const { __ } = useTranslate();
const [search, setSearch] = useState("");
const scenarios = useMemo(
() => data.riskAssessmentScenarios?.edges?.map(edge => edge.node) ?? [],
[data.riskAssessmentScenarios],
);
const linkedIds = useMemo(() => {
return new Set(props.linkedScenarios?.map(s => s.id) ?? []);
}, [props.linkedScenarios]);
const filteredScenarios = useMemo(() => {
return scenarios.filter(
scenario =>
scenario.name?.toLowerCase().includes(search.toLowerCase())
|| scenario.description?.toLowerCase().includes(search.toLowerCase()),
);
}, [scenarios, search]);
return (
<>
<div className="flex items-center gap-2 sticky top-0 relative py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
<Input
icon={IconMagnifyingGlass}
placeholder={__("Search scenarios...")}
onValueChange={setSearch}
/>
</div>
<div className="divide-y divide-border-low">
{filteredScenarios.map(scenario => (
<ScenarioRow
key={scenario.id}
scenario={scenario}
linkedScenarios={linkedIds}
onLink={props.onLink}
onUnlink={props.onUnlink}
disabled={props.disabled}
/>
))}
{hasNext && (
<InfiniteScrollTrigger
loading={isLoadingNext}
onView={() => loadNext(20)}
/>
)}
</div>
</>
);
}
type Scenario = NodeOf<LinkScenarioDialogFragment$data["riskAssessmentScenarios"]>;
function ScenarioRow(props: {
scenario: Scenario;
linkedScenarios: Set<string>;
onLink: (scenarioId: string) => void;
onUnlink: (scenarioId: string) => void;
disabled?: boolean;
}) {
const { __ } = useTranslate();
const isLinked = props.linkedScenarios.has(props.scenario.id);
const onToggle = () => {
if (isLinked) {
props.onUnlink(props.scenario.id);
} else {
props.onLink(props.scenario.id);
}
};
return (
<div className="flex items-center justify-between p-4 hover:bg-level-1">
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-txt-primary truncate">
{props.scenario.name}
</div>
<div className="text-xs text-txt-secondary truncate">
{props.scenario.description || __("No description")}
</div>
</div>
<Button
variant={isLinked ? "secondary" : "primary"}
icon={isLinked ? IconTrashCan : IconPlusLarge}
onClick={onToggle}
disabled={props.disabled}
className="ml-6"
>
{isLinked ? __("Unlink") : __("Link")}
</Button>
</div>
);
}

76
apps/console/src/pages/organizations/risks/_components/ScenarioActions.tsx Normal file
View File

@@ -0,0 +1,76 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
ActionDropdown,
DropdownItem,
IconTrashCan,
useConfirm,
} from "@probo/ui";
import { graphql, useMutation } from "react-relay";
import type { ScenarioActionsUnlinkMutation } from "#/__generated__/core/ScenarioActionsUnlinkMutation.graphql";
const unlinkMutation = graphql`
mutation ScenarioActionsUnlinkMutation(
$input: UnlinkRiskAssessmentScenarioRiskInput!
$connections: [ID!]!
) {
unlinkRiskAssessmentScenarioRisk(input: $input) {
deletedRiskAssessmentScenarioId @deleteEdge(connections: $connections)
}
}
`;
export function ScenarioActions(props: {
scenarioId: string;
riskId: string;
connectionId: string;
}) {
const { __ } = useTranslate();
const confirm = useConfirm();
const [unlinkScenario] = useMutation<ScenarioActionsUnlinkMutation>(unlinkMutation);
const handleUnlink = () => {
confirm(
() => {
unlinkScenario({
variables: {
input: {
riskAssessmentScenarioId: props.scenarioId,
riskId: props.riskId,
},
connections: [props.connectionId],
},
});
},
{
message: __("Remove this scenario from the risk?"),
},
);
};
return (
<ActionDropdown>
<DropdownItem
icon={IconTrashCan}
variant="danger"
onSelect={handleUnlink}
>
{__("Remove")}
</DropdownItem>
</ActionDropdown>
);
}

49
apps/console/src/routes/riskRoutes.ts → apps/console/src/pages/organizations/risks/routes.ts
View File

@@ -1,4 +1,4 @@
// Copyright (c) 2025-2026 Probo Inc <hello@getprobo.com>.
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
@@ -13,47 +13,24 @@
// PERFORMANCE OF THIS SOFTWARE.
import { lazy } from "@probo/react-lazy";
import {
type AppRoute,
loaderFromQueryLoader,
withQueryRef,
} from "@probo/routes";
import type { AppRoute } from "@probo/routes";
import { Fragment } from "react";
import { loadQuery } from "react-relay";
import { redirect } from "react-router";
import type { RiskGraphListQuery } from "#/__generated__/core/RiskGraphListQuery.graphql";
import type { RiskGraphNodeQuery } from "#/__generated__/core/RiskGraphNodeQuery.graphql";
import { LinkCardSkeleton } from "#/components/skeletons/LinkCardSkeleton";
import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
import { RisksPageSkeleton } from "#/components/skeletons/RisksPageSkeleton";
import { coreEnvironment } from "#/environments";
import { riskNodeQuery, risksQuery } from "#/hooks/graph/RiskGraph";
export const riskRoutes = [
{
path: "risks",
Fallback: RisksPageSkeleton,
loader: loaderFromQueryLoader(({ organizationId }) =>
loadQuery<RiskGraphListQuery>(coreEnvironment, risksQuery, {
organizationId: organizationId,
}),
),
Component: withQueryRef(
lazy(() => import("#/pages/organizations/risks/RisksPage")),
),
Component: lazy(() => import("./RisksPageLoader")),
},
{
path: "risks/:riskId",
Fallback: PageSkeleton,
loader: loaderFromQueryLoader(({ riskId }) =>
loadQuery<RiskGraphNodeQuery>(coreEnvironment, riskNodeQuery, {
riskId: riskId,
}),
),
Component: withQueryRef(
lazy(() => import("#/pages/organizations/risks/RiskDetailPage")),
),
Component: lazy(() => import("./RiskDetailLayoutLoader")),
children: [
{
path: "",
@@ -67,36 +44,42 @@ export const riskRoutes = [
path: "overview",
Fallback: LinkCardSkeleton,
Component: lazy(
() => import("#/pages/organizations/risks/tabs/RiskOverviewTab"),
() => import("./tabs/RiskOverviewTab"),
),
},
{
path: "measures",
Fallback: LinkCardSkeleton,
Component: lazy(
() => import("#/pages/organizations/risks/tabs/RiskMeasuresTab"),
() => import("./tabs/RiskMeasuresTab"),
),
},
{
path: "documents",
Fallback: LinkCardSkeleton,
Component: lazy(
() => import("#/pages/organizations/risks/tabs/RiskDocumentsTab"),
() => import("./tabs/RiskDocumentsTab"),
),
},
{
path: "controls",
Fallback: LinkCardSkeleton,
Component: lazy(
() => import("#/pages/organizations/risks/tabs/RiskControlsTab"),
() => import("./tabs/RiskControlsTab"),
),
},
{
path: "obligations",
Fallback: LinkCardSkeleton,
Component: lazy(
() =>
import("#/pages/organizations/risks/tabs/RiskObligationsTab"),
() => import("./tabs/RiskObligationsTab"),
),
},
{
path: "scenarios",
Fallback: LinkCardSkeleton,
Component: lazy(
() => import("./scenarios/RiskScenariosPage"),
),
},
],

194
apps/console/src/pages/organizations/risks/scenarios/RiskScenariosPage.tsx Normal file
View File

@@ -0,0 +1,194 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Button,
IconPlusLarge,
IconTrashCan,
Table,
Tbody,
Td,
Th,
Thead,
Tr,
TrButton,
} from "@probo/ui";
import { graphql, useFragment } from "react-relay";
import { useOutletContext } from "react-router";
import type { RiskDetailLayoutQuery$data } from "#/__generated__/core/RiskDetailLayoutQuery.graphql";
import type { RiskScenariosPageFragment$key } from "#/__generated__/core/RiskScenariosPageFragment.graphql";
import type { RiskScenariosPageLinkMutation } from "#/__generated__/core/RiskScenariosPageLinkMutation.graphql";
import type { RiskScenariosPageUnlinkMutation } from "#/__generated__/core/RiskScenariosPageUnlinkMutation.graphql";
import { useMutationWithIncrement } from "#/hooks/useMutationWithIncrement";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import { LinkScenarioDialog } from "../_components/LinkScenarioDialog";
const fragment = graphql`
fragment RiskScenariosPageFragment on Risk {
id
scenarios(first: 100)
@connection(key: "RiskScenariosPage_scenarios", filters: []) {
__id
edges {
node {
id
name
description
scope { riskAssessmentId }
}
}
}
}
`;
const linkMutation = graphql`
mutation RiskScenariosPageLinkMutation(
$input: LinkRiskAssessmentScenarioRiskInput!
$connections: [ID!]!
) {
linkRiskAssessmentScenarioRisk(input: $input) {
riskAssessmentScenarioEdge @appendEdge(connections: $connections) {
node {
id
name
description
scope { riskAssessmentId }
}
}
}
}
`;
const unlinkMutation = graphql`
mutation RiskScenariosPageUnlinkMutation(
$input: UnlinkRiskAssessmentScenarioRiskInput!
$connections: [ID!]!
) {
unlinkRiskAssessmentScenarioRisk(input: $input) {
deletedRiskAssessmentScenarioId @deleteEdge(connections: $connections)
}
}
`;
export default function RiskScenariosPage() {
const { __ } = useTranslate();
const organizationId = useOrganizationId();
const { risk } = useOutletContext<{
risk: RiskDetailLayoutQuery$data["node"];
}>();
const data = useFragment<RiskScenariosPageFragment$key>(fragment, risk);
const scenarios = data.scenarios.edges.map(e => e.node);
const connectionId = data.scenarios.__id;
const riskId = data.id;
const incrementOptions = {
id: riskId,
node: "scenarios(first:0)",
};
const [linkScenario, isLinking] = useMutationWithIncrement<RiskScenariosPageLinkMutation>(
linkMutation,
{
...incrementOptions,
value: 1,
},
);
const [unlinkScenario, isUnlinking] = useMutationWithIncrement<RiskScenariosPageUnlinkMutation>(
unlinkMutation,
{
...incrementOptions,
value: -1,
},
);
const isLoading = isLinking || isUnlinking;
const onLink = (scenarioId: string) => {
linkScenario({
variables: {
input: {
riskAssessmentScenarioId: scenarioId,
riskId,
},
connections: [connectionId],
},
});
};
const onUnlink = (scenarioId: string) => {
unlinkScenario({
variables: {
input: {
riskAssessmentScenarioId: scenarioId,
riskId,
},
connections: [connectionId],
},
});
};
return (
<Table>
<Thead>
<Tr>
<Th>{__("Scenario")}</Th>
<Th>{__("Description")}</Th>
<Th className="w-12" />
</Tr>
</Thead>
<Tbody>
{scenarios.length === 0 && (
<Tr>
<Td colSpan={3} className="text-center text-txt-secondary">
{__("No scenarios linked to this risk yet.")}
</Td>
</Tr>
)}
{scenarios.map(scenario => (
<Tr key={scenario.id} to={`/organizations/${organizationId}/risk-assessments/${scenario.scope?.riskAssessmentId}`}>
<Td className="font-medium">{scenario.name}</Td>
<Td className="text-txt-secondary">
{scenario.description || "—"}
</Td>
<Td noLink width={50} className="text-end">
<Button
variant="secondary"
icon={IconTrashCan}
onClick={() => onUnlink(scenario.id)}
disabled={isLoading}
>
{__("Unlink")}
</Button>
</Td>
</Tr>
))}
<LinkScenarioDialog
connectionId={connectionId}
disabled={isLoading}
linkedScenarios={scenarios}
onLink={onLink}
onUnlink={onUnlink}
>
<TrButton colspan={3} icon={IconPlusLarge}>
{__("Link Scenario")}
</TrButton>
</LinkScenarioDialog>
</Tbody>
</Table>
);
}

4
apps/console/src/pages/organizations/risks/tabs/RiskDocumentsTab.tsx
View File

@@ -15,8 +15,8 @@
import { graphql, useFragment } from "react-relay";
import { useOutletContext } from "react-router";
import type { RiskDetailLayoutQuery$data } from "#/__generated__/core/RiskDetailLayoutQuery.graphql";
import type { RiskDocumentsTabFragment$key } from "#/__generated__/core/RiskDocumentsTabFragment.graphql";
import type { RiskGraphNodeQuery$data } from "#/__generated__/core/RiskGraphNodeQuery.graphql";
import { LinkedDocumentsCard } from "#/components/documents/LinkedDocumentsCard";
import { useMutationWithIncrement } from "#/hooks/useMutationWithIncrement";
@@ -64,7 +64,7 @@ export const detachDocumentMutation = graphql`
export default function RiskDocumentsTab() {
const { risk } = useOutletContext<{
risk: RiskGraphNodeQuery$data["node"];
risk: RiskDetailLayoutQuery$data["node"];
}>();
const data = useFragment<RiskDocumentsTabFragment$key>(
documentsFragment,

4
apps/console/src/pages/organizations/risks/tabs/RiskMeasuresTab.tsx
View File

@@ -15,7 +15,7 @@
import { graphql, useFragment } from "react-relay";
import { useOutletContext } from "react-router";
import type { RiskGraphNodeQuery$data } from "#/__generated__/core/RiskGraphNodeQuery.graphql";
import type { RiskDetailLayoutQuery$data } from "#/__generated__/core/RiskDetailLayoutQuery.graphql";
import type { RiskMeasuresTabFragment$key } from "#/__generated__/core/RiskMeasuresTabFragment.graphql";
import { LinkedMeasuresCard } from "#/components/measures/LinkedMeasuresCard";
import { useMutationWithIncrement } from "#/hooks/useMutationWithIncrement";
@@ -64,7 +64,7 @@ export const detachMeasureMutation = graphql`
export default function RiskMeasuresTab() {
const { risk } = useOutletContext<{
risk: RiskGraphNodeQuery$data["node"];
risk: RiskDetailLayoutQuery$data["node"];
}>();
const data = useFragment<RiskMeasuresTabFragment$key>(measuresFragment, risk);
const connectionId = data.measures.__id;

4
apps/console/src/pages/organizations/risks/tabs/RiskObligationsTab.tsx
View File

@@ -15,7 +15,7 @@
import { graphql, useFragment } from "react-relay";
import { useOutletContext } from "react-router";
import type { RiskGraphNodeQuery$data } from "#/__generated__/core/RiskGraphNodeQuery.graphql";
import type { RiskDetailLayoutQuery$data } from "#/__generated__/core/RiskDetailLayoutQuery.graphql";
import type { RiskObligationsTabFragment$key } from "#/__generated__/core/RiskObligationsTabFragment.graphql";
import { LinkedObligationsCard } from "#/components/obligations/LinkedObligationsCard";
import { useMutationWithIncrement } from "#/hooks/useMutationWithIncrement";
@@ -64,7 +64,7 @@ export const detachObligationMutation = graphql`
export default function RiskObligationsTab() {
const { risk } = useOutletContext<{
risk: RiskGraphNodeQuery$data["node"];
risk: RiskDetailLayoutQuery$data["node"];
}>();
const data = useFragment<RiskObligationsTabFragment$key>(
obligationsFragment,

4
apps/console/src/routes.tsx
View File

@@ -31,6 +31,8 @@ import { ViewerLayoutLoading } from "./pages/iam/memberships/ViewerLayoutLoading
import { peopleRoutes } from "./pages/iam/organizations/people/routes";
import { compliancePageRoutes } from "./pages/organizations/compliance-page/routes";
import { cookieBannerRoutes } from "./pages/organizations/cookie-banners/routes";
import { riskAssessmentRoutes } from "./pages/organizations/risk-assessments/routes";
import { riskRoutes } from "./pages/organizations/risks/routes";
import { CurrentUser } from "./providers/CurrentUser";
import { accessReviewRoutes } from "./routes/accessReviewRoutes";
import { assetRoutes } from "./routes/assetRoutes";
@@ -44,7 +46,6 @@ import { measureRoutes } from "./routes/measureRoutes";
import { obligationRoutes } from "./routes/obligationRoutes";
import { processingActivityRoutes } from "./routes/processingActivityRoutes";
import { rightsRequestRoutes } from "./routes/rightsRequestRoutes";
import { riskRoutes } from "./routes/riskRoutes";
import { statementsOfApplicabilityRoutes } from "./routes/statementsOfApplicabilityRoutes";
import { taskRoutes } from "./routes/taskRoutes";
import { thirdPartyRoutes } from "./routes/thirdPartyRoutes";
@@ -289,6 +290,7 @@ const routes = [
},
...peopleRoutes,
...riskRoutes,
...riskAssessmentRoutes,
...measureRoutes,
...documentsRoutes,
...thirdPartyRoutes,