Add username to activity for parity with v3

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `core`: Send `conversationUpdate` activity on connect, by [@compulim](https://github.com/compulim), in PR [#1608](https://github.com/Microsoft/BotFramework-WebChat/pull/1608)
 - `component`: Allow font family and adaptive cards text color to be set via styleOptions, by [@a-b-r-o-w-n](https://github.com/a-b-r-o-w-n), in PR [#1670](https://github.com/Microsoft/BotFramework-WebChat/pull/1670)
 - `component`: Add fallback logic to browser which do not support `window.Intl`, by [@compulim](https://github.com/compulim), in PR [#1696](https://github.com/Microsoft/BotFramework-WebChat/pull/1696)
+- `*`: Added `username` back to activity, fixed [#1321](https://github.com/Microsoft/BotFramework-WebChat/issues/1321), by [@compulim](https://github.com/compulim), in PR [#1682](https://github.com/Microsoft/BotFramework-DirectLineJS/pull/1682)
 
 ### Changed
 - Moved `botAvatarImage` and `userAvatarImage` to `styleOptions.botAvatarImage` and `styleOptions.userAvatarImage` respectively, in PR [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)

__tests__/setup/web/index.html

@@ -80,6 +80,7 @@
           window.WebChat.renderWebChat({
             directLine: createDirectLine({ token }),
             store,
+            username: 'Happy Web Chat user',
             ...props
           }, document.getElementById('webchat'));
 

__tests__/username.js

@@ -0,0 +1,30 @@
+import { By, Key } from 'selenium-webdriver';
+
+import { imageSnapshotOptions, timeouts } from './constants.json';
+
+import allImagesLoaded from './setup/conditions/allImagesLoaded';
+import allOutgoingActivitiesSent from './setup/conditions/allOutgoingActivitiesSent';
+import botConnected from './setup/conditions/botConnected';
+import minNumActivitiesShown from './setup/conditions/minNumActivitiesShown';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+test('send username in activity', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(botConnected(), timeouts.directLine);
+
+  const input = await driver.findElement(By.css('input[type="text"]'));
+
+  await input.sendKeys('user name', Key.RETURN);
+  await driver.wait(allOutgoingActivitiesSent(), timeouts.directLine);
+  await driver.wait(minNumActivitiesShown(3), timeouts.directLine);
+
+  // Hide cursor before taking screenshot
+  await pageObjects.hideCursor();
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+}, 60000);

packages/component/src/Composer.js

@@ -218,18 +218,18 @@ class Composer extends React.Component {
 
   componentWillMount() {
     const { props } = this;
-    const { directLine, userID } = props;
+    const { directLine, userID, username } = props;
 
     this.setLanguageFromProps(props);
     this.setSendTimeoutFromProps(props);
     this.setSendTypingIndicatorFromProps(props);
 
-    props.dispatch(createConnectAction({ directLine, userID }));
+    props.dispatch(createConnectAction({ directLine, userID, username }));
   }
 
   componentDidUpdate(prevProps) {
     const { props } = this;
-    const { directLine, locale, sendTimeout, sendTyping, sendTypingIndicator, userID } = props;
+    const { directLine, locale, sendTimeout, sendTyping, sendTypingIndicator, userID, username } = props;
 
     if (prevProps.locale !== locale) {
       this.setLanguageFromProps(props);
@@ -251,10 +251,11 @@ class Composer extends React.Component {
     if (
       prevProps.directLine !== directLine
       || prevProps.userID !== userID
+      || prevProps.username !== username
     ) {
       // TODO: [P3] disconnect() is an async call (pending -> fulfilled), we need to wait, or change it to reconnect()
       props.dispatch(disconnect());
-      props.dispatch(createConnectAction({ directLine, userID }));
+      props.dispatch(createConnectAction({ directLine, userID, username }));
     }
   }
 
@@ -294,6 +295,7 @@ class Composer extends React.Component {
         scrollToEnd,
         store,
         userID,
+        username,
         webSpeechPonyfillFactory,
         ...propsForLogic
       },
@@ -389,5 +391,6 @@ ConnectedComposerWithStore.propTypes = {
   sendTypingIndicator: PropTypes.bool,
   store: PropTypes.any,
   userID: PropTypes.string,
+  username: PropTypes.string,
   webSpeechPonyfillFactory: PropTypes.func
 };

packages/core/src/actions/connect.js

@@ -5,10 +5,14 @@ const CONNECT_PENDING = `${ CONNECT }_PENDING`;
 const CONNECT_REJECTED = `${ CONNECT }_REJECTED`;
 const CONNECT_STILL_PENDING = `${ CONNECT }_STILL_PENDING`;
 
-export default function ({ directLine, userID }) {
+export default function ({ directLine, userID, username }) {
   return {
     type: CONNECT,
-    payload: { directLine, userID }
+    payload: {
+      directLine,
+      userID,
+      username
+    }
   };
 }
 

packages/core/src/sagas/connectSaga.js

@@ -136,11 +136,21 @@ function* connectSaga(directLine) {
 
 export default function* () {
   for (;;) {
-    const { payload: { directLine, userID: userIDFromAction } } = yield take(CONNECT);
+    const {
+      payload: {
+        directLine,
+        userID: userIDFromAction,
+        username
+      }
+    } = yield take(CONNECT);
     const updateConnectionStatusTask = yield fork(observeAndPutConnectionStatusUpdate, directLine);
 
     try {
-      const meta = { userID: rectifyUserID(directLine, userIDFromAction) };
+      const meta = {
+        userID: rectifyUserID(directLine, userIDFromAction),
+        username
+      };
+
       let endDirectLine;
 
       yield put({ type: CONNECT_PENDING, meta });

packages/core/src/sagas/connectionStatusUpdateSaga.js

@@ -12,7 +12,7 @@ export default function* () {
   yield whileConnected(observeConnectionStatus);
 }
 
-function* observeConnectionStatus(directLine) {
+function* observeConnectionStatus({ directLine }) {
   yield observeEach(directLine.connectionStatus$, function* (connectionStatus) {
     yield put(connectionStatusUpdate(connectionStatus));
     yield put(setReferenceGrammarID(directLine.referenceGrammarId));

packages/core/src/sagas/effects/whileConnected.js

@@ -11,8 +11,8 @@ import { DISCONNECT_PENDING } from '../../actions/disconnect';
 export default function (fn) {
   return call(function* () {
     for (;;) {
-      const { meta: { userID }, payload: { directLine } } = yield take(CONNECT_FULFILLING);
-      const task = yield fork(fn, directLine, userID);
+      const { meta: { userID, username }, payload: { directLine } } = yield take(CONNECT_FULFILLING);
+      const task = yield fork(fn, { directLine, userID, username });
 
       // When we receive DISCONNECT_PENDING, the Direct Line connection is tearing down and should not be used.
       yield take(DISCONNECT_PENDING);

packages/core/src/sagas/incomingActivitySaga.js

@@ -19,7 +19,7 @@ export default function* () {
   yield whileConnected(observeActivity);
 }
 
-function* observeActivity(directLine, userID) {
+function* observeActivity({ directLine, userID }) {
   yield observeEach(directLine.activity$, function* (activity) {
     activity = patchActivityWithFromRole(activity, userID);
 

packages/core/src/sagas/markActivityForSpeakOnIncomingActivityFromOthersSaga.js

@@ -12,7 +12,7 @@ import { INCOMING_ACTIVITY } from '../actions/incomingActivity';
 import markActivity from '../actions/markActivity';
 
 export default function* () {
-  yield whileConnected(function* (_, userID) {
+  yield whileConnected(function* ({ userID }) {
     yield whileSpeakIncomingActivity(markActivityForSpeakOnIncomingActivityFromOthers.bind(null, userID));
   });
 }

packages/core/src/sagas/postActivitySaga.js

@@ -30,16 +30,16 @@ import {
 import { INCOMING_ACTIVITY } from '../actions/incomingActivity';
 
 export default function* () {
-  yield whileConnected(function* (directLine, userID) {
+  yield whileConnected(function* ({ directLine, userID, username }) {
     let numActivitiesPosted = 0;
 
     yield takeEvery(POST_ACTIVITY, function* (action) {
-      yield* postActivity(directLine, userID, numActivitiesPosted++, action);
+      yield* postActivity(directLine, userID, username, numActivitiesPosted++, action);
     });
   });
 }
 
-function* postActivity(directLine, userID, numActivitiesPosted, { meta: { method }, payload: { activity } }) {
+function* postActivity(directLine, userID, username, numActivitiesPosted, { meta: { method }, payload: { activity } }) {
   const locale = yield select(languageSelector);
   const { attachments, channelData: { clientActivityID = uniqueID() } = {} } = activity;
 
@@ -57,6 +57,7 @@ function* postActivity(directLine, userID, numActivitiesPosted, { meta: { method
     channelId: 'webchat',
     from: {
       id: userID,
+      name: username,
       role: 'user'
     },
     locale,

packages/core/src/sagas/sendConversationUpdateOnConnectSaga.js

@@ -1,17 +1,18 @@
 import { put } from 'redux-saga/effects';
-import whileConnected from './effects/whileConnected';
 
 import postActivity from '../actions/postActivity';
+import whileConnected from './effects/whileConnected';
 
 export default function* () {
   yield whileConnected(sendConversationUpdateOnConnect);
 }
 
-function* sendConversationUpdateOnConnect(_, userID) {
+function* sendConversationUpdateOnConnect({ userID, username }) {
   yield put(postActivity({
     type: 'conversationUpdate',
     membersAdded: [{
-      id: userID
+      id: userID,
+      name: username
     }]
   }, 'code'));
 }

packages/playground/src/App.js

@@ -106,6 +106,7 @@ export default class extends React.Component {
       sendTypingIndicator: true,
       userAvatarInitials: 'WC',
       userID,
+      username: 'Web Chat user',
       webSpeechPonyfillFactory: null
     };
   }
@@ -244,6 +245,7 @@ export default class extends React.Component {
         sendTypingIndicator,
         userAvatarInitials,
         userID,
+        username,
         webSpeechPonyfillFactory
       }
     } = this;
@@ -268,6 +270,7 @@ export default class extends React.Component {
           store={ store }
           styleOptions={ styleOptions }
           userID={ userID }
+          username={ username }
           webSpeechPonyfillFactory={ webSpeechPonyfillFactory }
         />
         <div className="button-bar">