From a95ff7f595e40939e817de60ccadcc4cd12c0b5f Mon Sep 17 00:00:00 2001
From: Raphael Krut-Landau <raphael.kl@gmail.com>
Date: Thu, 13 Jun 2024 22:32:54 -0400
Subject: [PATCH] fix: Remove console warnings in cache-related code (#44173)
This PR removes:
- a warning about missing React keys in the `Schedule` component
- a warning about invalid props in the `StrategyFormLauncher` component
---
.../components/StrategyFormLauncher.styled.tsx | 6 +++++-
.../metabase/common/utils/doNotForwardProps.ts | 3 +++
.../ResponsiveContainer/ResponsiveContainer.tsx | 5 +----
.../src/metabase/components/Schedule/utils.tsx | 17 +++++++++++++----
4 files changed, 22 insertions(+), 9 deletions(-)
create mode 100644 frontend/src/metabase/common/utils/doNotForwardProps.ts
diff --git a/enterprise/frontend/src/metabase-enterprise/caching/components/StrategyFormLauncher.styled.tsx b/enterprise/frontend/src/metabase-enterprise/caching/components/StrategyFormLauncher.styled.tsx
index 76be3a58977..18e877514ce 100644
--- a/enterprise/frontend/src/metabase-enterprise/caching/components/StrategyFormLauncher.styled.tsx
+++ b/enterprise/frontend/src/metabase-enterprise/caching/components/StrategyFormLauncher.styled.tsx
@@ -2,6 +2,7 @@ import { css } from "@emotion/react";
import styled from "@emotion/styled";
import type { HTMLAttributes, MutableRefObject } from "react";
+import { doNotForwardProps } from "metabase/common/utils/doNotForwardProps";
import { color } from "metabase/lib/colors";
import { breakpointMaxSmall } from "metabase/styled-components/theme";
import type { ButtonProps as BaseButtonProps } from "metabase/ui";
@@ -33,7 +34,10 @@ export const PolicyToken = styled(Button)<
`;
PolicyToken.defaultProps = { radius: "sm" };
-export const StyledLauncher = styled(Flex)<
+export const StyledLauncher = styled(
+ Flex,
+ doNotForwardProps("forRoot", "inheritsRootStrategy"),
+)<
{
forRoot?: boolean;
inheritsRootStrategy?: boolean;
diff --git a/frontend/src/metabase/common/utils/doNotForwardProps.ts b/frontend/src/metabase/common/utils/doNotForwardProps.ts
new file mode 100644
index 00000000000..0af247e83cc
--- /dev/null
+++ b/frontend/src/metabase/common/utils/doNotForwardProps.ts
@@ -0,0 +1,3 @@
+export const doNotForwardProps = (...propNamesToBlock: string[]) => ({
+ shouldForwardProp: (propName: string) => !propNamesToBlock.includes(propName),
+});
diff --git a/frontend/src/metabase/components/ResponsiveContainer/ResponsiveContainer.tsx b/frontend/src/metabase/components/ResponsiveContainer/ResponsiveContainer.tsx
index 16aaed73179..48f141a13de 100644
--- a/frontend/src/metabase/components/ResponsiveContainer/ResponsiveContainer.tsx
+++ b/frontend/src/metabase/components/ResponsiveContainer/ResponsiveContainer.tsx
@@ -1,12 +1,9 @@
import styled from "@emotion/styled";
import type { RefProp } from "metabase/browse/types";
+import { doNotForwardProps } from "metabase/common/utils/doNotForwardProps";
import { Box, type BoxProps } from "metabase/ui";
-const doNotForwardProps = (...propNamesToBlock: string[]) => ({
- shouldForwardProp: (propName: string) => !propNamesToBlock.includes(propName),
-});
-
/** Helps with @container queries in CSS */
export const ResponsiveContainer = styled(
Box,
diff --git a/frontend/src/metabase/components/Schedule/utils.tsx b/frontend/src/metabase/components/Schedule/utils.tsx
index 1a428c18d86..3e1fd7d1089 100644
--- a/frontend/src/metabase/components/Schedule/utils.tsx
+++ b/frontend/src/metabase/components/Schedule/utils.tsx
@@ -20,21 +20,30 @@ export const addScheduleComponents = (
const addBlanks = (arr: ReactNode[]) => {
const result: ReactNode[] = [];
- const addBlank = () => result.push(<Box></Box>);
+ const addBlank = () =>
+ result.push(<Box key={`blank-${result.length}`}></Box>);
for (let c = 0; c < arr.length; c++) {
const curr = arr[c];
const next = arr[c + 1];
const isLastItemString = c === arr.length - 1 && typeof curr === "string";
if (isLastItemString) {
addBlank();
- result.push(<Box mt="-.5rem">{curr}</Box>);
+ result.push(
+ <Box key={curr} mt="-.5rem">
+ {curr}
+ </Box>,
+ );
} else {
const isFirstItemString = c === 0 && typeof curr !== "string";
if (isFirstItemString) {
addBlank();
}
if (typeof curr === "string") {
- const wrappedCurr = <Box style={{ textAlign: "end" }}>{curr}</Box>;
+ const wrappedCurr = (
+ <Box key={`wrapped-${curr}`} style={{ textAlign: "end" }}>
+ {curr}
+ </Box>
+ );
result.push(wrappedCurr);
} else {
result.push(curr);
@@ -46,7 +55,7 @@ const addBlanks = (arr: ReactNode[]) => {
curr.props.longestLabel.length + next.props.longestLabel.length < 24;
if (canSelectsProbablyFitOnOneLine) {
result[result.length - 1] = (
- <Group spacing="xs">
+ <Group spacing="xs" key={`selects-on-one-line`}>
{result[result.length - 1]}
{next}
</Group>
--
GitLab