Add coderabbit suggestions

Signed-off-by: Antoine Bouchardy <antoine@getprobo.com>

Author: abouchardy

apps/console/public/data/risks/risks.json

@@ -72,7 +72,7 @@
   {
     "category": "Cybersecurity",
     "name": "Third-party vendor breach compromising startup data",
-    "description": "If a third-party vendor with access to your systems is breached, your sensitive data may be exposed due to poor security on the vendor’s side."
+    "description": "If a third-party vendor with access to your systems is breached, your sensitive data may be exposed due to poor security on the vendor's side."
   },
   {
     "category": "Cybersecurity",
@@ -122,7 +122,7 @@
   {
     "category": "Cybersecurity",
     "name": "Account hijacking of social media platforms",
-    "description": "If attackers hijack your startup’s social media accounts, they could post harmful content or engage in fraudulent activities, damaging the brand."
+    "description": "If attackers hijack your startup's social media accounts, they could post harmful content or engage in fraudulent activities, damaging the brand."
   },
   {
     "category": "Cybersecurity",
@@ -187,7 +187,7 @@
   {
     "category": "Human capital",
     "name": "Poor hiring fit leads to culture break",
-    "description": "Recruiting individuals who do not align with the startup’s values or pace cause conflict and reduce cohesion."
+    "description": "Recruiting individuals who do not align with the startup's values or pace cause conflict and reduce cohesion."
   },
   {
     "category": "Human capital",
@@ -296,7 +296,7 @@
   },
   {
     "category": "Strategic",
-    "name": "Operational instability due to parnership",
+    "name": "Operational instability due to partnership",
     "description": "Unreliable or misaligned partners may cause delivery delays, service breakdowns, or reputational damage."
   },
   {

apps/console/src/pages/organizations/risks/NewRiskView.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useNavigate, useParams } from "react-router";
 import {
   ConnectionHandler,
@@ -105,31 +105,26 @@ function NewRiskForm({
 
   const [createRisk, isInFlight] = useMutation(createRiskMutation);
 
-  // Get unique categories from risk templates
-  const categories = Array.from(new Set(riskTemplates.map(template => template.category)));
+  const categories = useMemo(
+    () => Array.from(new Set(riskTemplates.map(t => t.category))),
+    [riskTemplates],
+  );
 
-  // Filter risks by selected category
-  const filteredRisks = riskTemplates.filter(template => 
-    !selectedCategory || template.category === selectedCategory
-  ).map(template => ({
-    ...template,
-    originalIndex: riskTemplates.findIndex(t => t.name === template.name && t.description === template.description)
-  }));
+  const filteredRisks = useMemo(
+    () =>
+      riskTemplates
+        .map((t, idx) => ({ ...t, originalIndex: idx }))
+        .filter(t => !selectedCategory || t.category === selectedCategory),
+    [riskTemplates, selectedCategory],
+  );
 
   // Handle category selection
   const selectCategory = (category: string) => {
-    setSelectedCategory(category);
-    // Only reset template if we're changing categories
-    if (selectedCategory !== category) {
-      setSelectedTemplate("");
-    }
-    // Focus on the risk dropdown after a short delay to ensure it's rendered
-    setTimeout(() => {
-      const selectTrigger = document.getElementById('template');
-      if (selectTrigger) {
-        selectTrigger.focus();
-      }
-    }, 0);
+    setSelectedCategory(prev => {
+      if (prev !== category) setSelectedTemplate("");
+      return category;
+    });
+    // If focus management is required, attach a ref to <SelectTrigger> instead.
   };
 
   useEffect(() => {
@@ -176,6 +171,7 @@ function NewRiskForm({
       setName(template.name);
       setDescription(template.description);
       setTreatment("MITIGATED");
+      setSelectedCategory(template.category);
     }
   };