Implemented autocomplete functionality in open bot dialog

CHANGELOG.md

@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
+## Added
+- [client] Added auto complete component and mounted in open bot dialog in PR [1510](https://github.com/Microsoft/BotFramework-Emulator/pull/1510)
 
 ## v4.4.0 - 2019 - 05 - 03
 ## Added

packages/app/client/src/data/sagas/botSagas.spec.ts

@@ -214,22 +214,31 @@ describe('The botSagas', () => {
     // select debug mode
     gen.next(DebugMode.Sidecar);
     // response.json from starting conversation
-    const postActivityResponse = gen.next({ id: 'someConversationId' }).value;
+    const callToPostActivity = gen.next({ id: 'someConversationId' }).value;
     // posting activity to conversation
     const activity = {
       type: 'message',
       text: '/INSPECT open',
     };
-    expect(postActivityResponse).toEqual(
+    expect(callToPostActivity).toEqual(
       call(
         [CommandServiceImpl, CommandServiceImpl.remoteCall],
         SharedConstants.Commands.Emulator.PostActivityToConversation,
         'someConversationId',
         activity
       )
     );
-    // the response from POSTing to the conversation should end the saga
-    expect(gen.next({ statusCode: 200 }).done).toBe(true);
+    // POSTing the activity to the conversation should return a 200
+    const callToRememberEndpoint = gen.next({ statusCode: 200 });
+    expect(callToRememberEndpoint.value).toEqual(
+      call(
+        [CommandServiceImpl, CommandServiceImpl.remoteCall],
+        SharedConstants.Commands.Settings.SaveBotUrl,
+        'http://localhost/api/messages'
+      )
+    );
+    // the saga should be finished
+    expect(gen.next().done).toBe(true);
   });
 
   it('should spawn a notification if posting the "/INSPECT open" command fails', () => {

packages/app/client/src/data/sagas/botSagas.ts

@@ -107,6 +107,13 @@ export function* openBotViaUrl(action: BotAction<Partial<StartConversationParams
   if (error) {
     const errorNotification = beginAdd(newNotification(error));
     yield put(errorNotification);
+  } else {
+    // remember the endpoint
+    yield call(
+      [CommandServiceImpl, CommandServiceImpl.remoteCall],
+      SharedConstants.Commands.Settings.SaveBotUrl,
+      action.payload.endpoint
+    );
   }
 }
 

packages/app/client/src/ui/dialogs/openBotDialog/openBotDialog.scss

@@ -32,10 +32,8 @@
 //
 
 .browse-button {
-  overflow: hidden;
-  position: absolute;
-  right: 4px;
-  bottom: 11.5px;
+  margin-left: 8px;
+  bottom: 1px;
 }
 
 .input-container {
@@ -78,3 +76,11 @@
   --my-bots-scrollbar-color: rgba(136, 136, 136, 0.5);
   --my-bots-entry-color: var(--neutral-12);
 }
+
+.auto-complete-bar {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-end;
+  margin-top: 16px;
+  margin-bottom: 24px;
+}

packages/app/client/src/ui/dialogs/openBotDialog/openBotDialog.scss.d.ts

@@ -6,3 +6,4 @@ export const inputContainerRow: string;
 export const fileInput: string;
 export const multiInputRow: string;
 export const themeOverrides: string;
+export const autoCompleteBar: string;

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

@@ -126,18 +126,6 @@ describe('The OpenBotDialog', () => {
     expect(instance.state.botUrl).toBe('some/path/to/myBot.bot');
   });
 
-  it('should select all text in the input when focused', () => {
-    const spy = jest.fn();
-    const mockInput = {
-      value: 'this is some text',
-      setSelectionRange: spy,
-    };
-
-    instance.onFocus({ target: mockInput } as any);
-
-    expect(spy).toHaveBeenCalledWith(0, 17);
-  });
-
   it('should open a bot when a path is provided', async () => {
     instance.onInputChange({
       target: {
@@ -171,4 +159,10 @@ describe('The OpenBotDialog', () => {
       endpoint: 'http://localhost',
     });
   });
+
+  it('should handle a bot url change', () => {
+    instance.onBotUrlChange('http://localhost:3978');
+
+    expect(instance.state.botUrl).toBe('http://localhost:3978');
+  });
 });

packages/app/client/src/ui/dialogs/openBotDialog/openBotDialog.tsx

@@ -31,16 +31,17 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 //
 
-import { DefaultButton, Dialog, DialogFooter, PrimaryButton, Row, TextField } from '@bfemulator/ui-react';
+import { AutoComplete, DefaultButton, Dialog, DialogFooter, PrimaryButton, Row, TextField } from '@bfemulator/ui-react';
 import * as React from 'react';
-import { ChangeEvent, Component, FocusEvent, ReactNode } from 'react';
+import { ChangeEvent, Component, ReactNode } from 'react';
 import { DebugMode } from '@bfemulator/app-shared';
 
 import * as openBotStyles from './openBotDialog.scss';
 
 export interface OpenBotDialogProps {
   onDialogCancel?: () => void;
   openBot?: (state: OpenBotDialogState) => void;
+  savedBotUrls?: string[];
   sendNotification?: (error: Error) => void;
   switchToBot?: (path: string) => void;
   debugMode?: DebugMode;
@@ -60,7 +61,11 @@ enum ValidationResult {
 }
 
 export class OpenBotDialog extends Component<OpenBotDialogProps, OpenBotDialogState> {
-  public state = { botUrl: '', appId: '', appPassword: '' };
+  public state = {
+    botUrl: '',
+    appId: '',
+    appPassword: '',
+  };
 
   private static getErrorMessage(result: ValidationResult): string {
     if (result === ValidationResult.Empty || result === ValidationResult.Valid) {
@@ -85,6 +90,7 @@ export class OpenBotDialog extends Component<OpenBotDialogProps, OpenBotDialogSt
   }
 
   public render(): ReactNode {
+    const { savedBotUrls = [] } = this.props;
     const { botUrl, appId, appPassword } = this.state;
     const validationResult = OpenBotDialog.validateEndpoint(botUrl);
     const errorMessage = OpenBotDialog.getErrorMessage(validationResult);
@@ -98,17 +104,16 @@ export class OpenBotDialog extends Component<OpenBotDialogProps, OpenBotDialogSt
     return (
       <Dialog cancel={this.props.onDialogCancel} className={openBotStyles.themeOverrides} title="Open a bot">
         <form onSubmit={this.onSubmit}>
-          <TextField
-            autoFocus={true}
-            name="botUrl"
-            errorMessage={errorMessage}
-            inputContainerClassName={`${openBotStyles.inputContainer} ${!inSidecar ? openBotStyles.padded : ''}`}
-            label={botUrlLabel}
-            onChange={this.onInputChange}
-            onFocus={this.onFocus}
-            placeholder={botUrlLabel}
-            value={botUrl}
-          >
+          <div className={openBotStyles.autoCompleteBar}>
+            <AutoComplete
+              autoFocus={true}
+              errorMessage={errorMessage}
+              label={botUrlLabel}
+              items={savedBotUrls}
+              onChange={this.onBotUrlChange}
+              placeholder={botUrlLabel}
+              value={this.state.botUrl}
+            />
             {!inSidecar && (
               <PrimaryButton className={openBotStyles.browseButton}>
                 Browse
@@ -121,7 +126,7 @@ export class OpenBotDialog extends Component<OpenBotDialogProps, OpenBotDialogSt
                 />
               </PrimaryButton>
             )}
-          </TextField>
+          </div>
           <Row className={openBotStyles.multiInputRow}>
             <TextField
               inputContainerClassName={openBotStyles.inputContainerRow}
@@ -152,20 +157,16 @@ export class OpenBotDialog extends Component<OpenBotDialogProps, OpenBotDialogSt
     );
   }
 
-  private onFocus = (event: FocusEvent<HTMLInputElement>) => {
-    const input = event.target as HTMLInputElement;
-    input.setSelectionRange(0, (input.value || '').length);
-  };
-
   private onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { type, files, value, name } = event.target;
-    let newValue = value;
-    if (name === 'botUrl') {
-      newValue = type === 'file' ? files.item(0).path : value;
-    }
+    const newValue = type === 'file' ? files.item(0).path : value;
     this.setState({ [name]: newValue });
   };
 
+  private onBotUrlChange = (botUrl: string) => {
+    this.setState({ botUrl });
+  };
+
   private onSubmit = () => {
     this.props.openBot(this.state);
   };

packages/app/client/src/ui/dialogs/openBotDialog/openBotDialogContainer.ts

@@ -64,6 +64,7 @@ const mapDispatchToProps = (dispatch: (action: Action) => void): OpenBotDialogPr
 const mapStateToProps = (state: RootState, ownProps: Partial<OpenBotDialogProps>): Partial<OpenBotDialogProps> => {
   return {
     debugMode: state.clientAwareSettings.debugMode,
+    savedBotUrls: state.clientAwareSettings.savedBotUrls,
     ...ownProps,
   };
 };

packages/app/client/src/ui/styles/themes/dark.css

@@ -227,6 +227,9 @@ html {
 
   /* accessory buttons */
   --accessory-button-color: var(--neutral-5);
+
+  /* Auto Complete */
+  --auto-complete-results-opacity: 0.9;
 }
 
 .dialog {

packages/app/client/src/ui/styles/themes/high-contrast.css

@@ -226,6 +226,9 @@ html {
 
   /* Inspector accessory buttons */
   --accessory-button-color: var(--neutral-5);
+
+  /* Auto Complete */
+  --auto-complete-results-opacity: 1;
 }
 
 .dialog .ms-Button-label {

packages/app/client/src/ui/styles/themes/light.css

@@ -226,4 +226,7 @@ html {
 
   /* Inspector accessory buttons */
   --accessory-button-color: var(--s-button-color);
+
+  /* Auto Complete */
+  --auto-complete-results-opacity: 0.9;
 }

packages/app/main/src/commands/settingsCommands.spec.ts

@@ -36,6 +36,7 @@ import { CommandRegistryImpl } from '@bfemulator/sdk-shared';
 
 import { TelemetryService } from '../telemetry';
 import { setFramework } from '../settingsData/actions/frameworkActions';
+import { addSavedBotUrl } from '../settingsData/actions/savedBotUrlsActions';
 
 import { registerCommands } from './settingsCommands';
 
@@ -54,6 +55,9 @@ registerCommands(mockRegistry);
 describe('The settings commands', () => {
   let mockTrackEvent;
   const trackEventBackup = TelemetryService.trackEvent;
+  const {
+    Commands: { Settings },
+  } = SharedConstants;
 
   beforeEach(() => {
     mockTrackEvent = jest.fn(() => Promise.resolve());
@@ -66,7 +70,7 @@ describe('The settings commands', () => {
   });
 
   it('should save the global app settings', async () => {
-    const { handler } = mockRegistry.getCommand(SharedConstants.Commands.Settings.SaveAppSettings);
+    const { handler } = mockRegistry.getCommand(Settings.SaveAppSettings);
     const mockSettings = { ngrokPath: 'other/path/to/ngrok.exe' };
     await handler(mockSettings);
 
@@ -75,9 +79,16 @@ describe('The settings commands', () => {
   });
 
   it('should load the app settings from the store', async () => {
-    const { handler } = mockRegistry.getCommand(SharedConstants.Commands.Settings.LoadAppSettings);
+    const { handler } = mockRegistry.getCommand(Settings.LoadAppSettings);
     const appSettings = await handler();
 
     expect(appSettings).toBe(mockSettings.framework);
   });
+
+  it('should save a new bot url to disk', () => {
+    const { handler } = mockRegistry.getCommand(Settings.SaveBotUrl);
+    handler('http://some.boturl.com');
+
+    expect(mockDispatch).toHaveBeenCalledWith(addSavedBotUrl('http://some.boturl.com'));
+  });
 });

packages/app/main/src/commands/settingsCommands.ts

@@ -34,6 +34,7 @@
 import { FrameworkSettings, SharedConstants } from '@bfemulator/app-shared';
 import { CommandRegistryImpl } from '@bfemulator/sdk-shared';
 
+import { addSavedBotUrl } from '../settingsData/actions/savedBotUrlsActions';
 import { setFramework } from '../settingsData/actions/frameworkActions';
 import { dispatch, getSettings } from '../settingsData/store';
 import { TelemetryService } from '../telemetry';
@@ -65,4 +66,10 @@ export function registerCommands(commandRegistry: CommandRegistryImpl) {
       return getSettings().framework;
     }
   );
+
+  // ---------------------------------------------------------------------------
+  // Save a new bot url to disk
+  commandRegistry.registerCommand(Commands.SaveBotUrl, (url: string) => {
+    dispatch(addSavedBotUrl(url));
+  });
 }

packages/app/main/src/settingsData/actions/savedBotUrlsActions.spec.ts

@@ -0,0 +1,43 @@
+//
+// Copyright (c) Microsoft. All rights reserved.
+// Licensed under the MIT license.
+//
+// Microsoft Bot Framework: http://botframework.com
+//
+// Bot Framework Emulator Github:
+// https://github.com/Microsoft/BotFramwork-Emulator
+//
+// Copyright (c) Microsoft Corporation
+// All rights reserved.
+//
+// MIT License:
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//
+
+import { addSavedBotUrl, ADD_SAVED_BOT_URL } from './savedBotUrlsActions';
+
+describe('saved bot urls actions', () => {
+  it('should generate an add saved bot url action', () => {
+    expect(addSavedBotUrl('http://some.boturl.com')).toEqual({
+      type: ADD_SAVED_BOT_URL,
+      payload: 'http://some.boturl.com',
+    });
+  });
+});