Add sortable table with refetchable

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

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",

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<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>
+  );
+}

apps/console2/src/graph/RiskGraph.ts

@@ -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."),
-  });
-}

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<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,
+    ),
+  };
+}

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 { useMutationWithToasts } from "../useMutationWithToasts.ts";
-import type { VendorGraphCreateMutation } from "./__generated__/VendorGraphCreateMutation.graphql";
+import type { VendorGraphCreateMutation } from "./__generated__/VendorGraphCreateMutation.graphql.ts";
-import type { VendorGraphDeleteMutation } from "./__generated__/VendorGraphDeleteMutation.graphql";
+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."),
-    }
+    },
   );
 }

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;

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;

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;

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() {
             <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)}
             >

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,
+  Tr,
-  Table,
-  RiskBadge,
-  SeverityBadge,
-  ActionDropdown,
-  DropdownItem,
-  IconTrashCan,
-  IconPencil,
-  ConfirmDialog,
-  RisksChart,
 } 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";
+import {
-
+  useDeleteRiskMutation,
-const risksQuery = graphql`
+  useRisksQuery,
-  query RisksPageQuery(
+} from "../../../hooks/graph/RiskGraph";
-    $organizationId: ID!
+import { SortableTable, SortableTh } from "../../../components/SortableTable";
-    $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
-            }
-          }
-        }
-      }
-    }
-  }
-`;
 
 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>
+            <SortableTh field="NAME">{__("Risk name")}</SortableTh>
-            <Th>{__("Category")}</Th>
+            <SortableTh field="CATEGORY">{__("Category")}</SortableTh>
-            <Th>{__("Treatment")}</Th>
+            <SortableTh field="TREATMENT">{__("Treatment")}</SortableTh>
-            <Th>{__("Initial Risk")}</Th>
+            <SortableTh field="INHERENT_RISK_SCORE">
-            <Th>{__("Residual Risk")}</Th>
+              {__("Initial Risk")}
-            <Th>{__("Severity")}</Th>
+            </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
+                <SeverityBadge score={risk.inherentRiskScore} />
-                  level={risk.inherentLikelihood * risk.inherentImpact}
-                />
               </Td>
               <Td>
-                <RiskBadge
+                <SeverityBadge score={risk.residualRiskScore} />
-                  level={risk.residualLikelihood * risk.residualImpact}
-                />
-              </Td>
-              <Td>
-                <SeverityBadge severity={risk.inherentSeverity} />
               </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>
   );
 }

apps/console2/src/pages/organizations/risks/__generated__/RisksPageQuery.graphql.ts

@@ -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;

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 { useCreateVendorMutation } from "../../../hooks/graph/VendorGraph";
-import { useState } from "react";
+import { type ReactNode, useState } from "react";
 
 type Props = {
-  trigger: React.ReactNode;
+  trigger: ReactNode;
   organizationId: string;
   connection: string;
 };

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() {
       <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)}
           >

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": [

packages/ui/src/Molecules/Badge/SeverityBadge.stories.tsx

@@ -12,10 +12,10 @@ type Story = StoryObj<typeof SeverityBadge>;
 export const Default: Story = {
     render: () => (
         <div className="space-y-2">
-            <SeverityBadge severity={75} />
+            <SeverityBadge score={75} />
-            <SeverityBadge severity={50} />
+            <SeverityBadge score={50} />
-            <SeverityBadge severity={25} />
+            <SeverityBadge score={25} />
-            <SeverityBadge severity={0} />
+            <SeverityBadge score={0} />
         </div>
     ),
 };

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 <Badge variant={badgeVariant(score)}>{label()}</Badge>;
 }

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;