feat: create lg template when schema provides a default value (micros…

…oft#2487) * fix cardNoMatchResponse property name * create lg template when field has a default value
lei9444 · Apr 2, 2020 · 80814a1 · 80814a1
1 parent 549b8e5
commit 80814a1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git a/Composer/packages/server/schemas/sdk.schema b/Composer/packages/server/schemas/sdk.schema
@@ -9401,7 +9401,7 @@
                     "description": "Text for no match option.",
                     "default": "None of the above."
                 },
-                "cardNoMatchResponse ": {
+                "cardNoMatchResponse": {
                     "$kind": "Microsoft.IActivityTemplate",
                     "title": "Card no match response",
                     "description": "Custom response when no match option was selected.",

diff --git a/Composer/packages/ui-plugins/lg/src/LgField.tsx b/Composer/packages/ui-plugins/lg/src/LgField.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useCallback, useState, useRef, useEffect } from 'react';
+import React, { useCallback, useState, useRef, useEffect, useMemo } from 'react';
 import { LgEditor } from '@bfc/code-editor';
 import { FieldProps, useShellApi } from '@bfc/extension';
 import { FieldLabel } from '@bfc/adaptive-form';
@@ -37,7 +37,7 @@ const LgField: React.FC<FieldProps<string>> = props => {
   const { designerId, currentDialog, lgFiles, shellApi, projectId, locale } = useShellApi();
 
   const singleLgRefMatched = value && value.match(`@\\{([A-Za-z_][-\\w]+)(\\([^\\)]*\\))?\\}`);
-  const lgName = singleLgRefMatched ? singleLgRefMatched[1] : new LgMetaData(name, designerId || '').toString();
+  const lgName = singleLgRefMatched ? singleLgRefMatched[1] : new LgMetaData(name.trim(), designerId || '').toString();
   const lgFileId = `${currentDialog.lgFile}.${locale}`;
   const lgFile = lgFiles && lgFiles.find(file => file.id === lgFileId);
 
@@ -48,19 +48,39 @@ const LgField: React.FC<FieldProps<string>> = props => {
     [lgName, lgFileId]
   );
 
-  const template = (lgFile &&
-    lgFile.templates &&
-    lgFile.templates.find(template => {
+  const hasTemplate = useMemo(() => lgFile?.templates.find(t => t.name === lgName), []);
+  const template = (hasTemplate &&
+    lgFile?.templates.find(template => {
       return template.name === lgName;
     })) || {
     name: lgName,
     parameters: [],
     body: getInitialTemplate(name, value),
   };
 
+  const [localValue, setLocalValue] = useState(template.body);
+  const onChange = (body: string) => {
+    setLocalValue(body);
+    if (designerId) {
+      if (body) {
+        updateLgTemplate(body);
+        props.onChange(new LgTemplateRef(lgName).toString());
+      } else {
+        shellApi.removeLgTemplate(lgFileId, lgName);
+        props.onChange();
+      }
+    }
+  };
+
+  useEffect(() => {
+    // create the lg template if the schema porvides a default value
+    if (template.body && !hasTemplate) {
+      onChange(template.body);
+    }
+  }, []);
+
   const diagnostics = lgFile ? filterTemplateDiagnostics(lgFile.diagnostics, template) : [];
 
-  const [localValue, setLocalValue] = useState(template.body);
   const sync = useRef(
     debounce((shellData: any, localData: any) => {
       if (!isEqual(shellData, localData)) {
@@ -83,19 +103,6 @@ const LgField: React.FC<FieldProps<string>> = props => {
     templateId: lgName,
   };
 
-  const onChange = (body: string) => {
-    setLocalValue(body);
-    if (designerId) {
-      if (body) {
-        updateLgTemplate(body);
-        props.onChange(new LgTemplateRef(lgName).toString());
-      } else {
-        shellApi.removeLgTemplate(lgFileId, lgName);
-        props.onChange();
-      }
-    }
-  };
-
   return (
     <React.Fragment>
       <FieldLabel id={id} label={label} description={description} helpLink={uiOptions?.helpLink} />