Prepare for React v18 upgrade (airbytehq#16694)

airbyte-webapp/package.json

@@ -48,15 +48,15 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "6.1.0",
-    "react-intl": "^5.24.8",
+    "react-intl": "^6.1.1",
     "react-lazylog": "^4.5.3",
     "react-markdown": "^7.0.1",
     "react-query": "^3.39.1",
     "react-reflex": "^4.0.9",
     "react-router-dom": "^6.3.0",
     "react-select": "^5.4.0",
     "react-table": "^7.8.0",
-    "react-use": "^15.3.8",
+    "react-use": "^17.4.0",
     "react-use-intercom": "^1.5.2",
     "react-widgets": "^4.6.1",
     "recharts": "^2.1.13",

airbyte-webapp/src/App.tsx

@@ -29,7 +29,7 @@ import { Routing } from "./pages/routes";
 import { WorkspaceServiceProvider } from "./services/workspaces/WorkspacesService";
 import { theme } from "./theme";
 
-const StyleProvider: React.FC = ({ children }) => (
+const StyleProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <ThemeProvider theme={theme}>
     <GlobalStyle />
     {children}
@@ -38,7 +38,7 @@ const StyleProvider: React.FC = ({ children }) => (
 
 const configProviders: ValueProvider<Config> = [envConfigProvider, windowConfigProvider];
 
-const Services: React.FC = ({ children }) => (
+const Services: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <AnalyticsProvider>
     <ApiErrorBoundary>
       <WorkspaceServiceProvider>

airbyte-webapp/src/components/ApiErrorBoundary/ApiErrorBoundary.tsx

@@ -38,7 +38,7 @@ interface ApiErrorBoundaryProps {
 const RETRY_DELAY = 2500;
 
 class ApiErrorBoundary extends React.Component<
-  ApiErrorBoundaryHookProps & ApiErrorBoundaryProps,
+  React.PropsWithChildren<ApiErrorBoundaryHookProps & ApiErrorBoundaryProps>,
   ApiErrorBoundaryState
 > {
   state: ApiErrorBoundaryState = {
@@ -107,7 +107,10 @@ class ApiErrorBoundary extends React.Component<
   }
 }
 
-const ApiErrorBoundaryWithHooks: React.FC<ApiErrorBoundaryProps> = ({ children, ...props }) => {
+const ApiErrorBoundaryWithHooks: React.FC<React.PropsWithChildren<ApiErrorBoundaryProps>> = ({
+  children,
+  ...props
+}) => {
   const { reset } = useQueryErrorResetBoundary();
   const location = useLocation();
   const navigate = useNavigate();

airbyte-webapp/src/components/BaseClearView/BaseClearView.tsx

@@ -28,7 +28,7 @@ const MainInfo = styled.div`
   flex-direction: column;
 `;
 
-const BaseClearView: React.FC = ({ children }) => {
+const BaseClearView: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const { formatMessage } = useIntl();
   return (
     <Content>

airbyte-webapp/src/components/CenteredPageComponents/PageViewContainer.tsx

@@ -4,7 +4,7 @@ import BaseClearView from "components/BaseClearView";
 
 import PaddedCard from "./PaddedCard";
 
-const PageViewContainer: React.FC = (props) => {
+const PageViewContainer: React.FC<React.PropsWithChildren<unknown>> = (props) => {
   return (
     <BaseClearView>
       <PaddedCard>{props.children}</PaddedCard>

airbyte-webapp/src/components/GroupControls/GroupControls.tsx

@@ -27,7 +27,7 @@ interface GroupControlsProps {
   fullWidthTitle?: boolean;
 }
 
-const GroupControls: React.FC<GroupControlsProps> = ({
+const GroupControls: React.FC<React.PropsWithChildren<GroupControlsProps>> = ({
   title,
   description,
   children,

airbyte-webapp/src/components/InfoBox/InfoBox.tsx

@@ -17,7 +17,7 @@ const Box = styled.div`
   align-items: center;
 `;
 
-export const InfoBox: React.FC<Props> = ({ children, className, icon }) => {
+export const InfoBox: React.FC<React.PropsWithChildren<Props>> = ({ children, className, icon }) => {
   return (
     <Box className={className}>
       {icon && <FontAwesomeIcon size="lg" icon={icon} />}

airbyte-webapp/src/components/JobItem/components/ContentWrapper.tsx

@@ -9,7 +9,7 @@ interface IProps {
   onToggled?: () => void;
 }
 
-const ContentWrapper: React.FC<IProps> = ({ children, isOpen, onToggled }) => {
+const ContentWrapper: React.FC<React.PropsWithChildren<IProps>> = ({ children, isOpen, onToggled }) => {
   return (
     <motion.div
       className={styles.container}

airbyte-webapp/src/components/Label/Label.tsx

@@ -33,7 +33,7 @@ const MessageText = styled.span<Pick<IProps, "error" | "success">>`
   font-size: 13px;
 `;
 
-const Label: React.FC<IProps> = (props) => (
+const Label: React.FC<React.PropsWithChildren<IProps>> = (props) => (
   <Content additionLength={props.additionLength} className={props.className} onClick={props.onClick}>
     {props.children}
     {props.message && (

airbyte-webapp/src/components/LabeledControl/ControlLabels.tsx

@@ -19,7 +19,7 @@ const ControlContainer = styled.div`
   display: inline-block;
 `;
 
-const ControlLabels: React.FC<ControlLabelsProps> = (props) => (
+const ControlLabels: React.FC<React.PropsWithChildren<ControlLabelsProps>> = (props) => (
   <ControlContainer className={props.className}>
     <Label
       error={props.error}

airbyte-webapp/src/components/LoadingBackdrop/LoadingBackdrop.tsx

@@ -7,7 +7,11 @@ interface LoadingBackdropProps {
   loading: boolean;
   small?: boolean;
 }
-export const LoadingBackdrop: React.FC<LoadingBackdropProps> = ({ loading, small, children }) => {
+export const LoadingBackdrop: React.FC<React.PropsWithChildren<LoadingBackdropProps>> = ({
+  loading,
+  small,
+  children,
+}) => {
   return (
     <div className={styles.loadingBackdropContainer}>
       {loading && (

airbyte-webapp/src/components/Markdown/Markdown.tsx

@@ -16,7 +16,7 @@ interface MarkdownProps {
   rehypePlugins?: PluggableList;
 }
 
-export const Markdown: React.VFC<MarkdownProps> = ({ content, className, rehypePlugins }) => {
+export const Markdown: React.FC<MarkdownProps> = ({ content, className, rehypePlugins }) => {
   return (
     <ReactMarkdown
       // Open everything except fragment only links in a new tab

airbyte-webapp/src/components/Modal/Modal.tsx

@@ -20,7 +20,7 @@ const cardStyleBySize = {
   xl: styles.xl,
 };
 
-const Modal: React.FC<ModalProps> = ({ children, title, size, onClose, cardless, testId }) => {
+const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({ children, title, size, onClose, cardless, testId }) => {
   const [isOpen, setIsOpen] = useState(true);
 
   const onModalClose = () => {

airbyte-webapp/src/components/Modal/ModalBody.tsx

@@ -7,7 +7,11 @@ interface ModalBodyProps {
   padded?: boolean;
 }
 
-export const ModalBody: React.FC<ModalBodyProps> = ({ children, maxHeight, padded = true }) => {
+export const ModalBody: React.FC<React.PropsWithChildren<ModalBodyProps>> = ({
+  children,
+  maxHeight,
+  padded = true,
+}) => {
   const modalStyles = classnames(styles.modalBody, {
     [styles.paddingNone]: !padded,
   });

airbyte-webapp/src/components/Modal/ModalFooter.tsx

@@ -1,5 +1,5 @@
 import styles from "./ModalFooter.module.scss";
 
-export const ModalFooter: React.FC = ({ children }) => {
+export const ModalFooter: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   return <div className={styles.modalFooter}>{children}</div>;
 };

airbyte-webapp/src/components/Table/Table.tsx

@@ -14,7 +14,7 @@ type IHeaderProps = {
   collapse?: boolean;
   customWidth?: number;
   customPadding?: PaddingProps;
-} & ColumnInstance;
+} & ColumnInstance<Record<string, unknown>>;
 
 type ICellProps = {
   column: IHeaderProps;

airbyte-webapp/src/components/base/Button/LoadingButton.tsx

@@ -40,7 +40,7 @@ const Invisible = styled.div`
  * the only one <Button/> component and set loading state via props
  * issue: https://github.com/airbytehq/airbyte/issues/12705
  * */
-const LoadingButton: React.FC<ButtonProps> = (props) => {
+const LoadingButton: React.FC<React.PropsWithChildren<ButtonProps>> = (props) => {
   if (props.isLoading) {
     return (
       <ButtonView {...props}>

airbyte-webapp/src/components/base/Card/Card.tsx

@@ -13,7 +13,7 @@ export interface CardProps {
   roundedBottom?: boolean;
 }
 
-export const Card: React.FC<CardProps> = ({
+export const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
   children,
   title,
   className,

airbyte-webapp/src/components/base/Popout/index.stories.tsx

@@ -40,7 +40,6 @@ const Template: ComponentStory<typeof Popout> = (args) => (
 
 export const Example = Template.bind({});
 Example.args = {
-  children: "Text",
   title: "Title",
   isSearchable: false,
 };

airbyte-webapp/src/components/base/Text/Text.tsx

@@ -50,7 +50,7 @@ const isHeadingType = (props: TextProps | HeadingProps): props is HeadingProps =
   return props.as ? /^h[0-6]$/.test(props.as) : false;
 };
 
-export const Text: React.FC<TextProps | HeadingProps> = React.memo((props) => {
+export const Text: React.FC<React.PropsWithChildren<TextProps | HeadingProps>> = React.memo((props) => {
   const isHeading = isHeadingType(props);
   const { as = "p", centered = false, children } = props;
 

airbyte-webapp/src/components/base/TextArea/TextArea.tsx

@@ -8,7 +8,13 @@ interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
   light?: boolean;
 }
 
-export const TextArea: React.FC<TextAreaProps> = ({ error, light, children, className, ...textAreaProps }) => (
+export const TextArea: React.FC<React.PropsWithChildren<TextAreaProps>> = ({
+  error,
+  light,
+  children,
+  className,
+  ...textAreaProps
+}) => (
   <textarea
     {...textAreaProps}
     className={classNames(

airbyte-webapp/src/components/base/Tooltip/InfoTooltip.tsx

@@ -5,7 +5,7 @@ import { InfoIcon } from "components/icons/InfoIcon";
 import styles from "./InfoTooltip.module.scss";
 import { Tooltip } from "./Tooltip";
 
-export const InfoTooltip: React.FC = ({ children }) => {
+export const InfoTooltip: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   return (
     <Tooltip
       control={

airbyte-webapp/src/components/base/Tooltip/Tooltip.tsx

@@ -19,7 +19,7 @@ const FLOATING_OPTIONS: UseFloatingProps = {
   whileElementsMounted: autoUpdate,
 };
 
-export const Tooltip: React.FC<TooltipProps> = (props) => {
+export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = (props) => {
   const { children, control, className, disabled, cursor, theme = "dark", placement = "bottom" } = props;
 
   const [isMouseOver, setIsMouseOver] = useState(false);

airbyte-webapp/src/components/base/Tooltip/TooltipLearnMoreLink.tsx

@@ -6,7 +6,7 @@ interface TooltipLearnMoreLinkProps {
   url: string;
 }
 
-export const TooltipLearnMoreLink: React.VFC<TooltipLearnMoreLinkProps> = ({ url }) => (
+export const TooltipLearnMoreLink: React.FC<TooltipLearnMoreLinkProps> = ({ url }) => (
   <div className={styles.container}>
     <a href={url} target="_blank" rel="noreferrer">
       <FormattedMessage id="ui.learnMore" />

airbyte-webapp/src/components/base/Tooltip/TooltipTable.tsx

@@ -5,7 +5,7 @@ interface TooltipTableProps {
   rows: React.ReactNode[][];
 }
 
-export const TooltipTable: React.VFC<TooltipTableProps> = ({ rows }) => {
+export const TooltipTable: React.FC<TooltipTableProps> = ({ rows }) => {
   const { theme } = useTooltipContext();
 
   return rows.length > 0 ? (

airbyte-webapp/src/config/ConfigServiceProvider.tsx

@@ -22,10 +22,12 @@ export function useConfig<T extends Config>(): T {
   return useMemo(() => configService.config as unknown as T, [configService.config]);
 }
 
-const ConfigServiceInner: React.FC<{
-  defaultConfig: Config;
-  providers?: ValueProvider<Config>;
-}> = ({ children, defaultConfig, providers }) => {
+const ConfigServiceInner: React.FC<
+  React.PropsWithChildren<{
+    defaultConfig: Config;
+    providers?: ValueProvider<Config>;
+  }>
+> = ({ children, defaultConfig, providers }) => {
   const { loading, value } = useAsync(
     async () => (providers ? applyProviders(defaultConfig, providers) : defaultConfig),
     [providers]
@@ -39,7 +41,4 @@ const ConfigServiceInner: React.FC<{
   return <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>;
 };
 
-export const ConfigServiceProvider: React.FC<{
-  defaultConfig: Config;
-  providers?: ValueProvider<Config>;
-}> = React.memo(ConfigServiceInner);
+export const ConfigServiceProvider = React.memo(ConfigServiceInner);

airbyte-webapp/src/core/ApiServices.tsx

@@ -9,7 +9,7 @@ import { HealthService } from "./health/HealthService";
 import { RequestMiddleware } from "./request/RequestMiddleware";
 import { useGetService, useInjectServices } from "./servicesProvider";
 
-export const ApiServices: React.FC = React.memo(({ children }) => {
+export const ApiServices: React.FC<React.PropsWithChildren<unknown>> = React.memo(({ children }) => {
   const config = useConfig();
   const middlewares = useGetService<RequestMiddleware[]>("DefaultRequestMiddlewares");
 

airbyte-webapp/src/core/i18n/I18nProvider.test.tsx

@@ -1,10 +1,11 @@
 import { render } from "@testing-library/react";
 import { act, renderHook } from "@testing-library/react-hooks";
+import React from "react";
 import { FormattedMessage, IntlConfig, useIntl } from "react-intl";
 
 import { I18nProvider, useI18nContext } from "./I18nProvider";
 
-const provider = (messages: IntlConfig["messages"], locale = "en"): React.FC => {
+const provider = (messages: IntlConfig["messages"], locale = "en"): React.FC<React.PropsWithChildren<unknown>> => {
   return ({ children }) => (
     <I18nProvider locale={locale} messages={messages}>
       {children}

airbyte-webapp/src/core/i18n/I18nProvider.tsx

@@ -20,7 +20,7 @@ interface I18nProviderProps {
   locale: string;
 }
 
-export const I18nProvider: React.FC<I18nProviderProps> = ({ children, messages, locale }) => {
+export const I18nProvider: React.FC<React.PropsWithChildren<I18nProviderProps>> = ({ children, messages, locale }) => {
   const [overwrittenMessages, setOvewrittenMessages] = useState<Messages>();
 
   const i18nOverwriteContext = useMemo<I18nContext>(

airbyte-webapp/src/core/servicesProvider.tsx

@@ -15,7 +15,10 @@ interface ServicesProviderApi {
 
 const ServicesProviderContext = React.createContext<ServicesProviderApi | null>(null);
 
-export const ServicesProvider: React.FC<{ inject?: ServiceContainer }> = ({ children, inject }) => {
+export const ServicesProvider: React.FC<React.PropsWithChildren<{ inject?: ServiceContainer }>> = ({
+  children,
+  inject,
+}) => {
   const [registeredServices, { remove, set }] = useMap<ServiceContainer>(inject);
 
   const ctxValue = useMemo<ServicesProviderApi>(

airbyte-webapp/src/hooks/services/BulkEdit/BulkEditService.tsx

@@ -28,10 +28,12 @@ const defaultOptions: Partial<AirbyteStreamConfiguration> = {
   selected: false,
 };
 
-const BatchEditProvider: React.FC<{
-  nodes: SyncSchemaStream[];
-  update: (streams: SyncSchemaStream[]) => void;
-}> = ({ children, nodes, update }) => {
+const BatchEditProvider: React.FC<
+  React.PropsWithChildren<{
+    nodes: SyncSchemaStream[];
+    update: (streams: SyncSchemaStream[]) => void;
+  }>
+> = ({ children, nodes, update }) => {
   const [selectedBatchNodes, { reset, toggle, add }] = useSet<string | undefined>(new Set());
   const [options, setOptions] = useState<Partial<AirbyteStreamConfiguration>>(defaultOptions);
 

airbyte-webapp/src/hooks/services/Experiment/ExperimentService.test.tsx

@@ -21,7 +21,7 @@ const getExperiment: ExperimentService["getExperiment"] = (key): any => {
 describe("ExperimentService", () => {
   describe("useExperiment", () => {
     it("should return the value from the ExperimentService if provided", () => {
-      const wrapper: React.FC = ({ children }) => (
+      const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
         <ExperimentProvider
           value={{
             getExperiment,
@@ -36,7 +36,7 @@ describe("ExperimentService", () => {
     });
 
     it("should return the defaultValue if ExperimentService provides undefined", () => {
-      const wrapper: React.FC = ({ children }) => (
+      const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         <ExperimentProvider value={{ getExperiment: () => undefined as any, getExperimentChanges$: () => EMPTY }}>
           {children}
@@ -53,7 +53,7 @@ describe("ExperimentService", () => {
 
     it("should rerender whenever the ExperimentService emits a new value", () => {
       const subject = new Subject<TestExperimentValueType>();
-      const wrapper: React.FC = ({ children }) => (
+      const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         <ExperimentProvider value={{ getExperiment, getExperimentChanges$: () => subject.asObservable() as any }}>
           {children}

airbyte-webapp/src/hooks/services/Feature/FeatureService.test.tsx

@@ -5,7 +5,7 @@ import { useEffect } from "react";
 import { FeatureService, IfFeatureEnabled, useFeature, useFeatureService } from "./FeatureService";
 import { FeatureItem, FeatureSet } from "./types";
 
-const wrapper: React.FC = ({ children }) => (
+const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <FeatureService features={[FeatureItem.AllowCreateConnection, FeatureItem.AllowSync]}>{children}</FeatureService>
 );
 
@@ -23,7 +23,7 @@ interface FeatureOverwrites {
  */
 const getFeatures = (initialProps: FeatureOverwrites) => {
   return renderHook(
-    ({ overwrite, user, workspace }: FeatureOverwrites) => {
+    ({ overwrite, user, workspace }: React.PropsWithChildren<FeatureOverwrites>) => {
       const { features, setWorkspaceFeatures, setUserFeatures, setFeatureOverwrites } = useFeatureService();
       useEffect(() => {
         setWorkspaceFeatures(workspace);