Merge pull request #1657 from alfonsomthd/upgrade-typescript

Upgrade TypeScript & TSLint
red-hat-storage · Nov 7, 2024 · 11a97e5 · 11a97e5
2 parents 7a2324b + 0074ebe
commit 11a97e5
Show file tree

Hide file tree

Showing 74 changed files with 2,189 additions and 1,953 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -31,13 +31,15 @@ module.exports = {
   plugins: ['react', '@typescript-eslint', 'import'],
   rules: {
     'arrow-body-style': 'off',
+    'default-param-last': 'off',
     'dot-notation': 'off',
     'func-names': 'off',
     'import/no-duplicates': 'off',
     'import/no-useless-path-segments': 'off',
     'lines-between-class-members': 'off',
     'no-else-return': 'off',
     'no-extra-boolean-cast': 'off',
+    'no-restricted-exports': 'off',
     'no-unneeded-ternary': 'off',
     'no-useless-computed-key': 'off',
     'no-useless-return': 'off',
@@ -52,7 +54,6 @@ module.exports = {
     'react/jsx-boolean-value': 'off',
     'react/jsx-closing-tag-location': 'off',
     'react/jsx-curly-brace-presence': 'off',
-    'react/jsx-fragments': 'off',
     'react/self-closing-comp': 'off',
     'spaced-comment': 'off',
     'comma-dangle': 'off',
@@ -64,6 +65,10 @@ module.exports = {
     'nonblock-statement-body-position': 'off',
     'react/jsx-curly-newline': 'off',
     'react/jsx-indent': 'off',
+    'react/jsx-no-constructed-context-values': 'off',
+    'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
+    'react/no-unstable-nested-components': 'off',
+    'react/no-unused-prop-types': 'off',
     'consistent-return': 'off',
     'default-case': 'off',
     'global-require': 'off',
@@ -119,6 +124,7 @@ module.exports = {
     'no-undef': 'off',
     'no-underscore-dangle': 'off',
     'no-unreachable': 'off',
+    'no-unsafe-optional-chaining': 'off',
     'no-unused-expressions': 'off',
     'no-use-before-define': 'off',
     'no-useless-catch': 'off',
@@ -133,6 +139,7 @@ module.exports = {
     'react/jsx-props-no-spreading': 'off',
     'react/no-array-index-key': 'off',
     'react/no-unused-state': 'off',
+    'react/require-default-props': 'off',
     'react/sort-comp': 'off',
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': [
@@ -200,4 +207,5 @@ module.exports = {
       version: 'detect',
     },
   },
+  root: true,
 };
diff --git a/cypress/helpers/formValidations.ts b/cypress/helpers/formValidations.ts
@@ -12,7 +12,8 @@ const checkTextFieldInputValidation = (
   value: string = validName,
   className: string = 'rich-input__group--success'
 ) => {
-  cy.byTestID(textFieldDataId).type(value).blur();
+  cy.byTestID(textFieldDataId).type(value);
+  cy.byTestID(textFieldDataId).blur();
   cy.byTestID('field-requirements-input-group').should('have.class', className);
 };
 
@@ -43,7 +44,8 @@ const checkSubmitIsDisabled = (
   nameFieldTestId: string,
   value: string = invalidName
 ) => {
-  cy.byTestID(nameFieldTestId).type(value).blur();
+  cy.byTestID(nameFieldTestId).type(value);
+  cy.byTestID(nameFieldTestId).blur();
   cy.contains('button', buttonText).should('have.attr', 'disabled');
 };
 
@@ -52,7 +54,8 @@ const checkSubmitIsNotDisabled = (
   nameFieldTestId: string,
   value: string = validName
 ) => {
-  cy.byTestID(nameFieldTestId).type(value).blur();
+  cy.byTestID(nameFieldTestId).type(value);
+  cy.byTestID(nameFieldTestId).blur();
   cy.contains('button', buttonText).should('not.have.attr', 'disabled');
 };
 
@@ -61,7 +64,8 @@ const submitForm = (
   nameFieldTestId: string,
   value: string = invalidName
 ) => {
-  cy.byTestID(nameFieldTestId).type(value).blur();
+  cy.byTestID(nameFieldTestId).type(value);
+  cy.byTestID(nameFieldTestId).blur();
   cy.contains('button', buttonText).click();
 };
 

diff --git a/cypress/support/pages/app.ts b/cypress/support/pages/app.ts
@@ -31,13 +31,10 @@ export const projectNameSpace = {
     cy.byTestID('dropdown-menu-item-link').should('have.length.gt', 5);
     // Bug: ODC-6164 - is created related to Accessibility violation - Until bug fix, below line is commented to execute the scripts in CI
     // cy.testA11y('Create Project modal');
-    cy.byTestID('dropdown-text-filter')
-      .clear()
-      .then(() => cy.byTestID('dropdown-text-filter').should('be.empty'))
-      .then(() => cy.byTestID('dropdown-text-filter').type(projectName))
-      .then(() =>
-        cy.byTestID('dropdown-text-filter').should('have.value', projectName)
-      );
+    cy.byTestID('dropdown-text-filter').clear();
+    cy.byTestID('dropdown-text-filter').should('be.empty');
+    cy.byTestID('dropdown-text-filter').type(projectName);
+    cy.byTestID('dropdown-text-filter').should('have.value', projectName);
     cy.get('[data-test-id="namespace-bar-dropdown"] span')
       .first()
       .as('projectNameSpaceDropdown');

diff --git a/cypress/tests/obc-test.spec.ts b/cypress/tests/obc-test.spec.ts
@@ -142,13 +142,15 @@ describe('Tests form validations on Object Bucket Claim', () => {
   fieldValidationOnFormsTests(nameFieldTestId, 'Create', populateObcForm);
 
   it('Should not display error alert on empty obc name and valid required fields submit', () => {
-    cy.byTestID(nameFieldTestId).click().blur();
+    cy.byTestID(nameFieldTestId).click();
+    cy.byTestID(nameFieldTestId).blur();
     populateObcForm();
     cy.contains('button', 'Create').click();
   });
 
   it('Should highlight name field with success style on empty obc name input', () => {
-    cy.byTestID(nameFieldTestId).click().blur();
+    cy.byTestID(nameFieldTestId).click();
+    cy.byTestID(nameFieldTestId).blur();
     cy.byTestID('field-requirements-input-group').should(
       'not.have.class',
       'rich-input__group--invalid'

diff --git a/cypress/tests/object-service-dashboards.spec.ts b/cypress/tests/object-service-dashboards.spec.ts
@@ -11,9 +11,8 @@ describe('Tests Buckets, Status, Object Storage Efficiency, and Resource Provide
   beforeEach(() => {
     ODFCommon.visitStorageDashboard();
     cy.byLegacyTestID('horizontal-link-Storage Systems').first().click();
-    cy.byLegacyTestID('item-filter') // eslint-disable-line cypress/no-unnecessary-waiting
-      .type('ocs-storagecluster-storagesystem')
-      .wait(5000);
+    cy.byLegacyTestID('item-filter').type('ocs-storagecluster-storagesystem');
+    cy.wait(5000); // eslint-disable-line cypress/no-unnecessary-waiting
     cy.byTestRows('resource-row').get('td a').first().click();
     cy.byTestID('horizontal-link-Object').click();
   });

diff --git a/cypress/tests/persistent-dashboard-check.spec.ts b/cypress/tests/persistent-dashboard-check.spec.ts
@@ -34,14 +34,12 @@ describe('Check Persistent Dashboard', () => {
   });
 
   it('Check Details card is correct', () => {
-    cy.byTestID('ocs-link')
-      .contains('Data Foundation')
-      .scrollIntoView()
-      .should('be.visible');
+    cy.byTestID('ocs-link').contains('Data Foundation').scrollIntoView();
+    cy.byTestID('ocs-link').should('be.visible');
     cy.byTestID('detail-item-value')
       .contains('ocs-storagecluster')
-      .scrollIntoView()
-      .should('be.visible');
+      .scrollIntoView();
+    cy.byTestID('detail-item-value').should('be.visible');
     cy.log('Check redirect link goes to operator details page');
     cy.byTestID('ocs-link').click();
     cy.url().should(

diff --git a/cypress/views/bc.ts b/cypress/views/bc.ts
@@ -34,19 +34,19 @@ abstract class BucketClassConfig {
   constructor(public resources: string[], public type: BucketClassType) {}
 }
 
+const createPVCBackingStore = (storeName: string) => {
+  cy.log(`Creating a Backing Store resource named ${storeName}`);
+  cy.exec(
+    `echo '${JSON.stringify(
+      bucketStore(storeName)
+    )}' | kubectl create -n openshift-storage -f -`
+  );
+};
+
 export class StandardBucketClassConfig extends BucketClassConfig {
   tiers: Tier[];
 
-  private createPVCBackingStore = (storeName: string) => {
-    cy.log(`Creating a Backing Store resource named ${storeName}`);
-    cy.exec(
-      `echo '${JSON.stringify(
-        bucketStore(storeName)
-      )}' | kubectl create -n openshift-storage -f -`
-    );
-  };
-
-  setup = () => this.resources.forEach(this.createPVCBackingStore);
+  setup = () => this.resources.forEach(createPVCBackingStore);
 
   cleanup = () => {
     cy.log('Deleting backing stores');
@@ -56,30 +56,30 @@ export class StandardBucketClassConfig extends BucketClassConfig {
   };
 }
 
+const createAWSStore = (name: string, type: StoreType) => {
+  cy.log(
+    `Creating a ${
+      type === StoreType.NamespaceStore ? 'Namespace' : 'Backing'
+    } Store resource named ${name}`
+  );
+
+  cy.exec(
+    `echo '${JSON.stringify(
+      namespaceStore(name, type)
+    )}' | kubectl create -n openshift-storage -f -`
+  );
+};
+
 export class NamespaceBucketClassConfig extends BucketClassConfig {
   namespacePolicyType: NamespacePolicyType;
 
   readonly testBackingStore: string = 'backingstore-test';
 
-  createAWSStore = (name: string, type: StoreType) => {
-    cy.log(
-      `Creating a ${
-        type === StoreType.NamespaceStore ? 'Namespace' : 'Backing'
-      } Store resource named ${name}`
-    );
-
-    cy.exec(
-      `echo '${JSON.stringify(
-        namespaceStore(name, type)
-      )}' | kubectl create -n openshift-storage -f -`
-    );
-  };
-
   setup = () => {
     this.resources.forEach((testResource) =>
-      this.createAWSStore(testResource, StoreType.NamespaceStore)
+      createAWSStore(testResource, StoreType.NamespaceStore)
     );
-    this.createAWSStore(this.testBackingStore, StoreType.BackingStore);
+    createAWSStore(this.testBackingStore, StoreType.BackingStore);
   };
 
   cleanup = () => {
@@ -107,7 +107,8 @@ const tierLevelToButton = (level: number, tier: Tier) =>
 const setGeneralData = (type: BucketClassType) => {
   // be.visible check added to wait for the page to load
   cy.byTestID(`${type.toLowerCase()}-radio`).click();
-  cy.byTestID('bucket-class-name').scrollIntoView().should('be.visible');
+  cy.byTestID('bucket-class-name').scrollIntoView();
+  cy.byTestID('bucket-class-name').should('be.visible');
   cy.byTestID('bucket-class-name').type(bcName);
   cy.byTestID('bucket-class-description').type(bcDescription);
 };

diff --git a/cypress/views/block-pool.ts b/cypress/views/block-pool.ts
@@ -31,7 +31,8 @@ export const navigateToBlockPool = () => {
 };
 
 export const populateBlockPoolForm = () => {
-  cy.byTestID('new-pool-name-textbox').clear().type(poolName);
+  cy.byTestID('new-pool-name-textbox').clear();
+  cy.byTestID('new-pool-name-textbox').type(poolName);
   cy.byTestID('replica-dropdown').click();
   cy.byLegacyTestID('replica-dropdown-item')
     .contains(`${replicaCount}-way Replication`)
@@ -68,7 +69,8 @@ export const verifyFooterActions = (action: string) => {
       break;
     default:
       cy.log(`Invoke ${action} action`);
-      cy.byLegacyTestID('confirm-action').scrollIntoView().click();
+      cy.byLegacyTestID('confirm-action').scrollIntoView();
+      cy.byLegacyTestID('confirm-action').click();
   }
 };
 
@@ -114,7 +116,8 @@ export const openBlockPoolKebab = (
   targetPoolName: string,
   isDefaultPool = false
 ) => {
-  cy.byLegacyTestID('item-filter').clear().type(targetPoolName);
+  cy.byLegacyTestID('item-filter').clear();
+  cy.byLegacyTestID('item-filter').type(targetPoolName);
   cy.log('Only one resource should be present after filtering');
   cy.byTestID('kebab-button').should('have.length', 1);
   if (isDefaultPool) cy.byTestID('kebab-button').should('be.disabled');

diff --git a/cypress/views/multiple-storageclass.ts b/cypress/views/multiple-storageclass.ts
@@ -26,10 +26,8 @@ export const fetchWorkerNodesJson = () =>
 
 export const addCapacity = (scName: string) => {
   cy.byLegacyTestID('item-filter').clear();
-  // eslint-disable-next-line cypress/no-unnecessary-waiting
-  cy.byLegacyTestID('item-filter')
-    .type('ocs-storagecluster-storagesystem')
-    .wait(1000);
+  cy.byLegacyTestID('item-filter').type('ocs-storagecluster-storagesystem');
+  cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
   cy.byTestID('kebab-button').click();
   cy.contains('Add Capacity').click();
   // eslint-disable-next-line cypress/no-unnecessary-waiting

diff --git a/cypress/views/pvc.ts b/cypress/views/pvc.ts
@@ -10,7 +10,8 @@ export const pvc = {
     // eslint-disable-next-line cypress/require-data-selectors
     cy.get(`#${storageClass}-link`).click();
     cy.byTestID('pvc-name').type(name);
-    cy.byTestID('pvc-size').type('{moveToEnd}').type(size);
+    cy.byTestID('pvc-size').type('{moveToEnd}');
+    cy.byTestID('pvc-size').type(size);
     if (mode === 'Block') {
       cy.byTestID('Block-radio-input').click();
     }
@@ -20,10 +21,9 @@ export const pvc = {
   expandPVC: (expansionSize) => {
     cy.byLegacyTestID('actions-menu-button').click();
     cy.byTestActionID('Expand PVC').click();
-    cy.byTestID('pvc-expand-size-input')
-      .clear()
-      .type('{moveToEnd}')
-      .type(expansionSize);
+    cy.byTestID('pvc-expand-size-input').clear();
+    cy.byTestID('pvc-expand-size-input').type('{moveToEnd}');
+    cy.byTestID('pvc-expand-size-input').type(expansionSize);
     cy.byTestID('confirm-action').click();
   },
 };

diff --git a/cypress/views/storage-pool.ts b/cypress/views/storage-pool.ts
@@ -86,7 +86,8 @@ export const checkStoragePoolIsSelectableInSCForm = (poolName: string) => {
 
 export const fillStoragePoolForm = (poolType: POOL_TYPE, poolName: string) => {
   cy.byTestID(`type-${poolType.toLowerCase()}`).click();
-  cy.byTestID('new-pool-name-textbox').clear().type(poolName);
+  cy.byTestID('new-pool-name-textbox').clear();
+  cy.byTestID('new-pool-name-textbox').type(poolName);
   cy.byTestID('replica-dropdown').click();
   cy.byLegacyTestID('replica-dropdown-item')
     .contains(`${replicaCount}-way Replication`)
@@ -123,7 +124,8 @@ export const triggerPoolFormFooterAction = (action: string) => {
       break;
     default:
       cy.log(`Invoke ${action} action`);
-      cy.byLegacyTestID('confirm-action').scrollIntoView().click();
+      cy.byLegacyTestID('confirm-action').scrollIntoView();
+      cy.byLegacyTestID('confirm-action').click();
   }
 };
 
@@ -166,7 +168,8 @@ export const openStoragePoolKebab = (
   targetPoolName: string,
   isDefaultPool = false
 ) => {
-  cy.byLegacyTestID('item-filter').clear().type(targetPoolName);
+  cy.byLegacyTestID('item-filter').clear();
+  cy.byLegacyTestID('item-filter').type(targetPoolName);
   cy.log('Only one resource should be present after filtering');
   cy.byTestID('kebab-button').should('have.length', 1);
   if (isDefaultPool) cy.byTestID('kebab-button').should('be.disabled');
@@ -182,6 +185,7 @@ export const deleteStoragePool = (poolName: string) => {
   triggerPoolFormFooterAction('delete');
 
   cy.log('Verify that the pool is not found.');
-  cy.byLegacyTestID('item-filter').clear().type(poolName);
+  cy.byLegacyTestID('item-filter').clear();
+  cy.byLegacyTestID('item-filter').type(poolName);
   cy.byTestID('kebab-button').should('have.length', 0);
 };
diff --git a/jest/setup.ts b/jest/setup.ts
@@ -14,7 +14,7 @@ jest.mock('react-i18next', () => ({
     return {
       t: (str) => str,
       i18n: {
-        changeLanguage: () => new Promise(() => null),
+        changeLanguage: () => Promise.resolve(),
       },
     };
   },

diff --git a/locales/en/plugin__odf-console.json b/locales/en/plugin__odf-console.json
@@ -376,7 +376,7 @@
   "Enroll application": "Enroll application",
   "Application already enrolled in disaster recovery": "Application already enrolled in disaster recovery",
   "No assigned disaster recovery policy found": "No assigned disaster recovery policy found",
-  "<0>This managed application namespace is already DR protected. You may have protected this namespace while enrolling discovered applications.</0><1>To see disaster recovery information for your applications, go to <1>Protected applications</1> under <3>Disaster Recovery</3>.</1>": "<0>This managed application namespace is already DR protected. You may have protected this namespace while enrolling discovered applications.</0><1>To see disaster recovery information for your applications, go to <1>Protected applications</1> under <3>Disaster Recovery</3>.</1>",
+  "<0>This managed application namespace is already DR protected. You may have protected this namespace while enrolling discovered applications.</0><1>To see disaster recovery information for your applications, go to<1>Protected applications</1> under <3>Disaster Recovery</3>.</1>": "<0>This managed application namespace is already DR protected. You may have protected this namespace while enrolling discovered applications.</0><1>To see disaster recovery information for your applications, go to<1>Protected applications</1> under <3>Disaster Recovery</3>.</1>",
   "You have not enrolled this application yet. To protect your application,": "You have not enrolled this application yet. To protect your application,",
   "Disaster recovery policy details": "Disaster recovery policy details",
   "Name: {{name}} ({{status}})": "Name: {{name}} ({{status}})",