Skip to content

Commit

Permalink
Ui5 tabs (#2571)
Browse files Browse the repository at this point in the history
* Tabs

* Fix tabs and tests

* Bump images

* Fix test

* Fix background

---------

Co-authored-by: Mateusz Wisniewski <mwisnia97@gmail.com>
  • Loading branch information
akucharska and mrCherry97 authored Sep 14, 2023
1 parent 640b08d commit a1d1151
Show file tree
Hide file tree
Showing 11 changed files with 41 additions and 278 deletions.
2 changes: 1 addition & 1 deletion resources/web/deployment.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
13 changes: 6 additions & 7 deletions src/components/Extensibility/components/Tabs.js
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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}
Expand All @@ -34,9 +33,9 @@ export function Tabs({
{...props}
/>
))}
</BusolaTab>
</Tab>
))}
</BusolaTabs>
</TabContainer>
)}
</>
);
Expand Down
40 changes: 18 additions & 22 deletions src/components/Preferences/Preferences.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 />
Expand All @@ -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>
Expand Down
42 changes: 0 additions & 42 deletions src/shared/components/Tabs/Tab.js

This file was deleted.

5 changes: 0 additions & 5 deletions src/shared/components/Tabs/Tab.scss

This file was deleted.

94 changes: 0 additions & 94 deletions src/shared/components/Tabs/Tabs.js

This file was deleted.

19 changes: 0 additions & 19 deletions src/shared/components/Tabs/Tabs.scss

This file was deleted.

84 changes: 0 additions & 84 deletions src/shared/components/Tabs/test/Tabs.test.js

This file was deleted.

4 changes: 4 additions & 0 deletions src/shared/components/VerticalTabs/VerticalTabs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@

background: var(--sapBackgroundColor);

ul {
padding: 0;
}

& > :first-child {
border-right: 1px solid var(--sapList_GroupHeaderBorderColor);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
Loading

0 comments on commit a1d1151

Please sign in to comment.