fix(frontend): Batch upgrade for fundamental dependency blocks. (Node, CRA, tailwind and more) Fix #7148

[zijianjoy]

Description of your changes:

TLDR

Main goal is to fix the frontend image build issue caused by absence of postcss. Focus on the package.json and the config files changes. The typescript changes are introduced mainly because of Node 12->14 upgrade. There is no feature change.

The origin issue

Frontend image build and local build have encountered issue : #7148

Background

postcss is being used as part of the integration with tailwindcss. Because we are using Create-React-App (CRA) 4, which is not compatible with Webpack 5 and tailwindcss2. That was the original reason we used the postcss 7 compatible installation: https://v2.tailwindcss.com/docs/guides/create-react-app#setting-up-tailwind-css.

Fix

tailwindcss v2->v3

I have tried the compatibility issue by reverting to an older version of postcss7-compat for tailwindcss #7146. But that is not successful and tailwindcss has dropped support for postcss7 as they have started tailwindcss v3: tailwindlabs/tailwindcss#5064. And they suggest users to migrate to postcss 8.
https://stackoverflow.com/questions/64925926/error-postcss-plugin-tailwindcss-requires-postcss-8

Create-React-App v4->v5

As the upgrade of tailwindcss v3, we also need to upgrade react-scripts which is the CRA dependency to v5: https://github.com/facebook/create-react-app/releases/tag/v5.0.0. Because of this upgrade, CRA has dropped support for Node 12. We are currently on Node 12. Also, craco doesn't support CRA 5 yet.

https://tailwindcss.com/docs/guides/create-react-app
tailwindlabs/tailwindcss#6019

Node 12->14

Node 12 is on maintenance mode and will deprecate support in April 2022. Therefore I upgraded to Node 14. With the upgrade, we are facing a set of new issues at Typescript code coming with this version.

Typescript: zlib -> pako

zlib is supposed to be used on the nodejs side. But it was used within decodeCompressedNodes() function. With this Node upgrade, the zlib dependency is not found when building the frontend. I have found a replacement which is pako and adopted the changes.

Typescript: .eslintrc.yaml

MLMD and storybook don't meet with eslint standard, so I excluded them in the .eslintrc.yaml, because MLMD is auto generated from third-party, and storybook is for development use only.

Typescript: tsconfig.yaml

Exclude test files from npm run build, so it won't yield many errors which are accumulated during the beginning of development. facebook/create-react-app#5626

Typescript: jest

Upgrade jest as needed by new npm. setImmediate is deprecated by new Jest and I replaced with https://stackoverflow.com/questions/44741102/how-to-make-jest-wait-for-all-asynchronous-code-to-finish-execution-before-expec.

Along with this fix, there are many time out issue with the tests that use the promiseflush, so we switch to use legacy fake timers: jestjs/jest#11607

Misc

Because new CRA requires all source code to be under src/, I moved the location of argowork-ui template files to be under src/

Pending items

Still trying to figure out how to make CRA+Webpack5+Storybook combination works. It is because Storybook supports webpack 5, but not compatible with CRA 5 yet. Therefore it will cause problem when running npx sb upgrade. Because storybook is for development only, I prefer to get the current changes in first to unblock KFP 1.8 release. Storybook build is not working currently, we need to follow up with storybook with the material below.

https://storybook.js.org/blog/storybook-6-migration-guide/
https://storybook.js.org/blog/storybook-for-webpack-5/ https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324
https://storybook.js.org/blog/storybook-5-2/
storybookjs/storybook#16150

Checklist:

• The title for your pull request (PR) should follow our title convention. Learn more about the pull request title convention used in this repository.

[zijianjoy]

/test kubeflow-pipeline-e2e-test

[zijianjoy]

/test kubeflow-pipeline-e2e-test

[chensun]

/lgtm

[google-oss-prow]

[APPROVALNOTIFIER] This PR is APPROVED

Approval requirements bypassed by manually added approval.

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment