From 233bf0757ea62f275be2ad381110157197ee2fb7 Mon Sep 17 00:00:00 2001
From: David Leek <david@getunleash.io>
Date: Fri, 5 Jul 2024 08:24:51 +0200
Subject: [PATCH] chore: fix command bar key prop usage (#7534)

---
 .../commandBar/CommandQuickSuggestions.tsx     |  3 +++
 .../RecentlyVisited/CommandResultGroup.tsx     | 18 +++++++++---------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/commandBar/CommandQuickSuggestions.tsx b/frontend/src/component/commandBar/CommandQuickSuggestions.tsx
index 42307252b48f..025a02f410d5 100644
--- a/frontend/src/component/commandBar/CommandQuickSuggestions.tsx
+++ b/frontend/src/component/commandBar/CommandQuickSuggestions.tsx
@@ -19,6 +19,7 @@ const toListItemButton = (
     if (item.featureId && item.projectId) {
         return (
             <RecentlyVisitedFeatureButton
+                keyName={key}
                 key={key}
                 featureId={item.featureId}
                 projectId={item.projectId}
@@ -29,6 +30,7 @@ const toListItemButton = (
     if (item.projectId) {
         return (
             <RecentlyVisitedProjectButton
+                keyName={key}
                 key={key}
                 projectId={item.projectId}
                 onClick={onClick}
@@ -39,6 +41,7 @@ const toListItemButton = (
     const name = routes[item.pathName]?.title ?? item.pathName;
     return (
         <RecentlyVisitedPathButton
+            keyName={key}
             key={key}
             path={item.pathName}
             name={name}
diff --git a/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx b/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx
index 46c92b232c8b..12bf94cab52d 100644
--- a/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx
+++ b/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx
@@ -69,13 +69,13 @@ const ButtonItemIcon = ({
 };
 
 export const RecentlyVisitedPathButton = ({
+    keyName,
     path,
-    key,
     name,
     onClick,
 }: {
     path: string;
-    key: string;
+    keyName: string;
     name: string;
     onClick: () => void;
 }) => {
@@ -95,7 +95,7 @@ export const RecentlyVisitedPathButton = ({
 
     return (
         <ListItemButton
-            key={key}
+            key={keyName}
             dense={true}
             component={Link}
             to={path}
@@ -116,11 +116,11 @@ export const RecentlyVisitedPathButton = ({
 
 export const RecentlyVisitedProjectButton = ({
     projectId,
-    key,
+    keyName,
     onClick,
 }: {
     projectId: string;
-    key: string;
+    keyName: string;
     onClick: () => void;
 }) => {
     const { trackEvent } = usePlausibleTracker();
@@ -141,7 +141,7 @@ export const RecentlyVisitedProjectButton = ({
     if (projectDeleted) return null;
     return (
         <ListItemButton
-            key={key}
+            key={keyName}
             dense={true}
             component={Link}
             to={`/projects/${projectId}`}
@@ -161,12 +161,12 @@ export const RecentlyVisitedProjectButton = ({
 };
 
 export const RecentlyVisitedFeatureButton = ({
-    key,
+    keyName,
     projectId,
     featureId,
     onClick,
 }: {
-    key: string;
+    keyName: string;
     projectId: string;
     featureId: string;
     onClick: () => void;
@@ -185,7 +185,7 @@ export const RecentlyVisitedFeatureButton = ({
     };
     return (
         <ListItemButton
-            key={key}
+            key={keyName}
             dense={true}
             component={Link}
             to={`/projects/${projectId}/features/${featureId}`}