From e01b952ed2875b5411999dc038fe4c69fb07e870 Mon Sep 17 00:00:00 2001 From: Sodbileg Gansukh Date: Thu, 31 Oct 2024 13:30:25 +0800 Subject: [PATCH] Made the tabs sticky in design and newsletter settings (#21477) ref DES-927, DES-928 --- apps/admin-x-design-system/src/global/TabView.tsx | 15 ++++++++++----- .../email/newsletters/NewsletterDetailModal.tsx | 4 ++-- .../src/components/settings/site/DesignModal.tsx | 8 ++++---- .../test/acceptance/site/design.test.ts | 14 +++++++------- 4 files changed, 23 insertions(+), 18 deletions(-) diff --git a/apps/admin-x-design-system/src/global/TabView.tsx b/apps/admin-x-design-system/src/global/TabView.tsx index e95790c16d..02e19848b0 100644 --- a/apps/admin-x-design-system/src/global/TabView.tsx +++ b/apps/admin-x-design-system/src/global/TabView.tsx @@ -50,7 +50,7 @@ export const TabButton: React.FC = ({ > {icon && } {title} - {(typeof counter === 'number') && + {(typeof counter === 'number') && {new Intl.NumberFormat().format(counter)} @@ -66,7 +66,8 @@ export interface TabListProps { border: boolean; buttonBorder?: boolean; selectedTab?: ID, - topRightContent?: React.ReactNode + topRightContent?: React.ReactNode, + stickyHeader?: boolean } export const TabList: React.FC = ({ @@ -75,7 +76,8 @@ export const TabList: React.FC = ({ handleTabChange, border, buttonBorder, - topRightContent + topRightContent, + stickyHeader }) => { const containerClasses = clsx( 'no-scrollbar mb-px flex w-full overflow-x-auto', @@ -85,7 +87,7 @@ export const TabList: React.FC = ({ border && 'border-b border-grey-300 dark:border-grey-900' ); return ( - +
{tabs.map(tab => (
@@ -117,6 +119,7 @@ export interface TabViewProps { width?: TabWidth; containerClassName?: string; topRightContent?: React.ReactNode; + stickyHeader?: boolean; testId?: string; } @@ -129,7 +132,8 @@ function TabView({ buttonBorder = border, width = 'normal', containerClassName, - topRightContent + topRightContent, + stickyHeader }: TabViewProps) { if (tabs.length !== 0 && selectedTab === undefined) { selectedTab = tabs[0].id; @@ -151,6 +155,7 @@ function TabView({ buttonBorder={buttonBorder} handleTabChange={handleTabChange} selectedTab={selectedTab} + stickyHeader={stickyHeader} tabs={tabs} topRightContent={topRightContent} width={width} diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx index 0b73777146..75d34972db 100644 --- a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx +++ b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx @@ -514,8 +514,8 @@ const Sidebar: React.FC<{ return (
-
- +
+
); diff --git a/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx b/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx index 1250ae7bb6..1651666ea2 100644 --- a/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx +++ b/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx @@ -31,7 +31,7 @@ const Sidebar: React.FC<{ const tabs: Tab[] = [ { id: 'global', - title: 'Global', + title: 'Brand', contents: } ]; @@ -39,7 +39,7 @@ const Sidebar: React.FC<{ if (themeSettingSections.length > 0) { tabs.push({ id: 'theme-settings', - title: 'Theme settings', + title: 'Theme', contents: }); } @@ -51,9 +51,9 @@ const Sidebar: React.FC<{ return (
-
+
{tabs.length > 1 ? - + : } diff --git a/apps/admin-x-settings/test/acceptance/site/design.test.ts b/apps/admin-x-settings/test/acceptance/site/design.test.ts index 3d167cf92c..ba3dd19fef 100644 --- a/apps/admin-x-settings/test/acceptance/site/design.test.ts +++ b/apps/admin-x-settings/test/acceptance/site/design.test.ts @@ -89,7 +89,7 @@ test.describe('Design settings', async () => { await section.getByRole('button', {name: 'Customize'}).click(); - await modal.getByTestId('design-setting-tabs').getByRole('tab', {name: 'Theme settings'}).click(); + await modal.getByTestId('design-setting-tabs').getByRole('tab', {name: 'Theme'}).click(); await modal.getByLabel('Email signup text').fill('test'); @@ -182,14 +182,14 @@ test.describe('Design settings', async () => { const modal = page.getByTestId('design-modal'); - await modal.getByRole('tab', {name: 'Theme settings'}).click(); + await modal.getByRole('tab', {name: 'Theme'}).click(); await chooseOptionInSelect(modal.getByTestId('setting-select-navigation_layout'), 'Logo in the middle'); const expectedSettings = {navigation_layout: 'Logo in the middle'}; const expectedEncoded = new URLSearchParams([['custom', JSON.stringify(expectedSettings)]]).toString(); const matchingHeader = previewRequests.find(header => new RegExp(`&${expectedEncoded.replace(/\+/g, '\\+')}`).test(header)); - - expect(matchingHeader).toBeDefined(); + + expect(matchingHeader).toBeDefined(); await modal.getByRole('button', {name: 'Save'}).click(); expect(lastApiRequests.editCustomThemeSettings?.body).toMatchObject({ @@ -230,8 +230,8 @@ test.describe('Design settings', async () => { const designSettingTabs = modal.getByTestId('design-setting-tabs'); - await expect(designSettingTabs.getByRole('tab', {name: 'Global'})).toBeHidden(); - await expect(designSettingTabs.getByRole('tab', {name: 'Theme settings'})).toBeHidden(); + await expect(designSettingTabs.getByRole('tab', {name: 'Brand'})).toBeHidden(); + await expect(designSettingTabs.getByRole('tab', {name: 'Theme'})).toBeHidden(); await expect(designSettingTabs.getByTestId('accent-color-picker')).toBeVisible(); }); @@ -277,7 +277,7 @@ test.describe('Design settings', async () => { const modal = page.getByTestId('design-modal'); - await modal.getByRole('tab', {name: 'Theme settings'}).click(); + await modal.getByRole('tab', {name: 'Theme'}).click(); const showFeaturedPostsCustomThemeSetting = modal.getByLabel('Show featured posts');