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

Use loader for relay

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 13:08:33 +02:00
committed by Sacha Al Himdani
parent 1448d37d55
commit fbfc3bb2b5
11 changed files with 829 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,9 +2,14 @@ import { ConnectionHandler, graphql } from "relay-runtime";
import { useTranslate } from "@probo/i18n"; import { useTranslate } from "@probo/i18n";
import { useMutationWithToasts } from "../useMutationWithToasts.ts"; import { useMutationWithToasts } from "../useMutationWithToasts.ts";
import type { RiskGraphDeleteMutation } from "./__generated__/RiskGraphDeleteMutation.graphql.ts"; import type { RiskGraphDeleteMutation } from "./__generated__/RiskGraphDeleteMutation.graphql.ts";
import { useLazyLoadQuery, useRefetchableFragment } from "react-relay"; import {
useLazyLoadQuery,
usePreloadedQuery,
useRefetchableFragment,
type PreloadedQuery,
} from "react-relay";
import { useOrganizationId } from "../useOrganizationId.ts"; import { useOrganizationId } from "../useOrganizationId.ts";
import type { RiskGraphQuery } from "./__generated__/RiskGraphQuery.graphql.ts"; import type { RiskGraphListQuery } from "./__generated__/RiskGraphListQuery.graphql.ts";
import type { RiskGraphFragment$key } from "./__generated__/RiskGraphFragment.graphql.ts"; import type { RiskGraphFragment$key } from "./__generated__/RiskGraphFragment.graphql.ts";
const deleteRiskMutation = graphql` const deleteRiskMutation = graphql`
@@ -27,8 +32,8 @@ export function useDeleteRiskMutation() {
}); });
} }
const risksQuery = graphql` export const risksQuery = graphql`
query RiskGraphQuery($organizationId: ID!) { query RiskGraphListQuery($organizationId: ID!) {
organization: node(id: $organizationId) { organization: node(id: $organizationId) {
id id
...RiskGraphFragment ...RiskGraphFragment
@@ -74,13 +79,11 @@ const risksFragment = graphql`
export const RisksConnectionKey = "RisksListQuery_risks"; export const RisksConnectionKey = "RisksListQuery_risks";
export function useRisksQuery() { export function useRisksQuery(queryRef: PreloadedQuery<RiskGraphListQuery>) {
const data = useLazyLoadQuery<RiskGraphQuery>(risksQuery, { const data = usePreloadedQuery(risksQuery, queryRef);
organizationId: useOrganizationId(),
});
const [dataFragment, refetch] = useRefetchableFragment( const [dataFragment, refetch] = useRefetchableFragment(
risksFragment, risksFragment,
data.organization as RiskGraphFragment$key, data.organization as RiskGraphFragment$key
); );
const risks = dataFragment?.risks?.edges.map((edge) => edge.node); const risks = dataFragment?.risks?.edges.map((edge) => edge.node);
return { return {
@@ -88,7 +91,26 @@ export function useRisksQuery() {
refetch, refetch,
connectionId: ConnectionHandler.getConnectionID( connectionId: ConnectionHandler.getConnectionID(
data.organization.id, data.organization.id,
RisksConnectionKey, RisksConnectionKey
), ),
}; };
} }
export const riskNodeQuery = graphql`
query RiskGraphNodeQuery($riskId: ID!) {
node(id: $riskId) {
... on Risk {
name
description
treatment
owner {
id
fullName
}
note
...useRiskFormFragment
...RiskOverviewTabFragment
}
}
}
`;

313
apps/console2/src/hooks/graph/__generated__/RiskGraphListQuery.graphql.ts generated Normal file
View File

@@ -0,0 +1,313 @@
/**
* @generated SignedSource<<8ae6d82b30ec5657f8a55bd47fab4e7e>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type RiskGraphListQuery$variables = {
organizationId: string;
};
export type RiskGraphListQuery$data = {
readonly organization: {
readonly id: string;
readonly " $fragmentSpreads": FragmentRefs<"RiskGraphFragment">;
};
};
export type RiskGraphListQuery = {
response: RiskGraphListQuery$data;
variables: RiskGraphListQuery$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 = [
{
"kind": "Literal",
"name": "first",
"value": 50
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "RiskGraphListQuery",
"selections": [
{
"alias": "organization",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
{
"args": null,
"kind": "FragmentSpread",
"name": "RiskGraphFragment"
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "RiskGraphListQuery",
"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": (v4/*: any*/),
"concreteType": "RiskConnection",
"kind": "LinkedField",
"name": "risks",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "RiskEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Risk",
"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": "category",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "treatment",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentLikelihood",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentImpact",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualLikelihood",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualImpact",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentRiskScore",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualRiskScore",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "note",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "owner",
"plural": false,
"selections": [
(v2/*: any*/)
],
"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
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasPreviousPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "startCursor",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "risks(first:50)"
},
{
"alias": null,
"args": (v4/*: any*/),
"filters": [
"orderBy"
],
"handle": "connection",
"key": "RisksListQuery_risks",
"kind": "LinkedHandle",
"name": "risks"
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "36e237e142f201c74ebc23ff46d7345a",
"id": null,
"metadata": {},
"name": "RiskGraphListQuery",
"operationKind": "query",
"text": "query RiskGraphListQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n id\n ...RiskGraphFragment\n }\n}\n\nfragment RiskGraphFragment on Organization {\n risks(first: 50) {\n edges {\n node {\n id\n name\n category\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n inherentRiskScore\n residualRiskScore\n ...useRiskFormFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n\nfragment useRiskFormFragment on Risk {\n id\n name\n category\n description\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n note\n owner {\n id\n }\n}\n"
}
};
})();
(node as any).hash = "5d41ad11b598f63829f481ff0ae8aec7";
export default node;

249
apps/console2/src/hooks/graph/__generated__/RiskGraphNodeQuery.graphql.ts generated Normal file
View File

@@ -0,0 +1,249 @@
/**
* @generated SignedSource<<6efbbaf2cb9056e26a38c89835260547>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type RiskTreatment = "ACCEPTED" | "AVOIDED" | "MITIGATED" | "TRANSFERRED" | "%future added value";
export type RiskGraphNodeQuery$variables = {
riskId: string;
};
export type RiskGraphNodeQuery$data = {
readonly node: {
readonly description?: string;
readonly name?: string;
readonly note?: string;
readonly owner?: {
readonly fullName: string;
readonly id: string;
} | null | undefined;
readonly treatment?: RiskTreatment;
readonly " $fragmentSpreads": FragmentRefs<"RiskOverviewTabFragment" | "useRiskFormFragment">;
};
};
export type RiskGraphNodeQuery = {
response: RiskGraphNodeQuery$data;
variables: RiskGraphNodeQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "riskId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "riskId"
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "treatment",
"storageKey": null
},
v5 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v6 = {
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "owner",
"plural": false,
"selections": [
(v5/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
}
],
"storageKey": null
},
v7 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "note",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "RiskGraphNodeQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"kind": "InlineFragment",
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v6/*: any*/),
(v7/*: any*/),
{
"args": null,
"kind": "FragmentSpread",
"name": "useRiskFormFragment"
},
{
"args": null,
"kind": "FragmentSpread",
"name": "RiskOverviewTabFragment"
}
],
"type": "Risk",
"abstractKey": null
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "RiskGraphNodeQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v5/*: any*/),
{
"kind": "InlineFragment",
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v6/*: any*/),
(v7/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentLikelihood",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentImpact",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualLikelihood",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualImpact",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentRiskScore",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualRiskScore",
"storageKey": null
}
],
"type": "Risk",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "f3e35dd3d4ea0933858541184c664b4d",
"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"
}
};
})();
(node as any).hash = "76afe5fc70188381350154bdba7aa066";
export default node;

19
apps/console2/src/hooks/useDelayedEffect.ts Normal file
View File

@@ -0,0 +1,19 @@
import { useEffect, useRef } from "react";
/**
* Hook to handle cleanup after a delay
*
* Used for disposing the graphQL query when the component unmounts
*/
export function useCleanup(callback: () => void, delay: number) {
const timer = useRef<ReturnType<typeof setTimeout>>(null);
useEffect(() => {
if (timer.current) {
clearTimeout(timer.current);
}
return () => {
timer.current = setTimeout(callback, delay);
};
}, [callback, delay]);
}

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

@@ -36,7 +36,7 @@ type Props = {
open?: boolean; open?: boolean;
risk?: RiskKey; risk?: RiskKey;
onSuccess?: () => void; onSuccess?: () => void;
connection: string; connection?: string;
}; };
type RiskTemplate = { type RiskTemplate = {

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

@@ -11,50 +11,27 @@ import {
IconTrashCan, IconTrashCan,
PageHeader, PageHeader,
PropertyRow, PropertyRow,
RiskOverview,
} from "@probo/ui"; } from "@probo/ui";
import { useNavigate, useParams } from "react-router"; import { Outlet, useNavigate, useParams } from "react-router";
import { useTranslate } from "@probo/i18n"; import { useTranslate } from "@probo/i18n";
import { getTreatment, sprintf } from "@probo/helpers"; import { getTreatment, sprintf } from "@probo/helpers";
import { ConnectionHandler, graphql } from "relay-runtime"; import { ConnectionHandler } from "relay-runtime";
import { useLazyLoadQuery } from "react-relay"; import { usePreloadedQuery, type PreloadedQuery } from "react-relay";
import type {
RiskDetailPageQuery,
RiskDetailPageQuery$data,
} from "./__generated__/RiskDetailPageQuery.graphql";
import FormRiskDialog from "./FormRiskDialog"; import FormRiskDialog from "./FormRiskDialog";
import { usePageTitle } from "@probo/hooks"; import { usePageTitle } from "@probo/hooks";
import { useOrganizationId } from "../../../hooks/useOrganizationId"; import { useOrganizationId } from "../../../hooks/useOrganizationId";
import { import {
riskNodeQuery,
RisksConnectionKey, RisksConnectionKey,
useDeleteRiskMutation, useDeleteRiskMutation,
} from "../../../hooks/graph/RiskGraph"; } from "../../../hooks/graph/RiskGraph";
import type { RiskGraphNodeQuery } from "../../../hooks/graph/__generated__/RiskGraphNodeQuery.graphql";
const riskQuery = graphql` type Props = {
query RiskDetailPageQuery($riskId: ID!) { queryRef: PreloadedQuery<RiskGraphNodeQuery>;
node(id: $riskId) { };
... on Risk {
name
description
treatment
owner {
id
fullName
}
inherentLikelihood
inherentImpact
residualLikelihood
residualImpact
note
createdAt
updatedAt
...useRiskFormFragment
}
}
}
`;
export default function RiskDetailPage() { export default function RiskDetailPage(props: Props) {
const { riskId } = useParams<{ riskId: string }>(); const { riskId } = useParams<{ riskId: string }>();
const organizationId = useOrganizationId(); const organizationId = useOrganizationId();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -64,8 +41,8 @@ export default function RiskDetailPage() {
} }
const { __ } = useTranslate(); const { __ } = useTranslate();
const data = useLazyLoadQuery<RiskDetailPageQuery>(riskQuery, { riskId }); const data = usePreloadedQuery(riskNodeQuery, props.queryRef);
const risk = data.node as Required<RiskDetailPageQuery$data["node"]>; const risk = data.node;
const [deleteRisk] = useDeleteRiskMutation(); const [deleteRisk] = useDeleteRiskMutation();
usePageTitle(risk.name ?? "Risk detail"); usePageTitle(risk.name ?? "Risk detail");
@@ -73,7 +50,7 @@ export default function RiskDetailPage() {
const onDelete = (riskId: string) => { const onDelete = (riskId: string) => {
const connectionId = ConnectionHandler.getConnectionID( const connectionId = ConnectionHandler.getConnectionID(
organizationId, organizationId,
RisksConnectionKey, RisksConnectionKey
); );
deleteRisk({ deleteRisk({
variables: { variables: {
@@ -114,9 +91,9 @@ export default function RiskDetailPage() {
<ConfirmDialog <ConfirmDialog
message={sprintf( message={sprintf(
__( __(
'This will permanently delete the risk "%s". This action cannot be undone.', 'This will permanently delete the risk "%s". This action cannot be undone.'
), ),
risk.name, risk.name
)} )}
onConfirm={() => onDelete(riskId)} onConfirm={() => onDelete(riskId)}
> >
@@ -130,10 +107,7 @@ export default function RiskDetailPage() {
<PageHeader title={risk.name} /> <PageHeader title={risk.name} />
<div className="grid grid-cols-2"> <Outlet context={{ risk }} />
<RiskOverview type="inherent" risk={risk} />
<RiskOverview type="residual" risk={risk} />
</div>
<Drawer> <Drawer>
<PropertyRow label={__("Owner")}> <PropertyRow label={__("Owner")}>

30
apps/console2/src/pages/organizations/risks/RiskOverviewTab.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { useFragment } from "react-relay";
import { useOutletContext } from "react-router";
import { graphql } from "relay-runtime";
import type { RiskOverviewTabFragment$key } from "./__generated__/RiskOverviewTabFragment.graphql";
import { RiskOverview } from "@probo/ui";
const overviewFragment = graphql`
fragment RiskOverviewTabFragment on Risk {
inherentLikelihood
inherentImpact
residualLikelihood
residualImpact
inherentRiskScore
residualRiskScore
}
`;
export default function RiskOverviewTab() {
const { risk: key } = useOutletContext<{
risk: RiskOverviewTabFragment$key;
}>();
const risk = useFragment(overviewFragment, key);
return (
<div className="grid grid-cols-2">
<RiskOverview type="inherent" risk={risk} />
<RiskOverview type="residual" risk={risk} />
</div>
);
}

16
apps/console2/src/pages/organizations/risks/RisksPage.tsx
View File

@@ -27,16 +27,22 @@ import {
useRisksQuery, useRisksQuery,
} from "../../../hooks/graph/RiskGraph"; } from "../../../hooks/graph/RiskGraph";
import { SortableTable, SortableTh } from "../../../components/SortableTable"; import { SortableTable, SortableTh } from "../../../components/SortableTable";
import type { PreloadedQuery } from "react-relay";
import type { RiskGraphQuery } from "../../../hooks/graph/__generated__/RiskGraphQuery.graphql";
export default function RisksPage() { type Props = {
queryRef: PreloadedQuery<RiskGraphQuery>;
};
export default function RisksPage(props: Props) {
const { __ } = useTranslate(); const { __ } = useTranslate();
const [editedRisk, setEditedRisk] = useState<ItemOf<typeof risks> | null>( const [editedRisk, setEditedRisk] = useState<ItemOf<typeof risks> | null>(
null, null
); );
const organizationId = useOrganizationId(); const organizationId = useOrganizationId();
const [deleteRisk] = useDeleteRiskMutation(); const [deleteRisk] = useDeleteRiskMutation();
const { connectionId, risks, refetch } = useRisksQuery(); const { connectionId, risks, refetch } = useRisksQuery(props.queryRef);
const onDelete = (riskId: string) => { const onDelete = (riskId: string) => {
deleteRisk({ deleteRisk({
@@ -119,9 +125,9 @@ export default function RisksPage() {
<ConfirmDialog <ConfirmDialog
message={sprintf( message={sprintf(
__( __(
'This will permanently delete the risk "%s". This action cannot be undone.', 'This will permanently delete the risk "%s". This action cannot be undone.'
), ),
risk.name, risk.name
)} )}
onConfirm={() => onDelete(risk.id)} onConfirm={() => onDelete(risk.id)}
> >

82
apps/console2/src/pages/organizations/risks/__generated__/RiskOverviewTabFragment.graphql.ts generated Normal file
View File

@@ -0,0 +1,82 @@
/**
* @generated SignedSource<<2b276a39b8020e7be036acb6fe4ca077>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type RiskOverviewTabFragment$data = {
readonly inherentImpact: number;
readonly inherentLikelihood: number;
readonly inherentRiskScore: number;
readonly residualImpact: number;
readonly residualLikelihood: number;
readonly residualRiskScore: number;
readonly " $fragmentType": "RiskOverviewTabFragment";
};
export type RiskOverviewTabFragment$key = {
readonly " $data"?: RiskOverviewTabFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"RiskOverviewTabFragment">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "RiskOverviewTabFragment",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentLikelihood",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentImpact",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualLikelihood",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualImpact",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "inherentRiskScore",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "residualRiskScore",
"storageKey": null
}
],
"type": "Risk",
"abstractKey": null
};
(node as any).hash = "ba472e37a44c06c48847501204080fb6";
export default node;

14
apps/console2/src/providers/RelayProviders.tsx
View File

@@ -30,7 +30,7 @@ const fetchRelay: FetchFunction = async (
request, request,
variables, variables,
_, _,
uploadables uploadables,
) => { ) => {
const requestInit: RequestInit = { const requestInit: RequestInit = {
method: "POST", method: "POST",
@@ -46,7 +46,7 @@ const fetchRelay: FetchFunction = async (
operationName: request.name, operationName: request.name,
query: request.text, query: request.text,
variables: variables, variables: variables,
}) }),
); );
const uploadableMap: { const uploadableMap: {
@@ -80,7 +80,7 @@ const fetchRelay: FetchFunction = async (
const response = await fetch( const response = await fetch(
import.meta.env.VITE_API_URL + "/api/console/v1/query", import.meta.env.VITE_API_URL + "/api/console/v1/query",
requestInit requestInit,
); );
if (response.status === 500) { if (response.status === 500) {
@@ -100,8 +100,8 @@ const fetchRelay: FetchFunction = async (
`Error fetching GraphQL query '${ `Error fetching GraphQL query '${
request.name request.name
}' with variables '${JSON.stringify(variables)}': ${JSON.stringify( }' with variables '${JSON.stringify(variables)}': ${JSON.stringify(
json.errors json.errors,
)}` )}`,
); );
} }
@@ -114,7 +114,7 @@ const store = new Store(source, {
gcReleaseBufferSize: 20, gcReleaseBufferSize: 20,
}); });
const environment = new Environment({ export const relayEnvironment = new Environment({
network: Network.create(fetchRelay), network: Network.create(fetchRelay),
store, store,
}); });
@@ -124,7 +124,7 @@ const environment = new Environment({
*/ */
export const RelayProvider = ({ children }: PropsWithChildren) => { export const RelayProvider = ({ children }: PropsWithChildren) => {
return ( return (
<RelayEnvironmentProvider environment={environment}> <RelayEnvironmentProvider environment={relayEnvironment}>
{children} {children}
</RelayEnvironmentProvider> </RelayEnvironmentProvider>
); );

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

@@ -1,14 +1,27 @@
import { import {
createBrowserRouter, createBrowserRouter,
useLoaderData,
useRouteError, useRouteError,
type RouteObject, type RouteObject,
} from "react-router"; } from "react-router";
import { MainLayout } from "./layouts/MainLayout"; import { MainLayout } from "./layouts/MainLayout";
import { AuthLayout, CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui"; import { AuthLayout, CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui";
import { lazy, Suspense, type FC } from "react"; import {
import { UnAuthenticatedError } from "./providers/RelayProviders"; lazy,
Suspense,
useEffect,
type FC,
type LazyExoticComponent,
} from "react";
import {
relayEnvironment,
UnAuthenticatedError,
} from "./providers/RelayProviders";
import { RisksPageSkeleton } from "./components/skeletons/RisksPageSkeleton.tsx"; import { RisksPageSkeleton } from "./components/skeletons/RisksPageSkeleton.tsx";
import { PageSkeleton } from "./components/skeletons/PageSkeleton.tsx"; 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";
function ErrorBoundary() { function ErrorBoundary() {
const error = useRouteError(); const error = useRouteError();
@@ -20,12 +33,11 @@ function ErrorBoundary() {
} }
type Route = { type Route = {
path: string; Component: FC<any> | LazyExoticComponent<FC<any>>;
Component: FC;
children?: Route[]; children?: Route[];
ErrorBoundary?: FC;
fallback?: FC; fallback?: FC;
}; queryLoader?: (params: Record<string, string>) => PreloadedQuery<any>;
} & Omit<RouteObject, "Component" | "children">;
const routes = [ const routes = [
{ {
@@ -50,7 +62,7 @@ const routes = [
{ {
path: "organizations/new", path: "organizations/new",
Component: lazy( Component: lazy(
() => import("./pages/organizations/NewOrganizationPage") () => import("./pages/organizations/NewOrganizationPage"),
), ),
}, },
], ],
@@ -64,20 +76,32 @@ const routes = [
path: "vendors", path: "vendors",
fallback: PageSkeleton, fallback: PageSkeleton,
Component: lazy( Component: lazy(
() => import("./pages/organizations/vendors/VendorsPage") () => import("./pages/organizations/vendors/VendorsPage"),
), ),
}, },
{ {
path: "risks", path: "risks",
fallback: RisksPageSkeleton, fallback: RisksPageSkeleton,
queryLoader: ({ organizationId }) =>
loadQuery(relayEnvironment, risksQuery, { organizationId }),
Component: lazy(() => import("./pages/organizations/risks/RisksPage")), Component: lazy(() => import("./pages/organizations/risks/RisksPage")),
}, },
{ {
path: "risks/:riskId", path: "risks/:riskId",
fallback: PageSkeleton, fallback: PageSkeleton,
queryLoader: ({ riskId }) =>
loadQuery(relayEnvironment, riskNodeQuery, { riskId }),
Component: lazy( Component: lazy(
() => import("./pages/organizations/risks/RiskDetailPage") () => import("./pages/organizations/risks/RiskDetailPage"),
), ),
children: [
{
path: "",
Component: lazy(
() => import("./pages/organizations/risks/RiskOverviewTab"),
),
},
],
}, },
], ],
}, },
@@ -86,23 +110,48 @@ const routes = [
/** /**
* Wrap component with a suspense to handle lazy loading & relay loading states * Wrap component with a suspense to handle lazy loading & relay loading states
*/ */
function routeTransformer(route: Route): RouteObject { function routeTransformer({
if ("fallback" in route && route.fallback) { fallback: FallbackComponent,
const fallback = <route.fallback />; queryLoader,
return { ...route
...route, }: Route): RouteObject {
children: route.children?.map(routeTransformer), let result = { ...route };
Component: () => ( if (FallbackComponent) {
<Suspense fallback={fallback}> result = {
<route.Component /> ...result,
Component: (props) => (
<Suspense fallback={<FallbackComponent />}>
<route.Component {...props} />
</Suspense> </Suspense>
), ),
} as RouteObject; };
}
if (queryLoader) {
result = {
...result,
loader: ({ params }) => {
const query = queryLoader(params as Record<string, string>);
return {
queryRef: query,
dispose: () => {
console.log("cleaning up query");
query.dispose();
},
};
},
Component: () => {
const { queryRef, dispose } = useLoaderData();
useCleanup(dispose, 1000);
return <route.Component queryRef={queryRef} />;
},
};
} }
return { return {
...route, ...result,
children: route.children?.map(routeTransformer), children: route.children?.map(routeTransformer),
}; } as RouteObject;
} }
export const router = createBrowserRouter(routes.map(routeTransformer)); export const router = createBrowserRouter(routes.map(routeTransformer));