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

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

Browse Source
This commit is contained in:
Ryan McKinley 2023-03-15 07:56:09 -07:00 committed by GitHub
parent 1a16636692
commit 4f13e78d11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
147 changed files with 364 additions and 449 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.betterer.results
View File

@ -3955,8 +3955,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "2"]
],
"public/app/features/transformers/FilterByValueTransformer/ValueMatchers/NoopMatcherEditor.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/features/transformers/FilterByValueTransformer/ValueMatchers/RangeMatcherEditor.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@ -3974,9 +3973,6 @@ exports[`better eslint`] = {
"public/app/features/transformers/FilterByValueTransformer/ValueMatchers/valueMatchersUI.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/features/transformers/calculateHeatmap/editor/helper.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],

2
contribute/style-guides/styling.md
View File

@ -48,7 +48,7 @@ interface ComponentAProps {
isActive: boolean;
}
const ComponentA: React.FC<ComponentAProps> = ({ isActive }) => {
const ComponentA = ({ isActive }: ComponentAProps) => {
const theme = useTheme();
const styles = useStyles2(theme);

2
docs/sources/developers/plugins/add-support-for-variables.md
View File

@ -143,7 +143,7 @@ Let's create a custom query editor to allow the user to edit the query model.
onChange: (query: MyVariableQuery, definition: string) => void;
}
export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query }) => {
export const VariableQueryEditor = ({ onChange, query }: VariableQueryProps) => {
const [state, setState] = useState(query);
const saveQuery = () => {

8
docs/sources/developers/plugins/custom-panel-option-editors.md
View File

@ -17,7 +17,7 @@ import React from 'react';
import { Button } from '@grafana/ui';
import { StandardEditorProps } from '@grafana/data';
export const SimpleEditor: React.FC<StandardEditorProps<boolean>> = ({ value, onChange }) => {
export const SimpleEditor = ({ value, onChange }: StandardEditorProps<boolean>) => {
return <Button onClick={() => onChange(!value)}>{value ? 'Disable' : 'Enable'}</Button>;
};
```
@ -51,7 +51,9 @@ interface Settings {
to: number;
}
export const SimpleEditor: React.FC<StandardEditorProps<number, Settings>> = ({ item, value, onChange }) => {
type Props = StandardEditorProps<number, Settings>;
export const SimpleEditor = ({ item, value, onChange }: Props) => {
const options: Array<SelectableValue<number>> = [];
// Default values
@ -97,7 +99,7 @@ The editor context is available through the `context` prop. The data frames retu
**SimpleEditor.tsx**
```ts
export const SimpleEditor: React.FC<StandardEditorProps<string>> = ({ item, value, onChange, context }) => {
export const SimpleEditor = ({ item, value, onChange, context }: StandardEditorProps<string>) => {
const options: SelectableValue<string>[] = [];
if (context.data) {

2
packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
View File

@ -44,7 +44,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
};
});
export const ButtonCascader: React.FC<ButtonCascaderProps> = (props) => {
export const ButtonCascader = (props: ButtonCascaderProps) => {
const { onChange, className, loadData, icon, buttonProps, hideDownIcon, variant, disabled, ...rest } = props;
const theme = useTheme2();
const styles = getStyles(theme);

4
packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
View File

@ -21,8 +21,8 @@ export interface ContextMenuProps {
renderHeader?: () => React.ReactNode;
}
export const ContextMenu: React.FC<ContextMenuProps> = React.memo(
({ x, y, onClose, focusOnOpen = true, renderMenuItems, renderHeader }) => {
export const ContextMenu = React.memo(
({ x, y, onClose, focusOnOpen = true, renderMenuItems, renderHeader }: ContextMenuProps) => {
const menuRef = useRef<HTMLDivElement>(null);
const [positionStyles, setPositionStyles] = useState({});

2
packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx
View File

@ -11,7 +11,7 @@ export interface WithContextMenuProps {
focusOnOpen?: boolean;
}
export const WithContextMenu: React.FC<WithContextMenuProps> = ({ children, renderMenuItems, focusOnOpen = true }) => {
export const WithContextMenu = ({ children, renderMenuItems, focusOnOpen = true }: WithContextMenuProps) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
return (

72
packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
View File

@ -30,48 +30,46 @@ const getStyles = (theme: GrafanaTheme2) => ({
`,
});
export const DataLinkEditor: React.FC<DataLinkEditorProps> = React.memo(
({ index, value, onChange, suggestions, isLast }) => {
const styles = useStyles2(getStyles);
export const DataLinkEditor = React.memo(({ index, value, onChange, suggestions, isLast }: DataLinkEditorProps) => {
const styles = useStyles2(getStyles);
const onUrlChange = (url: string, callback?: () => void) => {
onChange(index, { ...value, url }, callback);
};
const onTitleChange = (event: ChangeEvent<HTMLInputElement>) => {
onChange(index, { ...value, title: event.target.value });
};
const onUrlChange = (url: string, callback?: () => void) => {
onChange(index, { ...value, url }, callback);
};
const onTitleChange = (event: ChangeEvent<HTMLInputElement>) => {
onChange(index, { ...value, title: event.target.value });
};
const onOpenInNewTabChanged = () => {
onChange(index, { ...value, targetBlank: !value.targetBlank });
};
const onOpenInNewTabChanged = () => {
onChange(index, { ...value, targetBlank: !value.targetBlank });
};
return (
<div className={styles.listItem}>
<Field label="Title">
<Input value={value.title} onChange={onTitleChange} placeholder="Show details" />
</Field>
return (
<div className={styles.listItem}>
<Field label="Title">
<Input value={value.title} onChange={onTitleChange} placeholder="Show details" />
</Field>
<Field
label="URL"
invalid={isCompactUrl(value.url)}
error="Data link is an Explore URL in a deprecated format. Please visit the URL to be redirected, and edit this data link to use that URL."
>
<DataLinkInput value={value.url} onChange={onUrlChange} suggestions={suggestions} />
</Field>
<Field
label="URL"
invalid={isCompactUrl(value.url)}
error="Data link is an Explore URL in a deprecated format. Please visit the URL to be redirected, and edit this data link to use that URL."
>
<DataLinkInput value={value.url} onChange={onUrlChange} suggestions={suggestions} />
</Field>
<Field label="Open in new tab">
<Switch value={value.targetBlank || false} onChange={onOpenInNewTabChanged} />
</Field>
<Field label="Open in new tab">
<Switch value={value.targetBlank || false} onChange={onOpenInNewTabChanged} />
</Field>
{isLast && (
<div className={styles.infoText}>
With data links you can reference data variables like series name, labels and values. Type CMD+Space,
CTRL+Space, or $ to open variable suggestions.
</div>
)}
</div>
);
}
);
{isLast && (
<div className={styles.infoText}>
With data links you can reference data variables like series name, labels and values. Type CMD+Space,
CTRL+Space, or $ to open variable suggestions.
</div>
)}
</div>
);
});
DataLinkEditor.displayName = 'DataLinkEditor';

9
packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
View File

@ -72,8 +72,13 @@ const getStyles = (theme: GrafanaTheme2) => ({
// This memoised also because rerendering the slate editor grabs focus which created problem in some cases this
// was used and changes to different state were propagated here.
export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
({ value, onChange, suggestions, placeholder = 'http://your-grafana.com/d/000000010/annotations' }) => {
export const DataLinkInput = memo(
({
value,
onChange,
suggestions,
placeholder = 'http://your-grafana.com/d/000000010/annotations',
}: DataLinkInputProps) => {
const editorRef = useRef<Editor>(null);
const styles = useStyles2(getStyles);
const [showingSuggestions, setShowingSuggestions] = useState(false);

14
packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
View File

@ -53,7 +53,7 @@ const getStyles = (theme: GrafanaTheme2) => {
};
};
export const DataLinkSuggestions: React.FC<DataLinkSuggestionsProps> = ({ suggestions, ...otherProps }) => {
export const DataLinkSuggestions = ({ suggestions, ...otherProps }: DataLinkSuggestionsProps) => {
const ref = useRef(null);
useClickAway(ref, () => {
@ -104,8 +104,16 @@ interface DataLinkSuggestionsListProps extends DataLinkSuggestionsProps {
activeRef?: React.RefObject<HTMLDivElement>;
}
const DataLinkSuggestionsList: React.FC<DataLinkSuggestionsListProps> = React.memo(
({ activeIndex, activeIndexOffset, label, onClose, onSuggestionSelect, suggestions, activeRef: selectedRef }) => {
const DataLinkSuggestionsList = React.memo(
({
activeIndex,
activeIndexOffset,
label,
onClose,
onSuggestionSelect,
suggestions,
activeRef: selectedRef,
}: DataLinkSuggestionsListProps) => {
const styles = useStyles2(getStyles);
return (

7
packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
View File

@ -18,12 +18,7 @@ interface DataLinksInlineEditorProps {
data: DataFrame[];
}
export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({
links,
onChange,
getSuggestions,
data,
}) => {
export const DataLinksInlineEditor = ({ links, onChange, getSuggestions, data }: DataLinksInlineEditorProps) => {
const theme = useTheme2();
const [editIndex, setEditIndex] = useState<number | null>(null);
const [isNew, setIsNew] = useState(false);

2
packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx
View File

@ -6,7 +6,7 @@ import { SecretFormField } from '../SecretFormField/SecretFormField';
import { HttpSettingsProps } from './types';
export const BasicAuthSettings: React.FC<HttpSettingsProps> = ({ dataSourceConfig, onChange }) => {
export const BasicAuthSettings = ({ dataSourceConfig, onChange }: HttpSettingsProps) => {
const password = dataSourceConfig.secureJsonData ? dataSourceConfig.secureJsonData.basicAuthPassword : '';
const onPasswordReset = () => {

2
packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
View File

@ -55,7 +55,7 @@ const getCustomHeaderRowStyles = stylesFactory(() => {
};
});
const CustomHeaderRow: React.FC<CustomHeaderRowProps> = ({ header, onBlur, onChange, onRemove, onReset }) => {
const CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset }: CustomHeaderRowProps) => {
const styles = getCustomHeaderRowStyles();
return (
<div className={styles.layout}>

2
packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
View File

@ -61,7 +61,7 @@ const HttpAccessHelp = () => (
const LABEL_WIDTH = 26;
export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
const {
defaultUrl,
dataSourceConfig,

4
packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx
View File

@ -7,11 +7,11 @@ import { HttpSettingsBaseProps } from './types';
const LABEL_WIDTH = 26;
export const HttpProxySettings: React.FC<HttpSettingsBaseProps> = ({
export const HttpProxySettings = ({
dataSourceConfig,
onChange,
showForwardOAuthIdentityOption = true,
}) => {
}: HttpSettingsBaseProps) => {
return (
<>
<div className="gf-form-inline">

2
packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
View File

@ -10,7 +10,7 @@ import { Tooltip } from '../Tooltip/Tooltip';
import { CertificationKey } from './CertificationKey';
import { HttpSettingsBaseProps } from './types';
export const TLSAuthSettings: React.FC<HttpSettingsBaseProps> = ({ dataSourceConfig, onChange }) => {
export const TLSAuthSettings = ({ dataSourceConfig, onChange }: HttpSettingsBaseProps) => {
const hasTLSCACert = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsCACert;
const hasTLSClientCert = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsClientCert;
const hasTLSClientKey = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsClientKey;

2
packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.test.tsx
View File

@ -7,7 +7,7 @@ import { RelativeTimeRange } from '@grafana/data';
import { RelativeTimeRangePicker } from './RelativeTimeRangePicker';
function setup(initial: RelativeTimeRange = { from: 900, to: 0 }): RenderResult {
const StatefulPicker: React.FC<{}> = () => {
const StatefulPicker = () => {
const [value, setValue] = useState<RelativeTimeRange>(initial);
return <RelativeTimeRangePicker timeRange={value} onChange={setValue} />;
};

4
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
View File

@ -43,7 +43,7 @@ interface FormProps extends Omit<Props, 'history'> {
historyOptions?: TimeOption[];
}
export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = (props) => {
export const TimePickerContentWithScreenSize = (props: PropsWithScreenSize) => {
const {
quickOptions = [],
isReversed,
@ -174,7 +174,7 @@ const NarrowScreenForm = (props: FormProps) => {
);
};
const FullScreenForm: React.FC<FormProps> = (props) => {
const FullScreenForm = (props: FormProps) => {
const { onChange, value, timeZone, fiscalYearStartMonth, isReversed, historyOptions } = props;
const theme = useTheme2();
const styles = getFullScreenStyles(theme, props.hideQuickRanges);

4
packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx
View File

@ -26,7 +26,7 @@ export interface SelectableZone extends SelectableValue<string> {
searchIndex: string;
}
export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, ref) => {
export const WideTimeZoneOption = (props: PropsWithChildren<Props>) => {
const { children, innerProps, innerRef, data, isSelected, isFocused } = props;
const theme = useTheme2();
const styles = getStyles(theme);
@ -66,7 +66,7 @@ export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, re
);
};
export const CompactTimeZoneOption: React.FC<React.PropsWithChildren<Props>> = (props, ref) => {
export const CompactTimeZoneOption = (props: React.PropsWithChildren<Props>) => {
const { children, innerProps, innerRef, data, isSelected, isFocused } = props;
const theme = useTheme2();
const styles = getStyles(theme);

2
packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
View File

@ -15,7 +15,7 @@ export interface FilterPillProps {
icon?: IconName;
}
export const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick, icon = 'check' }) => {
export const FilterPill = ({ label, selected, onClick, icon = 'check' }: FilterPillProps) => {
const styles = useStyles2(getStyles);
const clearButton = useStyles2(clearButtonStyles);
return (

4
packages/grafana-ui/src/components/Forms/Field.tsx
View File

@ -69,7 +69,7 @@ export const getFieldStyles = stylesFactory((theme: GrafanaTheme2) => {
};
});
export const Field: React.FC<FieldProps> = ({
export const Field = ({
label,
description,
horizontal,
@ -83,7 +83,7 @@ export const Field: React.FC<FieldProps> = ({
validationMessageHorizontalOverflow,
htmlFor,
...otherProps
}) => {
}: FieldProps) => {
const theme = useTheme2();
const styles = getFieldStyles(theme);
const inputId = htmlFor ?? getChildId(children);

2
packages/grafana-ui/src/components/Forms/Label.tsx
View File

@ -46,7 +46,7 @@ export const getLabelStyles = stylesFactory((theme: GrafanaTheme2) => {
};
});
export const Label: React.FC<LabelProps> = ({ children, description, className, category, ...labelProps }) => {
export const Label = ({ children, description, className, category, ...labelProps }: LabelProps) => {
const theme = useTheme2();
const styles = getLabelStyles(theme);
const categories = category?.map((c, i) => {

2
packages/grafana-ui/src/components/Forms/Legend.tsx
View File

@ -20,7 +20,7 @@ export const getLegendStyles = (theme: GrafanaTheme2) => {
};
};
export const Legend: React.FC<LabelProps> = ({ children, className, ...legendProps }) => {
export const Legend = ({ children, className, ...legendProps }: LabelProps) => {
const styles = useStyles2(getLegendStyles);
return (

2
packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.story.tsx
View File

@ -115,7 +115,7 @@ DisabledList.args = {
};
export const Dots: Story = () => {
const Wrapper: React.FC<React.PropsWithChildren<{ title: string }>> = ({ title, children }) => (
const Wrapper = ({ title, children }: React.PropsWithChildren<{ title: string }>) => (
<div style={{ marginBottom: 20 }}>
<h5>{title}</h5>
{children}

4
packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx
View File

@ -32,14 +32,14 @@ export type GraphContextMenuProps = ContextMenuProps & {
};
/** @internal */
export const GraphContextMenu: React.FC<GraphContextMenuProps> = ({
export const GraphContextMenu = ({
getContextMenuSource,
timeZone,
itemsGroup,
dimensions,
contextDimensions,
...otherProps
}) => {
}: GraphContextMenuProps) => {
const source = getContextMenuSource();
// Do not render items that do not have label specified

12
packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.tsx
View File

@ -8,12 +8,12 @@ import { getMultiSeriesGraphHoverInfo } from '../utils';
import { GraphTooltipContentProps } from './types';
export const MultiModeGraphTooltip: React.FC<
GraphTooltipContentProps & {
// We expect position to figure out correct values when not hovering over a datapoint
pos: FlotPosition;
}
> = ({ dimensions, activeDimensions, pos, timeZone }) => {
type Props = GraphTooltipContentProps & {
// We expect position to figure out correct values when not hovering over a datapoint
pos: FlotPosition;
};
export const MultiModeGraphTooltip = ({ dimensions, activeDimensions, pos, timeZone }: Props) => {
let activeSeriesIndex: number | null = null;
// when no x-axis provided, skip rendering
if (activeDimensions.xAxis === null) {

6
packages/grafana-ui/src/components/Graph/GraphTooltip/SingleModeGraphTooltip.tsx
View File

@ -11,11 +11,7 @@ import { SeriesTable } from '../../VizTooltip';
import { GraphTooltipContentProps } from './types';
export const SingleModeGraphTooltip: React.FC<GraphTooltipContentProps> = ({
dimensions,
activeDimensions,
timeZone,
}) => {
export const SingleModeGraphTooltip = ({ dimensions, activeDimensions, timeZone }: GraphTooltipContentProps) => {
// not hovering over a point, skip rendering
if (
activeDimensions.yAxis === null ||

2
packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx
View File

@ -47,7 +47,7 @@ interface FeatureBadgeProps {
tooltip?: string;
}
export const FeatureBadge: React.FC<FeatureBadgeProps> = ({ featureState, tooltip }) => {
export const FeatureBadge = ({ featureState, tooltip }: FeatureBadgeProps) => {
const display = getPanelStateBadgeDisplayModel(featureState);
return <Badge text={display.text} color={display.color} icon={display.icon} tooltip={tooltip} />;
};

2
packages/grafana-ui/src/components/Menu/MenuGroup.tsx
View File

@ -25,7 +25,7 @@ export interface MenuGroupProps extends Partial<MenuItemsGroup> {
}
/** @internal */
export const MenuGroup: React.FC<MenuGroupProps> = ({ label, ariaLabel, children }) => {
export const MenuGroup = ({ label, ariaLabel, children }: MenuGroupProps) => {
const styles = useStyles2(getStyles);
const labelID = `group-label-${uniqueId()}`;

4
packages/grafana-ui/src/components/Menu/SubMenu.tsx
View File

@ -28,8 +28,8 @@ export interface SubMenuProps {
}
/** @internal */
export const SubMenu: React.FC<SubMenuProps> = React.memo(
({ items, isOpen, openedWithArrow, setOpenedWithArrow, close, customStyle }) => {
export const SubMenu = React.memo(
({ items, isOpen, openedWithArrow, setOpenedWithArrow, close, customStyle }: SubMenuProps) => {
const styles = useStyles2(getStyles);
const localRef = useRef<HTMLDivElement>(null);
const [handleKeys] = useMenuFocus({

2
packages/grafana-ui/src/components/PanelChrome/ErrorIndicator.tsx
View File

@ -17,7 +17,7 @@ export type ErrorIndicatorProps = {
/**
* @internal
*/
export const ErrorIndicator: React.FC<ErrorIndicatorProps> = ({ error, onClick }) => {
export const ErrorIndicator = ({ error, onClick }: ErrorIndicatorProps) => {
const styles = useStyles2(getStyles);
if (!error) {

2
packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx
View File

@ -18,7 +18,7 @@ export type LoadingIndicatorProps = {
/**
* @internal
*/
export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({ onCancel, loading }) => {
export const LoadingIndicator = ({ onCancel, loading }: LoadingIndicatorProps) => {
const styles = useStyles2(getStyles);
if (!loading) {

2
packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx
View File

@ -14,7 +14,7 @@ export interface PluginSignatureBadgeProps extends HTMLAttributes<HTMLDivElement
/**
* @public
*/
export const PluginSignatureBadge: React.FC<PluginSignatureBadgeProps> = ({ status, ...otherProps }) => {
export const PluginSignatureBadge = ({ status, ...otherProps }: PluginSignatureBadgeProps) => {
const display = getSignatureDisplayModel(status);
return (
<Badge

2
packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
View File

@ -25,7 +25,7 @@ export const useExpandableLabel = (
}
};
const Label: React.FC<LabelProps> = ({ Component, onClick, disabled }) => (
const Label = ({ Component, onClick, disabled }: LabelProps) => (
<button
type="button"
className={buttonStyles}

2
packages/grafana-ui/src/components/Select/DropdownIndicator.tsx
View File

@ -6,7 +6,7 @@ interface DropdownIndicatorProps {
isOpen: boolean;
}
export const DropdownIndicator: React.FC<DropdownIndicatorProps> = ({ isOpen }) => {
export const DropdownIndicator = ({ isOpen }: DropdownIndicatorProps) => {
const icon = isOpen ? 'search' : 'angle-down';
const size = isOpen ? 'sm' : 'md';
return <Icon name={icon} size={size} />;

4
packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx
View File

@ -52,7 +52,7 @@ const getSeriesTableRowStyles = (theme: GrafanaTheme2) => {
/**
* @public
*/
export const SeriesTableRow: React.FC<SeriesTableRowProps> = ({ color, label, value, isActive }) => {
export const SeriesTableRow = ({ color, label, value, isActive }: SeriesTableRowProps) => {
const styles = useStyles2(getSeriesTableRowStyles);
return (
@ -79,7 +79,7 @@ export interface SeriesTableProps {
/**
* @public
*/
export const SeriesTable: React.FC<SeriesTableProps> = ({ timestamp, series }) => {
export const SeriesTable = ({ timestamp, series }: SeriesTableProps) => {
const styles = useStyles2(getSeriesTableRowStyles);
return (

4
packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx
View File

@ -22,14 +22,14 @@ export interface VizTooltipContainerProps extends HTMLAttributes<HTMLDivElement>
/**
* @public
*/
export const VizTooltipContainer: React.FC<VizTooltipContainerProps> = ({
export const VizTooltipContainer = ({
position: { x: positionX, y: positionY },
offset: { x: offsetX, y: offsetY },
children,
allowPointerEvents = false,
className,
...otherProps
}) => {
}: VizTooltipContainerProps) => {
const tooltipRef = useRef<HTMLDivElement>(null);
const [tooltipMeasurement, setTooltipMeasurement] = useState<Dimensions2D>({ width: 0, height: 0 });
const { width, height } = useWindowSize();

4
packages/grafana-ui/src/components/uPlot/PlotLegend.tsx
View File

@ -27,8 +27,8 @@ interface PlotLegendProps extends VizLegendOptions, Omit<VizLayoutLegendProps, '
config: UPlotConfigBuilder;
}
export const PlotLegend: React.FC<PlotLegendProps> = React.memo(
({ data, config, placement, calcs, displayMode, ...vizLayoutLegendProps }) => {
export const PlotLegend = React.memo(
({ data, config, placement, calcs, displayMode, ...vizLayoutLegendProps }: PlotLegendProps) => {
const theme = useTheme2();
const legendItems = config
.getSeries()

4
packages/grafana-ui/src/components/uPlot/plugins/KeyboardPlugin.tsx
View File

@ -1,5 +1,5 @@
import { clamp } from 'lodash';
import React, { useLayoutEffect } from 'react';
import { useLayoutEffect } from 'react';
import uPlot from 'uplot';
import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
@ -170,7 +170,7 @@ const initHook = (u: uPlot) => {
/**
* @alpha
*/
export const KeyboardPlugin: React.FC<KeyboardPluginProps> = ({ config }) => {
export const KeyboardPlugin = ({ config }: KeyboardPluginProps) => {
useLayoutEffect(() => config.addHook('init', initHook), [config]);
return null;

4
packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
View File

@ -40,7 +40,7 @@ const TOOLTIP_OFFSET = 10;
/**
* @alpha
*/
export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
export const TooltipPlugin = ({
mode = TooltipDisplayMode.Single,
sortOrder = SortOrder.None,
sync,
@ -48,7 +48,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
config,
renderTooltip,
...otherProps
}) => {
}: TooltipPluginProps) => {
const plotInstance = useRef<uPlot>();
const theme = useTheme2();
const [focusedSeriesIdx, setFocusedSeriesIdx] = useState<number | null>(null);

4
packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useLayoutEffect, useState } from 'react';
import { useEffect, useLayoutEffect, useState } from 'react';
import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
import { PlotSelection } from '../types';
@ -15,7 +15,7 @@ const MIN_ZOOM_DIST = 5;
/**
* @alpha
*/
export const ZoomPlugin: React.FC<ZoomPluginProps> = ({ onZoom, config }) => {
export const ZoomPlugin = ({ onZoom, config }: ZoomPluginProps) => {
const [selection, setSelection] = useState<PlotSelection | null>(null);
useEffect(() => {

4
packages/grafana-ui/src/options/builder/hideSeries.tsx
View File

@ -6,9 +6,7 @@ import { HideableFieldConfig, HideSeriesConfig } from '@grafana/schema';
import { FilterPill, HorizontalGroup } from '../../index';
const SeriesConfigEditor: React.FC<FieldConfigEditorProps<HideSeriesConfig, {}>> = (props) => {
const { value, onChange } = props;
const SeriesConfigEditor = ({ value, onChange }: FieldConfigEditorProps<HideSeriesConfig, {}>) => {
const onChangeToggle = useCallback(
(prop: keyof HideSeriesConfig) => {
onChange({ ...value, [prop]: !value[prop] });

7
packages/grafana-ui/src/options/builder/stacking.tsx
View File

@ -18,12 +18,7 @@ import {
Tooltip,
} from '../..';
export const StackingEditor: React.FC<FieldOverrideEditorProps<StackingConfig, any>> = ({
value,
context,
onChange,
item,
}) => {
export const StackingEditor = ({ value, context, onChange, item }: FieldOverrideEditorProps<StackingConfig, any>) => {
return (
<HorizontalGroup>
<RadioButtonGroup

2
packages/grafana-ui/src/themes/ThemeContext.test.tsx
View File

@ -34,7 +34,7 @@ describe('useStyles', () => {
});
it('passes in theme and returns style object', (done) => {
const Dummy: React.FC = function () {
const Dummy = function () {
const styles = useStyles2((theme) => {
return {
someStyle: css`

3
packages/grafana-ui/src/utils/storybook/ThemedDocsContainer.tsx
View File

@ -8,9 +8,10 @@ import { GrafanaLight, GrafanaDark } from '../../../.storybook/storybookTheme';
type Props = {
context: DocsContextProps;
children?: React.ReactNode;
};
export const ThemedDocsContainer: React.FC<Props> = ({ children, context }) => {
export const ThemedDocsContainer = ({ children, context }: Props) => {
const dark = useDarkMode();
return (

9
public/app/core/components/OptionsUI/fieldColor.tsx
View File

@ -17,12 +17,9 @@ import { useStyles2, useTheme2, Field, RadioButtonGroup, Select } from '@grafana
import { ColorValueEditor } from './color';
export const FieldColorEditor: React.FC<FieldConfigEditorProps<FieldColor | undefined, FieldColorConfigSettings>> = ({
value,
onChange,
item,
id,
}) => {
type Props = FieldConfigEditorProps<FieldColor | undefined, FieldColorConfigSettings>;
export const FieldColorEditor = ({ value, onChange, item, id }: Props) => {
const theme = useTheme2();
const styles = useStyles2(getStyles);

8
public/app/core/components/OptionsUI/links.tsx
View File

@ -8,11 +8,9 @@ import {
} from '@grafana/data';
import { DataLinksInlineEditor } from '@grafana/ui';
export const DataLinksValueEditor: React.FC<FieldConfigEditorProps<DataLink[], DataLinksFieldConfigSettings>> = ({
value,
onChange,
context,
}) => {
type Props = FieldConfigEditorProps<DataLink[], DataLinksFieldConfigSettings>;
export const DataLinksValueEditor = ({ value, onChange, context }: Props) => {
return (
<DataLinksInlineEditor
links={value}

8
public/app/core/components/OptionsUI/number.tsx
View File

@ -4,11 +4,9 @@ import { FieldConfigEditorProps, NumberFieldConfigSettings } from '@grafana/data
import { NumberInput } from './NumberInput';
export const NumberValueEditor: React.FC<FieldConfigEditorProps<number, NumberFieldConfigSettings>> = ({
value,
onChange,
item,
}) => {
type Props = FieldConfigEditorProps<number, NumberFieldConfigSettings>;
export const NumberValueEditor = ({ value, onChange, item }: Props) => {
const { settings } = item;
const onValueChange = useCallback(

8
public/app/core/components/OptionsUI/slider.tsx
View File

@ -9,11 +9,9 @@ import { getStyles } from '@grafana/ui/src/components/Slider/styles';
import { NumberInput } from './NumberInput';
export const SliderValueEditor: React.FC<FieldConfigEditorProps<number, SliderFieldConfigSettings>> = ({
value,
onChange,
item,
}) => {
type Props = FieldConfigEditorProps<number, SliderFieldConfigSettings>;
export const SliderValueEditor = ({ value, onChange, item }: Props) => {
// Input reference
const inputRef = useRef<HTMLSpanElement>(null);

4
public/app/core/components/OptionsUI/stats.tsx
View File

@ -3,12 +3,12 @@ import React from 'react';
import { FieldConfigEditorProps, StatsPickerConfigSettings } from '@grafana/data';
import { StatsPicker } from '@grafana/ui';
export const StatsPickerEditor: React.FC<FieldConfigEditorProps<string[], StatsPickerConfigSettings>> = ({
export const StatsPickerEditor = ({
value,
onChange,
item,
id,
}) => {
}: FieldConfigEditorProps<string[], StatsPickerConfigSettings>) => {
return (
<StatsPicker
stats={value}

8
public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
View File

@ -13,13 +13,7 @@ export interface QueryOperationActionProps {
active?: boolean;
}
export const QueryOperationAction: React.FC<QueryOperationActionProps> = ({
icon,
active,
disabled,
title,
onClick,
}) => {
export const QueryOperationAction = ({ icon, active, disabled, title, onClick }: QueryOperationActionProps) => {
const styles = useStyles2(getStyles);
return (

2
public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
View File

@ -18,7 +18,7 @@ interface QueryOperationRowHeaderProps {
id: string;
}
export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = ({
export const QueryOperationRowHeader = ({
actionsElement,
disabled,
draggable,

2
public/app/features/commandPalette/KBarResults.tsx
View File

@ -21,7 +21,7 @@ interface KBarResultsProps {
maxHeight?: number;
}
export const KBarResults: React.FC<KBarResultsProps> = (props) => {
export const KBarResults = (props: KBarResultsProps) => {
const activeRef = React.useRef<HTMLElement>(null);
const parentRef = React.useRef(null);

4
public/app/features/connections/tabs/ConnectData/CategoryHeader/CategoryHeader.tsx
View File

@ -16,7 +16,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
`,
});
export const CategoryHeader: React.FC<{ iconName: IconName; label: string }> = ({ iconName, label }) => {
type Props = { iconName: IconName; label: string };
export const CategoryHeader = ({ iconName, label }: Props) => {
const styles = useStyles2(getStyles);
return (
<div className={styles.categoryHeader}>

2
public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
View File

@ -207,7 +207,7 @@ interface AddPanelWidgetHandleProps {
styles: AddPanelStyles;
}
const AddPanelWidgetHandle: React.FC<AddPanelWidgetHandleProps> = ({ children, onBack, onCancel, styles }) => {
const AddPanelWidgetHandle = ({ children, onBack, onCancel, styles }: AddPanelWidgetHandleProps) => {
return (
<div className={cx(styles.headerRow, 'grid-drag-handle')}>
{onBack && (

2
public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx
View File

@ -6,7 +6,7 @@ import { Button, useStyles2 } from '@grafana/ui';
export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {}
export const ListNewButton: React.FC<Props> = ({ children, ...restProps }) => {
export const ListNewButton = ({ children, ...restProps }: Props) => {
const styles = useStyles2(getStyles);
return (
<div className={styles.buttonWrapper}>

2
public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
View File

@ -41,7 +41,7 @@ type LinkSettingsEditProps = {
onGoBack: () => void;
};
export const LinkSettingsEdit: React.FC<LinkSettingsEditProps> = ({ editLinkIdx, dashboard, onGoBack }) => {
export const LinkSettingsEdit = ({ editLinkIdx, dashboard, onGoBack }: LinkSettingsEditProps) => {
const [linkSettings, setLinkSettings] = useState(editLinkIdx !== null ? dashboard.links[editLinkIdx] : newLink);
const onUpdate = (link: DashboardLink) => {

2
public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
View File

@ -13,7 +13,7 @@ type LinkSettingsListProps = {
onEdit: (idx: number) => void;
};
export const LinkSettingsList: React.FC<LinkSettingsListProps> = ({ dashboard, onNew, onEdit }) => {
export const LinkSettingsList = ({ dashboard, onNew, onEdit }: LinkSettingsListProps) => {
const [links, setLinks] = useState(dashboard.links);
const moveLink = (idx: number, direction: number) => {

4
public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
View File

@ -23,7 +23,7 @@ interface DynamicConfigValueEditorProps {
searchQuery: string;
}
export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> = ({
export const DynamicConfigValueEditor = ({
property,
context,
registry,
@ -31,7 +31,7 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
onRemove,
isSystemOverride,
searchQuery,
}) => {
}: DynamicConfigValueEditorProps) => {
const styles = useStyles2(getStyles);
const item = registry?.getIfExists(property.id);

4
public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx
View File

@ -12,7 +12,7 @@ import { VisualizationSelectPane } from './VisualizationSelectPane';
import { OptionPaneRenderProps } from './types';
import { usePanelLatestData } from './usePanelLatestData';
export const OptionsPane: React.FC<OptionPaneRenderProps> = ({
export const OptionsPane = ({
plugin,
panel,
onFieldConfigsChange,
@ -20,7 +20,7 @@ export const OptionsPane: React.FC<OptionPaneRenderProps> = ({
onPanelConfigChange,
dashboard,
instanceState,
}) => {
}: OptionPaneRenderProps) => {
const styles = useStyles2(getStyles);
const isVizPickerOpen = useSelector((state) => state.panelEditor.isVizPickerOpen);
const { data } = usePanelLatestData(panel, { withTransforms: true, withFieldConfig: false }, true);

2
public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
View File

@ -17,7 +17,7 @@ import { OptionSearchEngine } from './state/OptionSearchEngine';
import { getRecentOptions } from './state/getRecentOptions';
import { OptionPaneRenderProps } from './types';
export const OptionsPaneOptions: React.FC<OptionPaneRenderProps> = (props) => {
export const OptionsPaneOptions = (props: OptionPaneRenderProps) => {
const { plugin, dashboard, panel } = props;
const [searchQuery, setSearchQuery] = useState('');
const [listMode, setListMode] = useState(OptionFilter.All);

11
public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx
View File

@ -13,7 +13,7 @@ interface SaveDashboardButtonProps {
size?: ComponentSize;
}
export const SaveDashboardButton: React.FC<SaveDashboardButtonProps> = ({ dashboard, onSaveSuccess, size }) => {
export const SaveDashboardButton = ({ dashboard, onSaveSuccess, size }: SaveDashboardButtonProps) => {
return (
<ModalsController>
{({ showModal, hideModal }) => {
@ -37,12 +37,9 @@ export const SaveDashboardButton: React.FC<SaveDashboardButtonProps> = ({ dashbo
);
};
export const SaveDashboardAsButton: React.FC<SaveDashboardButtonProps & { variant?: ButtonVariant }> = ({
dashboard,
onSaveSuccess,
variant,
size,
}) => {
type Props = SaveDashboardButtonProps & { variant?: ButtonVariant };
export const SaveDashboardAsButton = ({ dashboard, onSaveSuccess, variant, size }: Props) => {
return (
<ModalsController>
{({ showModal, hideModal }) => {

4
public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
View File

@ -19,12 +19,12 @@ interface SaveDashboardErrorProxyProps {
onDismiss: () => void;
}
export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = ({
export const SaveDashboardErrorProxy = ({
dashboard,
dashboardSaveModel,
error,
onDismiss,
}) => {
}: SaveDashboardErrorProxyProps) => {
const { onDashboardSave } = useDashboardSave(dashboard);
useEffect(() => {

7
public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
View File

@ -14,12 +14,7 @@ interface UnsavedChangesModalProps {
onSaveSuccess?: () => void;
}
export const UnsavedChangesModal: React.FC<UnsavedChangesModalProps> = ({
dashboard,
onSaveSuccess,
onDiscard,
onDismiss,
}) => {
export const UnsavedChangesModal = ({ dashboard, onSaveSuccess, onDiscard, onDismiss }: UnsavedChangesModalProps) => {
return (
<Modal
isOpen={true}

8
public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
View File

@ -38,13 +38,7 @@ export interface SaveDashboardAsFormProps extends SaveDashboardFormProps {
isNew?: boolean;
}
export const SaveDashboardAsForm: React.FC<SaveDashboardAsFormProps> = ({
dashboard,
isNew,
onSubmit,
onCancel,
onSuccess,
}) => {
export const SaveDashboardAsForm = ({ dashboard, isNew, onSubmit, onCancel, onSuccess }: SaveDashboardAsFormProps) => {
const defaultValues: SaveDashboardAsFormDTO = {
title: isNew ? dashboard.title : `${dashboard.title} Copy`,
$folder: {

2
public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
View File

@ -7,7 +7,7 @@ import { Button, ClipboardButton, HorizontalGroup, TextArea } from '@grafana/ui'
import { SaveDashboardFormProps } from '../types';
export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard, onCancel }) => {
export const SaveProvisionedDashboardForm = ({ dashboard, onCancel }: SaveDashboardFormProps) => {
const [dashboardJSON, setDashboardJson] = useState(() => {
const clone = dashboard.getSaveModelClone();
delete clone.id;

2
public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
View File

@ -109,7 +109,7 @@ interface LinkElementProps {
children: JSX.Element;
}
const LinkElement: React.FC<LinkElementProps> = (props) => {
const LinkElement = (props: LinkElementProps) => {
const { link, children, ...rest } = props;
return (

4
public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRows.tsx
View File

@ -12,12 +12,12 @@ interface TransformationOperationRowsProps {
onChange: (index: number, config: DataTransformerConfig) => void;
}
export const TransformationOperationRows: React.FC<TransformationOperationRowsProps> = ({
export const TransformationOperationRows = ({
data,
onChange,
onRemove,
configs,
}) => {
}: TransformationOperationRowsProps) => {
return (
<>
{configs.map((t, i) => {

2
public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx
View File

@ -14,7 +14,7 @@ type DiffTitleProps = {
const replaceDiff: Diff = { op: 'replace', originalValue: undefined, path: [''], value: undefined, startLineNumber: 0 };
export const DiffTitle: React.FC<DiffTitleProps> = ({ diff, title }) => {
export const DiffTitle = ({ diff, title }: DiffTitleProps) => {
const styles = useStyles2(getDiffTitleStyles);
return diff ? (

2
public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
View File

@ -11,7 +11,7 @@ type DiffProps = {
diff: Diff;
};
export const DiffValues: React.FC<DiffProps> = ({ diff }) => {
export const DiffValues = ({ diff }: DiffProps) => {
const styles = useStyles2(getStyles);
const hasLeftValue =
!isUndefined(diff.originalValue) && !isArray(diff.originalValue) && !isObject(diff.originalValue);

2
public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
View File

@ -5,7 +5,7 @@ import tinycolor from 'tinycolor2';
import { useTheme2 } from '@grafana/ui';
export const DiffViewer: React.FC<ReactDiffViewerProps> = ({ oldValue, newValue }) => {
export const DiffViewer = ({ oldValue, newValue }: ReactDiffViewerProps) => {
const theme = useTheme2();
const styles = {

2
public/app/features/dashboard/components/VersionHistory/RevertDashboardModal.tsx
View File

@ -8,7 +8,7 @@ export interface RevertDashboardModalProps {
version: number;
}
export const RevertDashboardModal: React.FC<RevertDashboardModalProps> = ({ hideModal, version }) => {
export const RevertDashboardModal = ({ hideModal, version }: RevertDashboardModalProps) => {
// TODO: how should state.error be handled?
const { state, onRestoreDashboard } = useDashboardRestore(version);

4
public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx
View File

@ -10,13 +10,13 @@ type VersionsButtonsType = {
getDiff: () => void;
isLastPage: boolean;
};
export const VersionsHistoryButtons: React.FC<VersionsButtonsType> = ({
export const VersionsHistoryButtons = ({
hasMore,
canCompare,
getVersions,
getDiff,
isLastPage,
}) => (
}: VersionsButtonsType) => (
<Stack>
{hasMore && (
<Button type="button" onClick={() => getVersions(true)} variant="secondary" disabled={isLastPage}>

2
public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx
View File

@ -18,7 +18,7 @@ type DiffViewProps = {
diffData: { lhs: unknown; rhs: unknown };
};
export const VersionHistoryComparison: React.FC<DiffViewProps> = ({ baseInfo, newInfo, diffData, isNewLatest }) => {
export const VersionHistoryComparison = ({ baseInfo, newInfo, diffData, isNewLatest }: DiffViewProps) => {
const diff = jsonDiff(diffData.lhs, diffData.rhs);
const styles = useStyles2(getStyles);

4
public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx
View File

@ -12,12 +12,12 @@ type VersionHistoryHeaderProps = {
isNewLatest?: boolean;
};
export const VersionHistoryHeader: React.FC<VersionHistoryHeaderProps> = ({
export const VersionHistoryHeader = ({
onClick = noop,
baseVersion = 0,
newVersion = 0,
isNewLatest = false,
}) => {
}: VersionHistoryHeaderProps) => {
const styles = useStyles2(getStyles);
return (

2
public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx
View File

@ -10,7 +10,7 @@ import { createDashboardModelFixture } from '../state/__fixtures__/dashboardFixt
import { DashboardGrid, Props } from './DashboardGrid';
jest.mock('app/features/dashboard/dashgrid/LazyLoader', () => {
const LazyLoader: React.FC = ({ children }) => {
const LazyLoader = ({ children }: React.PropsWithChildren<{}>) => {
return <>{children}</>;
};
return { LazyLoader };

4
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx
View File

@ -183,7 +183,7 @@ export function References(props: ReferenceItemProps) {
);
}
const AccordianReferences: React.FC<AccordianReferencesProps> = ({
const AccordianReferences = ({
data,
interactive = true,
isOpen,
@ -191,7 +191,7 @@ const AccordianReferences: React.FC<AccordianReferencesProps> = ({
onItemToggle,
openedItems,
createFocusSpanLink,
}) => {
}: AccordianReferencesProps) => {
const isEmpty = !Array.isArray(data) || !data.length;
let arrow: React.ReactNode | null = null;
let HeaderComponent: 'span' | 'a' = 'span';

9
public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx
View File

@ -17,12 +17,9 @@ export interface LibraryPanelCardProps {
showSecondaryActions?: boolean;
}
export const LibraryPanelCard: React.FC<LibraryPanelCardProps & { children?: JSX.Element | JSX.Element[] }> = ({
libraryPanel,
onClick,
onDelete,
showSecondaryActions,
}) => {
type Props = LibraryPanelCardProps & { children?: JSX.Element | JSX.Element[] };
export const LibraryPanelCard = ({ libraryPanel, onClick, onDelete, showSecondaryActions }: Props) => {
const [showDeletionModal, setShowDeletionModal] = useState(false);
const onDeletePanel = () => {

4
public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
View File

@ -23,7 +23,7 @@ interface LibraryPanelViewProps {
perPage?: number;
}
export const LibraryPanelsView: React.FC<LibraryPanelViewProps> = ({
export const LibraryPanelsView = ({
className,
onClickCard,
searchString,
@ -33,7 +33,7 @@ export const LibraryPanelsView: React.FC<LibraryPanelViewProps> = ({
showSecondaryActions,
currentPanelId: currentPanel,
perPage: propsPerPage = 40,
}) => {
}: LibraryPanelViewProps) => {
const styles = useStyles2(getPanelViewStyles);
const [{ libraryPanels, page, perPage, numberOfPages, loadingState, currentPanelId }, dispatch] = useReducer(
libraryPanelsViewReducer,

9
public/app/features/plugins/sql/components/DatasetSelector.tsx
View File

@ -14,14 +14,7 @@ interface DatasetSelectorProps extends ResourceSelectorProps {
onChange: (v: SelectableValue) => void;
}
export const DatasetSelector: React.FC<DatasetSelectorProps> = ({
db,
value,
onChange,
disabled,
className,
applyDefault,
}) => {
export const DatasetSelector = ({ db, value, onChange, disabled, className, applyDefault }: DatasetSelectorProps) => {
const state = useAsync(async () => {
const datasets = await db.datasets();
return datasets.map(toOption);

2
public/app/features/plugins/sql/components/TableSelector.tsx
View File

@ -15,7 +15,7 @@ interface TableSelectorProps extends ResourceSelectorProps {
forceFetch?: boolean;
}
export const TableSelector: React.FC<TableSelectorProps> = ({ db, query, value, className, onChange, forceFetch }) => {
export const TableSelector = ({ db, query, value, className, onChange, forceFetch }: TableSelectorProps) => {
const state = useAsync(async () => {
if (!query.dataset && !forceFetch) {
return [];

9
public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx
View File

@ -18,14 +18,7 @@ interface VisualEditorProps extends QueryEditorProps {
onValidate: (isValid: boolean) => void;
}
export const VisualEditor: React.FC<VisualEditorProps> = ({
query,
db,
queryRowFilter,
onChange,
onValidate,
range,
}) => {
export const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }: VisualEditorProps) => {
const state = useAsync(async () => {
const fields = await db.fields(query);
return fields;

4
public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx
View File

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

6
public/app/features/transformers/FilterByValueTransformer/ValueMatchers/NoopMatcherEditor.tsx
View File

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

2
public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx
View File

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

6
public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx
View File

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

6
public/app/features/transformers/editors/GroupByTransformerEditor.tsx
View File

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

4
public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx
View File

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

4
public/app/features/transformers/editors/HistogramTransformerEditor.tsx
View File

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

4
public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
View File

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

5
public/app/features/transformers/editors/LimitTransformerEditor.tsx
View File

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

6
public/app/features/transformers/editors/MergeTransformerEditor.tsx
View File

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

5
public/app/features/transformers/editors/ReduceTransformerEditor.tsx
View File

@ -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',

6
public/app/features/transformers/editors/SeriesToRowsTransformerEditor.tsx
View File

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

6
public/app/features/transformers/editors/SortByTransformerEditor.tsx
View File

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

4
public/app/features/transformers/extractFields/ExtractFieldsTransformerEditor.tsx
View File

@ -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,

6
public/app/features/transformers/lookupGazetteer/FieldLookupTransformerEditor.tsx
View File

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

4
public/app/features/transformers/spatial/SpatialTransformerEditor.tsx
View File

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

4
public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/ArgQueryEditor.tsx
View File

@ -44,14 +44,14 @@ function selectSubscriptions(
return querySubscriptions;
}
const ArgQueryEditor: React.FC<ArgQueryEditorProps> = ({
const ArgQueryEditor = ({
query,
datasource,
subscriptionId,
variableOptionGroup,
onChange,
setError,
}) => {
}: ArgQueryEditorProps) => {
const [subscriptions, setSubscriptions] = useState<AzureMonitorOption[]>([]);
useMemo(() => {
datasource

2
public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/QueryField.tsx
View File

@ -4,7 +4,7 @@ import { CodeEditor } from '@grafana/ui';
import { AzureQueryEditorFieldProps } from '../../types';
const QueryField: React.FC<AzureQueryEditorFieldProps> = ({ query, onQueryChange }) => {
const QueryField = ({ query, onQueryChange }: AzureQueryEditorFieldProps) => {
const onChange = useCallback(
(newQuery: string) => {
onQueryChange({

Some files were not shown because too many files have changed in this diff Show More