Add sortable table with refetchable

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

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 severity={50} />
-            <SeverityBadge severity={25} />
-            <SeverityBadge severity={0} />
+            <SeverityBadge score={75} />
+            <SeverityBadge score={50} />
+            <SeverityBadge score={25} />
+            <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;