Fix missing React key prop (#43179)

* Fix missing React key prop

* Fix missing React key prop

* Fix order of conditions and make the code easier to follow

frontend/src/metabase/admin/routes.jsx

@@ -118,7 +118,9 @@ const getRoutes = (store, CanAccessSettings, IsAdmin) => (
             <ModalRoute path="reset" modal={UserPasswordResetModal} />
             <ModalRoute path="deactivate" modal={UserActivationModal} />
             <ModalRoute path="reactivate" modal={UserActivationModal} />
-            {PLUGIN_ADMIN_USER_MENU_ROUTES.map(getRoutes => getRoutes(store))}
+            {PLUGIN_ADMIN_USER_MENU_ROUTES.map((getRoutes, index) => (
+              <Fragment key={index}>{getRoutes(store)}</Fragment>
+            ))}
           </Route>
         </Route>
       </Route>

frontend/src/metabase/components/EntityMenu/EntityMenu.jsx

@@ -94,9 +94,13 @@ class EntityMenu extends Component {
               {items.map(item => {
                 if (!item) {
                   return null;
-                } else if (item.content) {
+                }
+
+                const key = item.key ?? item.title;
+
+                if (item.content) {
                   return (
-                    <li key={item.title} data-testid={item.testId}>
+                    <li key={key} data-testid={item.testId}>
                       <EntityMenuItem
                         icon={item.icon}
                         title={item.title}
@@ -112,41 +116,43 @@ class EntityMenu extends Component {
                       />
                     </li>
                   );
-                } else if (item.component) {
+                }
+
+                if (item.component) {
                   return (
-                    <li key={item.title} data-testid={item.testId}>
+                    <li key={key} data-testid={item.testId}>
                       {item.component}
                     </li>
                   );
-                } else {
-                  return (
-                    <li key={item.title} data-testid={item.testId}>
-                      <EntityMenuItem
-                        icon={item.icon}
-                        title={item.title}
-                        externalLink={item.externalLink}
-                        action={
-                          item.action &&
-                          (e => {
-                            item.action(e);
-                            this.toggleMenu();
-                          })
-                        }
-                        event={item.event}
-                        link={item.link}
-                        tooltip={item.tooltip}
-                        disabled={item.disabled}
-                        onClose={() => {
-                          this.toggleMenu();
-                          item?.onClose?.();
-                        }}
-                        color={item.color}
-                        hoverColor={item.hoverColor}
-                        hoverBgColor={item.hoverBgColor}
-                      />
-                    </li>
-                  );
                 }
+
+                return (
+                  <li key={key} data-testid={item.testId}>
+                    <EntityMenuItem
+                      icon={item.icon}
+                      title={item.title}
+                      externalLink={item.externalLink}
+                      action={
+                        item.action &&
+                        (e => {
+                          item.action(e);
+                          this.toggleMenu();
+                        })
+                      }
+                      event={item.event}
+                      link={item.link}
+                      tooltip={item.tooltip}
+                      disabled={item.disabled}
+                      onClose={() => {
+                        this.toggleMenu();
+                        item?.onClose?.();
+                      }}
+                      color={item.color}
+                      hoverColor={item.hoverColor}
+                      hoverBgColor={item.hoverBgColor}
+                    />
+                  </li>
+                );
               })}
             </ol>
           )}