CONSOLE-2501: Upgrade TypeScript version to 4.5 #12821

vojtechszocs · 2023-05-16T17:57:22Z

This PR bumps TypeScript (TS) version used by Console to 4.5 along with bumping other TS related dependencies.

Note that bumping TS beyond 4.5 would yield even more changes in terms of dependencies, code and tool configuration. Therefore, further TS version bumps should be realized via follow-up PRs.

Possible follow-up improvements for improving code quality and dependencies are listed below.

Notable dependency bumps

ts-loader to 8.4.0
fork-ts-checker-webpack-plugin to 6.5.2
TS ESLint plugin & parser to 5.43.0
Prettier to 2.0.5
- its bundled typescript parser could not process newer TS syntax such as export type
- manual override of @typescript-eslint/typescript-estree dependency resolution while keeping Prettier at current version 1.19.1 did not solve this problem
eslint-plugin-react-hooks to 4.1.2
- address TS ESLint parser compatibility issue
- address TS generic symbol parsing issue
eslint-plugin-cypress to 2.11.3
- address TS ESLint parser compatibility issue that would crash ESLint when linting packages/kubevirt-plugin

Notable changes

TS 4.5 is used for the whole monorepo (removed TS dependency in @console/dynamic-plugin-sdk package)
Adapted imports in unit test modules due to TS compiler being more strict about generated code (see here for details)
- related to jest.spyOn which does not work well with TS generated property accessors for module exports
- referring to a specific module directly (e.g. @console/plugin-sdk/src/api/useExtensions instead of @console/plugin-sdk) seems to work around the above mentioned jest.spyOn limitation
Adapted code according to breaking changes in Prettier 2
Code changes due to TS ESLint plugin bump and associated rule changes
- symbol naming rules like @typescript-eslint/camelcase and @typescript-eslint/class-name-casing were replaced by a more general rule @typescript-eslint/naming-convention (see here for the old list and here for the replacement rule docs)
- rule @typescript-eslint/ban-ts-ignore was replaced by @typescript-eslint/ban-ts-comment
Code changes due to eslint-plugin-react-hooks bump
- rule react-hooks/exhaustive-deps now detects more potential issues, code adapted where possible while trying to keep the changes to minimum

Possible follow-up improvements

Review existing ESLint rule disables and adapt code accordingly:
- @typescript-eslint/ban-ts-comment
- @typescript-eslint/no-use-before-define
- @typescript-eslint/naming-convention
- tsdoc/syntax
Bump Jest from 21 to a reasonably recent version, along with related dependencies
Bump ESLint from 6 to a reasonably recent version, along with related dependencies

cc @spadgett @jhadvig

openshift-ci-robot · 2023-05-16T17:57:26Z

@vojtechszocs: This pull request references CONSOLE-2501 which is a valid jira issue.

Details

In response to this:

Related to #10432 and #10604

This PR bumps TypeScript (TS) version used by Console to 4.5 along with bumping other TS related dependencies.

Note that bumping TS beyond 4.5 would yield even more changes in terms of dependencies, code and tool configuration. Therefore, further TS version bumps should be realized via follow-up PRs.

Possible follow-up improvements for improving code quality and dependencies are listed below.

Notable dependency bumps

ts-loader to 8.4.0

fork-ts-checker-webpack-plugin to 6.5.2

TS ESLint plugin & parser to 5.43.0

Prettier to 2.0.5

its bundled typescript parser could not process newer TS syntax such as export type

manual override of @typescript-eslint/typescript-estree dependency resolution while keeping Prettier at current version 1.19.1 did not solve this problem

eslint-plugin-react-hooks to 4.1.2

fix TS ESLint parser compatibility issue

fix TS generic symbol parsing issue

eslint-plugin-cypress to 2.11.3

fix TS ESLint parser compatibility issue that would crash ESLint when linting packages/kubevirt-plugin

Notable changes

TS 4.5 is used for the whole monorepo (removed TS dependency in @console/dynamic-plugin-sdk package)

Adapted imports in unit test modules due to TS compiler being more strict about generated code (see here for details)

related to jest.spyOn which does not work well with TS generated property accessors for module exports

referring to a specific module directly (e.g. @console/plugin-sdk/src/api/useExtensions instead of @console/plugin-sdk) seems to work around the above mentioned jest.spyOn limitation

Adapted code according to breaking changes in Prettier 2

Code changes due to TS ESLint plugin bump and associated rule changes

symbol naming rules like @typescript-eslint/camelcase and @typescript-eslint/class-name-casing were replaced by a more general rule @typescript-eslint/naming-convention (see here for the old list and here for the replacement rule docs)

rule @typescript-eslint/ban-ts-ignore was replaced by @typescript-eslint/ban-ts-comment

