diff --git a/Composer/packages/form-dialogs/src/FormDialogSchemaEditor.tsx b/Composer/packages/form-dialogs/src/FormDialogSchemaEditor.tsx index 5bc6430821..4cbc29afc8 100644 --- a/Composer/packages/form-dialogs/src/FormDialogSchemaEditor.tsx +++ b/Composer/packages/form-dialogs/src/FormDialogSchemaEditor.tsx @@ -69,8 +69,8 @@ const InternalFormDialogSchemaEditor = React.memo((props: FormDialogSchemaEditor }, [editorId]); const startOver = React.useCallback(() => { - reset({ name: editorId }); - }, [reset, editorId]); + reset({ name: schema.id }); + }, [reset, editorId, schema]); useRecoilTransactionObserver_UNSTABLE(async ({ snapshot, previousSnapshot }) => { const content = await snapshot.getPromise(formDialogSchemaJsonSelector); diff --git a/Composer/packages/form-dialogs/src/atoms/utils.ts b/Composer/packages/form-dialogs/src/atoms/utils.ts index b629d82852..b8aa56d80b 100644 --- a/Composer/packages/form-dialogs/src/atoms/utils.ts +++ b/Composer/packages/form-dialogs/src/atoms/utils.ts @@ -7,15 +7,16 @@ import formatMessage from 'format-message'; import { builtInStringFormats, FormDialogProperty, + FormDialogPropertyKind, FormDialogPropertyPayload, IntegerPropertyPayload, NumberPropertyPayload, RefPropertyPayload, - FormDialogPropertyKind, StringPropertyPayload, TypedPropertyPayload, } from 'src/atoms/types'; import { generateId } from 'src/utils/base'; +import { nameRegex } from 'src/utils/constants'; export const getDefaultPayload = (kind: FormDialogPropertyKind) => { switch (kind) { @@ -261,7 +262,7 @@ export const validateSchemaPropertyStore = (property: FormDialogProperty) => { } } - return !!(payloadValid && property.name); + return !!(payloadValid && property.name && nameRegex.test(property.name)); }; export const getPropertyTypeDisplayName = (property: FormDialogProperty) => { diff --git a/Composer/packages/form-dialogs/src/components/property/FormDialogPropertyCard.tsx b/Composer/packages/form-dialogs/src/components/property/FormDialogPropertyCard.tsx index 67952bacf7..9b207d7f1f 100644 --- a/Composer/packages/form-dialogs/src/components/property/FormDialogPropertyCard.tsx +++ b/Composer/packages/form-dialogs/src/components/property/FormDialogPropertyCard.tsx @@ -16,10 +16,10 @@ import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'; import { ArrayPropertyPayload, FormDialogProperty, + FormDialogPropertyKind, FormDialogPropertyPayload, IntegerPropertyPayload, NumberPropertyPayload, - FormDialogPropertyKind, StringPropertyPayload, } from 'src/atoms/types'; import { FieldLabel } from 'src/components/common/FieldLabel'; @@ -27,6 +27,7 @@ import { NumberPropertyContent } from 'src/components/property/NumberPropertyCon import { PropertyTypeSelector } from 'src/components/property/PropertyTypeSelector'; import { RequiredPriorityIndicator } from 'src/components/property/RequiredPriorityIndicator'; import { StringPropertyContent } from 'src/components/property/StringPropertyContent'; +import { nameRegex } from 'src/utils/constants'; const ContentRoot = styled.div(({ isValid }: { isValid: boolean }) => ({ width: 720, @@ -163,6 +164,16 @@ export const FormDialogPropertyCard = React.memo((props: FormDialogPropertyCardP [] ); + const validateName = React.useCallback( + (value: string) => + !value + ? formatMessage('Property name is required!') + : !nameRegex.test(value) + ? formatMessage('Spaces and special characters are not allowed. Use letters, numbers, -, or _.') + : '', + [] + ); + return ( @@ -170,11 +181,13 @@ export const FormDialogPropertyCard = React.memo((props: FormDialogPropertyCardP