From 2578774188e3cd89b5387563e0932c84ad834e75 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Thu, 16 Mar 2023 07:56:26 -0700 Subject: [PATCH] Chore: Avoid explicit React.FunctionComponent when possible (round 3) (#64839) --- .../CallToActionCard/CallToActionCard.tsx | 7 +------ .../components/ColorPicker/NamedColorsGroup.tsx | 9 ++------- .../ColorPicker/SeriesColorPickerPopover.tsx | 4 ++-- .../components/ColorPicker/SpectrumPalette.tsx | 2 +- .../components/ErrorBoundary/ErrorWithStack.tsx | 4 ++-- .../src/components/FormField/FormField.tsx | 6 +++--- .../src/components/FormLabel/FormLabel.tsx | 6 +++--- .../src/components/Forms/InlineLabel.tsx | 6 +++--- .../src/components/Graph/GraphWithLegend.tsx | 2 +- .../src/components/Logs/LogLabelStatsRow.tsx | 4 ++-- .../grafana-ui/src/components/Logs/LogLabels.tsx | 4 ++-- .../src/components/Logs/LogRowContext.tsx | 15 +++++---------- .../src/components/Logs/LogRowContextProvider.tsx | 9 ++------- .../SecretFormField/SecretFormField.tsx | 4 ++-- .../src/components/Slider/RangeSlider.tsx | 6 +++--- .../grafana-ui/src/components/Slider/Slider.tsx | 6 +++--- .../components/VizLegend/VizLegendStatsList.tsx | 6 +++++- .../components/VizLegend/VizLegendTableItem.tsx | 4 ++-- .../src/utils/storybook/withCenteredStory.tsx | 2 +- .../core/components/EmptyListCTA/EmptyListCTA.tsx | 4 ++-- .../components/DashNav/DashNavButton.tsx | 4 ++-- .../dashboard/components/SubMenu/Annotations.tsx | 4 ++-- .../dashboard/components/SubMenu/SubMenuItems.tsx | 4 ++-- public/app/features/explore/ErrorContainer.tsx | 4 ++-- .../features/logs/components/LogLabelStatsRow.tsx | 4 ++-- public/app/features/logs/components/LogLabels.tsx | 4 ++-- .../features/logs/components/LogRowContext.tsx | 12 ++++++------ .../logs/components/LogRowContextProvider.tsx | 9 ++------- .../variables/editor/SelectionOptionsEditor.tsx | 6 +++--- .../variables/editor/VariableValuesPreview.tsx | 4 +--- .../features/variables/pickers/PickerRenderer.tsx | 4 ++-- .../components/AzureCredentialsForm.tsx | 4 ++-- .../components/DefaultSubscription.tsx | 4 ++-- .../azuremonitor/components/MonitorConfig.tsx | 4 ++-- .../cloud-monitoring/components/AliasBy.tsx | 4 ++-- .../cloud-monitoring/components/GraphPeriod.tsx | 4 ++-- .../cloud-monitoring/components/GroupBy.tsx | 6 +++--- .../cloud-monitoring/components/LabelFilter.tsx | 9 ++------- .../cloud-monitoring/components/Preprocessor.tsx | 4 ++-- .../components/Dimensions/FilterItem.tsx | 6 +++--- .../datasource/cloudwatch/components/Forms.tsx | 6 +++--- .../components/MetricsQueryEditor/Alias.tsx | 4 ++-- .../cloudwatch/components/SQLCodeEditor.tsx | 4 ++-- .../components/ThrottlingErrorMessage.tsx | 4 ++-- .../VariableQueryEditor/MultiFilterItem.tsx | 4 ++-- .../SettingsEditor/TopMetricsSettingsEditor.tsx | 4 ++-- .../configuration/AzureAuthSettings.tsx | 4 ++-- .../configuration/AzureCredentialsForm.tsx | 4 ++-- .../app/plugins/panel/barchart/BarChartPanel.tsx | 10 +--------- .../plugins/panel/flamegraph/FlameGraphPanel.tsx | 2 +- public/app/plugins/panel/logs/LogsPanel.tsx | 4 ++-- .../plugins/panel/nodeGraph/NodeGraphPanel.tsx | 7 +------ public/app/plugins/panel/traces/TracesPanel.tsx | 2 +- 53 files changed, 116 insertions(+), 157 deletions(-) diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx index 64b179aeece..45bb1f8f01c 100644 --- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx +++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx @@ -12,12 +12,7 @@ export interface CallToActionCardProps { className?: string; } -export const CallToActionCard: React.FunctionComponent = ({ - message, - callToActionElement, - footer, - className, -}) => { +export const CallToActionCard = ({ message, callToActionElement, footer, className }: CallToActionCardProps) => { const css = useStyles2(getStyles); return ( diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx index 016d155d242..18ff38072b8 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/css'; import { Property } from 'csstype'; import { upperFirst } from 'lodash'; -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { GrafanaTheme2, ThemeVizHue } from '@grafana/data'; @@ -17,12 +17,7 @@ interface NamedColorsGroupProps { key?: string; } -const NamedColorsGroup: FunctionComponent = ({ - hue, - selectedColor, - onColorSelect, - ...otherProps -}) => { +const NamedColorsGroup = ({ hue, selectedColor, onColorSelect, ...otherProps }: NamedColorsGroupProps) => { const label = upperFirst(hue.name); const styles = useStyles2(getStyles); diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx index c463571f6b0..f9a8d3b6cab 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { withTheme2, useStyles2 } from '../../themes'; import { Switch } from '../Forms/Legacy/Switch/Switch'; @@ -12,7 +12,7 @@ export interface SeriesColorPickerPopoverProps extends ColorPickerProps, Popover onToggleAxis?: () => void; } -export const SeriesColorPickerPopover: FunctionComponent = (props) => { +export const SeriesColorPickerPopover = (props: SeriesColorPickerPopoverProps) => { const styles = useStyles2(getStyles); const { yaxis, onToggleAxis, color, ...colorPickerProps } = props; diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx index 78be8895497..819a5256de0 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx @@ -15,7 +15,7 @@ export interface SpectrumPaletteProps { onChange: (color: string) => void; } -const SpectrumPalette: React.FunctionComponent = ({ color, onChange }) => { +const SpectrumPalette = ({ color, onChange }: SpectrumPaletteProps) => { const [currentColor, setColor] = useState(color); useThrottleFn( diff --git a/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx b/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx index 4a2cb35f693..a80357a9964 100644 --- a/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx +++ b/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { stylesFactory } from '../../themes'; @@ -16,7 +16,7 @@ export interface Props extends ErrorBoundaryApi { title: string; } -export const ErrorWithStack: FunctionComponent = ({ error, errorInfo, title }) => ( +export const ErrorWithStack = ({ error, errorInfo, title }: Props) => (

{title}

diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx index 48a91d2455c..e4522bcf2e0 100644 --- a/packages/grafana-ui/src/components/FormField/FormField.tsx +++ b/packages/grafana-ui/src/components/FormField/FormField.tsx @@ -1,5 +1,5 @@ import { css, cx } from '@emotion/css'; -import React, { InputHTMLAttributes, FunctionComponent } from 'react'; +import React, { InputHTMLAttributes } from 'react'; import { InlineFormLabel } from '../FormLabel/FormLabel'; import { PopoverContent } from '../Tooltip'; @@ -24,7 +24,7 @@ const defaultProps = { * Default form field including label used in Grafana UI. Default input element is simple . You can also pass * custom inputEl if required in which case inputWidth and inputProps are ignored. */ -export const FormField: FunctionComponent = ({ +export const FormField = ({ label, tooltip, labelWidth, @@ -33,7 +33,7 @@ export const FormField: FunctionComponent = ({ className, interactive, ...inputProps -}) => { +}: Props) => { const styles = getStyles(); return (
diff --git a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx index c01047df2ff..f413e444bc9 100644 --- a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx +++ b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { FunctionComponent, ReactNode } from 'react'; +import React, { ReactNode } from 'react'; import { Icon } from '../Icon/Icon'; import { Tooltip, PopoverContent } from '../Tooltip'; @@ -16,7 +16,7 @@ interface Props { interactive?: boolean; } -export const FormLabel: FunctionComponent = ({ +export const FormLabel = ({ children, isFocused, isInvalid, @@ -26,7 +26,7 @@ export const FormLabel: FunctionComponent = ({ width, interactive, ...rest -}) => { +}: Props) => { const classes = classNames(className, `gf-form-label width-${width ? width : '10'}`, { 'gf-form-label--is-focused': isFocused, 'gf-form-label--is-invalid': isInvalid, diff --git a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx index 2d75f23fb72..b01146f17b6 100644 --- a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx @@ -1,5 +1,5 @@ import { css, cx } from '@emotion/css'; -import React, { FunctionComponent, useCallback } from 'react'; +import React, { useCallback } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; @@ -24,7 +24,7 @@ export interface Props extends Omit = ({ +export const InlineLabel = ({ children, className, tooltip, @@ -33,7 +33,7 @@ export const InlineLabel: FunctionComponent = ({ interactive, as: Component = 'label', ...rest -}) => { +}: Props) => { const styles = useStyles2( useCallback((theme) => getInlineLabelStyles(theme, transparent, width), [transparent, width]) ); diff --git a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx index c2d690c21fc..540bb3cbe9b 100644 --- a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx +++ b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx @@ -47,7 +47,7 @@ const shouldHideLegendItem = (data: GraphSeriesValue[][], hideEmpty = false, hid return (hideEmpty && isNullOnlySeries) || (hideZero && isZeroOnlySeries); }; -export const GraphWithLegend: React.FunctionComponent = (props: GraphWithLegendProps) => { +export const GraphWithLegend = (props: GraphWithLegendProps) => { const { series, timeRange, diff --git a/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx b/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx index f104331f77f..56c6ff201ec 100644 --- a/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx +++ b/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx @@ -1,5 +1,5 @@ import { css, cx } from '@emotion/css'; -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; @@ -60,7 +60,7 @@ export interface Props { } /** @deprecated will be removed in the next major version */ -export const LogLabelStatsRow: FunctionComponent = ({ active, count, proportion, value }) => { +export const LogLabelStatsRow = ({ active, count, proportion, value }: Props) => { const style = useStyles2(getStyles); const percent = `${Math.round(proportion * 100)}%`; const barStyle = { width: percent }; diff --git a/packages/grafana-ui/src/components/Logs/LogLabels.tsx b/packages/grafana-ui/src/components/Logs/LogLabels.tsx index 9f7ac0a07ab..9a3126cf7f4 100644 --- a/packages/grafana-ui/src/components/Logs/LogLabels.tsx +++ b/packages/grafana-ui/src/components/Logs/LogLabels.tsx @@ -1,5 +1,5 @@ import { css, cx } from '@emotion/css'; -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { GrafanaTheme2, Labels } from '@grafana/data'; @@ -13,7 +13,7 @@ interface Props { } /** @deprecated will be removed in the next major version */ -export const LogLabels: FunctionComponent = ({ labels }) => { +export const LogLabels = ({ labels }: Props) => { const styles = useStyles2(getStyles); const displayLabels = Object.keys(labels).filter((label) => !label.startsWith('_') && !HIDDEN_LABELS.includes(label)); diff --git a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx index 4e8fc2ec47b..d432f048823 100644 --- a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx +++ b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx @@ -88,12 +88,7 @@ interface LogRowContextGroupProps extends LogRowContextGroupHeaderProps { error?: string; } -const LogRowContextGroupHeader: React.FunctionComponent = ({ - row, - rows, - onLoadMoreContext, - canLoadMoreRows, -}) => { +const LogRowContextGroupHeader = ({ row, rows, onLoadMoreContext, canLoadMoreRows }: LogRowContextGroupHeaderProps) => { const { header } = useStyles2(getLogRowContextStyles); return ( @@ -124,7 +119,7 @@ const LogRowContextGroupHeader: React.FunctionComponent = ({ +export const LogRowContextGroup = ({ row, rows, error, @@ -132,7 +127,7 @@ export const LogRowContextGroup: React.FunctionComponent { +}: LogRowContextGroupProps) => { const { commonStyles, logs } = useStyles2(getLogRowContextStyles); const [scrollTop, setScrollTop] = useState(0); const listContainerRef = useRef(null); @@ -186,7 +181,7 @@ export const LogRowContextGroup: React.FunctionComponent = ({ +export const LogRowContext = ({ row, context, errors, @@ -194,7 +189,7 @@ export const LogRowContext: React.FunctionComponent = ({ onLoadMoreContext, hasMoreContextRows, wrapLogMessage, -}) => { +}: LogRowContextProps) => { useEffect(() => { const handleEscKeyDown = (e: KeyboardEvent): void => { if (e.keyCode === 27) { diff --git a/packages/grafana-ui/src/components/Logs/LogRowContextProvider.tsx b/packages/grafana-ui/src/components/Logs/LogRowContextProvider.tsx index f1fab4e1eba..5e1d029a0fd 100644 --- a/packages/grafana-ui/src/components/Logs/LogRowContextProvider.tsx +++ b/packages/grafana-ui/src/components/Logs/LogRowContextProvider.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import useAsync from 'react-use/lib/useAsync'; import { @@ -137,12 +137,7 @@ export const getRowContexts = async ( }; /** @deprecated will be removed in the next major version */ -export const LogRowContextProvider: React.FunctionComponent = ({ - getRowContext, - row, - children, - logsSortOrder, -}) => { +export const LogRowContextProvider = ({ getRowContext, row, children, logsSortOrder }: LogRowContextProviderProps) => { // React Hook that creates a number state value called limit to component state and a setter function called setLimit // The initial value for limit is 10 // Used for the number of rows to retrieve from backend from a specific point in time diff --git a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx index 6eb08850410..a9415bb4179 100644 --- a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx +++ b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx @@ -1,6 +1,6 @@ import { css, cx } from '@emotion/css'; import { omit } from 'lodash'; -import React, { InputHTMLAttributes, FunctionComponent } from 'react'; +import React, { InputHTMLAttributes } from 'react'; import { Button } from '../Button/Button'; import { FormField } from '../FormField/FormField'; @@ -39,7 +39,7 @@ const getSecretFormFieldStyles = () => { * form field. This is used for passwords or anything that is encrypted on the server and is later returned encrypted * to the user (like datasource passwords). */ -export const SecretFormField: FunctionComponent = ({ +export const SecretFormField = ({ label = 'Password', labelWidth, inputWidth = 12, diff --git a/packages/grafana-ui/src/components/Slider/RangeSlider.tsx b/packages/grafana-ui/src/components/Slider/RangeSlider.tsx index 2c9f4a5f1dd..2c7b3bc1bcd 100644 --- a/packages/grafana-ui/src/components/Slider/RangeSlider.tsx +++ b/packages/grafana-ui/src/components/Slider/RangeSlider.tsx @@ -1,7 +1,7 @@ import { cx } from '@emotion/css'; import { Global } from '@emotion/react'; import Slider, { SliderProps } from 'rc-slider'; -import React, { FunctionComponent, useCallback } from 'react'; +import React, { useCallback } from 'react'; import { useTheme2 } from '../../themes/ThemeContext'; @@ -14,7 +14,7 @@ import { RangeSliderProps } from './types'; * * RichHistoryQueriesTab uses this Range Component */ -export const RangeSlider: FunctionComponent = ({ +export const RangeSlider = ({ min, max, onChange, @@ -25,7 +25,7 @@ export const RangeSlider: FunctionComponent = ({ formatTooltipResult, value, tooltipAlwaysVisible = true, -}) => { +}: RangeSliderProps) => { const handleChange = useCallback( (v: number | number[]) => { const value = typeof v === 'number' ? [v, v] : v; diff --git a/packages/grafana-ui/src/components/Slider/Slider.tsx b/packages/grafana-ui/src/components/Slider/Slider.tsx index e566b1455e6..ca442bd440a 100644 --- a/packages/grafana-ui/src/components/Slider/Slider.tsx +++ b/packages/grafana-ui/src/components/Slider/Slider.tsx @@ -1,7 +1,7 @@ import { cx } from '@emotion/css'; import { Global } from '@emotion/react'; import SliderComponent from 'rc-slider'; -import React, { useState, useCallback, ChangeEvent, FunctionComponent, FocusEvent } from 'react'; +import React, { useState, useCallback, ChangeEvent, FocusEvent } from 'react'; import { useTheme2 } from '../../themes/ThemeContext'; import { Input } from '../Input/Input'; @@ -12,7 +12,7 @@ import { SliderProps } from './types'; /** * @public */ -export const Slider: FunctionComponent = ({ +export const Slider = ({ min, max, onChange, @@ -24,7 +24,7 @@ export const Slider: FunctionComponent = ({ ariaLabelForHandle, marks, included, -}) => { +}: SliderProps) => { const isHorizontal = orientation === 'horizontal'; const theme = useTheme2(); const styles = getStyles(theme, isHorizontal, Boolean(marks)); diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx index 166d894849c..29b85664416 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx @@ -7,10 +7,14 @@ import { DisplayValue, formattedValueToString } from '@grafana/data'; import { useStyles2 } from '../../themes/ThemeContext'; import { InlineList } from '../List/InlineList'; +interface Props { + stats: DisplayValue[]; +} + /** * @internal */ -export const VizLegendStatsList: React.FunctionComponent<{ stats: DisplayValue[] }> = ({ stats }) => { +export const VizLegendStatsList = ({ stats }: Props) => { const styles = useStyles2(getStyles); if (stats.length === 0) { diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx index fe177bd3447..981c20403cf 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx @@ -28,14 +28,14 @@ export interface Props { /** * @internal */ -export const LegendTableItem: React.FunctionComponent = ({ +export const LegendTableItem = ({ item, onLabelClick, onLabelMouseOver, onLabelMouseOut, className, readonly, -}) => { +}: Props) => { const styles = useStyles2(getStyles); const onMouseOver = useCallback( diff --git a/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx b/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx index 7f0e3cbb522..84a3dc59765 100644 --- a/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx +++ b/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx @@ -6,7 +6,7 @@ interface CenteredStoryProps { horizontal?: boolean; vertical?: boolean; } -const CenteredStory: React.FunctionComponent = ({ horizontal, vertical, children }) => { +const CenteredStory = ({ horizontal, vertical, children }: CenteredStoryProps) => { return (
= ({ +const EmptyListCTA = ({ title, buttonIcon, buttonLink, @@ -41,7 +41,7 @@ const EmptyListCTA: React.FunctionComponent = ({ proTipTarget, infoBox, infoBoxTitle, -}) => { +}: Props) => { const footer = () => { return ( <> diff --git a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx index 77836dc1b0e..86e48b6a173 100644 --- a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx @@ -1,6 +1,6 @@ // Libraries import { css } from '@emotion/css'; -import React, { FunctionComponent, MouseEvent } from 'react'; +import React, { MouseEvent } from 'react'; // Components import { GrafanaTheme2 } from '@grafana/data'; @@ -16,7 +16,7 @@ interface Props { iconSize?: IconSize; } -export const DashNavButton: FunctionComponent = ({ icon, iconType, iconSize, tooltip, onClick, children }) => { +export const DashNavButton = ({ icon, iconType, iconSize, tooltip, onClick, children }: Props) => { const styles = useStyles2(getStyles); return ( diff --git a/public/app/features/dashboard/components/SubMenu/Annotations.tsx b/public/app/features/dashboard/components/SubMenu/Annotations.tsx index d123df764b2..9ec109780e3 100644 --- a/public/app/features/dashboard/components/SubMenu/Annotations.tsx +++ b/public/app/features/dashboard/components/SubMenu/Annotations.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { AnnotationQuery, DataQuery, EventBus } from '@grafana/data'; @@ -10,7 +10,7 @@ interface Props { onAnnotationChanged: (annotation: AnnotationQuery) => void; } -export const Annotations: FunctionComponent = ({ annotations, onAnnotationChanged, events }) => { +export const Annotations = ({ annotations, onAnnotationChanged, events }: Props) => { const [visibleAnnotations, setVisibleAnnotations] = useState([]); useEffect(() => { setVisibleAnnotations(annotations.filter((annotation) => annotation.hide !== true)); diff --git a/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx b/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx index ee506e68d88..5ddf27df919 100644 --- a/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx +++ b/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { selectors } from '@grafana/e2e-selectors'; @@ -10,7 +10,7 @@ interface Props { readOnly?: boolean; } -export const SubMenuItems: FunctionComponent = ({ variables, readOnly }) => { +export const SubMenuItems = ({ variables, readOnly }: Props) => { const [visibleVariables, setVisibleVariables] = useState([]); useEffect(() => { diff --git a/public/app/features/explore/ErrorContainer.tsx b/public/app/features/explore/ErrorContainer.tsx index 9f6d6a4a320..c93b044b797 100644 --- a/public/app/features/explore/ErrorContainer.tsx +++ b/public/app/features/explore/ErrorContainer.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { DataQueryError } from '@grafana/data'; import { Alert } from '@grafana/ui'; @@ -8,7 +8,7 @@ export interface ErrorContainerProps { queryError?: DataQueryError; } -export const ErrorContainer: FunctionComponent = (props) => { +export const ErrorContainer = (props: ErrorContainerProps) => { const { queryError } = props; const showError = queryError ? true : false; const duration = showError ? 100 : 10; diff --git a/public/app/features/logs/components/LogLabelStatsRow.tsx b/public/app/features/logs/components/LogLabelStatsRow.tsx index 2960c807658..ffeca801d52 100644 --- a/public/app/features/logs/components/LogLabelStatsRow.tsx +++ b/public/app/features/logs/components/LogLabelStatsRow.tsx @@ -1,5 +1,5 @@ import { css, cx } from '@emotion/css'; -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2 } from '@grafana/ui'; @@ -57,7 +57,7 @@ export interface Props { value?: string; } -export const LogLabelStatsRow: FunctionComponent = ({ active, count, proportion, value }) => { +export const LogLabelStatsRow = ({ active, count, proportion, value }: Props) => { const style = useStyles2(getStyles); const percent = `${Math.round(proportion * 100)}%`; const barStyle = { width: percent }; diff --git a/public/app/features/logs/components/LogLabels.tsx b/public/app/features/logs/components/LogLabels.tsx index a8eaf446b5b..d80ae9e41cb 100644 --- a/public/app/features/logs/components/LogLabels.tsx +++ b/public/app/features/logs/components/LogLabels.tsx @@ -1,5 +1,5 @@ import { css, cx } from '@emotion/css'; -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { GrafanaTheme2, Labels } from '@grafana/data'; import { useStyles2 } from '@grafana/ui'; @@ -11,7 +11,7 @@ interface Props { labels: Labels; } -export const LogLabels: FunctionComponent = ({ labels }) => { +export const LogLabels = ({ labels }: Props) => { const styles = useStyles2(getStyles); const displayLabels = Object.keys(labels).filter((label) => !label.startsWith('_') && !HIDDEN_LABELS.includes(label)); diff --git a/public/app/features/logs/components/LogRowContext.tsx b/public/app/features/logs/components/LogRowContext.tsx index 33d28b1b596..bc68b82b614 100644 --- a/public/app/features/logs/components/LogRowContext.tsx +++ b/public/app/features/logs/components/LogRowContext.tsx @@ -176,7 +176,7 @@ interface LogRowContextGroupProps extends LogRowContextGroupHeaderProps { error?: string; } -const LogRowContextGroupHeader: React.FunctionComponent = ({ +const LogRowContextGroupHeader = ({ row, rows, onLoadMoreContext, @@ -186,7 +186,7 @@ const LogRowContextGroupHeader: React.FunctionComponent { +}: LogRowContextGroupHeaderProps) => { const [height, setHeight] = useState(0); const datasourceUiRef = React.createRef(); const theme = useTheme2(); @@ -259,7 +259,7 @@ const LogRowContextGroupHeader: React.FunctionComponent = ({ +export const LogRowContextGroup = ({ row, rows, error, @@ -272,7 +272,7 @@ export const LogRowContextGroup: React.FunctionComponent { +}: LogRowContextGroupProps) => { const [height, setHeight] = useState(0); const theme = useTheme2(); const { commonStyles, logs, bottomContext, afterContext } = getLogRowContextStyles(theme, undefined, height); @@ -373,7 +373,7 @@ export const LogRowContextGroup: React.FunctionComponent = ({ +export const LogRowContext = ({ row, context, errors, @@ -384,7 +384,7 @@ export const LogRowContext: React.FunctionComponent = ({ wrapLogMessage, logsSortOrder, getLogRowContextUi, -}) => { +}: LogRowContextProps) => { useEffect(() => { const handleEscKeyDown = (e: KeyboardEvent): void => { if (e.key === 'Escape' || e.key === 'Esc') { diff --git a/public/app/features/logs/components/LogRowContextProvider.tsx b/public/app/features/logs/components/LogRowContextProvider.tsx index 15cdb025201..1f0bf7ee70f 100644 --- a/public/app/features/logs/components/LogRowContextProvider.tsx +++ b/public/app/features/logs/components/LogRowContextProvider.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import useAsync from 'react-use/lib/useAsync'; import { @@ -137,12 +137,7 @@ export const getRowContexts = async ( }; }; -export const LogRowContextProvider: React.FunctionComponent = ({ - getRowContext, - row, - children, - logsSortOrder, -}) => { +export const LogRowContextProvider = ({ getRowContext, row, children, logsSortOrder }: LogRowContextProviderProps) => { // React Hook that creates a number state value called limit to component state and a setter function called setLimit // The initial value for limit is 10 // Used for the number of rows to retrieve from backend from a specific point in time diff --git a/public/app/features/variables/editor/SelectionOptionsEditor.tsx b/public/app/features/variables/editor/SelectionOptionsEditor.tsx index 3c301cef555..06cf1525b71 100644 --- a/public/app/features/variables/editor/SelectionOptionsEditor.tsx +++ b/public/app/features/variables/editor/SelectionOptionsEditor.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, FormEvent, FunctionComponent, useCallback } from 'react'; +import React, { ChangeEvent, FormEvent, useCallback } from 'react'; import { selectors } from '@grafana/e2e-selectors'; import { VerticalGroup } from '@grafana/ui'; @@ -16,11 +16,11 @@ export interface SelectionOptionsEditorProps void; } -export const SelectionOptionsEditor: FunctionComponent = ({ +export const SelectionOptionsEditor = ({ onMultiChanged: onMultiChangedProps, onPropChange, variable, -}) => { +}: SelectionOptionsEditorProps) => { const onMultiChanged = useCallback( (event: ChangeEvent) => { onMultiChangedProps(toKeyedVariableIdentifier(variable), event.target.checked); diff --git a/public/app/features/variables/editor/VariableValuesPreview.tsx b/public/app/features/variables/editor/VariableValuesPreview.tsx index d10f2ca6851..2c04e68198d 100644 --- a/public/app/features/variables/editor/VariableValuesPreview.tsx +++ b/public/app/features/variables/editor/VariableValuesPreview.tsx @@ -11,9 +11,7 @@ export interface VariableValuesPreviewProps { variable: VariableWithOptions; } -export const VariableValuesPreview: React.FunctionComponent = ({ - variable: { options }, -}) => { +export const VariableValuesPreview = ({ variable: { options } }: VariableValuesPreviewProps) => { const [previewLimit, setPreviewLimit] = useState(20); const [previewOptions, setPreviewOptions] = useState([]); const showMoreOptions = useCallback( diff --git a/public/app/features/variables/pickers/PickerRenderer.tsx b/public/app/features/variables/pickers/PickerRenderer.tsx index d02150ff04d..395a63c7c5a 100644 --- a/public/app/features/variables/pickers/PickerRenderer.tsx +++ b/public/app/features/variables/pickers/PickerRenderer.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, PropsWithChildren, ReactElement, useMemo } from 'react'; +import React, { PropsWithChildren, ReactElement, useMemo } from 'react'; import { selectors } from '@grafana/e2e-selectors'; import { Tooltip } from '@grafana/ui'; @@ -11,7 +11,7 @@ interface Props { readOnly?: boolean; } -export const PickerRenderer: FunctionComponent = (props) => { +export const PickerRenderer = (props: Props) => { const PickerToRender = useMemo(() => variableAdapters.get(props.variable.type).picker, [props.variable]); if (!props.variable) { diff --git a/public/app/plugins/datasource/azuremonitor/components/AzureCredentialsForm.tsx b/public/app/plugins/datasource/azuremonitor/components/AzureCredentialsForm.tsx index 48b652fec9e..434e4bbaf20 100644 --- a/public/app/plugins/datasource/azuremonitor/components/AzureCredentialsForm.tsx +++ b/public/app/plugins/datasource/azuremonitor/components/AzureCredentialsForm.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, FunctionComponent } from 'react'; +import React, { ChangeEvent } from 'react'; import { SelectableValue } from '@grafana/data'; import { LegacyForms, Button, Select, InlineField } from '@grafana/ui'; @@ -30,7 +30,7 @@ const authTypeOptions: Array> = [ const LABEL_WIDTH = 18; -export const AzureCredentialsForm: FunctionComponent = (props: Props) => { +export const AzureCredentialsForm = (props: Props) => { const { credentials, azureCloudOptions, onCredentialsChange, disabled, managedIdentityEnabled } = props; const onAuthTypeChange = (selected: SelectableValue) => { diff --git a/public/app/plugins/datasource/azuremonitor/components/DefaultSubscription.tsx b/public/app/plugins/datasource/azuremonitor/components/DefaultSubscription.tsx index 21dbb7be1dc..f354bae4e7f 100644 --- a/public/app/plugins/datasource/azuremonitor/components/DefaultSubscription.tsx +++ b/public/app/plugins/datasource/azuremonitor/components/DefaultSubscription.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useEffect, useReducer } from 'react'; +import React, { useEffect, useReducer } from 'react'; import { SelectableValue } from '@grafana/data'; import { InlineField, Select, Button } from '@grafana/ui'; @@ -19,7 +19,7 @@ export interface Props { disabled?: boolean; } -export const DefaultSubscription: FunctionComponent = (props: Props) => { +export const DefaultSubscription = (props: Props) => { const { credentials, disabled, diff --git a/public/app/plugins/datasource/azuremonitor/components/MonitorConfig.tsx b/public/app/plugins/datasource/azuremonitor/components/MonitorConfig.tsx index 0ad6e73a59c..4be1881085f 100644 --- a/public/app/plugins/datasource/azuremonitor/components/MonitorConfig.tsx +++ b/public/app/plugins/datasource/azuremonitor/components/MonitorConfig.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useMemo, useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { SelectableValue } from '@grafana/data'; import { config } from '@grafana/runtime'; @@ -21,7 +21,7 @@ export interface Props { getSubscriptions: () => Promise>>; } -export const MonitorConfig: FunctionComponent = (props: Props) => { +export const MonitorConfig = (props: Props) => { const { updateOptions, getSubscriptions, options } = props; const [subscriptions, setSubscriptions] = useState>>([]); const credentials = useMemo(() => getCredentials(props.options), [props.options]); diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AliasBy.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AliasBy.tsx index a12d50abf3b..f369f8bdfb3 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/AliasBy.tsx +++ b/public/app/plugins/datasource/cloud-monitoring/components/AliasBy.tsx @@ -1,5 +1,5 @@ import { debounce } from 'lodash'; -import React, { FunctionComponent, useState } from 'react'; +import React, { useState } from 'react'; import { EditorField } from '@grafana/experimental'; import { Input } from '@grafana/ui'; @@ -10,7 +10,7 @@ export interface Props { value?: string; } -export const AliasBy: FunctionComponent = ({ refId, value = '', onChange }) => { +export const AliasBy = ({ refId, value = '', onChange }: Props) => { const [alias, setAlias] = useState(value ?? ''); const propagateOnChange = debounce(onChange, 1000); diff --git a/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx b/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx index ff24f498bc2..754fb5cb99a 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx +++ b/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { SelectableValue } from '@grafana/data'; import { EditorField, EditorRow } from '@grafana/experimental'; @@ -15,7 +15,7 @@ export interface Props { graphPeriod?: string; } -export const GraphPeriod: FunctionComponent = ({ refId, onChange, graphPeriod, variableOptionGroup }) => { +export const GraphPeriod = ({ refId, onChange, graphPeriod, variableOptionGroup }: Props) => { return ( = ({ +export const GroupBy = ({ refId, labels: groupBys = [], query, onChange, variableOptionGroup, metricDescriptor, -}) => { +}: Props) => { const options = useMemo( () => [variableOptionGroup, ...labelsToGroupedOptions([...groupBys, ...SYSTEM_LABELS])], [groupBys, variableOptionGroup] diff --git a/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx b/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx index c2fb2664f65..414f29cb62b 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx +++ b/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useMemo } from 'react'; +import React, { useMemo } from 'react'; import { SelectableValue, toOption } from '@grafana/data'; import { AccessoryButton, EditorField, EditorList, EditorRow } from '@grafana/experimental'; @@ -32,12 +32,7 @@ const operators = ['=', '!=', '=~', '!=~'].map(toOption); // For example the 'metric.type' is set with the metric name selector. const protectedFilterKeys = ['metric.type']; -export const LabelFilter: FunctionComponent = ({ - labels = {}, - filters: filterArray, - onChange: _onChange, - variableOptionGroup, -}) => { +export const LabelFilter = ({ labels = {}, filters: filterArray, onChange: _onChange, variableOptionGroup }: Props) => { const rawFilters: Filter[] = stringArrayToFilters(filterArray); const filters = rawFilters.filter(({ key }) => !protectedFilterKeys.includes(key)); const protectedFilters = rawFilters.filter(({ key }) => protectedFilterKeys.includes(key)); diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.tsx index d38d5dca93c..81a3287c453 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.tsx +++ b/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useMemo } from 'react'; +import React, { useMemo } from 'react'; import { SelectableValue } from '@grafana/data'; import { EditorField } from '@grafana/experimental'; @@ -15,7 +15,7 @@ export interface Props { query: TimeSeriesList; } -export const Preprocessor: FunctionComponent = ({ query, metricDescriptor, onChange }) => { +export const Preprocessor = ({ query, metricDescriptor, onChange }: Props) => { const options = useOptions(metricDescriptor); return ( diff --git a/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx b/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx index ed814a6d99a..4c52712cfe8 100644 --- a/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx @@ -1,5 +1,5 @@ import { css, cx } from '@emotion/css'; -import React, { FunctionComponent, useMemo } from 'react'; +import React, { useMemo } from 'react'; import { useAsyncFn } from 'react-use'; import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data'; @@ -32,7 +32,7 @@ const excludeCurrentKey = (dimensions: Dimensions, currentKey: string | undefine return acc; }, {}); -export const FilterItem: FunctionComponent = ({ +export const FilterItem = ({ filter, metricStat: { region, namespace, metricName, dimensions, accountId }, datasource, @@ -40,7 +40,7 @@ export const FilterItem: FunctionComponent = ({ disableExpressions, onChange, onDelete, -}) => { +}: Props) => { const dimensionsExcludingCurrentKey = useMemo( () => excludeCurrentKey(dimensions ?? {}, filter.key), [dimensions, filter] diff --git a/public/app/plugins/datasource/cloudwatch/components/Forms.tsx b/public/app/plugins/datasource/cloudwatch/components/Forms.tsx index 6afcbf38960..7d5dffb63bb 100644 --- a/public/app/plugins/datasource/cloudwatch/components/Forms.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/Forms.tsx @@ -1,4 +1,4 @@ -import React, { InputHTMLAttributes, FunctionComponent } from 'react'; +import React, { InputHTMLAttributes } from 'react'; import { InlineFormLabel } from '@grafana/ui'; @@ -8,7 +8,7 @@ export interface Props extends InputHTMLAttributes { children?: React.ReactNode; } -export const QueryField: FunctionComponent> = ({ label, tooltip, children }) => ( +export const QueryField = ({ label, tooltip, children }: Partial) => ( <> {label} @@ -17,7 +17,7 @@ export const QueryField: FunctionComponent> = ({ label, tooltip, ); -export const QueryInlineField: FunctionComponent = ({ ...props }) => { +export const QueryInlineField = ({ ...props }: Props) => { return (
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/Alias.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/Alias.tsx index 0dbb2f83d89..ba9d961352d 100644 --- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/Alias.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/Alias.tsx @@ -1,5 +1,5 @@ import { debounce } from 'lodash'; -import React, { FunctionComponent, useState } from 'react'; +import React, { useState } from 'react'; import { IconButton, Input, Tooltip } from '@grafana/ui'; @@ -9,7 +9,7 @@ export interface Props { id?: string; } -export const Alias: FunctionComponent = ({ value = '', onChange, id }) => { +export const Alias = ({ value = '', onChange, id }: Props) => { const [alias, setAlias] = useState(value); const propagateOnChange = debounce(onChange, 1500); diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLCodeEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLCodeEditor.tsx index 53b131bede4..e33cd23de6d 100644 --- a/public/app/plugins/datasource/cloudwatch/components/SQLCodeEditor.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/SQLCodeEditor.tsx @@ -1,5 +1,5 @@ import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api'; -import React, { FunctionComponent, useCallback, useEffect } from 'react'; +import React, { useCallback, useEffect } from 'react'; import { CodeEditor, Monaco } from '@grafana/ui'; @@ -15,7 +15,7 @@ export interface Props { datasource: CloudWatchDatasource; } -export const SQLCodeEditor: FunctionComponent = ({ region, sql, onChange, datasource }) => { +export const SQLCodeEditor = ({ region, sql, onChange, datasource }: Props) => { useEffect(() => { datasource.sqlCompletionItemProvider.setRegion(region); }, [region, datasource]); diff --git a/public/app/plugins/datasource/cloudwatch/components/ThrottlingErrorMessage.tsx b/public/app/plugins/datasource/cloudwatch/components/ThrottlingErrorMessage.tsx index 0e65aeb3770..2dcdba51765 100644 --- a/public/app/plugins/datasource/cloudwatch/components/ThrottlingErrorMessage.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/ThrottlingErrorMessage.tsx @@ -1,10 +1,10 @@ -import React, { FunctionComponent } from 'react'; +import React from 'react'; export interface Props { region: string; } -export const ThrottlingErrorMessage: FunctionComponent = ({ region }) => ( +export const ThrottlingErrorMessage = ({ region }: Props) => (

Please visit the  = ({ filter, onChange, onDelete, keyPlaceholder }) => { +export const MultiFilterItem = ({ filter, onChange, onDelete, keyPlaceholder }: Props) => { const [localKey, setLocalKey] = useState(filter.key || ''); const [localValue, setLocalValue] = useState(filter.value?.join(', ') || ''); const theme = useTheme2(); diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx index 175bdaf7f74..3c5bdba15d1 100644 --- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx +++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { SelectableValue } from '@grafana/data'; import { AsyncMultiSelect, InlineField, SegmentAsync, Select } from '@grafana/ui'; @@ -16,7 +16,7 @@ interface Props { const toMultiSelectValue = (value: string): SelectableValue => ({ value, label: value }); -export const TopMetricsSettingsEditor: FunctionComponent = ({ metric }) => { +export const TopMetricsSettingsEditor = ({ metric }: Props) => { const dispatch = useDispatch(); const getOrderByOptions = useFields(['number', 'date']); const getMetricsOptions = useFields(metric.type); diff --git a/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx b/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx index 47c7ae7c5c8..b7746369dab 100644 --- a/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx +++ b/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, FormEvent, useMemo, useState } from 'react'; +import React, { FormEvent, useMemo, useState } from 'react'; import { config } from '@grafana/runtime'; import { InlineField, InlineFieldRow, InlineSwitch, Input } from '@grafana/ui'; @@ -8,7 +8,7 @@ import { KnownAzureClouds, AzureCredentials } from './AzureCredentials'; import { getCredentials, updateCredentials } from './AzureCredentialsConfig'; import { AzureCredentialsForm } from './AzureCredentialsForm'; -export const AzureAuthSettings: FunctionComponent = (props: HttpSettingsBaseProps) => { +export const AzureAuthSettings = (props: HttpSettingsBaseProps) => { const { dataSourceConfig, onChange } = props; const [overrideAudienceAllowed] = useState( diff --git a/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx b/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx index 5bf492f90ca..daa1fb3cf31 100644 --- a/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx +++ b/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, FunctionComponent, useEffect, useReducer, useState } from 'react'; +import React, { ChangeEvent, useEffect, useReducer, useState } from 'react'; import { SelectableValue } from '@grafana/data'; import { InlineFormLabel, Button } from '@grafana/ui/src/components'; @@ -27,7 +27,7 @@ const authTypeOptions: Array> = [ }, ]; -export const AzureCredentialsForm: FunctionComponent = (props: Props) => { +export const AzureCredentialsForm = (props: Props) => { const { credentials, azureCloudOptions, onCredentialsChange, getSubscriptions, disabled } = props; const hasRequiredFields = isCredentialsComplete(credentials); diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx index b41084cdc37..bc3f795acb6 100644 --- a/public/app/plugins/panel/barchart/BarChartPanel.tsx +++ b/public/app/plugins/panel/barchart/BarChartPanel.tsx @@ -68,15 +68,7 @@ const propsToDiff: Array = [ interface Props extends PanelProps {} -export const BarChartPanel: React.FunctionComponent = ({ - data, - options, - fieldConfig, - width, - height, - timeZone, - id, -}) => { +export const BarChartPanel = ({ data, options, fieldConfig, width, height, timeZone, id }: Props) => { const theme = useTheme2(); const { eventBus } = usePanelContext(); diff --git a/public/app/plugins/panel/flamegraph/FlameGraphPanel.tsx b/public/app/plugins/panel/flamegraph/FlameGraphPanel.tsx index f8c30fc550f..f7c289c6e9b 100644 --- a/public/app/plugins/panel/flamegraph/FlameGraphPanel.tsx +++ b/public/app/plugins/panel/flamegraph/FlameGraphPanel.tsx @@ -4,6 +4,6 @@ import { CoreApp, PanelProps } from '@grafana/data'; import FlameGraphContainer from './components/FlameGraphContainer'; -export const FlameGraphPanel: React.FunctionComponent = (props) => { +export const FlameGraphPanel = (props: PanelProps) => { return ; }; diff --git a/public/app/plugins/panel/logs/LogsPanel.tsx b/public/app/plugins/panel/logs/LogsPanel.tsx index 60c8d7af9b2..3aff98323e9 100644 --- a/public/app/plugins/panel/logs/LogsPanel.tsx +++ b/public/app/plugins/panel/logs/LogsPanel.tsx @@ -24,7 +24,7 @@ import { Options } from './types'; interface LogsPanelProps extends PanelProps {} -export const LogsPanel: React.FunctionComponent = ({ +export const LogsPanel = ({ data, timeZone, fieldConfig, @@ -40,7 +40,7 @@ export const LogsPanel: React.FunctionComponent = ({ }, title, id, -}) => { +}: LogsPanelProps) => { const isAscending = sortOrder === LogsSortOrder.Ascending; const style = useStyles2(getStyles(title, isAscending)); const [scrollTop, setScrollTop] = useState(0); diff --git a/public/app/plugins/panel/nodeGraph/NodeGraphPanel.tsx b/public/app/plugins/panel/nodeGraph/NodeGraphPanel.tsx index 19425c96a6f..c1f256dda52 100644 --- a/public/app/plugins/panel/nodeGraph/NodeGraphPanel.tsx +++ b/public/app/plugins/panel/nodeGraph/NodeGraphPanel.tsx @@ -9,12 +9,7 @@ import { NodeGraph } from './NodeGraph'; import { NodeGraphOptions } from './types'; import { getNodeGraphDataFrames } from './utils'; -export const NodeGraphPanel: React.FunctionComponent> = ({ - width, - height, - data, - options, -}) => { +export const NodeGraphPanel = ({ width, height, data, options }: PanelProps) => { const getLinks = useLinks(data.timeRange); if (!data || !data.series.length) { return ( diff --git a/public/app/plugins/panel/traces/TracesPanel.tsx b/public/app/plugins/panel/traces/TracesPanel.tsx index 35393be714d..95e5a4a5bee 100644 --- a/public/app/plugins/panel/traces/TracesPanel.tsx +++ b/public/app/plugins/panel/traces/TracesPanel.tsx @@ -17,7 +17,7 @@ const styles = { `, }; -export const TracesPanel: React.FunctionComponent = ({ data }) => { +export const TracesPanel = ({ data }: PanelProps) => { const topOfViewRef = createRef(); const traceProp = useMemo(() => transformDataFrames(data.series[0]), [data.series]); const { search, setSearch, spanFindMatches } = useSearch(traceProp?.spans);