Upgrade NPM and Dependancies of UI portals

[Lakith-Rambukkanage]

Problem

The product UI portals are built on Node.js 16.x and the latest LTS version is 20.x (22.x will enter LTS in Oct 2024). Many of the dependancies in the portals are also deprecated or using older versions. This issue will track the effort upgrade dependancies and the node version.

Solution

Upgrade :

• Node version
• dependancies

Affected Component

APIM

Version

4.4.0

Implementation

No response

Related Issues

#2191

Suggested Labels

No response

[Lakith-Rambukkanage]

All three portals were built using node v22.2.0 (npm v10.7.0) and smoke tested. No issues found so far.

Proceeding to update the deprecated dependancies.

[Lakith-Rambukkanage]

Changing @babel/plugin-proposal-foo packages to @babel/plugin-transform-foo

[1] babel/babel#15786 (comment)

[Lakith-Rambukkanage]

Upgraded the dependencies related to babel and smoke tested. No issues found so far.

[Lakith-Rambukkanage]

Update (14-06-2024)

Admin Portal
Reduced the vulnerable dependancies in admin portal
from : 99 vulnerabilities (2 low, 50 moderate, 43 high, 4 critical)
to : 20 vulnerabilities (1 low, 3 moderate, 16 high)

pending :

1. migrate webpack-dev-server from v3 to v5 [1][2]

2. migrate eslint and related packages

     npm init @eslint/config@latest
     npx @eslint/migrate-config .eslintrc.js
   

3. Further clear vulnerable packages and deprecated warnings

4. Upgrade possible remaining libraries to latest version

[1] https://webpack.js.org/migrate/4/
[2] https://webpack.js.org/migrate/5/

[Lakith-Rambukkanage]

[Admin Portal] Update

Upgraded Eslint and web pack in the admin portal. Patched the remaining vulnerabilities and fixed Intl message extraction.

99 vulnerabilities (2 low, 50 moderate, 43 high, 4 critical) => 3 moderate severity vulnerabilities

[Lakith-Rambukkanage]

Note on running :npm run build:prod

The following error cannot be fixed since it's not fix in a the latest version of a dependent library url-js [1]

(node:19163) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

[1] garycourt/uri-js#95

[Lakith-Rambukkanage]

Devportal update

48 vulnerabilities (3 low, 15 moderate, 23 high, 7 critical) => 12 vulnerabilities (6 moderate, 5 high, 1 critical)

Lodash critical vulnerability in graphql-to-postman is yet to be fixed [1]
@stoplight/elements is not yet react 18 supported. this is a breaking change and the warnings cannot be resolved at the moment

[1] postmanlabs/graphql-to-postman#22
[2] stoplightio/elements#2365

[Lakith-Rambukkanage]

Update

Fixed the dev portal swagger UI style rendering issue and related dependancies.
48 vulnerabilities (3 low, 15 moderate, 23 high, 7 critical) => 9 vulnerabilities (3 moderate, 5 high, 1 critical)

The remaining vulnerabilities are from swagger2-postman2-converter and graphql-to-postman libraries which are not maintained or haven't fixed vulnerabilities/deprecations yet.

[Lakith-Rambukkanage]

Admin portal latest log

npm i
npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @humanwhocodes/[email protected]: Use @eslint/config-array instead
npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/[email protected]: Use @eslint/object-schema instead
npm warn deprecated [email protected]: Please switch to @apidevtools/json-schema-ref-parser

added 1514 packages, and audited 1515 packages in 3m

236 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

[Lakith-Rambukkanage]

Publisher portal update

25 vulnerabilities (2 low, 8 moderate, 14 high, 1 critical) => found 0 vulnerabilities

The @stoplight/elements being react 18 incompatible is not fixable ATM

[Lakith-Rambukkanage]

Cannot migrate to ESLint 9 yet since several dependent libraries are not supported yet for the newly introduced flat config and other breaking API changes [1]

airbnb/javascript#2961 (comment)

[Lakith-Rambukkanage]

UI tests

Running UI tests to confirm functionality as usual after the upgrades

First run :

       Spec                                           Tests  Passing  Failing  Pending  Skipped
✖  30 of 115 failed (26%)                 7:31:28      157      118       40        -        -

PS : have intermittent failures due to screensaver and network sleep. Rerunning to validate again

[Lakith-Rambukkanage]

Remaining test cases to verify / fix :

1. devportal/002-subscriptions/01-subscribe-unsubscribe-to-app-from-app.s
2. devportal/002-subscriptions/03-change-subscription-tier-on-an-application.spec.js
3. devportal/004-api-product/00-api-product-invoke-with-keys.spec..skipjs
4. e2e/developerFundamentalScenarios/01-create-api-from-scratch-and-publish.spec.skip.js
5. publisher/000-general/00-deploy-sample-api.spec.js
6. publisher/000-general/03-create-and-publish-graphql-api-with-all-information.spec.js
7. publisher/001-api-create/02-create-api-with-swagger-file-super-tenant.spec.js
8. publisher/001-api-create/03-create-api-with-swagger-url-super-tenant.spec.js
9. publisher/002-api-resources/00-api-resource-create.spec.js
10. publisher/002-api-resources/02-add-assign-global-scopes-for-api.spec.js
11. publisher/005-design-config/02-set-publisher-access-control-and-visibility-by-roles.spec.js
12. publisher/008-business-info/00-business-info.spec.js
13. publisher/011-lifecycle/02-deploy-as-prototype.spec.skip.js
14. publisher/012-documents/00-add-edit-inline-document.spec.js
15. publisher/012-documents/02-view-generated-document-not-rest.spec.js
16. publisher/013-api-product/01-create-product-and-update-underline-api.spec.js
17. publisher/013-api-product/02-create-a-new-revision-for-the-api-product-and-deploy.spec.js
18. publisher/013-api-product/04-lifecycle-support-for-api-products.spec.js
19. publisher/019-read-only-user/00-verify-that-read-only-user-cannot-create-update-api.spec.js
20. publisher/021-api-linter-feature/00-lint-when-creating-api-with-swagger-url.spec.js
21. publisher/021-api-linter-feature/02-lint-when-creating-api-with-swagger-v2-url.spec.js
22. publisher/021-api-linter-feature/06-lint-when-importing-api-with-swagger-url.spec.js
23. publisher/021-api-linter-feature/08-lint-when-importing-api-with-swagger-v2-url.spec.js

[Lakith-Rambukkanage]

All the test cases are passing except for the ones identified as intermittent / BE errors.

[Lakith-Rambukkanage]

Remaining sub tasks to resolve

• Bump url.js version to fix punycode waring in npm run build:prod
• Migrate form field validations from deprecated @hapi/joi to joi and fix breaking changes
• Migrate ESLint from v7 to v9 when related plugins are eslint 9 supported
• Bump swagger2-postman2-converter when released
• Bump graphql-to-postman when released