mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-30 22:34:01 -05:00
Revert "🎨 Improved Access card layout in Settings (#21913)"
no issue
This reverts commit 040b290fbd
.
- the commit has broken browser tests, reverting to get back in a green state
- will be re-introduced in a follow-up PR
This commit is contained in:
parent
eafdcd041d
commit
21e7a8e4b6
3 changed files with 79 additions and 93 deletions
|
@ -14,12 +14,12 @@ export interface SettingGroupContentProps {
|
|||
}
|
||||
|
||||
const SettingGroupContent: React.FC<SettingGroupContentProps> = ({columns, values, children, className}) => {
|
||||
let styles = 'flex flex-col gap-x-5';
|
||||
let styles = 'flex flex-col gap-x-5 gap-y-7';
|
||||
if (columns === 2) {
|
||||
styles = 'grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6';
|
||||
}
|
||||
|
||||
styles += className ? ` ${className}` : ' gap-y-7';
|
||||
styles += ` ${className}`;
|
||||
|
||||
return (
|
||||
<div className={styles}>
|
||||
|
|
|
@ -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, Separator, SettingGroupContent, withErrorBoundary} from '@tryghost/admin-x-design-system';
|
||||
// import {getOptionLabel} from '../../../utils/helpers';
|
||||
import {MultiSelect, MultiSelectOption, Select, 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,92 +106,71 @@ const Access: React.FC<{ keywords: string[] }> = ({keywords}) => {
|
|||
updateSetting('default_content_visibility_tiers', JSON.stringify(selectedTiers));
|
||||
};
|
||||
|
||||
// const values = (
|
||||
// <SettingGroupContent
|
||||
// values={[
|
||||
// {
|
||||
// heading: 'Subscription access',
|
||||
// key: 'subscription-access',
|
||||
// value: membersSignupAccessLabel
|
||||
// },
|
||||
// {
|
||||
// heading: 'Default post access',
|
||||
// key: 'default-post-access',
|
||||
// value: defaultContentVisibilityLabel
|
||||
// },
|
||||
// {
|
||||
// heading: 'Commenting',
|
||||
// key: 'commenting',
|
||||
// value: commentsEnabledLabel
|
||||
// }
|
||||
// ]}
|
||||
// />
|
||||
// );
|
||||
const values = (
|
||||
<SettingGroupContent
|
||||
values={[
|
||||
{
|
||||
heading: 'Subscription access',
|
||||
key: 'subscription-access',
|
||||
value: membersSignupAccessLabel
|
||||
},
|
||||
{
|
||||
heading: 'Default post access',
|
||||
key: 'default-post-access',
|
||||
value: defaultContentVisibilityLabel
|
||||
},
|
||||
{
|
||||
heading: 'Commenting',
|
||||
key: 'commenting',
|
||||
value: commentsEnabledLabel
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
const form = (
|
||||
<SettingGroupContent className='gap-y-4' columns={1}>
|
||||
<div className="flex flex-col content-center items-center gap-4 md:flex-row">
|
||||
<div className="w-full min-w-[160px] max-w-none md:w-2/3 md:max-w-[320px]">Who should be able to subscribe to your site?</div>
|
||||
<div className="w-full md:flex-1">
|
||||
<Select
|
||||
options={MEMBERS_SIGNUP_ACCESS_OPTIONS}
|
||||
selectedOption={MEMBERS_SIGNUP_ACCESS_OPTIONS.find(option => option.value === membersSignupAccess)}
|
||||
testId='subscription-access-select'
|
||||
onSelect={(option) => {
|
||||
updateSetting('members_signup_access', option?.value || null);
|
||||
handleEditingChange(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex flex-col content-center items-center gap-4 md:flex-row">
|
||||
<div className="w-full min-w-[160px] max-w-none md:w-2/3 md:max-w-[320px]">Who should have access to new posts?</div>
|
||||
<div className="w-full md:flex-1">
|
||||
<Select
|
||||
options={DEFAULT_CONTENT_VISIBILITY_OPTIONS}
|
||||
selectedOption={DEFAULT_CONTENT_VISIBILITY_OPTIONS.find(option => option.value === defaultContentVisibility)}
|
||||
testId='default-post-access-select'
|
||||
onSelect={(option) => {
|
||||
updateSetting('default_content_visibility', option?.value || null);
|
||||
handleEditingChange(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SettingGroupContent columns={1}>
|
||||
<Select
|
||||
hint='Who should be able to subscribe to your site?'
|
||||
options={MEMBERS_SIGNUP_ACCESS_OPTIONS}
|
||||
selectedOption={MEMBERS_SIGNUP_ACCESS_OPTIONS.find(option => option.value === membersSignupAccess)}
|
||||
testId='subscription-access-select'
|
||||
title="Subscription access"
|
||||
onSelect={(option) => {
|
||||
updateSetting('members_signup_access', option?.value || null);
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
hint='When a new post is created, who should have access?'
|
||||
options={DEFAULT_CONTENT_VISIBILITY_OPTIONS}
|
||||
selectedOption={DEFAULT_CONTENT_VISIBILITY_OPTIONS.find(option => option.value === defaultContentVisibility)}
|
||||
testId='default-post-access-select'
|
||||
title="Default post access"
|
||||
onSelect={(option) => {
|
||||
updateSetting('default_content_visibility', option?.value || null);
|
||||
}}
|
||||
/>
|
||||
{defaultContentVisibility === 'tiers' && (
|
||||
<div className="flex flex-col content-center items-center gap-4 md:flex-row">
|
||||
<div className="w-full min-w-[160px] max-w-none md:w-2/3 md:max-w-[320px]">Select specific tiers</div>
|
||||
<div className="w-full md:flex-1">
|
||||
<MultiSelect
|
||||
color='black'
|
||||
options={tierOptionGroups.filter(group => group.options.length > 0)}
|
||||
testId='tiers-select'
|
||||
values={selectedTierOptions}
|
||||
onChange={(selectedOptions) => {
|
||||
setSelectedTiers(selectedOptions);
|
||||
handleEditingChange(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<MultiSelect
|
||||
color='black'
|
||||
options={tierOptionGroups.filter(group => group.options.length > 0)}
|
||||
testId='tiers-select'
|
||||
title='Select tiers'
|
||||
values={selectedTierOptions}
|
||||
clearBg
|
||||
onChange={setSelectedTiers}
|
||||
/>
|
||||
)}
|
||||
<Separator />
|
||||
<div className="flex flex-col content-center items-center gap-4 md:flex-row">
|
||||
<div className="w-full min-w-[160px] max-w-none md:w-2/3 md:max-w-[320px]">Who can comment on posts?</div>
|
||||
<div className="w-full md:flex-1">
|
||||
<Select
|
||||
options={COMMENTS_ENABLED_OPTIONS}
|
||||
selectedOption={COMMENTS_ENABLED_OPTIONS.find(option => option.value === commentsEnabled)}
|
||||
testId='commenting-select'
|
||||
title=""
|
||||
onSelect={(option) => {
|
||||
updateSetting('comments_enabled', option?.value || null);
|
||||
handleEditingChange(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Select
|
||||
hint='Who can comment on posts?'
|
||||
options={COMMENTS_ENABLED_OPTIONS}
|
||||
selectedOption={COMMENTS_ENABLED_OPTIONS.find(option => option.value === commentsEnabled)}
|
||||
testId='commenting-select'
|
||||
title="Commenting"
|
||||
onSelect={(option) => {
|
||||
updateSetting('comments_enabled', option?.value || null);
|
||||
}}
|
||||
/>
|
||||
</SettingGroupContent>
|
||||
);
|
||||
|
||||
|
@ -204,12 +183,11 @@ const Access: React.FC<{ keywords: string[] }> = ({keywords}) => {
|
|||
saveState={saveState}
|
||||
testId='access'
|
||||
title='Access'
|
||||
hideEditButton
|
||||
onCancel={handleCancel}
|
||||
onEditingChange={handleEditingChange}
|
||||
onSave={handleSave}
|
||||
>
|
||||
{form}
|
||||
{isEditing ? form : values}
|
||||
</TopLevelGroup>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -21,12 +21,16 @@ 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);
|
||||
|
@ -52,6 +56,8 @@ 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();
|
||||
|
@ -62,7 +68,7 @@ test.describe('Access settings', async () => {
|
|||
]
|
||||
});
|
||||
|
||||
await expect(section.getByTestId('subscription-access-select')).toContainText('Nobody');
|
||||
await expect(section.getByTestId('subscription-access-select')).toHaveCount(0);
|
||||
|
||||
await expect(page.getByTestId('portal').getByRole('button', {name: 'Customize'})).toBeDisabled();
|
||||
await expect(page.getByTestId('enable-newsletters')).toContainText('only existing members will receive newsletters');
|
||||
|
@ -82,6 +88,8 @@ 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();
|
||||
|
||||
|
@ -90,7 +98,7 @@ test.describe('Access settings', async () => {
|
|||
|
||||
await section.getByRole('button', {name: 'Save'}).click();
|
||||
|
||||
await expect(section.getByTestId('default-post-access-select')).toContainText('Specific tiers');
|
||||
await expect(section.getByText('Specific tiers')).toHaveCount(1);
|
||||
|
||||
expect(lastApiRequests.editSettings?.body).toEqual({
|
||||
settings: [
|
||||
|
|
Loading…
Reference in a new issue