fix: Undo / redo behavior on LG resources

Composer/packages/client/__tests__/store/reducer/reducer.test.js

@@ -24,8 +24,18 @@ describe('test all reducer handlers', () => {
     expect(result.dialogs[0]).toBe('test dialogs');
   });
   it('test updateLgTemplate reducer', () => {
-    const result = reducer({}, { type: ActionTypes.UPDATE_LG_SUCCESS, payload: { response: mockResponse } });
-    expect(result.lgFiles[0]).toBe('test lgFiles');
+    const result = reducer(
+      { lgFiles: [{ id: 'common.lg', content: 'test lgFiles' }] },
+      {
+        type: ActionTypes.UPDATE_LG_SUCCESS,
+        payload: {
+          id: 'common.lg',
+          content: ` # bfdactivity-003038
+        - You said '@{turn.activity.text}'`,
+        },
+      }
+    );
+    expect(result.lgFiles[0].templates.length).toBe(1);
   });
 
   it('test getStorageFileSuccess reducer', () => {

Composer/packages/client/src/ShellApi.ts

@@ -46,7 +46,17 @@ const FileTargetTypes = {
 export const ShellApi: React.FC = () => {
   const { state, actions } = useContext(StoreContext);
 
-  const { dialogs, schemas, lgFiles, luFiles, designPageLocation, focusPath, breadcrumb, botName } = state;
+  const {
+    dialogs,
+    schemas,
+    lgFiles,
+    luFiles,
+    designPageLocation,
+    focusPath,
+    breadcrumb,
+    botName,
+    externalUpdate,
+  } = state;
   const updateDialog = actions.updateDialog;
   const updateLuFile = actions.updateLuFile; //if debounced, error can't pass to form
   const updateLgFile = actions.updateLgFile;
@@ -322,6 +332,17 @@ export const ShellApi: React.FC = () => {
     apiClient.apiCall('reset', nextState, window.frames[VISUAL_EDITOR]);
   }
 
+  function resetDataAll() {
+    if (window.frames[VISUAL_EDITOR]) {
+      const editorWindow = window.frames[VISUAL_EDITOR];
+      apiClient.apiCall('reset', getState(VISUAL_EDITOR), editorWindow);
+    }
+    if (window.frames[FORM_EDITOR]) {
+      const editorWindow = window.frames[FORM_EDITOR];
+      apiClient.apiCall('reset', getState(FORM_EDITOR), editorWindow);
+    }
+  }
+
   useEffect(() => {
     apiClient.connect();
 
@@ -370,18 +391,19 @@ export const ShellApi: React.FC = () => {
   }); // this is intented to reconstruct everytime store is refresh
 
   useEffect(() => {
-    if (window.frames[VISUAL_EDITOR]) {
-      const editorWindow = window.frames[VISUAL_EDITOR];
-      apiClient.apiCall('reset', getState(VISUAL_EDITOR), editorWindow);
-    }
+    resetDataAll();
   }, [dialogs, lgFiles, luFiles, focusPath, selected, focused, promptTab]);
 
+  //reset the date if the data is not updated by editor
   useEffect(() => {
-    if (window.frames[FORM_EDITOR]) {
-      const editorWindow = window.frames[FORM_EDITOR];
-      apiClient.apiCall('reset', getState(FORM_EDITOR), editorWindow);
+    let editorWindow = null;
+    if ((editorWindow = window.frames[VISUAL_EDITOR])) {
+      apiClient.apiCall('updateExtension', externalUpdate, editorWindow);
     }
-  }, [dialogs, lgFiles, luFiles, focusPath, selected, focused, promptTab]);
+    if ((editorWindow = window.frames[FORM_EDITOR])) {
+      apiClient.apiCall('updateExtension', externalUpdate, editorWindow);
+    }
+  }, [externalUpdate]);
 
   useEffect(() => {
     const schemaError = get(schemas, 'diagnostics', []);

Composer/packages/client/src/constants/index.ts

@@ -90,6 +90,7 @@ export enum ActionTypes {
   GET_ENDPOINT_SUCCESS = 'GET_ENDPOINT_SUCCESS', // remote publish
   ONBOARDING_ADD_COACH_MARK_REF = 'ONBOARDING_ADD_COACH_MARK_REF',
   ONBOARDING_SET_COMPLETE = 'ONBOARDING_SET_COMPLETE',
+  SET_UPDATE_STATUS = 'SET_UPDATE_STATUS',
 }
 
 export const Tips = {

Composer/packages/client/src/extension-container/ExtensionContainer.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { initializeIcons } from '@uifabric/icons';
 import { ShellData, ShellApi } from '@bfc/shared';
 
@@ -121,6 +121,9 @@ const shellApi: ShellApi = {
 
 function ExtensionContainer() {
   const [shellData, setShellData] = useState<ShellData>({} as ShellData);
+  const [forceUpdateCount, setForceUpdateCount] = useState<number>(0);
+  const forceUpdateCountRef = useRef(forceUpdateCount);
+  forceUpdateCountRef.current = forceUpdateCount;
 
   useEffect(() => {
     apiClient.connect();
@@ -146,6 +149,15 @@ function ExtensionContainer() {
       return result;
     });
 
+    apiClient.registerApi('updateExtension', externalUpdate => {
+      //the externalUpdate contains the reason of the update.
+      //use key to forceupdate the extension.
+      //we can use the info from externalUpdate in the future.
+      if (externalUpdate) {
+        setForceUpdateCount(forceUpdateCountRef.current + 1);
+      }
+    });
+
     shellApi.getState().then(result => {
       setShellData(result);
     });
@@ -157,7 +169,9 @@ function ExtensionContainer() {
 
   const RealEditor = shellData.data ? getEditor() : null;
 
-  return RealEditor && <RealEditor {...shellData} onChange={shellApi.saveData} shellApi={shellApi} />;
+  return (
+    RealEditor && <RealEditor key={forceUpdateCount} {...shellData} onChange={shellApi.saveData} shellApi={shellApi} />
+  );
 }
 
 export default ExtensionContainer;

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

@@ -5,6 +5,7 @@ import clonedeep from 'lodash/cloneDeep';
 import reject from 'lodash/reject';
 import { DialogInfo } from '@bfc/indexers';
 import debounce from 'lodash/debounce';
+import { ExternalUpdate, UpdateScope, UpdateAction } from '@bfc/shared';
 
 import { ActionCreator, State } from '../types';
 import { undoable, Pick } from '../middlewares/undo';
@@ -15,6 +16,7 @@ import { Store } from './../types';
 import httpClient from './../../utils/httpUtil';
 import { setError } from './error';
 import { fetchProject } from './project';
+import { setUpdateStatus } from './shell';
 
 const pickDialog: Pick = (state: State, args: any[], isStackEmpty) => {
   const id = args[0];
@@ -112,20 +114,25 @@ export const debouncedUpdateDialog = debounce(async (store, id, content) => {
   }
 }, 500);
 
-export const updateDialogBase: ActionCreator = (store, { id, content }) => {
+export const updateDialogBase: ActionCreator = (store, { id, content }, updateStatus?: ExternalUpdate) => {
   store.dispatch({ type: ActionTypes.UPDATE_DIALOG, payload: { id, content } });
+  setUpdateStatus(store, updateStatus);
   debouncedUpdateDialog(store, id, content);
 };
 
 export const updateDialog: ActionCreator = undoable(
   updateDialogBase,
   (state: State, args: any[], isEmpty) => {
+    const updateStatus = {
+      scope: UpdateScope.DialogFile,
+      action: UpdateAction.UndoRedo,
+    };
     if (isEmpty) {
       const id = state.designPageLocation.dialogId;
       const dialog = state.dialogs.find(dialog => dialog.id === id);
-      return [{ id, content: dialog ? dialog.content : {} }];
+      return [{ id, content: dialog ? dialog.content : {} }, updateStatus];
     } else {
-      return args;
+      return [{ ...args[0] }, updateStatus];
     }
   },
   updateDialogBase,

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

@@ -1,28 +1,58 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+import clonedeep from 'lodash/cloneDeep';
+import debounce from 'lodash/debounce';
+import { ExternalUpdate, UpdateScope, UpdateAction } from '@bfc/shared';
 
+import { ActionTypes } from '../../constants';
+import httpClient from '../../utils/httpUtil';
 import * as lgUtil from '../../utils/lgUtil';
-import { ActionCreator } from '../types';
+import { undoable } from '../middlewares/undo';
+import { ActionCreator, State } from '../types';
 
-import { ActionTypes } from './../../constants';
-import httpClient from './../../utils/httpUtil';
+import { fetchProject } from './project';
+import { setError } from './error';
+import { setUpdateStatus } from './shell';
 
-export const updateLgFile: ActionCreator = async ({ dispatch }, { id, content }) => {
+//remove editor's debounce and add it to action
+export const debouncedUpdateLg = debounce(async (store, id, content) => {
   try {
-    const response = await httpClient.put(`/projects/opened/lgFiles/${id}`, { id, content });
-    dispatch({
-      type: ActionTypes.UPDATE_LG_SUCCESS,
-      payload: { response },
-    });
+    await httpClient.put(`/projects/opened/lgFiles/${id}`, { id, content });
   } catch (err) {
-    dispatch({
-      type: ActionTypes.UPDATE_LG_FAILURE,
-      payload: null,
-      error: err,
+    setError(store, {
+      message: err.response && err.response.data.message ? err.response.data.message : err,
+      summary: 'UPDATE LG ERROR',
     });
+    //if update lg error, do a full refresh.
+    fetchProject(store);
   }
+}, 500);
+
+export const updateLgFile: ActionCreator = async (store, { id, content }, updateStatus?: ExternalUpdate) => {
+  store.dispatch({ type: ActionTypes.UPDATE_LG_SUCCESS, payload: { id, content } });
+  setUpdateStatus(store, updateStatus);
+  debouncedUpdateLg(store, id, content);
 };
 
+export const undoableUpdateLgFile = undoable(
+  updateLgFile,
+  (state: State, args: any[], isEmpty) => {
+    const updateStatus = {
+      scope: UpdateScope.LgFile,
+      action: UpdateAction.UndoRedo,
+    };
+    if (isEmpty) {
+      const id = args[0].id;
+      const content = clonedeep(state.lgFiles.find(lgFile => lgFile.id === id)?.content);
+      return [{ id, content }, updateStatus];
+    } else {
+      return [{ ...args[0] }, updateStatus];
+    }
+  },
+  updateLgFile,
+  updateLgFile
+);
+
 export const createLgFile: ActionCreator = async ({ dispatch }, { id, content }) => {
   try {
     const response = await httpClient.post(`/projects/opened/lgFiles`, { id, content });
@@ -57,25 +87,25 @@ export const removeLgFile: ActionCreator = async ({ dispatch }, { id }) => {
 
 export const updateLgTemplate: ActionCreator = async (store, { file, templateName, template }) => {
   const newContent = lgUtil.updateTemplate(file.content, templateName, template);
-  return await updateLgFile(store, { id: file.id, content: newContent });
+  return await undoableUpdateLgFile(store, { id: file.id, content: newContent });
 };
 
 export const createLgTemplate: ActionCreator = async (store, { file, template }) => {
   const newContent = lgUtil.addTemplate(file.content, template);
-  return await updateLgFile(store, { id: file.id, content: newContent });
+  return await undoableUpdateLgFile(store, { id: file.id, content: newContent });
 };
 
 export const removeLgTemplate: ActionCreator = async (store, { file, templateName }) => {
   const newContent = lgUtil.removeTemplate(file.content, templateName);
-  return await updateLgFile(store, { id: file.id, content: newContent });
+  return await undoableUpdateLgFile(store, { id: file.id, content: newContent });
 };
 
 export const removeLgTemplates: ActionCreator = async (store, { file, templateNames }) => {
   const newContent = lgUtil.removeTemplates(file.content, templateNames);
-  return await updateLgFile(store, { id: file.id, content: newContent });
+  return await undoableUpdateLgFile(store, { id: file.id, content: newContent });
 };
 
 export const copyLgTemplate: ActionCreator = async (store, { file, fromTemplateName, toTemplateName }) => {
   const newContent = lgUtil.copyTemplate(file.content, fromTemplateName, toTemplateName);
-  return await updateLgFile(store, { id: file.id, content: newContent });
+  return await undoableUpdateLgFile(store, { id: file.id, content: newContent });
 };

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

@@ -7,6 +7,7 @@ import { ActionCreator } from './../types';
 import { ActionTypes } from './../../constants';
 import { updateBreadcrumb, navigateTo, checkUrl, getUrlSearch, BreadcrumbUpdateType } from './../../utils/navigation';
 import { debouncedUpdateDialog } from './dialog';
+import { debouncedUpdateLg } from './lg';
 
 export const setDesignPageLocation: ActionCreator = (
   { dispatch },
@@ -25,6 +26,7 @@ export const navTo: ActionCreator = ({ getState }, dialogId, breadcrumb = []) =>
   if (checkUrl(currentUri, state.designPageLocation)) return;
   //if dialog change we should flush some debounced functions
   debouncedUpdateDialog.flush();
+  debouncedUpdateLg.flush();
   navigateTo(currentUri, { state: { breadcrumb } });
 };
 

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

@@ -0,0 +1,14 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { ExternalUpdate } from '@bfc/shared';
+
+import { ActionTypes } from '../../constants';
+import { ActionCreator } from '../types';
+
+export const setUpdateStatus: ActionCreator = async ({ dispatch }, externalUpdate: ExternalUpdate) => {
+  dispatch({
+    type: ActionTypes.SET_UPDATE_STATUS,
+    payload: { externalUpdate },
+  });
+};

Composer/packages/client/src/store/index.tsx

@@ -58,6 +58,7 @@ const initialState: State = {
     coachMarkRefs: {},
   },
   clipboardActions: [],
+  externalUpdate: undefined,
 };
 
 interface StoreContextValue {

Composer/packages/client/src/store/reducer/index.ts

@@ -5,6 +5,7 @@ import get from 'lodash/get';
 import set from 'lodash/set';
 import { dialogIndexer } from '@bfc/indexers';
 import { SensitiveProperties } from '@bfc/shared';
+import { Diagnostic, DiagnosticSeverity, LgTemplate, lgIndexer } from '@bfc/indexers';
 
 import { ActionTypes, FileTypes } from '../../constants';
 import { DialogSetting, ReducerFunc } from '../types';
@@ -105,8 +106,21 @@ const createDialogSuccess: ReducerFunc = (state, { response }) => {
   return state;
 };
 
-const updateLgTemplate: ReducerFunc = (state, { response }) => {
-  state.lgFiles = response.data.lgFiles;
+const updateLgTemplate: ReducerFunc = (state, { id, content }) => {
+  state.lgFiles = state.lgFiles.map(lgFile => {
+    if (lgFile.id === id) {
+      const { check, parse } = lgIndexer;
+      const diagnostics = check(content, id);
+      let templates: LgTemplate[] = [];
+      try {
+        templates = parse(content, id);
+      } catch (err) {
+        diagnostics.push(new Diagnostic(err.message, id, DiagnosticSeverity.Error));
+      }
+      return { ...lgFile, templates, diagnostics };
+    }
+    return lgFile;
+  });
   return state;
 };
 
@@ -281,6 +295,10 @@ const noOp: ReducerFunc = state => {
   return state;
 };
 
+const setUpdateStatus: ReducerFunc = (state, { externalUpdate }) => {
+  return (state.externalUpdate = externalUpdate);
+};
+
 export const reducer = createReducer({
   [ActionTypes.GET_PROJECT_SUCCESS]: getProjectSuccess,
   [ActionTypes.GET_PROJECT_FAILURE]: noOp,
@@ -335,4 +353,5 @@ export const reducer = createReducer({
   [ActionTypes.ONBOARDING_ADD_COACH_MARK_REF]: onboardingAddCoachMarkRef,
   [ActionTypes.ONBOARDING_SET_COMPLETE]: onboardingSetComplete,
   [ActionTypes.EDITOR_CLIPBOARD]: setClipboardActions,
+  [ActionTypes.SET_UPDATE_STATUS]: setUpdateStatus,
 });

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

@@ -4,7 +4,7 @@
 // TODO: remove this once we can expand the types
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
-import { PromptTab, BotSchemas, ProjectTemplate } from '@bfc/shared';
+import { PromptTab, BotSchemas, ProjectTemplate, ExternalUpdate } from '@bfc/shared';
 import { DialogInfo, LgFile, LuFile } from '@bfc/indexers';
 
 import { CreationFlowStatus, BotStatus } from '../constants';
@@ -90,6 +90,7 @@ export interface State {
     complete: boolean;
   };
   clipboardActions: any[];
+  externalUpdate?: ExternalUpdate;
 }
 
 export type ReducerFunc<T = any> = (state: State, payload: T) => State;