fix: lg files auto add placeholder for missing templates

Composer/packages/client/src/pages/language-generation/code-editor.tsx

@@ -178,23 +178,21 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
     );
   }, [lgOption]);
 
-  const defaultLanguageFileEditor = useMemo(() => {
-    return (
-      <LgEditor
-        editorSettings={userSettings.codeEditor}
-        lgOption={{
-          fileId: dialogId,
-        }}
-        lgTemplates={file?.allTemplates}
-        mode="codeEditor"
-        options={{
-          readOnly: true,
-        }}
-        value={defaultLangContent}
-        onChange={() => {}}
-      />
-    );
-  }, [dialogId]);
+  const defaultLanguageFileEditor = (
+    <LgEditor
+      editorSettings={userSettings.codeEditor}
+      lgOption={{
+        fileId: dialogId,
+      }}
+      lgTemplates={file?.allTemplates}
+      mode="codeEditor"
+      options={{
+        readOnly: true,
+      }}
+      value={defaultLangContent}
+      onChange={() => {}}
+    />
+  );
 
   return (
     <Fragment>

Composer/packages/client/src/recoilModel/dispatchers/__tests__/dialog.test.tsx

@@ -74,23 +74,12 @@ jest.mock('@bfc/indexers', () => {
 jest.mock('../../parsers/luWorker', () => {
   return {
     parse: (id: string, content) => ({ id, content }),
-    addIntent: require('@bfc/indexers/lib/utils/luUtil').addIntent,
-    addIntents: require('@bfc/indexers/lib/utils/luUtil').addIntents,
-    updateIntent: require('@bfc/indexers/lib/utils/luUtil').updateIntent,
-    removeIntent: require('@bfc/indexers/lib/utils/luUtil').removeIntent,
-    removeIntents: require('@bfc/indexers/lib/utils/luUtil').removeIntents,
   };
 });
 
 jest.mock('../../parsers/lgWorker', () => {
   return {
     parse: (id: string, content) => ({ id, content }),
-    addTemplate: require('../../../utils/lgUtil').addTemplate,
-    addTemplates: require('../../../utils/lgUtil').addTemplates,
-    updateTemplate: require('../../../utils/lgUtil').updateTemplate,
-    removeTemplate: require('../../../utils/lgUtil').removeTemplate,
-    removeAllTemplates: require('../../../utils/lgUtil').removeTemplates,
-    copyTemplate: require('../../../utils/lgUtil').copyTemplate,
   };
 });
 

Composer/packages/client/src/recoilModel/dispatchers/__tests__/lg.test.tsx

@@ -24,17 +24,19 @@ jest.mock('../../parsers/lgWorker', () => {
   return {
     parse: (projectId, id, content) => ({ id, content }),
     addTemplate: (projectId, lgFile, template) =>
-      filterParseResult(require('../../../utils/lgUtil').addTemplate(lgFile, template)),
+      filterParseResult(require('@bfc/indexers/lib/utils/lgUtil').addTemplate(lgFile, template)),
     addTemplates: (projectId, lgFile, templates) =>
-      filterParseResult(require('../../../utils/lgUtil').addTemplates(lgFile, templates)),
+      filterParseResult(require('@bfc/indexers/lib/utils/lgUtil').addTemplates(lgFile, templates)),
     updateTemplate: (projectId, lgFile, templateName, template) =>
-      filterParseResult(require('../../../utils/lgUtil').updateTemplate(lgFile, templateName, template)),
+      filterParseResult(require('@bfc/indexers/lib/utils/lgUtil').updateTemplate(lgFile, templateName, template)),
     removeTemplate: (projectId, lgFile, templateName) =>
-      filterParseResult(require('../../../utils/lgUtil').removeTemplate(lgFile, templateName)),
+      filterParseResult(require('@bfc/indexers/lib/utils/lgUtil').removeTemplate(lgFile, templateName)),
     removeTemplates: (projectId, lgFile, templateNames) =>
-      filterParseResult(require('../../../utils/lgUtil').removeTemplates(lgFile, templateNames)),
+      filterParseResult(require('@bfc/indexers/lib/utils/lgUtil').removeTemplates(lgFile, templateNames)),
     copyTemplate: (projectId, lgFile, fromTemplateName, toTemplateName) =>
-      filterParseResult(require('../../../utils/lgUtil').copyTemplate(lgFile, fromTemplateName, toTemplateName)),
+      filterParseResult(
+        require('@bfc/indexers/lib/utils/lgUtil').copyTemplate(lgFile, fromTemplateName, toTemplateName)
+      ),
   };
 });
 const lgFiles = [

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

@@ -15,8 +15,8 @@ import LgWorker from './../parsers/lgWorker';
 import LgDiagnosticWorker from './../parsers/lgDiagnosticWorker';
 import { lgFileIdsState, lgFileState, localeState, settingsState } from './../atoms/botState';
 
-const templateIsNotEmpty = ({ name, body }) => {
-  return !!name && !!body;
+const templateIsNotEmpty = ({ name }) => {
+  return !!name;
 };
 
 // fill other locale lgFile new added template with '- '
@@ -101,6 +101,13 @@ export const getRelatedLgFileChanges = async (
   const onlyAdds = addedTemplates.length && !deletedTemplates.length;
   const onlyDeletes = !addedTemplates.length && deletedTemplates.length;
 
+  //TODO(zhixzhan): do completed comparation to find all template updates to sync.
+  const singleNameUpdate =
+    addedTemplates.length === 1 && deletedTemplates.length === 1
+      ? updatedLgFile.templates.findIndex(({ name }) => name === addedTemplates[0].name) ===
+        originLgFile.templates.findIndex(({ name }) => name === deletedTemplates[0].name)
+      : false;
+
   // sync add/remove templates
   if (onlyAdds || onlyDeletes) {
     for (const file of sameIdOtherLocaleFiles) {
@@ -113,6 +120,18 @@ export const getRelatedLgFileChanges = async (
       )) as LgFile;
       changes.push(newLgFile);
     }
+    // sync name change
+  } else if (singleNameUpdate) {
+    for (const file of sameIdOtherLocaleFiles) {
+      const newLgFile = (await LgWorker.updateTemplate(
+        projectId,
+        file,
+        deletedTemplates[0].name,
+        addedTemplates[0],
+        lgFiles
+      )) as LgFile;
+      changes.push(newLgFile);
+    }
   }
 
   return changes;
@@ -230,7 +249,7 @@ export const lgDispatcher = () => {
 
         updateLgFiles(callbackHelpers, projectId, { updates: updatedFiles }, (current, changed) => {
           // compare to drop expired content already setted above.
-          return current?.content === changed?.content;
+          return current.id === id ? current?.content === changed?.content : true;
         });
 
         // if changes happen on common.lg, async re-parse all.

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

@@ -20,6 +20,7 @@ import {
   SensitiveProperties,
   RootBotManagedProperties,
   defaultPublishConfig,
+  LgFile,
 } from '@bfc/shared';
 import formatMessage from 'format-message';
 import camelCase from 'lodash/camelCase';
@@ -83,10 +84,23 @@ import UndoHistory from '../../undo/undoHistory';
 import { logMessage, setError } from '../shared';
 import { setRootBotSettingState } from '../setting';
 import { lgFilesSelectorFamily } from '../../selectors/lg';
+import { createMissingLgTemplatesForDialogs } from '../../../utils/lgUtil';
 
 import { crossTrainConfigState } from './../../atoms/botState';
 import { recognizersSelectorFamily } from './../../selectors/recognizers';
 
+const repairBotProject = async (
+  callbackHelpers: CallbackInterface,
+  { projectId, botFiles }: { projectId: string; botFiles: any }
+) => {
+  const { set } = callbackHelpers;
+  const lgFiles: LgFile[] = botFiles.lgFiles;
+  const dialogs: DialogInfo[] = botFiles.dialogs;
+
+  const updatedLgFiles = await createMissingLgTemplatesForDialogs(projectId, dialogs, lgFiles);
+  set(lgFilesSelectorFamily(projectId), updatedLgFiles);
+};
+
 export const resetBotStates = async ({ reset }: CallbackInterface, projectId: string) => {
   const botStates = Object.keys(botstates);
   botStates.forEach((state) => {
@@ -401,6 +415,10 @@ export const initBotState = async (callbackHelpers: CallbackInterface, data: any
 
   set(filePersistenceState(projectId), new FilePersistence(projectId));
   set(undoHistoryState(projectId), new UndoHistory(projectId));
+
+  // async repair bot assets, add missing lg templates
+  repairBotProject(callbackHelpers, { projectId, botFiles });
+
   return mainDialog;
 };
 

Composer/packages/client/src/utils/__tests__/lgUtil.test.ts

@@ -0,0 +1,58 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { DialogInfo, LgFile } from '@bfc/shared';
+
+import { createMissingLgTemplatesForDialogs } from '../lgUtil';
+
+jest.mock('../../recoilModel/parsers/lgWorker', () => {
+  return {
+    addTemplates: (projectId, lgFile, templatesToAdd, lgFiles) =>
+      require('@bfc/indexers/lib/utils/lgUtil').addTemplates(lgFile, templatesToAdd),
+  };
+});
+
+const bot1 = {
+  projectId: 'test',
+  lgFiles: [
+    {
+      id: 'EmptyBot-Test.en-us',
+      templates: [{ name: 'SendActivity_Welcome' }, { name: 'SendActivity_jKvFxl' }],
+      content: `# SendActivity_Welcome
+        - welcome
+        # SendActivity_jKvFxl()
+        -  1`,
+    } as LgFile,
+    {
+      id: 'EmptyBot-Test.zh-cn',
+      templates: [{ name: 'SendActivity_Welcome' }, { name: 'SendActivity_8Oc1NU' }],
+      content: `# SendActivity_Welcome
+        - welcome
+        # SendActivity_8Oc1NU()
+        -  2`,
+    } as LgFile,
+  ],
+  dialogs: [
+    {
+      id: 'EmptyBot-Test',
+      lgFile: 'EmptyBot-Test',
+      lgTemplates: [{ name: 'SendActivity_Welcome' }, { name: 'SendActivity_jKvFxl' }, { name: 'SendActivity_8Oc1NU' }],
+    } as DialogInfo,
+  ],
+};
+
+describe('client lgUtil tests', () => {
+  it('should create missing lg templates for dialogs', async () => {
+    const { projectId, lgFiles, dialogs } = bot1;
+
+    const updatedLgFiles = await createMissingLgTemplatesForDialogs(projectId, dialogs, lgFiles);
+
+    expect(updatedLgFiles.length).toEqual(2);
+    expect(updatedLgFiles[0].id).toEqual('EmptyBot-Test.en-us');
+    expect(updatedLgFiles[0].templates.length).toEqual(3);
+    expect(updatedLgFiles[0].templates.map(({ name }) => name)).toContain('SendActivity_8Oc1NU');
+    expect(updatedLgFiles[1].id).toEqual('EmptyBot-Test.zh-cn');
+    expect(updatedLgFiles[1].templates.length).toEqual(3);
+    expect(updatedLgFiles[1].templates.map(({ name }) => name)).toContain('SendActivity_jKvFxl');
+  });
+});

Composer/packages/client/src/utils/lgUtil.ts

@@ -1,10 +1,45 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { DialogInfo, LgFile, LgTemplate } from '@bfc/shared';
+import difference from 'lodash/difference';
+
+import lgWorker from '../recoilModel/parsers/lgWorker';
+
+import { getBaseName } from './fileUtil';
+
 /**
- * lgUtil.ts is a single place use lg-parser handle lg file operation.
- * it's designed have no state, input text file, output text file.
- *
+ * Auto create placeholder template used in dialog but did not exist in <dialog>.<*locale>.lg
  */
 
-export * from '@bfc/indexers/lib/utils/lgUtil';
+export const createMissingLgTemplatesForDialogs = async (
+  projectId: string,
+  dialogs: DialogInfo[],
+  lgFiles: LgFile[]
+): Promise<LgFile[]> => {
+  const updatedLgFiles: LgFile[] = [];
+
+  const templateNamesInDialog: Record<string, string[]> = dialogs.reduce((result, dialog: DialogInfo) => {
+    const { id, lgTemplates } = dialog;
+    result[id] = lgTemplates.map(({ name }) => name);
+    return result;
+  }, {});
+
+  for (const lgFile of lgFiles) {
+    const dialogId = getBaseName(lgFile.id);
+    const templatesShouldExist = templateNamesInDialog[dialogId];
+    const templatesInLgFile = lgFile.templates.map(({ name }) => name);
+    const templatesNotExist = difference(templatesShouldExist, templatesInLgFile);
+    if (templatesNotExist?.length) {
+      const templatesToAdd = templatesNotExist.map((name) => {
+        return { name, body: '-', parameters: [] } as LgTemplate;
+      });
+      const updatedFile = (await lgWorker.addTemplates(projectId, lgFile, templatesToAdd, lgFiles)) as LgFile;
+      updatedLgFiles.push(updatedFile);
+    } else {
+      updatedLgFiles.push(lgFile);
+    }
+  }
+
+  return updatedLgFiles;
+};

Composer/packages/lib/code-editor/src/BaseEditor.tsx

@@ -146,6 +146,7 @@ const BaseEditor: React.FC<BaseEditorProps> = (props) => {
 
   // initialValue is designed to imporve local performance
   // it should be force updated if id change, or previous value is empty.
+  // if editor is readOnly, we can take external value updates.
   const initialValue = useMemo(() => value || (hidePlaceholder ? '' : placeholder), [id, !!value]);
 
   const onEditorMount: EditorDidMount = (getValue, editor) => {
@@ -242,7 +243,13 @@ const BaseEditor: React.FC<BaseEditorProps> = (props) => {
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
       >
-        <Editor {...rest} key={id} editorDidMount={onEditorMount} options={editorOptions} value={initialValue || ''} />
+        <Editor
+          {...rest}
+          key={id}
+          editorDidMount={onEditorMount}
+          options={editorOptions}
+          value={(editorOptions?.readOnly ? value : initialValue) || ''}
+        />
       </div>
       {(hasError || hasWarning) && (
         <MessageBar

Composer/packages/lib/indexers/__tests__/lgIndexer.test.ts

@@ -2,10 +2,8 @@
 // Licensed under the MIT License.
 
 import { FileInfo, lgImportResolverGenerator, ResolverResource } from '@bfc/shared';
-import { LGResource } from 'botbuilder-lg';
 
 import { lgIndexer } from '../src/lgIndexer';
-import { getBaseName } from '../src/utils/help';
 
 const { parse, index } = lgIndexer;