From 1448d37d5565345b98bab8cbe4a93df483637ae5 Mon Sep 17 00:00:00 2001 From: Jonathan Date: Fri, 23 May 2025 11:16:32 +0200 Subject: [PATCH] Add sortable table with refetchable Signed-off-by: Bryan Frimin Signed-off-by: Sacha Al Himdani --- apps/console2/package.json | 1 + .../console2/src/components/SortableTable.tsx | 80 +++ apps/console2/src/graph/RiskGraph.ts | 24 - apps/console2/src/hooks/graph/RiskGraph.ts | 94 ++++ .../src/{ => hooks}/graph/VendorGraph.ts | 10 +- .../RiskGraphDeleteMutation.graphql.ts | 0 .../RiskGraphFragment.graphql.ts | 285 +++++++++++ .../__generated__/RiskGraphQuery.graphql.ts | 313 ++++++++++++ .../__generated__/RisksListQuery.graphql.ts | 393 +++++++++++++++ .../VendorGraphCreateMutation.graphql.ts | 0 .../VendorGraphDeleteMutation.graphql.ts | 0 .../organizations/risks/RiskDetailPage.tsx | 13 +- .../pages/organizations/risks/RisksPage.tsx | 109 ++--- .../__generated__/RisksPageQuery.graphql.ts | 456 ------------------ .../vendors/CreateVendorDialog.tsx | 6 +- .../organizations/vendors/VendorsPage.tsx | 10 +- packages/ui/package.json | 10 +- .../Molecules/Badge/SeverityBadge.stories.tsx | 8 +- .../ui/src/Molecules/Badge/SeverityBadge.tsx | 12 +- .../ui/src/Molecules/Risks/RisksChart.tsx | 2 +- 20 files changed, 1236 insertions(+), 590 deletions(-) create mode 100644 apps/console2/src/components/SortableTable.tsx delete mode 100644 apps/console2/src/graph/RiskGraph.ts create mode 100644 apps/console2/src/hooks/graph/RiskGraph.ts rename apps/console2/src/{ => hooks}/graph/VendorGraph.ts (90%) rename apps/console2/src/{ => hooks}/graph/__generated__/RiskGraphDeleteMutation.graphql.ts (100%) create mode 100644 apps/console2/src/hooks/graph/__generated__/RiskGraphFragment.graphql.ts create mode 100644 apps/console2/src/hooks/graph/__generated__/RiskGraphQuery.graphql.ts create mode 100644 apps/console2/src/hooks/graph/__generated__/RisksListQuery.graphql.ts rename apps/console2/src/{ => hooks}/graph/__generated__/VendorGraphCreateMutation.graphql.ts (100%) rename apps/console2/src/{ => hooks}/graph/__generated__/VendorGraphDeleteMutation.graphql.ts (100%) delete mode 100644 apps/console2/src/pages/organizations/risks/__generated__/RisksPageQuery.graphql.ts diff --git a/apps/console2/package.json b/apps/console2/package.json index 9dbd4846a..7b85cb746 100644 --- a/apps/console2/package.json +++ b/apps/console2/package.json @@ -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", diff --git a/apps/console2/src/components/SortableTable.tsx b/apps/console2/src/components/SortableTable.tsx new file mode 100644 index 000000000..b1eebc4f8 --- /dev/null +++ b/apps/console2/src/components/SortableTable.tsx @@ -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({ + refetch, + ...props +}: ComponentProps & { + refetch: (o: { order: Order }) => void; +}) { + const [order, setOrder] = useState(defaultOrder); + const onOrderChange = (o: Order) => { + startTransition(() => { + setOrder(o); + refetch({ order: o }); + }); + }; + return ( + + + + ); +} + +export function SortableTh({ + children, + field, + ...props +}: ComponentProps & { 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 ( + + ); +} diff --git a/apps/console2/src/graph/RiskGraph.ts b/apps/console2/src/graph/RiskGraph.ts deleted file mode 100644 index a211907e7..000000000 --- a/apps/console2/src/graph/RiskGraph.ts +++ /dev/null @@ -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(deleteRiskMutation, { - successMessage: __("Risk deleted successfully."), - errorMessage: __("Failed to delete risk. Please try again."), - }); -} diff --git a/apps/console2/src/hooks/graph/RiskGraph.ts b/apps/console2/src/hooks/graph/RiskGraph.ts new file mode 100644 index 000000000..90c2b1eb1 --- /dev/null +++ b/apps/console2/src/hooks/graph/RiskGraph.ts @@ -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(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(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, + ), + }; +} diff --git a/apps/console2/src/graph/VendorGraph.ts b/apps/console2/src/hooks/graph/VendorGraph.ts similarity index 90% rename from apps/console2/src/graph/VendorGraph.ts rename to apps/console2/src/hooks/graph/VendorGraph.ts index 11a5aa8f3..7b1fe25bc 100644 --- a/apps/console2/src/graph/VendorGraph.ts +++ b/apps/console2/src/hooks/graph/VendorGraph.ts @@ -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."), - } + }, ); } diff --git a/apps/console2/src/graph/__generated__/RiskGraphDeleteMutation.graphql.ts b/apps/console2/src/hooks/graph/__generated__/RiskGraphDeleteMutation.graphql.ts similarity index 100% rename from apps/console2/src/graph/__generated__/RiskGraphDeleteMutation.graphql.ts rename to apps/console2/src/hooks/graph/__generated__/RiskGraphDeleteMutation.graphql.ts diff --git a/apps/console2/src/hooks/graph/__generated__/RiskGraphFragment.graphql.ts b/apps/console2/src/hooks/graph/__generated__/RiskGraphFragment.graphql.ts new file mode 100644 index 000000000..9a8f95c11 --- /dev/null +++ b/apps/console2/src/hooks/graph/__generated__/RiskGraphFragment.graphql.ts @@ -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; diff --git a/apps/console2/src/hooks/graph/__generated__/RiskGraphQuery.graphql.ts b/apps/console2/src/hooks/graph/__generated__/RiskGraphQuery.graphql.ts new file mode 100644 index 000000000..5b254fc93 --- /dev/null +++ b/apps/console2/src/hooks/graph/__generated__/RiskGraphQuery.graphql.ts @@ -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; diff --git a/apps/console2/src/hooks/graph/__generated__/RisksListQuery.graphql.ts b/apps/console2/src/hooks/graph/__generated__/RisksListQuery.graphql.ts new file mode 100644 index 000000000..14392032f --- /dev/null +++ b/apps/console2/src/hooks/graph/__generated__/RisksListQuery.graphql.ts @@ -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; diff --git a/apps/console2/src/graph/__generated__/VendorGraphCreateMutation.graphql.ts b/apps/console2/src/hooks/graph/__generated__/VendorGraphCreateMutation.graphql.ts similarity index 100% rename from apps/console2/src/graph/__generated__/VendorGraphCreateMutation.graphql.ts rename to apps/console2/src/hooks/graph/__generated__/VendorGraphCreateMutation.graphql.ts diff --git a/apps/console2/src/graph/__generated__/VendorGraphDeleteMutation.graphql.ts b/apps/console2/src/hooks/graph/__generated__/VendorGraphDeleteMutation.graphql.ts similarity index 100% rename from apps/console2/src/graph/__generated__/VendorGraphDeleteMutation.graphql.ts rename to apps/console2/src/hooks/graph/__generated__/VendorGraphDeleteMutation.graphql.ts diff --git a/apps/console2/src/pages/organizations/risks/RiskDetailPage.tsx b/apps/console2/src/pages/organizations/risks/RiskDetailPage.tsx index d7005ec0a..891edc0ba 100644 --- a/apps/console2/src/pages/organizations/risks/RiskDetailPage.tsx +++ b/apps/console2/src/pages/organizations/risks/RiskDetailPage.tsx @@ -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() { onDelete(riskId)} > diff --git a/apps/console2/src/pages/organizations/risks/RisksPage.tsx b/apps/console2/src/pages/organizations/risks/RisksPage.tsx index 017a692c6..7ad25da4b 100644 --- a/apps/console2/src/pages/organizations/risks/RisksPage.tsx +++ b/apps/console2/src/pages/organizations/risks/RisksPage.tsx @@ -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(risksQuery, { - organizationId: useOrganizationId(), - }); - const risks = data.organization?.risks?.edges.map((edge) => edge.node); const [editedRisk, setEditedRisk] = useState | 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} /> -
+ +
+ - - - - - - + {__("Risk name")} + {__("Category")} + {__("Treatment")} + + {__("Initial Risk")} + + + {__("Residual Risk")} + @@ -139,17 +103,10 @@ export default function RisksPage() { - ))} -
{__("Risk name")}{__("Category")}{__("Treatment")}{__("Initial Risk")}{__("Residual Risk")}{__("Severity")}
{risk.category} {getTreatment(__, risk.treatment)} - + - - - + @@ -162,9 +119,9 @@ export default function RisksPage() { onDelete(risk.id)} > @@ -177,7 +134,7 @@ export default function RisksPage() {
+ ); } diff --git a/apps/console2/src/pages/organizations/risks/__generated__/RisksPageQuery.graphql.ts b/apps/console2/src/pages/organizations/risks/__generated__/RisksPageQuery.graphql.ts deleted file mode 100644 index 74fdcff8b..000000000 --- a/apps/console2/src/pages/organizations/risks/__generated__/RisksPageQuery.graphql.ts +++ /dev/null @@ -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; diff --git a/apps/console2/src/pages/organizations/vendors/CreateVendorDialog.tsx b/apps/console2/src/pages/organizations/vendors/CreateVendorDialog.tsx index cbe80ffb8..80080db42 100644 --- a/apps/console2/src/pages/organizations/vendors/CreateVendorDialog.tsx +++ b/apps/console2/src/pages/organizations/vendors/CreateVendorDialog.tsx @@ -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; }; diff --git a/apps/console2/src/pages/organizations/vendors/VendorsPage.tsx b/apps/console2/src/pages/organizations/vendors/VendorsPage.tsx index 22fe39ca5..48a16b9fe 100644 --- a/apps/console2/src/pages/organizations/vendors/VendorsPage.tsx +++ b/apps/console2/src/pages/organizations/vendors/VendorsPage.tsx @@ -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() { onDelete(vendor.id)} > diff --git a/packages/ui/package.json b/packages/ui/package.json index f18420c4b..58275cb81 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -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": [ diff --git a/packages/ui/src/Molecules/Badge/SeverityBadge.stories.tsx b/packages/ui/src/Molecules/Badge/SeverityBadge.stories.tsx index 919d04ddc..3a3612e0d 100644 --- a/packages/ui/src/Molecules/Badge/SeverityBadge.stories.tsx +++ b/packages/ui/src/Molecules/Badge/SeverityBadge.stories.tsx @@ -12,10 +12,10 @@ type Story = StoryObj; export const Default: Story = { render: () => (
- - - - + + + +
), }; diff --git a/packages/ui/src/Molecules/Badge/SeverityBadge.tsx b/packages/ui/src/Molecules/Badge/SeverityBadge.tsx index 1b7d9ccc0..490e04fd7 100644 --- a/packages/ui/src/Molecules/Badge/SeverityBadge.tsx +++ b/packages/ui/src/Molecules/Badge/SeverityBadge.tsx @@ -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 {label()}; } diff --git a/packages/ui/src/Molecules/Risks/RisksChart.tsx b/packages/ui/src/Molecules/Risks/RisksChart.tsx index 36896198f..fae78629c 100644 --- a/packages/ui/src/Molecules/Risks/RisksChart.tsx +++ b/packages/ui/src/Molecules/Risks/RisksChart.tsx @@ -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;