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

Add measures tab

Browse Source 
Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Jonathan
2025-05-23 17:54:50 +02:00
committed by Sacha Al Himdani
parent fbfc3bb2b5
commit 1253145d3b
23 changed files with 1161 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
apps/console2/src/components/risks/MeasureLinkDialog.tsx Normal file
View File

@@ -0,0 +1,162 @@
import {
Badge,
Button,
Dialog,
DialogContent,
DialogFooter,
IconMagnifyingGlass,
IconPlusLarge,
IconTrashCan,
Input,
Spinner,
} from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import { Suspense, useMemo, useState, type ReactNode } from "react";
import { graphql } from "relay-runtime";
import { useLazyLoadQuery } from "react-relay";
import type {
MeasureLinkDialogQuery,
MeasureLinkDialogQuery$data,
} from "./__generated__/MeasureLinkDialogQuery.graphql";
import type { NodeOf } from "../../types";
import { useMutationWithToasts } from "../../hooks/useMutationWithToasts";
import { useToggle } from "@probo/hooks";
const measuresQuery = graphql`
query MeasureLinkDialogQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
id
... on Organization {
measures(first: 100) @connection(key: "Organization__measures") {
edges {
node {
id
name
description
category
state
}
}
}
}
}
}
`;
const attachMeasureMutation = graphql`
mutation MeasureLinkDialogCreateMutation(
$input: CreateRiskMeasureMappingInput!
) {
createRiskMeasureMapping(input: $input) {
success
}
}
`;
type Props = {
trigger: ReactNode;
organizationId: string;
connectionId: string;
riskId: string;
};
export function MeasureLinkDialog({ trigger, ...props }: Props) {
const { __ } = useTranslate();
return (
<Dialog trigger={trigger} title={__("Manage Risk Measures")}>
<DialogContent className="px-6">
<p className="text-sm text-txt-secondary mt-6">
{__("Link or unlink measures to manage this risk.")}
</p>
<Suspense fallback={<Spinner centered />}>
<MeasureLinkDialogContent {...props} />
</Suspense>
</DialogContent>
<DialogFooter exitLabel={__("Close")} />
</Dialog>
);
}
function MeasureLinkDialogContent(props: Omit<Props, "trigger">) {
const data = useLazyLoadQuery<MeasureLinkDialogQuery>(measuresQuery, {
organizationId: props.organizationId,
});
const { __ } = useTranslate();
const [search, setSearch] = useState("");
const measures =
data.organization?.measures?.edges?.map((edge) => edge.node) ?? [];
const filteredMeasures = useMemo(() => {
return measures.filter(
(measure) =>
measure.name.toLowerCase().includes(search.toLowerCase()) ||
measure.description?.toLowerCase().includes(search.toLowerCase())
);
}, [measures, 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">
<Input
icon={IconMagnifyingGlass}
placeholder={__("Search measures...")}
onValueChange={setSearch}
/>
</div>
<div className="space-y-2 divide-y divide-border-low">
{filteredMeasures.map((measure) => (
<MeasureRow key={measure.id} measure={measure} {...props} />
))}
</div>
</>
);
}
type RowProps = {
measure: NodeOf<
Required<MeasureLinkDialogQuery$data["organization"]>["measures"]
>;
} & Omit<Props, "trigger">;
function MeasureRow(props: RowProps) {
const [isLinked, toggleLinked] = useToggle(false);
const { __ } = useTranslate();
const [attachMeasure, isFetching] = useMutationWithToasts(
attachMeasureMutation,
{
successMessage: __("Measure linked successfully"),
errorMessage: __("Failed to link measure"),
}
);
const onClick = () => {
attachMeasure({
variables: {
input: {
riskId: props.riskId,
measureId: props.measure.id,
},
},
onSuccess() {
toggleLinked();
},
});
};
return (
<div className="py-4 flex items-center gap-4 hover:bg-subtle">
{props.measure.name}
<Badge variant="neutral">{props.measure.category}</Badge>
<Button
disabled={isFetching}
icon={isLinked ? IconTrashCan : IconPlusLarge}
className="ml-auto"
variant={isLinked ? "secondary" : "primary"}
onClick={onClick}
>
{isLinked ? __("Unlink") : __("Link")}
</Button>
</div>
);
}

93
apps/console2/src/components/risks/__generated__/MeasureLinkDialogCreateMutation.graphql.ts generated Normal file
View File

@@ -0,0 +1,93 @@
/**
* @generated SignedSource<<bce124e2ad364bd742c5d2b2a92f768b>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type CreateRiskMeasureMappingInput = {
measureId: string;
riskId: string;
};
export type MeasureLinkDialogCreateMutation$variables = {
input: CreateRiskMeasureMappingInput;
};
export type MeasureLinkDialogCreateMutation$data = {
readonly createRiskMeasureMapping: {
readonly success: boolean;
};
};
export type MeasureLinkDialogCreateMutation = {
response: MeasureLinkDialogCreateMutation$data;
variables: MeasureLinkDialogCreateMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
}
],
v1 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
"concreteType": "CreateRiskMeasureMappingPayload",
"kind": "LinkedField",
"name": "createRiskMeasureMapping",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "success",
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "MeasureLinkDialogCreateMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "MeasureLinkDialogCreateMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "f7117ee68c2d7b6c2ceca56c054a4892",
"id": null,
"metadata": {},
"name": "MeasureLinkDialogCreateMutation",
"operationKind": "mutation",
"text": "mutation MeasureLinkDialogCreateMutation(\n $input: CreateRiskMeasureMappingInput!\n) {\n createRiskMeasureMapping(input: $input) {\n success\n }\n}\n"
}
};
})();
(node as any).hash = "b54abd7d4d4f88ff7d54bfa35121a015";
export default node;

271
apps/console2/src/components/risks/__generated__/MeasureLinkDialogQuery.graphql.ts generated Normal file
View File

@@ -0,0 +1,271 @@
/**
* @generated SignedSource<<746421c9f8fc0c80ed1fd5643b3bbae8>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type MeasureState = "IMPLEMENTED" | "IN_PROGRESS" | "NOT_APPLICABLE" | "NOT_STARTED" | "%future added value";
export type MeasureLinkDialogQuery$variables = {
organizationId: string;
};
export type MeasureLinkDialogQuery$data = {
readonly organization: {
readonly id: string;
readonly measures?: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly category: string;
readonly description: string;
readonly id: string;
readonly name: string;
readonly state: MeasureState;
};
}>;
};
};
};
export type MeasureLinkDialogQuery = {
response: MeasureLinkDialogQuery$data;
variables: MeasureLinkDialogQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "organizationId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "organizationId"
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v4 = [
{
"alias": null,
"args": null,
"concreteType": "MeasureEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Measure",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
},
(v3/*: any*/)
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
}
],
"storageKey": null
}
],
v5 = [
{
"kind": "Literal",
"name": "first",
"value": 100
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "MeasureLinkDialogQuery",
"selections": [
{
"alias": "organization",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": "measures",
"args": null,
"concreteType": "MeasureConnection",
"kind": "LinkedField",
"name": "__Organization__measures_connection",
"plural": false,
"selections": (v4/*: any*/),
"storageKey": null
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "MeasureLinkDialogQuery",
"selections": [
{
"alias": "organization",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v3/*: any*/),
(v2/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v5/*: any*/),
"concreteType": "MeasureConnection",
"kind": "LinkedField",
"name": "measures",
"plural": false,
"selections": (v4/*: any*/),
"storageKey": "measures(first:100)"
},
{
"alias": null,
"args": (v5/*: any*/),
"filters": null,
"handle": "connection",
"key": "Organization__measures",
"kind": "LinkedHandle",
"name": "measures"
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "13eb493b76ecc90bc9dd27963b5dba84",
"id": null,
"metadata": {
"connection": [
{
"count": null,
"cursor": null,
"direction": "forward",
"path": [
"organization",
"measures"
]
}
]
},
"name": "MeasureLinkDialogQuery",
"operationKind": "query",
"text": "query MeasureLinkDialogQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n id\n ... on Organization {\n measures(first: 100) {\n edges {\n node {\n id\n name\n description\n category\n state\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "468d35ade53ae7655cd0fbab242b7d1a";
export default node;

0
apps/console2/src/pages/organizations/risks/forms/__generated__/useRiskFormFragment.graphql.ts → apps/console2/src/hooks/forms/__generated__/useRiskFormFragment.graphql.ts generated
View File

2
apps/console2/src/pages/organizations/risks/forms/useRiskForm.tsx → apps/console2/src/hooks/forms/useRiskForm.tsx
View File

@@ -1,5 +1,5 @@
import { z } from "zod";
import { useFormWithSchema } from "../../../../hooks/useFormWithSchema";
import { useFormWithSchema } from "../useFormWithSchema";
import { graphql } from "relay-runtime";
import type {
useRiskFormFragment$data,

1
apps/console2/src/hooks/graph/RiskGraph.ts
View File

@@ -110,6 +110,7 @@ export const riskNodeQuery = graphql`
note
...useRiskFormFragment
...RiskOverviewTabFragment
...RiskMeasuresTabFragment
}
}
}

159
apps/console2/src/hooks/graph/__generated__/RiskGraphNodeQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<6efbbaf2cb9056e26a38c89835260547>>
* @generated SignedSource<<3485aabb6e5e1992e2f0c089deaf4b2d>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -24,7 +24,7 @@ export type RiskGraphNodeQuery$data = {
readonly id: string;
} | null | undefined;
readonly treatment?: RiskTreatment;
readonly " $fragmentSpreads": FragmentRefs<"RiskOverviewTabFragment" | "useRiskFormFragment">;
readonly " $fragmentSpreads": FragmentRefs<"RiskMeasuresTabFragment" | "RiskOverviewTabFragment" | "useRiskFormFragment">;
};
};
export type RiskGraphNodeQuery = {
@@ -100,7 +100,28 @@ v7 = {
"kind": "ScalarField",
"name": "note",
"storageKey": null
};
},
v8 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v9 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
},
v10 = [
{
"kind": "Literal",
"name": "first",
"value": 100
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
@@ -133,6 +154,11 @@ return {
"args": null,
"kind": "FragmentSpread",
"name": "RiskOverviewTabFragment"
},
{
"args": null,
"kind": "FragmentSpread",
"name": "RiskMeasuresTabFragment"
}
],
"type": "Risk",
@@ -159,13 +185,7 @@ return {
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v8/*: any*/),
(v5/*: any*/),
{
"kind": "InlineFragment",
@@ -175,13 +195,7 @@ return {
(v4/*: any*/),
(v6/*: any*/),
(v7/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
},
(v9/*: any*/),
{
"alias": null,
"args": null,
@@ -223,6 +237,111 @@ return {
"kind": "ScalarField",
"name": "residualRiskScore",
"storageKey": null
},
{
"alias": null,
"args": (v10/*: any*/),
"concreteType": "MeasureConnection",
"kind": "LinkedField",
"name": "measures",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "MeasureEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Measure",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v5/*: any*/),
(v2/*: any*/),
(v3/*: any*/),
(v9/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
},
(v8/*: any*/)
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
}
],
"storageKey": null
},
{
"kind": "ClientExtension",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__id",
"storageKey": null
}
]
}
],
"storageKey": "measures(first:100)"
},
{
"alias": null,
"args": (v10/*: any*/),
"filters": null,
"handle": "connection",
"key": "Risk__measures",
"kind": "LinkedHandle",
"name": "measures"
}
],
"type": "Risk",
@@ -234,16 +353,16 @@ return {
]
},
"params": {
"cacheID": "f3e35dd3d4ea0933858541184c664b4d",
"cacheID": "fc9da3522dfacf8b5f887a0ebbd3e21e",
"id": null,
"metadata": {},
"name": "RiskGraphNodeQuery",
"operationKind": "query",
"text": "query RiskGraphNodeQuery(\n $riskId: ID!\n) {\n node(id: $riskId) {\n __typename\n ... on Risk {\n name\n description\n treatment\n owner {\n id\n fullName\n }\n note\n ...useRiskFormFragment\n ...RiskOverviewTabFragment\n }\n id\n }\n}\n\nfragment RiskOverviewTabFragment on Risk {\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n inherentRiskScore\n residualRiskScore\n}\n\nfragment useRiskFormFragment on Risk {\n id\n name\n category\n description\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n note\n owner {\n id\n }\n}\n"
"text": "query RiskGraphNodeQuery(\n $riskId: ID!\n) {\n node(id: $riskId) {\n __typename\n ... on Risk {\n name\n description\n treatment\n owner {\n id\n fullName\n }\n note\n ...useRiskFormFragment\n ...RiskOverviewTabFragment\n ...RiskMeasuresTabFragment\n }\n id\n }\n}\n\nfragment RiskMeasuresTabFragment on Risk {\n id\n measures(first: 100) {\n edges {\n node {\n id\n name\n description\n category\n createdAt\n state\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n\nfragment RiskOverviewTabFragment on Risk {\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n inherentRiskScore\n residualRiskScore\n}\n\nfragment useRiskFormFragment on Risk {\n id\n name\n category\n description\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n note\n owner {\n id\n }\n}\n"
}
};
})();
(node as any).hash = "76afe5fc70188381350154bdba7aa066";
(node as any).hash = "c742a5b3e536eabc8dca8b680f763a04";
export default node;

6
apps/console2/src/pages/organizations/risks/FormRiskDialog.tsx
View File

@@ -24,7 +24,11 @@ import {
ControlledField,
ControlledSelect,
} from "../../../components/form/ControlledField";
import { useRiskForm, type RiskForm, type RiskKey } from "./forms/useRiskForm";
import {
useRiskForm,
type RiskForm,
type RiskKey,
} from "../../../hooks/forms/useRiskForm";
import type { FieldErrors } from "react-hook-form";
import { useMutationWithToasts } from "../../../hooks/useMutationWithToasts";
import type { FormRiskDialogMutation } from "./__generated__/FormRiskDialogMutation.graphql";

15
apps/console2/src/pages/organizations/risks/RiskDetailPage.tsx
View File

@@ -11,6 +11,8 @@ import {
IconTrashCan,
PageHeader,
PropertyRow,
TabLink,
Tabs,
} from "@probo/ui";
import { Outlet, useNavigate, useParams } from "react-router";
import { useTranslate } from "@probo/i18n";
@@ -107,6 +109,19 @@ export default function RiskDetailPage(props: Props) {
<PageHeader title={risk.name} />
<Tabs>
<TabLink
to={`/organizations/${organizationId}/risks/${riskId}/overview`}
>
{__("Overview")}
</TabLink>
<TabLink
to={`/organizations/${organizationId}/risks/${riskId}/measures`}
>
{__("Measures")}
</TabLink>
</Tabs>
<Outlet context={{ risk }} />
<Drawer>

104
apps/console2/src/pages/organizations/risks/tabs/RiskMeasuresTab.tsx Normal file
View File

@@ -0,0 +1,104 @@
import { graphql, useFragment } from "react-relay";
import type {
RiskMeasuresTabFragment$data,
RiskMeasuresTabFragment$key,
} from "./__generated__/RiskMeasuresTabFragment.graphql";
import { useTranslate } from "@probo/i18n";
import {
Button,
IconPlusLarge,
Table,
Thead,
Tbody,
Td,
Th,
Tr,
} from "@probo/ui";
import { MeasureLinkDialog } from "../../../../components/risks/MeasureLinkDialog";
import { useOrganizationId } from "../../../../hooks/useOrganizationId";
import { useOutletContext } from "react-router";
import type { NodeOf } from "../../../../types";
const measuresFragment = graphql`
fragment RiskMeasuresTabFragment on Risk {
id
measures(first: 100) @connection(key: "Risk__measures") {
__id
edges {
node {
id
name
description
category
createdAt
state
}
}
}
}
`;
export default function RiskMeasuresTab() {
const { risk } = useOutletContext<{
risk: RiskMeasuresTabFragment$key & { id: string };
}>();
const data = useFragment(measuresFragment, risk);
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const connectionId = data.measures.__id;
const measures = data.measures?.edges?.map((edge) => edge.node) ?? [];
if (measures.length === 0) {
return (
<div className="text-sm text-txt-secondary text-center flex flex-col gap-4 items-center justify-center py-10">
{__("No measures associated with this risk.")}
<MeasureLinkDialog
connectionId={connectionId}
organizationId={organizationId}
riskId={data.id}
trigger={
<Button icon={IconPlusLarge} variant="quaternary">
{__("Link measure")}
</Button>
}
/>
</div>
);
}
return (
<Table>
<Thead>
<Tr>
<Th>{__("Measure")}</Th>
<Th>{__("Frameworks")}</Th>
<Th>{__("Risks")}</Th>
<Th>{__("Lead")}</Th>
<Th>{__("Status")}</Th>
<Th></Th>
</Tr>
</Thead>
<Tbody>
{measures.map((measure) => (
<MeasureRow key={measure.id} measure={measure} />
))}
</Tbody>
</Table>
);
}
function MeasureRow({
measure,
}: {
measure: NodeOf<RiskMeasuresTabFragment$data["measures"]>;
}) {
return (
<Tr>
<Td>{measure.name}</Td>
<Td>{measure.category}</Td>
<Td>{measure.createdAt}</Td>
<Td>{measure.state}</Td>
<Td></Td>
</Tr>
);
}

0
apps/console2/src/pages/organizations/risks/RiskOverviewTab.tsx → apps/console2/src/pages/organizations/risks/tabs/RiskOverviewTab.tsx
View File

190
apps/console2/src/pages/organizations/risks/tabs/__generated__/RiskMeasuresTabFragment.graphql.ts generated Normal file
View File

@@ -0,0 +1,190 @@
/**
* @generated SignedSource<<83a07ae53aaa5005db49f5ea8b4479c6>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from 'relay-runtime';
export type MeasureState = "IMPLEMENTED" | "IN_PROGRESS" | "NOT_APPLICABLE" | "NOT_STARTED" | "%future added value";
import { FragmentRefs } from "relay-runtime";
export type RiskMeasuresTabFragment$data = {
readonly id: string;
readonly measures: {
readonly __id: string;
readonly edges: ReadonlyArray<{
readonly node: {
readonly category: string;
readonly createdAt: any;
readonly description: string;
readonly id: string;
readonly name: string;
readonly state: MeasureState;
};
}>;
};
readonly " $fragmentType": "RiskMeasuresTabFragment";
};
export type RiskMeasuresTabFragment$key = {
readonly " $data"?: RiskMeasuresTabFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"RiskMeasuresTabFragment">;
};
const node: ReaderFragment = (function(){
var v0 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
};
return {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": {
"connection": [
{
"count": null,
"cursor": null,
"direction": "forward",
"path": [
"measures"
]
}
]
},
"name": "RiskMeasuresTabFragment",
"selections": [
(v0/*: any*/),
{
"alias": "measures",
"args": null,
"concreteType": "MeasureConnection",
"kind": "LinkedField",
"name": "__Risk__measures_connection",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "MeasureEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Measure",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v0/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "state",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
}
],
"storageKey": null
},
{
"kind": "ClientExtension",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__id",
"storageKey": null
}
]
}
],
"storageKey": null
}
],
"type": "Risk",
"abstractKey": null
};
})();
(node as any).hash = "e04c5962a40b48aade0d1e4a31f0c583";
export default node;

0
apps/console2/src/pages/organizations/risks/__generated__/RiskOverviewTabFragment.graphql.ts → apps/console2/src/pages/organizations/risks/tabs/__generated__/RiskOverviewTabFragment.graphql.ts generated
View File

48
apps/console2/src/routes.tsx
View File

@@ -1,5 +1,6 @@
import {
createBrowserRouter,
redirect,
useLoaderData,
useRouteError,
type RouteObject,
@@ -7,9 +8,9 @@ import {
import { MainLayout } from "./layouts/MainLayout";
import { AuthLayout, CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui";
import {
Fragment,
lazy,
Suspense,
useEffect,
type FC,
type LazyExoticComponent,
} from "react";
@@ -22,6 +23,7 @@ import { PageSkeleton } from "./components/skeletons/PageSkeleton.tsx";
import { loadQuery, type PreloadedQuery } from "react-relay";
import { riskNodeQuery, risksQuery } from "./hooks/graph/RiskGraph.ts";
import { useCleanup } from "./hooks/useDelayedEffect.ts";
import { riskRoutes } from "./routes/riskRoutes.ts";
function ErrorBoundary() {
const error = useRouteError();
@@ -32,9 +34,9 @@ function ErrorBoundary() {
return <div>error</div>;
}
type Route = {
export type AppRoute = {
Component: FC<any> | LazyExoticComponent<FC<any>>;
children?: Route[];
children?: AppRoute[];
fallback?: FC;
queryLoader?: (params: Record<string, string>) => PreloadedQuery<any>;
} & Omit<RouteObject, "Component" | "children">;
@@ -62,7 +64,7 @@ const routes = [
{
path: "organizations/new",
Component: lazy(
() => import("./pages/organizations/NewOrganizationPage"),
() => import("./pages/organizations/NewOrganizationPage")
),
},
],
@@ -76,45 +78,22 @@ const routes = [
path: "vendors",
fallback: PageSkeleton,
Component: lazy(
() => import("./pages/organizations/vendors/VendorsPage"),
() => import("./pages/organizations/vendors/VendorsPage")
),
},
{
path: "risks",
fallback: RisksPageSkeleton,
queryLoader: ({ organizationId }) =>
loadQuery(relayEnvironment, risksQuery, { organizationId }),
Component: lazy(() => import("./pages/organizations/risks/RisksPage")),
},
{
path: "risks/:riskId",
fallback: PageSkeleton,
queryLoader: ({ riskId }) =>
loadQuery(relayEnvironment, riskNodeQuery, { riskId }),
Component: lazy(
() => import("./pages/organizations/risks/RiskDetailPage"),
),
children: [
{
path: "",
Component: lazy(
() => import("./pages/organizations/risks/RiskOverviewTab"),
),
},
],
},
...riskRoutes,
],
},
] satisfies Route[];
] satisfies AppRoute[];
/**
* Wrap component with a suspense to handle lazy loading & relay loading states
* Wrap components with suspense to handle lazy loading & relay loading states
*/
function routeTransformer({
fallback: FallbackComponent,
queryLoader,
...route
}: Route): RouteObject {
}: AppRoute): RouteObject {
let result = { ...route };
if (FallbackComponent) {
result = {
@@ -133,10 +112,7 @@ function routeTransformer({
const query = queryLoader(params as Record<string, string>);
return {
queryRef: query,
dispose: () => {
console.log("cleaning up query");
query.dispose();
},
dispose: query.dispose,
};
},
Component: () => {

48
apps/console2/src/routes/riskRoutes.ts Normal file
View File

@@ -0,0 +1,48 @@
import { Fragment, lazy } from "react";
import { loadQuery } from "react-relay";
import { RisksPageSkeleton } from "../components/skeletons/RisksPageSkeleton.tsx";
import type { AppRoute } from "../routes.tsx";
import { relayEnvironment } from "../providers/RelayProviders";
import { riskNodeQuery, risksQuery } from "../hooks/graph/RiskGraph";
import { PageSkeleton } from "../components/skeletons/PageSkeleton.tsx";
import { redirect } from "react-router";
export const riskRoutes = [
{
path: "risks",
fallback: RisksPageSkeleton,
queryLoader: ({ organizationId }) =>
loadQuery(relayEnvironment, risksQuery, { organizationId }),
Component: lazy(() => import("../pages/organizations/risks/RisksPage")),
},
{
path: "risks/:riskId",
fallback: PageSkeleton,
queryLoader: ({ riskId }) =>
loadQuery(relayEnvironment, riskNodeQuery, { riskId }),
Component: lazy(
() => import("../pages/organizations/risks/RiskDetailPage")
),
children: [
{
path: "",
loader: () => {
throw redirect("overview");
},
Component: Fragment,
},
{
path: "overview",
Component: lazy(
() => import("../pages/organizations/risks/tabs/RiskOverviewTab.tsx")
),
},
{
path: "measures",
Component: lazy(
() => import("../pages/organizations/risks/tabs/RiskMeasuresTab.tsx")
),
},
],
},
] satisfies AppRoute[];

1
packages/ui/package.json
View File

@@ -18,6 +18,7 @@
"@radix-ui/react-dropdown-menu": "^2.1.14",
"@radix-ui/react-portal": "^1.1.9",
"@radix-ui/react-scroll-area": "^1.2.9",
"@radix-ui/react-tabs": "^1.1.12",
"@tailwindcss/vite": "^4.1.7",
"clsx": "^2.1.1",
"tailwind-variants": "^1.0.0",

1
packages/ui/src/Atoms/Badge/Badge.tsx
View File

@@ -31,6 +31,7 @@ const badge = tv({
},
},
defaultVariants: {
variant: "neutral",
size: "sm",
},
});

44
packages/ui/src/Atoms/Input/Input.tsx
View File

@@ -1,13 +1,16 @@
import type { InputHTMLAttributes } from "react";
import { type InputHTMLAttributes, type FC, useState } from "react";
import { tv } from "tailwind-variants";
import type { IconProps } from "../Icons/type";
type Props = {
invalid?: boolean;
disabled?: boolean;
icon?: FC<IconProps>;
onValueChange?: (value: string) => void;
} & InputHTMLAttributes<HTMLInputElement>;
export const input = tv({
base: "py-[6px] bg-secondary border border-border-mid rounded-[10px] hover:border-border-strong focus:shadow-focus text-sm px-3 w-full bg-secondary disabled:bg-transparent focus:outline-none",
base: "py-[6px] bg-secondary border border-border-mid rounded-[10px] hover:border-border-strong focus:shadow-focus text-sm px-3 w-full bg-secondary disabled:bg-transparent focus:outline-none data-[focus=true]:shadow-focus",
variants: {
invalid: {
true: "border-border-danger",
@@ -15,6 +18,41 @@ export const input = tv({
},
});
export function Input({ invalid, ...props }: Props) {
export function Input({
invalid,
icon: IconComponent,
onValueChange,
...props
}: Props) {
if (IconComponent) {
const [focus, setFocus] = useState(false);
return (
<div
className={input({
className: "flex items-center gap-2",
})}
data-focus={focus}
>
<IconComponent size={16} className="text-txt-secondary" />
<input
onFocus={(e) => {
setFocus(true);
props.onFocus?.(e);
}}
onBlur={(e) => {
setFocus(false);
props.onBlur?.(e);
}}
aria-invalid={invalid}
className="w-full outline-none"
{...props}
onChange={(e) => {
onValueChange?.(e.currentTarget.value);
props.onChange?.(e);
}}
/>
</div>
);
}
return <input aria-invalid={invalid} className={input(props)} {...props} />;
}

10
packages/ui/src/Atoms/Spinner/Spinner.tsx
View File

@@ -1,11 +1,15 @@
import clsx from "clsx";
type Props = { size: number; className?: string };
type Props = { size?: number; className?: string; centered?: boolean };
export function Spinner({ size = 16, className }: Props) {
export function Spinner({ size = 16, className, centered }: Props) {
return (
<div
className={clsx("animate-spin rounded-full border-b-2", className)}
className={clsx(
"animate-spin rounded-full border-b-2",
centered && "my-4 mx-auto",
className,
)}
style={{ width: size, height: size, borderColor: "currentColor" }}
/>
);

20
packages/ui/src/Atoms/Tabs/Tabs.stories.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { Tabs, TabLink } from "./Tabs";
import type { Meta, StoryObj } from "@storybook/react";
export default {
title: "Atoms/Tabs",
component: Tabs,
argTypes: {},
} satisfies Meta<typeof Tabs>;
type Story = StoryObj<typeof Tabs>;
export const Default: Story = {
render: () => (
<Tabs>
<TabLink to="#">Tab 1</TabLink>
<TabLink to="#">Tab 2</TabLink>
<TabLink to="#">Tab 3</TabLink>
</Tabs>
),
};

33
packages/ui/src/Atoms/Tabs/Tabs.tsx Normal file
View File

@@ -0,0 +1,33 @@
import type { PropsWithChildren } from "react";
import { NavLink } from "react-router";
import { Root, List } from "@radix-ui/react-tabs";
import clsx from "clsx";
export function Tabs(props: PropsWithChildren) {
return (
<Root className="TabsRoot" defaultValue="tab1">
<List className="TabsList" aria-label="Manage your account">
<div
className="border-b border-border-low flex gap-6 text-sm font-medium text-txt-secondary"
{...props}
/>
</List>
</Root>
);
}
export function TabLink(props: PropsWithChildren<{ to: string }>) {
return (
<NavLink
className={(params) =>
clsx(
"py-4 hover:text-txt-primary border-b-2 active:border-border-active -mb-[1px] active:text-txt-primary",
params.isActive
? "border-border-active text-txt-primary"
: "border-transparent",
)
}
{...props}
/>
);
}

20
packages/ui/src/Molecules/Dialog/Dialog.tsx
View File

@@ -70,23 +70,35 @@ export function Dialog({
);
}
export function DialogFooter({ children }: { children?: ReactNode }) {
export function DialogFooter({
children,
exitLabel,
}: {
children?: ReactNode;
exitLabel?: string;
}) {
const { __ } = useTranslate();
return (
<footer className="flex justify-end items-center p-3 border-t border-t-border-low gap-2">
<Close asChild>
<Button variant="secondary">{__("Cancel")}</Button>
<Button variant="secondary">{exitLabel ?? __("Cancel")}</Button>
</Close>
{children}
</footer>
);
}
export function DialogContent(props: HTMLAttributes<HTMLDivElement>) {
export function DialogContent(
props: HTMLAttributes<HTMLDivElement> & { padded?: boolean },
) {
return (
<div
{...props}
className={clsx("overflow-y-auto", props.className)}
className={clsx(
"overflow-y-auto",
props.className,
props.padded && "p-6",
)}
style={{
maxHeight: "min(640px, calc(100vh - 140px))",
}}

1
packages/ui/src/index.ts
View File

@@ -30,6 +30,7 @@ export { Select, Option } from "./Atoms/Select/Select.tsx";
export { Label } from "./Atoms/Label/Label";
export { PropertyRow } from "./Atoms/PropertyRow/PropertyRow";
export { Table, Thead, Tr, Tbody, Td, Th } from "./Atoms/Table/Table";
export { Tabs, TabLink } from "./Atoms/Tabs/Tabs";
// Molecules
export {