Code changes due to eslint-plugin-react-hooks bump

rule react-hooks/exhaustive-deps now detects more potential issues, code adapted where possible while trying to keep the changes to minimum

Possible follow-up improvements

Review existing ESLint rule disables and adapt code accordingly:

@typescript-eslint/ban-ts-comment

@typescript-eslint/no-use-before-define

@typescript-eslint/naming-convention

tsdoc/syntax

Bump Jest from 21 to a reasonably recent version, along with related dependencies

Bump ESLint from 6 to a reasonably recent version, along with related dependencies

cc @spadgett @jhadvig

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

openshift-ci-robot · 2023-05-16T18:04:53Z

@vojtechszocs: This pull request references CONSOLE-2501 which is a valid jira issue.

Details

In response to this:

Related to #10432 and #10604

This PR bumps TypeScript (TS) version used by Console to 4.5 along with bumping other TS related dependencies.

Note that bumping TS beyond 4.5 would yield even more changes in terms of dependencies, code and tool configuration. Therefore, further TS version bumps should be realized via follow-up PRs.

Possible follow-up improvements for improving code quality and dependencies are listed below.

Notable dependency bumps

ts-loader to 8.4.0

fork-ts-checker-webpack-plugin to 6.5.2

TS ESLint plugin & parser to 5.43.0

Prettier to 2.0.5

its bundled typescript parser could not process newer TS syntax such as export type

manual override of @typescript-eslint/typescript-estree dependency resolution while keeping Prettier at current version 1.19.1 did not solve this problem

eslint-plugin-react-hooks to 4.1.2

address TS ESLint parser compatibility issue

address TS generic symbol parsing issue

eslint-plugin-cypress to 2.11.3

address TS ESLint parser compatibility issue that would crash ESLint when linting packages/kubevirt-plugin

Notable changes

TS 4.5 is used for the whole monorepo (removed TS dependency in @console/dynamic-plugin-sdk package)

Adapted imports in unit test modules due to TS compiler being more strict about generated code (see here for details)

related to jest.spyOn which does not work well with TS generated property accessors for module exports

referring to a specific module directly (e.g. @console/plugin-sdk/src/api/useExtensions instead of @console/plugin-sdk) seems to work around the above mentioned jest.spyOn limitation

Adapted code according to breaking changes in Prettier 2

Code changes due to TS ESLint plugin bump and associated rule changes

symbol naming rules like @typescript-eslint/camelcase and @typescript-eslint/class-name-casing were replaced by a more general rule @typescript-eslint/naming-convention (see here for the old list and here for the replacement rule docs)

rule @typescript-eslint/ban-ts-ignore was replaced by @typescript-eslint/ban-ts-comment

Code changes due to eslint-plugin-react-hooks bump

rule react-hooks/exhaustive-deps now detects more potential issues, code adapted where possible while trying to keep the changes to minimum

Possible follow-up improvements

Review existing ESLint rule disables and adapt code accordingly:

@typescript-eslint/ban-ts-comment

@typescript-eslint/no-use-before-define

@typescript-eslint/naming-convention

tsdoc/syntax

Bump Jest from 21 to a reasonably recent version, along with related dependencies

Bump ESLint from 6 to a reasonably recent version, along with related dependencies

cc @spadgett @jhadvig

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

vojtechszocs

Here are some additional comments for reviewers.

vojtechszocs · 2023-05-16T18:13:30Z

frontend/.eslintrc.js

Removed since this option is not supported.

https://github.com/typescript-eslint/typescript-eslint/tree/v5.43.0/packages/parser

vojtechszocs · 2023-05-16T18:16:39Z

frontend/.eslintrc.js

All ESLint configs reconciled to use ecmaVersion: 2018 setting.

vojtechszocs · 2023-05-16T18:17:18Z

frontend/.eslintrc.js

Removed since this option is not supported.

https://github.com/typescript-eslint/typescript-eslint/tree/v5.43.0/packages/parser

vojtechszocs · 2023-05-16T18:28:37Z

frontend/packages/console-dynamic-plugin-sdk/scripts/utils/typescript.ts

This is due to TypeScript lib API change, where comment property of all JSDoc[*] types changed from string to optional string | NodeArray<JSDocComment>.

vojtechszocs · 2023-05-16T18:31:59Z

frontend/packages/console-dynamic-plugin-sdk/src/api/common-types.ts

Using export type fixes an issue in the webpack build, where ts-loader would assume that e.g. ResolvedExtension above is exported as a value, while this symbol actually refers to a type.

vojtechszocs · 2023-05-16T18:50:48Z

frontend/packages/dev-console/integration-tests/support/constants/add.ts

