Bugfix/various fixes from console error messages (#20829)

* FunnelChart missing key for React loop added

* BarSeries missing key for React loop added

* TickRendererProps formattedValue method removed from tag attributes

* React loop key added to internal routes

* Table head tagging fixed in internal

* BaseIcon uncheckedColor method removed from being added to SVG tag attributes

* Misc

* ColorPicker fix for maxHeight attribute

* Missing key for CollectionBadge in InfoText added

frontend/src/metabase/components/ColorPicker.jsx

@@ -22,6 +22,11 @@ const ColorSquare = ({ color, size }) => (
   />
 );
 
+const ColorPickerFancyContent = ({ children }) => <div>{children}</div>;
+const ColorPickerContent = ({ children }) => (
+  <div className="p1">{children}</div>
+);
+
 class ColorPicker extends Component {
   constructor(props) {
     super(props);
@@ -59,7 +64,7 @@ class ColorPicker extends Component {
           }
         >
           {fancy ? (
-            <div>
+            <ColorPickerFancyContent>
               {/* HACK to hide SketchPicker's border/shadow */}
               <div className="rounded overflow-hidden">
                 <SketchPicker
@@ -74,9 +79,9 @@ class ColorPicker extends Component {
                   Done
                 </Button>
               </div>
-            </div>
+            </ColorPickerFancyContent>
           ) : (
-            <div className="p1">
+            <ColorPickerContent>
               <ol
                 className="flex flex-wrap"
                 style={{
@@ -97,7 +102,7 @@ class ColorPicker extends Component {
                   </li>
                 ))}
               </ol>
-            </div>
+            </ColorPickerContent>
           )}
         </PopoverWithTrigger>
       </div>

frontend/src/metabase/components/Icon.tsx

@@ -96,6 +96,9 @@ class BaseIcon extends Component<IconProps> {
     }
     delete props.size, props.scale;
 
+    // avoid passing `uncheckedColor` to a svg tag
+    const { uncheckedColor, ...svgProps } = props;
+
     if (icon.img) {
       // avoid passing `role="img"` to an actual image file
       const { _role, ...rest } = props;
@@ -113,14 +116,14 @@ class BaseIcon extends Component<IconProps> {
     } else if (icon.svg) {
       return (
         <svg
-          {...props}
+          {...svgProps}
           dangerouslySetInnerHTML={{ __html: icon.svg }}
           ref={forwardedRef}
         />
       );
     } else if (icon.path) {
       return (
-        <svg {...props} ref={forwardedRef}>
+        <svg {...svgProps} ref={forwardedRef}>
           <path d={icon.path} />
         </svg>
       );

frontend/src/metabase/internal/components/Props.jsx

@@ -6,10 +6,12 @@ const Props = ({ of }) => {
   return (
     <table className="Table">
       <thead>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default</th>
-        <th>Description</th>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Default</th>
+          <th>Description</th>
+        </tr>
       </thead>
       <tbody>
         {Object.keys(component.propTypes).map(prop => {

frontend/src/metabase/internal/pages/TypePage.jsx

@@ -19,9 +19,11 @@ const TypePage = () => (
 
       <table className="Table">
         <thead>
-          <th>Name</th>
-          <th>Size</th>
-          <th>Weight</th>
+          <tr>
+            <th>Name</th>
+            <th>Size</th>
+            <th>Weight</th>
+          </tr>
         </thead>
         <tbody>
           <tr>

frontend/src/metabase/internal/routes.js

-import React from "react";
+import React, { Fragment } from "react";
 import { Route, IndexRedirect } from "react-router";
 
 import {
@@ -46,11 +46,14 @@ export default (
     <Route path="static-viz" component={StaticVizPage} />
     {/* Legacy App pages - not really style guide related, but keep for now */}
     {Object.entries(APPS).map(
-      ([name, Component]) =>
-        Component &&
-        (Component.routes || (
-          <Route path={name.toLowerCase()} component={Component} />
-        )),
+      ([name, Component], routeIndex) =>
+        Component && (
+          <Fragment key={routeIndex}>
+            {Component.routes || (
+              <Route path={name.toLowerCase()} component={Component} />
+            )}
+          </Fragment>
+        ),
     )}
     <Route path="errors">
       <Route path="404" component={NotFound} />

frontend/src/metabase/search/components/InfoText.jsx

@@ -30,9 +30,12 @@ const infoTextPropTypes = {
 export function InfoText({ result }) {
   switch (result.model) {
     case "card":
-      return jt`Saved question in ${formatCollection(result.getCollection())}`;
+      return jt`Saved question in ${formatCollection(
+        result,
+        result.getCollection(),
+      )}`;
     case "dataset":
-      return jt`Model in ${formatCollection(result.getCollection())}`;
+      return jt`Model in ${formatCollection(result, result.getCollection())}`;
     case "collection":
       return getCollectionInfoText(result.collection);
     case "database":
@@ -45,6 +48,7 @@ export function InfoText({ result }) {
       return jt`Metric for ${(<TableLink result={result} />)}`;
     default:
       return jt`${getTranslatedEntityName(result.model)} in ${formatCollection(
+        result,
         result.getCollection(),
       )}`;
   }
@@ -52,8 +56,12 @@ export function InfoText({ result }) {
 
 InfoText.propTypes = infoTextPropTypes;
 
-function formatCollection(collection) {
-  return collection.id && <CollectionBadge collection={collection} />;
+function formatCollection(result, collection) {
+  return (
+    collection.id && (
+      <CollectionBadge key={result.model} collection={collection} />
+    )
+  );
 }
 
 function getCollectionInfoText(collection) {

frontend/src/metabase/static-viz/components/FunnelChart/FunnelChart.tsx

-import React from "react";
+import React, { Fragment } from "react";
 import { Line, Polygon } from "@visx/shape";
 import { Group } from "@visx/group";
 import { Text } from "metabase/static-viz/components/Text";
@@ -87,10 +87,9 @@ const Funnel = ({ data, settings }: FunnelProps) => {
           );
 
           return (
-            <>
+            <Fragment key={index}>
               {points && (
                 <Polygon
-                  key={index}
                   fill={palette.brand}
                   points={points}
                   opacity={calculateStepOpacity(index, steps.length)}
@@ -159,7 +158,7 @@ const Funnel = ({ data, settings }: FunnelProps) => {
                   </>
                 )}
               </Group>
-            </>
+            </Fragment>
           );
         })}
       </Group>

frontend/src/metabase/static-viz/components/XYChart/shapes/BarSeries.tsx

-import React from "react";
+import React, { Fragment } from "react";
 import { Bar } from "@visx/shape";
 import { Group } from "@visx/group";
 import { scaleBand } from "@visx/scale";
@@ -42,7 +42,7 @@ export const BarSeries = ({
         }
 
         return (
-          <>
+          <Fragment key={seriesIndex}>
             {series.data.map((datum, index) => {
               const groupX = xAccessor(datum);
               const innerX = innerBarScale(seriesIndex) ?? 0;
@@ -66,7 +66,7 @@ export const BarSeries = ({
                 />
               );
             })}
-          </>
+          </Fragment>
         );
       })}
     </Group>

frontend/src/metabase/static-viz/components/XYChart/utils/ticks.ts

@@ -99,24 +99,24 @@ export const getXTicksDimensions = (
 };
 
 export const getXTickProps = (
-  props: TickRendererProps,
+  { x, y, formattedValue, ...props }: TickRendererProps,
   tickFontSize: number,
   truncateToWidth: number,
   shouldRotate?: boolean,
-): TickRendererProps => {
+): Omit<TickRendererProps, "formattedValue"> => {
   const value =
     truncateToWidth != null
-      ? truncateText(props.formattedValue || "", truncateToWidth, tickFontSize)
-      : props.formattedValue;
+      ? truncateText(formattedValue || "", truncateToWidth, tickFontSize)
+      : formattedValue;
 
   const textBaseline = Math.floor(tickFontSize / 2);
   const transform = shouldRotate
-    ? `rotate(-45, ${props.x} ${props.y}) translate(${textBaseline}, 0)`
+    ? `rotate(-45, ${x} ${y}) translate(${textBaseline}, 0)`
     : undefined;
 
   const textAnchor = shouldRotate ? "end" : "middle";
 
-  return { ...props, transform, children: value, textAnchor };
+  return { x, y, ...props, transform, children: value, textAnchor };
 };
 
 export const getDistinctXValuesCount = (series: Series[]) =>