Fixed unnecessary Web Chat rerenders that caused Adaptive Card sate w…

…ipes.

CHANGELOG.md

@@ -72,13 +72,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1924](https://github.com/microsoft/BotFramework-Emulator/pull/1924)
   - [1925](https://github.com/microsoft/BotFramework-Emulator/pull/1925)
   - [1927](https://github.com/microsoft/BotFramework-Emulator/pull/1927)
+  - [1933](https://github.com/microsoft/BotFramework-Emulator/pull/1933)
+  - [1934](https://github.com/microsoft/BotFramework-Emulator/pull/1934)
 
  - [client] Fixed an issue with the transcripts path input inside of the resource settings dialog in PR [1836](https://github.com/microsoft/BotFramework-Emulator/pull/1836)
  - [client] Implemented HTML app menu for Windows in PR [1893](https://github.com/microsoft/BotFramework-Emulator/pull/1893) 
  - [client/main] Migrated from Bing Speech API to Cognitive Services Speech API in PR [1878](https://github.com/microsoft/BotFramework-Emulator/pull/1878)
  - [client] Fixed issue with certain native browser functions (cut, copy, paste, etc.) firing twice in PR [1920](https://github.com/microsoft/BotFramework-Emulator/pull/1920)
  - [client] Applied theming to InsetShadow component in PR [1922](https://github.com/microsoft/BotFramework-Emulator/pull/1922)
  - [client] Bumped Web Chat to v4.5.3 in PR [1925](https://github.com/microsoft/BotFramework-Emulator/pull/1925)
+ - [client] Fixed issue that was causing Web Chat interactions to clear Adaptive Card content in PR [1930](https://github.com/microsoft/BotFramework-Emulator/pull/1930)
 
 
 ## v4.5.2 - 2019 - 07 - 17

packages/app/client/package.json

@@ -62,6 +62,7 @@
     "coveralls": "^3.0.1",
     "cross-env": "^5.1.3",
     "css-loader": "^1.0.1",
+    "electron-devtools-installer": "^2.2.4",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^5.12.0",

packages/app/client/src/commands/uiCommands.spec.ts

@@ -51,6 +51,11 @@ import {
 import { UiCommands } from './uiCommands';
 
 jest.mock('electron', () => ({
+  remote: {
+    app: {
+      isPackaged: false,
+    },
+  },
   ipcMain: new Proxy(
     {},
     {

packages/app/client/src/index.tsx

@@ -30,12 +30,14 @@
 // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 //
-// for hot reloading
+
+import { remote } from 'electron';
 import { Provider } from 'react-redux';
 import * as ReactDOM from 'react-dom';
 import * as React from 'react';
-import './commands';
+import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer';
 
+import './commands';
 import interceptError from './interceptError';
 import interceptHyperlink from './interceptHyperlink';
 import Main from './ui/shell/mainContainer';
@@ -45,6 +47,15 @@ import './ui/styles/globals.scss';
 interceptError();
 interceptHyperlink();
 
+if (!remote.app.isPackaged) {
+  // enable react & react-redux dev tools
+  installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
+    /* eslint-disable no-console */
+    .then(installed => console.log('Successfully installed: ', installed.join(', ')))
+    .catch(err => console.error('Failed to install dev tools: ', err));
+  /* eslint-enable no-console */
+}
+
 // Start rendering the UI
 ReactDOM.render(
   React.createElement(Provider, { store }, React.createElement(Main as any)),

packages/app/client/src/state/actions/chatActions.spec.ts

@@ -126,6 +126,7 @@ describe('chat actions', () => {
       log: {
         entries: [],
       },
+      highlightedObjects: [],
       inspectorObjects: [],
       ui: {
         horizontalSplitter: [
@@ -149,6 +150,7 @@ describe('chat actions', () => {
           },
         ],
       },
+      userId: '',
       someOtherProperty: true,
     });
   });

packages/app/client/src/state/actions/chatActions.ts

@@ -189,6 +189,7 @@ export function newChat(
       log: {
         entries: [],
       },
+      highlightedObjects: [],
       inspectorObjects: [],
       ui: {
         horizontalSplitter: [
@@ -212,6 +213,7 @@ export function newChat(
           },
         ],
       },
+      userId: '',
       ...additionalData,
     },
   };

packages/app/client/src/state/reducers/editor.spec.ts

@@ -80,6 +80,37 @@ jest.mock('../../ui/dialogs', () => ({
     return undefined;
   },
 }));
+
+jest.mock('electron', () => ({
+  remote: {
+    app: {
+      isPackaged: false,
+    },
+  },
+  ipcMain: new Proxy(
+    {},
+    {
+      get(): any {
+        return () => ({});
+      },
+      has() {
+        return true;
+      },
+    }
+  ),
+  ipcRenderer: new Proxy(
+    {},
+    {
+      get(): any {
+        return () => ({});
+      },
+      has() {
+        return true;
+      },
+    }
+  ),
+}));
+
 describe('Editor reducer tests', () => {
   beforeEach(initializeDefaultState);
 

packages/app/client/src/state/sagas/azureAuthSaga.spec.ts

@@ -46,6 +46,11 @@ import {
 import { azureAuthSagas } from './azureAuthSaga';
 
 jest.mock('electron', () => ({
+  remote: {
+    app: {
+      isPackaged: false,
+    },
+  },
   ipcMain: new Proxy(
     {},
     {

packages/app/client/src/state/sagas/endpointSagas.spec.ts

@@ -51,9 +51,8 @@ import {
 } from '../actions/endpointServiceActions';
 import { DialogService } from '../../ui/dialogs/service';
 import { OPEN_ENDPOINT_EXPLORER_CONTEXT_MENU } from '../actions/endpointActions';
-import { executeCommand } from '../actions/commandActions';
 
-import { EndpointSagas, endpointSagas, getConnectedAbs } from './endpointSagas';
+import { EndpointSagas, endpointSagas } from './endpointSagas';
 
 jest.mock('../../ui/dialogs', () => ({
   DialogService: { showDialog: () => Promise.resolve(true) },
@@ -83,6 +82,11 @@ const mockBot = JSON.parse(`{
 }`);
 
 jest.mock('electron', () => ({
+  remote: {
+    app: {
+      isPackaged: false,
+    },
+  },
   ipcMain: new Proxy(
     {},
     {

packages/app/client/src/state/store.ts

@@ -31,8 +31,8 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 //
 
-import { applyMiddleware, createStore, combineReducers, Store } from 'redux';
-import { ipcRenderer } from 'electron';
+import { applyMiddleware, createStore, combineReducers, compose, Store } from 'redux';
+import { ipcRenderer, remote } from 'electron';
 import sagaMiddlewareFactory from 'redux-saga';
 import { Settings, ClientAwareSettings, FrameworkSettings } from '@bfemulator/app-shared';
 
@@ -107,6 +107,12 @@ function initStore(): Store<RootState> {
   });
 
   const sagaMiddleware = sagaMiddlewareFactory();
+  let storeEnhancer = applyMiddleware(forwardToMain, sagaMiddleware);
+  if (!remote.app.isPackaged) {
+    // enable react & react-redux dev tools
+    const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+    storeEnhancer = composeEnhancers(storeEnhancer);
+  }
   const _store: Store<RootState> = createStore(
     combineReducers({
       azureAuth,
@@ -128,7 +134,7 @@ function initStore(): Store<RootState> {
       update,
     }),
     DEFAULT_STATE,
-    applyMiddleware(forwardToMain, sagaMiddleware)
+    storeEnhancer
   );
   applicationSagas.forEach(saga => sagaMiddleware.run(saga));
 

packages/app/client/src/ui/dialogs/botCreationDialog/botCreationDialog.spec.tsx

@@ -51,6 +51,11 @@ jest.mock('../../../utils', () => ({
 }));
 
 jest.mock('electron', () => ({
+  remote: {
+    app: {
+      isPackaged: false,
+    },
+  },
   ipcMain: new Proxy(
     {},
     {

packages/app/client/src/ui/dialogs/dataCollectionDialog/dataCollectionDialog.spec.tsx

@@ -43,6 +43,36 @@ import { executeCommand } from '../../../state/actions/commandActions';
 import { DataCollectionDialog } from './dataCollectionDialog';
 import { DataCollectionDialogContainer } from './dataCollectionDialogContainer';
 
+jest.mock('electron', () => ({
+  remote: {
+    app: {
+      isPackaged: false,
+    },
+  },
+  ipcMain: new Proxy(
+    {},
+    {
+      get(): any {
+        return () => ({});
+      },
+      has() {
+        return true;
+      },
+    }
+  ),
+  ipcRenderer: new Proxy(
+    {},
+    {
+      get(): any {
+        return () => ({});
+      },
+      has() {
+        return true;
+      },
+    }
+  ),
+}));
+
 describe('<DataCollectionDialogContainer />', () => {
   let wrapper;
   let mockDispatch;

packages/app/client/src/ui/dialogs/postMigrationDialog/postMigrationDialog.spec.tsx

@@ -45,6 +45,35 @@ import { PostMigrationDialog } from './postMigrationDialog';
 
 jest.mock('../../dialogs', () => ({}));
 jest.mock('./postMigrationDialog.scss', () => ({}));
+jest.mock('electron', () => ({
+  remote: {
+    app: {
+      isPackaged: false,
+    },
+  },
+  ipcMain: new Proxy(
+    {},
+    {
+      get(): any {
+        return () => ({});
+      },
+      has() {
+        return true;
+      },
+    }
+  ),
+  ipcRenderer: new Proxy(
+    {},
+    {
+      get(): any {
+        return () => ({});
+      },
+      has() {
+        return true;
+      },
+    }
+  ),
+}));
 
 describe('The PostMigrationDialogContainer component', () => {
   let wrapper;

packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.spec.tsx

@@ -49,6 +49,11 @@ import { AppSettingsEditor } from './appSettingsEditor';
 import { AppSettingsEditorContainer } from './appSettingsEditorContainer';
 
 jest.mock('electron', () => ({
+  remote: {
+    app: {
+      isPackaged: false,
+    },
+  },
   ipcMain: new Proxy(
     {},
     {

packages/app/client/src/ui/editor/emulator/chatPanel/chatPanel.spec.tsx

@@ -31,11 +31,17 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 //
 
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 
-import ChatPanel from './chatPanel';
+import { ChatPanel } from './chatPanel';
+import { ChatPanelContainer } from './chatPanelContainer';
 
+jest.mock('../parts/chat/chatContainer', () => ({
+  ChatContainer: () => <div />,
+}));
 jest.mock('./chatPanel.scss', () => ({}));
 jest.mock('../parts/chat/chat.scss', () => ({}));
 jest.mock('../../../dialogs', () => ({
@@ -46,39 +52,27 @@ jest.mock('../../../dialogs', () => ({
   SecretPromptDialog: () => ({}),
 }));
 
-const document = {
-  endpointUrl: 'my/awesome/bot',
-  selectedActivity$: {
-    _value: null,
-    _listeners: [],
-    next(newObj: any) {
-      this._value = newObj;
-      this._listeners.forEach(cb => cb(this._value));
-    },
-    subscribe(cb: any) {
-      this._listeners.push(cb);
-
-      return {
-        unsubscribe: () => (this._listeners = this._listeners.filter(l => l !== cb)),
-      };
-    },
-  },
-};
-
-function render() {
-  const props = {
-    document,
-  };
+describe('<ChatPanel />', () => {
+  it('should render with a chat document', () => {
+    const wrapper = mount(
+      <Provider
+        store={createStore((state, action) => state, { chat: { chats: { doc1: { endpointUrl: 'someUrl' } } } })}
+      >
+        <ChatPanelContainer documentId={'doc1'} />
+      </Provider>
+    );
+    const node = wrapper.find(ChatPanel);
 
-  // @ts-ignore - mocking out BehaviorSubject
-  const component = shallow(<ChatPanel {...props} />);
-  component.setProps({});
-  return component;
-}
+    expect(node.exists()).toBe(true);
+  });
+  it('should render without a chat document', () => {
+    const wrapper = mount(
+      <Provider store={createStore((state, action) => state, { chat: { chats: {} } })}>
+        <ChatPanelContainer documentId={'doc1'} />
+      </Provider>
+    );
+    const node = wrapper.find(ChatPanel);
 
-describe('<ChatPanel />', () => {
-  it('should render', () => {
-    const component = render();
-    expect(component).not.toBeFalsy();
+    expect(node.exists()).toBe(true);
   });
 });