Symbols that violate @typescript-eslint/naming-convention rule but are exported were not renamed to keep the changes at minimum.

vojtechszocs · 2023-05-16T18:58:27Z

frontend/package.json

Above ESLint related dependencies were moved to and reconciled with packages/eslint-plugin-console package manifest.

vojtechszocs · 2023-05-16T19:14:15Z

frontend/packages/kubevirt-plugin/src/hooks/use-ssh-command.ts

Types not used outside the module whose name violates the ESLint naming rule were renamed and the export keyword was removed.

vojtechszocs · 2023-05-16T19:19:23Z

frontend/public/components/overview/cron-job-overview.tsx

This fixes an ESLint tsdoc/syntax error where the rule thinks that @console is an TSDoc tag.

vojtechszocs · 2023-05-16T19:21:17Z

frontend/packages/kubevirt-plugin/src/utils/redux/common.tsx

Using <T,> is better than <T, _> since the latter introduces an unused type parameter.

https://dev.to/tlylt/typescript-generic-function-reported-as-jsx-error-57nf

spadgett

@vojtechszocs Nice work! 👍 No major concerns with the change. Let's make sure we have follow-up issues for tech debt we still want to fix (like updating other packages to the latest).

/approve

spadgett · 2023-05-17T12:22:48Z

frontend/packages/eslint-plugin-console/lib/config/rules/typescript.js

We might open a follow up tech debt story to remove these types for something better.

Agreed, there could be a follow-up task to use better type equivalents.

@typescript-eslint/ban-types rule docs contain suggestions on possible replacement types.

spadgett · 2023-05-17T12:25:11Z

frontend/packages/eslint-plugin-console/package.json

I'm fine not moving to the absolute latest version in this PR to minimize churn, but let's make sure we open follow-up issues to upgrade.

spadgett · 2023-05-17T12:26:27Z

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

Let's make sure we have an issue tracking upgrading the types if we don't already so we can remove these comments. (Not for this PR, though.)

spadgett · 2023-05-17T12:30:45Z

...em/create-storage-system-steps/create-local-volume-set-step/create-local-volume-set-step.tsx

