Update project dependencies (Node → 16, React → 17, @elastic/eui → 63.0.0) #54
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
romanwozniak
requested review from
ariefrahmansyah,
krithika369 and
deadlycoconuts
ariefrahmansyah
approved these changes
Aug 16, 2022
deadlycoconuts
approved these changes
Aug 16, 2022
This was referenced Aug 31, 2022
5 tasks
pradithya
pushed a commit
to caraml-dev/merlin
that referenced
this pull request
Sep 21, 2022
<!-- Thanks for sending a pull request! Here are some tips for you: 1. Run unit tests and ensure that they are passing 2. If your change introduces any API changes, make sure to update the e2e tests 3. Make sure documentation is updated for your PR! --> **What this PR does / why we need it**: <!-- Explain here the context and why you're making the change. What is the problem you're trying to solve. ---> ## Context With the update of `mlp-ui` dependencies in caraml-dev/mlp#54 and caraml-dev/mlp#55 (in particular the update of `Node.js` **14 → 16**, `React` **16 → 17**, `@elastic/eui` **32.3.0 → 66.0.0** and `react-scripts` **to 5.0.1**), there is a need to similarly update Merlin UI, as it uses components from and is dependent on the `mlp-ui` package. For the sdk, joblib version also needs to be updated as the new release resulted in inconsistent versions used by sdk and test cases, thus breaking CI pipeline. ## Main Modifications - Replacement of the existing `Empty` component with the new `Page404` component - Extensive adoption of the new `EuiPageTemplate` (see https://elastic.github.io/eui/#/templates/page-template) to manage page layouts; this replaces the existing usage of `EuiPage`, `EuiPageHeader`, `EuiPageSection`, etc. components - Update of the existing colour palette manually specified to align with those of `v66` of `@elastic/eui` (see https://eui.elastic.co/#/theming/colors/values) - Screenshots of updated UI below: <img width="1559" alt="image" src="https://user-images.githubusercontent.com/2015748/191306313-d4b476b0-03bf-4ee9-bf65-d2cbd392fc59.png"> <img width="1559" alt="image" src="https://user-images.githubusercontent.com/2015748/191306394-eb951ea0-91ad-4797-b66b-92250c7862c3.png"> <img width="1559" alt="image" src="https://user-images.githubusercontent.com/2015748/191306489-a366fab9-c12d-4827-80d8-857c5e0e69ca.png"> <img width="1559" alt="image" src="https://user-images.githubusercontent.com/2015748/191306972-34cdd129-1bcc-4afd-9ad6-37e7e7c6fca2.png"> <img width="1559" alt="image" src="https://user-images.githubusercontent.com/2015748/191307102-89e4bc8e-f66a-4ddf-b55e-6109332e0d0d.png"> **Does this PR introduce a user-facing change?**: <!-- If no, just write "NONE" in the release-note block below. If yes, a release note is required. Enter your extended release note in the block below. If the PR requires additional action from users switching to the new release, include the string "action required". For more information about release notes, see kubernetes' guide here: http://git.k8s.io/community/contributors/guide/release-notes.md --> None ```release-note Upgrade UI Dependencies Versions: Node 14 -> 16, Elastic UI 32 -> 66, React 16 -> 17 Upgrade joblib version to 1.2.0 ``` **Checklist** - [x] Added unit test, integration, and/or e2e tests - [x] Tested locally - [ ] Updated documentation - [ ] Update Swagger spec if the PR introduce API changes - [ ] Regenerated Golang and Python client if the PR introduce API changes
eric-lidong
pushed a commit
to eric-lidong/merlin
that referenced
this pull request
Nov 7, 2022
<!-- Thanks for sending a pull request! Here are some tips for you: 1. Run unit tests and ensure that they are passing 2. If your change introduces any API changes, make sure to update the e2e tests 3. Make sure documentation is updated for your PR! --> **What this PR does / why we need it**: <!-- Explain here the context and why you're making the change. What is the problem you're trying to solve. ---> ## Context With the update of `mlp-ui` dependencies in caraml-dev/mlp#54 and caraml-dev/mlp#55 (in particular the update of `Node.js` **14 → 16**, `React` **16 → 17**, `@elastic/eui` **32.3.0 → 66.0.0** and `react-scripts` **to 5.0.1**), there is a need to similarly update Merlin UI, as it uses components from and is dependent on the `mlp-ui` package. For the sdk, joblib version also needs to be updated as the new release resulted in inconsistent versions used by sdk and test cases, thus breaking CI pipeline. ## Main Modifications - Replacement of the existing `Empty` component with the new `Page404` component - Extensive adoption of the new `EuiPageTemplate` (see https://elastic.github.io/eui/#/templates/page-template) to manage page layouts; this replaces the existing usage of `EuiPage`, `EuiPageHeader`, `EuiPageSection`, etc. components - Update of the existing colour palette manually specified to align with those of `v66` of `@elastic/eui` (see https://eui.elastic.co/#/theming/colors/values) - Screenshots of updated UI below: <img width="1559" alt="image" src="https://user-images.githubusercontent.com/2015748/191306313-d4b476b0-03bf-4ee9-bf65-d2cbd392fc59.png"> <img width="1559" alt="image" src="https://user-images.githubusercontent.com/2015748/191306394-eb951ea0-91ad-4797-b66b-92250c7862c3.png"> <img width="1559" alt="image" src="https://user-images.githubusercontent.com/2015748/191306489-a366fab9-c12d-4827-80d8-857c5e0e69ca.png"> <img width="1559" alt="image" src="https://user-images.githubusercontent.com/2015748/191306972-34cdd129-1bcc-4afd-9ad6-37e7e7c6fca2.png"> <img width="1559" alt="image" src="https://user-images.githubusercontent.com/2015748/191307102-89e4bc8e-f66a-4ddf-b55e-6109332e0d0d.png"> **Does this PR introduce a user-facing change?**: <!-- If no, just write "NONE" in the release-note block below. If yes, a release note is required. Enter your extended release note in the block below. If the PR requires additional action from users switching to the new release, include the string "action required". For more information about release notes, see kubernetes' guide here: http://git.k8s.io/community/contributors/guide/release-notes.md --> None ```release-note Upgrade UI Dependencies Versions: Node 14 -> 16, Elastic UI 32 -> 66, React 16 -> 17 Upgrade joblib version to 1.2.0 ``` **Checklist** - [x] Added unit test, integration, and/or e2e tests - [x] Tested locally - [ ] Updated documentation - [ ] Update Swagger spec if the PR introduce API changes - [ ] Regenerated Golang and Python client if the PR introduce API changes
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Context:
Core MLP UI (shared library and parent SPA) are far behind the latest versions of its main dependencies. This MR is making an attempt to fix this issue as well as to improve some MLP App layouts.
Updated dependencies:
Node.js14 → 16: Node 14 is 2+ years old and its LTS maintenance cycle is due to stop in H1'23React16 → 17: React 17 is a minor and it comes with no new feature, however it enables easier upgrade to React 18@elastic/eui32.3.0 → 63.0.0: Elastic components library follows short release cycles and there are plenty of updates that happened between v32.x and v63.x (Changelog). Most notable changes (affecting MLP) are the introduction of new page layouts withEuiPageTemplate, migration to the new UI theme (Amsterdam) and adoption of the CSS-in-JS approach with@emotion/react.@gojek/mlp-uiupdates:Emptycomponent is renamed toPage404MLP App updates:
@elastic/euiAmsterdam Light themeBefore: After:
. 
Before: After:
