Elasticsearch: Fix some strict typescript errors (#40517)

* Elasticsearch: Fix some strict typescript errors

* Fix tests

* Reduce strict error count

* actually fix tests

public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps } from 'react';
+import React from 'react';
 import { InlineField, Input, Select } from '@grafana/ui';
 import { DateHistogram } from '../aggregations';
 import { bucketAggregationConfig } from '../utils';
@@ -9,9 +9,7 @@ import { inlineFieldProps } from '.';
 import { uniqueId } from 'lodash';
 import { useCreatableSelectPersistedBehaviour } from '../../../hooks/useCreatableSelectPersistedBehaviour';
 
-type IntervalOption = Required<Pick<SelectableValue<string>, 'label' | 'value'>>;
-
-const defaultIntervalOptions: IntervalOption[] = [
+const defaultIntervalOptions: Array<SelectableValue<string>> = [
   { label: 'auto', value: 'auto' },
   { label: '10s', value: '10s' },
   { label: '1m', value: '1m' },
@@ -22,12 +20,12 @@ const defaultIntervalOptions: IntervalOption[] = [
   { label: '1d', value: '1d' },
 ];
 
-const hasValue = (searchValue: IntervalOption['value']) => ({ value }: IntervalOption) => value === searchValue;
+const hasValue = (searchValue: string) => ({ value }: SelectableValue<string>) => value === searchValue;
 
-const isValidNewOption: ComponentProps<typeof Select>['isValidNewOption'] = (
-  inputValue,
-  _,
-  options: IntervalOption[]
+const isValidNewOption = (
+  inputValue: string,
+  _: SelectableValue<string> | null,
+  options: Readonly<Array<SelectableValue<string>>>
 ) => {
   // TODO: would be extremely nice here to allow only template variables and values that are
   // valid date histogram's Interval options
@@ -36,7 +34,7 @@ const isValidNewOption: ComponentProps<typeof Select>['isValidNewOption'] = (
   return !valueExists && inputValue.trim().length > 0;
 };
 
-const optionStartsWithValue: ComponentProps<typeof Select>['filterOption'] = (option: IntervalOption, value) =>
+const optionStartsWithValue = (option: SelectableValue<string>, value: string) =>
   option.value?.startsWith(value) || false;
 
 interface Props {
@@ -46,8 +44,8 @@ interface Props {
 export const DateHistogramSettingsEditor = ({ bucketAgg }: Props) => {
   const dispatch = useDispatch();
 
-  const handleIntervalChange = (newValue: string) =>
-    dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'interval', newValue }));
+  const handleIntervalChange = ({ value }: SelectableValue<string>) =>
+    dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'interval', newValue: value }));
 
   return (
     <>

public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx

@@ -48,8 +48,8 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
           {...useCreatableSelectPersistedBehaviour({
             options: sizeOptions,
             value: bucketAgg.settings?.size || bucketAggregationConfig.terms.defaultSettings?.size,
-            onChange(newValue) {
-              dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'size', newValue }));
+            onChange({ value }) {
+              dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'size', newValue: value }));
             },
           })}
         />

public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx

@@ -74,7 +74,7 @@ describe('useCreatableSelectPersistedBehaviour', () => {
 
     // Should call onChange when selecting an already existing option
     userEvent.click(option1);
-    expect(onChange).toHaveBeenCalledWith('Option 1');
+    expect(onChange).toHaveBeenLastCalledWith({ value: 'Option 1', label: 'Option 1' });
 
     userEvent.click(input);
 
@@ -82,7 +82,7 @@ describe('useCreatableSelectPersistedBehaviour', () => {
     userEvent.type(input, 'Option 2');
     userEvent.click(screen.getByLabelText('Select option'));
 
-    expect(onChange).toHaveBeenCalledWith('Option 2');
+    expect(onChange).toHaveBeenLastCalledWith({ value: 'Option 2' });
   });
 
   it('Should create an option for value if value is not in options', () => {

public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.ts

@@ -1,50 +1,43 @@
 import { SelectableValue } from '@grafana/data';
-import { Select } from '@grafana/ui';
-import { ComponentProps, useState } from 'react';
+import { useState } from 'react';
 
 const hasValue = <T extends SelectableValue>(searchValue: T['value']) => ({ value }: T) => value === searchValue;
 
-const getInitialState = <T extends SelectableValue>(initialOptions: T[], initialValue?: T['value']): T[] => {
+const getInitialState = (initialOptions: SelectableValue[], initialValue?: string): SelectableValue[] => {
   if (initialValue === undefined || initialOptions.some(hasValue(initialValue))) {
     return initialOptions;
   }
 
-  return initialOptions.concat({
+  return [
+    ...initialOptions,
+    {
       value: initialValue,
       label: initialValue,
-  } as T);
+    },
+  ];
 };
 
-interface Params<T extends SelectableValue> {
-  options: T[];
-  value?: T['value'];
-  onChange: (value: T['value']) => void;
+interface Params {
+  options: SelectableValue[];
+  value?: string;
+  onChange: (s: SelectableValue<string>) => void;
 }
 
 /**
  * Creates the Props needed by Select to handle custom values and handles custom value creation
  * and the initial value when it is not present in the option array.
  */
-export const useCreatableSelectPersistedBehaviour = <T extends SelectableValue>({
-  options: initialOptions,
-  value,
-  onChange,
-}: Params<T>): Pick<
-  ComponentProps<typeof Select>,
-  'onChange' | 'onCreateOption' | 'options' | 'allowCustomValue' | 'value'
-> => {
-  const [options, setOptions] = useState<T[]>(getInitialState(initialOptions, value));
+export const useCreatableSelectPersistedBehaviour = ({ options: initialOptions, value, onChange }: Params) => {
+  const [options, setOptions] = useState(getInitialState(initialOptions, value));
 
-  const addOption = (newValue: T['value']) => setOptions([...options, { value: newValue, label: newValue } as T]);
+  const addOption = (newValue: string) => setOptions([...options, { value: newValue, label: newValue }]);
 
   return {
-    onCreateOption: (value) => {
+    onCreateOption: (value: string) => {
       addOption(value);
-      onChange(value);
-    },
-    onChange: (e) => {
-      onChange(e.value);
+      onChange({ value });
     },
+    onChange,
     allowCustomValue: true,
     options,
     value,

scripts/ci-check-strict.sh

@@ -3,7 +3,7 @@ set -e
 
 echo -e "Collecting code stats (typescript errors & more)"
 
-ERROR_COUNT_LIMIT=19
+ERROR_COUNT_LIMIT=17
 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