chore: Bump ui5 webcomponent 2.8 (#3798)

* update ui5 packages

* Adaptation to UI5 changes

* Add style for selection and header for popin

* Adjust columns width

* Test correction

* Test correction

* Test correction

* Test correction

* Test correction

* Correction for test

* PR corrections

* Removing unnecessary scroll

* Fixed header tool clipping

* Style correction

* PR correction

* style correction

* Correct style

* Style correction

* correct padding

Author: KonradPietocha

package-lock.json

@@ -65,16 +65,16 @@
     "@types/pluralize": "^0.0.29",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@ui-schema/ui-schema": "^0.4.5",
-    "@ui5/webcomponents": "^2.7.0",
-    "@ui5/webcomponents-base": "^2.7.0",
-    "@ui5/webcomponents-compat": "^2.7.0",
-    "@ui5/webcomponents-fiori": "^2.7.0",
-    "@ui5/webcomponents-icons": "^2.7.0",
-    "@ui5/webcomponents-icons-tnt": "^2.7.0",
-    "@ui5/webcomponents-react": "^2.7.0",
-    "@ui5/webcomponents-react-base": "^2.7.0",
-    "@ui5/webcomponents-react-charts": "^2.7.0",
-    "@ui5/webcomponents-react-compat": "^2.7.0",
+    "@ui5/webcomponents": "^2.8.0",
+    "@ui5/webcomponents-base": "^2.8.0",
+    "@ui5/webcomponents-compat": "^2.8.0",
+    "@ui5/webcomponents-fiori": "^2.8.0",
+    "@ui5/webcomponents-icons": "^2.8.0",
+    "@ui5/webcomponents-icons-tnt": "^2.8.0",
+    "@ui5/webcomponents-react": "^2.8.1",
+    "@ui5/webcomponents-react-base": "^2.8.1",
+    "@ui5/webcomponents-react-charts": "^2.8.1",
+    "@ui5/webcomponents-react-compat": "^2.8.1",
     "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.2.0",
     "core-js": "^3.41.0",

package.json

@@ -1,5 +1,5 @@
 .command-palette-search-bar {
-  width: var(--_ui5-v2-7-0_input_width) !important;
+  width: var(--_ui5-v2-8-0_input_width) !important;
 }
 
 .ui5-shellbar-mid-content {

src/command-pallette/CommandPalletteUI/CommandPaletteSearchBar.scss

@@ -1,6 +1,6 @@
 .command-palette-ui {
   position: absolute;
-  top: calc(var(--_ui5-v2-7-0_shellbar_root_height) + 0.5rem);
+  top: calc(var(--_ui5-v2-8-0_shellbar_root_height) + 0.5rem);
   width: 100%;
   height: 100%;
 
@@ -15,7 +15,7 @@
     width: 60vw;
     max-width: 700px;
     position: absolute;
-    top: calc(var(--_ui5-v2-7-0_shellbar_root_height) * -1);
+    top: calc(var(--_ui5-v2-8-0_shellbar_root_height) * -1);
     opacity: 0%; //prevent visually jumping
   }
 

src/command-pallette/CommandPalletteUI/CommandPaletteUI.scss

@@ -3,10 +3,6 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
-// this import is necessary for the V1 Tables to work properly,
-// it can be removed after https://github.com/kyma-project/busola/issues/3489 is resolved
-import './UI5Imports';
-
 import { useUrl } from 'hooks/useUrl';
 import { useSentry } from 'hooks/useSentry';
 import { useAppTracking } from 'hooks/tracking';

src/components/App/App.tsx

@@ -1,5 +1,5 @@
 :root {
-  --solidBg: var(--_ui5-v2-7-0_fcl_solid_bg);
+  --solidBg: var(--_ui5-v2-8-0_fcl_solid_bg);
 }
 
 #content-wrap {

src/components/App/ContentWrapper/ContentWrapper.scss

@@ -37,8 +37,8 @@
 }
 
 ui5-wizard::part(step-content) {
-  --_ui5-v2-7-0_wiz_content_item_wrapper_padding: 0;
-  --_ui5-v2-7-0_wiz_content_item_wrapper_bg: transparent;
+  --_ui5-v2-8-0_wiz_content_item_wrapper_padding: 0;
+  --_ui5-v2-8-0_wiz_content_item_wrapper_bg: transparent;
 }
 
 ui5-wizard {

src/components/App/UI5Imports.js

@@ -119,8 +119,7 @@ export function Table({
       cells,
       title: makeTitle(),
       collapseContent: (
-        // TODO replace once new Table component is available in ui5-webcomponents-react
-        <td colSpan="100%" className={tdClassNames}>
+        <div className={tdClassNames}>
           {structure.collapsible.map((child, cellIndex) => (
             <Widget
               {...props}
@@ -136,7 +135,7 @@ export function Table({
               index={index}
             />
           ))}
-        </td>
+        </div>
       ),
     };
   };

src/components/Clusters/components/AddClusterWizard.scss

@@ -5,3 +5,32 @@
     }
   }
 }
+
+ui5-table-row.collapse-content {
+  overflow-x: auto;
+  display: block;
+}
+
+.collapsible-panel {
+  min-width: max-content;
+  position: absolute;
+  display: inherit;
+
+  > :first-child {
+    display: contents;
+    min-width: max-content;
+    overflow: auto;
+
+    &:not(ui5-panel) {
+      display: flex;
+    }
+
+    ui5-text {
+      margin: 0.5rem 1rem;
+    }
+  }
+
+  ui5-table {
+    min-width: max-content;
+  }
+}