fix: improve the user experience about lg editor

Composer/package.json

@@ -51,7 +51,7 @@
     "runtime": "cd ../runtime/dotnet/azurewebapp && dotnet build && dotnet run",
     "test": "yarn typecheck && jest",
     "test:watch": "yarn typecheck && jest --watch",
-    "test:coverage": "yarn test --coverage --no-cache --reporters=default",
+    "test:coverage": "yarn test --coverage --no-cache --forceExit --reporters=default",
     "test:integration": "cypress run --browser edge",
     "test:integration:start-server": "node scripts/e2e.js",
     "test:integration:open": "cypress open",

Composer/packages/client/__tests__/shell/lgApi.test.tsx

@@ -60,7 +60,7 @@ describe('use lgApi hooks', () => {
     const { result } = renderHook(() => useLgApi());
 
     result.current.updateLgTemplate('test.en-us', 'bar', 'update');
-
+    result.current.updateLgTemplate.flush();
     expect(actions.updateLgTemplate).toBeCalledTimes(1);
     const arg = {
       file: {

Composer/packages/client/config/webpack.config.js

@@ -274,7 +274,10 @@ module.exports = function (webpackEnv) {
         },
         {
           test: /\.worker\.ts$/,
-          use: { loader: 'worker-loader' },
+          use: {
+            loader: 'worker-loader',
+            options: { name: isEnvProduction ? '[hash].worker.js' : '[name].js' },
+          },
         },
         {
           // "oneOf" will traverse all following loaders until one will

Composer/packages/client/package.json

@@ -37,9 +37,8 @@
     "@uifabric/icons": "^7.3.4",
     "@uifabric/react-hooks": "^7.3.4",
     "@uifabric/styling": "^7.10.4",
-    "adaptive-expressions": "^4.10.0-preview-133287",
     "axios": "^0.19.2",
-    "botbuilder-lg": "^4.10.0-preview-133287",
+    "botbuilder-lg": "4.10.0-preview-135858",
     "format-message": "^6.2.3",
     "immer": "^5.2.0",
     "jwt-decode": "^2.2.0",

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

@@ -105,7 +105,6 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
 
   const _onChange = useCallback(
     (value) => {
-      setContent(value);
       if (!file) return;
       if (inlineMode) {
         if (!template) return;

Composer/packages/client/src/shell/lgApi.ts

@@ -3,14 +3,11 @@
 
 import { useEffect, useState } from 'react';
 import { LgFile } from '@bfc/shared';
-import throttle from 'lodash/throttle';
+import debounce from 'lodash/debounce';
 
-import * as lgUtil from '../utils/lgUtil';
 import { State, BoundActionHandlers } from '../store/types';
 import { useStoreContext } from '../hooks/useStoreContext';
 
-const createThrottledFunc = (fn) => throttle(fn, 1000, { leading: true, trailing: true });
-
 function createLgApi(state: State, actions: BoundActionHandlers, lgFileResolver: (id: string) => LgFile | undefined) {
   const getLgTemplates = (id) => {
     if (id === undefined) throw new Error('must have a file id');
@@ -28,9 +25,7 @@ function createLgApi(state: State, actions: BoundActionHandlers, lgFileResolver:
 
     const projectId = state.projectId;
 
-    lgUtil.checkSingleLgTemplate(template);
-
-    await actions.updateLgTemplate({
+    return actions.updateLgTemplate({
       file,
       projectId,
       templateName,
@@ -82,7 +77,7 @@ function createLgApi(state: State, actions: BoundActionHandlers, lgFileResolver:
   return {
     addLgTemplate: updateLgTemplate,
     getLgTemplates,
-    updateLgTemplate: createThrottledFunc(updateLgTemplate),
+    updateLgTemplate: debounce(updateLgTemplate, 250),
     removeLgTemplate,
     removeLgTemplates,
     copyLgTemplate,

Composer/packages/client/src/store/action/lg.ts

@@ -4,7 +4,6 @@ import clonedeep from 'lodash/cloneDeep';
 import { LgFile } from '@bfc/shared';
 
 import { ActionTypes } from '../../constants';
-import * as lgUtil from '../../utils/lgUtil';
 import { undoable } from '../middlewares/undo';
 import { ActionCreator, State, Store } from '../types';
 import LgWorker from '../parsers/lgWorker';
@@ -48,26 +47,26 @@ export const undoableUpdateLgFile = undoable(
 );
 
 export const updateLgTemplate: ActionCreator = async (store, { file, projectId, templateName, template }) => {
-  const newContent = lgUtil.updateTemplate(file.content, templateName, template);
+  const newContent = await LgWorker.updateTemplate(file.content, templateName, template);
   return await undoableUpdateLgFile(store, { id: file.id, projectId, content: newContent });
 };
 
 export const createLgTemplate: ActionCreator = async (store, { file, projectId, template }) => {
-  const newContent = lgUtil.addTemplate(file.content, template);
+  const newContent = await LgWorker.addTemplate(file.content, template);
   return await undoableUpdateLgFile(store, { id: file.id, projectId, content: newContent });
 };
 
 export const removeLgTemplate: ActionCreator = async (store, { file, projectId, templateName }) => {
-  const newContent = lgUtil.removeTemplate(file.content, templateName);
+  const newContent = await LgWorker.removeTemplate(file.content, templateName);
   return await undoableUpdateLgFile(store, { id: file.id, projectId, content: newContent });
 };
 
 export const removeLgTemplates: ActionCreator = async (store, { file, projectId, templateNames }) => {
-  const newContent = lgUtil.removeTemplates(file.content, templateNames);
+  const newContent = await LgWorker.removeAllTemplates(file.content, templateNames);
   return await undoableUpdateLgFile(store, { id: file.id, projectId, content: newContent });
 };
 
 export const copyLgTemplate: ActionCreator = async (store, { file, fromTemplateName, toTemplateName, projectId }) => {
-  const newContent = lgUtil.copyTemplate(file.content, fromTemplateName, toTemplateName);
+  const newContent = await LgWorker.copyTemplate(file.content, fromTemplateName, toTemplateName);
   return await undoableUpdateLgFile(store, { id: file.id, content: newContent, projectId });
 };

Composer/packages/client/src/store/parsers/baseWorker.ts

@@ -12,7 +12,7 @@ interface WorkerMsg {
 }
 
 // Wrapper class
-export class BaseWorker {
+export class BaseWorker<ActionType> {
   private worker: Worker;
   private resolves = {};
   private rejects = {};
@@ -22,9 +22,9 @@ export class BaseWorker {
     this.worker.onmessage = this.handleMsg.bind(this);
   }
 
-  public sendMsg<Payload>(payload: Payload) {
+  public sendMsg<Payload>(type: ActionType, payload: Payload) {
     const msgId = uniqueId();
-    const msg = { id: msgId, payload };
+    const msg = { id: msgId, type, payload };
     return new Promise((resolve, reject) => {
       // save callbacks for later
       this.resolves[msgId] = resolve;

Composer/packages/client/src/store/parsers/indexer.ts

@@ -4,12 +4,12 @@ import { FileInfo } from '@bfc/shared';
 
 import Worker from './workers/indexer.worker.ts';
 import { BaseWorker } from './baseWorker';
-import { IndexPayload } from './types';
+import { IndexPayload, IndexerActionType } from './types';
 
 // Wrapper class
-class Indexer extends BaseWorker {
+class Indexer extends BaseWorker<IndexerActionType> {
   index(files: FileInfo, botName: string, schemas: any, locale: string) {
-    return this.sendMsg<IndexPayload>({ files, botName, schemas, locale });
+    return this.sendMsg<IndexPayload>(IndexerActionType.Index, { files, botName, schemas, locale });
   }
 }
 

Composer/packages/client/src/store/parsers/lgWorker.ts

@@ -1,15 +1,47 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { LgFile } from '@bfc/shared';
+import { LgFile, LgTemplate } from '@bfc/shared';
 
 import Worker from './workers/lgParser.worker.ts';
 import { BaseWorker } from './baseWorker';
-import { LgPayload } from './types';
+import {
+  LgActionType,
+  LgParsePayload,
+  LgUpdateTemplatePayload,
+  LgCreateTemplatePayload,
+  LgRemoveTemplatePayload,
+  LgRemoveAllTemplatesPayload,
+  LgCopyTemplatePayload,
+} from './types';
 
 // Wrapper class
-class LgWorker extends BaseWorker {
+class LgWorker extends BaseWorker<LgActionType> {
   parse(targetId: string, content: string, lgFiles: LgFile[]) {
-    return this.sendMsg<LgPayload>({ targetId, content, lgFiles: lgFiles });
+    return this.sendMsg<LgParsePayload>(LgActionType.Parse, { targetId, content, lgFiles: lgFiles });
+  }
+
+  addTemplate(content: string, template: LgTemplate) {
+    return this.sendMsg<LgCreateTemplatePayload>(LgActionType.AddTemplate, { content, template });
+  }
+
+  updateTemplate(content: string, templateName: string, template: LgTemplate) {
+    return this.sendMsg<LgUpdateTemplatePayload>(LgActionType.UpdateTemplate, { content, templateName, template });
+  }
+
+  removeTemplate(content: string, templateName: string) {
+    return this.sendMsg<LgRemoveTemplatePayload>(LgActionType.RemoveTemplate, { content, templateName });
+  }
+
+  removeAllTemplates(content: string, templateNames: string[]) {
+    return this.sendMsg<LgRemoveAllTemplatesPayload>(LgActionType.RemoveAllTemplates, { content, templateNames });
+  }
+
+  copyTemplate(content: string, fromTemplateName: string, toTemplateName: string) {
+    return this.sendMsg<LgCopyTemplatePayload>(LgActionType.CopyTemplate, {
+      content,
+      fromTemplateName,
+      toTemplateName,
+    });
   }
 }
 

Composer/packages/client/src/store/parsers/luWorker.ts

@@ -7,25 +7,25 @@ import { BaseWorker } from './baseWorker';
 import { LuPayload, LuActionType } from './types';
 
 // Wrapper class
-class LuWorker extends BaseWorker {
+class LuWorker extends BaseWorker<LuActionType> {
   parse(id: string, content: string) {
-    const payload = { type: LuActionType.Parse, id, content };
-    return this.sendMsg<LuPayload>(payload);
+    const payload = { id, content };
+    return this.sendMsg<LuPayload>(LuActionType.Parse, payload);
   }
 
   addIntent(content: string, intent: LuIntentSection) {
-    const payload = { type: LuActionType.AddIntent, content, intent };
-    return this.sendMsg<LuPayload>(payload);
+    const payload = { content, intent };
+    return this.sendMsg<LuPayload>(LuActionType.AddIntent, payload);
   }
 
   updateIntent(content: string, intentName: string, intent?: LuIntentSection) {
-    const payload = { type: LuActionType.UpdateIntent, content, intentName, intent };
-    return this.sendMsg<LuPayload>(payload);
+    const payload = { content, intentName, intent };
+    return this.sendMsg<LuPayload>(LuActionType.UpdateIntent, payload);
   }
 
   removeIntent(content: string, intentName: string) {
-    const payload = { type: LuActionType.RemoveIntent, content, intentName };
-    return this.sendMsg<LuPayload>(payload);
+    const payload = { content, intentName };
+    return this.sendMsg<LuPayload>(LuActionType.RemoveIntent, payload);
   }
 }
 

Composer/packages/client/src/store/parsers/types.ts

@@ -1,21 +1,47 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { LuIntentSection, LgFile, FileInfo } from '@bfc/shared';
+import { LuIntentSection, LgFile, FileInfo, LgTemplate } from '@bfc/shared';
 
 export type LuPayload = {
-  type: LuActionType;
   content: string;
   id?: string;
   intentName?: string;
   intent?: LuIntentSection;
 };
 
-export type LgPayload = {
+export type LgParsePayload = {
   targetId: string;
   content: string;
   lgFiles: LgFile[];
 };
 
+export interface LgCreateTemplatePayload {
+  content: string;
+  template: LgTemplate;
+}
+
+export interface LgUpdateTemplatePayload {
+  content: string;
+  templateName: string;
+  template: LgTemplate;
+}
+
+export interface LgRemoveTemplatePayload {
+  content: string;
+  templateName: string;
+}
+
+export interface LgRemoveAllTemplatesPayload {
+  content: string;
+  templateNames: string[];
+}
+
+export interface LgCopyTemplatePayload {
+  content: string;
+  fromTemplateName: string;
+  toTemplateName: string;
+}
+
 export type IndexPayload = {
   files: FileInfo;
   botName: string;
@@ -29,3 +55,16 @@ export enum LuActionType {
   UpdateIntent = 'update-intent',
   RemoveIntent = 'remove-intent',
 }
+
+export enum LgActionType {
+  Parse = 'parse',
+  AddTemplate = 'add-template',
+  UpdateTemplate = 'update-template',
+  RemoveTemplate = 'remove-template',
+  RemoveAllTemplates = 'remove-all-templates',
+  CopyTemplate = 'copy-template',
+}
+
+export enum IndexerActionType {
+  Index = 'index',
+}