Should we open a follow up issue to fix these? (Or disable this rule globally if we decide it's not a problem?)

For better code consistency, I think we should address all @typescript-eslint/no-use-before-define suppressions as a follow-up task, even though technically both TypeScript compiler and webpack can deal with symbols (types or values) used before they are declared.

The fix for that should be low risk, it's just about moving the relevant code bits.

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

spadgett · 2023-05-17T12:32:54Z

frontend/packages/ceph-storage-plugin/src/components/kms-config/kms-config.tsx

Why not just fix this one?

const kmsProvider: ProviderNames = state.kms?.provider || ProviderNames.VAULT;

This causes

Property 'provider' does not exist on type 'VaultConfig | KMSConfig'.

which indicates a possible typing issue.

I can fix this by casting to any

-const kmsProvider: ProviderNames = state.kms?.['provider'] || ProviderNames.VAULT; +const kmsProvider: ProviderNames = (state.kms as any)?.provider || ProviderNames.VAULT;

Ack, let's open a separate bug to investigate and figure out if it's a problem with the types or a real bug.

spadgett · 2023-05-17T12:47:16Z

frontend/packages/dev-console/src/components/import/jar/UploadJarPage.tsx

nit: We might just fix this one if not exported?

Good catch, will fix.

spadgett · 2023-05-17T12:47:42Z

...end/packages/dev-console/src/components/import/serverless-function/AddServerlessFunction.tsx

nitpick: Fix this one?

Good catch, will fix.

spadgett · 2023-05-17T13:39:22Z

frontend/public/components/RBAC/edit-rule.jsx

Let's open a bug to fix this as a follow up. I'm surprised this works.

spadgett · 2023-05-17T13:44:48Z

frontend/public/components/utils/__tests__/firehose.spec.tsx

Nice, we fixed a bug by adding useMemo?

Not sure what exactly fixed this.. after my changes, the above unit test started failing and then I saw the "Could / Should be the same" comments so I thought it's OK to change these expectations.

jhadvig · 2023-05-23T13:29:38Z

/test e2e-gcp-console

jhadvig · 2023-05-23T13:29:51Z

lets see if the node16 is in place

jhadvig · 2023-05-23T16:08:18Z

/test e2e-gcp-console

spadgett · 2023-05-23T16:44:45Z

/test images

christoph-jerolimov · 2023-05-24T06:21:18Z

/retest

yapei · 2023-05-24T06:36:15Z

@XiyunZhao will verify the changes

jhadvig · 2023-05-24T12:48:03Z

I feel lucky this time 🤞
/test e2e-gcp-console

jhadvig · 2023-05-24T13:15:15Z

Fingers crossed

$ podman run --rm -ti --entrypoint ""  registry.ci.openshift.org/ocp/builder:rhel-8-base-nodejs-openshift-4.14 sh -c "rpm -qa | grep node"

nodejs-16.18.1-3.module+el8.7.0+17465+1a1abd74.x86_64
nodejs-docs-16.18.1-3.module+el8.7.0+17465+1a1abd74.noarch
nodejs-full-i18n-16.18.1-3.module+el8.7.0+17465+1a1abd74.x86_64
nodejs-nodemon-2.0.20-2.module+el8.7.0+17412+bb0e4a6b.noarch

/retest

spadgett · 2023-05-24T14:47:01Z

/test ceph-storage-plugin

jhadvig · 2023-05-24T17:03:09Z

/retest

jhadvig · 2023-05-24T20:16:54Z

/retest

christoph-jerolimov · 2023-05-25T04:56:04Z

/retest

jhadvig · 2023-05-25T07:03:21Z

/test ceph-storage-plugin

jhadvig · 2023-05-25T09:52:44Z

/test ceph-storage-plugin

spadgett · 2023-05-25T11:49:36Z

Do we know if the ceph-storage-plugin tests are working? I don't see any history since they only run when the package is changed. @bipuladh Can you help look?

bipuladh · 2023-05-25T12:06:42Z

@spadgett please override the tests. We have not maintained them in a while. I will send a PR to remove these tests.

jhadvig · 2023-05-25T12:51:30Z

/override ci/prow/ceph-storage-plugin

openshift-ci · 2023-05-25T12:52:26Z

@jhadvig: Overrode contexts on behalf of jhadvig: ci/prow/ceph-storage-plugin

Details

In response to this:

/override ci/prow/ceph-storage-plugin

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

jhadvig · 2023-05-25T12:52:58Z

QE Approver:
/assign @XiyunZhao
Docs Approver:
 /assign @opayne1
PX Approver:
/assign @RickJWagner

opayne1 · 2023-05-25T15:04:56Z

/label docs-approved

RickJWagner · 2023-05-25T18:16:33Z

/label px-approved

XiyunZhao · 2023-05-26T08:35:32Z

A regression test has been triggered for this PR, all the failed case has been checked manually, and no issue was found
In the meantime, no issue was found in the manual testing including basic function checks, build console and etc.
/label qe-approved

openshift-ci · 2023-05-26T10:22:34Z

@vojtechszocs: all tests passed!

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. I understand the commands that are listed here.

openshift-ci-robot added the jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. label May 16, 2023

openshift-merge-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label May 16, 2023

openshift-ci bot requested review from andrewballantyne and christianvogt May 16, 2023 17:59

jhadvig mentioned this pull request May 16, 2023

Block any console repository PR that are not delivering major updates openshift/release#39388

Merged

vojtechszocs commented May 16, 2023

View reviewed changes

jhadvig added the dependency-update/major Issue related to major dependency update label May 17, 2023

spadgett reviewed May 17, 2023

View reviewed changes

openshift-ci bot added the docs-approved Signifies that Docs has signed off on this PR label May 25, 2023

openshift-ci bot added the px-approved Signifies that Product Support has signed off on this PR label May 25, 2023

openshift-ci bot added the qe-approved Signifies that QE has signed off on this PR label May 26, 2023

jhadvig mentioned this pull request May 26, 2023

Unblock console merge queue - Revert of #39388 openshift/release#39774

Merged

openshift-merge-robot merged commit 58589b6 into openshift:master May 26, 2023

kyoto mentioned this pull request Jun 20, 2023

Enable react-hooks/exhaustive-deps eslint rule openshift/monitoring-plugin#50

Merged

logonoff deleted the upgrade-typescript branch September 25, 2025 13:44

CONSOLE-2501: Upgrade TypeScript version to 4.5 #12821

CONSOLE-2501: Upgrade TypeScript version to 4.5 #12821

Conversation

vojtechszocs commented May 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Notable dependency bumps

Notable changes

Possible follow-up improvements

Uh oh!

openshift-ci-robot commented May 16, 2023 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Notable dependency bumps

Notable changes

Possible follow-up improvements

Uh oh!

openshift-ci-robot commented May 16, 2023 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Notable dependency bumps

Notable changes

Possible follow-up improvements

Uh oh!

vojtechszocs left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

spadgett left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vojtechszocs commented May 16, 2023 •

edited

Loading

openshift-ci-robot commented May 16, 2023 •

edited by openshift-ci bot

Loading

openshift-ci-robot commented May 16, 2023 •

edited by openshift-ci bot

Loading