fix: Bump UI5 packages and add accessibleName for Tables

package.json

@@ -65,16 +65,16 @@
     "@types/jsonpath": "^0.2.0",
     "@types/pluralize": "^0.0.29",
     "@ui-schema/ui-schema": "^0.4.5",
-    "@ui5/webcomponents": "^2.4.0",
-    "@ui5/webcomponents-base": "^2.4.0",
-    "@ui5/webcomponents-compat": "^2.4.0",
-    "@ui5/webcomponents-fiori": "^2.4.0",
-    "@ui5/webcomponents-icons": "^2.4.0",
-    "@ui5/webcomponents-icons-tnt": "^2.4.0",
-    "@ui5/webcomponents-react": "^2.4.0",
-    "@ui5/webcomponents-react-base": "^2.4.0",
-    "@ui5/webcomponents-react-charts": "^2.4.0",
-    "@ui5/webcomponents-react-compat": "^2.4.0",
+    "@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",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "core-js": "^3.3.6",

src/components/App/ContentWrapper/ContentWrapper.scss

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

src/resources/Namespaces/YamlUpload/ResourceValidationResult.js

@@ -82,7 +82,7 @@ const ValidationWarnings = ({ resource, validationSchema }) => {
               state="Critical"
               className="sap-margin-end-small"
               style={{
-                marginLeft: '-0.3125rem', //set icon in one line with expand arrow. The value from class `--_ui5-v2-4-0_panel_content_padding` is divided by 2
+                marginLeft: '-0.3125rem', //set icon in one line with expand arrow. The value from class `--_ui5-v2-7-0_panel_content_padding` is divided by 2
               }}
             />
             <ValidationWarning warning={warning.message} />

src/shared/components/Dropdown/Dropdown.cy.js

@@ -34,7 +34,7 @@ describe('Dropdown Component', () => {
     cy.mount(<Dropdown {...defaultProps} onSelect={onSelect} />);
 
     cy.get('[data-testid="test-dropdown"]').click();
-    cy.get('ui5-li')
+    cy.get('ui5-cb-item')
       .eq(1)
       .click();
 

src/shared/components/GenericList/GenericList.js

@@ -77,6 +77,7 @@ export const GenericList = ({
   noHideFields,
   customRowClick,
   className = '',
+  accessibleName,
 }) => {
   const navigate = useNavigate();
   searchSettings = { ...defaultSearch, ...searchSettings };
@@ -406,6 +407,7 @@ export const GenericList = ({
       className={className}
     >
       <Table
+        accessibleName={accessibleName ?? title}
         className={`ui5-generic-list ${
           hasDetailsView && filteredEntries.length ? 'cursor-pointer' : ''
         }`}

src/shared/components/ResourcesList/ResourcesList.js

@@ -233,6 +233,7 @@ export function ResourceListRenderer({
   disableHiding,
   displayArrow,
   handleRedirect,
+  accessibleName,
 }) {
   useVersionWarning({
     resourceUrl,
@@ -535,6 +536,9 @@ export function ResourceListRenderer({
             enableColumnLayout={enableColumnLayout}
             disableMargin={disableMargin}
             title={showTitle ? title || prettifiedResourceName : null}
+            accessibleName={
+              accessibleName ?? prettifyNamePlural(resourceTitle, resourceType)
+            }
             actions={actions}
             entries={resources || []}
             headerRenderer={headerRenderer}

src/sidebar/Sidebar.scss

@@ -1,10 +1,10 @@
 :root {
-  --sidebar-padding: var(--_ui5-v2-4-0_side_navigation_padding);
-  --sidebar-width: var(--_ui5-v2-4-0_side_navigation_width);
+  --sidebar-padding: var(--_ui5-v2-7-0_side_navigation_padding);
+  --sidebar-width: var(--_ui5-v2-7-0_side_navigation_width);
 }
 
 .ui5-content-density-compact {
-  --_ui5-v2-4-0_side_navigation_padding: 0.2rem 0.7rem 0.75rem 0.75rem !important;
+  --_ui5-v2-7-0_side_navigation_padding: 0.2rem 0.7rem 0.75rem 0.75rem !important;
 }
 
 .sidebar__content {

src/styles/index.scss

@@ -3,11 +3,11 @@
 @import './wizard-dialog.scss';
 
 :root {
-  --card-box-shadow: var(--_ui5-v2-4-0_card_box_shadow);
-  --card-border: var(--_ui5-v2-4-0_card_border);
-  --card-border-radius: var(--_ui5-v2-4-0_card_border-radius);
-  --card-border: var(--_ui5-v2-4-0_card_border);
-  --ui5-v2-4-0_table_bottom_border: none !important;
+  --card-box-shadow: var(--_ui5-v2-7-0_card_box_shadow);
+  --card-border: var(--_ui5-v2-7-0_card_border);
+  --card-border-radius: var(--_ui5-v2-7-0_card_border-radius);
+  --card-border: var(--_ui5-v2-7-0_card_border);
+  --ui5-v2-7-0_table_bottom_border: none !important;
 }
 
 html {

tests/integration/support/commands.js

@@ -219,8 +219,7 @@ Cypress.Commands.add('changeCluster', clusterName => {
     .find('button[aria-haspopup="menu"][data-ui5-stable="menu"]:visible')
     .click({ force: true });
 
-  cy.get('ui5-list')
-    .find(`[accessible-name="${clusterName}"]:visible`)
+  cy.get(`[accessible-name="${clusterName}"]:visible`)
     .find('span[part="title"]')
     .click({ force: true });
 });

tests/integration/support/helpers.js

@@ -1,14 +1,13 @@
-export function chooseComboboxOption(selector, optionText) {
+export function chooseComboboxOption(selector, optionText, force = false) {
   cy.get(`ui5-combobox${selector}`)
     .find('input')
     .filterWithNoValue()
     .click()
     .type(optionText);
 
-  cy.get('ui5-li:visible')
+  cy.get('ui5-cb-item:visible')
     .contains(optionText)
-    .find('li')
-    .click();
+    .click({ force: force });
 
   return cy.end();
 }

tests/integration/tests/accessibility/test-acc-cron-jobs.spec.js

@@ -120,7 +120,7 @@ context('Accessibility test Cron Jobs', () => {
 
     cy.get('ui5-combobox[value="IfNotPresent"]').click();
 
-    cy.get('ui5-li:visible')
+    cy.get('ui5-cb-item:visible')
       .contains('Always')
       .click();
 

tests/integration/tests/cluster/test-cluster-role-bindings.spec.js

@@ -32,9 +32,8 @@ context('Test Cluster Role Bindings', () => {
       .click()
       .type('admin');
 
-    cy.get('ui5-li:visible')
+    cy.get('ui5-cb-item:visible')
       .contains('cluster-admin')
-      .find('li')
       .click();
 
     cy.get('[accessible-name="User name"]')

tests/integration/tests/cluster/test-command-palette.spec.js

@@ -85,7 +85,8 @@ context('Test Command Palette navigation', () => {
 
     getQueryInput().type('ns/-a');
 
-    cy.get('li')
+    cy.get('ul[class="command-palette-ui__results"]')
+      .find('li')
       .contains('All Namespaces')
       .click();
 

tests/integration/tests/extensibility/ext-test-extensibility.spec.js

@@ -67,7 +67,7 @@ context('Test Extensibility Create/Update', () => {
 
     cy.openCreate();
 
-    chooseComboboxOption('[id="combobox-input"]', 'potato');
+    chooseComboboxOption('[id="combobox-input"]', 'potato', true);
 
     cy.wait(500);
 

tests/integration/tests/extensibility/ext-test-variables.spec.js

@@ -99,11 +99,11 @@ context('Test extensibility variables', () => {
       })
       .click();
 
-    cy.get('ui5-li:visible')
+    cy.get('ui5-cb-item:visible')
       .contains('simple')
       .should('exist');
 
-    cy.get('ui5-li:visible')
+    cy.get('ui5-cb-item:visible')
       .contains('advanced')
       .should('exist');
 
@@ -117,7 +117,7 @@ context('Test extensibility variables', () => {
     );
 
     // test visibility based on var (select 'simple')
-    cy.get('ui5-li:visible')
+    cy.get('ui5-cb-item:visible')
       .contains('simple')
       .click();
 
@@ -134,7 +134,7 @@ context('Test extensibility variables', () => {
       })
       .click();
 
-    cy.get('ui5-li:visible')
+    cy.get('ui5-cb-item:visible')
       .contains('advanced')
       .click();
 
@@ -165,7 +165,7 @@ context('Test extensibility variables', () => {
       .get('ui5-combobox[placeholder="Choose template"]:visible')
       .click();
 
-    cy.get('ui5-li:visible')
+    cy.get('ui5-cb-item:visible')
       .contains('Fixes')
       .click();
 

tests/integration/tests/kyma-namespace/a-run-before.spec.js

@@ -26,9 +26,8 @@ context('Create Namespace', () => {
       .find('ui5-combobox[placeholder="Choose template"]:visible')
       .click();
 
-    cy.get('ui5-responsive-popover:visible')
-      .contains('ui5-li:visible', 'XL (limits: 9Gi, requests: 8.4Gi)')
-      .find('li')
+    cy.get('ui5-cb-item:visible')
+      .find('li', 'XL (limits: 9Gi, requests: 8.4Gi)')
       .click({ force: true });
 
     cy.get('.create-form')

tests/integration/tests/kyma-namespace/test-issuers.spec.js

@@ -68,9 +68,8 @@ context('Test Issuers', () => {
       .clear()
       .type('ACME');
 
-    cy.get('ui5-li:visible')
+    cy.get('ui5-cb-item:visible')
       .contains('ACME')
-      .find('li')
       .click({ force: true });
 
     cy.get('[placeholder="ACME Server URL"]:visible')

tests/integration/tests/namespace/a-run-before.spec.js

@@ -26,9 +26,8 @@ context('Create Namespace', () => {
       .find('ui5-combobox[placeholder="Choose template"]:visible')
       .click();
 
-    cy.get('ui5-responsive-popover:visible')
-      .contains('ui5-li:visible', 'XL (limits: 9Gi, requests: 8.4Gi)')
-      .find('li')
+    cy.get('ui5-cb-item:visible')
+      .find('li', 'XL (limits: 9Gi, requests: 8.4Gi)')
       .click({ force: true });
 
     cy.get('.create-form')

tests/integration/tests/namespace/test-cron-jobs.spec.js

@@ -79,7 +79,7 @@ context('Test Cron Jobs', () => {
 
     cy.get('ui5-combobox[value="IfNotPresent"]').click();
 
-    cy.get('ui5-li:visible')
+    cy.get('ui5-cb-item:visible')
       .contains('Always')
       .click();
 
@@ -145,7 +145,7 @@ context('Test Cron Jobs', () => {
 
     cy.get('ui5-combobox[value="Always"]').click();
 
-    cy.get('ui5-li:visible')
+    cy.get('ui5-cb-item:visible')
       .contains('Never')
       .click();
 

tests/integration/tests/namespace/test-protected-resources.spec.js

@@ -124,12 +124,11 @@ context('Test Protected Resources', () => {
 
     cy.contains('Cluster interaction').click();
 
-    cy.contains(
-      '.preferences-row',
-      'Allow for modification of protected resources',
+    cy.get(
+      'ui5-switch[accessible-name="Allow for modification of protected resources"',
     )
-      .find('ui5-switch')
-      .click();
+      .find('div[role="switch"')
+      .click({ force: true });
 
     cy.contains('Close').click();
   });

tests/integration/tests/namespace/test-resource-validation.spec.js

@@ -53,7 +53,8 @@ context('Test resource validation', () => {
 
     cy.contains('ui5-panel', 'Validate Resources')
       .find('ui5-switch')
-      .click();
+      .find('div[role="switch"')
+      .click({ force: true });
 
     cy.get('ui5-dialog')
       .contains('ui5-button', 'Close')
@@ -72,7 +73,8 @@ context('Test resource validation', () => {
 
     cy.contains('.validate-resources', 'Validate resources')
       .find('ui5-switch')
-      .click();
+      .find('div[role="switch"')
+      .click({ force: true });
 
     cy.get('[data-testid=yaml-cancel]').click();
   });
@@ -94,15 +96,18 @@ context('Test resource validation', () => {
 
     cy.contains('.policy-row', 'Default')
       .find('ui5-switch')
-      .click();
+      .find('div[role="switch"')
+      .click({ force: true });
 
     cy.contains('.policy-row', 'PodSecurityStandardsBaseline')
       .find('ui5-switch')
-      .click();
+      .find('div[role="switch"')
+      .click({ force: true });
 
     cy.contains('.policy-row', 'TestPolicy')
       .find('ui5-switch')
-      .click();
+      .find('div[role="switch"')
+      .click({ force: true });
 
     cy.get('ui5-dialog')
       .contains('ui5-button', 'Close')

tests/integration/tests/namespace/test-service-accounts.spec.js

@@ -115,7 +115,7 @@ context('Test Service Accounts', () => {
       .get('.form-field')
       .find('ui5-icon')
       .click()
-      .get('ui5-list')
+      .get('ui5-cb-item')
       .contains('21600s (6h)')
       .wait(100)
       .click({ force: true });

tests/integration/tests/namespace/test-settings.spec.js

@@ -19,7 +19,8 @@ context('Test app settings and preferences', () => {
 
     cy.contains('.preferences-row', 'Delete without confirmation')
       .find('ui5-switch')
-      .click();
+      .find('div[role="switch"')
+      .click({ force: true });
 
     cy.get('ui5-dialog')
       .contains('ui5-button', 'Close')
@@ -60,7 +61,8 @@ context('Test app settings and preferences', () => {
 
     cy.contains('.preferences-row', 'Delete without confirmation')
       .find('ui5-switch')
-      .click();
+      .find('div[role="switch"')
+      .click({ force: true });
 
     cy.get('ui5-dialog')
       .contains('ui5-button', 'Close')
@@ -109,7 +111,8 @@ context('Test app settings and preferences', () => {
         if (value === 'true' || value === 'checked') {
           cy.contains('.preferences-row', 'Show hidden Namespaces')
             .find('ui5-switch')
-            .click();
+            .find('div[role="switch"')
+            .click({ force: true });
         }
       });