IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* use React.PropsWithChildren to explicitly define the children prop

* fix ThemeDemo as well

* provide empty generics
This commit is contained in:
Ashley Harrison
2023-03-08 16:12:54 +00:00
committed by GitHub
parent 7c55dbf37d
commit 11bc66a0e8
9 changed files with 35 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
View File

@@ -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();

9
public/app/features/alerting/unified/components/PluginBridge.tsx
View File

@@ -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) {

6
public/app/features/alerting/unified/components/Strong.tsx
View File

@@ -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>;
};

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

@@ -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>;
};

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

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

12
public/app/features/alerting/unified/hooks/useAlertManagerSourceName.test.tsx
View File

@@ -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);

12
public/app/features/alerting/unified/hooks/useExternalAMSelector.test.tsx
View File

@@ -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(), {

2
public/app/features/alerting/unified/hooks/useIsRuleEditable.test.tsx
View File

@@ -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;
}