Chore: remove usages of FunctionComponent in elasticsearch plugin (#33175)

public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { IconButton } from './IconButton';
 
 interface Props {
@@ -13,7 +13,7 @@ interface Props {
  * A component used to show add & remove buttons for mutable lists of values. Wether to show or not the add or the remove buttons
  * depends on the `index` and `elements` props. This enforces a consistent experience whenever this pattern is used.
  */
-export const AddRemove: FunctionComponent<Props> = ({ index, onAdd, onRemove, elements }) => {
+export const AddRemove = ({ index, onAdd, onRemove, elements }: Props) => {
   return (
     <div
       className={css`

public/app/plugins/datasource/elasticsearch/components/IconButton.tsx

@@ -1,6 +1,6 @@
 import { Icon } from '@grafana/ui';
 import { cx, css } from '@emotion/css';
-import React, { FunctionComponent, ComponentProps, ButtonHTMLAttributes } from 'react';
+import React, { ComponentProps, ButtonHTMLAttributes } from 'react';
 
 const SROnly = css`
   clip: rect(0 0 0 0);
@@ -19,13 +19,13 @@ interface Props {
   label: string;
 }
 
-export const IconButton: FunctionComponent<Props & ButtonHTMLAttributes<HTMLButtonElement>> = ({
+export const IconButton = ({
   iconName,
   onClick,
   className,
   label,
   ...buttonProps
-}) => (
+}: Props & ButtonHTMLAttributes<HTMLButtonElement>) => (
   <button className={cx('gf-form-label gf-form-label--btn query-part', className)} onClick={onClick} {...buttonProps}>
     <span className={SROnly}>{label}</span>
     <Icon name={iconName} aria-hidden="true" />

public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { css, cx } from '@emotion/css';
 import { SelectableValue } from '@grafana/data';
 import { Segment } from '@grafana/ui';
@@ -23,7 +23,7 @@ interface Props {
   value?: string;
 }
 
-export const MetricPicker: FunctionComponent<Props> = ({ options, onChange, className, value }) => {
+export const MetricPicker = ({ options, onChange, className, value }: Props) => {
   const selectedOption = options.find((option) => option.id === value);
 
   return (

public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx

@@ -1,6 +1,6 @@
 import { SelectableValue } from '@grafana/data';
 import { InlineSegmentGroup, Segment, SegmentAsync } from '@grafana/ui';
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { useFields } from '../../../hooks/useFields';
 import { useDispatch } from '../../../hooks/useStatelessReducer';
 import { segmentStyles } from '../styles';
@@ -26,7 +26,7 @@ interface QueryMetricEditorProps {
   value: BucketAggregation;
 }
 
-export const BucketAggregationEditor: FunctionComponent<QueryMetricEditorProps> = ({ value }) => {
+export const BucketAggregationEditor = ({ value }: QueryMetricEditorProps) => {
   const dispatch = useDispatch<BucketAggregationAction>();
   const getFields = useFields(value.type);
 

public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx

@@ -1,6 +1,6 @@
 import { InlineField, Input, QueryField } from '@grafana/ui';
 import { css } from '@emotion/css';
-import React, { FunctionComponent, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { AddRemove } from '../../../../AddRemove';
 import { useDispatch, useStatelessReducer } from '../../../../../hooks/useStatelessReducer';
 import { Filters } from '../../aggregations';
@@ -13,7 +13,7 @@ interface Props {
   value: Filters;
 }
 
-export const FiltersSettingsEditor: FunctionComponent<Props> = ({ value }) => {
+export const FiltersSettingsEditor = ({ value }: Props) => {
   const upperStateDispatch = useDispatch<BucketAggregationAction<Filters>>();
 
   const dispatch = useStatelessReducer(

public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx

@@ -1,5 +1,5 @@
 import { InlineField, Input, Select } from '@grafana/ui';
-import React, { ComponentProps, FunctionComponent } from 'react';
+import React, { ComponentProps } from 'react';
 import { useDispatch } from '../../../../hooks/useStatelessReducer';
 import { SettingsEditorContainer } from '../../SettingsEditorContainer';
 import { changeBucketAggregationSetting } from '../state/actions';
@@ -23,7 +23,7 @@ interface Props {
   bucketAgg: BucketAggregation;
 }
 
-export const SettingsEditor: FunctionComponent<Props> = ({ bucketAgg }) => {
+export const SettingsEditor = ({ bucketAgg }: Props) => {
   const dispatch = useDispatch();
   const { metrics } = useQuery();
   const settingsDescription = useDescription(bucketAgg);

public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { BucketAggregationEditor } from './BucketAggregationEditor';
 import { useDispatch } from '../../../hooks/useStatelessReducer';
 import { addBucketAggregation, removeBucketAggregation } from './state/actions';
@@ -12,7 +12,7 @@ interface Props {
   nextId: BucketAggregation['id'];
 }
 
-export const BucketAggregationsEditor: FunctionComponent<Props> = ({ nextId }) => {
+export const BucketAggregationsEditor = ({ nextId }: Props) => {
   const dispatch = useDispatch<BucketAggregationAction>();
   const { bucketAggs } = useQuery();
   const totalBucketAggs = bucketAggs?.length || 0;

public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.test.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { render } from '@testing-library/react';
 import { ElasticsearchProvider, useQuery } from './ElasticsearchQueryContext';
@@ -50,7 +50,7 @@ describe('ElasticsearchQueryContext', () => {
     });
 
     it('Should return the current query object', () => {
-      const wrapper: FunctionComponent = ({ children }) => (
+      const wrapper = ({ children }: PropsWithChildren<{}>) => (
         <ElasticsearchProvider
           datasource={{} as ElasticDatasource}
           query={query}

public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.tsx

@@ -1,4 +1,4 @@
-import React, { Context, createContext, FunctionComponent, useCallback, useContext } from 'react';
+import React, { Context, createContext, PropsWithChildren, useCallback, useContext } from 'react';
 import { ElasticDatasource } from '../../datasource';
 import { combineReducers, useStatelessReducer, DispatchContext } from '../../hooks/useStatelessReducer';
 import { ElasticsearchQuery } from '../../types';
@@ -20,14 +20,14 @@ interface Props {
   range: TimeRange;
 }
 
-export const ElasticsearchProvider: FunctionComponent<Props> = ({
+export const ElasticsearchProvider = ({
   children,
   onChange,
   onRunQuery,
   query,
   datasource,
   range,
-}) => {
+}: PropsWithChildren<Props>) => {
   const onStateChange = useCallback(
     (query: ElasticsearchQuery) => {
       onChange(query);

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.test.tsx

@@ -1,7 +1,7 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { ElasticsearchProvider } from '../ElasticsearchQueryContext';
 import { MetricEditor } from './MetricEditor';
-import React, { ReactNode } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { ElasticDatasource } from '../../../datasource';
 import { getDefaultTimeRange } from '@grafana/data';
 import { ElasticsearchQuery } from '../../../types';
@@ -25,7 +25,7 @@ describe('Metric Editor', () => {
 
     const getFields: ElasticDatasource['getFields'] = jest.fn(() => from([[]]));
 
-    const wrapper = ({ children }: { children: ReactNode }) => (
+    const wrapper = ({ children }: PropsWithChildren<{}>) => (
       <ElasticsearchProvider
         datasource={{ getFields } as ElasticDatasource}
         query={query}
@@ -61,7 +61,7 @@ describe('Metric Editor', () => {
 
     const getFields: ElasticDatasource['getFields'] = jest.fn(() => from([[]]));
 
-    const wrapper = ({ children }: { children: ReactNode }) => (
+    const wrapper = ({ children }: PropsWithChildren<{}>) => (
       <ElasticsearchProvider
         datasource={{ getFields } as ElasticDatasource}
         query={query}

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx

@@ -1,7 +1,7 @@
 import { SelectableValue } from '@grafana/data';
 import { InlineSegmentGroup, Segment, SegmentAsync, useTheme } from '@grafana/ui';
 import { cx } from '@emotion/css';
-import React, { FunctionComponent, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useDatasource, useQuery } from '../ElasticsearchQueryContext';
 import { useDispatch } from '../../../hooks/useStatelessReducer';
 import { getStyles } from './styles';
@@ -60,7 +60,7 @@ const getTypeOptions = (
   );
 };
 
-export const MetricEditor: FunctionComponent<Props> = ({ value }) => {
+export const MetricEditor = ({ value }: Props) => {
   const styles = getStyles(useTheme(), !!value.hide);
   const datasource = useDatasource();
   const query = useQuery();

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, FunctionComponent, useEffect } from 'react';
+import React, { Fragment, useEffect } from 'react';
 import { Input, InlineLabel } from '@grafana/ui';
 import { MetricAggregationAction } from '../../state/types';
 import { changeMetricAttribute } from '../../state/actions';
@@ -22,7 +22,7 @@ interface Props {
   previousMetrics: MetricAggregation[];
 }
 
-export const BucketScriptSettingsEditor: FunctionComponent<Props> = ({ value, previousMetrics }) => {
+export const BucketScriptSettingsEditor = ({ value, previousMetrics }: Props) => {
   const upperStateDispatch = useDispatch<MetricAggregationAction<BucketScript>>();
 
   const dispatch = useStatelessReducer(

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx

@@ -1,5 +1,5 @@
 import { Input, InlineField, Select, InlineSwitch } from '@grafana/ui';
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { useDispatch } from '../../../../hooks/useStatelessReducer';
 import { movingAvgModelOptions } from '../../../../query_def';
 import { isEWMAMovingAverage, isHoltMovingAverage, isHoltWintersMovingAverage, MovingAverage } from '../aggregations';
@@ -13,7 +13,7 @@ interface Props {
 // The way we handle changes for those settings is not ideal compared to the other components in the editor
 // FIXME: using `changeMetricSetting` will cause an error when switching from models that have different options
 // as they might be incompatible. We should clear all other options on model change.
-export const MovingAverageSettingsEditor: FunctionComponent<Props> = ({ metric }) => {
+export const MovingAverageSettingsEditor = ({ metric }: Props) => {
   const dispatch = useDispatch();
 
   return (

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx

@@ -1,5 +1,5 @@
 import { InlineField, Input, InlineSwitch } from '@grafana/ui';
-import React, { FunctionComponent, ComponentProps, useState } from 'react';
+import React, { ComponentProps, useState } from 'react';
 import { extendedStats } from '../../../../query_def';
 import { useDispatch } from '../../../../hooks/useStatelessReducer';
 import { changeMetricMeta, changeMetricSetting } from '../state/actions';
@@ -28,7 +28,7 @@ interface Props {
   previousMetrics: MetricAggregation[];
 }
 
-export const SettingsEditor: FunctionComponent<Props> = ({ metric, previousMetrics }) => {
+export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
   const dispatch = useDispatch();
   const description = useDescription(metric);
   const query = useQuery();
@@ -124,7 +124,7 @@ interface ExtendedStatSettingProps {
   onChange: (checked: boolean) => void;
   value: boolean;
 }
-const ExtendedStatSetting: FunctionComponent<ExtendedStatSettingProps> = ({ stat, onChange, value }) => {
+const ExtendedStatSetting = ({ stat, onChange, value }: ExtendedStatSettingProps) => {
   // this is needed for the htmlFor prop in the label so that clicking the label will toggle the switch state.
   const [id] = useState(uniqueId(`es-field-id-`));
 

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { MetricEditor } from './MetricEditor';
 import { useDispatch } from '../../../hooks/useStatelessReducer';
 import { MetricAggregationAction } from './state/types';
@@ -13,7 +13,7 @@ interface Props {
   nextId: MetricAggregation['id'];
 }
 
-export const MetricAggregationsEditor: FunctionComponent<Props> = ({ nextId }) => {
+export const MetricAggregationsEditor = ({ nextId }: Props) => {
   const dispatch = useDispatch<MetricAggregationAction>();
   const { metrics } = useQuery();
   const totalMetrics = metrics?.length || 0;

public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx

@@ -2,7 +2,7 @@ import { GrafanaTheme } from '@grafana/data';
 import { IconButton, InlineFieldRow, InlineLabel, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui';
 import { css } from '@emotion/css';
 import { noop } from 'lodash';
-import React, { FunctionComponent } from 'react';
+import React, { PropsWithChildren } from 'react';
 
 interface Props {
   label: string;
@@ -11,13 +11,13 @@ interface Props {
   hidden?: boolean;
 }
 
-export const QueryEditorRow: FunctionComponent<Props> = ({
+export const QueryEditorRow = ({
   children,
   label,
   onRemoveClick,
   onHideClick,
   hidden = false,
-}) => {
+}: PropsWithChildren<Props>) => {
   const theme = useTheme();
   const styles = getStyles(theme);
 

public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx

@@ -1,7 +1,7 @@
 import { GrafanaTheme } from '@grafana/data';
 import { Icon, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui';
 import { css, cx } from '@emotion/css';
-import React, { FunctionComponent, useState } from 'react';
+import React, { PropsWithChildren, useState } from 'react';
 import { segmentStyles } from './styles';
 
 const getStyles = stylesFactory((theme: GrafanaTheme, hidden: boolean) => {
@@ -30,7 +30,7 @@ interface Props {
   hidden?: boolean;
 }
 
-export const SettingsEditorContainer: FunctionComponent<Props> = ({ label, children, hidden = false }) => {
+export const SettingsEditorContainer = ({ label, children, hidden = false }: PropsWithChildren<Props>) => {
   const [open, setOpen] = useState(false);
   const styles = getStyles(useTheme(), hidden);
 

public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { getDefaultTimeRange, QueryEditorProps } from '@grafana/data';
 import { ElasticDatasource } from '../../datasource';
 import { ElasticsearchOptions, ElasticsearchQuery } from '../../types';
@@ -12,13 +12,7 @@ import { useNextId } from '../../hooks/useNextId';
 
 export type ElasticQueryEditorProps = QueryEditorProps<ElasticDatasource, ElasticsearchQuery, ElasticsearchOptions>;
 
-export const QueryEditor: FunctionComponent<ElasticQueryEditorProps> = ({
+export const QueryEditor = ({ query, onChange, onRunQuery, datasource, range }: ElasticQueryEditorProps) => (
-  query,
-  onChange,
-  onRunQuery,
-  datasource,
-  range,
-}) => (
   <ElasticsearchProvider
     datasource={datasource}
     onChange={onChange}
@@ -34,7 +28,7 @@ interface Props {
   value: ElasticsearchQuery;
 }
 
-const QueryEditorForm: FunctionComponent<Props> = ({ value }) => {
+const QueryEditorForm = ({ value }: Props) => {
   const dispatch = useDispatch();
   const nextId = useNextId();
 

public/app/plugins/datasource/elasticsearch/hooks/useFields.test.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { ElasticDatasource } from '../datasource';
 import { from } from 'rxjs';
 import { ElasticsearchProvider } from '../components/QueryEditor/ElasticsearchQueryContext';
@@ -24,7 +24,7 @@ describe('useFields hook', () => {
 
     const getFields: ElasticDatasource['getFields'] = jest.fn(() => from([[]]));
 
-    const wrapper = ({ children }: { children: ReactNode }) => (
+    const wrapper = ({ children }: PropsWithChildren<{}>) => (
       <ElasticsearchProvider
         datasource={{ getFields } as ElasticDatasource}
         query={query}

public/app/plugins/datasource/elasticsearch/hooks/useNextId.test.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { ElasticsearchProvider } from '../components/QueryEditor/ElasticsearchQueryContext';
 import { useNextId } from './useNextId';
@@ -13,7 +13,7 @@ describe('useNextId', () => {
       metrics: [{ id: '1', type: 'avg' }],
       bucketAggs: [{ id: '2', type: 'date_histogram' }],
     };
-    const wrapper: FunctionComponent = ({ children }) => {
+    const wrapper = ({ children }: PropsWithChildren<{}>) => {
       return (
         <ElasticsearchProvider
           query={query}

public/app/plugins/datasource/elasticsearch/hooks/useStatelessReducer.test.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { useStatelessReducer, useDispatch, DispatchContext, combineReducers } from './useStatelessReducer';
 
@@ -39,7 +39,7 @@ describe('useDispatch Hook', () => {
 
   it('Should return a dispatch function', () => {
     const dispatch = jest.fn();
-    const wrapper: FunctionComponent = ({ children }) => (
+    const wrapper = ({ children }: PropsWithChildren<{}>) => (
       <DispatchContext.Provider value={dispatch}>{children}</DispatchContext.Provider>
     );