CONSOLE-2501: Upgrade TypeScript version to 4.5

frontend/.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     es6: true,
     jasmine: true,
     jest: true,
+    node: true,
   },
   extends: [
     'eslint:recommended',
@@ -19,13 +20,11 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: './tsconfig.json',
-    comment: true,
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 2017,
+    ecmaVersion: 2018,
     extraFileExtensions: ['.json'],
-    sourceType: 'module',
     tsconfigRootDir: './',
   },
   plugins: ['react', 'react-hooks', '@typescript-eslint', 'graphql', 'eslint-plugin-tsdoc'],
@@ -53,8 +52,9 @@ module.exports = {
     'no-else-return': ['error'],
     'no-global-strict': 0,
     'no-irregular-whitespace': ['error'],
-    'no-prototype-builtins': 0, // Disable with exlint v6 update.
-    'no-shadow': ['error'],
+    'no-prototype-builtins': 0, // Disable with eslint v6 update.
+    'no-shadow': 0,
+    '@typescript-eslint/no-shadow': 'error',
     'no-underscore-dangle': 0,
     '@typescript-eslint/no-unused-vars': [
       'error',
@@ -97,5 +97,13 @@ module.exports = {
   },
   globals: {
     process: 'readonly',
+    React: true,
+    JSX: 'readonly',
+    NodeJS: 'readonly',
+    Subject: 'readonly',
+    Diff: 'readonly',
+    BlobPropertyBag: 'readonly',
+    VoidFunction: 'readonly',
+    RequestInit: 'readonly',
   },
 };

frontend/__tests__/actions/dashboards.spec.ts

@@ -65,7 +65,7 @@ const testIncrementActiveWatch = (watchAction, type, key) => {
 };
 
 describe('dashboards-actions', () => {
-  afterEach(function() {
+  afterEach(function () {
     window.SERVER_FLAGS.prometheusBaseURL = undefined;
   });
 

frontend/__tests__/components/cluster-settings.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { shallow, mount, ShallowWrapper } from 'enzyme';
 import { Alert } from '@patternfly/react-core';
-import * as utils from '@console/internal/components/utils';
+import * as rbacModule from '@console/internal/components/utils/rbac';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import {
   isClusterExternallyManaged,
@@ -73,75 +73,26 @@ describe('Cluster Settings page', () => {
   });
   it('should render the Firehose Component with the props', () => {
     expect(wrapper.find(Firehose).exists()).toBe(true);
-    expect(
-      wrapper
-        .find(Firehose)
-        .at(0)
-        .props().resources.length,
-    ).toBe(1);
-    expect(
-      wrapper
-        .find(Firehose)
-        .at(0)
-        .props().resources[0].kind,
-    ).toBe('config.openshift.io~v1~ClusterVersion');
-    expect(
-      wrapper
-        .find(Firehose)
-        .at(0)
-        .props().resources[0].name,
-    ).toBe('version');
-    expect(
-      wrapper
-        .find(Firehose)
-        .at(0)
-        .props().resources[0].isList,
-    ).toBe(false);
+    expect(wrapper.find(Firehose).at(0).props().resources.length).toBe(1);
+    expect(wrapper.find(Firehose).at(0).props().resources[0].kind).toBe(
+      'config.openshift.io~v1~ClusterVersion',
+    );
+    expect(wrapper.find(Firehose).at(0).props().resources[0].name).toBe('version');
+    expect(wrapper.find(Firehose).at(0).props().resources[0].isList).toBe(false);
   });
   it('should render the HorizontalNav Component with the props', () => {
     expect(wrapper.find(HorizontalNav).exists()).toBe(true);
-    expect(
-      wrapper
-        .find(HorizontalNav)
-        .at(0)
-        .props().pages.length,
-    ).toBe(3);
-    expect(
-      wrapper
-        .find(HorizontalNav)
-        .at(0)
-        .props().pages[0].nameKey,
-    ).toMatch('Details');
-    expect(
-      wrapper
-        .find(HorizontalNav)
-        .at(0)
-        .props().pages[1].nameKey,
-    ).toMatch('ClusterOperators');
-    expect(
-      wrapper
-        .find(HorizontalNav)
-        .at(0)
-        .props().pages[2].nameKey,
-    ).toMatch('Configuration');
-    expect(
-      wrapper
-        .find(HorizontalNav)
-        .at(0)
-        .props().pages[0].component,
-    ).toEqual(ClusterVersionDetailsTable);
-    expect(
-      wrapper
-        .find(HorizontalNav)
-        .at(0)
-        .props().pages[1].component,
-    ).toEqual(ClusterOperatorTabPage);
-    expect(
-      wrapper
-        .find(HorizontalNav)
-        .at(0)
-        .props().pages[2].component,
-    ).toEqual(GlobalConfigPage);
+    expect(wrapper.find(HorizontalNav).at(0).props().pages.length).toBe(3);
+    expect(wrapper.find(HorizontalNav).at(0).props().pages[0].nameKey).toMatch('Details');
+    expect(wrapper.find(HorizontalNav).at(0).props().pages[1].nameKey).toMatch('ClusterOperators');
+    expect(wrapper.find(HorizontalNav).at(0).props().pages[2].nameKey).toMatch('Configuration');
+    expect(wrapper.find(HorizontalNav).at(0).props().pages[0].component).toEqual(
+      ClusterVersionDetailsTable,
+    );
+    expect(wrapper.find(HorizontalNav).at(0).props().pages[1].component).toEqual(
+      ClusterOperatorTabPage,
+    );
+    expect(wrapper.find(HorizontalNav).at(0).props().pages[2].component).toEqual(GlobalConfigPage);
   });
 });
 
@@ -171,18 +122,8 @@ describe('Cluster Version Details Table page', () => {
     expect(wrapper.find(Timestamp).exists()).toBe(true);
   });
   it('should render correct values of ClusterVersionDetailsTable component', () => {
-    expect(
-      wrapper
-        .find(CurrentChannel)
-        .at(0)
-        .props().cv.spec.channel,
-    ).toEqual('stable-4.5');
-    expect(
-      wrapper
-        .find(CurrentVersion)
-        .at(0)
-        .props().cv.status.desired.version,
-    ).toEqual('4.5.2');
+    expect(wrapper.find(CurrentChannel).at(0).props().cv.spec.channel).toEqual('stable-4.5');
+    expect(wrapper.find(CurrentVersion).at(0).props().cv.status.desired.version).toEqual('4.5.2');
     expect(wrapper.find('[data-test-id="cv-details-table-cid"]').text()).toEqual(
       '727841c6-242d-4592-90d1-699925c4cfba',
     );
@@ -191,24 +132,9 @@ describe('Cluster Version Details Table page', () => {
     );
     expect(wrapper.find('[data-test-id="cv-details-table-version"]').text()).toEqual('4.5.2');
     expect(wrapper.find('[data-test-id="cv-details-table-state"]').text()).toEqual('Completed');
-    expect(
-      wrapper
-        .find(ResourceLink)
-        .at(0)
-        .props().name,
-    ).toEqual('version');
-    expect(
-      wrapper
-        .find(Timestamp)
-        .at(0)
-        .props().timestamp,
-    ).toEqual('2020-08-05T17:21:48Z');
-    expect(
-      wrapper
-        .find(Timestamp)
-        .at(1)
-        .props().timestamp,
-    ).toEqual('2020-08-05T17:49:47Z');
+    expect(wrapper.find(ResourceLink).at(0).props().name).toEqual('version');
+    expect(wrapper.find(Timestamp).at(0).props().timestamp).toEqual('2020-08-05T17:21:48Z');
+    expect(wrapper.find(Timestamp).at(1).props().timestamp).toEqual('2020-08-05T17:49:47Z');
   });
 });
 
@@ -337,7 +263,7 @@ describe('Update Link', () => {
   let spyUseAccessReview;
 
   beforeEach(() => {
-    spyUseAccessReview = jest.spyOn(utils, 'useAccessReview');
+    spyUseAccessReview = jest.spyOn(rbacModule, 'useAccessReview');
     spyUseAccessReview.mockReturnValue(true);
     cv = clusterVersionProps;
     wrapper = shallow(<UpdateLink cv={cv} canUpgrade={true} />);
@@ -349,12 +275,9 @@ describe('Update Link', () => {
 
   it('should render Update Link component', () => {
     expect(wrapper.exists()).toBe(true);
-    expect(
-      wrapper
-        .find('[data-test-id="cv-update-button"]')
-        .render()
-        .text(),
-    ).toBe('Select a version');
+    expect(wrapper.find('[data-test-id="cv-update-button"]').render().text()).toBe(
+      'Select a version',
+    );
   });
 });
 
@@ -371,36 +294,16 @@ describe('Updates Graph', () => {
     expect(wrapper.props().cv).toEqual(cv);
   });
   it('should render the value of current channel', () => {
-    expect(
-      wrapper
-        .find(ChannelName)
-        .at(0)
-        .text(),
-    ).toBe('stable-4.5 channel');
+    expect(wrapper.find(ChannelName).at(0).text()).toBe('stable-4.5 channel');
   });
   it('should render the value of current version', () => {
-    expect(
-      wrapper
-        .find(ChannelVersion)
-        .at(0)
-        .text(),
-    ).toBe('4.5.2');
+    expect(wrapper.find(ChannelVersion).at(0).text()).toBe('4.5.2');
   });
   it('should render the value of next available version', () => {
-    expect(
-      wrapper
-        .find(ChannelVersion)
-        .at(1)
-        .text(),
-    ).toBe('4.5.4');
+    expect(wrapper.find(ChannelVersion).at(1).text()).toBe('4.5.4');
   });
   it('should render the value of available channel', () => {
-    expect(
-      wrapper
-        .find(ChannelName)
-        .at(1)
-        .text(),
-    ).toBe('stable-4.6 channel');
+    expect(wrapper.find(ChannelName).at(1).text()).toBe('stable-4.6 channel');
   });
 });
 
@@ -479,18 +382,8 @@ describe('Update In Progress while updating', () => {
   it('should render the child components of UpdateInProgress component', () => {
     expect(wrapper.find(UpdatesProgress)).toHaveLength(1);
     expect(wrapper.find(ClusterOperatorsLink)).toHaveLength(1);
-    expect(
-      wrapper
-        .find(NodesUpdatesGroup)
-        .at(0)
-        .props().name,
-    ).toBe('Control plane');
-    expect(
-      wrapper
-        .find(NodesUpdatesGroup)
-        .at(1)
-        .props().name,
-    ).toBe('Worker');
+    expect(wrapper.find(NodesUpdatesGroup).at(0).props().name).toBe('Control plane');
+    expect(wrapper.find(NodesUpdatesGroup).at(1).props().name).toBe('Worker');
   });
 });
 

frontend/__tests__/components/cluster-settings/basicauth-idp-form.spec.tsx

@@ -13,20 +13,8 @@ import {
 
 export const controlButtonTest = (wrapper: ShallowWrapper) => {
   expect(wrapper.find(ButtonBar).exists()).toBe(true);
-  expect(
-    wrapper
-      .find(Button)
-      .at(0)
-      .childAt(0)
-      .text(),
-  ).toEqual('Add');
-  expect(
-    wrapper
-      .find(Button)
-      .at(1)
-      .childAt(0)
-      .text(),
-  ).toEqual('Cancel');
+  expect(wrapper.find(Button).at(0).childAt(0).text()).toEqual('Add');
+  expect(wrapper.find(Button).at(1).childAt(0).text()).toEqual('Cancel');
 };
 
 describe('Add Identity Provider: BasicAuthentication', () => {

frontend/__tests__/components/cluster-settings/github-idp-form.spec.tsx

@@ -43,17 +43,7 @@ describe('Add Identity Provider: GitHub', () => {
   });
 
   it('should prefill GitHub list input default values as empty', () => {
-    expect(
-      wrapper
-        .find(ListInput)
-        .at(0)
-        .props().initialValues,
-    ).toEqual(undefined);
-    expect(
-      wrapper
-        .find(ListInput)
-        .at(1)
-        .props().initialValues,
-    ).toEqual(undefined);
+    expect(wrapper.find(ListInput).at(0).props().initialValues).toEqual(undefined);
+    expect(wrapper.find(ListInput).at(1).props().initialValues).toEqual(undefined);
   });
 });

frontend/__tests__/components/cluster-settings/ldap-idp-form.spec.tsx

@@ -43,29 +43,9 @@ describe('Add Identity Provider: LDAP', () => {
   });
 
   it('should prefill ldap attribute list input default values', () => {
-    expect(
-      wrapper
-        .find(ListInput)
-        .at(0)
-        .props().initialValues,
-    ).toEqual(['dn']);
-    expect(
-      wrapper
-        .find(ListInput)
-        .at(1)
-        .props().initialValues,
-    ).toEqual(['uid']);
-    expect(
-      wrapper
-        .find(ListInput)
-        .at(2)
-        .props().initialValues,
-    ).toEqual(['cn']);
-    expect(
-      wrapper
-        .find(ListInput)
-        .at(3)
-        .props().initialValues,
-    ).toEqual(undefined);
+    expect(wrapper.find(ListInput).at(0).props().initialValues).toEqual(['dn']);
+    expect(wrapper.find(ListInput).at(1).props().initialValues).toEqual(['uid']);
+    expect(wrapper.find(ListInput).at(2).props().initialValues).toEqual(['cn']);
+    expect(wrapper.find(ListInput).at(3).props().initialValues).toEqual(undefined);
   });
 });