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

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;

frontend/src/metabase/common/utils/doNotForwardProps.ts

+export const doNotForwardProps = (...propNamesToBlock: string[]) => ({
+  shouldForwardProp: (propName: string) => !propNamesToBlock.includes(propName),
+});

frontend/src/metabase/components/ResponsiveContainer/ResponsiveContainer.tsx

 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,

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>