Fix `react/jsx-key` errors (#15448)

* Handle errors in `ColorSchemeWidget.jsx`

* Handle errors in `audit_app/routes.jsx`

* Fix missing key prop warnings

* Turn on `react/jsx-key` lint rule

Co-authored-by: alxnddr <alxnddr@gmail.com>

.eslintrc

@@ -20,7 +20,7 @@
     "react/no-string-refs": 2,
     "react/no-unescaped-entities": 2,
     "react/jsx-no-target-blank": 2,
-    "react/jsx-key": 0,
+    "react/jsx-key": 2,
     "prefer-const": [1, { "destructuring": "all" }],
     "no-useless-escape": 0,
     "no-only-tests/no-only-tests": "error",

enterprise/frontend/src/metabase-enterprise/audit_app/containers/AuditTableVisualization.jsx

@@ -57,6 +57,7 @@ export default class AuditTableVisualization extends React.Component {
           <tr>
             {columnIndexes.map(colIndex => (
               <th
+                key={colIndex}
                 className={cx({
                   "text-right": isColumnRightAligned(cols[colIndex]),
                 })}
@@ -68,7 +69,7 @@ export default class AuditTableVisualization extends React.Component {
         </thead>
         <tbody>
           {rows.map((row, rowIndex) => (
-            <tr>
+            <tr key={rowIndex}>
               {columnIndexes.map(colIndex => {
                 const value = row[colIndex];
                 const column = cols[colIndex];
@@ -77,6 +78,7 @@ export default class AuditTableVisualization extends React.Component {
                 const columnSettings = settings.column(column);
                 return (
                   <td
+                    key={colIndex}
                     className={cx({
                       "text-brand cursor-pointer": clickable,
                       "text-right": isColumnRightAligned(column),

enterprise/frontend/src/metabase-enterprise/audit_app/routes.jsx

@@ -48,7 +48,7 @@ function getPageRoutes(path, page: Page) {
   if (page.tabs) {
     subRoutes.push(
       ...page.tabs.map(tab => (
-        <Route path={tab.path} component={tab.component} />
+        <Route key={tab.path} path={tab.path} component={tab.component} />
       )),
     );
   }

enterprise/frontend/src/metabase-enterprise/store/containers/StoreAccount.jsx

@@ -222,6 +222,7 @@ const AccountStatus = ({
       <Flex mt={4} align="center" flexWrap="wrap" w="100%">
         {featuresOrdered.map(([id, feature]) => (
           <Feature
+            key={id}
             feature={feature}
             included={features[id]}
             expired={expired}
@@ -297,7 +298,7 @@ const FeatureLinks = ({ links, defaultTitle }) => (
   <Flex align="center">
     {links &&
       links.map(({ link, title }) => (
-        <ExternalLink href={link} className="mx2 link">
+        <ExternalLink href={link} key={link} className="mx2 link">
           {title || defaultTitle}
         </ExternalLink>
       ))}

enterprise/frontend/src/metabase-enterprise/whitelabel/components/ColorSchemeWidget.jsx

@@ -62,7 +62,7 @@ const ColorSchemeWidget = ({ setting, onChange }) => {
           {THEMEABLE_COLORS.map(name => {
             const properties = COLOR_DISPLAY_PROPERTIES[name] || {};
             return (
-              <tr>
+              <tr key={name}>
                 <td>{properties.name || humanize(name)}:</td>
                 <td>
                   <span className="mx1">

frontend/src/metabase/admin/datamodel/components/FieldRemapping.jsx

@@ -271,6 +271,7 @@ export default class FieldRemapping extends React.Component {
           {mappingType === MAP_OPTIONS.foreign && [
             <SelectSeparator classname="flex" key="foreignKeySeparator" />,
             <PopoverWithTrigger
+              key="foreignKeyName"
               ref={this.fkPopover}
               triggerElement={
                 <SelectButton
@@ -411,7 +412,7 @@ export class ValueRemappings extends React.Component {
         </div>
         <ol>
           {[...editingRemappings].map(([original, mapped]) => (
-            <li className="mb1">
+            <li key={original} className="mb1">
               <FieldValueMapping
                 original={original}
                 mapped={mapped}

frontend/src/metabase/admin/datamodel/components/database/MetadataTableList.jsx

@@ -140,6 +140,7 @@ export default class MetadataTableList extends Component {
           {queryableTablesHeader}
           {queryableTables.map(table => (
             <TableRow
+              key={table.id}
               table={table}
               selected={tableId === table.id}
               selectTable={selectTable}
@@ -149,6 +150,7 @@ export default class MetadataTableList extends Component {
           {hiddenTablesHeader}
           {hiddenTables.map(table => (
             <TableRow
+              key={table.id}
               table={table}
               selected={tableId === table.id}
               selectTable={selectTable}

frontend/src/metabase/admin/datamodel/components/revisions/RevisionHistory.jsx

@@ -49,6 +49,7 @@ export default class RevisionHistory extends Component {
               <ol>
                 {revisions.map(revision => (
                   <Revision
+                    key={revision.id}
                     revision={revision}
                     objectName={object.name}
                     currentUser={user}

frontend/src/metabase/admin/datamodel/components/revisions/TextDiff.jsx

@@ -19,15 +19,15 @@ export default class TextDiff extends Component {
         "
         {before != null && after != null ? (
           diffWords(before, after).map((section, index) => (
-            <span>
+            <span key={index}>
               {section.added ? (
-                <strong key={index}>{section.value}</strong>
+                <strong>{section.value}</strong>
               ) : section.removed ? (
-                <span key={index} style={{ textDecoration: "line-through" }}>
+                <span style={{ textDecoration: "line-through" }}>
                   {section.value}
                 </span>
               ) : (
-                <span key={index}>{section.value}</span>
+                <span>{section.value}</span>
               )}{" "}
             </span>
           ))

frontend/src/metabase/admin/permissions/components/PermissionsConfirm.jsx

@@ -13,15 +13,14 @@ const DatabaseName = ({ database }) => (
 );
 
 const TableAccessChange = ({ tables, verb, color }) => {
-  const tableNames = Object.values(tables).map(t => t.name);
   return (
     <span>
       {verb}
       <Tooltip
         tooltip={
           <div className="p1">
-            {tableNames.map(name => (
-              <div>{name}</div>
+            {Object.entries(tables).map(([id, table]) => (
+              <div key={id}>{table.name}</div>
             ))}
           </div>
         }
@@ -30,7 +29,7 @@ const TableAccessChange = ({ tables, verb, color }) => {
           <span className={color}>
             {" " +
               (n => ngettext(msgid`${n} table`, `${n} tables`, n))(
-                tableNames.length,
+                tables.length,
               )}
           </span>
         </span>
@@ -43,7 +42,7 @@ const PermissionsConfirm = ({ diff }) => (
   <div>
     {Object.values(diff.groups).map(group =>
       Object.values(group.databases).map(database => (
-        <div>
+        <div key={database.id}>
           {(database.grantedTables || database.revokedTables) && (
             <div>
               <GroupName group={group} />

frontend/src/metabase/admin/permissions/components/PermissionsGrid.jsx

@@ -189,8 +189,8 @@ const PermissionsCell = ({
 
 const ActionsList = connect()(({ actions, dispatch }) => (
   <ul className="border-top">
-    {actions.map(action => (
-      <li>
+    {actions.map((action, index) => (
+      <li key={index}>
         {typeof action === "function" ? (
           action()
         ) : (

frontend/src/metabase/admin/permissions/containers/CollectionPermissionsModal.jsx

@@ -87,12 +87,17 @@ export default class CollectionPermissionsModal extends Component {
           ...(namespace === "snippets"
             ? []
             : [
-                <Link className="link" to="/admin/permissions/collections">
+                <Link
+                  key="all-permissions"
+                  className="link"
+                  to="/admin/permissions/collections"
+                >
                   {t`See all collection permissions`}
                 </Link>,
               ]),
-          <Button onClick={onClose}>{t`Cancel`}</Button>,
+          <Button key="cancel" onClick={onClose}>{t`Cancel`}</Button>,
           <Button
+            key="save"
             primary
             disabled={!isDirty}
             onClick={async () => {

frontend/src/metabase/admin/settings/components/SettingsEmailForm.jsx

@@ -78,9 +78,9 @@ export default class SettingsEmailForm extends Component {
           {...this.props}
           updateSettings={this.props.updateEmailSettings}
           disable={sendingEmail !== "default"}
-          renderExtraButtons={({ disabled, valid, pristine, submitting }) => {
-            return [
-              valid && pristine && submitting === "default" ? (
+          renderExtraButtons={({ disabled, valid, pristine, submitting }) => (
+            <React.Fragment>
+              {valid && pristine && submitting === "default" ? (
                 <Button
                   mr={1}
                   success={sendingEmail === "success"}
@@ -89,16 +89,16 @@ export default class SettingsEmailForm extends Component {
                 >
                   {SEND_TEST_BUTTON_STATES[sendingEmail]}
                 </Button>
-              ) : null,
+              ) : null}
               <Button
                 mr={1}
                 disabled={disabled}
                 onClick={() => this.clearEmailSettings()}
               >
                 {t`Clear`}
-              </Button>,
-            ];
-          }}
+              </Button>
+            </React.Fragment>
+          )}
         />
         {!MetabaseSettings.isHosted() && !MetabaseSettings.isEnterprise() && (
           <MarginHostingCTA tagline={t`Have your email configured for you.`} />

frontend/src/metabase/admin/settings/components/SettingsUpdatesForm.jsx

@@ -67,7 +67,9 @@ export default class SettingsUpdatesForm extends Component {
             <Version version={versionInfo.latest} />
 
             {versionInfo.older &&
-              versionInfo.older.map(version => <Version version={version} />)}
+              versionInfo.older.map((version, index) => (
+                <Version key={index} version={version} />
+              ))}
           </div>
 
           {!MetabaseSettings.isHosted() && <HostingCTA />}
@@ -119,8 +121,8 @@ function Version({ version }) {
       </h3>
       <ul style={{ listStyleType: "disc", listStylePosition: "inside" }}>
         {version.highlights &&
-          version.highlights.map(highlight => (
-            <li style={{ lineHeight: "1.5" }} className="pl1">
+          version.highlights.map((highlight, index) => (
+            <li key={index} style={{ lineHeight: "1.5" }} className="pl1">
               {highlight}
             </li>
           ))}

frontend/src/metabase/admin/settings/components/widgets/FormattingWidget.jsx

@@ -50,6 +50,7 @@ class FormattingWidget extends React.Component {
       <div className="mt2">
         {SETTING_TYPES.map(({ type, name, column, settings }) => (
           <div
+            key={type}
             className="border-bottom pb2 mb4 flex-full"
             style={{ minWidth: 400 }}
           >

frontend/src/metabase/admin/settings/components/widgets/PublicLinksListing.jsx

@@ -94,7 +94,7 @@ export default class PublicLinksListing extends Component {
             <tbody>
               {list &&
                 list.map(link => (
-                  <tr>
+                  <tr key={link.id}>
                     <td>
                       <Link
                         to={getUrl(link)}

frontend/src/metabase/browse/containers/TableBrowser.jsx

@@ -63,37 +63,39 @@ function TableBrowser(props) {
                     name={table.display_name || table.name}
                     iconName="table"
                     iconColor={color("accent2")}
-                    buttons={[
-                      props.xraysEnabled && (
+                    buttons={
+                      <React.Fragment>
+                        {props.xraysEnabled && (
+                          <Link
+                            to={`auto/dashboard/table/${table.id}`}
+                            data-metabase-event={`${ANALYTICS_CONTEXT};Table Item;X-ray Click`}
+                            className="link--icon ml1"
+                          >
+                            <Icon
+                              key="xray"
+                              tooltip={t`X-ray this table`}
+                              name="bolt"
+                              color={color("warning")}
+                              size={20}
+                              className="hover-child"
+                            />
+                          </Link>
+                        )}
                         <Link
-                          to={`auto/dashboard/table/${table.id}`}
-                          data-metabase-event={`${ANALYTICS_CONTEXT};Table Item;X-ray Click`}
+                          to={`reference/databases/${dbId}/tables/${table.id}`}
+                          data-metabase-event={`${ANALYTICS_CONTEXT};Table Item;Reference Click`}
                           className="link--icon ml1"
                         >
                           <Icon
-                            key="xray"
-                            tooltip={t`X-ray this table`}
-                            name="bolt"
-                            color={color("warning")}
-                            size={20}
+                            key="reference"
+                            tooltip={t`Learn about this table`}
+                            name="reference"
+                            color={color("text-medium")}
                             className="hover-child"
                           />
                         </Link>
-                      ),
-                      <Link
-                        to={`reference/databases/${dbId}/tables/${table.id}`}
-                        data-metabase-event={`${ANALYTICS_CONTEXT};Table Item;Reference Click`}
-                        className="link--icon ml1"
-                      >
-                        <Icon
-                          key="reference"
-                          tooltip={t`Learn about this table`}
-                          name="reference"
-                          color={color("text-medium")}
-                          className="hover-child"
-                        />
-                      </Link>,
-                    ]}
+                      </React.Fragment>
+                    }
                   />
                 </Link>
               </Card>

frontend/src/metabase/components/AccordionList.jsx

@@ -348,8 +348,9 @@ export default class AccordionList extends Component {
             ...style,
           }}
         >
-          {rows.map(row => (
+          {rows.map((row, index) => (
             <AccordionListCell
+              key={index}
               {...this.props}
               row={row}
               sections={sections}

frontend/src/metabase/components/BrowserCrumbs.jsx

@@ -18,30 +18,24 @@ const BrowserCrumbs = ({ crumbs, analyticsContext }) => (
   <Flex align="center">
     {crumbs
       .filter(c => c)
-      .map((crumb, index, crumbs) => [
-        <Flex align="center">
+      .map((crumb, index, crumbs) => (
+        <Flex align="center" key={index}>
           {crumb.to ? (
             <Link
               className="text-brand-hover cursor-pointer"
-              key={"title" + index}
               to={crumb.to}
               data-metabase-event={`${analyticsContext};Bread Crumb;Click`}
             >
               <Crumb>{crumb.title}</Crumb>
             </Link>
           ) : (
-            <Crumb key={"title" + index}>{crumb.title}</Crumb>
+            <Crumb>{crumb.title}</Crumb>
           )}
           {index < crumbs.length - 1 ? (
-            <Icon
-              key={"divider" + index}
-              name="chevronright"
-              color={color("text-light")}
-              mx={1}
-            />
+            <Icon name="chevronright" color={color("text-light")} mx={1} />
           ) : null}
-        </Flex>,
-      ])}
+        </Flex>
+      ))}
   </Flex>
 );
 

frontend/src/metabase/components/Code.jsx

@@ -8,12 +8,14 @@ const Code = ({ children, block }) => {
   } else if (typeof children === "string" && children.split(/\n/g).length > 1) {
     return (
       <span>
-        {children.split(/\n/g).map((line, index) => [
-          <span className="text-code" style={{ lineHeight: "1.8em" }}>
-            {line}
-          </span>,
-          <br />,
-        ])}
+        {children.split(/\n/g).map((line, index) => (
+          <React.Fragment key={index}>
+            <span className="text-code" style={{ lineHeight: "1.8em" }}>
+              {line}
+            </span>
+            <br />
+          </React.Fragment>
+        ))}
       </span>
     );
   } else {