fix: Move bf-generate-lib templates to asar.unpacked

Composer/packages/client/src/pages/form-dialog/CreateFormDialogSchemaModal.tsx

@@ -71,6 +71,7 @@ const CreateFormDialogSchemaModal: React.FC<Props> = (props) => {
         <Stack>
           <TextField
             required
+            autoComplete="off"
             errorMessage={formErrors.name}
             label={formatMessage('Name')}
             styles={name}

Composer/packages/client/src/recoilModel/dispatchers/project.ts

@@ -22,6 +22,7 @@ import {
   botProjectSpaceLoadedState,
   botStatusState,
   currentProjectIdState,
+  filePersistenceState,
   projectMetaDataState,
 } from '../atoms';
 import { dispatcherState } from '../DispatcherWrapper';
@@ -343,6 +344,7 @@ export const projectDispatcher = () => {
   });
 
   const reloadProject = async (callbackHelpers: CallbackInterface, response: any) => {
+    callbackHelpers.reset(filePersistenceState(response.data.id));
     const { projectData, botFiles } = loadProjectData(response);
 
     await initBotState(callbackHelpers, projectData, botFiles);

Composer/packages/electron-server/package.json

@@ -13,8 +13,9 @@
     "clean": "rimraf build && rimraf dist && rimraf l10ntemp",
     "copy-extensions": "node scripts/copy-extensions.js",
     "copy-runtime": "node scripts/copy-runtime.js",
+    "copy-form-dialog-templates": "node scripts/copy-form-dialog-templates.js",
     "dist": "node scripts/electronBuilderDist.js",
-    "dist:full": "yarn clean && yarn build && yarn run pack && yarn copy-runtime && yarn copy-extensions && yarn dist",
+    "dist:full": "yarn clean && yarn build && yarn run pack && yarn copy-runtime && yarn copy-extensions && yarn copy-form-dialog-templates && yarn dist",
     "lint": "eslint --quiet ./src",
     "lint:fix": "yarn lint --fix",
     "pack": "node scripts/electronBuilderPack.js",

Composer/packages/electron-server/scripts/copy-form-dialog-templates.js

@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+const fs = require('fs-extra');
+const { resolve } = require('path');
+const electronBuildConfig = require('../electron-builder-config.json');
+
+const tag = 'copy-form-dialogs-templates.js';
+
+const source = resolve(__dirname, '../../../node_modules/@microsoft/bf-generate-library/templates');
+const unpackedDir = 'app.asar.unpacked/form-dialog-templates';
+console.log(`[${tag}] Copying templates from: ${source}`);
+
+let destination;
+switch (process.platform) {
+  case 'darwin':
+    const productName = electronBuildConfig.productName;
+    destination = resolve(__dirname, `../dist/mac/${productName}.app/Contents/Resources`, unpackedDir);
+    console.log(`[${tag}] Mac detected. Copying templates to: ${destination}`);
+    break;
+
+  case 'linux':
+    destination = resolve(__dirname, '../dist/linux-unpacked/resources', unpackedDir);
+    console.log(`[${tag}] Linux detected. Copying templates to: ${destination}`);
+    break;
+
+  case 'win32':
+    destination = resolve(__dirname, '../dist/win-unpacked/resources', unpackedDir);
+    console.log(`[${tag}] Windows detected. Copying templates to ${destination}`);
+    break;
+
+  default:
+    console.error(`[${tag}] Detected platform is not Mac / Linux / Windows`);
+    process.exit(1);
+}
+
+// copy templates from bf-generate-library/templates to asar unpacked dir under packaged electron app
+fs.copy(source, destination, { filter: (src) => !src.endsWith('.md') }, (err) => {
+  if (err) {
+    console.error(`[${tag}] Error while copying plugins: `, err);
+    return;
+  }
+  console.log(`[${tag}] Copied plugins successfully.`);
+});

Composer/packages/electron-server/src/main.ts

@@ -143,6 +143,7 @@ async function loadServer() {
     const unpackedDir = getUnpackedAsarPath();
     process.env.COMPOSER_RUNTIME_FOLDER = join(unpackedDir, 'runtime');
     process.env.COMPOSER_BUILTIN_EXTENSIONS_DIR = join(unpackedDir, 'build', 'extensions');
+    process.env.COMPOSER_FORM_DIALOG_TEMPLATES_DIR = join(unpackedDir, 'form-dialog-templates');
   }
 
   // only create a new data directory if packaged electron app

Composer/packages/form-dialogs/src/atoms/appState.ts

@@ -103,7 +103,7 @@ export const formDialogSchemaJsonSelector = selector({
     const schemaPropertyStores = propertyIds.map((pId) => get(formDialogPropertyAtom(pId)));
 
     let jsonObject: object = {
-      schema: schemaDraftUrl,
+      $schema: schemaDraftUrl,
       type: 'object',
       $requires: ['standard.schema'],
     };

Composer/packages/form-dialogs/src/atoms/utils.ts

@@ -77,7 +77,7 @@ export const createSchemaStoreFromJson = (schemaName: string, jsonString: string
     const propertyType = propertyData?.type || 'ref';
     const array = propertyType === 'array';
     const payload = retrievePayload(propertyType, propertyData, array);
-    const kind = <FormDialogPropertyKind>(propertyType === 'array' ? payload.kind : propertyType);
+    const kind = <FormDialogPropertyKind>(propertyType === 'array' ? payload.kind || 'ref' : propertyType);
     const required = requiredArray.indexOf(name) !== -1;
     const examples = examplesRecord[name] || [];
 

Composer/packages/form-dialogs/src/components/property/FormDialogPropertyCard.tsx

@@ -175,7 +175,12 @@ export const FormDialogPropertyCard = React.memo((props: FormDialogPropertyCardP
             styles={{ root: { flex: 1 } }}
             value={name}
             onChange={changeName}
-            onRenderLabel={onRenderLabel(formatMessage('Property name help text'), propertyNameTooltipId)}
+            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.`
+              ),
+              propertyNameTooltipId
+            )}
           />
           <Stack
             horizontal
@@ -232,7 +237,10 @@ export const FormDialogPropertyCard = React.memo((props: FormDialogPropertyCardP
               checked={array}
               label={formatMessage('Accepts multiple values')}
               onChange={changeArray}
-              onRenderLabel={onRenderLabel(formatMessage('Property array help text'), propertyArrayTooltipId)}
+              onRenderLabel={onRenderLabel(
+                formatMessage('This option allows your users to give multiple values for this property.'),
+                propertyArrayTooltipId
+              )}
             />
           </Stack>
         </Stack>

Composer/packages/form-dialogs/src/components/property/NumberPropertyContent.tsx

@@ -45,7 +45,12 @@ export const NumberPropertyContent = React.memo((props: Props) => {
               minimum: payload.kind === 'integer' ? parseInt(value, 10) : parseFloat(value),
             })
           }
-          onRenderLabel={onRenderLabel(formatMessage('Minimum help text'), minTooltipId)}
+          onRenderLabel={onRenderLabel(
+            formatMessage(
+              'Optional. Setting a minimum value enables your bot to reject a value that is too small and re-prompt the user for a new value.'
+            ),
+            minTooltipId
+          )}
         />
         <TextField
           aria-describedby={maxTooltipId}
@@ -60,7 +65,12 @@ export const NumberPropertyContent = React.memo((props: Props) => {
               maximum: payload.kind === 'integer' ? parseInt(value, 10) : parseFloat(value),
             })
           }
-          onRenderLabel={onRenderLabel(formatMessage('Maximum help text'), maxTooltipId)}
+          onRenderLabel={onRenderLabel(
+            formatMessage(
+              'Optional. Setting a maximum value enables your bot to reject a value that is too large and re-prompt the user for a new value.'
+            ),
+            maxTooltipId
+          )}
         />
       </Stack>
     </Stack>

Composer/packages/form-dialogs/src/components/property/PropertyTypeSelector.tsx

@@ -177,7 +177,12 @@ export const PropertyTypeSelector = React.memo((props: Props) => {
       selectedKey={selectedKey}
       styles={{ root: { minWidth: 200 } }}
       onChange={change}
-      onRenderLabel={onRenderLabel(formatMessage('Property type help text'), propertyTypeTooltipId)}
+      onRenderLabel={onRenderLabel(
+        formatMessage(
+          `The property type defines the expected input. The type can be a list (or enum) of defined values or a data format, such as a date, email, number, or string.`
+        ),
+        propertyTypeTooltipId
+      )}
     />
   );
 });

Composer/packages/form-dialogs/src/components/property/StringPropertyContent.tsx

@@ -37,7 +37,12 @@ export const StringPropertyContent = React.memo((props: Props) => {
         label={formatMessage('Accepted values')}
         values={payload.enums || []}
         onChange={changeEnum}
-        onRenderLabel={onRenderLabel(formatMessage('Enum help text'), tooltipId)}
+        onRenderLabel={onRenderLabel(
+          formatMessage(
+            'For properties of type list (or enum), your bot accepts only the values you define. After your dialog is generated, you can provide synonyms for each value.'
+          ),
+          tooltipId
+        )}
       />
     )
   );

Composer/packages/server/package.json

@@ -63,7 +63,7 @@
     "@bfc/lu-languageserver": "*",
     "@bfc/shared": "*",
     "@microsoft/bf-dispatcher": "^4.11.0-beta.20201015.008a3a4",
-    "@microsoft/bf-generate-library": "^4.10.0-daily.20201008.172736",
+    "@microsoft/bf-generate-library": "^4.10.0-daily.20201015.174962",
     "@microsoft/bf-lu": "^4.11.0-dev.20201013.7ccb128",
     "archiver": "^5.0.2",
     "axios": "^0.19.2",

Composer/packages/server/src/controllers/formDialog.ts

@@ -1,12 +1,36 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { Request, Response } from 'express';
+import * as path from 'path';
+
 import { ExtensionContext } from '@bfc/extension';
-import { schemas, expandPropertyDefinition } from '@microsoft/bf-generate-library';
+import { expandPropertyDefinition, schemas } from '@microsoft/bf-generate-library';
+import { Request, Response } from 'express';
+import * as fs from 'fs-extra';
 
 import { BotProjectService } from '../services/project';
 
+// If we are in electron, the env variable has the asar.unpacked path to the templates
+// Otherwise, library uses built in templates path
+const getTemplatesRootDir = () =>
+  process.env.COMPOSER_FORM_DIALOG_TEMPLATES_DIR ? process.env.COMPOSER_FORM_DIALOG_TEMPLATES_DIR : undefined;
+
+const getTemplateDirs = async () => {
+  const templatesRootDir = getTemplatesRootDir();
+  const dirs: string[] = [];
+  if (templatesRootDir && templatesRootDir.length) {
+    for (const dirName of await fs.readdir(templatesRootDir)) {
+      const dir = path.join(templatesRootDir, dirName);
+      if ((await fs.lstat(dir)).isDirectory()) {
+        // Add templates subdirectories as templates
+        dirs.push(dir);
+      }
+    }
+  }
+
+  return dirs;
+};
+
 const expandJsonSchemaProperty = async (req: Request, res: Response) => {
   const { propertyName, schema } = req.body;
   const result = await expandPropertyDefinition(propertyName, schema);
@@ -21,7 +45,8 @@ const expandJsonSchemaProperty = async (req: Request, res: Response) => {
 };
 
 const getTemplateSchemas = async (req: Request, res: Response) => {
-  const result = await schemas();
+  const templatesDirs = await getTemplateDirs();
+  const result = await schemas(templatesDirs);
 
   if (result !== undefined) {
     res.status(200).json(result);
@@ -40,7 +65,9 @@ const generate = async (req: Request, res: Response) => {
   if (currentProject !== undefined) {
     const { name } = req.body;
 
-    await currentProject.generateDialog(name);
+    const templatesDirs = await getTemplateDirs();
+
+    await currentProject.generateDialog(name, templatesDirs);
     const updatedProject = await BotProjectService.getProjectById(projectId, user);
     res.status(200).json({ id: projectId, ...updatedProject.getProject() });
   } else {