Chore: fix some more types (#76535)

* clean up some e2e/runtime types

* fix some stories

* some more fixes

* fix route props

* update unit tests

* update more unit tests

* don't throw here

packages/grafana-runtime/src/services/live.ts

@@ -79,7 +79,7 @@ export interface GrafanaLiveSrv {
    *
    * @alpha -- experimental
    */
-  publish(address: LiveChannelAddress, data: unknown): Promise<any>;
+  publish(address: LiveChannelAddress, data: unknown): Promise<unknown>;
 }
 
 let singletonInstance: GrafanaLiveSrv;

packages/grafana-runtime/src/utils/DataSourceWithBackend.test.ts

@@ -11,6 +11,7 @@ import {
   createDataFrame,
   AdHocVariableFilter,
   ScopedVars,
+  getDefaultTimeRange,
 } from '@grafana/data';
 
 import { config } from '../config';
@@ -61,6 +62,15 @@ jest.mock('../services', () => ({
 jest.mock('./publicDashboardQueryHandler');
 
 describe('DataSourceWithBackend', () => {
+  beforeEach(async () => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2023-10-13'));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   test('check the executed queries', () => {
     const { mock, ds } = createMockDatasource();
     ds.query({
@@ -70,6 +80,7 @@ describe('DataSourceWithBackend', () => {
       dashboardUID: 'dashA',
       panelId: 123,
       filters: [{ key: 'key1', operator: '=', value: 'val1' }],
+      range: getDefaultTimeRange(),
       queryGroupId: 'abc',
     } as DataQueryRequest);
 
@@ -79,6 +90,7 @@ describe('DataSourceWithBackend', () => {
     expect(args).toMatchInlineSnapshot(`
       {
         "data": {
+          "from": "1697133600000",
           "queries": [
             {
               "applyTemplateVariablesCalled": true,
@@ -111,6 +123,7 @@ describe('DataSourceWithBackend', () => {
               "refId": "B",
             },
           ],
+          "to": "1697155200000",
         },
         "headers": {
           "X-Dashboard-Uid": "dashA",
@@ -135,6 +148,7 @@ describe('DataSourceWithBackend', () => {
       targets: [{ refId: 'A' }, { refId: 'B', datasource: { type: '__expr__' } }],
       dashboardUID: 'dashA',
       panelId: 123,
+      range: getDefaultTimeRange(),
       queryGroupId: 'abc',
     } as DataQueryRequest);
 
@@ -144,6 +158,7 @@ describe('DataSourceWithBackend', () => {
     expect(args).toMatchInlineSnapshot(`
       {
         "data": {
+          "from": "1697133600000",
           "queries": [
             {
               "applyTemplateVariablesCalled": true,
@@ -167,6 +182,7 @@ describe('DataSourceWithBackend', () => {
               "refId": "B",
             },
           ],
+          "to": "1697155200000",
         },
         "headers": {
           "X-Dashboard-Uid": "dashA",
@@ -190,6 +206,7 @@ describe('DataSourceWithBackend', () => {
     ds.query({
       maxDataPoints: 10,
       intervalMs: 5000,
+      range: getDefaultTimeRange(),
       targets: [{ refId: 'A' }, { refId: 'B', datasource: { type: 'sample' } }],
     } as DataQueryRequest);
 
@@ -205,6 +222,7 @@ describe('DataSourceWithBackend', () => {
       targets: [{ refId: 'A' }, { refId: 'B', datasource: { type: 'sample' } }],
       hideFromInspector: true,
       dashboardUID: 'dashA',
+      range: getDefaultTimeRange(),
       panelId: 123,
     } as DataQueryRequest);
 
@@ -214,6 +232,7 @@ describe('DataSourceWithBackend', () => {
     expect(args).toMatchInlineSnapshot(`
       {
         "data": {
+          "from": "1697133600000",
           "queries": [
             {
               "applyTemplateVariablesCalled": true,
@@ -240,6 +259,7 @@ describe('DataSourceWithBackend', () => {
               "refId": "B",
             },
           ],
+          "to": "1697155200000",
         },
         "headers": {
           "X-Dashboard-Uid": "dashA",
@@ -353,6 +373,7 @@ describe('DataSourceWithBackend', () => {
         dashboardUID: 'dashA',
         panelId: 123,
         queryGroupId: 'abc',
+        range: getDefaultTimeRange(),
       } as DataQueryRequest;
 
       ds.query(request);
@@ -371,6 +392,7 @@ describe('DataSourceWithBackend', () => {
         dashboardUID: 'dashA',
         panelId: 123,
         queryGroupId: 'abc',
+        range: getDefaultTimeRange(),
       } as DataQueryRequest;
 
       ds.query(request);

packages/grafana-runtime/src/utils/DataSourceWithBackend.ts

@@ -190,12 +190,11 @@ class DataSourceWithBackend<
       return of({ data: [] });
     }
 
-    const body: any = { queries };
-
-    if (range) {
-      body.from = range.from.valueOf().toString();
-      body.to = range.to.valueOf().toString();
-    }
+    const body = {
+      queries,
+      from: range?.from.valueOf().toString(),
+      to: range?.to.valueOf().toString(),
+    };
 
     if (config.featureToggles.queryOverLive) {
       return getGrafanaLiveSrv().getQueryData({

packages/grafana-runtime/src/utils/plugin.ts

@@ -31,10 +31,10 @@ export const SystemJS = window.System;
  * @param options - plugin styling for light and dark theme.
  * @public
  */
-export async function loadPluginCss(options: PluginCssOptions): Promise<any> {
+export async function loadPluginCss(options: PluginCssOptions): Promise<System.Module | void> {
   try {
     const cssPath = config.bootData.user.theme === 'light' ? options.light : options.dark;
-    return await SystemJS.import(cssPath);
+    return SystemJS.import(cssPath);
   } catch (err) {
     console.error(err);
   }

packages/grafana-runtime/src/utils/queryResponse.test.ts

@@ -262,13 +262,13 @@ describe('Query Response parser', () => {
       data: {
         results: {
           X: {
-            series: [{ name: 'Requests/s', points: [[13.594958983547151, 1611839862951]] }] as any,
+            series: [{ target: '', datapoints: [[13.594958983547151, 1611839862951]] }],
           },
           B: {
-            series: [{ name: 'Requests/s', points: [[13.594958983547151, 1611839862951]] }] as any,
+            series: [{ target: '', datapoints: [[13.594958983547151, 1611839862951]] }],
           },
           A: {
-            series: [{ name: 'Requests/s', points: [[13.594958983547151, 1611839862951]] }] as any,
+            series: [{ target: '', datapoints: [[13.594958983547151, 1611839862951]] }],
           },
         },
       },

packages/grafana-runtime/src/utils/queryResponse.ts

@@ -73,10 +73,11 @@ export function toDataQueryResponse(
   }
 
   // If the response isn't in a correct shape we just ignore the data and pass empty DataQueryResponse.
-  if ((res as FetchResponse).data?.results) {
-    const results = (res as FetchResponse).data.results;
+  const fetchResponse = res as FetchResponse;
+  if (fetchResponse.data?.results) {
+    const results = fetchResponse.data.results;
     const refIDs = queries?.length ? queries.map((q) => q.refId) : Object.keys(results);
-    const cachedResponse = isCachedResponse(res as FetchResponse);
+    const cachedResponse = isCachedResponse(fetchResponse);
     const data: DataResponse[] = [];
 
     for (const refId of refIDs) {
@@ -144,7 +145,7 @@ export function toDataQueryResponse(
   }
 
   // When it is not an OK response, make sure the error gets added
-  if ((res as FetchResponse).status && (res as FetchResponse).status !== 200) {
+  if (fetchResponse.status && fetchResponse.status !== 200) {
     if (rsp.state !== LoadingState.Error) {
       rsp.state = LoadingState.Error;
     }

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

@@ -89,6 +89,9 @@ const ButtonSelectComponent = <T,>(props: Props<T>) => {
 
 ButtonSelectComponent.displayName = 'ButtonSelect';
 
+// needed to properly forward the generic type through React.memo
+// see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 export const ButtonSelect = React.memo(ButtonSelectComponent) as typeof ButtonSelectComponent;
 
 const getStyles = (theme: GrafanaTheme2) => {

packages/grafana-ui/src/components/Forms/FieldArray.story.tsx

@@ -9,7 +9,7 @@ import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
 import { FieldArray } from './FieldArray';
 import mdx from './FieldArray.mdx';
 
-export default {
+const meta: Meta = {
   title: 'Forms/FieldArray',
   component: FieldArray,
   decorators: [withStoryContainer],
@@ -25,7 +25,9 @@ export default {
     containerWidth: { control: { type: 'range', min: 100, max: 500, step: 10 } },
     containerHeight: { control: { type: 'range', min: 100, max: 500, step: 10 } },
   },
-} as Meta;
+};
+
+export default meta;
 
 export const Simple: Story = (args) => {
   const defaultValues: FieldValues = {

packages/grafana-ui/src/components/JSONFormatter/JSONFormatter.tsx

@@ -7,7 +7,7 @@ interface Props {
   json: {};
   config?: JsonExplorerConfig;
   open?: number;
-  onDidRender?: (formattedJson: any) => void;
+  onDidRender?: (formattedJson: {}) => void;
 }
 
 export class JSONFormatter extends PureComponent<Props> {

packages/grafana-ui/src/components/Layout/Layout.story.tsx

@@ -8,7 +8,7 @@ import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
 import { Layout, LayoutProps } from './Layout';
 import mdx from './Layout.mdx';
 
-export default {
+const meta: Meta = {
   title: 'Layout/Groups',
   component: Layout,
   decorators: [withStoryContainer],
@@ -56,7 +56,9 @@ export default {
       },
     },
   },
-} as Meta;
+};
+
+export default meta;
 
 export const Horizontal: Story<LayoutProps> = (args) => {
   return (

packages/grafana-ui/src/components/Menu/MenuGroup.tsx

@@ -9,7 +9,7 @@ import { useStyles2 } from '../../themes';
 import { MenuItemProps } from './MenuItem';
 
 /** @internal */
-export interface MenuItemsGroup<T = any> {
+export interface MenuItemsGroup<T = unknown> {
   /** Label for the menu items group */
   label?: string;
   /** Aria label for accessibility support */

packages/grafana-ui/src/components/Menu/MenuItem.tsx

@@ -14,7 +14,7 @@ import { SubMenu } from './SubMenu';
 export type MenuItemElement = HTMLAnchorElement & HTMLButtonElement & HTMLDivElement;
 
 /** @internal */
-export interface MenuItemProps<T = any> {
+export interface MenuItemProps<T = unknown> {
   /** Label of the menu item */
   label: string;
   /** Aria label for accessibility support */

packages/grafana-ui/src/components/Modal/ModalsContext.tsx

@@ -33,7 +33,7 @@ export class ModalsProvider extends Component<ModalsProviderProps, ModalsContext
     };
   }
 
-  showModal = (component: React.ComponentType<any>, props: any) => {
+  showModal = <T,>(component: React.ComponentType<T>, props: T) => {
     this.setState({
       component,
       props,

packages/grafana-ui/src/components/QueryField/QueryField.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import classnames from 'classnames';
 import { debounce } from 'lodash';
-import React, { Context, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { Value } from 'slate';
 import Plain from 'slate-plain-serializer';
 import { Editor, EventHook, Plugin } from 'slate-react';
@@ -67,8 +67,8 @@ export class UnThemedQueryField extends PureComponent<QueryFieldProps, QueryFiel
   mounted = false;
   editor: Editor | null = null;
 
-  constructor(props: QueryFieldProps, context: Context<any>) {
-    super(props, context);
+  constructor(props: QueryFieldProps) {
+    super(props);
 
     this.runOnChangeDebounced = debounce(this.runOnChange, 500);
 

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

@@ -22,7 +22,12 @@ const loadOptions = <T,>(options: T): Promise<T> => new Promise((res) => setTime
 const loadOptionsErr = (): Promise<Array<SelectableValue<string>>> =>
   new Promise((_, rej) => setTimeout(() => rej(Error('Could not find data')), 2000));
 
-const SegmentFrame = ({ loadOptions, children }: any) => (
+const SegmentFrame = ({
+  loadOptions,
+  children,
+}: React.PropsWithChildren<{
+  loadOptions: (options: Array<SelectableValue<string>>) => Promise<Array<SelectableValue<string>>>;
+}>) => (
   <>
     <SegmentSection label="Segment Name">
       {children}

packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx

@@ -174,8 +174,8 @@ export const ThemeDemo = () => {
         <CollapsableSection label="Shadows" isOpen={true}>
           <DemoBox bg={t.colors.background.primary}>
             <HorizontalGroup>
-              {Object.keys(t.shadows).map((key) => (
-                <ShadowDemo name={key} shadow={(t.shadows as any)[key]} key={key} />
+              {Object.entries(t.shadows).map(([key, value]) => (
+                <ShadowDemo name={key} shadow={value} key={key} />
               ))}
             </HorizontalGroup>
           </DemoBox>

packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx

@@ -4,7 +4,7 @@ import { DataFrame, TimeRange } from '@grafana/data';
 
 import { withTheme2 } from '../../themes/ThemeContext';
 import { GraphNG, GraphNGProps, PropDiffFn } from '../GraphNG/GraphNG';
-import { PanelContext, PanelContextRoot } from '../PanelChrome/PanelContext';
+import { PanelContextRoot } from '../PanelChrome/PanelContext';
 import { hasVisibleLegendSeries, PlotLegend } from '../uPlot/PlotLegend';
 import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';
 
@@ -16,10 +16,10 @@ type TimeSeriesProps = Omit<GraphNGProps, 'prepConfig' | 'propsToDiff' | 'render
 
 export class UnthemedTimeSeries extends Component<TimeSeriesProps> {
   static contextType = PanelContextRoot;
-  panelContext: PanelContext = {} as PanelContext;
+  declare context: React.ContextType<typeof PanelContextRoot>;
 
   prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => {
-    const { eventBus, eventsScope, sync } = this.context as PanelContext;
+    const { eventBus, eventsScope, sync } = this.context;
     const { theme, timeZone, renderers, tweakAxis, tweakScale } = this.props;
 
     return preparePlotConfigBuilder({