Chore: Upgrade typescript and related packages (#27316)

* Chore: Upgrade typescript and related packages Closes #27115 * Apply suggestions from code review Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * fixes some tests * Fix failing tests * Apply suggestions from code review Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com> Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
2025-02-25 18:55:37 -06:00 · 2020-09-25 15:48:41 +01:00
parent 3b8701a35d
commit d322417217
24 changed files with 701 additions and 468 deletions
--- a/public/app/core/components/Signup/Signup.tsx
+++ b/public/app/core/components/Signup/Signup.tsx
@@ -8,13 +8,13 @@ import appEvents from 'app/core/app_events';
 import { AppEvents } from '@grafana/data';

 interface SignupDTO {
-  name: string;
+  name?: string;
  email: string;
  username: string;
  orgName?: string;
  password: string;
  code: string;
-  confirm: string;
+  confirm?: string;
 }

 interface ConnectedProps {
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
@@ -28,6 +28,7 @@ function mockLocationHref(href: string) {
    search = href.substring(searchPos);
  }

+  //@ts-ignore
  delete window.location;
  (window as any).location = {
    ...location,
--- a/public/app/features/dashboard/state/DashboardModel.ts
+++ b/public/app/features/dashboard/state/DashboardModel.ts
@@ -80,7 +80,7 @@ export class DashboardModel {
  // ------------------

  // repeat process cycles
-  iteration: number;
+  iteration?: number;
  meta: DashboardMeta;
  events: Emitter;

--- a/public/app/features/dashboard/state/PanelQueryRunner.test.ts
+++ b/public/app/features/dashboard/state/PanelQueryRunner.test.ts
@@ -1,3 +1,11 @@
+const applyFieldOverridesMock = jest.fn();
+
+jest.mock('@grafana/data', () => ({
+  __esModule: true,
+  ...(jest.requireActual('@grafana/data') as any),
+  applyFieldOverrides: applyFieldOverridesMock,
+}));
+
 import { PanelQueryRunner } from './PanelQueryRunner';
 // Importing this way to be able to spy on grafana/data
 import * as grafanaData from '@grafana/data';
@@ -131,6 +139,10 @@ function describeQueryRunnerScenario(description: string, scenarioFn: ScenarioFn
 }

 describe('PanelQueryRunner', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
  describeQueryRunnerScenario('simple scenario', ctx => {
    it('should set requestId on request', async () => {
      expect(ctx.queryCalledWith?.requestId).toBe('Q100');
@@ -211,14 +223,12 @@ describe('PanelQueryRunner', () => {
    'field overrides',
    ctx => {
      it('should apply when field override options are set', async () => {
-        const spy = jest.spyOn(grafanaData, 'applyFieldOverrides');
-
        ctx.runner.getData({ withTransforms: true, withFieldConfig: true }).subscribe({
          next: (data: PanelData) => {
            return data;
          },
        });
-        expect(spy).toBeCalled();
+        expect(applyFieldOverridesMock).toBeCalled();
      });
    },
    {
@@ -277,15 +287,13 @@ describe('PanelQueryRunner', () => {
      });

      it('should not apply field config when applyFieldConfig option is false', async () => {
-        const spy = jest.spyOn(grafanaData, 'applyFieldOverrides');
-        spy.mockClear();
        ctx.runner.getData({ withFieldConfig: false, withTransforms: true }).subscribe({
          next: (data: PanelData) => {
            return data;
          },
        });

-        expect(spy).not.toBeCalled();
+        expect(applyFieldOverridesMock).not.toBeCalled();
      });
    },
    {
@@ -322,15 +330,13 @@ describe('PanelQueryRunner', () => {
      });

      it('should not apply field config when applyFieldConfig option is false', async () => {
-        const spy = jest.spyOn(grafanaData, 'applyFieldOverrides');
-        spy.mockClear();
        ctx.runner.getData({ withFieldConfig: false, withTransforms: true }).subscribe({
          next: (data: PanelData) => {
            return data;
          },
        });

-        expect(spy).not.toBeCalled();
+        expect(applyFieldOverridesMock).not.toBeCalled();
      });
    },
    {
--- a/public/app/features/playlist/specs/playlist_srv.test.ts
+++ b/public/app/features/playlist/specs/playlist_srv.test.ts
@@ -44,6 +44,7 @@ const mockWindowLocation = (): [jest.MockInstance<any, any>, () => void] => {

  // JSDom defines window in a way that you cannot tamper with location so this seems to be the only way to change it.
  // https://github.com/facebook/jest/issues/5124#issuecomment-446659510
+  //@ts-ignore
  delete window.location;
  window.location = {} as any;

--- a/public/app/features/variables/query/actions.ts
+++ b/public/app/features/variables/query/actions.ts
@@ -91,7 +91,7 @@ export const initQueryVariableEditor = (identifier: VariableIdentifier): ThunkRe
  if (!variable.datasource) {
    return;
  }
-  dispatch(changeQueryVariableDataSource(toVariableIdentifier(variable), variable.datasource));
+  await dispatch(changeQueryVariableDataSource(toVariableIdentifier(variable), variable.datasource));
 };

 export const changeQueryVariableDataSource = (
--- a/public/app/features/variables/state/types.ts
+++ b/public/app/features/variables/state/types.ts
@@ -35,7 +35,9 @@ export function toVariablePayload<T extends any = undefined>(
  identifier: VariableIdentifier,
  data?: T
 ): VariablePayload<T>;
+// eslint-disable-next-line
 export function toVariablePayload<T extends any = undefined>(model: VariableModel, data?: T): VariablePayload<T>;
+// eslint-disable-next-line
 export function toVariablePayload<T extends any = undefined>(
  obj: VariableIdentifier | VariableModel,
  data?: T
--- a/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.test.tsx
@@ -20,7 +20,9 @@ describe('ConfigEditor', () => {

  it('should set defaults', () => {
    const options = createDefaultConfigOptions();
+    //@ts-ignore
    delete options.jsonData.esVersion;
+    //@ts-ignore
    delete options.jsonData.timeField;
    delete options.jsonData.maxConcurrentShardRequests;

--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/app_insights/app_insights_datasource.ts
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/app_insights/app_insights_datasource.ts
@@ -72,7 +72,7 @@ export default class AppInsightsDatasource extends DataSourceWithBackend<AzureMo
  }

  applyTemplateVariables(target: AzureMonitorQuery, scopedVars: ScopedVars): Record<string, any> {
-    const item = target.appInsights;
+    const item = target.appInsights!;

    const old: any = item;
    // fix for timeGrainUnit which is a deprecated/removed field name
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/types.ts
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/types.ts
@@ -16,7 +16,7 @@ export interface AzureMonitorQuery extends DataQuery {

  azureMonitor: AzureMetricQuery;
  azureLogAnalytics: AzureLogsQuery;
-  appInsights: ApplicationInsightsQuery;
+  appInsights?: ApplicationInsightsQuery;
  insightsAnalytics: InsightsAnalyticsQuery;
 }

@@ -57,7 +57,7 @@ export interface AzureMetricQuery {
  metricDefinition: string;
  metricNamespace: string;
  metricName: string;
-  timeGrainUnit: string;
+  timeGrainUnit?: string;
  timeGrain: string;
  allowedTimeGrainsMs: number[];
  aggregation: string;
--- a/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
@@ -46,7 +46,7 @@ export class ConfigEditor extends PureComponent<Props> {
  onVersionChanged = (selected: SelectableValue<InfluxVersion>) => {
    const { options, onOptionsChange } = this.props;

-    const copy = {
+    const copy: any = {
      ...options,
      jsonData: {
        ...options.jsonData,
--- a/public/app/plugins/datasource/influxdb/components/InfluxLogsQueryField.test.tsx
+++ b/public/app/plugins/datasource/influxdb/components/InfluxLogsQueryField.test.tsx
@@ -64,7 +64,7 @@ describe('InfluxLogsQueryField', () => {
    const wrapper = getInfluxLogsQueryField();
    // Looks strange but we do async stuff in didMount and this will push the stack at the end of eval loop, effectively
    // waiting for the didMount to finish.
-    await Promise.resolve();
+    await new Promise(resolve => setImmediate(resolve));
    wrapper.update();
    const cascader = wrapper.find(ButtonCascader);
    expect(cascader.prop('options')).toEqual([
--- a/public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx
@@ -1,12 +1,11 @@
-import { mount } from 'enzyme';
 // @ts-ignore
 import RCCascader from 'rc-cascader';
 import React from 'react';
 import PromQlLanguageProvider, { DEFAULT_LOOKUP_METRICS_THRESHOLD } from '../language_provider';
 import PromQueryField, { groupMetricsByPrefix, RECORDING_RULES_GROUP } from './PromQueryField';
-import { ButtonCascader } from '@grafana/ui';
 import { DataSourceInstanceSettings } from '@grafana/data';
 import { PromOptions } from '../types';
+import { fireEvent, render, screen } from '@testing-library/react';

 describe('PromQueryField', () => {
  beforeAll(() => {
@@ -21,7 +20,7 @@ describe('PromQueryField', () => {
      },
    } as unknown) as DataSourceInstanceSettings<PromOptions>;

-    const queryField = mount(
+    const queryField = render(
      <PromQueryField
        // @ts-ignore
        datasource={datasource}
@@ -32,11 +31,11 @@ describe('PromQueryField', () => {
      />
    );

-    expect(queryField.find(ButtonCascader).length).toBe(1);
+    expect(queryField.getAllByRole('button')).toHaveLength(1);
  });

  it('renders a disabled metrics chooser if lookups are disabled in datasource settings', () => {
-    const queryField = mount(
+    const queryField = render(
      <PromQueryField
        // @ts-ignore
        datasource={{ lookupsDisabled: true }}
@@ -47,12 +46,8 @@ describe('PromQueryField', () => {
      />
    );

-    expect(
-      queryField
-        .find(ButtonCascader)
-        .find('button')
-        .props().disabled
-    ).toBe(true);
+    const bcButton = queryField.getByRole('button');
+    expect(bcButton).toBeDisabled();
  });

  it('refreshes metrics when the data source changes', async () => {
@@ -68,7 +63,7 @@ describe('PromQueryField', () => {
      },
    } as unknown) as PromQlLanguageProvider;

-    const queryField = mount(
+    const queryField = render(
      <PromQueryField
        // @ts-ignore
        datasource={{
@@ -80,29 +75,36 @@ describe('PromQueryField', () => {
        history={[]}
      />
    );
-    await Promise.resolve();

-    const cascader = queryField.find<RCCascader>(RCCascader);
-    cascader.simulate('click');
-    const cascaderNode: HTMLElement = cascader.instance().getPopupDOMNode();
-
-    for (const item of Array.from(cascaderNode.getElementsByTagName('li'))) {
-      expect(metrics.includes(item.innerHTML)).toBe(true);
+    let cascader = await queryField.findByRole('button');
+    fireEvent.keyDown(cascader, { keyCode: 40 });
+    let listNodes = screen.getAllByRole('menuitem');
+    for (const node of listNodes) {
+      expect(metrics).toContain(node.innerHTML);
    }

    const changedMetrics = ['baz', 'moo'];
-    queryField.setProps({
-      datasource: {
-        languageProvider: {
-          ...languageProvider,
-          metrics: changedMetrics,
-        },
-      },
-    });
-    await Promise.resolve();
+    queryField.rerender(
+      <PromQueryField
+        datasource={{
+          //@ts-ignore
+          languageProvider: {
+            ...languageProvider,
+            metrics: changedMetrics,
+          },
+        }}
+        query={{ expr: '', refId: '' }}
+        onRunQuery={() => {}}
+        onChange={() => {}}
+        history={[]}
+      />
+    );

-    for (const item of Array.from(cascaderNode.getElementsByTagName('li'))) {
-      expect(changedMetrics.includes(item.innerHTML)).toBe(true);
+    cascader = await queryField.findByRole('button');
+    fireEvent.keyDown(cascader, { keyCode: 40 });
+    listNodes = screen.getAllByRole('menuitem');
+    for (const node of listNodes) {
+      expect(changedMetrics).toContain(node.innerHTML);
    }
  });
 });