From 0cebffdbce3727d609e4b21a4b9ef1dcd84043fa Mon Sep 17 00:00:00 2001
From: Joakim Uddholm <joakim.uddholm@klarna.com>
Date: Tue, 2 Jul 2024 13:38:09 +0200
Subject: [PATCH] chore: more react key warnings fixed

---
 app/src/components/elements/list/ModelList.js             | 6 +++---
 app/src/components/systems/TeamSystems/TeamSystemPage.js  | 7 ++++++-
 .../components/systems/TeamSystems/TeamSystemsPageList.js | 8 ++++----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/src/components/elements/list/ModelList.js b/app/src/components/elements/list/ModelList.js
index 41a411ff..6d2909d3 100644
--- a/app/src/components/elements/list/ModelList.js
+++ b/app/src/components/elements/list/ModelList.js
@@ -6,7 +6,7 @@ import {
   ListItemButton,
   ListItemText,
 } from "@mui/material";
-import React from "react";
+import React, { Fragment } from "react";
 import { Link } from "react-router-dom";
 import Loading from "../../loading";
 import { SystemName } from "../../reviews/SystemName";
@@ -32,7 +32,7 @@ export function ModelList({
           )}
           {Array.isArray(models) &&
             models.map((model, i) => (
-              <>
+              <Fragment key={`mdl-${model.id}`}>
                 <ListItemButton
                   component={Link}
                   to={`/model/${model.id}`}
@@ -62,7 +62,7 @@ export function ModelList({
                   />
                 </ListItemButton>
                 {i < models.length - 1 && <Divider component="li" />}
-              </>
+              </Fragment>
             ))}
         </List>
       </CardContent>
diff --git a/app/src/components/systems/TeamSystems/TeamSystemPage.js b/app/src/components/systems/TeamSystems/TeamSystemPage.js
index fdc4ddea..76115e88 100644
--- a/app/src/components/systems/TeamSystems/TeamSystemPage.js
+++ b/app/src/components/systems/TeamSystems/TeamSystemPage.js
@@ -41,7 +41,12 @@ export function TeamSystemsPage() {
       >
         {/* Some employees have more than one team */}
         {teams.map((tid) => (
-          <Grid item xs={6} sx={{ display: "flex", flexDirection: "column" }}>
+          <Grid
+            key={`team-grid-${tid}`}
+            item
+            xs={6}
+            sx={{ display: "flex", flexDirection: "column" }}
+          >
             <TeamSystemsPageList key={tid} teamId={tid} />
           </Grid>
         ))}
diff --git a/app/src/components/systems/TeamSystems/TeamSystemsPageList.js b/app/src/components/systems/TeamSystems/TeamSystemsPageList.js
index b3c51d1b..46568040 100644
--- a/app/src/components/systems/TeamSystems/TeamSystemsPageList.js
+++ b/app/src/components/systems/TeamSystems/TeamSystemsPageList.js
@@ -9,7 +9,7 @@ import {
   Pagination,
   Typography,
 } from "@mui/material";
-import { useState } from "react";
+import { Fragment, useState } from "react";
 import { Link } from "react-router-dom";
 import { useListSystemsQuery } from "../../../api/gram/system";
 import { SystemComplianceBadge } from "../../elements/SystemComplianceBadge";
@@ -59,17 +59,17 @@ export function TeamSystemsPageList({ teamId, pagesize = 10 }) {
             <Loading />
           ) : systems ? (
             systems.map((system, i) => (
-              <>
+              <Fragment key={`sys-${system.id}`}>
                 <ListItemButton
                   component={Link}
                   to={`/system/${system.id}`}
-                  key={system.id}
+                  key={`sys-btn-${system.id}`}
                 >
                   <ListItemText primary={system.displayName} />
                   <SystemComplianceBadge compliance={system.compliance} />
                 </ListItemButton>
                 {i < systems.length - 1 && <Divider component="li" />}
-              </>
+              </Fragment>
             ))
           ) : (
             <ListItemText primary="No team systems available." />