fix: Adds validation for form dialogs propery name (#4574)

* Adds validation for form dialogs propery name * fix start over name * updatd strings Co-authored-by: Soroush <sorgh@microsoft.com>
microsoft · Oct 29, 2020 · d19e446 · d19e446
1 parent eaaba10
commit d19e446
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 5 deletions.
diff --git 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
@@ -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
@@ -16,17 +16,18 @@ 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';
 import { NumberPropertyContent } from 'src/components/property/NumberPropertyContent';
 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,18 +164,30 @@ 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 (
     <FocusZone>
       <ContentRoot {...dragHandleProps} ref={rootElmRef} isValid={valid}>
         <Stack horizontal tokens={{ childrenGap: 16 }} verticalAlign="center">
           <TextField
             aria-describedby={propertyNameTooltipId}
             autoComplete="off"
+            deferredValidationTime={300}
             label={formatMessage('Property name')}
             placeholder={formatMessage('Name of the property')}
             styles={{ root: { flex: 1 } }}
             value={name}
             onChange={changeName}
+            onGetErrorMessage={validateName}
             onRenderLabel={onRenderLabel(
               formatMessage(
                 `A property is a piece of information that your bot will collect. The property name is the name used in Composer; it is not necessarily the same text that will appear in your bot's messages.`

diff --git a/Composer/packages/form-dialogs/src/utils/constants.ts b/Composer/packages/form-dialogs/src/utils/constants.ts
@@ -2,3 +2,5 @@
 // Licensed under the MIT License.
 
 export const jsPropertyListClassName = 'jsPropertyListClassName';
+
+export const nameRegex = /^[a-zA-Z0-9-_]+$/;
diff --git a/Composer/packages/server/src/locales/en-US.json b/Composer/packages/server/src/locales/en-US.json
@@ -1955,6 +1955,9 @@
   "property_name_914371f5": {
     "message": "Property name"
   },
+  "property_name_is_required_5bc57d97": {
+    "message": "Property name is required!"
+  },
   "property_title_f2b443b7": {
     "message": "Property title"
   },
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,5 @@
		// Licensed under the MIT License.

		export const jsPropertyListClassName = 'jsPropertyListClassName';

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