chore: update UI5 from v1 to v2 #3542

mrCherry97 · 2024-12-17T11:33:29Z

Description

Changes proposed in this pull request:

updated all UI5 dependencies to V2
updated React to version 18
refactored components to the UI5 v2 API
adjusted e2e tests
migrated unit and component tests from Vitest to Cypress
replaced spacing from webcomponents-react with corresponding classNames
fixed bugs

Related issue(s)
Closes #3422

Definition of done

The PR's title starts with one of the following prefixes:
- feat: A new feature
- fix: A bug fix
- docs: Documentation only changes
- refactor: A code change that neither fixes a bug nor adds a feature
- test: Adding tests
- chore: Maintainance changes to the build process or auxiliary tools, libraries, workflows, etc.
Related issues are linked. To link internal trackers, use the issue IDs like backlog#4567
Explain clearly why you created the PR and what changes it introduces
All necessary steps are delivered, for example, tests, documentation, merging

* chore: update packages * chore: bump ui5-react * fix: adjust tests to not use enzyme * chore: fix dependencies * fix: remove unused * fix: remove not existing import * chore: add compatibility package

* fix: change render * fix: adjust css names * fix: change imports for Toolbar * fix: change imports for tables * fix: rename list comp. & badge * fix: fix imports

* change some spacing to new classnames * fix merge * pray to god, that everything is working * pray to god, that everything is working * some spacing and iconEnd for ExternalLink * some spacing and iconEnd for SA token * add no-margin class in index.scss * adjust the rest of the spacing * remove unused impott * fix stupid classNames * adjust separatorLine to tsx and use style prop * review changes

* fix: ui5 codemode adjustments * fix: fix imports * fix: fix table imports * fix: fix unused

* fix: adjust dynamicPage * fix: separate actionsBar * fix: fix actions behavior * fix: remove unused * fix: fix classNames * fix: fix empty toolbar & move banners * fix: fix dependency * fix: remove spacing file

* fix: adjust tokens * fix: adjust spacing

* fix: adjust badges type names * fix: fix type mappings * fix: remove console.log

* fix: add 'size' to headers * fix: add size to headers

* remove defaultProps and disableEdit prop from resourcelist * Update src/shared/components/ResourcesList/ResourcesList.js Co-authored-by: Oliwia Gowor <72342415+OliwiaGowor@users.noreply.github.com> --------- Co-authored-by: Oliwia Gowor <72342415+OliwiaGowor@users.noreply.github.com>

* fix: fix styling and alerts * fix: fix unsaved message * fix: fix background in add modules * fix: remove unused * fix: passing props * fix: key error * fix: resources in list

* fix: adjust Preferences modal * fix: move import * fix: opening preferences menu * fix: list props

…e-v2

* fix: key errors * fix: fetch error * fix: monaco worker fix * fix: dynamicPage header error * fix: small fixes * fix: review fixes

* fix: adjust tables * fix: emptyListComp flickering * fix: adjust reset.css

…3524)

* fix: fix flickering on column layout * fix: remove unused * fix: replace DynamicPage with ObjectPage * fix: fix key error * fix: banner height and remove unused * fix: initial render flicker * fix: change to DynamicPage * hotfix * Replace props spread * hotfix * fix: shadow & unused * fix: shadow & sticky tabs * fix: hide button everywhere --------- Co-authored-by: mrCherry97 <mwisnia97@gmail.com> Co-authored-by: akucharska <agata.kucharska@sap.com>

…e-v2

Co-authored-by: Oliwia Gowor <oliwiagowor@gmail.com>

* Fix delete cluster action

