bump typescript to v4.2.4

frontend/.eslintignore

@@ -9,3 +9,4 @@ public/lib
 Godeps
 @types
 dynamic-demo-plugin
+!.eslintrc.js

frontend/.eslintrc.js

@@ -1,4 +1,4 @@
-var fs = require('fs');
+const fs = require('fs');
 
 module.exports = {
   root: true,
@@ -7,6 +7,7 @@ module.exports = {
     es6: true,
     jasmine: true,
     jest: true,
+    node: true,
   },
   extends: [
     'eslint:recommended',
@@ -17,17 +18,6 @@ module.exports = {
     'plugin:console/prettier',
   ],
   parser: '@typescript-eslint/parser',
-  parserOptions: {
-    project: './tsconfig.json',
-    comment: true,
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 2017,
-    extraFileExtensions: ['.json'],
-    sourceType: 'module',
-    tsconfigRootDir: './',
-  },
   plugins: ['react', 'react-hooks', '@typescript-eslint', 'graphql'],
   rules: {
     camelcase: [
@@ -54,13 +44,12 @@ module.exports = {
     'no-global-strict': 0,
     'no-irregular-whitespace': ['error'],
     'no-prototype-builtins': 0, // Disable with exlint v6 update.
-    'no-shadow': ['error'],
     'no-underscore-dangle': 0,
+    'no-redeclare': 'off',
     '@typescript-eslint/no-unused-vars': [
       'error',
       { varsIgnorePattern: 'React', args: 'after-used' },
     ],
-    '@typescript-eslint/no-use-before-define': 2,
     'no-var': 2,
     'object-shorthand': ['error', 'properties'],
     'prefer-const': ['error', { destructuring: 'all' }],
@@ -96,5 +85,13 @@ module.exports = {
   },
   globals: {
     process: 'readonly',
+    React: true,
+    JSX: 'readonly',
+    NodeJS: 'readonly',
+    Subject: 'readonly',
+    Diff: 'readonly',
+    BlobPropertyBag: 'readonly',
+    VoidFunction: 'readonly',
+    RequestInit: 'readonly',
   },
 };

frontend/__tests__/components/safety-first.spec.tsx

@@ -26,7 +26,7 @@ describe('When calling setter from `useState()` hook in an unsafe React componen
 
     let wrapper = mount<Props>(<Unsafe loader={null} />);
     const loader = () =>
-      new Promise((resolve) => {
+      new Promise<void>((resolve) => {
         expect(wrapper.text()).toEqual('Loading...');
         wrapper.unmount();
         resolve();
@@ -67,7 +67,7 @@ describe('useSafetyFirst', () => {
 
   it('does not attempt to set React state if unmounted (using hook)', (done) => {
     const loader = () =>
-      new Promise((resolve) => {
+      new Promise<void>((resolve) => {
         expect(wrapper.text()).toEqual('Loading...');
         wrapper.unmount();
         resolve();
@@ -90,7 +90,7 @@ describe('useSafetyFirst', () => {
 
   it('will set React state if mounted (using hook)', (done) => {
     const loader = () =>
-      new Promise((resolve) => {
+      new Promise<void>((resolve) => {
         expect(wrapper.text()).toEqual('Loading...');
         resolve();
       });

frontend/integration-tests/tests/secrets.scenario.ts

@@ -415,7 +415,7 @@ describe('Add Secret to Workloads', () => {
   describe('Add Secret to Workloads as Enviroment Variables', () => {
     it('Add Secret to Deployment as Env', async () => {
       await secretsView.addSecretToWorkloadAsEnv(resourceName, envPrefix);
-      await new Promise((resolve) =>
+      await new Promise<void>((resolve) =>
         (function checkForValues() {
           const output = secretsView.getResourceJSON(resourceName, testName, resourceKind);
           if (JSON.parse(output).status.observedGeneration === 2) {
@@ -448,7 +448,7 @@ describe('Add Secret to Workloads', () => {
   describe('Add Secret to Workloads as Volume', () => {
     it('Add Secret to Deployment as Vol', async () => {
       await secretsView.addSecretToWorkloadAsVol(resourceName, mountPath);
-      await new Promise((resolve) =>
+      await new Promise<void>((resolve) =>
         (function checkForValues() {
           const output = secretsView.getResourceJSON(resourceName, testName, resourceKind);
           if (JSON.parse(output).status.observedGeneration === 3) {

frontend/package.json

@@ -264,14 +264,14 @@
     "eslint-plugin-import": "^2.22.1",
     "file-loader": "1.x",
     "find-up": "4.x",
-    "fork-ts-checker-webpack-plugin": "4.x",
+    "fork-ts-checker-webpack-plugin": "6.x",
     "geckodriver": "1.x",
     "glob": "7.x",
     "glslify-loader": "^2.0.0",
     "graphql-tag": "^2.10.3",
     "html-webpack-plugin": "3.x",
     "husky": "^4.2.5",
-    "i18next-parser": "^3.3.0",
+    "i18next-parser": "^3.x",
     "i18next-pseudo": "^2.2.0",
     "jasmine-console-reporter": "2.x",
     "jasmine-core": "2.x",
@@ -305,9 +305,9 @@
     "style-loader": "^2.0.0",
     "thread-loader": "^3.0.4",
     "ts-jest": "21.x",
-    "ts-loader": "^6.2.2",
-    "ts-node": "5.x",
-    "typescript": "3.8.3",
+    "ts-loader": "~8.3.0",
+    "ts-node": "10.x",
+    "typescript": "^4.2.4",
     "umd-compat-loader": "^2.1.2",
     "webpack": "^4.46.0",
     "webpack-bundle-analyzer": "3.9.x",

frontend/packages/ceph-storage-plugin/integration-tests-cypress/support/index.ts

@@ -15,7 +15,7 @@ import {
 
 declare global {
   namespace Cypress {
-    interface Chainable<Subject> {
+    interface Chainable {
       install(encrypted?: boolean): Chainable<Element>;
     }
   }

frontend/packages/ceph-storage-plugin/src/components/block-pool/body.tsx

@@ -81,7 +81,9 @@ export const BlockPoolBody = (props: BlockPoolBodyPros) => {
   }, [storageCluster, storageClusterLoaded, storageClusterLoadError, dispatch]);
 
   // Volume Type
-  const deviceClasses = cephCluster?.status?.storage?.deviceClasses ?? [];
+  const deviceClasses = React.useMemo(() => {
+    return cephCluster?.status?.storage?.deviceClasses ?? [];
+  }, [cephCluster?.status?.storage?.deviceClasses]);
 
   const setVolumeType = React.useCallback(
     (volumeType: string) =>

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/external-storage/ibm-flashsystem/index.tsx

@@ -166,7 +166,6 @@ export const createFlashSystemPayload: CreatePayload<FlashSystemState> = (
   const storageSecretTemplate: SecretKind = {
     apiVersion: apiVersionForModel(SecretModel),
     stringData: {
-      // eslint-disable-next-line @typescript-eslint/camelcase
       management_address: form.endpoint,
       password: form.password,
       username: form.username,

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/external-storage/red-hat-ceph-storage/index.tsx

@@ -140,7 +140,6 @@ export const rhcsPayload: CreatePayload<RHCSState> = (systemName, state, model)
           namespace: CEPH_STORAGE_NAMESPACE,
         },
         stringData: {
-          // eslint-disable-next-line @typescript-eslint/camelcase
           external_cluster_details: state.fileData,
         },
         type: 'Opaque',

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/footer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';

frontend/packages/ceph-storage-plugin/src/components/dashboards/object-service/data-consumption-card/performance-graph.tsx

@@ -67,7 +67,9 @@ const PerformanceGraph: React.FC<PerformanceGraphProps> = ({
         <PrometheusGraph
           ref={containerRef}
           className={classNames({
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             'nb-perf__graph--short': metricType === Metrics.LATENCY,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             'nb-perf__graph--long': metricType === Metrics.BANDWIDTH,
           })}
         >

frontend/packages/ceph-storage-plugin/src/components/dashboards/ocs-system-dashboard.tsx

@@ -144,21 +144,27 @@ const OCSSystemDashboard: React.FC<DashboardsPageProps> = ({
 
   const showInternalDashboard = !isIndependent && isCephAvailable;
 
-  const internalPage = {
-    href: !isOCS ? `overview/${BLOCK_FILE}` : BLOCK_FILE,
-    name: t('ceph-storage-plugin~Block and File'),
-    component: PersistentInternalDashboard,
-  };
-  const externalPage = {
-    href: !isOCS ? `overview/${BLOCK_FILE}` : BLOCK_FILE,
-    name: t('ceph-storage-plugin~Block and File'),
-    component: PersistentExternalDashboard,
-  };
-  const objectPage = {
-    href: !isOCS ? `overview/${OBJECT}` : OBJECT,
-    name: t('ceph-storage-plugin~Object'),
-    component: ObjectServiceDashboard,
-  };
+  const internalPage = React.useMemo(() => {
+    return {
+      href: !isOCS ? `overview/${BLOCK_FILE}` : BLOCK_FILE,
+      name: t('ceph-storage-plugin~Block and File'),
+      component: PersistentInternalDashboard,
+    };
+  }, [isOCS, t]);
+  const externalPage = React.useMemo(() => {
+    return {
+      href: !isOCS ? `overview/${BLOCK_FILE}` : BLOCK_FILE,
+      name: t('ceph-storage-plugin~Block and File'),
+      component: PersistentExternalDashboard,
+    };
+  }, [isOCS, t]);
+  const objectPage = React.useMemo(() => {
+    return {
+      href: !isOCS ? `overview/${OBJECT}` : OBJECT,
+      name: t('ceph-storage-plugin~Object'),
+      component: ObjectServiceDashboard,
+    };
+  }, [isOCS, t]);
 
   React.useEffect(() => {
     if (showInternalDashboard && !isPagePresent(pages, internalPage)) {

frontend/packages/ceph-storage-plugin/src/components/dashboards/odf-system-dashboard.tsx

@@ -32,14 +32,17 @@ const ODFSystemDashboard: React.FC<ODFSystemDashboardPageProps> = ({
   const dashboardTab = !isCephAvailable && isObjectServiceAvailable ? OBJECT : BLOCK_FILE;
   const defaultDashboard = React.useRef(dashboardTab);
 
-  const pages: Page[] = [
-    {
-      path: 'overview/:dashboard',
-      href: `overview/${defaultDashboard.current}`,
-      name: t('ceph-storage-plugin~Overview'),
-      component: OCSOverview,
-    },
-  ];
+  const pages: Page[] = React.useMemo(
+    () => [
+      {
+        path: 'overview/:dashboard',
+        href: `overview/${defaultDashboard.current}`,
+        name: t('ceph-storage-plugin~Overview'),
+        component: OCSOverview,
+      },
+    ],
+    [t],
+  );
 
   React.useEffect(() => {
     if (isCephAvailable) {

frontend/packages/ceph-storage-plugin/src/components/dashboards/persistent-internal/activity-card/activity-card.tsx

@@ -56,6 +56,7 @@ const RecentEvent = withDashboardResources(
       .map(getName);
     const memoizedPVCNames = useDeepCompareMemoize(validPVC, true);
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const ocsEventsFilter = React.useCallback(isPersistentStorageEvent(memoizedPVCNames), [
       memoizedPVCNames,
     ]);

frontend/packages/ceph-storage-plugin/src/components/disk-inventory/ocs-disks-list.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import * as _ from 'lodash';
 import * as cx from 'classnames';
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: FIXME missing exports due to out-of-sync @types/react-redux version
 import { useSelector } from 'react-redux';
 import {

frontend/packages/ceph-storage-plugin/src/components/noobaa-provider-endpoints/pvc-endpoint-type.tsx

@@ -33,7 +33,7 @@ export const PVCType: React.FC<PVCTypeProps> = ({ state, dispatch }) => {
   };
 
   // Fix for updating the storage class by force rerender
-  const forceUpdate = React.useCallback(() => updateState({}), []);
+  const forceUpdate = React.useCallback(() => updateState(undefined), []);
 
   React.useEffect(() => {
     forceUpdate();

frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices-mode/install-wizard.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { match as RouterMatch } from 'react-router';
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { useDispatch } from 'react-redux';
 import {

frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices-mode/install.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { match as RouterMatch } from 'react-router';
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { Alert, Button } from '@patternfly/react-core';
 import { K8sResourceKind, referenceForModel } from '@console/internal/module/k8s';

frontend/packages/ceph-storage-plugin/src/components/ocs-install/external-mode/install.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import * as _ from 'lodash';
 import { match } from 'react-router';
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { useDispatch } from 'react-redux';
 import {
@@ -101,7 +101,6 @@ const CreateExternalCluster = withHandlePromise((props: CreateExternalClusterPro
         namespace: ns,
       },
       stringData: {
-        // eslint-disable-next-line @typescript-eslint/camelcase
         external_cluster_details: fileData,
       },
       type: 'Opaque',

frontend/packages/ceph-storage-plugin/src/components/ocs-install/internal-mode/install-wizard.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';

frontend/packages/ceph-storage-plugin/src/utils/block-pool.tsx

@@ -185,7 +185,7 @@ export const getPoolKindObj = (state: BlockPoolState): StoragePoolKind => ({
     deviceClass: state.volumeType || '',
     failureDomain: state.failureDomain,
     parameters: {
-      compression_mode: state.isCompressed ? COMPRESSION_ON : 'none', // eslint-disable-line @typescript-eslint/camelcase
+      compression_mode: state.isCompressed ? COMPRESSION_ON : 'none',
     },
     replicated: {
       size: Number(state.replicaSize),

frontend/packages/console-app/src/components/cloud-shell/ExecuteCommand.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: FIXME missing exports due to out-of-sync @types/react-redux version
 import { useSelector } from 'react-redux';
 import { useCloudShellCommandDispatch } from '../../redux/actions/cloud-shell-dispatchers';

frontend/packages/console-app/src/components/detect-namespace/__tests__/namespace.spec.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { act } from 'react-dom/test-utils';
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: FIXME missing exports due to out-of-sync @types/react-redux version
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';

frontend/packages/console-app/src/components/detect-namespace/namespace.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: FIXME missing exports due to out-of-sync @types/react-redux version
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';