Start conversion

enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import { useEffect } from "react";
+import type {ReactNode} from "react";
+import { useEffect} from "react";
 
 import { useSdkSelector } from "embedding-sdk/store";
 import { getIsInitialized, getIsLoggedIn } from "embedding-sdk/store/selectors";
@@ -29,7 +30,7 @@ interface InteractiveQuestionProps {
 
 export const InteractiveQuestion = ({
   questionId,
-}: InteractiveQuestionProps): JSX.Element | null => {
+}: InteractiveQuestionProps): ReactNode | null => {
   const isInitialized = useSdkSelector(getIsInitialized);
   const isLoggedIn = useSdkSelector(getIsLoggedIn);
 

enterprise/frontend/src/embedding-sdk/components/public/MetabaseProvider.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, JSX } from "react";
+import type { ReactNode } from "react";
 import { memo } from "react";
 import { Provider } from "react-redux";
 
@@ -17,7 +17,7 @@ const MetabaseProviderInternal = ({
 }: {
   children: ReactNode;
   config: SDKConfigType;
-}): JSX.Element => (
+}) => (
   <Provider store={store}>
     <EmotionCacheProvider>
       <ThemeProvider>

enterprise/frontend/src/embedding-sdk/components/public/StaticQuestion.tsx

@@ -1,5 +1,5 @@
 import cx from "classnames";
-import { useEffect, useState } from "react";
+import {ReactNode, useEffect, useState} from "react";
 
 import { useSdkSelector } from "embedding-sdk/store";
 import { getIsInitialized, getIsLoggedIn } from "embedding-sdk/store/selectors";
@@ -36,7 +36,7 @@ type State = {
 export const StaticQuestion = ({
   questionId,
   showVisualizationSelector,
-}: QueryVisualizationProps): JSX.Element | null => {
+}: QueryVisualizationProps): ReactNode | null => {
   const isInitialized = useSdkSelector(getIsInitialized);
   const isLoggedIn = useSdkSelector(getIsLoggedIn);
 

enterprise/frontend/src/metabase-enterprise/auth/components/SsoButton/SsoButton.tsx

@@ -12,10 +12,7 @@ interface SsoButtonProps {
   redirectUrl?: string;
 }
 
-export const SsoButton = ({
-  isCard,
-  redirectUrl,
-}: SsoButtonProps): JSX.Element => {
+export const SsoButton = ({ isCard, redirectUrl }: SsoButtonProps) => {
   const isEmbedded = isWithinIframe();
   const dispatch = useDispatch();
 

enterprise/frontend/src/metabase-enterprise/auth/components/SsoButton/SsoButton.unit.spec.tsx

@@ -16,7 +16,7 @@ const setup = () => {
     }),
   });
 
-  // simulate ebmedding
+  // simulate embedding
   jest.spyOn(domUtils, "isWithinIframe").mockReturnValue(true);
 
   renderWithProviders(<SsoButton />, { storeInitialState: state });

enterprise/frontend/src/metabase-enterprise/caching/components/CacheTimeInput/CacheTimeInput.tsx

@@ -1,5 +1,5 @@
 import type { FocusEvent } from "react";
-import { useCallback } from "react";
+import {ReactNode, useCallback} from "react";
 import { t } from "ttag";
 
 import {
@@ -26,7 +26,7 @@ const CacheTimeInput = ({
   error,
   onChange,
   onBlur,
-}: CacheTimeInputProps): JSX.Element => {
+}: CacheTimeInputProps): ReactNode => {
   const handleChange = useCallback(
     (value?: number) => {
       onChange?.(value !== 0 ? value : undefined);

enterprise/frontend/src/metabase-enterprise/caching/components/DatabaseCacheTimeField/DatabaseCacheTimeField.tsx

@@ -1,5 +1,5 @@
 import { useField, useFormikContext } from "formik";
-import { useCallback } from "react";
+import {ReactNode, useCallback} from "react";
 import { jt, t } from "ttag";
 
 import FormField from "metabase/core/components/FormField";
@@ -45,7 +45,7 @@ const DatabaseCacheTimeField = () => {
   );
 };
 
-const DatabaseCacheTimeDescription = (): JSX.Element => {
+const DatabaseCacheTimeDescription = () => {
   return (
     <div>
       {/* eslint-disable-next-line no-literal-metabase-strings -- Metabase settings */}

enterprise/frontend/src/metabase-enterprise/caching/components/DatabaseCacheTimeInput/DatabaseCacheTimeInput.tsx

@@ -1,5 +1,5 @@
 import type { FocusEvent } from "react";
-import { useCallback, useState } from "react";
+import {ReactNode, useCallback, useState} from "react";
 import { t } from "ttag";
 
 import type { SelectChangeEvent } from "metabase/core/components/Select";
@@ -32,7 +32,7 @@ const DatabaseCacheTimeInput = ({
   error,
   onChange,
   onBlur,
-}: DatabaseCacheTimeInputProps): JSX.Element => {
+}: DatabaseCacheTimeInputProps) => {
   const [isCustom, setIsCustom] = useState(value != null);
 
   const handleChange = useCallback(

enterprise/frontend/src/metabase-enterprise/moderation/components/ModerationReviewIcon/ModerationReviewIcon.tsx

@@ -7,6 +7,7 @@ import type { ModerationReview, User } from "metabase-types/api";
 import { getIconForReview, getModeratorDisplayText } from "../../service";
 
 import { TooltipTime } from "./ModerationReviewIcon.styled";
+import {ReactNode} from "react";
 
 export interface ModerationReviewIconProps {
   review: ModerationReview;
@@ -18,7 +19,7 @@ const ModerationReviewIcon = ({
   review,
   moderator,
   currentUser,
-}: ModerationReviewIconProps): JSX.Element => {
+}: ModerationReviewIconProps): ReactNode => {
   const { name: iconName, color: iconColor } = getIconForReview(review);
 
   const tooltip = moderator && (

enterprise/frontend/src/metabase-enterprise/moderation/components/QuestionModerationIcon/QuestionModerationIcon.tsx

@@ -2,6 +2,7 @@ import type Question from "metabase-lib/v1/Question";
 
 import ModerationReviewIcon from "../../containers/ModerationReviewIcon";
 import { getLatestModerationReview } from "../../service";
+import {ReactNode} from "react";
 
 export interface QuestionModerationIconProps {
   question: Question;
@@ -9,7 +10,7 @@ export interface QuestionModerationIconProps {
 
 const QuestionModerationIcon = ({
   question,
-}: QuestionModerationIconProps): JSX.Element | null => {
+}: QuestionModerationIconProps): ReactNode => {
   const review = getLatestModerationReview(question.getModerationReviews());
 
   if (review) {

enterprise/frontend/src/metabase-enterprise/sandboxes/components/MappingEditor.tsx

@@ -1,6 +1,7 @@
 import cx from "classnames";
 import type React from "react";
-import { useState } from "react";
+import type {ReactNode} from "react";
+import { useState} from "react";
 import { t } from "ttag";
 import _ from "underscore";
 
@@ -37,13 +38,13 @@ interface MappingEditorProps {
   onError?: (val: boolean) => void;
   className?: string;
   style?: React.CSSProperties;
-  keyHeader?: JSX.Element;
-  valueHeader?: JSX.Element;
+  keyHeader?: ReactNode;
+  valueHeader?: ReactNode;
   keyPlaceholder?: string;
   valuePlaceholder?: string;
-  renderKeyInput?: (input: DefaultRenderInputProps) => JSX.Element;
-  renderValueInput?: (input: DefaultRenderInputProps) => React.ReactNode;
-  divider?: JSX.Element;
+  renderKeyInput?: (input: DefaultRenderInputProps) => ReactNode;
+  renderValueInput?: (input: DefaultRenderInputProps) => ReactNode;
+  divider?: ReactNode;
   canAdd?: boolean;
   canDelete?: boolean;
   addText?: string;

enterprise/frontend/src/metabase-enterprise/whitelabel/components/BrandColorSettings/BrandColorSettings.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo } from "react";
+import {memo, ReactNode, useCallback, useMemo} from "react";
 import { t } from "ttag";
 import _ from "underscore";
 
@@ -27,7 +27,7 @@ const BrandColorSettings = ({
   colors,
   colorPalette,
   onChange,
-}: BrandColorSettingsProps): JSX.Element => {
+}: BrandColorSettingsProps): ReactNode => {
   const colorsRef = useCurrentRef(colors);
   const options = useMemo(getBrandColorOptions, []);
 
@@ -64,7 +64,7 @@ const BrandColorTable = ({
   colorPalette,
   options,
   onChange,
-}: BrandColorTableProps): JSX.Element => {
+}: BrandColorTableProps): ReactNode => {
   return (
     <div>
       <TableHeader>

enterprise/frontend/src/metabase-enterprise/whitelabel/components/ChartColorPreview/ChartColorPreview.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import {ReactNode, useMemo} from "react";
 import { t } from "ttag";
 
 import { useDebouncedValue } from "metabase/hooks/use-debounced-value";
@@ -21,7 +21,7 @@ export interface ChartColorPreviewProps {
 
 const ChartColorPreview = ({
   colorPalette,
-}: ChartColorPreviewProps): JSX.Element => {
+}: ChartColorPreviewProps): ReactNode => {
   const changedColors = useDebouncedValue(colorPalette, PREVIEW_TIMEOUT);
 
   const colorGroups = useMemo(() => {

enterprise/frontend/src/metabase-enterprise/whitelabel/components/ChartColorSample/ChartColorSample.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from "react";
+import {memo, ReactNode, useMemo} from "react";
 import _ from "underscore";
 
 import {
@@ -20,7 +20,7 @@ export interface ChartColorSampleProps {
 
 const ChartColorSample = ({
   colorGroups,
-}: ChartColorSampleProps): JSX.Element => {
+}: ChartColorSampleProps): ReactNode => {
   const reversedGroups = useMemo(
     () => colorGroups.map(group => [...group].reverse()),
     [colorGroups],

enterprise/frontend/src/metabase-enterprise/whitelabel/components/ChartColorSettings/ChartColorSettings.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo } from "react";
+import {memo, ReactNode, useCallback, useMemo} from "react";
 import { t } from "ttag";
 import _ from "underscore";
 
@@ -35,7 +35,7 @@ const ChartColorSettings = ({
   colors,
   colorPalette,
   onChange,
-}: ChartColorSettingsProps): JSX.Element => {
+}: ChartColorSettingsProps): ReactNode => {
   const colorsRef = useCurrentRef(colors);
   const colorGroups = useMemo(getChartColorGroups, []);
 
@@ -97,7 +97,7 @@ const ChartColorTable = ({
   onChange,
   onReset,
   onGenerate,
-}: ChartColorTableProps): JSX.Element => {
+}: ChartColorTableProps): ReactNode => {
   return (
     <div>
       <TableHeader>

enterprise/frontend/src/metabase-enterprise/whitelabel/components/ColorResetModal/ColorResetModal.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import {ReactNode, useCallback} from "react";
 import { t } from "ttag";
 
 import ModalContent from "metabase/components/ModalContent";
@@ -12,7 +12,7 @@ export interface ColorResetModalProps {
 const ColorResetModal = ({
   onReset,
   onClose,
-}: ColorResetModalProps): JSX.Element => {
+}: ColorResetModalProps): ReactNode => {
   const handleReset = useCallback(() => {
     onReset?.();
     onClose?.();

enterprise/frontend/src/metabase-enterprise/whitelabel/components/ColorSettings/ColorSettings.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import {ReactNode, useCallback, useMemo, useState} from "react";
 import { t } from "ttag";
 
 import BrandColorSettings from "../BrandColorSettings";
@@ -24,7 +24,7 @@ export const ColorSettings = ({
   initialColors,
   originalColors,
   onChange,
-}: ColorSettingsProps): JSX.Element => {
+}: ColorSettingsProps): ReactNode => {
   const [colors, setColors] = useState(initialColors ?? {});
 
   const colorPalette = useMemo(() => {

enterprise/frontend/src/metabase-enterprise/whitelabel/components/ColorSettingsWidget/ColorSettingsWidget.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from "react";
+import {ReactNode, useCallback, useMemo, useRef} from "react";
 import _ from "underscore";
 
 import { originalColors } from "metabase/lib/colors/palette";
@@ -15,7 +15,7 @@ export interface ColorSettingsWidget {
 const ColorSettingsWidget = ({
   setting,
   onChange,
-}: ColorSettingsWidget): JSX.Element => {
+}: ColorSettingsWidget): ReactNode => {
   const onChangeDebounced = useDebounce(onChange, 400);
 
   return (

enterprise/frontend/src/metabase-enterprise/whitelabel/components/FontFilesWidget/FontFilesWidget.tsx

@@ -1,5 +1,5 @@
 import type { FocusEvent } from "react";
-import { useCallback, useMemo } from "react";
+import {ReactNode, useCallback, useMemo} from "react";
 import { t } from "ttag";
 
 import Input from "metabase/core/components/Input";
@@ -26,7 +26,7 @@ export interface FontFilesWidgetProps {
 const FontFilesWidget = ({
   setting,
   onChange,
-}: FontFilesWidgetProps): JSX.Element => {
+}: FontFilesWidgetProps): ReactNode => {
   const files = setting.value;
   const urls = useMemo(() => getFontUrls(files ?? []), [files]);
 
@@ -48,7 +48,7 @@ interface FontFilesTableProps {
 const FontFilesTable = ({
   urls,
   onChange,
-}: FontFilesTableProps): JSX.Element => {
+}: FontFilesTableProps): ReactNode => {
   return (
     <TableRoot>
       <TableHeader>
@@ -81,7 +81,7 @@ const FontFileRow = ({
   url,
   option,
   onChange,
-}: FontFileRowProps): JSX.Element => {
+}: FontFileRowProps): ReactNode => {
   const handleBlur = useCallback(
     (event: FocusEvent<HTMLInputElement>) => {
       onChange(option, event.currentTarget.value);

enterprise/frontend/src/metabase-enterprise/whitelabel/components/FontWidget/FontWidget.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import {ReactNode, useCallback, useMemo} from "react";
 import { t } from "ttag";
 
 import MetabaseSettings from "metabase/lib/settings";
@@ -22,7 +22,7 @@ const FontWidget = ({
   availableFonts = MetabaseSettings.get("available-fonts") || [],
   onChange,
   onChangeSetting,
-}: FontWidgetProps): JSX.Element => {
+}: FontWidgetProps): ReactNode => {
   const value = !settingValues["application-font-files"]
     ? setting.value ?? setting.default
     : CUSTOM;

enterprise/frontend/src/metabase-enterprise/whitelabel/components/IllustrationWidget/IllustrationWidget.tsx

@@ -1,5 +1,5 @@
 import type { ChangeEvent } from "react";
-import { useState, useRef } from "react";
+import {useState, useRef, ReactNode} from "react";
 import { createPortal } from "react-dom";
 import { t } from "ttag";
 
@@ -220,7 +220,7 @@ async function isFileIntact(dataUri: string) {
   });
 }
 
-const PREVIEW_ELEMENTS: Record<IllustrationType, JSX.Element> = {
+const PREVIEW_ELEMENTS: Record<IllustrationType, ReactNode> = {
   background: <LighthouseImage />,
   icon: <SailboatImage />,
 };

enterprise/frontend/src/metabase-enterprise/whitelabel/components/ImageToggle/ImageToggle.tsx

@@ -22,7 +22,7 @@ export const ImageToggle = ({
   value,
   children,
   onChange,
-}: ImageToggleProps): JSX.Element => {
+}: ImageToggleProps): ReactNode => {
   const toggleId = useUniqueId();
 
   return (

enterprise/frontend/src/metabase-enterprise/whitelabel/components/LighthouseToggleWidget/LighthouseToggleWidget.tsx

@@ -4,6 +4,7 @@ import { ImageToggle } from "../ImageToggle";
 
 import { LighthouseImage } from "./LighthouseToggleWidget.styled";
 import type { LighthouseSetting } from "./types";
+import {ReactNode} from "react";
 
 interface LighthouseToggleWidgetProps {
   setting: LighthouseSetting;
@@ -13,7 +14,7 @@ interface LighthouseToggleWidgetProps {
 const LighthouseToggleWidget = ({
   setting,
   onChange,
-}: LighthouseToggleWidgetProps): JSX.Element => {
+}: LighthouseToggleWidgetProps): ReactNode => {
   const isEnabled = setting.value ?? setting.default;
 
   return (

enterprise/frontend/src/metabase-enterprise/whitelabel/components/MetabotToggleWidget/MetabotToggleWidget.tsx

@@ -4,6 +4,7 @@ import { ImageToggle } from "../ImageToggle";
 
 import { MetabotIcon } from "./MetabotToggleWidget.styled";
 import type { MetabotSetting } from "./types";
+import {ReactNode} from "react";
 
 interface MetabotToggleWidgetProps {
   setting: MetabotSetting;
@@ -13,7 +14,7 @@ interface MetabotToggleWidgetProps {
 export const MetabotToggleWidget = ({
   setting,
   onChange,
-}: MetabotToggleWidgetProps): JSX.Element => {
+}: MetabotToggleWidgetProps): ReactNode => {
   const isEnabled = setting.value ?? setting.default;
 
   return (