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:
parent
47f50e2d35
commit
62a5b7d61a
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
};
|
||||
|
@ -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);
|
||||
|
@ -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
|
||||
|
||||
|
@ -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');
|
||||
|
||||
|
@ -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');
|
||||
|
||||
|
@ -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');
|
||||
|
Loading…
Reference in New Issue
Block a user