Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

a11y: use onGetErrorMessage in createDialogModal #2345

Closed
beyackle wants to merge 5 commits into from
Closed

a11y: use onGetErrorMessage in createDialogModal #2345

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
287fbcb
use onGetErrorMessage in createDialogModal
beyackle Mar 23, 2020
a423355
Merge branch 'master' into beyackle/newDialogErrorMsg
beyackle Mar 24, 2020
a33d852
Merge branch 'master' into beyackle/newDialogErrorMsg
beyackle Mar 25, 2020
47e7ff4
Update createDialogModal.tsx
beyackle Mar 25, 2020
81f6f90
Merge branch 'beyackle/newDialogErrorMsg' of https://github.com/micro…
beyackle Mar 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 19 additions & 23 deletions Composer/packages/client/src/pages/design/createDialogModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useState, useContext } from 'react';
import React, { useState, useContext, FormEvent } from 'react';
import formatMessage from 'format-message';
import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
Expand Down Expand Up @@ -33,46 +33,42 @@ export const CreateDialogModal: React.FC<CreateDialogModalProps> = props => {
const { onSubmit, onDismiss, isOpen } = props;
const initialFormData: DialogFormData = { name: '', description: '' };
const [formData, setFormData] = useState(initialFormData);
const [formDataErrors, setFormDataErrors] = useState<{ name?: string }>({});
const [hasErrors, setErrors] = useState(true);

const updateForm = field => (e, newValue) => {
const updateForm = (field: string) => (e: FormEvent, newValue: string | undefined) => {
setFormData({
...formData,
[field]: newValue,
});
};

const nameRegex = /^[a-zA-Z0-9-_.]+$/;
const validateForm = (data: DialogFormData) => {
const errors: { name?: string } = {};
const { name } = data;

const _onGetErrorMessage = (name: string) => {
if (name) {
if (!nameRegex.test(name)) {
Copy link
Contributor

@a-b-r-o-w-n a-b-r-o-w-n Mar 23, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is used before its defined.

Copy link
Contributor Author

@beyackle beyackle Mar 23, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's defined on line 46 and used on line 88. I don't see the issue.

errors.name = formatMessage(
'Spaces and special characters are not allowed. Use letters, numbers, -, or _., numbers, -, and _'
);
setErrors(true);
return formatMessage('Spaces and special characters are not allowed. Use letters, numbers, -, or _.');
}
if (dialogs.some(dialog => dialog.id === name)) {
errors.name = formatMessage('Duplicaton of dialog name');
setErrors(true);
return formatMessage('Duplicate dialog name');
}
} else {
errors.name = formatMessage('Please input a name');
setErrors(true);
return formatMessage('Please input a name');
}
return errors;
setErrors(false);
return '';
};

const nameRegex = /^[a-zA-Z0-9-_.]+$/;

const handleSubmit = e => {
e.preventDefault();
const errors = validateForm(formData);
if (Object.keys(errors).length) {
setFormDataErrors(errors);
return;
}

onSubmit({
...formData,
});
if (!hasErrors)
onSubmit({
...formData,
});
};

return (
Expand All @@ -86,7 +82,7 @@ export const CreateDialogModal: React.FC<CreateDialogModalProps> = props => {
value={formData.name}
styles={name}
onChange={updateForm('name')}
errorMessage={formDataErrors.name}
onGetErrorMessage={_onGetErrorMessage}
data-testid="NewDialogName"
required
/>
Expand Down