Add sortable table with refetchable
Signed-off-by: Bryan Frimin <bryan@getprobo.com> Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
committed by
Sacha Al Himdani
parent
c2a69b5428
commit
1448d37d55
@@ -22,6 +22,7 @@
|
||||
"@radix-ui/react-label": "^2.1.7",
|
||||
"@radix-ui/react-select": "^2.2.5",
|
||||
"@tanstack/react-query": "^5.76.1",
|
||||
"clsx": "^2.1.1",
|
||||
"minisearch": "^7.1.2",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
|
||||
80
apps/console2/src/components/SortableTable.tsx
Normal file
80
apps/console2/src/components/SortableTable.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { IconChevronTriangleDownSmall, Table, Th } from "@probo/ui";
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
createContext,
|
||||
startTransition,
|
||||
useContext,
|
||||
useState,
|
||||
type ComponentProps,
|
||||
} from "react";
|
||||
|
||||
type Order = {
|
||||
direction: string;
|
||||
field: string;
|
||||
};
|
||||
|
||||
const SortableContext = createContext({
|
||||
order: {
|
||||
direction: "DESC",
|
||||
field: "CREATED_AT",
|
||||
},
|
||||
onOrderChange: (order: any) => {},
|
||||
});
|
||||
|
||||
const defaultOrder = {
|
||||
direction: "DESC",
|
||||
field: "CREATED_AT",
|
||||
} as Order;
|
||||
|
||||
export function SortableTable<T extends Order>({
|
||||
refetch,
|
||||
...props
|
||||
}: ComponentProps<typeof Table> & {
|
||||
refetch: (o: { order: Order }) => void;
|
||||
}) {
|
||||
const [order, setOrder] = useState(defaultOrder);
|
||||
const onOrderChange = (o: Order) => {
|
||||
startTransition(() => {
|
||||
setOrder(o);
|
||||
refetch({ order: o });
|
||||
});
|
||||
};
|
||||
return (
|
||||
<SortableContext value={{ order, onOrderChange }}>
|
||||
<Table {...props} />
|
||||
</SortableContext>
|
||||
);
|
||||
}
|
||||
|
||||
export function SortableTh({
|
||||
children,
|
||||
field,
|
||||
...props
|
||||
}: ComponentProps<typeof Th> & { field: string }) {
|
||||
const { order, onOrderChange } = useContext(SortableContext);
|
||||
const isCurrentField = order.field === field;
|
||||
const isDesc = order.direction === "DESC";
|
||||
const changeOrder = () => {
|
||||
onOrderChange({
|
||||
direction: isDesc && isCurrentField ? "ASC" : "DESC",
|
||||
field,
|
||||
});
|
||||
};
|
||||
return (
|
||||
<Th {...props}>
|
||||
<button
|
||||
className="flex items-center cursor-pointer hover:text-txt-primary"
|
||||
onClick={changeOrder}
|
||||
>
|
||||
{children}
|
||||
<IconChevronTriangleDownSmall
|
||||
size={16}
|
||||
className={clsx(
|
||||
isCurrentField && "text-txt-primary",
|
||||
isCurrentField && !isDesc && "rotate-180"
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</Th>
|
||||
);
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import { graphql } from "relay-runtime";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { useMutationWithToasts } from "../hooks/useMutationWithToasts";
|
||||
import type { RiskGraphDeleteMutation } from "./__generated__/RiskGraphDeleteMutation.graphql";
|
||||
|
||||
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. Please try again."),
|
||||
});
|
||||
}
|
||||
94
apps/console2/src/hooks/graph/RiskGraph.ts
Normal file
94
apps/console2/src/hooks/graph/RiskGraph.ts
Normal file
@@ -0,0 +1,94 @@
|
||||
import { ConnectionHandler, graphql } from "relay-runtime";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { useMutationWithToasts } from "../useMutationWithToasts.ts";
|
||||
import type { RiskGraphDeleteMutation } from "./__generated__/RiskGraphDeleteMutation.graphql.ts";
|
||||
import { useLazyLoadQuery, useRefetchableFragment } from "react-relay";
|
||||
import { useOrganizationId } from "../useOrganizationId.ts";
|
||||
import type { RiskGraphQuery } from "./__generated__/RiskGraphQuery.graphql.ts";
|
||||
import type { RiskGraphFragment$key } from "./__generated__/RiskGraphFragment.graphql.ts";
|
||||
|
||||
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. Please try again."),
|
||||
});
|
||||
}
|
||||
|
||||
const risksQuery = graphql`
|
||||
query RiskGraphQuery($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: null }
|
||||
after: { type: "CursorKey", defaultValue: null }
|
||||
before: { type: "CursorKey", defaultValue: null }
|
||||
last: { type: "Int", defaultValue: null }
|
||||
) {
|
||||
risks(
|
||||
first: $first
|
||||
after: $after
|
||||
last: $last
|
||||
before: $before
|
||||
orderBy: $order
|
||||
) @connection(key: "RisksListQuery_risks") {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
name
|
||||
category
|
||||
treatment
|
||||
inherentLikelihood
|
||||
inherentImpact
|
||||
residualLikelihood
|
||||
residualImpact
|
||||
inherentRiskScore
|
||||
residualRiskScore
|
||||
...useRiskFormFragment
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const RisksConnectionKey = "RisksListQuery_risks";
|
||||
|
||||
export function useRisksQuery() {
|
||||
const data = useLazyLoadQuery<RiskGraphQuery>(risksQuery, {
|
||||
organizationId: useOrganizationId(),
|
||||
});
|
||||
const [dataFragment, refetch] = useRefetchableFragment(
|
||||
risksFragment,
|
||||
data.organization as RiskGraphFragment$key,
|
||||
);
|
||||
const risks = dataFragment?.risks?.edges.map((edge) => edge.node);
|
||||
return {
|
||||
risks,
|
||||
refetch,
|
||||
connectionId: ConnectionHandler.getConnectionID(
|
||||
data.organization.id,
|
||||
RisksConnectionKey,
|
||||
),
|
||||
};
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { graphql } from "relay-runtime";
|
||||
import { useMutationWithToasts } from "../hooks/useMutationWithToasts";
|
||||
import type { VendorGraphCreateMutation } from "./__generated__/VendorGraphCreateMutation.graphql";
|
||||
import type { VendorGraphDeleteMutation } from "./__generated__/VendorGraphDeleteMutation.graphql";
|
||||
import { useMutationWithToasts } from "../useMutationWithToasts.ts";
|
||||
import type { VendorGraphCreateMutation } from "./__generated__/VendorGraphCreateMutation.graphql.ts";
|
||||
import type { VendorGraphDeleteMutation } from "./__generated__/VendorGraphDeleteMutation.graphql.ts";
|
||||
|
||||
const createVendorMutation = graphql`
|
||||
mutation VendorGraphCreateMutation(
|
||||
@@ -32,7 +32,7 @@ export function useCreateVendorMutation() {
|
||||
{
|
||||
successMessage: __("Vendor created successfully."),
|
||||
errorMessage: __("Failed to create vendor. Please try again."),
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@@ -55,6 +55,6 @@ export function useDeleteVendorMutation() {
|
||||
{
|
||||
successMessage: __("Vendor deleted successfully."),
|
||||
errorMessage: __("Failed to delete vendor. Please try again."),
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
285
apps/console2/src/hooks/graph/__generated__/RiskGraphFragment.graphql.ts
generated
Normal file
285
apps/console2/src/hooks/graph/__generated__/RiskGraphFragment.graphql.ts
generated
Normal file
@@ -0,0 +1,285 @@
|
||||
/**
|
||||
* @generated SignedSource<<352ca1fa13e246dd48eb0cd346a251ef>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ReaderFragment } from 'relay-runtime';
|
||||
export type RiskTreatment = "ACCEPTED" | "AVOIDED" | "MITIGATED" | "TRANSFERRED" | "%future added value";
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type RiskGraphFragment$data = {
|
||||
readonly id: string;
|
||||
readonly risks: {
|
||||
readonly edges: ReadonlyArray<{
|
||||
readonly node: {
|
||||
readonly category: string;
|
||||
readonly id: string;
|
||||
readonly inherentImpact: number;
|
||||
readonly inherentLikelihood: number;
|
||||
readonly inherentRiskScore: number;
|
||||
readonly name: string;
|
||||
readonly residualImpact: number;
|
||||
readonly residualLikelihood: number;
|
||||
readonly residualRiskScore: number;
|
||||
readonly treatment: RiskTreatment;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"useRiskFormFragment">;
|
||||
};
|
||||
}>;
|
||||
};
|
||||
readonly " $fragmentType": "RiskGraphFragment";
|
||||
};
|
||||
export type RiskGraphFragment$key = {
|
||||
readonly " $data"?: RiskGraphFragment$data;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"RiskGraphFragment">;
|
||||
};
|
||||
|
||||
import RisksListQuery_graphql from './RisksListQuery.graphql';
|
||||
|
||||
const node: ReaderFragment = (function(){
|
||||
var v0 = [
|
||||
"risks"
|
||||
],
|
||||
v1 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"argumentDefinitions": [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "after"
|
||||
},
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "before"
|
||||
},
|
||||
{
|
||||
"defaultValue": 50,
|
||||
"kind": "LocalArgument",
|
||||
"name": "first"
|
||||
},
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "last"
|
||||
},
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "order"
|
||||
}
|
||||
],
|
||||
"kind": "Fragment",
|
||||
"metadata": {
|
||||
"connection": [
|
||||
{
|
||||
"count": null,
|
||||
"cursor": null,
|
||||
"direction": "bidirectional",
|
||||
"path": (v0/*: any*/)
|
||||
}
|
||||
],
|
||||
"refetch": {
|
||||
"connection": {
|
||||
"forward": {
|
||||
"count": "first",
|
||||
"cursor": "after"
|
||||
},
|
||||
"backward": {
|
||||
"count": "last",
|
||||
"cursor": "before"
|
||||
},
|
||||
"path": (v0/*: any*/)
|
||||
},
|
||||
"fragmentPathInResult": [
|
||||
"node"
|
||||
],
|
||||
"operation": RisksListQuery_graphql,
|
||||
"identifierInfo": {
|
||||
"identifierField": "id",
|
||||
"identifierQueryVariableName": "id"
|
||||
}
|
||||
}
|
||||
},
|
||||
"name": "RiskGraphFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "risks",
|
||||
"args": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "orderBy",
|
||||
"variableName": "order"
|
||||
}
|
||||
],
|
||||
"concreteType": "RiskConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "__RisksListQuery_risks_connection",
|
||||
"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": [
|
||||
(v1/*: 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
|
||||
},
|
||||
{
|
||||
"args": null,
|
||||
"kind": "FragmentSpread",
|
||||
"name": "useRiskFormFragment"
|
||||
},
|
||||
{
|
||||
"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
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "hasPreviousPage",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "startCursor",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
(v1/*: any*/)
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "dc662098b9aceaa2400f4656ed1b2d01";
|
||||
|
||||
export default node;
|
||||
313
apps/console2/src/hooks/graph/__generated__/RiskGraphQuery.graphql.ts
generated
Normal file
313
apps/console2/src/hooks/graph/__generated__/RiskGraphQuery.graphql.ts
generated
Normal file
@@ -0,0 +1,313 @@
|
||||
/**
|
||||
* @generated SignedSource<<25323fd3bf9201703c2f644bf654425d>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type RiskGraphQuery$variables = {
|
||||
organizationId: string;
|
||||
};
|
||||
export type RiskGraphQuery$data = {
|
||||
readonly organization: {
|
||||
readonly id: string;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"RiskGraphFragment">;
|
||||
};
|
||||
};
|
||||
export type RiskGraphQuery = {
|
||||
response: RiskGraphQuery$data;
|
||||
variables: RiskGraphQuery$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": "RiskGraphQuery",
|
||||
"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": "RiskGraphQuery",
|
||||
"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": "f522d32a3f55657d67c408ac7b1fe5dd",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "RiskGraphQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query RiskGraphQuery(\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 = "eae4d0ae12b88751b50d61bb70bd55a4";
|
||||
|
||||
export default node;
|
||||
393
apps/console2/src/hooks/graph/__generated__/RisksListQuery.graphql.ts
generated
Normal file
393
apps/console2/src/hooks/graph/__generated__/RisksListQuery.graphql.ts
generated
Normal file
@@ -0,0 +1,393 @@
|
||||
/**
|
||||
* @generated SignedSource<<5cce23056dd540654c65719414023e64>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type OrderDirection = "ASC" | "DESC" | "%future added value";
|
||||
export type RiskOrderField = "CATEGORY" | "CREATED_AT" | "INITIAL_RISK_SCORE" | "NAME" | "RESIDUAL_RISK_SCORE" | "TREATMENT" | "UPDATED_AT" | "%future added value";
|
||||
export type RiskOrder = {
|
||||
direction: OrderDirection;
|
||||
field: RiskOrderField;
|
||||
};
|
||||
export type RisksListQuery$variables = {
|
||||
after?: any | null | undefined;
|
||||
before?: any | null | undefined;
|
||||
first?: number | null | undefined;
|
||||
id: string;
|
||||
last?: number | null | undefined;
|
||||
order?: RiskOrder | null | undefined;
|
||||
};
|
||||
export type RisksListQuery$data = {
|
||||
readonly node: {
|
||||
readonly " $fragmentSpreads": FragmentRefs<"RiskGraphFragment">;
|
||||
};
|
||||
};
|
||||
export type RisksListQuery = {
|
||||
response: RisksListQuery$data;
|
||||
variables: RisksListQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "after"
|
||||
},
|
||||
v1 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "before"
|
||||
},
|
||||
v2 = {
|
||||
"defaultValue": 50,
|
||||
"kind": "LocalArgument",
|
||||
"name": "first"
|
||||
},
|
||||
v3 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "id"
|
||||
},
|
||||
v4 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "last"
|
||||
},
|
||||
v5 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "order"
|
||||
},
|
||||
v6 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "id",
|
||||
"variableName": "id"
|
||||
}
|
||||
],
|
||||
v7 = {
|
||||
"kind": "Variable",
|
||||
"name": "after",
|
||||
"variableName": "after"
|
||||
},
|
||||
v8 = {
|
||||
"kind": "Variable",
|
||||
"name": "before",
|
||||
"variableName": "before"
|
||||
},
|
||||
v9 = {
|
||||
"kind": "Variable",
|
||||
"name": "first",
|
||||
"variableName": "first"
|
||||
},
|
||||
v10 = {
|
||||
"kind": "Variable",
|
||||
"name": "last",
|
||||
"variableName": "last"
|
||||
},
|
||||
v11 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__typename",
|
||||
"storageKey": null
|
||||
},
|
||||
v12 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
v13 = [
|
||||
(v7/*: any*/),
|
||||
(v8/*: any*/),
|
||||
(v9/*: any*/),
|
||||
(v10/*: any*/),
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "orderBy",
|
||||
"variableName": "order"
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": [
|
||||
(v0/*: any*/),
|
||||
(v1/*: any*/),
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/),
|
||||
(v4/*: any*/),
|
||||
(v5/*: any*/)
|
||||
],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "RisksListQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v6/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"args": [
|
||||
(v7/*: any*/),
|
||||
(v8/*: any*/),
|
||||
(v9/*: any*/),
|
||||
(v10/*: any*/),
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "order",
|
||||
"variableName": "order"
|
||||
}
|
||||
],
|
||||
"kind": "FragmentSpread",
|
||||
"name": "RiskGraphFragment"
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [
|
||||
(v0/*: any*/),
|
||||
(v1/*: any*/),
|
||||
(v2/*: any*/),
|
||||
(v4/*: any*/),
|
||||
(v5/*: any*/),
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"kind": "Operation",
|
||||
"name": "RisksListQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v6/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v11/*: any*/),
|
||||
(v12/*: any*/),
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v13/*: 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": [
|
||||
(v12/*: 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": [
|
||||
(v12/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
(v11/*: 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": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v13/*: any*/),
|
||||
"filters": [
|
||||
"orderBy"
|
||||
],
|
||||
"handle": "connection",
|
||||
"key": "RisksListQuery_risks",
|
||||
"kind": "LinkedHandle",
|
||||
"name": "risks"
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "ca8ad189a3d134eecaaf9adfe090277e",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "RisksListQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query RisksListQuery(\n $after: CursorKey = null\n $before: CursorKey = null\n $first: Int = 50\n $last: Int = null\n $order: RiskOrder = null\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...RiskGraphFragment_16fISc\n id\n }\n}\n\nfragment RiskGraphFragment_16fISc on Organization {\n risks(first: $first, after: $after, last: $last, before: $before, orderBy: $order) {\n edges {\n node {\n id\n name\n category\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n inherentRiskScore\n residualRiskScore\n ...useRiskFormFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n\nfragment useRiskFormFragment on Risk {\n id\n name\n category\n description\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n note\n owner {\n id\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "dc662098b9aceaa2400f4656ed1b2d01";
|
||||
|
||||
export default node;
|
||||
@@ -1,6 +1,7 @@
|
||||
import {
|
||||
ActionDropdown,
|
||||
Avatar,
|
||||
Badge,
|
||||
Breadcrumb,
|
||||
Button,
|
||||
ConfirmDialog,
|
||||
@@ -11,7 +12,6 @@ import {
|
||||
PageHeader,
|
||||
PropertyRow,
|
||||
RiskOverview,
|
||||
Badge,
|
||||
} from "@probo/ui";
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
@@ -25,7 +25,10 @@ import type {
|
||||
import FormRiskDialog from "./FormRiskDialog";
|
||||
import { usePageTitle } from "@probo/hooks";
|
||||
import { useOrganizationId } from "../../../hooks/useOrganizationId";
|
||||
import { useDeleteRiskMutation } from "../../../graph/RiskGraph";
|
||||
import {
|
||||
RisksConnectionKey,
|
||||
useDeleteRiskMutation,
|
||||
} from "../../../hooks/graph/RiskGraph";
|
||||
|
||||
const riskQuery = graphql`
|
||||
query RiskDetailPageQuery($riskId: ID!) {
|
||||
@@ -70,7 +73,7 @@ export default function RiskDetailPage() {
|
||||
const onDelete = (riskId: string) => {
|
||||
const connectionId = ConnectionHandler.getConnectionID(
|
||||
organizationId,
|
||||
"RisksPage_risks"
|
||||
RisksConnectionKey,
|
||||
);
|
||||
deleteRisk({
|
||||
variables: {
|
||||
@@ -111,9 +114,9 @@ export default function RiskDetailPage() {
|
||||
<ConfirmDialog
|
||||
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)}
|
||||
>
|
||||
|
||||
@@ -1,87 +1,48 @@
|
||||
import {
|
||||
ActionDropdown,
|
||||
Button,
|
||||
ConfirmDialog,
|
||||
DropdownItem,
|
||||
IconPencil,
|
||||
IconPlusLarge,
|
||||
IconTrashCan,
|
||||
PageHeader,
|
||||
RisksChart,
|
||||
SeverityBadge,
|
||||
Tbody,
|
||||
Td,
|
||||
Tr,
|
||||
Th,
|
||||
Thead,
|
||||
Tbody,
|
||||
Table,
|
||||
RiskBadge,
|
||||
SeverityBadge,
|
||||
ActionDropdown,
|
||||
DropdownItem,
|
||||
IconTrashCan,
|
||||
IconPencil,
|
||||
ConfirmDialog,
|
||||
RisksChart,
|
||||
Tr,
|
||||
} from "@probo/ui";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { IconPlusLarge } from "@probo/ui";
|
||||
import FormRiskDialog from "./FormRiskDialog";
|
||||
import { graphql } from "relay-runtime";
|
||||
import { useLazyLoadQuery } from "react-relay";
|
||||
import type { RisksPageQuery as RisksPageQueryType } from "./__generated__/RisksPageQuery.graphql";
|
||||
import { useOrganizationId } from "../../../hooks/useOrganizationId";
|
||||
import { useState } from "react";
|
||||
import { usePageTitle } from "@probo/hooks";
|
||||
import { getTreatment, sprintf } from "@probo/helpers";
|
||||
import type { ItemOf } from "../../../types";
|
||||
import { useDeleteRiskMutation } from "../../../graph/RiskGraph";
|
||||
|
||||
const risksQuery = graphql`
|
||||
query RisksPageQuery(
|
||||
$organizationId: ID!
|
||||
$first: Int
|
||||
$after: CursorKey
|
||||
$last: Int
|
||||
$before: CursorKey
|
||||
) {
|
||||
organization: node(id: $organizationId) {
|
||||
... on Organization {
|
||||
risks(first: $first, after: $after, last: $last, before: $before)
|
||||
@connection(key: "RisksPage_risks") {
|
||||
__id
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
name
|
||||
category
|
||||
treatment
|
||||
inherentLikelihood
|
||||
inherentImpact
|
||||
residualLikelihood
|
||||
residualImpact
|
||||
inherentSeverity
|
||||
...useRiskFormFragment
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
import {
|
||||
useDeleteRiskMutation,
|
||||
useRisksQuery,
|
||||
} from "../../../hooks/graph/RiskGraph";
|
||||
import { SortableTable, SortableTh } from "../../../components/SortableTable";
|
||||
|
||||
export default function RisksPage() {
|
||||
const { __ } = useTranslate();
|
||||
const data = useLazyLoadQuery<RisksPageQueryType>(risksQuery, {
|
||||
organizationId: useOrganizationId(),
|
||||
});
|
||||
const risks = data.organization?.risks?.edges.map((edge) => edge.node);
|
||||
const [editedRisk, setEditedRisk] = useState<ItemOf<typeof risks> | null>(
|
||||
null
|
||||
null,
|
||||
);
|
||||
const organizationId = useOrganizationId();
|
||||
|
||||
const [deleteRisk] = useDeleteRiskMutation();
|
||||
const connectionId = data.organization!.risks!.__id;
|
||||
const { connectionId, risks, refetch } = useRisksQuery();
|
||||
|
||||
const onDelete = (riskId: string) => {
|
||||
risks;
|
||||
deleteRisk({
|
||||
variables: {
|
||||
input: { riskId },
|
||||
connections: [],
|
||||
connections: [connectionId],
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -117,15 +78,18 @@ export default function RisksPage() {
|
||||
risks={risks}
|
||||
/>
|
||||
</div>
|
||||
<Table>
|
||||
<SortableTable refetch={refetch}>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>{__("Risk name")}</Th>
|
||||
<Th>{__("Category")}</Th>
|
||||
<Th>{__("Treatment")}</Th>
|
||||
<Th>{__("Initial Risk")}</Th>
|
||||
<Th>{__("Residual Risk")}</Th>
|
||||
<Th>{__("Severity")}</Th>
|
||||
<SortableTh field="NAME">{__("Risk name")}</SortableTh>
|
||||
<SortableTh field="CATEGORY">{__("Category")}</SortableTh>
|
||||
<SortableTh field="TREATMENT">{__("Treatment")}</SortableTh>
|
||||
<SortableTh field="INHERENT_RISK_SCORE">
|
||||
{__("Initial Risk")}
|
||||
</SortableTh>
|
||||
<SortableTh field="RESIDUAL_RISK_SCORE">
|
||||
{__("Residual Risk")}
|
||||
</SortableTh>
|
||||
<Th></Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
@@ -139,17 +103,10 @@ export default function RisksPage() {
|
||||
<Td>{risk.category}</Td>
|
||||
<Td>{getTreatment(__, risk.treatment)}</Td>
|
||||
<Td>
|
||||
<RiskBadge
|
||||
level={risk.inherentLikelihood * risk.inherentImpact}
|
||||
/>
|
||||
<SeverityBadge score={risk.inherentRiskScore} />
|
||||
</Td>
|
||||
<Td>
|
||||
<RiskBadge
|
||||
level={risk.residualLikelihood * risk.residualImpact}
|
||||
/>
|
||||
</Td>
|
||||
<Td>
|
||||
<SeverityBadge severity={risk.inherentSeverity} />
|
||||
<SeverityBadge score={risk.residualRiskScore} />
|
||||
</Td>
|
||||
<Td noLink>
|
||||
<ActionDropdown>
|
||||
@@ -162,9 +119,9 @@ export default function RisksPage() {
|
||||
<ConfirmDialog
|
||||
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)}
|
||||
>
|
||||
@@ -177,7 +134,7 @@ export default function RisksPage() {
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</SortableTable>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,456 +0,0 @@
|
||||
/**
|
||||
* @generated SignedSource<<8bfe33d4131ba478fc7cb040fac9197c>>
|
||||
* @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 RisksPageQuery$variables = {
|
||||
after?: any | null | undefined;
|
||||
before?: any | null | undefined;
|
||||
first?: number | null | undefined;
|
||||
last?: number | null | undefined;
|
||||
organizationId: string;
|
||||
};
|
||||
export type RisksPageQuery$data = {
|
||||
readonly organization: {
|
||||
readonly risks?: {
|
||||
readonly __id: string;
|
||||
readonly edges: ReadonlyArray<{
|
||||
readonly node: {
|
||||
readonly category: string;
|
||||
readonly id: string;
|
||||
readonly inherentImpact: number;
|
||||
readonly inherentLikelihood: number;
|
||||
readonly inherentSeverity: number;
|
||||
readonly name: string;
|
||||
readonly residualImpact: number;
|
||||
readonly residualLikelihood: number;
|
||||
readonly treatment: RiskTreatment;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"useRiskFormFragment">;
|
||||
};
|
||||
}>;
|
||||
};
|
||||
};
|
||||
};
|
||||
export type RisksPageQuery = {
|
||||
response: RisksPageQuery$data;
|
||||
variables: RisksPageQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "after"
|
||||
},
|
||||
v1 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "before"
|
||||
},
|
||||
v2 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "first"
|
||||
},
|
||||
v3 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "last"
|
||||
},
|
||||
v4 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "organizationId"
|
||||
},
|
||||
v5 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "id",
|
||||
"variableName": "organizationId"
|
||||
}
|
||||
],
|
||||
v6 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
v7 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
v8 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "category",
|
||||
"storageKey": null
|
||||
},
|
||||
v9 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "treatment",
|
||||
"storageKey": null
|
||||
},
|
||||
v10 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "inherentLikelihood",
|
||||
"storageKey": null
|
||||
},
|
||||
v11 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "inherentImpact",
|
||||
"storageKey": null
|
||||
},
|
||||
v12 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "residualLikelihood",
|
||||
"storageKey": null
|
||||
},
|
||||
v13 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "residualImpact",
|
||||
"storageKey": null
|
||||
},
|
||||
v14 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "inherentSeverity",
|
||||
"storageKey": null
|
||||
},
|
||||
v15 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__typename",
|
||||
"storageKey": null
|
||||
},
|
||||
v16 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "cursor",
|
||||
"storageKey": null
|
||||
},
|
||||
v17 = {
|
||||
"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
|
||||
},
|
||||
v18 = {
|
||||
"kind": "ClientExtension",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "__id",
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
v19 = [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "after",
|
||||
"variableName": "after"
|
||||
},
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "before",
|
||||
"variableName": "before"
|
||||
},
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "first",
|
||||
"variableName": "first"
|
||||
},
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "last",
|
||||
"variableName": "last"
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": [
|
||||
(v0/*: any*/),
|
||||
(v1/*: any*/),
|
||||
(v2/*: any*/),
|
||||
(v3/*: any*/),
|
||||
(v4/*: any*/)
|
||||
],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "RisksPageQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "organization",
|
||||
"args": (v5/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "risks",
|
||||
"args": null,
|
||||
"concreteType": "RiskConnection",
|
||||
"kind": "LinkedField",
|
||||
"name": "__RisksPage_risks_connection",
|
||||
"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": [
|
||||
(v6/*: any*/),
|
||||
(v7/*: any*/),
|
||||
(v8/*: any*/),
|
||||
(v9/*: any*/),
|
||||
(v10/*: any*/),
|
||||
(v11/*: any*/),
|
||||
(v12/*: any*/),
|
||||
(v13/*: any*/),
|
||||
(v14/*: any*/),
|
||||
{
|
||||
"args": null,
|
||||
"kind": "FragmentSpread",
|
||||
"name": "useRiskFormFragment"
|
||||
},
|
||||
(v15/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
(v16/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
(v17/*: any*/),
|
||||
(v18/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [
|
||||
(v4/*: any*/),
|
||||
(v2/*: any*/),
|
||||
(v0/*: any*/),
|
||||
(v3/*: any*/),
|
||||
(v1/*: any*/)
|
||||
],
|
||||
"kind": "Operation",
|
||||
"name": "RisksPageQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": "organization",
|
||||
"args": (v5/*: any*/),
|
||||
"concreteType": null,
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v15/*: any*/),
|
||||
{
|
||||
"kind": "InlineFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v19/*: 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": [
|
||||
(v6/*: any*/),
|
||||
(v7/*: any*/),
|
||||
(v8/*: any*/),
|
||||
(v9/*: any*/),
|
||||
(v10/*: any*/),
|
||||
(v11/*: any*/),
|
||||
(v12/*: any*/),
|
||||
(v13/*: any*/),
|
||||
(v14/*: any*/),
|
||||
{
|
||||
"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": [
|
||||
(v6/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
(v15/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
(v16/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
(v17/*: any*/),
|
||||
(v18/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v19/*: any*/),
|
||||
"filters": null,
|
||||
"handle": "connection",
|
||||
"key": "RisksPage_risks",
|
||||
"kind": "LinkedHandle",
|
||||
"name": "risks"
|
||||
}
|
||||
],
|
||||
"type": "Organization",
|
||||
"abstractKey": null
|
||||
},
|
||||
(v6/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "6bc1d32f53846f76f66d3dd065f5b038",
|
||||
"id": null,
|
||||
"metadata": {
|
||||
"connection": [
|
||||
{
|
||||
"count": null,
|
||||
"cursor": null,
|
||||
"direction": "bidirectional",
|
||||
"path": [
|
||||
"organization",
|
||||
"risks"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "RisksPageQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query RisksPageQuery(\n $organizationId: ID!\n $first: Int\n $after: CursorKey\n $last: Int\n $before: CursorKey\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n risks(first: $first, after: $after, last: $last, before: $before) {\n edges {\n node {\n id\n name\n category\n treatment\n inherentLikelihood\n inherentImpact\n residualLikelihood\n residualImpact\n inherentSeverity\n ...useRiskFormFragment\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n }\n id\n }\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 = "7f07b7d980ca4566fbd96b734cb0f04e";
|
||||
|
||||
export default node;
|
||||
@@ -11,11 +11,11 @@ import {
|
||||
import { useVendorSearch } from "../../../hooks/useVendorSearch";
|
||||
import { faviconUrl } from "@probo/helpers";
|
||||
import type { Vendor } from "@probo/vendors";
|
||||
import { useCreateVendorMutation } from "../../../graph/VendorGraph";
|
||||
import { useState } from "react";
|
||||
import { useCreateVendorMutation } from "../../../hooks/graph/VendorGraph";
|
||||
import { type ReactNode, useState } from "react";
|
||||
|
||||
type Props = {
|
||||
trigger: React.ReactNode;
|
||||
trigger: ReactNode;
|
||||
organizationId: string;
|
||||
connection: string;
|
||||
};
|
||||
|
||||
@@ -28,7 +28,7 @@ import type {
|
||||
import { faviconUrl, sprintf } from "@probo/helpers";
|
||||
import type { NodeOf } from "../../../types";
|
||||
import { CreateVendorDialog } from "./CreateVendorDialog";
|
||||
import { useDeleteVendorMutation } from "../../../graph/VendorGraph";
|
||||
import { useDeleteVendorMutation } from "../../../hooks/graph/VendorGraph";
|
||||
|
||||
const vendorsQuery = graphql`
|
||||
query VendorsPageQuery($organizationId: ID!) {
|
||||
@@ -84,7 +84,7 @@ export default function VendorsPage() {
|
||||
<PageHeader
|
||||
title={__("Vendors")}
|
||||
description={__(
|
||||
"Vendors are third-party services that your company uses. Add them to keep track of their risk and compliance status."
|
||||
"Vendors are third-party services that your company uses. Add them to keep track of their risk and compliance status.",
|
||||
)}
|
||||
>
|
||||
<CreateVendorDialog
|
||||
@@ -142,7 +142,7 @@ function VendorRow({
|
||||
connections: [
|
||||
ConnectionHandler.getConnectionID(
|
||||
organizationId,
|
||||
"VendorsPage_vendors"
|
||||
"VendorsPage_vendors",
|
||||
),
|
||||
],
|
||||
},
|
||||
@@ -182,9 +182,9 @@ function VendorRow({
|
||||
<ConfirmDialog
|
||||
message={sprintf(
|
||||
__(
|
||||
'This will permanently delete the vendor "%s". This action cannot be undone.'
|
||||
'This will permanently delete the vendor "%s". This action cannot be undone.',
|
||||
),
|
||||
vendor.name
|
||||
vendor.name,
|
||||
)}
|
||||
onConfirm={() => onDelete(vendor.id)}
|
||||
>
|
||||
|
||||
@@ -19,17 +19,15 @@
|
||||
"@radix-ui/react-portal": "^1.1.9",
|
||||
"@radix-ui/react-scroll-area": "^1.2.9",
|
||||
"@tailwindcss/vite": "^4.1.7",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"tailwind-merge": "^3.3.0",
|
||||
"tailwind-variants": "^1.0.0",
|
||||
"tailwindcss": "^4.1.7",
|
||||
"tw-animate-css": "^1.3.0",
|
||||
"zustand": "^5.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"@chromatic-com/storybook": "^3.2.6",
|
||||
"@eslint/js": "^9.25.0",
|
||||
"@probo/prettier": "1.0.0",
|
||||
@@ -59,7 +57,9 @@
|
||||
"vitest": "^3.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react-router": "^7.6.0"
|
||||
"react-router": "^7.6.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
|
||||
@@ -12,10 +12,10 @@ type Story = StoryObj<typeof SeverityBadge>;
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<div className="space-y-2">
|
||||
<SeverityBadge severity={75} />
|
||||
<SeverityBadge severity={50} />
|
||||
<SeverityBadge severity={25} />
|
||||
<SeverityBadge severity={0} />
|
||||
<SeverityBadge score={75} />
|
||||
<SeverityBadge score={50} />
|
||||
<SeverityBadge score={25} />
|
||||
<SeverityBadge score={0} />
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
@@ -9,22 +9,22 @@ const badgeVariant = (score: number) => {
|
||||
if (score >= 15) {
|
||||
return "danger";
|
||||
}
|
||||
if (score >= 5) {
|
||||
if (score > 6) {
|
||||
return "warning";
|
||||
}
|
||||
return "neutral";
|
||||
return "success";
|
||||
};
|
||||
|
||||
export function SeverityBadge({ score }: Props) {
|
||||
const { __ } = useTranslate();
|
||||
const label = () => {
|
||||
if (score >= 15) {
|
||||
return __("Critical");
|
||||
}
|
||||
if (score >= 5) {
|
||||
return __("High");
|
||||
}
|
||||
return __("Negligible");
|
||||
if (score > 6) {
|
||||
return __("Medium");
|
||||
}
|
||||
return __("Low");
|
||||
};
|
||||
return <Badge variant={badgeVariant(score)}>{label()}</Badge>;
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@ const getLevel = (score: number): 0 | 1 | 2 => {
|
||||
if (score >= 15) {
|
||||
return 2;
|
||||
}
|
||||
if (score > 4) {
|
||||
if (score > 6) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
|
||||
Reference in New Issue
Block a user