Chore: friday typings 5 (#73844)

* fix some event.target as stuff

* segment async story

* segmentinput story

* SegmentSelect

* fixing some tests

* more test fixes

* undo change to SilencesFilter

packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx

@@ -14,11 +14,10 @@ const AddButton = (
   </span>
 );
 
-const toOption = (value: any) => ({ label: value, value: value });
+const toOption = <T,>(value: T): SelectableValue<T> => ({ label: String(value), value: value });
 const options = ['Option1', 'Option2', 'OptionWithLooongLabel', 'Option4'].map(toOption);
 
-const loadOptions = (options: any): Promise<Array<SelectableValue<string>>> =>
-  new Promise((res) => setTimeout(() => res(options), 2000));
+const loadOptions = <T,>(options: T): Promise<T> => new Promise((res) => setTimeout(() => res(options), 2000));
 
 const loadOptionsErr = (): Promise<Array<SelectableValue<string>>> =>
   new Promise((_, rej) => setTimeout(() => rej(Error('Could not find data')), 2000));
@@ -37,7 +36,7 @@ const SegmentFrame = ({ loadOptions, children }: any) => (
 );
 
 export const ArrayOptions = () => {
-  const [value, setValue] = useState<any>(options[0]);
+  const [value, setValue] = useState(options[0]);
   return (
     <SegmentFrame loadOptions={() => loadOptions(options)}>
       <SegmentAsync
@@ -73,7 +72,10 @@ export const ArrayOptionsWithPrimitiveValue = () => {
   );
 };
 
-const groupedOptions: any = [
+const groupedOptions: Array<{
+  label: string;
+  options: Array<SelectableValue<string | number>>;
+}> = [
   { label: 'Names', options: ['Jane', 'Tom', 'Lisa'].map(toOption) },
   { label: 'Prime', options: [2, 3, 5, 7, 11, 13].map(toOption) },
 ];
@@ -82,7 +84,7 @@ export const GroupedArrayOptions = () => {
   const [value, setValue] = useState(groupedOptions[0].options[0]);
   return (
     <SegmentFrame loadOptions={() => loadOptions(groupedOptions)}>
-      <SegmentAsync
+      <SegmentAsync<string | number>
         value={value}
         loadOptions={() => loadOptions(groupedOptions)}
         onChange={(item) => {
@@ -111,13 +113,15 @@ export const CustomOptionsAllowed = () => {
   );
 };
 
-const CustomLabelComponent = ({ value }: any) => <div className="gf-form-label">custom({value})</div>;
+const CustomLabelComponent = ({ value }: { value: unknown }) => (
+  <div className="gf-form-label">custom({String(value)})</div>
+);
 
 export const CustomLabel = () => {
   const [value, setValue] = useState(groupedOptions[0].options[0].value);
   return (
     <SegmentFrame loadOptions={() => loadOptions(groupedOptions)}>
-      <SegmentAsync
+      <SegmentAsync<string | number>
         Component={<CustomLabelComponent value={value} />}
         loadOptions={() => loadOptions(groupedOptions)}
         onChange={({ value }) => {
@@ -146,7 +150,7 @@ export const CustomStateMessageHandler = () => {
     return '';
   };
 
-  const [value, setValue] = useState<any>(options[0]);
+  const [value, setValue] = useState(options[0].value);
   return (
     <>
       <SegmentFrame loadOptions={() => loadOptions(groupedOptions)}>
@@ -187,7 +191,7 @@ export const CustomStateMessageHandler = () => {
 };
 
 export const HtmlAttributes = () => {
-  const [value, setValue] = useState<any>(options[0]);
+  const [value, setValue] = useState(options[0]);
   return (
     <SegmentFrame loadOptions={() => loadOptions(options)}>
       <SegmentAsync

packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx

@@ -6,20 +6,20 @@ import { SegmentInput, Icon, SegmentSection } from '@grafana/ui';
 
 import { SegmentInputProps } from './SegmentInput';
 
-const SegmentFrame = ({ children }: any) => (
+const SegmentFrame = ({ children }: React.PropsWithChildren) => (
   <>
     <SegmentSection label="Segment Name">{children}</SegmentSection>
   </>
 );
 
 export const BasicInput = () => {
-  const [value, setValue] = useState('some text');
+  const [value, setValue] = useState<string | number>('some text');
   return (
     <SegmentFrame>
       <SegmentInput
         value={value}
         onChange={(text) => {
-          setValue(text as string);
+          setValue(text);
           action('Segment value changed')(text);
         }}
       />
@@ -33,14 +33,14 @@ const meta: Meta<typeof SegmentInput> = {
 };
 
 export const BasicInputWithPlaceholder = () => {
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState<string | number>('');
   return (
     <SegmentFrame>
       <SegmentInput
         placeholder="add text"
         value={value}
         onChange={(text) => {
-          setValue(text as string);
+          setValue(text);
           action('Segment value changed')(text);
         }}
       />
@@ -49,7 +49,7 @@ export const BasicInputWithPlaceholder = () => {
 };
 
 export const BasicInputWithHtmlAttributes = () => {
-  const [value, setValue] = useState('some text');
+  const [value, setValue] = useState<string | number>('some text');
   return (
     <SegmentFrame>
       <SegmentInput
@@ -57,7 +57,7 @@ export const BasicInputWithHtmlAttributes = () => {
         id="segment-input"
         value={value}
         onChange={(text) => {
-          setValue(text as string);
+          setValue(text);
           action('Segment value changed')(text);
         }}
       />
@@ -65,7 +65,11 @@ export const BasicInputWithHtmlAttributes = () => {
   );
 };
 
-const InputComponent = ({ initialValue }: any) => {
+interface InputComponentProps {
+  initialValue: string | number;
+}
+
+const InputComponent = ({ initialValue }: InputComponentProps) => {
   const [value, setValue] = useState(initialValue);
   return (
     <SegmentInput
@@ -73,7 +77,7 @@ const InputComponent = ({ initialValue }: any) => {
       autofocus
       value={value}
       onChange={(text) => {
-        setValue(text as string);
+        setValue(text);
         action('Segment value changed')(text);
       }}
     />
@@ -81,10 +85,10 @@ const InputComponent = ({ initialValue }: any) => {
 };
 
 export const InputWithAutoFocus = () => {
-  const [inputComponents, setInputComponents] = useState<any>([]);
+  const [inputComponents, setInputComponents] = useState<Array<(props: InputComponentProps) => JSX.Element>>([]);
   return (
     <SegmentFrame>
-      {inputComponents.map((InputComponent: any, i: number) => (
+      {inputComponents.map((InputComponent, i) => (
         <InputComponent initialValue="test" key={i} />
       ))}
       <button

packages/grafana-ui/src/components/Segment/SegmentSelect.tsx

@@ -76,9 +76,9 @@ export function SegmentSelect<T>({
           if (ref && ref.current) {
             // https://github.com/JedWatson/react-select/issues/188#issuecomment-279240292
             // Unfortunately there's no other way of retrieving the value (not yet) created new option
-            const input = ref.current.querySelector('input[id^="react-select-"]') as HTMLInputElement;
+            const input = ref.current.querySelector<HTMLInputElement>('input[id^="react-select-"]');
             if (input && (input.value || allowEmptyValue)) {
-              onChange({ value: input.value as any, label: input.value });
+              onChange({ value: input.value as T, label: input.value });
             } else {
               onClickOutside();
             }

packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.test.ts

@@ -34,10 +34,10 @@ describe('sharedSingleStatMigrationHandler', () => {
       },
       title: 'Usage',
       type: 'bargauge',
-    };
+    } as PanelModel;
 
-    sharedSingleStatMigrationHandler(panel as any);
-    expect((panel as any).fieldConfig).toMatchInlineSnapshot(`
+    sharedSingleStatMigrationHandler(panel);
+    expect(panel.fieldConfig).toMatchInlineSnapshot(`
       {
         "defaults": {
           "color": {
@@ -105,11 +105,11 @@ describe('sharedSingleStatMigrationHandler', () => {
           },
         },
       },
-    };
+    } as PanelModel;
 
-    sharedSingleStatMigrationHandler(panel as any);
+    sharedSingleStatMigrationHandler(panel);
 
-    expect((panel as any).fieldConfig).toMatchInlineSnapshot(`
+    expect(panel.fieldConfig).toMatchInlineSnapshot(`
       {
         "defaults": {
           "mappings": undefined,
@@ -141,10 +141,10 @@ describe('sharedSingleStatMigrationHandler', () => {
       },
       title: 'Usage',
       type: 'bargauge',
-    };
+    } as PanelModel;
 
-    sharedSingleStatMigrationHandler(panel as any);
-    expect((panel as any).fieldConfig).toMatchInlineSnapshot(`
+    sharedSingleStatMigrationHandler(panel);
+    expect(panel.fieldConfig).toMatchInlineSnapshot(`
       {
         "defaults": {
           "mappings": undefined,
@@ -174,10 +174,10 @@ describe('sharedSingleStatMigrationHandler', () => {
       },
       title: 'Usage',
       type: 'bargauge',
-    };
+    } as PanelModel;
 
-    sharedSingleStatMigrationHandler(panel as any);
-    expect((panel as any).fieldConfig.defaults.displayName).toBe('newTitle');
+    sharedSingleStatMigrationHandler(panel);
+    expect(panel.fieldConfig.defaults.displayName).toBe('newTitle');
   });
 
   it('change from angular singlestat with no enabled gauge', () => {
@@ -242,8 +242,8 @@ describe('sharedSingleStatMigrationHandler', () => {
       },
       title: 'Usage',
       type: 'bargauge',
-    } as unknown as PanelModel;
-    sharedSingleStatMigrationHandler(panel as any);
+    } as PanelModel;
+    sharedSingleStatMigrationHandler(panel);
     expect(panel.fieldConfig.defaults.unit).toBe('percentunit');
     expect(panel.fieldConfig.defaults.min).toBe(0);
     expect(panel.fieldConfig.defaults.max).toBe(1);