From 62a5b7d61a6f8e1b4b028bff5f03089518e7fd7f Mon Sep 17 00:00:00 2001 From: Princi Vershwal Date: Thu, 14 Dec 2023 18:39:55 +0530 Subject: [PATCH] Removed onBlur error feedback in Recommendation edit modal (#19382) Fixes [PROD-266](https://linear.app/tryghost/issue/PROD-266/remove-onblur-error-feedback-in-recommendation-edit-modal) --- .../settings/advanced/integrations/AddIntegrationModal.tsx | 2 +- .../settings/email/newsletters/AddNewsletterModal.tsx | 2 +- .../settings/email/newsletters/NewsletterDetailModal.tsx | 6 +++--- .../src/components/settings/general/UserDetailModal.tsx | 4 ++-- .../components/settings/growth/offers/EditOfferModal.tsx | 2 +- .../growth/recommendations/AddRecommendationModal.tsx | 4 ++-- .../recommendations/RecommendationDescriptionForm.tsx | 6 ------ .../test/acceptance/advanced/integrations/custom.test.ts | 2 +- .../test/acceptance/email/newsletters.test.ts | 4 ++-- .../test/acceptance/general/users/profile.test.ts | 4 ++-- .../test/acceptance/membership/recommendations.test.ts | 6 +----- 11 files changed, 16 insertions(+), 26 deletions(-) diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/AddIntegrationModal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/AddIntegrationModal.tsx index 3a812290b3..fc2e8a1796 100644 --- a/apps/admin-x-settings/src/components/settings/advanced/integrations/AddIntegrationModal.tsx +++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/AddIntegrationModal.tsx @@ -41,7 +41,7 @@ const AddIntegrationModal: React.FC = () => { title='Add integration' onOk={async () => { if (!name) { - setErrors({name: 'Please enter a name'}); + setErrors({name: 'Name is required'}); return; } diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/AddNewsletterModal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/AddNewsletterModal.tsx index 2f5e549e70..87ee38e7a5 100644 --- a/apps/admin-x-settings/src/components/settings/email/newsletters/AddNewsletterModal.tsx +++ b/apps/admin-x-settings/src/components/settings/email/newsletters/AddNewsletterModal.tsx @@ -40,7 +40,7 @@ const AddNewsletterModal: React.FC = () => { const newErrors: Record = {}; if (!formState.name) { - newErrors.name = 'Please enter a name'; + newErrors.name = 'Name is required'; } return newErrors; 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 89de771d5a..dff13b8630 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 @@ -560,15 +560,15 @@ const NewsletterDetailModalContent: React.FC<{newsletter: Newsletter; onlyOne: b const newErrors: Record = {}; if (!formState.name) { - newErrors.name = 'Please enter a name'; + newErrors.name = 'Name is required'; } if (formState.sender_email && !validator.isEmail(formState.sender_email)) { - newErrors.sender_email = 'Invalid email.'; + newErrors.sender_email = 'Invalid email'; } if (formState.sender_reply_to && !validator.isEmail(formState.sender_reply_to) && !['newsletter', 'support'].includes(formState.sender_reply_to)) { - newErrors.sender_reply_to = 'Invalid email.'; + newErrors.sender_reply_to = 'Invalid email'; } return newErrors; diff --git a/apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx b/apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx index c6dc240247..d0a605a545 100644 --- a/apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx +++ b/apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx @@ -24,7 +24,7 @@ const validators: Record) => string> = { let error = ''; if (!name) { - error = 'Please enter a name'; + error = 'Name is required'; } if (name && name.length > 191) { @@ -39,7 +39,7 @@ const validators: Record) => string> = { }, url: ({url}) => { const valid = !url || validator.isURL(url); - return valid ? '' : 'Please enter a valid URL'; + return valid ? '' : 'Enter a valid URL'; }, bio: ({bio}) => { const valid = !bio || bio.length <= 200; diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx index e25689f306..12bb347ca4 100644 --- a/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx +++ b/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx @@ -201,7 +201,7 @@ const EditOfferModal: React.FC<{id: string}> = ({id}) => { const newErrors: Record = {}; if (!formState?.name) { - newErrors.name = 'Please enter a name'; + newErrors.name = 'Name is required'; } if (!formState?.display_title) { diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/AddRecommendationModal.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/AddRecommendationModal.tsx index 37ad7d256a..21e672f020 100644 --- a/apps/admin-x-settings/src/components/settings/growth/recommendations/AddRecommendationModal.tsx +++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/AddRecommendationModal.tsx @@ -23,12 +23,12 @@ const validateUrl = function (errors: ErrorMessages, url: string) { // Check domain includes a dot if (!u.hostname.includes('.')) { - errors.url = 'Please enter a valid URL.'; + errors.url = 'Enter a valid URL'; } else { delete errors.url; } } catch (e) { - errors.url = 'Please enter a valid URL.'; + errors.url = 'Enter a valid URL'; } return errors; }; diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/RecommendationDescriptionForm.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/RecommendationDescriptionForm.tsx index 328f7fbb51..118f0d68a8 100644 --- a/apps/admin-x-settings/src/components/settings/growth/recommendations/RecommendationDescriptionForm.tsx +++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/RecommendationDescriptionForm.tsx @@ -102,9 +102,6 @@ const RecommendationDescriptionForm: React.FC setErrors( - validateDescriptionFormField(errors, 'title', formState.title) - )} onChange={(e) => { clearError?.('title'); updateForm(state => ({...state, title: e.target.value})); @@ -118,9 +115,6 @@ const RecommendationDescriptionForm: React.FC setErrors( - validateDescriptionFormField(errors, 'description', formState.description) - )} onChange={(e) => { clearError?.('description'); setDescriptionLength(e.target.value.length); diff --git a/apps/admin-x-settings/test/acceptance/advanced/integrations/custom.test.ts b/apps/admin-x-settings/test/acceptance/advanced/integrations/custom.test.ts index 190eda04b3..aa6adc5367 100644 --- a/apps/admin-x-settings/test/acceptance/advanced/integrations/custom.test.ts +++ b/apps/admin-x-settings/test/acceptance/advanced/integrations/custom.test.ts @@ -127,7 +127,7 @@ test.describe('Custom integrations', async () => { // Validation await createModal.getByRole('button', {name: 'Add'}).click(); - await expect(createModal).toHaveText(/Please enter a name/); + await expect(createModal).toHaveText(/Name is required/); // Successful creation diff --git a/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts b/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts index 7f8e18cdc5..ead7f535d0 100644 --- a/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts +++ b/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts @@ -29,7 +29,7 @@ test.describe('Newsletter settings', async () => { await modal.getByRole('button', {name: 'Create'}).click(); await expect(page.getByTestId('toast-error')).toHaveText(/Can't save newsletter/); - await expect(modal).toHaveText(/Please enter a name/); + await expect(modal).toHaveText(/Name is required/); // Shouldn't be necessary, but without these Playwright doesn't click Create the second time for some reason await modal.getByRole('button', {name: 'Cancel'}).click(); @@ -72,7 +72,7 @@ test.describe('Newsletter settings', async () => { await modal.getByRole('button', {name: 'Save'}).click(); await expect(page.getByTestId('toast-error')).toHaveText(/Can't save newsletter/); - await expect(modal).toHaveText(/Please enter a name/); + await expect(modal).toHaveText(/Name is required/); await modal.getByPlaceholder('Weekly Roundup').fill('Updated newsletter'); diff --git a/apps/admin-x-settings/test/acceptance/general/users/profile.test.ts b/apps/admin-x-settings/test/acceptance/general/users/profile.test.ts index 1511eb6ce4..b9f0d3e33f 100644 --- a/apps/admin-x-settings/test/acceptance/general/users/profile.test.ts +++ b/apps/admin-x-settings/test/acceptance/general/users/profile.test.ts @@ -36,7 +36,7 @@ test.describe('User profile', async () => { await modal.getByLabel('Full name').fill(''); await modal.getByRole('button', {name: 'Save & close'}).click(); - await expect(modal).toContainText('Please enter a name'); + await expect(modal).toContainText('Name is required'); await modal.getByLabel('Full name').fill(new Array(195).join('a')); await modal.getByRole('button', {name: 'Save & close'}).click(); @@ -56,7 +56,7 @@ test.describe('User profile', async () => { await modal.getByLabel('Website').fill('not-a-website'); await modal.getByLabel('Website').blur(); - await expect(modal).toContainText('Please enter a valid URL'); + await expect(modal).toContainText('Enter a valid URL'); const facebookInput = modal.getByLabel('Facebook profile'); diff --git a/apps/admin-x-settings/test/acceptance/membership/recommendations.test.ts b/apps/admin-x-settings/test/acceptance/membership/recommendations.test.ts index 07cf0ee540..f787618853 100644 --- a/apps/admin-x-settings/test/acceptance/membership/recommendations.test.ts +++ b/apps/admin-x-settings/test/acceptance/membership/recommendations.test.ts @@ -47,7 +47,7 @@ test.describe('Recommendations', async () => { // Validate errors url.fill('not a real url'); await modal.getByRole('button', {name: 'Next'}).click(); - await expect(modal).toContainText('Please enter a valid URL.'); + await expect(modal).toContainText('Enter a valid URL'); // Validate success modal.getByRole('textbox').fill('https://example.com/a-cool-website'); @@ -59,8 +59,6 @@ test.describe('Recommendations', async () => { // Validate errors await title.fill(''); - await title.blur(); - await expect(modal).toContainText('Title is required'); await description.fill('This is a long description with more than 200 characters: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget aliquam aliquet, nisl nunc aliquam nunc, quis aliquam nisl nunc eget nisl. Donec auctor, nisl eget aliquam aliquet, nisl nunc aliquam nunc, quis aliquam nisl nunc eget nisl. Donec auctor, nisl eget aliquam aliquet, nisl nunc aliquam nunc, quis aliquam nisl nunc eget nisl. Donec auctor, nisl eget aliquam aliquet, nisl nunc aliquam nunc, quis aliquam nisl nunc eget nisl.'); await expect(modal).toContainText('Max: 200 characters. You’ve used 510'); @@ -127,8 +125,6 @@ test.describe('Recommendations', async () => { // Validate errors await title.fill(''); - await title.blur(); - await expect(modal).toContainText('Title is required'); await description.fill('This is a long description with more than 200 characters: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget aliquam aliquet, nisl nunc aliquam nunc, quis aliquam nisl nunc eget nisl. Donec auctor, nisl eget aliquam aliquet, nisl nunc aliquam nunc, quis aliquam nisl nunc eget nisl. Donec auctor, nisl eget aliquam aliquet, nisl nunc aliquam nunc, quis aliquam nisl nunc eget nisl. Donec auctor, nisl eget aliquam aliquet, nisl nunc aliquam nunc, quis aliquam nisl nunc eget nisl.'); await expect(modal).toContainText('Max: 200 characters. You’ve used 510');