Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CONSOLE-2501: Upgrade TypeScript version to 4.5 #12821

Merged

Conversation

vojtechszocs
Copy link
Contributor

@vojtechszocs vojtechszocs commented May 16, 2023

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

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 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-ci-robot
Copy link
Contributor

openshift-ci-robot commented May 16, 2023

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

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

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-merge-robot 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 openshift-ci bot added component/ceph Related to ceph-storage-plugin component/core Related to console core functionality approved Indicates a PR has been approved by an approver from all required OWNERS files. component/dashboard Related to dashboard component/dev-console Related to dev-console component/git-service Related to git-service component/gitops Related to gitops-plugin component/helm Related to helm-plugin component/insights Related to insights plugin component/knative Related to knative-plugin component/kubevirt Related to kubevirt-plugin component/metal3 Related to metal3-plugin component/monitoring Related to monitoring component/network-attachment-definition Related to network-attachment-definition component/olm Related to OLM component/pipelines Related to pipelines-plugin component/sdk Related to console-plugin-sdk component/shared Related to console-shared component/topology Related to topology kind/cypress Related to Cypress e2e integration testing labels May 16, 2023
@openshift-ci-robot
Copy link
Contributor

openshift-ci-robot commented May 16, 2023

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

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

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.

Copy link
Contributor Author

@vojtechszocs vojtechszocs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here are some additional comments for reviewers.

@@ -19,13 +20,11 @@ module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
project: './tsconfig.json',
comment: true,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2017,
ecmaVersion: 2018,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All ESLint configs reconciled to use ecmaVersion: 2018 setting.

extraFileExtensions: ['.json'],
sourceType: 'module',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