* Revert "Merge branch 'main' into ui5-migrate-v2" This reverts commit 79fb867, reversing changes made to 5b7fd61. * fix: selected in lists (#3539) * fix: toasts in dialogs

* fix: adjust tests * fix: adjust more tests * fix: selected in list * comment out rebase action * comment out rebase action v2 * fix: create namespace * fix: adjust comboboxes * fix: adjust tests * fix: add wait * cleanup

…e-v2

* fix: small fixes * fix: ProgressIndicator colors * fix: sidebar z-index * fix: acc tests * fix: more acc

…e-v2

* cypress config for component testing * first tests migration * migrated badge tests * migrated generic list * migrated counting card * migrated copiable text * migrated namespace settings * migrated ui5radial chart * migrated podrestarts * migrated errorboundary * migrated pagination * migrated listactions * migrated resourcenotfound * migrated modalwithform * migrated helmreleases * migrated selector * migrated ResourceLink * migrated controlledby * mocked ui5 dependencies in nodeQueries test * migrated JoinedArray * migrated CodeViewer * mocked ui5 dependencies in useCreateResource test * mocked ui5 dependencies in useGetCRDByPath * migrated Columns * migrated Widget * mocked ui5 dependencies in linkExtractor * migrated SecretData * migrated SideDrawer * migrated ResourceDetailsColumns * migrated ResourceDetailsVisibility * fixed issues in tests * migrated Table * mocked ui5 dependencies in Widget.copyable * fixed useGet test * refined vitest * adjust github actions workflow * adjust github actions workflow * added command for headless component tests * add cypress as dev dependency * fixed genericList test * adjusted testing-strategy.md * Update docs/contributor/testing-strategy.md Co-authored-by: Iwona Langer <iwona.langer@sap.com> --------- Co-authored-by: Oliwia Gowor <72342415+OliwiaGowor@users.noreply.github.com> Co-authored-by: Iwona Langer <iwona.langer@sap.com>

…e-v2

mrCherry97

Part of the review (253/307 files checked). Please take a look:

CommandPallete shouldn't be able to navigate when Create/Edit modal is filled )please also open an issue to add this to test cases or add it)

Screen.Recording.2025-01-03.at.09.32.02.mov

Something is wrong with Edit form (mostly on Modules view), when I make some changes, and wait for like 5-6 seconds, modal is refreshed to initial state, I can click Add, but there are no changes

Screen.Recording.2025-01-03.at.09.55.28.mov

Presets are not working, clicking arrow is marking Name label, and I can't write anything (we should have to choose some preset in the tests)

Screen.Recording.2025-01-03.at.10.22.14.mov

mrCherry97 · 2025-01-03T08:14:52Z

.github/workflows/pull-integration-cluster-k3d.yml

-      - name: Install Chrome # this step could be removed after https://github.com/cypress-io/cypress/issues/30374 is resolved
-        shell: bash
-        run: |
-          wget --no-verbose -O /tmp/chrome.deb https://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_127.0.6533.119-1_amd64.deb 
-          sudo apt install --allow-downgrades -y /tmp/chrome.deb 
-          rm /tmp/chrome.deb


we can remove it, but it will be nice to have it documented in internal docs, how to do this, in case same problem will appear in the future

mrCherry97 · 2025-01-03T08:16:49Z

index.html

@@ -21,7 +21,7 @@
    <meta name="theme-color" content="#000000" />
    <meta
      http-equiv="Content-Security-Policy"
-      content="font-src 'self' https://sdk.openui5.org/; script-src 'self' blob:; object-src 'self';"
+      content="font-src 'self' https://sdk.openui5.org/; script-src 'self' 'unsafe-eval' blob:; object-src 'self';"


this change should be also on the main, please double-check if there is no problem between the main and feature-branch

mrCherry97 · 2025-01-03T08:18:43Z

.github/workflows/pull-unit-tests.yml

+      - 'src/**'
+      - 'backend/**'
+      - 'package.json'
+      - 'cypress/support/**'


To consider, in my opinion we need to run this workflow every time when something will be changed in whole cypress.

Suggested change

- 'cypress/support/**'

- 'cypress/**'

mrCherry97 · 2025-01-03T08:40:59Z

src/components/Clusters/views/ClusterOverview/ClusterOverview.js

-                ...spacing.sapUiMediumMarginBegin,
-                ...spacing.sapUiMediumMarginTopBottom,
-              }}
+              size="H3"


is level prop necessary? size is impacting styles, looks like level is not making anything

