Change key prop in rule.mitre.id column render (#6715)

Co-authored-by: Chantal Belén kelm <99441266+chantal-kelm@users.noreply.github.com>
Co-authored-by: Federico Rodriguez <federico.rodriguez@wazuh.com>

Author: 3 people

plugins/main/public/components/common/wazuh-discover/render-columns.tsx

@@ -12,70 +12,81 @@ const navigateTo = (ev, section, params) => {
   AppNavigate.navigateToModule(ev, section, params);
 };
 
-const renderMitreTechnique = (technique: string) => <EuiLink
-  onClick={e =>
-    navigateTo(e, 'overview', {
-      tab: 'mitre',
-      tabView: 'intelligence',
-      tabRedirect: 'techniques',
-      idToRedirect: technique,
-    })
-  }
->
-  {technique}
-</EuiLink>
+const renderMitreTechnique = (technique: string) => (
+  <EuiLink
+    onClick={e =>
+      navigateTo(e, 'overview', {
+        tab: 'mitre',
+        tabView: 'intelligence',
+        tabRedirect: 'techniques',
+        idToRedirect: technique,
+      })
+    }
+  >
+    {technique}
+  </EuiLink>
+);
 
 export const wzDiscoverRenderColumns: tDataGridRenderColumn[] = [
   {
     id: 'agent.id',
-    render: (value) => {
-      if (value === '000') return value
+    render: value => {
+      if (value === '000') return value;
 
-      return <RedirectAppLinks application={getCore().application}>
-        <EuiLink
-          href={`${endpointSummary.id}#/agents?tab=welcome&agent=${value}`}
-        >
-          {value}
-        </EuiLink>
-      </RedirectAppLinks>
-    }
+      return (
+        <RedirectAppLinks application={getCore().application}>
+          <EuiLink
+            href={`${endpointSummary.id}#/agents?tab=welcome&agent=${value}`}
+          >
+            {value}
+          </EuiLink>
+        </RedirectAppLinks>
+      );
+    },
   },
   {
     id: 'agent.name',
     render: (value, row) => {
-      if (row.agent.id === '000') return value
+      if (row.agent.id === '000') return value;
 
-      return <RedirectAppLinks application={getCore().application}>
-        <EuiLink
-          href={`${endpointSummary.id}#/agents?tab=welcome&agent=${row.agent.id}`}
-        >
-          {value}
-        </EuiLink>
-      </RedirectAppLinks>
-    }
+      return (
+        <RedirectAppLinks application={getCore().application}>
+          <EuiLink
+            href={`${endpointSummary.id}#/agents?tab=welcome&agent=${row.agent.id}`}
+          >
+            {value}
+          </EuiLink>
+        </RedirectAppLinks>
+      );
+    },
   },
   {
     id: 'rule.id',
-    render: (value) => <RedirectAppLinks application={getCore().application}>
-      <EuiLink href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}>
-        {value}
-      </EuiLink>
-    </RedirectAppLinks>
+    render: value => (
+      <RedirectAppLinks application={getCore().application}>
+        <EuiLink href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}>
+          {value}
+        </EuiLink>
+      </RedirectAppLinks>
+    ),
   },
   {
     id: 'rule.mitre.id',
-    render: (value) => Array.isArray(value) ? <div style={{ display: 'flex', gap: 10 }}>
-      {value?.map(technique => (
-        <div key={technique}>
-          {renderMitreTechnique(technique)}
+    render: value =>
+      Array.isArray(value) ? (
+        <div style={{ display: 'flex', gap: 10 }}>
+          {value?.map((technique, index) => (
+            <div key={`${technique}-${index}`}>
+              {renderMitreTechnique(technique)}
+            </div>
+          ))}
         </div>
-      ))}
-    </div> : <div>
-      {renderMitreTechnique(value)}
-    </div>
+      ) : (
+        <div>{renderMitreTechnique(value)}</div>
+      ),
   },
   {
     id: 'timestamp',
-    render: (value) => formatUIDate(value)
+    render: value => formatUIDate(value),
   },
-]
+];