From 2835d71b8cb0420f33d91fd200d2634b5854cd65 Mon Sep 17 00:00:00 2001
From: aliandi <mica.andini@gmail.com>
Date: Wed, 24 Apr 2019 16:17:11 -0300
Subject: [PATCH 1/8] add functionality

---
 .../appSettingsEditor/appSettingsEditor.tsx   | 29 ++++++++-
 .../src/ui/editor/emulator/emulator.scss      |  1 +
 .../src/ui/editor/emulator/emulator.tsx       | 60 ++++++++++---------
 .../ui/editor/emulator/toolbar/toolbar.scss   |  1 -
 .../shared/src/types/serverSettingsTypes.ts   |  6 ++
 5 files changed, 67 insertions(+), 30 deletions(-)

diff --git a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
index 7e9c8ed60..2ecea33a8 100644
--- a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
+++ b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
@@ -90,6 +90,7 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
 
   public componentDidMount(): void {
     this.props.getFrameworkSettings();
+    this.setState({ ['useCustomId']: this.props.framework.useCustomId });
   }
 
   public render(): JSX.Element {
@@ -167,7 +168,7 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
             </Row>
           </Column>
           <Column className={[styles.rightColumn, styles.spacing].join(' ')}>
-            <SmallHeader>Auth</SmallHeader>
+            <SmallHeader>User settings</SmallHeader>
             <Checkbox
               className={styles.checkboxOverrides}
               checked={state.use10Tokens}
@@ -176,7 +177,6 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
               label="Use version 1.0 authentication tokens"
               name="use10Tokens"
             />
-            <SmallHeader>Sign-in</SmallHeader>
             <Checkbox
               className={styles.checkboxOverrides}
               checked={state.useCodeValidation}
@@ -185,6 +185,30 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
               label="Use a sign-in verification code for OAuthCards"
               name="useCodeValidation"
             />
+            <Checkbox
+              className={styles.checkboxOverrides}
+              checked={state.useCustomId}
+              onChange={this.onChangeCheckBox}
+              id="use-custom-id"
+              label="Use your own user ID to communicate with the bot"
+              name="useCustomId"
+            />
+            <Row align={RowAlignment.Top}>
+              <label>User ID</label>
+            </Row>
+            <Row align={RowAlignment.Top}>
+              <TextField
+                className={styles.appSettingsInput}
+                inputContainerClassName={styles.inputContainer}
+                readOnly={false}
+                value={state.userGUID}
+                name="userGUID"
+                onChange={this.onInputChange}
+                disabled={!state.useCustomId}
+                required={state.useCustomId}
+                errorMessage={state.userGUID ? '' : 'Enter a user ID'}
+              />
+            </Row>
             <SmallHeader>Application Updates</SmallHeader>
             <Checkbox
               className={styles.checkboxOverrides}
@@ -227,6 +251,7 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
     const change = { [name]: checked };
     this.setState(change);
     this.updateDirtyFlag(change);
+    if (name === 'useCustomId' && checked === false) this.setState({ ['userGUID']: '' });
   };
 
   private onClickBrowse = async (): Promise<void> => {
diff --git a/packages/app/client/src/ui/editor/emulator/emulator.scss b/packages/app/client/src/ui/editor/emulator/emulator.scss
index c828b0a75..1c87877c9 100644
--- a/packages/app/client/src/ui/editor/emulator/emulator.scss
+++ b/packages/app/client/src/ui/editor/emulator/emulator.scss
@@ -82,6 +82,7 @@
     }
 
     .restart-icon {
+      margin-left: 20px;
       &::before { -webkit-mask: url(../../media/ic_refresh.svg); }
     }
     .save-transcript-icon {
diff --git a/packages/app/client/src/ui/editor/emulator/emulator.tsx b/packages/app/client/src/ui/editor/emulator/emulator.tsx
index 5bdedd662..42b20544a 100644
--- a/packages/app/client/src/ui/editor/emulator/emulator.tsx
+++ b/packages/app/client/src/ui/editor/emulator/emulator.tsx
@@ -33,11 +33,11 @@
 
 import { createDirectLine } from 'botframework-webchat';
 import { uniqueId, uniqueIdv4 } from '@bfemulator/sdk-shared';
-import { SplitButton, Splitter } from '@bfemulator/ui-react';
+import { Splitter } from '@bfemulator/ui-react';
 import base64Url from 'base64url';
 import { IEndpointService } from 'botframework-config/lib/schema';
 import * as React from 'react';
-import { newNotification, Notification, SharedConstants } from '@bfemulator/app-shared';
+import { newNotification, Notification, SharedConstants, FrameworkSettings } from '@bfemulator/app-shared';
 import { DebugMode } from '@bfemulator/app-shared';
 
 import { Document } from '../../../data/reducer/editor';
@@ -117,17 +117,7 @@ export class Emulator extends React.Component<EmulatorProps, {}> {
   }
 
   componentWillReceiveProps(nextProps: EmulatorProps) {
-    const { props, keyboardEventListener, startNewConversation } = this;
-    const { document = {} } = props;
-    const { document: nextDocument = {} } = nextProps;
-
-    const documentOrUserIdChanged =
-      (!nextDocument.directLine && document.documentId !== nextDocument.documentId) ||
-      document.userId !== nextDocument.userId;
-
-    if (documentOrUserIdChanged) {
-      startNewConversation(nextProps).catch();
-    }
+    const { props, keyboardEventListener } = this;
 
     const switchedDocuments = props.activeDocumentId !== nextProps.activeDocumentId;
     const switchedToThisDocument = nextProps.activeDocumentId === props.documentId;
@@ -143,19 +133,29 @@ export class Emulator extends React.Component<EmulatorProps, {}> {
 
   startNewConversation = async (
     props: EmulatorProps = this.props,
-    requireNewConvoId: boolean = false,
-    requireNewUserId: boolean = false
+    requireNewConvoId?: boolean,
+    requireNewUserId?: boolean
   ): Promise<any> => {
+    if (requireNewUserId == null) {
+      requireNewUserId = false;
+    }
+    if (requireNewConvoId == null) {
+      requireNewConvoId = false;
+    }
+
     // Look for an existing conversation ID and use that,
     // otherwise, create a new one
     const conversationId = requireNewConvoId
       ? `${uniqueId()}|${props.mode}`
       : props.document.conversationId || `${uniqueId()}|${props.mode}`;
 
-    const userId = requireNewUserId ? uniqueIdv4() : props.document.userId;
-    if (requireNewUserId) {
-      await CommandServiceImpl.remoteCall(SharedConstants.Commands.Emulator.SetCurrentUser, userId);
-    }
+    const framework: FrameworkSettings = await CommandServiceImpl.remoteCall(
+      SharedConstants.Commands.Settings.LoadAppSettings
+    );
+    const stableId = framework.userGUID || props.document.userId;
+    const userId = requireNewUserId ? uniqueIdv4() : stableId;
+
+    await CommandServiceImpl.remoteCall(SharedConstants.Commands.Emulator.SetCurrentUser, userId);
 
     const options = {
       conversationId,
@@ -267,13 +267,18 @@ export class Emulator extends React.Component<EmulatorProps, {}> {
         {this.props.mode === 'livechat' && (
           <div className={styles.header}>
             <ToolBar>
-              <SplitButton
-                defaultLabel="Restart conversation"
-                buttonClass={styles.restartIcon}
-                options={[NewUserId, SameUserId]}
-                disabled={this.props.debugMode === DebugMode.Sidecar}
-                onClick={this.onStartOverClick}
-              />
+              <button
+                className={`${styles.restartIcon} ${styles.toolbarIcon || ''}`}
+                onClick={() => this.onStartOverClick(SameUserId)}
+              >
+                Restart with Same User Id
+              </button>
+              <button
+                className={`${styles.restartIcon} ${styles.toolbarIcon || ''}`}
+                onClick={() => this.onStartOverClick(NewUserId)}
+              >
+                Restart with New User Id
+              </button>
               <button
                 className={`${styles.saveTranscriptIcon} ${styles.toolbarIcon || ''}`}
                 onClick={this.onExportClick}
@@ -358,13 +363,14 @@ export class Emulator extends React.Component<EmulatorProps, {}> {
         break;
       }
 
-      case SameUserId:
+      case SameUserId: {
         this.props.trackEvent('conversation_restart', {
           userId: 'same',
         });
         // start conversation with new convo id
         await this.startNewConversation(undefined, true, false);
         break;
+      }
 
       default:
         break;
diff --git a/packages/app/client/src/ui/editor/emulator/toolbar/toolbar.scss b/packages/app/client/src/ui/editor/emulator/toolbar/toolbar.scss
index 45f730206..1f3cce463 100644
--- a/packages/app/client/src/ui/editor/emulator/toolbar/toolbar.scss
+++ b/packages/app/client/src/ui/editor/emulator/toolbar/toolbar.scss
@@ -37,7 +37,6 @@
   flex-wrap: nowrap;
   align-items: center;
   height: 29px;
-  padding-left: 12px;
   background-color: var(--toolbar-bg);
   border-top: var(--toolbar-border);
   border-bottom:  var(--toolbar-border-bottom);
diff --git a/packages/app/shared/src/types/serverSettingsTypes.ts b/packages/app/shared/src/types/serverSettingsTypes.ts
index b06acd37f..967a30101 100644
--- a/packages/app/shared/src/types/serverSettingsTypes.ts
+++ b/packages/app/shared/src/types/serverSettingsTypes.ts
@@ -60,6 +60,10 @@ export interface FrameworkSettings {
   collectUsageData?: boolean;
   // Digest of k/v pairs for integrity
   hash?: string;
+  // GUID set by the user
+  userGUID?: string;
+  // use custom user id
+  useCustomId?: boolean;
 }
 
 export interface WindowStateSettings {
@@ -138,6 +142,8 @@ export const frameworkDefault: FrameworkSettings = {
   usePrereleases: false,
   autoUpdate: true,
   collectUsageData: false,
+  userGUID: '',
+  useCustomId: false,
 };
 
 export const windowStateDefault: WindowStateSettings = {

From 0344b91ebf7bb8eb010aee34642c29626fddca04 Mon Sep 17 00:00:00 2001
From: aliandi <mica.andini@gmail.com>
Date: Wed, 24 Apr 2019 16:32:31 -0300
Subject: [PATCH 2/8] Fix failing tests

---
 .../src/ui/editor/emulator/emulator.spec.tsx  | 46 +++++++++----------
 .../src/ui/editor/emulator/emulator.tsx       |  9 +++-
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/packages/app/client/src/ui/editor/emulator/emulator.spec.tsx b/packages/app/client/src/ui/editor/emulator/emulator.spec.tsx
index 51e28599c..fd4d859f4 100644
--- a/packages/app/client/src/ui/editor/emulator/emulator.spec.tsx
+++ b/packages/app/client/src/ui/editor/emulator/emulator.spec.tsx
@@ -298,9 +298,9 @@ describe('<EmulatorContainer/>', () => {
     instance = wrapper.instance();
     instance.onExportClick();
 
-    expect(mockRemoteCallsMade).toHaveLength(1);
-    expect(mockRemoteCallsMade[0].commandName).toBe(SharedConstants.Commands.Emulator.SaveTranscriptToFile);
-    expect(mockRemoteCallsMade[0].args).toEqual(['convo1']);
+    expect(mockRemoteCallsMade).toHaveLength(3);
+    expect(mockRemoteCallsMade[2].commandName).toBe(SharedConstants.Commands.Emulator.SaveTranscriptToFile);
+    expect(mockRemoteCallsMade[2].args).toEqual(['convo1']);
   });
 
   it('should start a new conversation', async () => {
@@ -313,7 +313,7 @@ describe('<EmulatorContainer/>', () => {
     };
     await instance.startNewConversation(undefined, true, true);
 
-    expect(mockRemoteCallsMade).toHaveLength(1);
+    expect(mockRemoteCallsMade).toHaveLength(4);
     expect(initConversationSpy).toHaveBeenCalledWith(instance.props, options);
   });
 
@@ -350,9 +350,9 @@ describe('<EmulatorContainer/>', () => {
     };
     await instance.startNewConversation(undefined, false, true);
 
-    expect(mockRemoteCallsMade).toHaveLength(1);
-    expect(mockRemoteCallsMade[0].commandName).toBe(SharedConstants.Commands.Emulator.SetCurrentUser);
-    expect(mockRemoteCallsMade[0].args).toEqual([options.userId]);
+    expect(mockRemoteCallsMade).toHaveLength(4);
+    expect(mockRemoteCallsMade[3].commandName).toBe(SharedConstants.Commands.Emulator.SetCurrentUser);
+    expect(mockRemoteCallsMade[3].args).toEqual([options.userId]);
     expect(mockInitConversation).toHaveBeenCalledWith(instance.props, options);
   });
 
@@ -363,9 +363,9 @@ describe('<EmulatorContainer/>', () => {
 
     expect(mockDispatch).toHaveBeenCalledWith(clearLog('doc1'));
     expect(mockDispatch).toHaveBeenCalledWith(setInspectorObjects('doc1', []));
-    expect(mockRemoteCallsMade).toHaveLength(1);
-    expect(mockRemoteCallsMade[0].commandName).toBe(SharedConstants.Commands.Telemetry.TrackEvent);
-    expect(mockRemoteCallsMade[0].args).toEqual(['conversation_restart', { userId: 'new' }]);
+    expect(mockRemoteCallsMade).toHaveLength(3);
+    expect(mockRemoteCallsMade[2].commandName).toBe(SharedConstants.Commands.Telemetry.TrackEvent);
+    expect(mockRemoteCallsMade[2].args).toEqual(['conversation_restart', { userId: 'new' }]);
     expect(mockStartNewConversation).toHaveBeenCalledWith(undefined, true, true);
   });
 
@@ -376,9 +376,9 @@ describe('<EmulatorContainer/>', () => {
 
     expect(mockDispatch).toHaveBeenCalledWith(clearLog('doc1'));
     expect(mockDispatch).toHaveBeenCalledWith(setInspectorObjects('doc1', []));
-    expect(mockRemoteCallsMade).toHaveLength(1);
-    expect(mockRemoteCallsMade[0].commandName).toBe(SharedConstants.Commands.Telemetry.TrackEvent);
-    expect(mockRemoteCallsMade[0].args).toEqual(['conversation_restart', { userId: 'same' }]);
+    expect(mockRemoteCallsMade).toHaveLength(3);
+    expect(mockRemoteCallsMade[2].commandName).toBe(SharedConstants.Commands.Telemetry.TrackEvent);
+    expect(mockRemoteCallsMade[2].args).toEqual(['conversation_restart', { userId: 'same' }]);
     expect(mockStartNewConversation).toHaveBeenCalledWith(undefined, true, false);
   });
 
@@ -418,11 +418,11 @@ describe('<EmulatorContainer/>', () => {
 
     await instance.startNewConversation(mockProps);
 
-    expect(mockRemoteCallsMade).toHaveLength(2);
-    expect(mockRemoteCallsMade[0].commandName).toBe(SharedConstants.Commands.Emulator.NewTranscript);
-    expect(mockRemoteCallsMade[0].args).toEqual(['someUniqueId|transcript']);
-    expect(mockRemoteCallsMade[1].commandName).toBe(SharedConstants.Commands.Emulator.FeedTranscriptFromMemory);
-    expect(mockRemoteCallsMade[1].args).toEqual(['someConvoId', 'someBotId', 'someUserId', []]);
+    expect(mockRemoteCallsMade).toHaveLength(6);
+    expect(mockRemoteCallsMade[4].commandName).toBe(SharedConstants.Commands.Emulator.NewTranscript);
+    expect(mockRemoteCallsMade[4].args).toEqual(['someUniqueId|transcript']);
+    expect(mockRemoteCallsMade[5].commandName).toBe(SharedConstants.Commands.Emulator.FeedTranscriptFromMemory);
+    expect(mockRemoteCallsMade[5].args).toEqual(['someConvoId', 'someBotId', 'someUserId', []]);
   });
 
   it('should start a new conversation from transcript on disk', async () => {
@@ -442,11 +442,11 @@ describe('<EmulatorContainer/>', () => {
 
     await instance.startNewConversation(mockProps);
 
-    expect(mockRemoteCallsMade).toHaveLength(2);
-    expect(mockRemoteCallsMade[0].commandName).toBe(SharedConstants.Commands.Emulator.NewTranscript);
-    expect(mockRemoteCallsMade[0].args).toEqual(['someUniqueId|transcript']);
-    expect(mockRemoteCallsMade[1].commandName).toBe(SharedConstants.Commands.Emulator.FeedTranscriptFromDisk);
-    expect(mockRemoteCallsMade[1].args).toEqual(['someConvoId', 'someBotId', 'someUserId', 'someDocId']);
+    expect(mockRemoteCallsMade).toHaveLength(6);
+    expect(mockRemoteCallsMade[4].commandName).toBe(SharedConstants.Commands.Emulator.NewTranscript);
+    expect(mockRemoteCallsMade[4].args).toEqual(['someUniqueId|transcript']);
+    expect(mockRemoteCallsMade[5].commandName).toBe(SharedConstants.Commands.Emulator.FeedTranscriptFromDisk);
+    expect(mockRemoteCallsMade[5].args).toEqual(['someConvoId', 'someBotId', 'someUserId', 'someDocId']);
     expect(mockDispatch).toHaveBeenCalledWith(updateDocument('someDocId', { meta: 'some file info' }));
   });
 });
diff --git a/packages/app/client/src/ui/editor/emulator/emulator.tsx b/packages/app/client/src/ui/editor/emulator/emulator.tsx
index 42b20544a..39a9bd767 100644
--- a/packages/app/client/src/ui/editor/emulator/emulator.tsx
+++ b/packages/app/client/src/ui/editor/emulator/emulator.tsx
@@ -117,8 +117,15 @@ export class Emulator extends React.Component<EmulatorProps, {}> {
   }
 
   componentWillReceiveProps(nextProps: EmulatorProps) {
-    const { props, keyboardEventListener } = this;
+    const { props, keyboardEventListener, startNewConversation } = this;
+    const { document = {} } = props;
+    const { document: nextDocument = {} } = nextProps;
 
+    const documentIdChanged = !nextDocument.directLine && document.documentId !== nextDocument.documentId;
+
+    if (documentIdChanged) {
+      startNewConversation(nextProps).catch();
+    }
     const switchedDocuments = props.activeDocumentId !== nextProps.activeDocumentId;
     const switchedToThisDocument = nextProps.activeDocumentId === props.documentId;
 

From 0694883268ca083234bab0f2c8f7fdff917f243e Mon Sep 17 00:00:00 2001
From: aliandi <mica.andini@gmail.com>
Date: Thu, 25 Apr 2019 11:09:11 -0300
Subject: [PATCH 3/8] add feedback

---
 .../appSettingsEditor/appSettingsEditor.tsx   |  6 ++--
 .../src/ui/editor/emulator/emulator.tsx       | 34 ++++++-------------
 2 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
index 2ecea33a8..e02e5d786 100644
--- a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
+++ b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
@@ -193,11 +193,9 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
               label="Use your own user ID to communicate with the bot"
               name="useCustomId"
             />
-            <Row align={RowAlignment.Top}>
-              <label>User ID</label>
-            </Row>
             <Row align={RowAlignment.Top}>
               <TextField
+                label="User ID"
                 className={styles.appSettingsInput}
                 inputContainerClassName={styles.inputContainer}
                 readOnly={false}
@@ -251,7 +249,7 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
     const change = { [name]: checked };
     this.setState(change);
     this.updateDirtyFlag(change);
-    if (name === 'useCustomId' && checked === false) this.setState({ ['userGUID']: '' });
+    if (name === 'useCustomId' && checked === false) this.setState({ userGUID: '' });
   };
 
   private onClickBrowse = async (): Promise<void> => {
diff --git a/packages/app/client/src/ui/editor/emulator/emulator.tsx b/packages/app/client/src/ui/editor/emulator/emulator.tsx
index 4f5c57a03..fefbe9133 100644
--- a/packages/app/client/src/ui/editor/emulator/emulator.tsx
+++ b/packages/app/client/src/ui/editor/emulator/emulator.tsx
@@ -33,7 +33,7 @@
 
 import { createDirectLine } from 'botframework-webchat';
 import { uniqueId, uniqueIdv4 } from '@bfemulator/sdk-shared';
-import { Splitter } from '@bfemulator/ui-react';
+import { Splitter, SplitButton } from '@bfemulator/ui-react';
 import base64Url from 'base64url';
 import { IEndpointService } from 'botframework-config/lib/schema';
 import * as React from 'react';
@@ -147,16 +147,9 @@ export class Emulator extends React.Component<EmulatorProps, {}> {
 
   startNewConversation = async (
     props: EmulatorProps = this.props,
-    requireNewConvoId?: boolean,
-    requireNewUserId?: boolean
+    requireNewConvoId: boolean = false,
+    requireNewUserId: boolean = false
   ): Promise<any> => {
-    if (requireNewUserId == null) {
-      requireNewUserId = false;
-    }
-    if (requireNewConvoId == null) {
-      requireNewConvoId = false;
-    }
-
     // Look for an existing conversation ID and use that,
     // otherwise, create a new one
     const conversationId = requireNewConvoId
@@ -283,21 +276,14 @@ export class Emulator extends React.Component<EmulatorProps, {}> {
           <div className={styles.header}>
             <ToolBar>
               {debugMode === DebugMode.Normal && (
-                <button
-                  className={`${styles.restartIcon} ${styles.toolbarIcon || ''}`}
-                  onClick={() => this.onStartOverClick(SameUserId)}
-                >
-                  Restart with Same User Id
-                </button>
-              )}
-              {debugMode === DebugMode.Normal && (
-                <button
-                  className={`${styles.restartIcon} ${styles.toolbarIcon || ''}`}
-                  onClick={() => this.onStartOverClick(NewUserId)}
-                >
-                  Restart with New User Id
-                </button>
+                <SplitButton
+                  defaultLabel="Restart conversation"
+                  buttonClass={styles.restartIcon}
+                  options={[NewUserId, SameUserId]}
+                  onClick={this.onStartOverClick}
+                />
               )}
+
               <button
                 className={`${styles.saveIcon} ${styles.toolbarIcon || ''}`}
                 onClick={this.onExportTranscriptClick}

From 16c71a109398d673a84b58b65615a84d038af09a Mon Sep 17 00:00:00 2001
From: aliandi <mica.andini@gmail.com>
Date: Fri, 26 Apr 2019 10:16:43 -0300
Subject: [PATCH 4/8] Remove set state from component did mount

---
 .../src/ui/editor/appSettingsEditor/appSettingsEditor.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
index e02e5d786..f3502921c 100644
--- a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
+++ b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
@@ -90,7 +90,7 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
 
   public componentDidMount(): void {
     this.props.getFrameworkSettings();
-    this.setState({ ['useCustomId']: this.props.framework.useCustomId });
+    //   this.setState({ ['useCustomId']: this.props.framework.useCustomId });
   }
 
   public render(): JSX.Element {

From 97e044733e3de21efa3f0b1871b10533e606b41a Mon Sep 17 00:00:00 2001
From: aliandi <mica.andini@gmail.com>
Date: Fri, 26 Apr 2019 13:43:29 -0300
Subject: [PATCH 5/8] [WIP] Remove comment and fix IF style

---
 .../editor/appSettingsEditor/appSettingsEditor.tsx   | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
index f3502921c..f6119137d 100644
--- a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
+++ b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
@@ -90,7 +90,6 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
 
   public componentDidMount(): void {
     this.props.getFrameworkSettings();
-    //   this.setState({ ['useCustomId']: this.props.framework.useCustomId });
   }
 
   public render(): JSX.Element {
@@ -193,9 +192,12 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
               label="Use your own user ID to communicate with the bot"
               name="useCustomId"
             />
+            <Row align={RowAlignment.Top}>
+              <label>User ID</label>
+            </Row>
             <Row align={RowAlignment.Top}>
               <TextField
-                label="User ID"
+                placeholder={state.useCustomId ? '' : 'There is no ID configured'}
                 className={styles.appSettingsInput}
                 inputContainerClassName={styles.inputContainer}
                 readOnly={false}
@@ -204,7 +206,7 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
                 onChange={this.onInputChange}
                 disabled={!state.useCustomId}
                 required={state.useCustomId}
-                errorMessage={state.userGUID ? '' : 'Enter a user ID'}
+                errorMessage={state.userGUID ? '' : 'Enter a User ID'}
               />
             </Row>
             <SmallHeader>Application Updates</SmallHeader>
@@ -249,7 +251,9 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
     const change = { [name]: checked };
     this.setState(change);
     this.updateDirtyFlag(change);
-    if (name === 'useCustomId' && checked === false) this.setState({ userGUID: '' });
+    if (name === 'useCustomId' && checked === false) {
+      this.setState({ userGUID: '' });
+    }
   };
 
   private onClickBrowse = async (): Promise<void> => {

From ef04f086bff49c80889634543dad420f766a6f72 Mon Sep 17 00:00:00 2001
From: aliandi <mica.andini@gmail.com>
Date: Fri, 26 Apr 2019 14:39:57 -0300
Subject: [PATCH 6/8] Avoid saving without a userid when the checkbox is set to
 true

---
 .../editor/appSettingsEditor/appSettingsEditor.tsx  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
index f6119137d..f6b14baec 100644
--- a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
+++ b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
@@ -240,19 +240,28 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
         </Row>
         <Row className={styles.buttonRow} justify={RowJustification.Right}>
           <PrimaryButton text="Cancel" onClick={this.props.discardChanges} className={styles.cancelButton} />
-          <PrimaryButton text="Save" onClick={this.onSaveClick} className={styles.saveButton} disabled={!state.dirty} />
+          <PrimaryButton
+            text="Save"
+            onClick={this.onSaveClick}
+            className={styles.saveButton}
+            disabled={this.disableSaveButton()}
+          />
         </Row>
       </GenericDocument>
     );
   }
 
+  private disableSaveButton(): boolean {
+    return this.state.useCustomId ? !this.state.userGUID : !this.state.dirty;
+  }
+
   private onChangeCheckBox = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, checked } = event.target;
     const change = { [name]: checked };
     this.setState(change);
     this.updateDirtyFlag(change);
     if (name === 'useCustomId' && checked === false) {
-      this.setState({ userGUID: '' });
+      this.setState({ userGUID: null });
     }
   };
 

From f3566f1ef75f56f04a8c20441f760bba2684241c Mon Sep 17 00:00:00 2001
From: Justin Wilaby <jwilaby@gmail.com>
Date: Fri, 26 Apr 2019 12:49:25 -0700
Subject: [PATCH 7/8] Updated css to correclyt apply disabled treatment to
 label

---
 packages/sdk/ui-react/src/widget/textField/textField.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sdk/ui-react/src/widget/textField/textField.scss b/packages/sdk/ui-react/src/widget/textField/textField.scss
index fb85efb8f..aab12633f 100644
--- a/packages/sdk/ui-react/src/widget/textField/textField.scss
+++ b/packages/sdk/ui-react/src/widget/textField/textField.scss
@@ -18,7 +18,7 @@
     border: var(--input-border-error);
   }
 
-  &[disabled], &[aria-disabled] {
+  &[disabled], &[aria-disabled="true"] {
     border: var(--input-border-disabled);
   }
 }
@@ -29,7 +29,7 @@
   color: var(--input-label-color);
   padding: 5px 0;
 
-  &[disabled], &[aria-disabled] {
+  &[disabled], &[aria-disabled="true"] {
     color: var(--input-label-color-disabled);
   }
 }

From ece6fb43f221e3c81196bee3fd3632a36271a093 Mon Sep 17 00:00:00 2001
From: aliandi <mica.andini@gmail.com>
Date: Fri, 26 Apr 2019 17:14:23 -0300
Subject: [PATCH 8/8] fix label

---
 .../ui/editor/appSettingsEditor/appSettingsEditor.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
index f6b14baec..e2d2d7a34 100644
--- a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
+++ b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
@@ -94,6 +94,9 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
 
   public render(): JSX.Element {
     const { state } = this;
+    const inputProps = {
+      disabled: !state.useCustomId,
+    };
 
     return (
       <GenericDocument className={styles.appSettingsEditor}>
@@ -192,11 +195,11 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
               label="Use your own user ID to communicate with the bot"
               name="useCustomId"
             />
-            <Row align={RowAlignment.Top}>
-              <label>User ID</label>
-            </Row>
+
             <Row align={RowAlignment.Top}>
               <TextField
+                {...inputProps}
+                label="User ID"
                 placeholder={state.useCustomId ? '' : 'There is no ID configured'}
                 className={styles.appSettingsInput}
                 inputContainerClassName={styles.inputContainer}
@@ -204,11 +207,11 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
                 value={state.userGUID}
                 name="userGUID"
                 onChange={this.onInputChange}
-                disabled={!state.useCustomId}
                 required={state.useCustomId}
                 errorMessage={state.userGUID ? '' : 'Enter a User ID'}
               />
             </Row>
+
             <SmallHeader>Application Updates</SmallHeader>
             <Checkbox
               className={styles.checkboxOverrides}