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)
This commit is contained in:
Princi Vershwal 2023-12-14 18:39:55 +05:30 committed by GitHub
parent 47f50e2d35
commit 62a5b7d61a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 16 additions and 26 deletions

View File

@ -41,7 +41,7 @@ const AddIntegrationModal: React.FC<RoutingModalProps> = () => {
title='Add integration'
onOk={async () => {
if (!name) {
setErrors({name: 'Please enter a name'});
setErrors({name: 'Name is required'});
return;
}

View File

@ -40,7 +40,7 @@ const AddNewsletterModal: React.FC<RoutingModalProps> = () => {
const newErrors: Record<string, string> = {};
if (!formState.name) {
newErrors.name = 'Please enter a name';
newErrors.name = 'Name is required';
}
return newErrors;

View File

@ -560,15 +560,15 @@ const NewsletterDetailModalContent: React.FC<{newsletter: Newsletter; onlyOne: b
const newErrors: Record<string, string> = {};
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;

View File

@ -24,7 +24,7 @@ const validators: Record<string, (u: Partial<User>) => 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, (u: Partial<User>) => 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;

View File

@ -201,7 +201,7 @@ const EditOfferModal: React.FC<{id: string}> = ({id}) => {
const newErrors: Record<string, string> = {};
if (!formState?.name) {
newErrors.name = 'Please enter a name';
newErrors.name = 'Name is required';
}
if (!formState?.display_title) {

View File

@ -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;
};

View File

@ -102,9 +102,6 @@ const RecommendationDescriptionForm: React.FC<Props<EditOrAddRecommendation | Re
hint={errors.title}
title="Title"
value={formState.title ?? ''}
onBlur={() => 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<Props<EditOrAddRecommendation | Re
rows={4}
title="Short description"
value={formState.description ?? ''}
onBlur={() => setErrors(
validateDescriptionFormField(errors, 'description', formState.description)
)}
onChange={(e) => {
clearError?.('description');
setDescriptionLength(e.target.value.length);

View File

@ -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

View File

@ -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');

View File

@ -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');

View File

@ -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. Youve 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. Youve used 510');