Chore: use `React.PropsWithChildren` to explicitly define the `children` prop (#64433)

* use React.PropsWithChildren to explicitly define the children prop

* fix ThemeDemo as well

* provide empty generics

packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 
 import { GrafanaTheme2, ThemeRichColor } from '@grafana/data';
 
@@ -23,7 +23,7 @@ interface DemoBoxProps {
   textColor?: string;
 }
 
-const DemoBox: FC<DemoBoxProps> = ({ bg, border, children }) => {
+const DemoBox = ({ bg, border, children }: React.PropsWithChildren<DemoBoxProps>) => {
   const style = cx(
     css`
       padding: 16px;
@@ -40,7 +40,12 @@ const DemoBox: FC<DemoBoxProps> = ({ bg, border, children }) => {
   return <div className={style}>{children}</div>;
 };
 
-const DemoText: FC<{ color?: string; bold?: boolean; size?: number }> = ({ color, bold, size, children }) => {
+const DemoText = ({
+  color,
+  bold,
+  size,
+  children,
+}: React.PropsWithChildren<{ color?: string; bold?: boolean; size?: number }>) => {
   const style = css`
     padding: 4px;
     color: ${color ?? 'inherit'};

public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx

@@ -17,7 +17,7 @@ interface Props {
   secondaryPaneStyle?: React.CSSProperties;
 }
 
-export class SplitPaneWrapper extends PureComponent<Props> {
+export class SplitPaneWrapper extends PureComponent<React.PropsWithChildren<Props>> {
   //requestAnimationFrame reference
   rafToken: MutableRefObject<number | null> = createRef();
 

public/app/features/alerting/unified/components/PluginBridge.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 
 import { usePluginBridge } from '../hooks/usePluginBridge';
 import { SupportedPlugin } from '../types/pluginBridges';
@@ -13,7 +13,12 @@ export interface PluginBridgeProps {
   loadingComponent?: ReactElement;
 }
 
-export const PluginBridge: FC<PluginBridgeProps> = ({ children, plugin, loadingComponent, notInstalledFallback }) => {
+export const PluginBridge = ({
+  children,
+  plugin,
+  loadingComponent,
+  notInstalledFallback,
+}: React.PropsWithChildren<PluginBridgeProps>) => {
   const { loading, installed } = usePluginBridge(plugin);
 
   if (loading) {

public/app/features/alerting/unified/components/Strong.tsx

@@ -1,8 +1,10 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { useTheme2 } from '@grafana/ui';
 
-const Strong: FC = ({ children }) => {
+interface Props {}
+
+const Strong = ({ children }: React.PropsWithChildren<Props>) => {
   const theme = useTheme2();
   return <strong style={{ color: theme.colors.text.maxContrast }}>{children}</strong>;
 };

public/app/features/alerting/unified/components/rule-editor/LabelsField.test.tsx

@@ -13,7 +13,7 @@ const labels = [
   { key: 'key2', value: 'value2' },
 ];
 
-const FormProviderWrapper: React.FC = ({ children }) => {
+const FormProviderWrapper = ({ children }: React.PropsWithChildren<{}>) => {
   const methods = useForm({ defaultValues: { labels } });
   return <FormProvider {...methods}>{children}</FormProvider>;
 };

public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/AlertType.test.tsx

@@ -18,7 +18,7 @@ const ui = {
   },
 };
 
-const FormProviderWrapper: React.FC = ({ children }) => {
+const FormProviderWrapper = ({ children }: React.PropsWithChildren<{}>) => {
   const methods = useForm({});
   return <FormProvider {...methods}>{children}</FormProvider>;
 };

public/app/features/alerting/unified/hooks/useAlertManagerSourceName.test.tsx

@@ -27,7 +27,7 @@ const externalAmMimir: AlertManagerDataSource = {
 
 describe('useAlertManagerSourceName', () => {
   it('Should return undefined alert manager name when there are no available alert managers', () => {
-    const wrapper: React.FC = ({ children }) => <MemoryRouter>{children}</MemoryRouter>;
+    const wrapper = ({ children }: React.PropsWithChildren<{}>) => <MemoryRouter>{children}</MemoryRouter>;
     const { result } = renderHook(() => useAlertManagerSourceName([]), { wrapper });
 
     const [alertManager] = result.current;
@@ -36,7 +36,7 @@ describe('useAlertManagerSourceName', () => {
   });
 
   it('Should return Grafana AM when it is available and no alert manager query param exists', () => {
-    const wrapper: React.FC = ({ children }) => <MemoryRouter>{children}</MemoryRouter>;
+    const wrapper = ({ children }: React.PropsWithChildren<{}>) => <MemoryRouter>{children}</MemoryRouter>;
 
     const availableAMs = [grafanaAm, externalAmProm, externalAmMimir];
     const { result } = renderHook(() => useAlertManagerSourceName(availableAMs), { wrapper });
@@ -49,7 +49,7 @@ describe('useAlertManagerSourceName', () => {
   it('Should return alert manager included in the query param when available', () => {
     const history = createMemoryHistory();
     history.push({ search: `alertmanager=${externalAmProm.name}` });
-    const wrapper: React.FC = ({ children }) => <Router history={history}>{children}</Router>;
+    const wrapper = ({ children }: React.PropsWithChildren<{}>) => <Router history={history}>{children}</Router>;
 
     const availableAMs = [grafanaAm, externalAmProm, externalAmMimir];
     const { result } = renderHook(() => useAlertManagerSourceName(availableAMs), { wrapper });
@@ -62,7 +62,7 @@ describe('useAlertManagerSourceName', () => {
   it('Should return undefined if alert manager included in the query is not available', () => {
     const history = createMemoryHistory();
     history.push({ search: `alertmanager=Not available external AM` });
-    const wrapper: React.FC = ({ children }) => <Router history={history}>{children}</Router>;
+    const wrapper = ({ children }: React.PropsWithChildren<{}>) => <Router history={history}>{children}</Router>;
 
     const availableAMs = [grafanaAm, externalAmProm, externalAmMimir];
 
@@ -74,7 +74,7 @@ describe('useAlertManagerSourceName', () => {
   });
 
   it('Should return alert manager from store if available and query is empty', () => {
-    const wrapper: React.FC = ({ children }) => <MemoryRouter>{children}</MemoryRouter>;
+    const wrapper = ({ children }: React.PropsWithChildren<{}>) => <MemoryRouter>{children}</MemoryRouter>;
 
     const availableAMs = [grafanaAm, externalAmProm, externalAmMimir];
     store.set(ALERTMANAGER_NAME_LOCAL_STORAGE_KEY, externalAmProm.name);
@@ -89,7 +89,7 @@ describe('useAlertManagerSourceName', () => {
   it('Should prioritize the alert manager from query over store', () => {
     const history = createMemoryHistory();
     history.push({ search: `alertmanager=${externalAmProm.name}` });
-    const wrapper: React.FC = ({ children }) => <Router history={history}>{children}</Router>;
+    const wrapper = ({ children }: React.PropsWithChildren<{}>) => <Router history={history}>{children}</Router>;
 
     const availableAMs = [grafanaAm, externalAmProm, externalAmMimir];
     store.set(ALERTMANAGER_NAME_LOCAL_STORAGE_KEY, externalAmMimir.name);

public/app/features/alerting/unified/hooks/useExternalAMSelector.test.tsx

@@ -45,7 +45,7 @@ describe('useExternalDataSourceAlertmanagers', () => {
 
     mockAlertmanagersResponse(server, { data: { activeAlertManagers: [], droppedAlertManagers: [] } });
 
-    const wrapper: React.FC = ({ children }) => <Provider store={store}>{children}</Provider>;
+    const wrapper = ({ children }: React.PropsWithChildren<{}>) => <Provider store={store}>{children}</Provider>;
 
     // Act
     const { result, waitForNextUpdate } = renderHook(() => useExternalDataSourceAlertmanagers(), { wrapper });
@@ -78,7 +78,7 @@ describe('useExternalDataSourceAlertmanagers', () => {
       },
     });
 
-    const wrapper: React.FC = ({ children }) => <Provider store={store}>{children}</Provider>;
+    const wrapper = ({ children }: React.PropsWithChildren<{}>) => <Provider store={store}>{children}</Provider>;
 
     // Act
     const { result, waitForValueToChange } = renderHook(() => useExternalDataSourceAlertmanagers(), { wrapper });
@@ -111,7 +111,7 @@ describe('useExternalDataSourceAlertmanagers', () => {
       },
     });
 
-    const wrapper: React.FC = ({ children }) => <Provider store={store}>{children}</Provider>;
+    const wrapper = ({ children }: React.PropsWithChildren<{}>) => <Provider store={store}>{children}</Provider>;
 
     // Act
     const { result, waitForValueToChange } = renderHook(() => useExternalDataSourceAlertmanagers(), { wrapper });
@@ -144,7 +144,7 @@ describe('useExternalDataSourceAlertmanagers', () => {
       },
     });
 
-    const wrapper: React.FC = ({ children }) => <Provider store={store}>{children}</Provider>;
+    const wrapper = ({ children }: React.PropsWithChildren<{}>) => <Provider store={store}>{children}</Provider>;
 
     // Act
     const { result, waitForNextUpdate } = renderHook(() => useExternalDataSourceAlertmanagers(), { wrapper });
@@ -177,7 +177,7 @@ describe('useExternalDataSourceAlertmanagers', () => {
       },
     });
 
-    const wrapper: React.FC = ({ children }) => <Provider store={store}>{children}</Provider>;
+    const wrapper = ({ children }: React.PropsWithChildren<{}>) => <Provider store={store}>{children}</Provider>;
 
     // Act
     const { result, waitForValueToChange } = renderHook(() => useExternalDataSourceAlertmanagers(), { wrapper });
@@ -210,7 +210,7 @@ describe('useExternalDataSourceAlertmanagers', () => {
       state.dataSources.dataSources = [dsSettings];
     });
 
-    const wrapper: React.FC = ({ children }) => <Provider store={store}>{children}</Provider>;
+    const wrapper = ({ children }: React.PropsWithChildren<{}>) => <Provider store={store}>{children}</Provider>;
 
     // Act
     const { result, waitForValueToChange } = renderHook(() => useExternalDataSourceAlertmanagers(), {

public/app/features/alerting/unified/hooks/useIsRuleEditable.test.tsx

@@ -173,7 +173,7 @@ function mockPermissions(grantedPermissions: AccessControlAction[]) {
 function getProviderWrapper() {
   const dataSources = getMockedDataSources();
   const store = mockUnifiedAlertingStore({ dataSources });
-  const wrapper: React.FC = ({ children }) => <Provider store={store}>{children}</Provider>;
+  const wrapper = ({ children }: React.PropsWithChildren<{}>) => <Provider store={store}>{children}</Provider>;
   return wrapper;
 }