fixed #1285. Fixed #825. Added collapsed service pane when in debug mode

microsoft · Apr 15, 2019 · 1052028 · 1052028
1 parent 99b0a76
commit 1052028
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 30 deletions.
diff --git a/packages/app/client/package.json b/packages/app/client/package.json
@@ -108,6 +108,7 @@
     "botframework-config": "4.0.0-preview1.3.4",
     "botframework-schema": "^4.3.4",
     "botframework-webchat": "^4.3.0",
+    "botframework-webchat-core": "^4.3.0",
     "deep-diff": "^1.0.2",
     "eslint-plugin-react": "7.12.3",
     "react": "~16.3.2",

diff --git a/packages/app/client/src/commands/uiCommands.ts b/packages/app/client/src/commands/uiCommands.ts
@@ -60,6 +60,7 @@ import {
   UpdateAvailableDialogContainer,
   UpdateUnavailableDialogContainer,
 } from '../ui/dialogs';
+import * as ExplorerActions from '../data/action/explorerActions';
 
 /** Register UI commands (toggling UI) */
 export function registerCommands(commandRegistry: CommandRegistry) {
@@ -136,6 +137,7 @@ export function registerCommands(commandRegistry: CommandRegistry) {
     if (debugMode === DebugMode.Sidecar) {
       store.dispatch(EditorActions.closeNonGlobalTabs());
       store.dispatch(closeBot());
+      store.dispatch(ExplorerActions.showExplorer(false));
     }
     store.dispatch(switchDebugMode(debugMode));
   });

diff --git a/packages/app/client/src/data/action/chatActions.ts b/packages/app/client/src/data/action/chatActions.ts
@@ -52,6 +52,7 @@ export enum ChatActions {
   updateChat = 'CHAT/DOCUMENT/UPDATE',
   showContextMenuForActivity = 'CHAT/CONTEXT_MENU/SHOW',
   webSpeechFactoryUpdated = 'CHAT/SPEECH/TOKEN/RETRIEVED',
+  webChatStoreUpdated = 'CHAT/STORE/UPDATED',
   updatePendingSpeechTokenRetrieval = 'CHAT/SPEECH/TOKEN/PENDING/UPDATE',
 }
 
@@ -71,6 +72,11 @@ export interface WebSpeechFactoryPayload {
   factory: () => any;
 }
 
+export interface WebChatStorePayload {
+  documentId: string;
+  store: any;
+}
+
 export interface PendingSpeechTokenRetrievalPayload {
   pending: boolean;
 }
@@ -159,6 +165,13 @@ export function webSpeechFactoryUpdated(documentId: string, factory: () => any):
   };
 }
 
