feat: Add undo/redo for design page

Composer/packages/client/__tests__/pages/language-generation/LGPage.test.tsx

@@ -9,11 +9,13 @@ import CodeEditor from '../../../src/pages/language-generation/code-editor';
 import {
   projectIdState,
   localeState,
-  dialogsState,
   luFilesState,
   lgFilesState,
   settingsState,
+  schemasState,
+  dialogsState,
 } from '../../../src/recoilModel';
+import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
 
 const initialContent = `
 # Greeting
@@ -52,6 +54,7 @@ const initRecoilState = ({ set }) => {
   set(luFilesState, state.luFiles);
   set(lgFilesState, state.lgFiles);
   set(settingsState, state.settings);
+  set(schemasState, mockProjectResponse.schemas);
 };
 
 describe('LG page all up view', () => {

Composer/packages/client/__tests__/pages/language-understanding/LUPage.test.tsx

@@ -13,7 +13,9 @@ import {
   luFilesState,
   lgFilesState,
   settingsState,
+  schemasState,
 } from '../../../src/recoilModel';
+import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
 
 const initialContent = `
 # Greeting
@@ -45,6 +47,7 @@ const initRecoilState = ({ set }) => {
   set(luFilesState, state.luFiles);
   set(lgFilesState, state.lgFiles);
   set(settingsState, state.settings);
+  set(schemasState, mockProjectResponse.schemas);
 };
 
 describe('LU page all up view', () => {

Composer/packages/client/__tests__/pages/notifications/useNotifications.test.tsx

@@ -13,7 +13,9 @@ import {
   lgFilesState,
   BotDiagnosticsState,
   settingsState,
+  schemasState,
 } from '../../../src/recoilModel';
+import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
 
 const state = {
   projectId: 'test',
@@ -23,14 +25,6 @@ const state = {
       content: 'test',
       luFile: 'test',
       referredLuIntents: [],
-      diagnostics: [
-        {
-          message: 'must be an expression',
-          path: 'test.triggers[0]#Microsoft.OnUnknownIntent#condition',
-          severity: 1,
-          source: 'test',
-        },
-      ],
       skills: ['https://yuesuemailskill0207-gjvga67.azurewebsites.net/manifest/manifest-1.0.json'],
     },
   ],
@@ -110,6 +104,7 @@ const initRecoilState = ({ set }) => {
   set(lgFilesState, state.lgFiles);
   set(BotDiagnosticsState, state.diagnostics);
   set(settingsState, state.settings);
+  set(schemasState, mockProjectResponse.schemas);
 };
 
 describe('useNotification hooks', () => {
@@ -127,7 +122,7 @@ describe('useNotification hooks', () => {
   });
 
   it('should return notifications', () => {
-    expect(renderedResult.current.length).toBe(5);
+    expect(renderedResult.current.length).toBe(4);
   });
 
   it('should return filtered notifications', () => {

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

@@ -73,7 +73,6 @@ describe('use lgApi hooks', () => {
 
   it('should call update lg template action', () => {
     result.current.updateLgTemplate('test.en-us', 'bar', 'update');
-    result.current.updateLgTemplate.flush();
     expect(updateLgTemplateMock).toBeCalledTimes(1);
     const arg = {
       id: 'test.en-us',

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

@@ -63,6 +63,7 @@ describe('use luApi hooks', () => {
         Body: '- test add',
         Name: 'add',
       },
+      projectId: 'test',
     };
     expect(updateLuFileMockMock).toBeCalledWith(arg);
   });
@@ -79,6 +80,7 @@ describe('use luApi hooks', () => {
         Name: 'update',
       },
       intentName: 'test',
+      projectId: 'test',
     };
     expect(updateLuFileMockMock).toBeCalledWith(arg);
   });
@@ -88,7 +90,7 @@ describe('use luApi hooks', () => {
     await result.current.updateLuIntent('test.en-us', 'test', { Body: '- test update', Name: 'update' });
     await result.current.removeLuIntent('test.en-us', 'test', 'remove');
     expect(updateLuFileMockMock).toBeCalledTimes(3);
-    const arg = { intentName: 'test', id: 'test.en-us' };
+    const arg = { intentName: 'test', id: 'test.en-us', projectId: 'test' };
     expect(updateLuFileMockMock).toBeCalledWith(arg);
   });
 

Composer/packages/client/src/Onboarding/Onboarding.tsx

@@ -9,7 +9,8 @@ import { useRecoilValue } from 'recoil';
 import onboardingStorage from '../utils/onboardingStorage';
 import { OpenConfirmModal } from '../components/Modal/ConfirmDialog';
 import { useLocation } from '../utils/hooks';
-import { dialogsState, projectIdState, dispatcherState, onboardingState } from '../recoilModel';
+import { projectIdState, dispatcherState, onboardingState } from '../recoilModel';
+import { validatedDialogs } from '../recoilModel/selectors/validatedDialogs';
 
 import OnboardingContext from './OnboardingContext';
 import TeachingBubbles from './TeachingBubbles/TeachingBubbles';
@@ -24,7 +25,7 @@ const Onboarding: React.FC = () => {
   const onboarding = useRecoilValue(onboardingState);
   const complete = onboarding.complete;
 
-  const dialogs = useRecoilValue(dialogsState);
+  const dialogs = useRecoilValue(validatedDialogs);
   const projectId = useRecoilValue(projectIdState);
   const rootDialogId = dialogs.find(({ isRoot }) => isRoot === true)?.id || 'Main';
 

Composer/packages/client/src/components/ProjectTree/TriggerCreationModal.tsx

@@ -34,9 +34,10 @@ import {
   getActivityTypes,
   regexRecognizerKey,
 } from '../../utils/dialogUtil';
-import { dialogsState, projectIdState, schemasState } from '../../recoilModel/atoms/botState';
+import { projectIdState, schemasState } from '../../recoilModel/atoms/botState';
 import { userSettingsState } from '../../recoilModel';
 import { nameRegex } from '../../constants';
+import { validatedDialogs } from '../../recoilModel/selectors/validatedDialogs';
 
 // -------------------- Styles -------------------- //
 
@@ -204,7 +205,7 @@ interface TriggerCreationModalProps {
 
 export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = (props) => {
   const { isOpen, onDismiss, onSubmit, dialogId } = props;
-  const dialogs = useRecoilValue(dialogsState);
+  const dialogs = useRecoilValue(validatedDialogs);
 
   const projectId = useRecoilValue(projectIdState);
   const schemas = useRecoilValue(schemasState);

Composer/packages/client/src/components/TestController/TestController.tsx

@@ -13,7 +13,6 @@ import { DefaultPublishConfig } from '../../constants';
 import {
   botNameState,
   botStatusState,
-  dialogsState,
   luFilesState,
   settingsState,
   projectIdState,
@@ -26,6 +25,7 @@ import { BotStatus, LuisConfig } from '../../constants';
 import { isAbsHosted } from '../../utils/envUtil';
 import useNotifications from '../../pages/notifications/useNotifications';
 import { navigateTo, openInEmulator } from '../../utils/navigation';
+import { validatedDialogs } from '../../recoilModel/selectors/validatedDialogs';
 
 import { getReferredFiles } from './../../utils/luUtil';
 import { PublishLuisDialog } from './publishDialog';
@@ -57,7 +57,7 @@ export const TestController: React.FC = () => {
   const notifications = useNotifications();
   const botName = useRecoilValue(botNameState);
   const botStatus = useRecoilValue(botStatusState);
-  const dialogs = useRecoilValue(dialogsState);
+  const dialogs = useRecoilValue(validatedDialogs);
   const luFiles = useRecoilValue(luFilesState);
   const settings = useRecoilValue(settingsState);
   const projectId = useRecoilValue(projectIdState);

Composer/packages/client/src/pages/design/DesignPage.tsx

@@ -22,13 +22,12 @@ import { Conversation } from '../../components/Conversation';
 import { dialogStyle } from '../../components/Modal/dialogStyle';
 import { OpenConfirmModal } from '../../components/Modal/ConfirmDialog';
 import { ProjectTree } from '../../components/ProjectTree/ProjectTree';
-import { undoHistory } from '../../recoilModel/undo';
 import { Toolbar, IToolbarItem } from '../../components/Toolbar';
 import { clearBreadcrumb } from '../../utils/navigation';
 import { navigateTo } from '../../utils/navigation';
 import { useShell } from '../../shell';
+import { undoFunctionState } from '../../recoilModel/undo/history';
 import {
-  dialogsState,
   projectIdState,
   schemasState,
   showCreateDialogModalState,
@@ -45,6 +44,7 @@ import {
   luFilesState,
   localeState,
 } from '../../recoilModel';
+import { validatedDialogs } from '../../recoilModel/selectors/validatedDialogs';
 import plugins, { mergePluginConfigs } from '../../plugins';
 import { useElectronFeatures } from '../../hooks/useElectronFeatures';
 
@@ -101,7 +101,7 @@ const getTabFromFragment = () => {
 };
 
 const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: string }>> = (props) => {
-  const dialogs = useRecoilValue(dialogsState);
+  const dialogs = useRecoilValue(validatedDialogs);
   const projectId = useRecoilValue(projectIdState);
   const schemas = useRecoilValue(schemasState);
   const displaySkillManifest = useRecoilValue(displaySkillManifestState);
@@ -111,6 +111,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const designPageLocation = useRecoilValue(designPageLocationState);
   const showCreateDialogModal = useRecoilValue(showCreateDialogModalState);
   const showAddSkillDialogModal = useRecoilValue(showAddSkillDialogModalState);
+  const { undo, redo, canRedo, canUndo, commitChanges, clearUndo } = useRecoilValue(undoFunctionState);
   const skills = useRecoilValue(skillsState);
   const actionsSeed = useRecoilValue(actionsSeedState);
   const userSettings = useRecoilValue(userSettingsState);
@@ -182,12 +183,14 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       // @ts-ignore
       globalHistory._onTransitionComplete();
       /* eslint-enable */
-    } else {
-      //leave design page should clear the history
-      // clearUndoHistory(); //TODO: undo/redo
     }
   }, [location]);
 
+  useEffect(() => {
+    //leave design page should clear the history
+    return clearUndo;
+  }, []);
+
   const onTriggerCreationDismiss = () => {
     setTriggerModalVisibility(false);
   };
@@ -203,7 +206,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       content: dialog.content,
     };
     if (luFile && intent) {
-      createLuIntent({ id: luFile.id, intent });
+      createLuIntent({ id: luFile.id, intent, projectId });
     }
 
     const index = get(dialog, 'content.triggers', []).length - 1;
@@ -284,20 +287,14 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
           {
             key: 'edit.undo',
             text: formatMessage('Undo'),
-            disabled: !undoHistory.canUndo(),
-            onClick: () => {
-              // TODO: register EditorAPI.Editing.Undo()
-              //ToDo undo
-            },
+            disabled: !canUndo(),
+            onClick: undo,
           },
           {
             key: 'edit.redo',
             text: formatMessage('Redo'),
-            disabled: !undoHistory.canRedo(),
-            onClick: () => {
-              // TODO: register EditorAPI.Editing.Redo()
-              //ToDo redo
-            },
+            disabled: !canRedo(),
+            onClick: redo,
           },
           {
             key: 'edit.cut',
@@ -450,15 +447,16 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     updateSkill({ projectId, targetId: -1, skillData });
   }
 
-  function handleCreateDialogSubmit(data: { name: string; description: string }) {
+  async function handleCreateDialogSubmit(data: { name: string; description: string }) {
     const seededContent = new DialogFactory(schemas.sdk?.content).create(SDKKinds.AdaptiveDialog, {
       $designer: { name: data.name, description: data.description },
       generator: `${data.name}.lg`,
     });
     if (seededContent.triggers?.[0]) {
       seededContent.triggers[0].actions = actionsSeed;
     }
-    createDialog({ id: data.name, content: seededContent });
+    await createDialog({ id: data.name, content: seededContent });
+    commitChanges();
   }
 
   async function handleDeleteDialog(id) {
@@ -482,15 +480,16 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     const result = await OpenConfirmModal(title, subTitle, setting);
 
     if (result) {
-      removeDialog(id);
+      await removeDialog(id);
+      commitChanges();
     }
   }
 
   async function handleDeleteTrigger(id, index) {
     const content = deleteTrigger(dialogs, id, index, (trigger) => triggerApi.deleteTrigger(id, trigger));
 
     if (content) {
-      await updateDialog({ id, content });
+      updateDialog({ id, content });
       const match = /\[(\d+)\]/g.exec(selected);
       const current = match && match[1];
       if (!current) return;

Composer/packages/client/src/pages/design/PropertyEditor.tsx

@@ -102,6 +102,8 @@ const PropertyEditor: React.FC = () => {
     const id = setTimeout(() => {
       if (!isEqual(formData, localData)) {
         shellApi.saveData(localData, focusedSteps[0]);
+      } else {
+        shellApi.commitChanges();
       }
     }, 300);
 

Composer/packages/client/src/pages/design/VisualEditor.tsx

@@ -11,7 +11,8 @@ import VisualDesigner from '@bfc/adaptive-flow';
 import { useRecoilValue } from 'recoil';
 
 import grayComposerIcon from '../../images/grayComposerIcon.svg';
-import { schemasState, dialogsState, designPageLocationState, dispatcherState } from '../../recoilModel';
+import { schemasState, designPageLocationState, dispatcherState } from '../../recoilModel';
+import { validatedDialogs } from '../../recoilModel/selectors/validatedDialogs';
 
 import { middleTriggerContainer, middleTriggerElements, triggerButton, visualEditor } from './styles';
 
@@ -56,7 +57,7 @@ const VisualEditor: React.FC<VisualEditorProps> = (props) => {
   const [triggerButtonVisible, setTriggerButtonVisibility] = useState(false);
   const designPageLocation = useRecoilValue(designPageLocationState);
   const { onboardingAddCoachMarkRef } = useRecoilValue(dispatcherState);
-  const dialogs = useRecoilValue(dialogsState);
+  const dialogs = useRecoilValue(validatedDialogs);
   const schemas = useRecoilValue(schemasState);
   const { dialogId, selected } = designPageLocation;
 

Composer/packages/client/src/pages/design/createDialogModal.tsx

@@ -10,9 +10,9 @@ import { useRecoilValue } from 'recoil';
 
 import { DialogCreationCopy, nameRegex } from '../../constants';
 import { StorageFolder } from '../../recoilModel/types';
-import { dialogsState } from '../../recoilModel/atoms/botState';
 import { DialogWrapper, DialogTypes } from '../../components/DialogWrapper';
 import { FieldConfig, useForm } from '../../hooks/useForm';
+import { validatedDialogs } from '../../recoilModel/selectors/validatedDialogs';
 
 import { name, description, styles as wizardStyles } from './styles';
 
@@ -30,7 +30,7 @@ interface CreateDialogModalProps {
 }
 
 export const CreateDialogModal: React.FC<CreateDialogModalProps> = (props) => {
-  const dialogs = useRecoilValue(dialogsState);
+  const dialogs = useRecoilValue(validatedDialogs);
   const { onSubmit, onDismiss, isOpen } = props;
   const formConfig: FieldConfig<DialogFormData> = {
     name: {

Composer/packages/client/src/pages/language-generation/LGPage.tsx

@@ -9,13 +9,14 @@ import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { RouteComponentProps, Router } from '@reach/router';
 import { useRecoilValue } from 'recoil';
 
-import { dialogsState, projectIdState } from '../../recoilModel/atoms/botState';
+import { projectIdState } from '../../recoilModel/atoms/botState';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { actionButton } from '../language-understanding/styles';
 import { navigateTo } from '../../utils/navigation';
 import { TestController } from '../../components/TestController/TestController';
 import { INavTreeItem } from '../../components/NavTree';
 import { Page } from '../../components/Page';
+import { validatedDialogs } from '../../recoilModel/selectors/validatedDialogs';
 
 import TableView from './table-view';
 const CodeEditor = React.lazy(() => import('./code-editor'));
@@ -25,7 +26,7 @@ interface LGPageProps extends RouteComponentProps<{}> {
 }
 
 const LGPage: React.FC<LGPageProps> = (props) => {
-  const dialogs = useRecoilValue(dialogsState);
+  const dialogs = useRecoilValue(validatedDialogs);
   const projectId = useRecoilValue(projectIdState);
 
   const path = props.location?.pathname ?? '';