diff --git a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx index e0d861d1f3c..f39e4e6737f 100644 --- a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx +++ b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx @@ -22,7 +22,7 @@ export interface Props extends HTMLAttributes { * @internal * A temporary component until we have a proper dropdown component */ -export const ButtonSelect = React.memo((props: Props) => { +const ButtonSelectComponent = (props: Props) => { const { className, options, value, onChange, narrow, variant, ...restProps } = props; const [isOpen, setIsOpen] = useState(false); const styles = useStyles2(getStyles); @@ -73,9 +73,11 @@ export const ButtonSelect = React.memo((props: Props) => { )} ); -}); +}; -ButtonSelect.displayName = 'ButtonSelect'; +ButtonSelectComponent.displayName = 'ButtonSelect'; + +export const ButtonSelect = React.memo(ButtonSelectComponent) as typeof ButtonSelectComponent; const getStyles = (theme: GrafanaTheme2) => { return { diff --git a/packages/grafana-ui/src/components/OptionsUI/color.tsx b/packages/grafana-ui/src/components/OptionsUI/color.tsx index db255c3d1b8..9cf5c5cd4c4 100644 --- a/packages/grafana-ui/src/components/OptionsUI/color.tsx +++ b/packages/grafana-ui/src/components/OptionsUI/color.tsx @@ -10,7 +10,7 @@ import { ColorSwatch } from '../ColorPicker/ColorSwatch'; * */ export interface ColorValueEditorProps { value?: string; - onChange: (value?: string) => void; + onChange: (value: string) => void; } /** diff --git a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx index 48042e81eca..ad9092515d9 100644 --- a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx +++ b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useMemo, useState } from 'react'; import { GrafanaTheme2, PanelPluginMeta, SelectableValue } from '@grafana/data'; import { getAllPanelPluginMeta } from '../../../features/dashboard/components/VizTypePicker/VizTypePicker'; -import { Icon, resetSelectStyles, Select, useStyles2 } from '@grafana/ui'; +import { Icon, resetSelectStyles, MultiSelect, useStyles2 } from '@grafana/ui'; import { css } from '@emotion/css'; export interface Props { @@ -40,7 +40,6 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Prop defaultOptions: true, getOptionLabel: (i: any) => i.label, getOptionValue: (i: any) => i.value, - isMulti: true, noOptionsMessage: 'No Panel types found', placeholder: 'Filter by type', styles: resetSelectStyles(), @@ -57,7 +56,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Prop Clear types )} - ; }; diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx index 4fff041ee42..417eeb3a795 100644 --- a/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx +++ b/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx @@ -5,13 +5,13 @@ import { RowOptionsModal } from './RowOptionsModal'; import { OnRowOptionsUpdate } from './RowOptionsForm'; export interface RowOptionsButtonProps { - title: string | null; - repeat: string | null | undefined; + title: string; + repeat?: string | null; onUpdate: OnRowOptionsUpdate; } export const RowOptionsButton: FC = ({ repeat, title, onUpdate }) => { - const onUpdateChange = (hideModal: () => void) => (title: string | null, repeat: string | null) => { + const onUpdateChange = (hideModal: () => void) => (title: string, repeat?: string | null) => { onUpdate(title, repeat); hideModal(); }; diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx index 6ff45492ed5..1f841528a90 100644 --- a/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx +++ b/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx @@ -3,10 +3,10 @@ import { Button, Field, Form, Modal, Input } from '@grafana/ui'; import { RepeatRowSelect } from '../RepeatRowSelect/RepeatRowSelect'; -export type OnRowOptionsUpdate = (title: string | null, repeat: string | null | undefined) => void; +export type OnRowOptionsUpdate = (title: string, repeat?: string | null) => void; export interface Props { - title: string | null; + title: string; repeat?: string | null; onUpdate: OnRowOptionsUpdate; onCancel: () => void; @@ -14,12 +14,12 @@ export interface Props { export const RowOptionsForm: FC = ({ repeat, title, onUpdate, onCancel }) => { const [newRepeat, setNewRepeat] = useState(repeat); - const onChangeRepeat = useCallback((name: string) => setNewRepeat(name), [setNewRepeat]); + const onChangeRepeat = useCallback((name?: string | null) => setNewRepeat(name), [setNewRepeat]); return (
{ + onSubmit={(formData: { title: string }) => { onUpdate(formData.title, newRepeat); }} > diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx index 777ba42ed6b..7e0555b3744 100644 --- a/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx +++ b/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx @@ -5,8 +5,8 @@ import { css } from '@emotion/css'; import { OnRowOptionsUpdate, RowOptionsForm } from './RowOptionsForm'; export interface RowOptionsModalProps { - title: string | null; - repeat: string | null; + title: string; + repeat?: string | null; onDismiss: () => void; onUpdate: OnRowOptionsUpdate; } diff --git a/public/app/features/dashboard/components/VizTypePicker/VizTypePicker.tsx b/public/app/features/dashboard/components/VizTypePicker/VizTypePicker.tsx index a52ce8026de..b2929158d9b 100644 --- a/public/app/features/dashboard/components/VizTypePicker/VizTypePicker.tsx +++ b/public/app/features/dashboard/components/VizTypePicker/VizTypePicker.tsx @@ -8,7 +8,7 @@ import { css } from '@emotion/css'; export interface Props { current: PanelPluginMeta; - onTypeChange: (newType: PanelPluginMeta, withModKey?: boolean) => void; + onTypeChange: (newType: PanelPluginMeta, withModKey: boolean) => void; searchQuery: string; onClose: () => void; } @@ -80,7 +80,7 @@ export const VizTypePicker: React.FC = ({ searchQuery, onTypeChange, curr key={plugin.id} isCurrent={isCurrent} plugin={plugin} - onClick={(e) => onTypeChange(plugin, e.metaKey || e.ctrlKey || e.altKey)} + onClick={(e) => onTypeChange(plugin, Boolean(e.metaKey || e.ctrlKey || e.altKey))} /> ); }; diff --git a/public/app/features/dashboard/state/DashboardModel.ts b/public/app/features/dashboard/state/DashboardModel.ts index 5a973508262..e20a203ca1f 100644 --- a/public/app/features/dashboard/state/DashboardModel.ts +++ b/public/app/features/dashboard/state/DashboardModel.ts @@ -752,7 +752,7 @@ export class DashboardModel { const maxPos = maxBy(positions, (pos: GridPos) => { return pos.y + pos.h; }); - return maxPos.y + maxPos.h - rowYPos; + return maxPos!.y + maxPos!.h - rowYPos; } removePanel(panel: PanelModel) { diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx index c7348f5ab99..4f4b69c4dd4 100644 --- a/public/app/features/explore/Logs.tsx +++ b/public/app/features/explore/Logs.tsx @@ -325,7 +325,7 @@ export class UnthemedLogs extends PureComponent { ({ + options={Object.values(LogsDedupStrategy).map((dedupType) => ({ label: capitalize(dedupType), value: dedupType, description: LogsDedupDescription[dedupType], diff --git a/public/app/features/explore/RichHistory/RichHistory.tsx b/public/app/features/explore/RichHistory/RichHistory.tsx index f277cd90e08..3acd197e6ee 100644 --- a/public/app/features/explore/RichHistory/RichHistory.tsx +++ b/public/app/features/explore/RichHistory/RichHistory.tsx @@ -42,7 +42,7 @@ interface RichHistoryState { retentionPeriod: number; starredTabAsFirstTab: boolean; activeDatasourceOnly: boolean; - datasourceFilters: SelectableValue[] | null; + datasourceFilters: SelectableValue[]; } class UnThemedRichHistory extends PureComponent { @@ -50,7 +50,7 @@ class UnThemedRichHistory extends PureComponent { + onSelectDatasourceFilters = (value: SelectableValue[]) => { try { store.setObject(RICH_HISTORY_SETTING_KEYS.datasourceFilters, value); } catch (error) { diff --git a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.test.tsx b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.test.tsx index 3aad1c717ee..03debfddf6d 100644 --- a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.test.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.test.tsx @@ -12,7 +12,7 @@ const setup = (propOverrides?: Partial) => { queries: [], sortOrder: SortOrder.Ascending, activeDatasourceOnly: false, - datasourceFilters: null, + datasourceFilters: [], retentionPeriod: 14, height: 100, exploreId: ExploreId.left, diff --git a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx index 9d32148d60f..f279531a639 100644 --- a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx @@ -6,7 +6,7 @@ import { uniqBy } from 'lodash'; import { RichHistoryQuery, ExploreId } from 'app/types/explore'; // Utils -import { stylesFactory, useTheme, RangeSlider, Select } from '@grafana/ui'; +import { stylesFactory, useTheme, RangeSlider, MultiSelect, Select } from '@grafana/ui'; import { GrafanaTheme, SelectableValue } from '@grafana/data'; import { @@ -27,7 +27,7 @@ export interface Props { queries: RichHistoryQuery[]; sortOrder: SortOrder; activeDatasourceOnly: boolean; - datasourceFilters: SelectableValue[] | null; + datasourceFilters: SelectableValue[]; retentionPeriod: number; exploreId: ExploreId; height: number; @@ -161,7 +161,7 @@ export function RichHistoryQueriesTab(props: Props) { filterAndSortQueries( queries, sortOrder, - datasourceFilters?.map((d) => d.value) as string[] | null, + datasourceFilters.map((d) => d.value), debouncedSearchInput, timeFilter ) @@ -199,8 +199,7 @@ export function RichHistoryQueriesTab(props: Props) {
{!activeDatasourceOnly && (
-