Ui5 tabs

resources/web/deployment.yaml

@@ -16,7 +16,7 @@ spec:
     spec:
       containers:
         - name: busola
-          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2573
+          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2571
           imagePullPolicy: Always
           resources:
             requests:

src/components/Extensibility/components/Tabs.js

@@ -1,9 +1,8 @@
 import React from 'react';
 
-import { Tabs as BusolaTabs } from '../../../shared/components/Tabs/Tabs';
-import { Tab as BusolaTab } from '../../../shared/components/Tabs/Tab';
 import { Widget, InlineWidget } from './Widget';
 import { useGetTranslation } from '../helpers';
+import { TabContainer, Tab } from '@ui5/webcomponents-react';
 
 import './Tabs.scss';
 
@@ -19,13 +18,13 @@ export function Tabs({
   return (
     <>
       {Array.isArray(structure?.children) && (
-        <BusolaTabs className="tabs">
+        <TabContainer tabLayout="Inline" contentBackgroundDesign="Transparent">
           {structure.children.map((child, idx) => (
-            <BusolaTab key={idx} title={widgetT(child)}>
+            <Tab key={`tab-wrapper-${idx}`} text={widgetT(child)}>
               {Array.isArray(child?.children) &&
                 child.children.map((def, idx) => (
                   <Widget
-                    key={idx}
+                    key={`tab-content-${idx}`}
                     value={value}
                     structure={def}
                     schema={schema}
@@ -34,9 +33,9 @@ export function Tabs({
                     {...props}
                   />
                 ))}
-            </BusolaTab>
+            </Tab>
           ))}
-        </BusolaTabs>
+        </TabContainer>
       )}
     </>
   );

src/components/Preferences/Preferences.tsx

@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { useRecoilState } from 'recoil';
 
 import { useEventListener } from 'hooks/useEventListener';
-import { Tab } from 'shared/components/Tabs/Tab';
-import { Tabs } from 'shared/components/Tabs/Tabs';
+import { TabContainer, Tab } from '@ui5/webcomponents-react';
+
 import { VerticalTabs } from 'shared/components/VerticalTabs/VerticalTabs';
 import { isPreferencesOpenState } from 'state/preferences/isPreferencesModalOpenAtom';
 
@@ -75,36 +75,33 @@ export function Preferences() {
     >
       <VerticalTabs tabs={tabs} height="100vh">
         <VerticalTabs.Content id={1}>
-          <Tabs className="fd-tabs fd-has-padding-left-regular">
+          <TabContainer
+            tabLayout="Inline"
+            contentBackgroundDesign="Transparent"
+          >
             <Tab
+              style={{ padding: '-16px -32px' }}
               key="theme-settings"
-              id="theme-settings"
-              title={t('settings.theme')}
+              text={t('settings.theme')}
             >
               <ThemeChooser />
             </Tab>
-            <Tab
-              key="language-settings"
-              id="language-settings"
-              title={t('settings.language')}
-            >
+            <Tab key="language-settings" text={t('settings.language')}>
               <LanguageSettings />
             </Tab>
-            <Tab
-              key="other-settings"
-              id="other-settings"
-              title={t('settings.other.title')}
-            >
+            <Tab key="other-settings" text={t('settings.other.title')}>
               <OtherSettings />
             </Tab>
-          </Tabs>
+          </TabContainer>
         </VerticalTabs.Content>
         <VerticalTabs.Content id={2}>
-          <Tabs className="fd-tabs fd-has-padding-left-regular">
+          <TabContainer
+            tabLayout="Inline"
+            contentBackgroundDesign="Transparent"
+          >
             <Tab
               key="cluster-interaction"
-              id="cluster-interaction"
-              title={t('settings.clusters.interaction.title')}
+              text={t('settings.clusters.interaction.title')}
             >
               <div>
                 <NamespaceSettings />
@@ -114,12 +111,11 @@ export function Preferences() {
             </Tab>
             <Tab
               key="resource-validation"
-              id="resource-validation"
-              title={t('settings.clusters.resourcesValidation.title')}
+              text={t('settings.clusters.resourcesValidation.title')}
             >
               <ResourceValidationSettings />
             </Tab>
-          </Tabs>
+          </TabContainer>
         </VerticalTabs.Content>
       </VerticalTabs>
     </Dialog>

src/shared/components/VerticalTabs/VerticalTabs.scss

@@ -4,6 +4,10 @@
 
   background: var(--sapBackgroundColor);
 
+  ul {
+    padding: 0;
+  }
+
   & > :first-child {
     border-right: 1px solid var(--sapList_GroupHeaderBorderColor);
   }

tests/integration/tests/cluster/test-cluster-configuration.spec.js

@@ -72,7 +72,9 @@ context('Test Cluster configuration', () => {
 
     cy.get('[title="Profile"]').click();
 
-    cy.contains('Other').click();
+    cy.contains('Other')
+      .parentsUntil('[role=tab]')
+      .click({ force: true });
 
     cy.get('[role=dialog]')
       .contains('20')