The level prop defines the header level, so it is mainly used for accessibility purposes

mrCherry97 · 2025-01-03T08:41:37Z

src/components/Clusters/views/ClusterOverview/ClusterStats.js

-          ...spacing.sapUiMediumMarginBegin,
-          ...spacing.sapUiMediumMarginTopBottom,
-        }}
+        size="H3"


Same question for all of the Title components
is level prop necessary? size is impacting styles, looks like level is not making anything

mrCherry97 · 2025-01-03T08:54:45Z

src/shared/ResourceForm/components/ModeSelector.js

@@ -27,7 +27,7 @@ export function ModeSelector({ mode, setMode, isDisabled = false }) {
      <SegmentedButton
        className="mode-selector__content"
        onSelectionChange={event => {
-          const mode = event.detail.selectedItem.getAttribute('data-mode');
+          const mode = event.detail.selectedItems[0].getAttribute('data-mode');


are you sure, that hardcoded [0] will be working every time without error?

mrCherry97

Finish of my review.

Something is wrong with dropdowns/options (Check APIRules service dropdown)

Also after choosing some of the option, empty option is displayed

Last option is most of the time empty (API Rules -> Access Strategy):

Check styles of the header in Modules view
New:

Old:

mrCherry97 · 2025-01-03T11:00:14Z

src/shared/components/GenericList/components.js

-      navigated={isSelected}
-      selected={isSelected}
-    >
+    <TableRow type="Active" selected={isSelected}>


Just question, navigated prop should be removed?

mrCherry97 · 2025-01-03T11:11:30Z

src/shared/components/ResourceDetails/ResourceDetails.scss

@@ -24,7 +24,7 @@
  min-width: 200px;
 }

-@container (min-width: 650px) {


Search for the rest of @container and check if it's working, there is 16 results in 10 files

OliwiaGowor and others added 22 commits October 31, 2024 13:44

chore: UI5 bump packages (#3439)

e5930e3

* chore: update packages * chore: bump ui5-react * fix: adjust tests to not use enzyme * chore: fix dependencies * fix: remove unused * fix: remove not existing import * chore: add compatibility package

fix: adjust render, css names and imports (#3440)

527ab33

* fix: change render * fix: adjust css names * fix: change imports for Toolbar * fix: change imports for tables * fix: rename list comp. & badge * fix: fix imports

fix: Ui5 codemod adjustments (#3449)

0ff4119

* fix: ui5 codemode adjustments * fix: fix imports * fix: fix table imports * fix: fix unused

fix: adjust DynamicPageComponent (#3445)

7b1e4dc

* fix: adjust dynamicPage * fix: separate actionsBar * fix: fix actions behavior * fix: remove unused * fix: fix classNames * fix: fix empty toolbar & move banners * fix: fix dependency * fix: remove spacing file

fix: toast adjustments (#3462)

9c39bff

fix: adjust tokens (#3463)

ba9135e

* fix: adjust tokens * fix: adjust spacing

fix: adjust badges (#3464)

ce4764e

* fix: adjust badges type names * fix: fix type mappings * fix: remove console.log

fix: adjust headers size (#3467)

c85f1bd

* fix: add 'size' to headers * fix: add size to headers

fix: spinner size (#3474)

a486ff6

fix: theme (#3475)

c702d0c

fix: adjust forms (#3473)

da69d7c

* fix: fix styling and alerts * fix: fix unsaved message * fix: fix background in add modules * fix: remove unused * fix: passing props * fix: key error * fix: resources in list

fix: adjust Preferences modal (#3476)

57d5921

* fix: adjust Preferences modal * fix: move import * fix: opening preferences menu * fix: list props

Merge branch 'main' of github.com:kyma-project/busola into ui5-migrat…

7a03881

…e-v2

fix: props

dd3e052

fix: objectPageHeader styling and modules card (#3487)

5e543ee

fix: Ui5 console errors (#3486)

bcf9884

* fix: key errors * fix: fetch error * fix: monaco worker fix * fix: dynamicPage header error * fix: small fixes * fix: review fixes

fix: adjust V1 Tables (#3491)

23431fc

* fix: adjust tables * fix: emptyListComp flickering * fix: adjust reset.css

fix: change logo acc name (#3518)

dc93f43

remove unnecessary css code from reset.css & some minor adjustments (#…

3517ff7

…3524)

kyma-bot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. labels Dec 17, 2024

mrCherry97 changed the title ~~Ui5 migrate v2~~ chore: update UI5 from v1 to v2 Dec 17, 2024

Merge branch 'main' of github.com:kyma-project/busola into ui5-migrat…

4120fed

…e-v2

kyma-bot added the cla: yes Indicates the PR's author has signed the CLA. label Dec 17, 2024

mrCherry97 and others added 3 commits December 17, 2024 12:46

fix: selected in lists (#3543)

71908da

Co-authored-by: Oliwia Gowor <oliwiagowor@gmail.com>

fix: Fix delete cluster action (#3540)

049a830

* Fix delete cluster action

fix: Toast is hidden behind Dialogs (#3538)

764bf23

* Revert "Merge branch 'main' into ui5-migrate-v2" This reverts commit 79fb867, reversing changes made to 5b7fd61. * fix: selected in lists (#3539) * fix: toasts in dialogs

mrCherry97 and others added 6 commits December 20, 2024 14:06

Merge branch 'main' into ui5-migrate-v2

445f263

fix: adjust Cypress tests (#3553)

f0cf797

* fix: adjust tests * fix: adjust more tests * fix: selected in list * comment out rebase action * comment out rebase action v2 * fix: create namespace * fix: adjust comboboxes * fix: adjust tests * fix: add wait * cleanup

Merge branch 'main' of github.com:kyma-project/busola into ui5-migrat…

5f41290

…e-v2

chore: add unsafe eval for accessibility tests (#3554)

cedc25c

fix: small leftover bugs (#3555)

413b65f

* fix: small fixes * fix: ProgressIndicator colors * fix: sidebar z-index * fix: acc tests * fix: more acc

Merge branch 'main' of github.com:kyma-project/busola into ui5-migrat…

eb90c63

…e-v2

OliwiaGowor marked this pull request as ready for review December 27, 2024 08:40

OliwiaGowor requested review from akucharska, dbadura, chriskari and OliwiaGowor as code owners December 27, 2024 08:40

kyma-bot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Dec 27, 2024

OliwiaGowor requested a review from a team as a code owner December 30, 2024 10:22

OliwiaGowor and others added 4 commits December 30, 2024 11:36

Merge branch 'main' of github.com:kyma-project/busola into ui5-migrat…

ec75207

…e-v2

Merge branch 'main' of github.com:kyma-project/busola into ui5-migrat…

589bf60

…e-v2

fix: theme on initial and refresh (#3565)

0bace38

Merge branch 'main' of github.com:kyma-project/busola into ui5-migrat…

e9ea9fb

…e-v2

dbadura assigned akucharska, dbadura, mrCherry97, chriskari, KonradPietocha and grego952 Jan 3, 2025

mrCherry97 commented Jan 3, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: update UI5 from v1 to v2 #3542

chore: update UI5 from v1 to v2 #3542

mrCherry97 commented Dec 17, 2024 •

edited by OliwiaGowor

Loading

mrCherry97 left a comment

mrCherry97 Jan 3, 2025

mrCherry97 Jan 3, 2025

mrCherry97 Jan 3, 2025

mrCherry97 Jan 3, 2025

OliwiaGowor Jan 3, 2025

mrCherry97 Jan 3, 2025

mrCherry97 Jan 3, 2025

mrCherry97 left a comment

mrCherry97 Jan 3, 2025

mrCherry97 Jan 3, 2025

chore: update UI5 from v1 to v2 #3542

Are you sure you want to change the base?

chore: update UI5 from v1 to v2 #3542

Conversation

mrCherry97 commented Dec 17, 2024 • edited by OliwiaGowor Loading

mrCherry97 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mrCherry97 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mrCherry97 commented Dec 17, 2024 •

edited by OliwiaGowor

Loading