diff --git a/frontend/src/metabase/components/ColorPicker.jsx b/frontend/src/metabase/components/ColorPicker.jsx
index d9345a207501ab724f364d28cbd54c96e4f2dc43..5eee08d6d46b032c953d05f24ba43cc3520785fa 100644
--- a/frontend/src/metabase/components/ColorPicker.jsx
+++ b/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>
diff --git a/frontend/src/metabase/components/Icon.tsx b/frontend/src/metabase/components/Icon.tsx
index 7a8cbf195414b89c77eb5f73f564a63daeab4041..6fb2138e5cdd107fee4b40d6ea3c3c29af6b0b69 100644
--- a/frontend/src/metabase/components/Icon.tsx
+++ b/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>
);
diff --git a/frontend/src/metabase/internal/components/Props.jsx b/frontend/src/metabase/internal/components/Props.jsx
index 62dca788ac8d51eaee94ac84c1086a9e52141eef..11839d5b4d35ac23169d2eb52ab043d9a5ea5f64 100644
--- a/frontend/src/metabase/internal/components/Props.jsx
+++ b/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 => {
diff --git a/frontend/src/metabase/internal/pages/TypePage.jsx b/frontend/src/metabase/internal/pages/TypePage.jsx
index 40188cf8de81320abb4c04c9fe25f4f1c470e842..ea93b4f4936b25da65c4944ff4b5580630dd3f00 100644
--- a/frontend/src/metabase/internal/pages/TypePage.jsx
+++ b/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>
diff --git a/frontend/src/metabase/internal/routes.js b/frontend/src/metabase/internal/routes.js
index 01bce71292c8c8159f5e8b71596f22340cec49d8..81b7b377d1773e9c07ad41fa9c6da50bd3419a3c 100644
--- a/frontend/src/metabase/internal/routes.js
+++ b/frontend/src/metabase/internal/routes.js
@@ -1,4 +1,4 @@
-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} />
diff --git a/frontend/src/metabase/search/components/InfoText.jsx b/frontend/src/metabase/search/components/InfoText.jsx
index 3ff2ca9763ec1326e04ff7d67f0a580117ad0b7e..826ebafbbcc56b7fe051c8726c020d3d6ad7f62f 100644
--- a/frontend/src/metabase/search/components/InfoText.jsx
+++ b/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) {
diff --git a/frontend/src/metabase/static-viz/components/FunnelChart/FunnelChart.tsx b/frontend/src/metabase/static-viz/components/FunnelChart/FunnelChart.tsx
index a1f65e359d92b6d60bac9cb2bccdcf86263b16d9..57dc8c889d33ea7cb0a49bb1c05d5faa10c2b3b2 100644
--- a/frontend/src/metabase/static-viz/components/FunnelChart/FunnelChart.tsx
+++ b/frontend/src/metabase/static-viz/components/FunnelChart/FunnelChart.tsx
@@ -1,4 +1,4 @@
-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>
diff --git a/frontend/src/metabase/static-viz/components/XYChart/shapes/BarSeries.tsx b/frontend/src/metabase/static-viz/components/XYChart/shapes/BarSeries.tsx
index 0b08fa740f88d19f9f36dff0ece5550231ea6749..3769305fd49fb5d3e9e2ed1d82bbf2059af8c520 100644
--- a/frontend/src/metabase/static-viz/components/XYChart/shapes/BarSeries.tsx
+++ b/frontend/src/metabase/static-viz/components/XYChart/shapes/BarSeries.tsx
@@ -1,4 +1,4 @@
-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>
diff --git a/frontend/src/metabase/static-viz/components/XYChart/utils/ticks.ts b/frontend/src/metabase/static-viz/components/XYChart/utils/ticks.ts
index 8c137b128934d03e561343ac652c5288badfa740..e49044c2e3af0fe885e0a52a9ac5567266c43785 100644
--- a/frontend/src/metabase/static-viz/components/XYChart/utils/ticks.ts
+++ b/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[]) =>