Chore: Fix more TypeScript errors (#36918)

* TypeScript: Fix some strict typescript errors

* Fix more strict typescript errors

* Few more fixes

* Better string conversion

* update check script to 195

packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx

@@ -22,7 +22,7 @@ export interface Props<T> extends HTMLAttributes<HTMLButtonElement> {
  * @internal
  * A temporary component until we have a proper dropdown component
  */
-export const ButtonSelect = React.memo(<T,>(props: Props<T>) => {
+const ButtonSelectComponent = <T,>(props: Props<T>) => {
   const { className, options, value, onChange, narrow, variant, ...restProps } = props;
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const styles = useStyles2(getStyles);
@@ -73,9 +73,11 @@ export const ButtonSelect = React.memo(<T,>(props: Props<T>) => {
       )}
     </ButtonGroup>
   );
-});
+};
+
+ButtonSelectComponent.displayName = 'ButtonSelect';
 
-ButtonSelect.displayName = 'ButtonSelect';
+export const ButtonSelect = React.memo(ButtonSelectComponent) as typeof ButtonSelectComponent;
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {

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;
 }
 
 /**

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
         </span>
       )}
-      <Select {...selectOptions} prefix={<Icon name="filter" />} aria-label="Panel Type filter" />
+      <MultiSelect {...selectOptions} prefix={<Icon name="filter" />} aria-label="Panel Type filter" />
     </div>
   );
 };

public/app/core/utils/richHistory.ts

@@ -331,7 +331,7 @@ export function filterQueriesBySearchFilter(queries: RichHistoryQuery[], searchF
   });
 }
 
-export function filterQueriesByDataSource(queries: RichHistoryQuery[], listOfDatasourceFilters: string[] | null) {
+export function filterQueriesByDataSource(queries: RichHistoryQuery[], listOfDatasourceFilters: string[]) {
   return listOfDatasourceFilters && listOfDatasourceFilters.length > 0
     ? queries.filter((q) => listOfDatasourceFilters.includes(q.datasourceName))
     : queries;
@@ -348,7 +348,7 @@ export function filterQueriesByTime(queries: RichHistoryQuery[], timeFilter: [nu
 export function filterAndSortQueries(
   queries: RichHistoryQuery[],
   sortOrder: SortOrder,
-  listOfDatasourceFilters: string[] | null,
+  listOfDatasourceFilters: string[],
   searchFilter: string,
   timeFilter?: [number, number]
 ) {

public/app/features/alerting/unified/components/rules/RulesFilter.tsx

@@ -98,7 +98,7 @@ const RulesFilter = () => {
             <Label>View as</Label>
             <RadioButtonGroup
               options={ViewOptions}
-              value={queryParams['view'] || 'group'}
+              value={String(queryParams['view'] ?? 'group')}
               onChange={handleViewChange}
             />
           </div>

public/app/features/alerting/unified/utils/amroutes.ts

@@ -19,7 +19,7 @@ const matchersToArrayFieldMatchers = (matchers: Record<string, string> | undefin
         isEqual: true,
       },
     ],
-    []
+    [] as Matcher[]
   );
 
 const intervalToValueAndType = (strValue: string | undefined): [string, string] => {

public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx

@@ -86,7 +86,7 @@ export default class StandardAnnotationQueryEditor extends PureComponent<Props,
     });
   };
 
-  onMappingChange = (mappings: AnnotationEventMappings) => {
+  onMappingChange = (mappings?: AnnotationEventMappings) => {
     this.props.onChange({
       ...this.props.annotation,
       mappings,

public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx

@@ -46,9 +46,9 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
     });
   };
 
-  onUpdate = (title: string, repeat: string | undefined) => {
+  onUpdate = (title: string, repeat?: string | null) => {
     this.props.panel['title'] = title;
-    this.props.panel['repeat'] = repeat;
+    this.props.panel['repeat'] = repeat ?? undefined;
     this.props.panel.render();
     this.props.dashboard.processRepeats();
     this.forceUpdate();

public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx

@@ -43,7 +43,7 @@ export class TimePickerSettings extends PureComponent<Props, State> {
     this.props.onHideTimePickerChange(!this.props.timePickerHidden);
   };
 
-  onTimeZoneChange = (timeZone: string) => {
+  onTimeZoneChange = (timeZone?: string) => {
     if (typeof timeZone !== 'string') {
       return;
     }

public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx

@@ -18,7 +18,7 @@ interface Props {
   dashboard: DashboardModel;
   onFieldConfigsChange: (config: FieldConfigSource) => void;
   onPanelOptionsChanged: (options: any) => void;
-  onPanelConfigChange: (configKey: string, value: any) => void;
+  onPanelConfigChange: (configKey: keyof PanelModel, value: any) => void;
 }
 
 export const OptionsPane: React.FC<Props> = ({

public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx

@@ -19,7 +19,7 @@ interface Props {
   data?: PanelData;
   onFieldConfigsChange: (config: FieldConfigSource) => void;
   onPanelOptionsChanged: (options: any) => void;
-  onPanelConfigChange: (configKey: string, value: any) => void;
+  onPanelConfigChange: (configKey: keyof PanelModel, value: any) => void;
 }
 
 export const OptionsPaneOptions: React.FC<Props> = (props) => {

public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx

@@ -110,7 +110,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
               return (
                 <RepeatRowSelect
                   repeat={panel.repeat}
-                  onChange={(value: string | null) => {
+                  onChange={(value?: string | null) => {
                     onPanelConfigChange('repeat', value);
                   }}
                 />

public/app/features/dashboard/components/PanelEditor/types.ts

@@ -54,7 +54,7 @@ export interface OptionPaneRenderProps {
   plugin: PanelPlugin;
   data?: PanelData;
   dashboard: DashboardModel;
-  onPanelConfigChange: (configKey: string, value: any) => void;
+  onPanelConfigChange: (configKey: keyof PanelModel, value: any) => void;
   onPanelOptionsChanged: (options: any) => void;
   onFieldConfigsChange: (config: FieldConfigSource) => void;
 }

public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx

@@ -7,8 +7,8 @@ import { getVariables } from '../../../variables/state/selectors';
 import { StoreState } from '../../../../types';
 
 export interface Props {
-  repeat: string | undefined | null;
-  onChange: (name: string | null | undefined) => void;
+  repeat?: string | null;
+  onChange: (name: string | null) => void;
 }
 
 export const RepeatRowSelect: FC<Props> = ({ repeat, onChange }) => {
@@ -34,7 +34,7 @@ export const RepeatRowSelect: FC<Props> = ({ repeat, onChange }) => {
     return options;
   }, [variables]);
 
-  const onSelectChange = useCallback((option: SelectableValue<string | null>) => onChange(option.value), [onChange]);
+  const onSelectChange = useCallback((option: SelectableValue<string | null>) => onChange(option.value!), [onChange]);
 
   return <Select value={repeat} onChange={onSelectChange} options={variableOptions} />;
 };

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<RowOptionsButtonProps> = ({ 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();
   };

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<Props> = ({ repeat, title, onUpdate, onCancel }) => {
   const [newRepeat, setNewRepeat] = useState<string | null | undefined>(repeat);
-  const onChangeRepeat = useCallback((name: string) => setNewRepeat(name), [setNewRepeat]);
+  const onChangeRepeat = useCallback((name?: string | null) => setNewRepeat(name), [setNewRepeat]);
 
   return (
     <Form
       defaultValues={{ title }}
-      onSubmit={(formData: { title: string | null }) => {
+      onSubmit={(formData: { title: string }) => {
         onUpdate(formData.title, newRepeat);
       }}
     >

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

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<Props> = ({ 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))}
       />
     );
   };

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

public/app/features/explore/Logs.tsx

@@ -325,7 +325,7 @@ export class UnthemedLogs extends PureComponent<Props, State> {
             </InlineField>
             <InlineField label="Dedup" transparent>
               <RadioButtonGroup
-                options={Object.keys(LogsDedupStrategy).map((dedupType: LogsDedupStrategy) => ({
+                options={Object.values(LogsDedupStrategy).map((dedupType) => ({
                   label: capitalize(dedupType),
                   value: dedupType,
                   description: LogsDedupDescription[dedupType],

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<RichHistoryProps, RichHistoryState> {
@@ -50,7 +50,7 @@ class UnThemedRichHistory extends PureComponent<RichHistoryProps, RichHistorySta
     super(props);
     this.state = {
       sortOrder: SortOrder.Descending,
-      datasourceFilters: store.getObject(RICH_HISTORY_SETTING_KEYS.datasourceFilters, null),
+      datasourceFilters: store.getObject(RICH_HISTORY_SETTING_KEYS.datasourceFilters, []),
       retentionPeriod: store.getObject(RICH_HISTORY_SETTING_KEYS.retentionPeriod, 7),
       starredTabAsFirstTab: store.getBool(RICH_HISTORY_SETTING_KEYS.starredTabAsFirstTab, false),
       activeDatasourceOnly: store.getBool(RICH_HISTORY_SETTING_KEYS.activeDatasourceOnly, true),
@@ -80,7 +80,7 @@ class UnThemedRichHistory extends PureComponent<RichHistoryProps, RichHistorySta
     store.set(RICH_HISTORY_SETTING_KEYS.activeDatasourceOnly, activeDatasourceOnly);
   };
 
-  onSelectDatasourceFilters = (value: SelectableValue[] | null) => {
+  onSelectDatasourceFilters = (value: SelectableValue[]) => {
     try {
       store.setObject(RICH_HISTORY_SETTING_KEYS.datasourceFilters, value);
     } catch (error) {

public/app/features/explore/RichHistory/RichHistoryQueriesTab.test.tsx

@@ -12,7 +12,7 @@ const setup = (propOverrides?: Partial<Props>) => {
     queries: [],
     sortOrder: SortOrder.Ascending,
     activeDatasourceOnly: false,
-    datasourceFilters: null,
+    datasourceFilters: [],
     retentionPeriod: 14,
     height: 100,
     exploreId: ExploreId.left,

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) {
         <div className={styles.selectors}>
           {!activeDatasourceOnly && (
             <div aria-label="Filter datasources" className={styles.multiselect}>
-              <Select
-                isMulti={true}
+              <MultiSelect
                 options={listOfDatasources}
                 value={datasourceFilters}
                 placeholder="Filter queries for data sources(s)"

public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx

@@ -11,7 +11,7 @@ const setup = (propOverrides?: Partial<Props>) => {
     queries: [],
     sortOrder: SortOrder.Ascending,
     activeDatasourceOnly: false,
-    datasourceFilters: null,
+    datasourceFilters: [],
     exploreId: ExploreId.left,
     onChangeSortOrder: jest.fn(),
     onSelectDatasourceFilters: jest.fn(),

public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx

@@ -6,7 +6,7 @@ import { uniqBy } from 'lodash';
 import { RichHistoryQuery, ExploreId } from 'app/types/explore';
 
 // Utils
-import { stylesFactory, useTheme, Select } from '@grafana/ui';
+import { stylesFactory, useTheme, Select, MultiSelect } from '@grafana/ui';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
 import { filterAndSortQueries, createDatasourcesList, SortOrder } from 'app/core/utils/richHistory';
 
@@ -20,7 +20,7 @@ export interface Props {
   queries: RichHistoryQuery[];
   sortOrder: SortOrder;
   activeDatasourceOnly: boolean;
-  datasourceFilters: SelectableValue[] | null;
+  datasourceFilters: SelectableValue[];
   exploreId: ExploreId;
   onChangeSortOrder: (sortOrder: SortOrder) => void;
   onSelectDatasourceFilters: (value: SelectableValue[]) => void;
@@ -105,7 +105,7 @@ export function RichHistoryStarredTab(props: Props) {
       filterAndSortQueries(
         starredQueries,
         sortOrder,
-        datasourceFilters?.map((d) => d.value) as string[] | null,
+        datasourceFilters.map((d) => d.value),
         debouncedSearchInput
       )
     );
@@ -117,8 +117,7 @@ export function RichHistoryStarredTab(props: Props) {
         <div className={styles.selectors}>
           {!activeDatasourceOnly && (
             <div aria-label="Filter datasources" className={styles.multiselect}>
-              <Select
-                isMulti={true}
+              <MultiSelect
                 options={listOfDatasources}
                 value={datasourceFilters}
                 placeholder="Filter queries for specific data sources(s)"

scripts/ci-check-strict.sh

@@ -3,7 +3,7 @@ set -e
 
 echo -e "Collecting code stats (typescript errors & more)"
 
-ERROR_COUNT_LIMIT=220
+ERROR_COUNT_LIMIT=195
 ERROR_COUNT="$(./node_modules/.bin/tsc --project tsconfig.json --noEmit --strict true | grep -oP 'Found \K(\d+)')"
 
 if [ "$ERROR_COUNT" -gt $ERROR_COUNT_LIMIT ]; then