Chore: Avoid explicit React.FC<Props> when possible (round 2) (#64749)

public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx

@@ -34,9 +34,7 @@ const filterMatch: Array<SelectableValue<FilterByValueMatch>> = [
   { label: 'Match any', value: FilterByValueMatch.any },
 ];
 
-export const FilterByValueTransformerEditor: React.FC<TransformerUIProps<FilterByValueTransformerOptions>> = (
-  props
-) => {
+export const FilterByValueTransformerEditor = (props: TransformerUIProps<FilterByValueTransformerOptions>) => {
   const { input, options, onChange } = props;
   const styles = getEditorStyles();
   const fieldsInfo = useFieldsInfo(input);

public/app/features/transformers/FilterByValueTransformer/ValueMatchers/NoopMatcherEditor.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
-
 import { ValueMatcherID } from '@grafana/data';
 
-import { ValueMatcherUIProps, ValueMatcherUIRegistryItem } from './types';
+import { ValueMatcherUIRegistryItem } from './types';
 
-export const NoopMatcherEditor: React.FC<ValueMatcherUIProps<any>> = () => {
+export const NoopMatcherEditor = () => {
   return null;
 };
 

public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx

@@ -23,7 +23,7 @@ const supplier = (
   addHeatmapCalculationOptions('', builder, options);
 };
 
-export const HeatmapTransformerEditor: React.FC<TransformerUIProps<HeatmapTransformerOptions>> = (props) => {
+export const HeatmapTransformerEditor = (props: TransformerUIProps<HeatmapTransformerOptions>) => {
   useEffect(() => {
     if (!props.options.xBuckets?.mode) {
       const opts = getDefaultOptions(supplier);

public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx

@@ -25,11 +25,7 @@ const logModeOptions: Array<SelectableValue<HeatmapCalculationMode>> = [
   },
 ];
 
-export const AxisEditor: React.FC<StandardEditorProps<HeatmapCalculationBucketConfig, any>> = ({
-  value,
-  onChange,
-  item,
-}) => {
+export const AxisEditor = ({ value, onChange, item }: StandardEditorProps<HeatmapCalculationBucketConfig>) => {
   return (
     <HorizontalGroup>
       <RadioButtonGroup

public/app/features/transformers/editors/GroupByTransformerEditor.tsx

@@ -24,11 +24,11 @@ interface FieldProps {
   onConfigChange: (config: GroupByFieldOptions) => void;
 }
 
-export const GroupByTransformerEditor: React.FC<TransformerUIProps<GroupByTransformerOptions>> = ({
+export const GroupByTransformerEditor = ({
   input,
   options,
   onChange,
-}) => {
+}: TransformerUIProps<GroupByTransformerOptions>) => {
   const fieldNames = useAllFieldNamesFromDataFrames(input);
 
   const onConfigChange = useCallback(
@@ -65,7 +65,7 @@ const options = [
   { label: 'Calculate', value: GroupByOperationID.aggregate },
 ];
 
-export const GroupByFieldConfiguration: React.FC<FieldProps> = ({ fieldName, config, onConfigChange }) => {
+export const GroupByFieldConfiguration = ({ fieldName, config, onConfigChange }: FieldProps) => {
   const styles = getStyling();
 
   const onChange = useCallback(

public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx

@@ -13,11 +13,11 @@ import { InlineField, InlineFieldRow, Select } from '@grafana/ui';
 
 import { useAllFieldNamesFromDataFrames } from '../utils';
 
-export const GroupingToMatrixTransformerEditor: React.FC<TransformerUIProps<GroupingToMatrixTransformerOptions>> = ({
+export const GroupingToMatrixTransformerEditor = ({
   input,
   options,
   onChange,
-}) => {
+}: TransformerUIProps<GroupingToMatrixTransformerOptions>) => {
   const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item }));
 
   const onSelectColumn = useCallback(

public/app/features/transformers/editors/HistogramTransformerEditor.tsx

@@ -8,11 +8,11 @@ import {
 import { InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
 import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
 
-export const HistogramTransformerEditor: React.FC<TransformerUIProps<HistogramTransformerOptions>> = ({
+export const HistogramTransformerEditor = ({
   input,
   options,
   onChange,
-}) => {
+}: TransformerUIProps<HistogramTransformerOptions>) => {
   const labelWidth = 18;
 
   const onBucketSizeChanged = useCallback(

public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx

@@ -19,11 +19,11 @@ const modes: Array<SelectableValue<LabelsToFieldsMode>> = [
   { value: LabelsToFieldsMode.Rows, label: 'Rows' },
 ];
 
-export const LabelsAsFieldsTransformerEditor: React.FC<TransformerUIProps<LabelsToFieldsOptions>> = ({
+export const LabelsAsFieldsTransformerEditor = ({
   input,
   options,
   onChange,
-}) => {
+}: TransformerUIProps<LabelsToFieldsOptions>) => {
   const labelWidth = 20;
 
   const { labelNames, selected } = useMemo(() => {

public/app/features/transformers/editors/LimitTransformerEditor.tsx

@@ -4,10 +4,7 @@ import { DataTransformerID, standardTransformers, TransformerRegistryItem, Trans
 import { LimitTransformerOptions } from '@grafana/data/src/transformations/transformers/limit';
 import { InlineField, InlineFieldRow, Input } from '@grafana/ui';
 
-export const LimitTransformerEditor: React.FC<TransformerUIProps<LimitTransformerOptions>> = ({
-  options,
-  onChange,
-}) => {
+export const LimitTransformerEditor = ({ options, onChange }: TransformerUIProps<LimitTransformerOptions>) => {
   const onSetLimit = useCallback(
     (value: FormEvent<HTMLInputElement>) => {
       onChange({

public/app/features/transformers/editors/MergeTransformerEditor.tsx

@@ -4,11 +4,7 @@ import { DataTransformerID, standardTransformers, TransformerRegistryItem, Trans
 import { MergeTransformerOptions } from '@grafana/data/src/transformations/transformers/merge';
 import { FieldValidationMessage } from '@grafana/ui';
 
-export const MergeTransformerEditor: React.FC<TransformerUIProps<MergeTransformerOptions>> = ({
-  input,
-  options,
-  onChange,
-}) => {
+export const MergeTransformerEditor = ({ input, options, onChange }: TransformerUIProps<MergeTransformerOptions>) => {
   if (input.length <= 1) {
     // Show warning that merge is useless only apply on a single frame
     return <FieldValidationMessage>Merge has no effect when applied on a single frame.</FieldValidationMessage>;

public/app/features/transformers/editors/ReduceTransformerEditor.tsx

@@ -13,10 +13,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { LegacyForms, Select, StatsPicker } from '@grafana/ui';
 
 // TODO:  Minimal implementation, needs some <3
-export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransformerOptions>> = ({
-  options,
-  onChange,
-}) => {
+export const ReduceTransformerEditor = ({ options, onChange }: TransformerUIProps<ReduceTransformerOptions>) => {
   const modes: Array<SelectableValue<ReduceTransformerMode>> = [
     {
       label: 'Series to rows',

public/app/features/transformers/editors/SeriesToRowsTransformerEditor.tsx

@@ -1,13 +1,11 @@
-import React from 'react';
-
 import { DataTransformerID, standardTransformers, TransformerRegistryItem, TransformerUIProps } from '@grafana/data';
 import { SeriesToRowsTransformerOptions } from '@grafana/data/src/transformations/transformers/seriesToRows';
 
-export const SeriesToRowsTransformerEditor: React.FC<TransformerUIProps<SeriesToRowsTransformerOptions>> = ({
+export const SeriesToRowsTransformerEditor = ({
   input,
   options,
   onChange,
-}) => {
+}: TransformerUIProps<SeriesToRowsTransformerOptions>) => {
   return null;
 };
 

public/app/features/transformers/editors/SortByTransformerEditor.tsx

@@ -6,11 +6,7 @@ import { InlineField, InlineSwitch, InlineFieldRow, Select } from '@grafana/ui';
 
 import { useAllFieldNamesFromDataFrames } from '../utils';
 
-export const SortByTransformerEditor: React.FC<TransformerUIProps<SortByTransformerOptions>> = ({
-  input,
-  options,
-  onChange,
-}) => {
+export const SortByTransformerEditor = ({ input, options, onChange }: TransformerUIProps<SortByTransformerOptions>) => {
   const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item }));
 
   // Only supports single sort for now

public/app/features/transformers/extractFields/ExtractFieldsTransformerEditor.tsx

@@ -26,11 +26,11 @@ const fieldNamePickerSettings: StandardEditorsRegistryItem<string, FieldNamePick
   editor: () => null,
 };
 
-export const extractFieldsTransformerEditor: React.FC<TransformerUIProps<ExtractFieldsOptions>> = ({
+export const extractFieldsTransformerEditor = ({
   input,
   options,
   onChange,
-}) => {
+}: TransformerUIProps<ExtractFieldsOptions>) => {
   const onPickSourceField = (source?: string) => {
     onChange({
       ...options,

public/app/features/transformers/lookupGazetteer/FieldLookupTransformerEditor.tsx

@@ -31,11 +31,7 @@ const fieldLookupSettings: StandardEditorsRegistryItem<string, GazetteerPathEdit
   settings: {},
 } as any;
 
-export const FieldLookupTransformerEditor: React.FC<TransformerUIProps<FieldLookupOptions>> = ({
-  input,
-  options,
-  onChange,
-}) => {
+export const FieldLookupTransformerEditor = ({ input, options, onChange }: TransformerUIProps<FieldLookupOptions>) => {
   const onPickLookupField = useCallback(
     (value: string | undefined) => {
       onChange({

public/app/features/transformers/spatial/SpatialTransformerEditor.tsx

@@ -113,7 +113,9 @@ const supplier = (
   }
 };
 
-export const SetGeometryTransformerEditor: React.FC<TransformerUIProps<SpatialTransformOptions>> = (props) => {
+type Props = TransformerUIProps<SpatialTransformOptions>;
+
+export const SetGeometryTransformerEditor = (props: Props) => {
   // a new component is created with every change :(
   useEffect(() => {
     if (!props.options.source?.mode) {