diff --git a/apps/admin-x-design-system/src/settings/SettingGroupContent.tsx b/apps/admin-x-design-system/src/settings/SettingGroupContent.tsx index f2efcf61e76..744822bede4 100644 --- a/apps/admin-x-design-system/src/settings/SettingGroupContent.tsx +++ b/apps/admin-x-design-system/src/settings/SettingGroupContent.tsx @@ -14,12 +14,12 @@ export interface SettingGroupContentProps { } const SettingGroupContent: React.FC = ({columns, values, children, className}) => { - let styles = 'flex flex-col gap-x-5 gap-y-7'; + let styles = 'flex flex-col gap-x-5'; if (columns === 2) { styles = 'grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6'; } - styles += ` ${className}`; + styles += className ? ` ${className}` : ' gap-y-7'; return (
diff --git a/apps/admin-x-settings/src/components/settings/membership/Access.tsx b/apps/admin-x-settings/src/components/settings/membership/Access.tsx index 5994c03109d..5324517ba3e 100644 --- a/apps/admin-x-settings/src/components/settings/membership/Access.tsx +++ b/apps/admin-x-settings/src/components/settings/membership/Access.tsx @@ -2,8 +2,8 @@ import React from 'react'; import TopLevelGroup from '../../TopLevelGroup'; import useSettingGroup from '../../../hooks/useSettingGroup'; import {GroupBase, MultiValue} from 'react-select'; -import {MultiSelect, MultiSelectOption, Select, SettingGroupContent, withErrorBoundary} from '@tryghost/admin-x-design-system'; -import {getOptionLabel} from '../../../utils/helpers'; +import {MultiSelect, MultiSelectOption, Select, Separator, SettingGroupContent, withErrorBoundary} from '@tryghost/admin-x-design-system'; +// import {getOptionLabel} from '../../../utils/helpers'; import {getSettingValues} from '@tryghost/admin-x-framework/api/settings'; import {useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers'; @@ -81,9 +81,9 @@ const Access: React.FC<{ keywords: string[] }> = ({keywords}) => { 'members_signup_access', 'default_content_visibility', 'default_content_visibility_tiers', 'comments_enabled' ]) as string[]; - const membersSignupAccessLabel = getOptionLabel(MEMBERS_SIGNUP_ACCESS_OPTIONS, membersSignupAccess); - const defaultContentVisibilityLabel = getOptionLabel(DEFAULT_CONTENT_VISIBILITY_OPTIONS, defaultContentVisibility); - const commentsEnabledLabel = getOptionLabel(COMMENTS_ENABLED_OPTIONS, commentsEnabled); + // const membersSignupAccessLabel = getOptionLabel(MEMBERS_SIGNUP_ACCESS_OPTIONS, membersSignupAccess); + // const defaultContentVisibilityLabel = getOptionLabel(DEFAULT_CONTENT_VISIBILITY_OPTIONS, defaultContentVisibility); + // const commentsEnabledLabel = getOptionLabel(COMMENTS_ENABLED_OPTIONS, commentsEnabled); const {data: {tiers} = {}} = useBrowseTiers(); @@ -106,71 +106,92 @@ const Access: React.FC<{ keywords: string[] }> = ({keywords}) => { updateSetting('default_content_visibility_tiers', JSON.stringify(selectedTiers)); }; - const values = ( - - ); + // const values = ( + // + // ); const form = ( - - option.value === defaultContentVisibility)} - testId='default-post-access-select' - title="Default post access" - onSelect={(option) => { - updateSetting('default_content_visibility', option?.value || null); - }} - /> + +
+
Who should be able to subscribe to your site?
+
+ option.value === defaultContentVisibility)} + testId='default-post-access-select' + onSelect={(option) => { + updateSetting('default_content_visibility', option?.value || null); + handleEditingChange(true); + }} + /> +
+
{defaultContentVisibility === 'tiers' && ( - group.options.length > 0)} - testId='tiers-select' - title='Select tiers' - values={selectedTierOptions} - clearBg - onChange={setSelectedTiers} - /> +
+
Select specific tiers
+
+ group.options.length > 0)} + testId='tiers-select' + values={selectedTierOptions} + onChange={(selectedOptions) => { + setSelectedTiers(selectedOptions); + handleEditingChange(true); + }} + /> +
+
)} - option.value === commentsEnabled)} + testId='commenting-select' + title="" + onSelect={(option) => { + updateSetting('comments_enabled', option?.value || null); + handleEditingChange(true); + }} + /> +
+ ); @@ -183,11 +204,12 @@ const Access: React.FC<{ keywords: string[] }> = ({keywords}) => { saveState={saveState} testId='access' title='Access' + hideEditButton onCancel={handleCancel} onEditingChange={handleEditingChange} onSave={handleSave} > - {isEditing ? form : values} + {form} ); }; diff --git a/apps/admin-x-settings/test/acceptance/membership/access.test.ts b/apps/admin-x-settings/test/acceptance/membership/access.test.ts index 7d53b508cd2..973dd021895 100644 --- a/apps/admin-x-settings/test/acceptance/membership/access.test.ts +++ b/apps/admin-x-settings/test/acceptance/membership/access.test.ts @@ -21,16 +21,12 @@ test.describe('Access settings', async () => { await expect(section.getByText('Public')).toHaveCount(1); await expect(section.getByText('Nobody')).toHaveCount(1); - await section.getByRole('button', {name: 'Edit'}).click(); - await chooseOptionInSelect(section.getByTestId('subscription-access-select'), 'Only people I invite'); await chooseOptionInSelect(section.getByTestId('default-post-access-select'), /^Members only$/); await chooseOptionInSelect(section.getByTestId('commenting-select'), 'All members'); await section.getByRole('button', {name: 'Save'}).click(); - await expect(section.getByTestId('subscription-access-select')).toHaveCount(0); - await expect(section.getByText('Only people I invite')).toHaveCount(1); await expect(section.getByText('Members only')).toHaveCount(1); await expect(section.getByText('All members')).toHaveCount(1); @@ -56,8 +52,6 @@ test.describe('Access settings', async () => { const section = page.getByTestId('access'); - await section.getByRole('button', {name: 'Edit'}).click(); - await chooseOptionInSelect(section.getByTestId('subscription-access-select'), 'Nobody'); await section.getByRole('button', {name: 'Save'}).click(); @@ -68,7 +62,7 @@ test.describe('Access settings', async () => { ] }); - await expect(section.getByTestId('subscription-access-select')).toHaveCount(0); + await expect(section.getByTestId('subscription-access-select')).toContainText('Nobody'); await expect(page.getByTestId('portal').getByRole('button', {name: 'Customize'})).toBeDisabled(); await expect(page.getByTestId('enable-newsletters')).toContainText('only existing members will receive newsletters'); @@ -88,8 +82,6 @@ test.describe('Access settings', async () => { const section = page.getByTestId('access'); - await section.getByRole('button', {name: 'Edit'}).click(); - await chooseOptionInSelect(section.getByTestId('default-post-access-select'), 'Specific tiers'); await section.getByTestId('tiers-select').click(); @@ -98,7 +90,7 @@ test.describe('Access settings', async () => { await section.getByRole('button', {name: 'Save'}).click(); - await expect(section.getByText('Specific tiers')).toHaveCount(1); + await expect(section.getByTestId('default-post-access-select')).toContainText('Specific tiers'); expect(lastApiRequests.editSettings?.body).toEqual({ settings: [ diff --git a/ghost/core/test/e2e-browser/admin/site-settings.spec.js b/ghost/core/test/e2e-browser/admin/site-settings.spec.js index 7b512e4bd9a..e4536cf1b19 100644 --- a/ghost/core/test/e2e-browser/admin/site-settings.spec.js +++ b/ghost/core/test/e2e-browser/admin/site-settings.spec.js @@ -6,15 +6,19 @@ const changeSubscriptionAccess = async (page, access) => { await page.locator('[data-test-nav="settings"]').click(); const section = page.getByTestId('access'); - await section.getByRole('button', {name: 'Edit'}).click(); - + const select = section.getByTestId('subscription-access-select'); await select.click(); await page.locator(`[data-testid="select-option"][data-value="${access}"]`).click(); // Save settings await section.getByRole('button', {name: 'Save'}).click(); - await expect(select).not.toBeVisible(); + + await expect(select).toContainText( + access === 'all' ? 'Anyone can sign up' : + access === 'invite' ? 'Only people I invite' : + 'Nobody' + ); }; const checkPortalScriptLoaded = async (page, loaded = true) => {