From 7cfd979cc110cc5a557fb718cbe8618eb4462638 Mon Sep 17 00:00:00 2001
From: Giordano Ricci <me@giordanoricci.com>
Date: Tue, 4 May 2021 16:23:19 +0100
Subject: [PATCH] Chore: remove usages of FunctionComponent in elasticsearch
 plugin (#33175)

---
 .../elasticsearch/components/AddRemove.tsx           |  4 ++--
 .../elasticsearch/components/IconButton.tsx          |  6 +++---
 .../elasticsearch/components/MetricPicker.tsx        |  4 ++--
 .../BucketAggregationEditor.tsx                      |  4 ++--
 .../SettingsEditor/FiltersSettingsEditor/index.tsx   |  4 ++--
 .../SettingsEditor/index.tsx                         |  4 ++--
 .../QueryEditor/BucketAggregationsEditor/index.tsx   |  4 ++--
 .../QueryEditor/ElasticsearchQueryContext.test.tsx   |  4 ++--
 .../QueryEditor/ElasticsearchQueryContext.tsx        |  6 +++---
 .../MetricAggregationsEditor/MetricEditor.test.tsx   |  6 +++---
 .../MetricAggregationsEditor/MetricEditor.tsx        |  4 ++--
 .../BucketScriptSettingsEditor/index.tsx             |  4 ++--
 .../SettingsEditor/MovingAverageSettingsEditor.tsx   |  4 ++--
 .../SettingsEditor/index.tsx                         |  6 +++---
 .../QueryEditor/MetricAggregationsEditor/index.tsx   |  4 ++--
 .../components/QueryEditor/QueryEditorRow.tsx        |  6 +++---
 .../QueryEditor/SettingsEditorContainer.tsx          |  4 ++--
 .../elasticsearch/components/QueryEditor/index.tsx   | 12 +++---------
 .../elasticsearch/hooks/useFields.test.tsx           |  4 ++--
 .../elasticsearch/hooks/useNextId.test.tsx           |  4 ++--
 .../elasticsearch/hooks/useStatelessReducer.test.tsx |  4 ++--
 21 files changed, 48 insertions(+), 54 deletions(-)

diff --git a/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx b/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx
index db7c398497d..4e210830ea0 100644
--- a/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx
+++ b/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`
diff --git a/public/app/plugins/datasource/elasticsearch/components/IconButton.tsx b/public/app/plugins/datasource/elasticsearch/components/IconButton.tsx
index f5021a7b321..51fb6b179ac 100644
--- a/public/app/plugins/datasource/elasticsearch/components/IconButton.tsx
+++ b/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" />
diff --git a/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx b/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx
index 00be7d0a648..a74b50f7517 100644
--- a/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx
+++ b/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 (
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx
index d9ec69460ff..439acd59e92 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx
+++ b/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);
 
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
index 3d866b6d600..8e61909d3eb 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
+++ b/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(
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx
index c815b080440..1b03018398f 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx
+++ b/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);
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/index.tsx
index 0f8dc087495..7370caeb5e1 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/index.tsx
+++ b/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;
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.test.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.test.tsx
index 7409082ff01..d95eb6f4678 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.test.tsx
+++ b/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}
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.tsx
index f8bcabfd158..8b3a03861e1 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.tsx
+++ b/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);
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.test.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.test.tsx
index 38770aeda5e..71bdbef2391 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.test.tsx
+++ b/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}
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx
index a112dca1ec9..fcee77abb12 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx
+++ b/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();
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
index 4fddaabbe5f..ef93c08c6fd 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
+++ b/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(
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
index b577a32edbd..84cce202273 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
+++ b/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 (
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
index 86582ea545f..d2ad0bce760 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
+++ b/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-`));
 
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/index.tsx
index 73ac3ea9e21..2471f534537 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/index.tsx
+++ b/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;
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
index a625c9a0f0f..a7670e5cc3c 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
+++ b/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);
 
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
index fb4cd84d83f..43acd483942 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
+++ b/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);
 
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
index 119b4d9efa7..2ef0c72a172 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
+++ b/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> = ({
-  query,
-  onChange,
-  onRunQuery,
-  datasource,
-  range,
-}) => (
+export const QueryEditor = ({ query, onChange, onRunQuery, datasource, range }: ElasticQueryEditorProps) => (
   <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();
 
diff --git a/public/app/plugins/datasource/elasticsearch/hooks/useFields.test.tsx b/public/app/plugins/datasource/elasticsearch/hooks/useFields.test.tsx
index 7b3fb059465..57032872d35 100644
--- a/public/app/plugins/datasource/elasticsearch/hooks/useFields.test.tsx
+++ b/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}
diff --git a/public/app/plugins/datasource/elasticsearch/hooks/useNextId.test.tsx b/public/app/plugins/datasource/elasticsearch/hooks/useNextId.test.tsx
index 4d2d99ef14e..1da0067d016 100644
--- a/public/app/plugins/datasource/elasticsearch/hooks/useNextId.test.tsx
+++ b/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}
diff --git a/public/app/plugins/datasource/elasticsearch/hooks/useStatelessReducer.test.tsx b/public/app/plugins/datasource/elasticsearch/hooks/useStatelessReducer.test.tsx
index 91e2cf7f65b..2543888b23e 100644
--- a/public/app/plugins/datasource/elasticsearch/hooks/useStatelessReducer.test.tsx
+++ b/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>
     );