return _.compact(
getJSDoc(node).map((d) => {
if (d.tags) {
return d.tags.map((t) => `@${t.tagName.text} ${t.comment}`).join('\n');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@@ -1,6 +1,6 @@
import { Extension } from '../types';

export { ResolvedExtension } from '../types';
export type { ResolvedExtension } from '../types';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@@ -1,3 +1,5 @@
/* eslint-disable @typescript-eslint/naming-convention */

export enum addOptions {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-graphql": "^4.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-tsdoc": "^0.2.14",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@@ -2,7 +2,7 @@ import { getCloudInitValues, TARGET_PORT } from '../components/ssh-service/SSHFo
import { VMIKind } from '../types';
import { useSSHService2 } from './use-ssh-service';

export type useSSHCommandResult = {
type UseSSHCommandResult = {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@@ -1,5 +1,5 @@
/**
* @deprecated [TopologySideBar] This files has been moved to @console/topology and delete this once all the side panels uses dynamic extensions
* @deprecated [TopologySideBar] This files has been moved to `@console/topology` and delete this once all the side panels uses dynamic extensions
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@@ -4,7 +4,7 @@ let lastID = 0;

const getNextReduxID = () => String(++lastID);

export const withReduxID = <T, _>(Component: React.ComponentType<T>) => {
export const withReduxID = <T,>(Component: React.ComponentType<T>) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

@spadgett spadgett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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

Comment on lines +23 to +25
'{}': false,
Function: false,
object: false,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@@ -9,24 +9,26 @@
"prettier-check": "eslint --print-config ./lib/config/prettier.js | eslint-config-prettier-check"
},
"dependencies": {
"@typescript-eslint/eslint-plugin": "2.11.0",
"@typescript-eslint/parser": "2.11.0",
"@typescript-eslint/eslint-plugin": "5.43.0",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.)

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-use-before-define */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment on lines 46 to 47
// eslint-disable-next-line dot-notation
const kmsProvider: ProviderNames = state.kms?.['provider'] || ProviderNames.VAULT;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not just fix this one?

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines 18 to 19
// eslint-disable-next-line @typescript-eslint/naming-convention
type watchResource = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, will fix.

Comment on lines 31 to 32
// eslint-disable-next-line @typescript-eslint/naming-convention
type watchResource = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: Fix this one?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, will fix.

Comment on lines +301 to 302
// eslint-disable-next-line react-hooks/rules-of-hooks
const { t } = useTranslation();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines -1079 to +1082
expect(lastFirehoseChildProps.pods.data).not.toBe(lastUseResourcesHookResult.pods.data); // Could be the same!
expect(lastFirehoseChildProps.pods.data[0]).not.toBe(lastUseResourcesHookResult.pods.data[0]); // Should be the same!!!
expect(lastFirehoseChildProps.pods.data[1]).not.toBe(lastUseResourcesHookResult.pods.data[1]); // Should be the same!!!
expect(lastFirehoseChildProps.pods.data[2]).not.toBe(lastUseResourcesHookResult.pods.data[2]); // Should be the same!!!
expect(lastFirehoseChildProps.pods.data).toBe(lastUseResourcesHookResult.pods.data);
expect(lastFirehoseChildProps.pods.data[0]).toBe(lastUseResourcesHookResult.pods.data[0]);
expect(lastFirehoseChildProps.pods.data[1]).toBe(lastUseResourcesHookResult.pods.data[1]);
expect(lastFirehoseChildProps.pods.data[2]).toBe(lastUseResourcesHookResult.pods.data[2]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, we fixed a bug by adding useMemo?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@christoph-jerolimov
Copy link
Member

/retest

@jhadvig
Copy link
Member

jhadvig commented May 23, 2023

/test e2e-gcp-console

@jhadvig
Copy link
Member

jhadvig commented May 23, 2023

lets see if the node16 is in place

@jhadvig
Copy link
Member

jhadvig commented May 23, 2023

/test e2e-gcp-console

@spadgett
Copy link
Member

/test images

@christoph-jerolimov
Copy link
Member

/retest

@yapei
Copy link
Contributor

yapei commented May 24, 2023

@XiyunZhao will verify the changes

@jhadvig
Copy link
Member

jhadvig commented May 24, 2023

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

@jhadvig
Copy link
Member

jhadvig commented May 24, 2023

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
Copy link
Member

/test ceph-storage-plugin

@jhadvig
Copy link
Member

jhadvig commented May 24, 2023

/retest

2 similar comments
@jhadvig
Copy link
Member

jhadvig commented May 24, 2023

/retest

@christoph-jerolimov
Copy link
Member

/retest

@jhadvig
Copy link
Member

jhadvig commented May 25, 2023

/test ceph-storage-plugin

1 similar comment
@jhadvig
Copy link
Member

jhadvig commented May 25, 2023

/test ceph-storage-plugin

@spadgett
Copy link
Member

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
Copy link
Contributor

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

@jhadvig
Copy link
Member

jhadvig commented May 25, 2023

/override ci/prow/ceph-storage-plugin

@openshift-ci
Copy link
Contributor

openshift-ci bot commented May 25, 2023

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

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
Copy link
Member

jhadvig commented May 25, 2023

QE Approver:
/assign @XiyunZhao
Docs Approver:

/assign @opayne1
PX Approver:
/assign @RickJWagner

@opayne1
Copy link
Contributor

opayne1 commented May 25, 2023

/label docs-approved

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

/label px-approved

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

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 openshift-ci bot added the qe-approved Signifies that QE has signed off on this PR label May 26, 2023
@openshift-ci
Copy link
Contributor

openshift-ci bot commented May 26, 2023

@vojtechszocs: all tests passed!

Full PR test history. Your PR dashboard.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. component/ceph Related to ceph-storage-plugin component/core Related to console core functionality component/dashboard Related to dashboard component/dev-console Related to dev-console component/git-service Related to git-service component/gitops Related to gitops-plugin component/helm Related to helm-plugin component/insights Related to insights plugin component/knative Related to knative-plugin component/kubevirt Related to kubevirt-plugin component/metal3 Related to metal3-plugin component/monitoring Related to monitoring component/network-attachment-definition Related to network-attachment-definition component/olm Related to OLM component/pipelines Related to pipelines-plugin component/sdk Related to console-plugin-sdk component/shared Related to console-shared component/topology Related to topology dependency-update/major Issue related to major dependency update docs-approved Signifies that Docs has signed off on this PR jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. kind/cypress Related to Cypress e2e integration testing lgtm Indicates that a PR is ready to be merged. px-approved Signifies that Product Support has signed off on this PR qe-approved Signifies that QE has signed off on this PR
Projects
None yet
Development

Successfully merging this pull request may close these issues.