+export function webChatStoreUpdated(documentId: string, store: any): ChatAction<WebChatStorePayload> {
+  return {
+    type: ChatActions.webChatStoreUpdated,
+    payload: { documentId, store },
+  };
+}
+
 export function updatePendingSpeechTokenRetrieval(pending: boolean): ChatAction<PendingSpeechTokenRetrievalPayload> {
   return {
     type: ChatActions.updatePendingSpeechTokenRetrieval,

diff --git a/packages/app/client/src/data/reducer/chat.ts b/packages/app/client/src/data/reducer/chat.ts
@@ -35,6 +35,7 @@ import {
   ChatAction,
   ChatActions,
   PendingSpeechTokenRetrievalPayload,
+  WebChatStorePayload,
   WebSpeechFactoryPayload,
 } from '../action/chatActions';
 import { EditorAction, EditorActions } from '../action/editorActions';
@@ -44,6 +45,7 @@ export interface ChatState {
   // TODO: keys should map to an Chat
   chats?: { [chatId: string]: any };
   webSpeechFactories?: { [documentId: string]: () => any };
+  webChatStores: { [documentId: string]: any };
   transcripts?: string[];
   pendingSpeechTokenRetrieval: boolean;
 }
@@ -53,6 +55,7 @@ const DEFAULT_STATE: ChatState = {
   chats: {},
   transcripts: [],
   webSpeechFactories: {},
+  webChatStores: {},
   pendingSpeechTokenRetrieval: false,
 };
 
@@ -104,6 +107,17 @@ export function chat(state: ChatState = DEFAULT_STATE, action: ChatAction | Edit
       }
       break;
 
+    case ChatActions.webChatStoreUpdated:
+      {
+        const { documentId, store } = action.payload as WebChatStorePayload;
+        const { webChatStores } = state;
+        state = {
+          ...state,
+          webChatStores: { ...webChatStores, [documentId]: store },
+        };
+      }
+      break;
+
     case ChatActions.updatePendingSpeechTokenRetrieval:
       state = {
         ...state,

diff --git a/packages/app/client/src/data/sagas/chatSagas.ts b/packages/app/client/src/data/sagas/chatSagas.ts
@@ -33,12 +33,12 @@
 import * as Electron from 'electron';
 import { MenuItemConstructorOptions } from 'electron';
 import { Activity, ActivityTypes } from 'botframework-schema';
-import { SharedConstants } from '@bfemulator/app-shared';
+import { SharedConstants, ValueTypes } from '@bfemulator/app-shared';
 import { InspectableObjectLogItem, LogItem, LogItemType } from '@bfemulator/sdk-shared';
-import { ValueTypes } from '@bfemulator/app-shared';
 import { diff } from 'deep-diff';
 import { IEndpointService } from 'botframework-config/lib/schema';
 import { createCognitiveServicesBingSpeechPonyfillFactory } from 'botframework-webchat';
+import { createStore as createWebChatStore } from 'botframework-webchat-core';
 
 import {
   ChatAction,
@@ -49,13 +49,14 @@ import {
   setHighlightedObjects,
   setInspectorObjects,
   updatePendingSpeechTokenRetrieval,
+  webChatStoreUpdated,
   webSpeechFactoryUpdated,
 } from '../action/chatActions';
 import { CommandServiceImpl } from '../../platform/commands/commandServiceImpl';
 import { RootState } from '../store';
 import { isSpeechEnabled } from '../../utils';
 
-import { call, ForkEffect, put, select, takeEvery } from 'redux-saga/effects';
+import { call, ForkEffect, put, select, takeEvery, takeLatest } from 'redux-saga/effects';
 
 const getConversationIdFromDocumentId = (state: RootState, documentId: string) => {
   return (state.chat.chats[documentId] || {}).conversationId;
@@ -138,15 +139,20 @@ export function* showContextMenuForActivity(action: ChatAction<Activity>): Itera
 export function* closeConversation(action: ChatAction<DocumentIdPayload>): Iterable<any> {
   const conversationId = yield select(getConversationIdFromDocumentId, action.payload.documentId);
   const { DeleteConversation } = SharedConstants.Commands.Emulator;
+  const { documentId } = action.payload;
   yield call([CommandServiceImpl, CommandServiceImpl.remoteCall], DeleteConversation, conversationId);
-  yield put(closeDocument(action.payload.documentId));
+  yield put(closeDocument(documentId));
+  // remove the webchat store when the document is closed
+  yield put(webChatStoreUpdated(documentId, null));
 }
 
 export function* newChat(action: ChatAction<NewChatPayload>): Iterable<any> {
+  const { documentId } = action.payload;
+  // Create a new webchat store for this documentId
+  yield put(webChatStoreUpdated(documentId, createWebChatStore()));
   // Each time a new chat is open, retrieve the speech token
   // if the endpoint is speech enabled and create a bind speech
   // pony fill factory. This is consumed by WebChat...
-  const { documentId } = action.payload;
   yield put(webSpeechFactoryUpdated(documentId, null)); // remove the old factory
   const endpoint: IEndpointService = yield select(getEndpointServiceByDocumentId, documentId);
   if (!isSpeechEnabled(endpoint)) {
@@ -261,5 +267,5 @@ function buildDiff(prependWith: string, path: (string | number)[], target: any,
 export function* chatSagas(): IterableIterator<ForkEffect> {
   yield takeEvery(ChatActions.showContextMenuForActivity, showContextMenuForActivity);
   yield takeEvery(ChatActions.closeConversation, closeConversation);
-  yield takeEvery(ChatActions.newChat, newChat);
+  yield takeLatest([ChatActions.newChat, ChatActions.clearLog], newChat);
 }
diff --git a/packages/app/client/src/ui/dialogs/host/host.tsx b/packages/app/client/src/ui/dialogs/host/host.tsx
@@ -46,10 +46,6 @@ export interface DialogHostProps {
 export class DialogHost extends React.Component<DialogHostProps, {}> {
   private _hostRef: HTMLElement;
 
-  constructor(props: DialogHostProps) {
-    super(props);
-  }
-
   public componentDidMount() {
     this._hostRef.addEventListener('dialogRendered', this.initFocusTrap);
   }

diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx
@@ -64,6 +64,7 @@ export interface ChatProps {
   pendingSpeechTokenRetrieval?: boolean;
   showContextMenuForActivity: (activity: Partial<Activity>) => void;
   setInspectorObject: (documentId: string, activity: Partial<Activity & { showInInspector: true }>) => void;
+  webchatStore: any;
 }
 
 interface ChatState {
@@ -99,7 +100,7 @@ export class Chat extends Component<ChatProps, ChatState> {
 
   public render() {
     this.activityMap = {};
-    const { currentUser, document, locale, mode, debugMode } = this.props;
+    const { currentUser, document, locale, mode, debugMode, webchatStore } = this.props;
 
     if (this.props.pendingSpeechTokenRetrieval) {
       return <div className={styles.disconnected}>Connecting...</div>;
@@ -115,6 +116,7 @@ export class Chat extends Component<ChatProps, ChatState> {
       return (
         <div className={styles.chat}>
           <ReactWebChat
+            store={webchatStore}
             activityMiddleware={this.createActivityMiddleware}
             bot={bot}
             directLine={document.directLine}

diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chatContainer.ts b/packages/app/client/src/ui/editor/emulator/parts/chat/chatContainer.ts
@@ -45,13 +45,14 @@ import { Chat, ChatProps } from './chat';
 
 const mapStateToProps = (state: RootState, { document }): Partial<ChatProps> => {
   const currentUserId = state.clientAwareSettings.users.currentUserId;
-
+  const { documentId } = document;
   return {
     currentUser: state.clientAwareSettings.users.usersById[currentUserId] || ({} as User),
     locale: state.clientAwareSettings.locale || 'en-us',
     debugMode: state.clientAwareSettings.debugMode,
-    webSpeechPonyfillFactory: state.chat.webSpeechFactories[document.documentId],
+    webSpeechPonyfillFactory: state.chat.webSpeechFactories[documentId],
     pendingSpeechTokenRetrieval: state.chat.pendingSpeechTokenRetrieval,
+    webchatStore: state.chat.webChatStores[documentId],
   };
 };
 

diff --git a/packages/app/client/src/ui/shell/main.tsx b/packages/app/client/src/ui/shell/main.tsx
@@ -38,18 +38,15 @@ import * as Constants from '../../constants';
 import { Editor } from '../../data/reducer/editor';
 import { StoreVisualizer } from '../debug/storeVisualizer';
 import { DialogHostContainer, TabManagerContainer } from '../dialogs';
+import * as ExplorerActions from '../../data/action/explorerActions';
+import { store } from '../../data/store';
 
 import { ExplorerBar } from './explorer';
 import * as styles from './main.scss';
 import { MDI } from './mdi';
 import { NavBar } from './navBar';
 import { StatusBar } from './statusBar/statusBar';
 
-// TODO: Re-enable once webchat reset bug is fixed
-// (https://github.com/Microsoft/BotFramework-Emulator/issues/825)
-// import store from '../../data/store';
-// import * as ExplorerActions from '../../data/action/explorerActions';
-
 export interface MainProps {
   primaryEditor?: Editor;
   secondaryEditor?: Editor;
@@ -124,6 +121,7 @@ export class Main extends React.Component<MainProps, MainState> {
               primaryPaneIndex={0}
               minSizes={{ 0: 175, 1: 40 }}
               initialSizes={{ 0: 280 }}
+              onSizeChange={this.checkExplorerSize}
             >
               {workbenchChildren}
             </Splitter>
@@ -137,16 +135,14 @@ export class Main extends React.Component<MainProps, MainState> {
     );
   }
 
-  // TODO: Re-enable once webchat reset bug is fixed
-  // (https://github.com/Microsoft/BotFramework-Emulator/issues/825)
   /** Called when the splitter between the editor and explorer panes is moved */
-  /*private checkExplorerSize(sizes: { absolute: number, percentage: number }[]): void {
+  private checkExplorerSize(sizes: { absolute: number; percentage: number }[]): void {
     if (sizes.length) {
       const explorerSize = sizes[0];
       const minExplorerWidth = 175;
       if (explorerSize.absolute < minExplorerWidth) {
         store.dispatch(ExplorerActions.showExplorer(false));
       }
     }
-  }*/
+  }
 }
diff --git a/packages/app/client/src/ui/shell/navBar/navBar.tsx b/packages/app/client/src/ui/shell/navBar/navBar.tsx
@@ -74,7 +74,7 @@ export class NavBarComponent extends React.Component<NavBarProps, NavBarState> {
   }
 
   public onLinkClick = (event: SyntheticEvent<HTMLButtonElement>): void => {
-    const { selection: currentSelection } = this.props;
+    const { selection: currentSelection, explorerIsVisible } = this.props;
     const { currentTarget: anchor } = event;
     const index = Array.prototype.indexOf.call(anchor.parentElement.children, anchor);
     switch (index) {
@@ -85,16 +85,12 @@ export class NavBarComponent extends React.Component<NavBarProps, NavBarState> {
       case 1:
       case 2:
         if (currentSelection === selectionMap[index]) {
-          // TODO: Re-enable once webchat reset bug is fixed
-          // (https://github.com/Microsoft/BotFramework-Emulator/issues/825)
-          /*// toggle explorer when clicking the same navbar icon
+          // toggle explorer when clicking the same navbar icon
           const showExplorer = !explorerIsVisible;
-          this.props.showExplorer(showExplorer);*/
+          this.props.showExplorer(showExplorer);
         } else {
           // switch tabs and showExplorer explorer when clicking different navbar icon
-          // TODO: Re-enable once webchat reset bug is fixed
-          // (https://github.com/Microsoft/BotFramework-Emulator/issues/825)
-          // this.props.showExplorer(true);
+          this.props.showExplorer(true);
           if (index === 2) {
             this.props.trackEvent('navbar_selection', {
               selection: 'notifications',