From ab36892799e3ddba92680b76af24131e14e0205a Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Fri, 18 Aug 2023 11:42:29 +0200 Subject: [PATCH] Small AdminX UI improments (#17758) refs. https://github.com/TryGhost/Product/issues/3349 - added static Preview button to Tips and Donations - updated modal buttons in Design settigns, so it doesn't close on save and easier to play around with various settings --- .../admin-x-ds/global/chrome/DesktopChrome.tsx | 2 +- .../admin-x-ds/global/modal/ConfirmationModal.tsx | 1 + .../src/admin-x-ds/global/modal/PreviewModal.tsx | 1 - .../settings/membership/TipsOrDonations.tsx | 15 +++++++++++---- .../src/components/settings/site/DesignModal.tsx | 5 ++--- .../admin-x-settings/test/e2e/site/design.test.ts | 4 ---- 6 files changed, 15 insertions(+), 13 deletions(-) diff --git a/apps/admin-x-settings/src/admin-x-ds/global/chrome/DesktopChrome.tsx b/apps/admin-x-settings/src/admin-x-ds/global/chrome/DesktopChrome.tsx index 18bbe13f0c..3d607db880 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/chrome/DesktopChrome.tsx +++ b/apps/admin-x-settings/src/admin-x-ds/global/chrome/DesktopChrome.tsx @@ -7,7 +7,7 @@ interface DesktopChromeProps { const DesktopChrome: React.FC> = ({children, ...props}) => { return (
-
+
{children}
diff --git a/apps/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModal.tsx b/apps/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModal.tsx index 22d95ed613..834bcb69d6 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModal.tsx +++ b/apps/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModal.tsx @@ -41,6 +41,7 @@ export const ConfirmationModalContent: React.FC = ({ size={540} testId='confirmation-modal' title={title} + formSheet onCancel={onCancel} onOk={async () => { setTaskState('running'); diff --git a/apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx b/apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx index b699702824..c374a2d97e 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx +++ b/apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx @@ -193,7 +193,6 @@ export const PreviewModalContent: React.FC = ({ key: 'ok-modal', label: okLabel, color: okColor, - className: 'min-w-[80px]', onClick: onOk, disabled: buttonsDisabled }); diff --git a/apps/admin-x-settings/src/components/settings/membership/TipsOrDonations.tsx b/apps/admin-x-settings/src/components/settings/membership/TipsOrDonations.tsx index f554c8b047..ca9f31c5af 100644 --- a/apps/admin-x-settings/src/components/settings/membership/TipsOrDonations.tsx +++ b/apps/admin-x-settings/src/components/settings/membership/TipsOrDonations.tsx @@ -1,4 +1,5 @@ import Button from '../../../admin-x-ds/global/Button'; +import Heading from '../../../admin-x-ds/global/Heading'; import React from 'react'; import Select from '../../../admin-x-ds/global/form/Select'; import SettingGroup from '../../../admin-x-ds/settings/SettingGroup'; @@ -26,13 +27,19 @@ const TipsOrDonations: React.FC<{ keywords: string[] }> = ({keywords}) => { value: '$12' }, { - heading: 'Sharable link', + heading: '', key: 'sharable-link', value: ( -
+
+
+ Sharable link — + Preview +
+
https://example.com/tip -
-
) 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 1b63bf8253..51cd4518d1 100644 --- a/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx +++ b/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx @@ -213,9 +213,10 @@ const DesignModal: React.FC = () => { updateRoute('design'); }} buttonsDisabled={saveState === 'saving'} + cancelLabel='Close' defaultTab='homepage' dirty={saveState === 'unsaved'} - okLabel={saveState === 'saved' ? 'Saved' : (saveState === 'saving' ? 'Saving...' : 'Save & close')} + okLabel={saveState === 'saved' ? 'Saved' : (saveState === 'saving' ? 'Saving...' : 'Save')} preview={previewContent} previewToolbarTabs={previewTabs} selectedURL={selectedPreviewTab} @@ -226,8 +227,6 @@ const DesignModal: React.FC = () => { title='Design' onOk={async () => { await handleSave(); - modal.remove(); - updateRoute('design'); }} onSelectURL={onSelectURL} />; diff --git a/apps/admin-x-settings/test/e2e/site/design.test.ts b/apps/admin-x-settings/test/e2e/site/design.test.ts index 9cf8d81ae9..1ab81ade95 100644 --- a/apps/admin-x-settings/test/e2e/site/design.test.ts +++ b/apps/admin-x-settings/test/e2e/site/design.test.ts @@ -82,8 +82,6 @@ test.describe('Design settings', async () => { await modal.getByLabel('Site description').fill('new description'); await modal.getByRole('button', {name: 'Save'}).click(); - await expect(modal).not.toBeVisible(); - expect(lastPreviewRequest.previewHeader).toMatch(/&d=new\+description&/); expect(lastApiRequests.editSettings?.body).toEqual({ @@ -132,8 +130,6 @@ test.describe('Design settings', async () => { await modal.getByLabel('Navigation layout').selectOption('Logo in the middle'); await modal.getByRole('button', {name: 'Save'}).click(); - await expect(modal).not.toBeVisible(); - const expectedSettings = {navigation_layout: 'Logo in the middle'}; const expectedEncoded = new URLSearchParams([['custom', JSON.stringify(expectedSettings)]]).toString(); expect(lastPreviewRequest.previewHeader).toMatch(new RegExp(`&${expectedEncoded.replace(/\+/g, '\\+')}`));