Add alias for imports

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

apps/console2/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "relay": "npx relay-compiler",
-    "build": "vite build",
+    "build": "tsc -b && vite build",
     "lint": "eslint .",
     "check": "tsc --noEmit -p tsconfig.app.json",
     "preview": "vite preview"
@@ -36,6 +36,7 @@
   "devDependencies": {
     "@eslint/js": "^9.25.0",
     "@tailwindcss/vite": "^4.1.7",
+    "@types/node": "^22.15.21",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@types/react-relay": "^18.2.1",

apps/console2/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

apps/console2/src/components/SortableTable.tsx

@@ -18,7 +18,7 @@ const SortableContext = createContext({
     direction: "DESC",
     field: "CREATED_AT",
   },
-  onOrderChange: (order: any) => {},
+  onOrderChange: (() => {}) as (order: Order) => void,
 });
 
 const defaultOrder = {
@@ -26,7 +26,7 @@ const defaultOrder = {
   field: "CREATED_AT",
 } as Order;
 
-export function SortableTable<T extends Order>({
+export function SortableTable({
   refetch,
   ...props
 }: ComponentProps<typeof Table> & {

apps/console2/src/components/risks/MeasureLinkDialog.tsx

@@ -8,19 +8,19 @@ import {
   IconPlusLarge,
   IconTrashCan,
   Input,
+  Option,
+  Select,
   Spinner,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { Suspense, useMemo, useState, type ReactNode } from "react";
 import { graphql } from "relay-runtime";
-import { useLazyLoadQuery } from "react-relay";
+import { useLazyLoadQuery, useMutation } from "react-relay";
 import type {
   MeasureLinkDialogQuery,
   MeasureLinkDialogQuery$data,
 } from "./__generated__/MeasureLinkDialogQuery.graphql";
-import type { NodeOf } from "../../types";
+import type { NodeOf } from "/types";
-import { useMutationWithToasts } from "../../hooks/useMutationWithToasts";
-import { useToggle } from "@probo/hooks";
 
 const measuresQuery = graphql`
   query MeasureLinkDialogQuery($organizationId: ID!) {
@@ -46,9 +46,29 @@ const measuresQuery = graphql`
 const attachMeasureMutation = graphql`
   mutation MeasureLinkDialogCreateMutation(
     $input: CreateRiskMeasureMappingInput!
+    $connections: [ID!]!
   ) {
     createRiskMeasureMapping(input: $input) {
-      success
+      measureEdge @prependEdge(connections: $connections) {
+        node {
+          id
+          name
+          description
+          category
+          state
+        }
+      }
+    }
+  }
+`;
+
+export const detachMeasureMutation = graphql`
+  mutation MeasureLinkDialogDetachMutation(
+    $input: DeleteRiskMeasureMappingInput!
+    $connections: [ID!]!
+  ) {
+    deleteRiskMeasureMapping(input: $input) {
+      deletedMeasureId @deleteEdge(connections: $connections)
     }
   }
 `;
@@ -58,6 +78,7 @@ type Props = {
   organizationId: string;
   connectionId: string;
   riskId: string;
+  linkedIds?: Set<string>;
 };
 
 export function MeasureLinkDialog({ trigger, ...props }: Props) {
@@ -84,16 +105,23 @@ function MeasureLinkDialogContent(props: Omit<Props, "trigger">) {
   });
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
+  const [category, setCategory] = useState<string | null>(null);
   const measures =
     data.organization?.measures?.edges?.map((edge) => edge.node) ?? [];
 
   const filteredMeasures = useMemo(() => {
     return measures.filter(
       (measure) =>
-        measure.name.toLowerCase().includes(search.toLowerCase()) ||
+        (category === null || measure.category === category) &&
-        measure.description?.toLowerCase().includes(search.toLowerCase())
+        (measure.name.toLowerCase().includes(search.toLowerCase()) ||
+          measure.description?.toLowerCase().includes(search.toLowerCase()))
     );
-  }, [measures, search]);
+  }, [measures, search, category]);
+
+  const categories = useMemo(
+    () => Array.from(new Set(measures.map((m) => m.category))),
+    [measures]
+  );
 
   return (
     <>
@@ -103,6 +131,18 @@ function MeasureLinkDialogContent(props: Omit<Props, "trigger">) {
           placeholder={__("Search measures...")}
           onValueChange={setSearch}
         />
+        <Select
+          value={category ?? ""}
+          placeholder={__("All categories")}
+          onValueChange={setCategory}
+          className="max-w-[180px]"
+        >
+          {categories.map((category) => (
+            <Option key={category} value={category}>
+              {category}
+            </Option>
+          ))}
+        </Select>
       </div>
       <div className="space-y-2 divide-y divide-border-low">
         {filteredMeasures.map((measure) => (
@@ -120,26 +160,22 @@ type RowProps = {
 } & Omit<Props, "trigger">;
 
 function MeasureRow(props: RowProps) {
-  const [isLinked, toggleLinked] = useToggle(false);
+  const isLinked = props.linkedIds?.has(props.measure.id) ?? false;
   const { __ } = useTranslate();
-  const [attachMeasure, isFetching] = useMutationWithToasts(
+  const [attachMeasure, isFetchingAttach] = useMutation(attachMeasureMutation);
-    attachMeasureMutation,
+  const [detachMeasure, isFetchingDetach] = useMutation(detachMeasureMutation);
-    {
+
-      successMessage: __("Measure linked successfully"),
+  const isFetching = isFetchingAttach || isFetchingDetach;
-      errorMessage: __("Failed to link measure"),
-    }
-  );
 
   const onClick = () => {
-    attachMeasure({
+    const action = isLinked ? detachMeasure : attachMeasure;
+    action({
       variables: {
         input: {
           riskId: props.riskId,
           measureId: props.measure.id,
         },
-      },
+        connections: [props.connectionId],
-      onSuccess() {
-        toggleLinked();
       },
     });
   };

apps/console2/src/components/risks/__generated__/MeasureLinkDialogCreateMutation.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<bce124e2ad364bd742c5d2b2a92f768b>>
+ * @generated SignedSource<<391c4db090caa19c60582c18d426764a>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,16 +9,26 @@
 // @ts-nocheck
 
 import { ConcreteRequest } from 'relay-runtime';
+export type MeasureState = "IMPLEMENTED" | "IN_PROGRESS" | "NOT_APPLICABLE" | "NOT_STARTED" | "%future added value";
 export type CreateRiskMeasureMappingInput = {
   measureId: string;
   riskId: string;
 };
 export type MeasureLinkDialogCreateMutation$variables = {
+  connections: ReadonlyArray<string>;
   input: CreateRiskMeasureMappingInput;
 };
 export type MeasureLinkDialogCreateMutation$data = {
   readonly createRiskMeasureMapping: {
-    readonly success: boolean;
+    readonly measureEdge: {
+      readonly node: {
+        readonly category: string;
+        readonly description: string;
+        readonly id: string;
+        readonly name: string;
+        readonly state: MeasureState;
+      };
+    };
   };
 };
 export type MeasureLinkDialogCreateMutation = {
@@ -27,67 +37,156 @@ export type MeasureLinkDialogCreateMutation = {
 };
 
 const node: ConcreteRequest = (function(){
-var v0 = [
+var v0 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "connections"
+},
+v1 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "input"
+},
+v2 = [
   {
-    "defaultValue": null,
+    "kind": "Variable",
-    "kind": "LocalArgument",
+    "name": "input",
-    "name": "input"
+    "variableName": "input"
   }
 ],
-v1 = [
+v3 = {
-  {
+  "alias": null,
-    "alias": null,
+  "args": null,
-    "args": [
+  "concreteType": "MeasureEdge",
-      {
+  "kind": "LinkedField",
-        "kind": "Variable",
+  "name": "measureEdge",
-        "name": "input",
+  "plural": false,
-        "variableName": "input"
+  "selections": [
-      }
+    {
-    ],
+      "alias": null,
-    "concreteType": "CreateRiskMeasureMappingPayload",
+      "args": null,
-    "kind": "LinkedField",
+      "concreteType": "Measure",
-    "name": "createRiskMeasureMapping",
+      "kind": "LinkedField",
-    "plural": false,
+      "name": "node",
-    "selections": [
+      "plural": false,
-      {
+      "selections": [
-        "alias": null,
+        {
-        "args": null,
+          "alias": null,
-        "kind": "ScalarField",
+          "args": null,
-        "name": "success",
+          "kind": "ScalarField",
-        "storageKey": null
+          "name": "id",
-      }
+          "storageKey": null
-    ],
+        },
-    "storageKey": null
+        {
-  }
+          "alias": null,
-];
+          "args": null,
+          "kind": "ScalarField",
+          "name": "name",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "description",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "category",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "state",
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "storageKey": null
+};
 return {
   "fragment": {
-    "argumentDefinitions": (v0/*: any*/),
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/)
+    ],
     "kind": "Fragment",
     "metadata": null,
     "name": "MeasureLinkDialogCreateMutation",
-    "selections": (v1/*: any*/),
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateRiskMeasureMappingPayload",
+        "kind": "LinkedField",
+        "name": "createRiskMeasureMapping",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
     "type": "Mutation",
     "abstractKey": null
   },
   "kind": "Request",
   "operation": {
-    "argumentDefinitions": (v0/*: any*/),
+    "argumentDefinitions": [
+      (v1/*: any*/),
+      (v0/*: any*/)
+    ],
     "kind": "Operation",
     "name": "MeasureLinkDialogCreateMutation",
-    "selections": (v1/*: any*/)
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateRiskMeasureMappingPayload",
+        "kind": "LinkedField",
+        "name": "createRiskMeasureMapping",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "filters": null,
+            "handle": "prependEdge",
+            "key": "",
+            "kind": "LinkedHandle",
+            "name": "measureEdge",
+            "handleArgs": [
+              {
+                "kind": "Variable",
+                "name": "connections",
+                "variableName": "connections"
+              }
+            ]
+          }
+        ],
+        "storageKey": null
+      }
+    ]
   },
   "params": {
-    "cacheID": "f7117ee68c2d7b6c2ceca56c054a4892",
+    "cacheID": "309f3c90d91577e2f1c95ea69848ce5a",
     "id": null,
     "metadata": {},
     "name": "MeasureLinkDialogCreateMutation",
     "operationKind": "mutation",
-    "text": "mutation MeasureLinkDialogCreateMutation(\n  $input: CreateRiskMeasureMappingInput!\n) {\n  createRiskMeasureMapping(input: $input) {\n    success\n  }\n}\n"
+    "text": "mutation MeasureLinkDialogCreateMutation(\n  $input: CreateRiskMeasureMappingInput!\n) {\n  createRiskMeasureMapping(input: $input) {\n    measureEdge {\n      node {\n        id\n        name\n        description\n        category\n        state\n      }\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "b54abd7d4d4f88ff7d54bfa35121a015";
+(node as any).hash = "bd012f06e39d5a04f4c1a2d2026f497e";
 
 export default node;

apps/console2/src/components/risks/__generated__/MeasureLinkDialogDetachMutation.graphql.ts

@@ -0,0 +1,133 @@
+/**
+ * @generated SignedSource<<327cdb825c0029c21d8812b782ecf14f>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type DeleteRiskMeasureMappingInput = {
+  measureId: string;
+  riskId: string;
+};
+export type MeasureLinkDialogDetachMutation$variables = {
+  connections: ReadonlyArray<string>;
+  input: DeleteRiskMeasureMappingInput;
+};
+export type MeasureLinkDialogDetachMutation$data = {
+  readonly deleteRiskMeasureMapping: {
+    readonly deletedMeasureId: string;
+  };
+};
+export type MeasureLinkDialogDetachMutation = {
+  response: MeasureLinkDialogDetachMutation$data;
+  variables: MeasureLinkDialogDetachMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "connections"
+},
+v1 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "input"
+},
+v2 = [
+  {
+    "kind": "Variable",
+    "name": "input",
+    "variableName": "input"
+  }
+],
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "deletedMeasureId",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "MeasureLinkDialogDetachMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "DeleteRiskMeasureMappingPayload",
+        "kind": "LinkedField",
+        "name": "deleteRiskMeasureMapping",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v1/*: any*/),
+      (v0/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "MeasureLinkDialogDetachMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "DeleteRiskMeasureMappingPayload",
+        "kind": "LinkedField",
+        "name": "deleteRiskMeasureMapping",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "filters": null,
+            "handle": "deleteEdge",
+            "key": "",
+            "kind": "ScalarHandle",
+            "name": "deletedMeasureId",
+            "handleArgs": [
+              {
+                "kind": "Variable",
+                "name": "connections",
+                "variableName": "connections"
+              }
+            ]
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "8a54f580a892f60f24c65ec927c7340c",
+    "id": null,
+    "metadata": {},
+    "name": "MeasureLinkDialogDetachMutation",
+    "operationKind": "mutation",
+    "text": "mutation MeasureLinkDialogDetachMutation(\n  $input: DeleteRiskMeasureMappingInput!\n) {\n  deleteRiskMeasureMapping(input: $input) {\n    deletedMeasureId\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "e02a17e00e2c07881dcae17fef9513eb";
+
+export default node;

apps/console2/src/hooks/graph/RiskGraph.ts

@@ -3,12 +3,10 @@ import { useTranslate } from "@probo/i18n";
 import { useMutationWithToasts } from "../useMutationWithToasts.ts";
 import type { RiskGraphDeleteMutation } from "./__generated__/RiskGraphDeleteMutation.graphql.ts";
 import {
-  useLazyLoadQuery,
   usePreloadedQuery,
   useRefetchableFragment,
   type PreloadedQuery,
 } from "react-relay";
-import { useOrganizationId } from "../useOrganizationId.ts";
 import type { RiskGraphListQuery } from "./__generated__/RiskGraphListQuery.graphql.ts";
 import type { RiskGraphFragment$key } from "./__generated__/RiskGraphFragment.graphql.ts";
 

apps/console2/src/hooks/graph/__generated__/RiskGraphQuery.graphql.ts

@@ -1,313 +0,0 @@
-/**
- * @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/pages/organizations/risks/FormRiskDialog.tsx

@@ -15,22 +15,22 @@ import {
   Textarea,
 } from "@probo/ui";
 import { useMemo, useState, type ReactNode } from "react";
-import { useFetchQuery } from "../../../hooks/useFetchQuery";
+import { useFetchQuery } from "/hooks/useFetchQuery";
-import { ConnectionHandler, graphql } from "relay-runtime";
+import { graphql } from "relay-runtime";
-import { PeopleSelect } from "../../../components/form/PeopleSelect";
+import { PeopleSelect } from "/components/form/PeopleSelect";
-import { useOrganizationId } from "../../../hooks/useOrganizationId";
+import { useOrganizationId } from "/hooks/useOrganizationId";
 import { useToggle } from "@probo/hooks";
 import {
   ControlledField,
   ControlledSelect,
-} from "../../../components/form/ControlledField";
+} from "/components/form/ControlledField";
 import {
   useRiskForm,
   type RiskForm,
   type RiskKey,
-} from "../../../hooks/forms/useRiskForm";
+} from "/hooks/forms/useRiskForm";
 import type { FieldErrors } from "react-hook-form";
-import { useMutationWithToasts } from "../../../hooks/useMutationWithToasts";
+import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
 import type { FormRiskDialogMutation } from "./__generated__/FormRiskDialogMutation.graphql";
 import type { FormRiskDialogUpdateRiskMutation } from "./__generated__/FormRiskDialogUpdateRiskMutation.graphql";
 import { getRiskImpacts, getRiskLikelihoods } from "@probo/helpers";
@@ -125,7 +125,7 @@ export default function FormRiskDialog({
           ...data,
           organizationId,
         },
-        connections: [connection],
+        connections: [connection!],
       },
       successMessage: __("Risk created successfully."),
       errorMessage: __("Failed to create risk. Please try again."),

apps/console2/src/pages/organizations/risks/RiskDetailPage.tsx

@@ -21,13 +21,13 @@ import { ConnectionHandler } from "relay-runtime";
 import { usePreloadedQuery, type PreloadedQuery } from "react-relay";
 import FormRiskDialog from "./FormRiskDialog";
 import { usePageTitle } from "@probo/hooks";
-import { useOrganizationId } from "../../../hooks/useOrganizationId";
+import { useOrganizationId } from "/hooks/useOrganizationId";
 import {
   riskNodeQuery,
   RisksConnectionKey,
   useDeleteRiskMutation,
-} from "../../../hooks/graph/RiskGraph";
+} from "/hooks/graph/RiskGraph";
-import type { RiskGraphNodeQuery } from "../../../hooks/graph/__generated__/RiskGraphNodeQuery.graphql";
+import type { RiskGraphNodeQuery } from "/hooks/graph/__generated__/RiskGraphNodeQuery.graphql";
 
 type Props = {
   queryRef: PreloadedQuery<RiskGraphNodeQuery>;

apps/console2/src/pages/organizations/risks/RisksPage.tsx

@@ -17,21 +17,18 @@ import {
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import FormRiskDialog from "./FormRiskDialog";
-import { useOrganizationId } from "../../../hooks/useOrganizationId";
+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 type { ItemOf } from "/types";
-import {
+import { useDeleteRiskMutation, useRisksQuery } from "/hooks/graph/RiskGraph";
-  useDeleteRiskMutation,
+import { SortableTable, SortableTh } from "/components/SortableTable";
-  useRisksQuery,
-} from "../../../hooks/graph/RiskGraph";
-import { SortableTable, SortableTh } from "../../../components/SortableTable";
 import type { PreloadedQuery } from "react-relay";
-import type { RiskGraphQuery } from "../../../hooks/graph/__generated__/RiskGraphQuery.graphql";
+import type { RiskGraphListQuery } from "/hooks/graph/__generated__/RiskGraphListQuery.graphql";
 
 type Props = {
-  queryRef: PreloadedQuery<RiskGraphQuery>;
+  queryRef: PreloadedQuery<RiskGraphListQuery>;
 };
 
 export default function RisksPage(props: Props) {

apps/console2/src/pages/organizations/risks/tabs/RiskMeasuresTab.tsx

@@ -1,4 +1,4 @@
-import { graphql, useFragment } from "react-relay";
+import { graphql, useFragment, useMutation } from "react-relay";
 import type {
   RiskMeasuresTabFragment$data,
   RiskMeasuresTabFragment$key,
@@ -13,11 +13,16 @@ import {
   Td,
   Th,
   Tr,
+  IconTrashCan,
 } from "@probo/ui";
-import { MeasureLinkDialog } from "../../../../components/risks/MeasureLinkDialog";
+import {
-import { useOrganizationId } from "../../../../hooks/useOrganizationId";
+  detachMeasureMutation,
+  MeasureLinkDialog,
+} from "/components/risks/MeasureLinkDialog";
+import { useOrganizationId } from "/hooks/useOrganizationId";
 import { useOutletContext } from "react-router";
-import type { NodeOf } from "../../../../types";
+import type { NodeOf } from "/types";
+import { useMemo } from "react";
 
 const measuresFragment = graphql`
   fragment RiskMeasuresTabFragment on Risk {
@@ -47,12 +52,17 @@ export default function RiskMeasuresTab() {
   const { __ } = useTranslate();
   const connectionId = data.measures.__id;
   const measures = data.measures?.edges?.map((edge) => edge.node) ?? [];
+  const linkedIds = useMemo(
+    () => new Set(measures.map((measure) => measure.id)),
+    [measures]
+  );
 
   if (measures.length === 0) {
     return (
       <div className="text-sm text-txt-secondary text-center flex flex-col gap-4 items-center justify-center py-10">
         {__("No measures associated with this risk.")}
         <MeasureLinkDialog
+          linkedIds={linkedIds}
           connectionId={connectionId}
           organizationId={organizationId}
           riskId={data.id}
@@ -67,38 +77,82 @@ export default function RiskMeasuresTab() {
   }
 
   return (
-    <Table>
+    <div className="relative">
-      <Thead>
+      <MeasureLinkDialog
-        <Tr>
+        linkedIds={linkedIds}
-          <Th>{__("Measure")}</Th>
+        connectionId={connectionId}
-          <Th>{__("Frameworks")}</Th>
+        organizationId={organizationId}
-          <Th>{__("Risks")}</Th>
+        riskId={data.id}
-          <Th>{__("Lead")}</Th>
+        trigger={
-          <Th>{__("Status")}</Th>
+          <Button
-          <Th></Th>
+            icon={IconPlusLarge}
-        </Tr>
+            variant="primary"
-      </Thead>
+            className="absolute -top-18 right-0"
-      <Tbody>
+          >
-        {measures.map((measure) => (
+            {__("Link measure")}
-          <MeasureRow key={measure.id} measure={measure} />
+          </Button>
-        ))}
+        }
-      </Tbody>
+      />
-    </Table>
+      <Table>
+        <Thead>
+          <Tr>
+            <Th>{__("Measure")}</Th>
+            <Th></Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {measures.map((measure) => (
+            <MeasureRow
+              key={measure.id}
+              measure={measure}
+              riskId={data.id}
+              connectionId={connectionId}
+            />
+          ))}
+        </Tbody>
+      </Table>
+    </div>
   );
 }
 
 function MeasureRow({
   measure,
+  riskId,
+  connectionId,
 }: {
   measure: NodeOf<RiskMeasuresTabFragment$data["measures"]>;
+  riskId: string;
+  connectionId: string;
 }) {
+  const { __ } = useTranslate();
+
+  const [detachMeasure, isFetching] = useMutation(detachMeasureMutation);
+
+  const onClick = () => {
+    detachMeasure({
+      variables: {
+        input: {
+          riskId: riskId,
+          measureId: measure.id,
+        },
+        connections: [connectionId],
+      },
+    });
+  };
   return (
     <Tr>
       <Td>{measure.name}</Td>
-      <Td>{measure.category}</Td>
+      <Td>
-      <Td>{measure.createdAt}</Td>
+        <Button
-      <Td>{measure.state}</Td>
+          disabled={isFetching}
-      <Td></Td>
+          icon={IconTrashCan}
+          className="ml-auto"
+          variant="quaternary"
+          onClick={onClick}
+        >
+          {__("Unlink")}
+        </Button>
+      </Td>
     </Tr>
   );
 }

apps/console2/src/pages/organizations/vendors/CreateVendorDialog.tsx

@@ -8,10 +8,10 @@ import {
   Avatar,
   IconPlusLarge,
 } from "@probo/ui";
-import { useVendorSearch } from "../../../hooks/useVendorSearch";
+import { useVendorSearch } from "/hooks/useVendorSearch";
 import { faviconUrl } from "@probo/helpers";
 import type { Vendor } from "@probo/vendors";
-import { useCreateVendorMutation } from "../../../hooks/graph/VendorGraph";
+import { useCreateVendorMutation } from "/hooks/graph/VendorGraph";
 import { type ReactNode, useState } from "react";
 
 type Props = {

apps/console2/src/pages/organizations/vendors/VendorsPage.tsx

@@ -20,15 +20,15 @@ import { useTranslate } from "@probo/i18n";
 import { usePageTitle } from "@probo/hooks";
 import { ConnectionHandler, graphql } from "relay-runtime";
 import { useLazyLoadQuery } from "react-relay";
-import { useOrganizationId } from "../../../hooks/useOrganizationId";
+import { useOrganizationId } from "/hooks/useOrganizationId";
 import type {
   VendorsPageQuery,
   VendorsPageQuery$data,
 } from "./__generated__/VendorsPageQuery.graphql";
 import { faviconUrl, sprintf } from "@probo/helpers";
-import type { NodeOf } from "../../../types";
+import type { NodeOf } from "/types";
 import { CreateVendorDialog } from "./CreateVendorDialog";
-import { useDeleteVendorMutation } from "../../../hooks/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)}
           >

apps/console2/src/routes.tsx

@@ -1,27 +1,15 @@
 import {
   createBrowserRouter,
-  redirect,
   useLoaderData,
   useRouteError,
   type RouteObject,
 } from "react-router";
 import { MainLayout } from "./layouts/MainLayout";
 import { AuthLayout, CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui";
-import {
+import { lazy, Suspense, type FC, type LazyExoticComponent } from "react";
-  Fragment,
+import { UnAuthenticatedError } from "./providers/RelayProviders";
-  lazy,
-  Suspense,
-  type FC,
-  type LazyExoticComponent,
-} from "react";
-import {
-  relayEnvironment,
-  UnAuthenticatedError,
-} from "./providers/RelayProviders";
-import { RisksPageSkeleton } from "./components/skeletons/RisksPageSkeleton.tsx";
 import { PageSkeleton } from "./components/skeletons/PageSkeleton.tsx";
-import { loadQuery, type PreloadedQuery } from "react-relay";
+import { type PreloadedQuery } from "react-relay";
-import { riskNodeQuery, risksQuery } from "./hooks/graph/RiskGraph.ts";
 import { useCleanup } from "./hooks/useDelayedEffect.ts";
 import { riskRoutes } from "./routes/riskRoutes.ts";
 

apps/console2/src/routes/riskRoutes.ts

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

apps/console2/tsconfig.app.json

@@ -14,6 +14,10 @@
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "/*": ["src/*"]
+    },
 
     /* Linting */
     "strict": true,

apps/console2/vite.config.ts

@@ -1,14 +1,22 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
-import { resolve } from "node:path";
+import { fileURLToPath, URL } from "node:url";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react({ babel: { plugins: ["relay"] } }), tailwindcss()],
   resolve: {
     alias: {
-      "@": resolve(__dirname, "./src"),
+      "/type": fileURLToPath(new URL("./src/type.ts", import.meta.url)),
+      "/components": fileURLToPath(
+        new URL("./src/components", import.meta.url)
+      ),
+      "/hooks": fileURLToPath(new URL("./src/hooks", import.meta.url)),
+      "/layouts": fileURLToPath(new URL("./src/layouts", import.meta.url)),
+      "/pages": fileURLToPath(new URL("./src/pages", import.meta.url)),
+      "/routes": fileURLToPath(new URL("./src/routes", import.meta.url)),
+      "/providers": fileURLToPath(new URL("./src/providers", import.meta.url)),
     },
   },
 });

packages/helpers/src/array.ts

@@ -22,7 +22,7 @@ export function groupBy<T>(
 /**
  * Check that a value is empty (null, undefined, empty string, empty array, empty object)
  */
-export function isEmpty(v: unknown) {
+export function isEmpty(v: unknown): boolean {
     if (Array.isArray(v)) {
         return v.find((v) => !isEmpty(v)) === undefined;
     }

packages/helpers/src/risk.ts

@@ -25,7 +25,7 @@ export function getRiskImpacts(__: Translator) {
     ];
 }
 
-export function getTreatment(__: Translator, treatment: string): string {
+export function getTreatment(__: Translator, treatment?: string): string {
     switch (treatment) {
         case "MITIGATED":
             return __("Mitigate");

packages/ui/src/Atoms/Select/Select.tsx

@@ -29,6 +29,7 @@ type Props = PropsWithChildren<
         variant?: "default" | "editor" | "dashed";
         invalid?: boolean;
         disabled?: boolean;
+        className?: string;
     } & Omit<ComponentProps<typeof Root>, "onChange">
 >;
 
@@ -112,11 +113,11 @@ export function Select({
 
     return (
         <Root onValueChange={onValueChange} value={value}>
-            <Trigger className={trigger({ ...props })} {...props}>
+            <Trigger {...props} className={trigger({ ...props })}>
                 <div className="text-ellipsis overflow-hidden">
                     <Value placeholder={placeholder}>
                         {valueNode ? (
-                            <span className="flex items-center gap-2">
+                            <span className="flex items-center gap-2 overflow-hidden text-ellipsis w-full">
                                 {valueNode}
                             </span>
                         ) : null}

packages/ui/src/Atoms/Table/Table.tsx

@@ -19,8 +19,15 @@ export function Thead({ children }: PropsWithChildren) {
     );
 }
 
-export function Th({ children }: PropsWithChildren) {
+export function Th({
-    return <th className="first:pl-6 last:pr-6 py-3">{children}</th>;
+    children,
+    className,
+}: PropsWithChildren<{ className?: string }>) {
+    return (
+        <th className={clsx("first:pl-6 last:pr-6 py-3", className)}>
+            {children}
+        </th>
+    );
 }
 
 const TrContext = createContext({} as { to?: string });
@@ -54,7 +61,7 @@ export function Td({
 }: PropsWithChildren<{ noLink?: boolean }>) {
     const { to } = useContext(TrContext);
     if (!to || noLink) {
-        return <td className="first:pl-6 py-3">{children}</td>;
+        return <td className="first:pl-6 last:pr-6 py-3">{children}</td>;
     }
     return (
         <td className="first:*:pl-6 *:block last:*:pr-6 py-3">

packages/ui/src/Molecules/Badge/RiskBadge.tsx

@@ -8,12 +8,12 @@ type Props = {
 const badgeVariant = (level: string | number) => {
     if (typeof level === "number") {
         if (level >= 15) {
-            return "CRITICAL";
+            level = "CRITICAL";
+        } else if (level >= 8) {
+            level = "HIGH";
+        } else {
+            level = "LOW";
         }
-        if (level >= 8) {
-            return "HIGH";
-        }
-        return "LOW";
     }
     switch (level) {
         case "CRITICAL":