From 99e602e1342a40722ece2041767608699de8fc0f Mon Sep 17 00:00:00 2001
From: Soroush <sorgh@microsoft.com>
Date: Wed, 28 Oct 2020 16:53:47 -0700
Subject: [PATCH 1/3] Adds validation for form dialogs propery name

---
 Composer/packages/form-dialogs/src/atoms/utils.ts |  5 +++--
 .../property/FormDialogPropertyCard.tsx           | 15 ++++++++++++++-
 .../packages/form-dialogs/src/utils/constants.ts  |  2 ++
 3 files changed, 19 insertions(+), 3 deletions(-)

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 (
     <FocusZone>
       <ContentRoot {...dragHandleProps} ref={rootElmRef} isValid={valid}>
@@ -170,11 +181,13 @@ export const FormDialogPropertyCard = React.memo((props: FormDialogPropertyCardP
           <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
index 4c0422dbbf..b5e21e51ab 100644
--- 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-_]+$/;

From 0d3a23d75b00b05e734edf42534561096ba918df Mon Sep 17 00:00:00 2001
From: Soroush <sorgh@microsoft.com>
Date: Wed, 28 Oct 2020 17:02:08 -0700
Subject: [PATCH 2/3] fix start over name

---
 Composer/packages/form-dialogs/src/FormDialogSchemaEditor.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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

From e5ddf074142024dacbd1a7c165832559eef27ebb Mon Sep 17 00:00:00 2001
From: Soroush <sorgh@microsoft.com>
Date: Wed, 28 Oct 2020 17:08:53 -0700
Subject: [PATCH 3/3] updatd strings

---
 Composer/packages/server/src/locales/en-US.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/Composer/packages/server/src/locales/en-US.json b/Composer/packages/server/src/locales/en-US.json
index 611d6098c0..b02415fd27 100644
--- 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"
   },