Merge pull request #1832 from microsoft/toanzian/acc-#1762

[#1762] Fixed ngrok path focus issue in app settings editor.

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1791](https://github.com/microsoft/BotFramework-Emulator/pull/1791)
   - [1827](https://github.com/microsoft/BotFramework-Emulator/pull/1827)
   - [1828](https://github.com/microsoft/BotFramework-Emulator/pull/1828)
+  - [1832](https://github.com/microsoft/BotFramework-Emulator/pull/1832)
 
 ## v4.5.2 - 2019 - 07 - 17
 ## Fixed

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

@@ -63,6 +63,7 @@ function shallowEqual(x: any, y: any) {
 
 export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, AppSettingsEditorState> {
   public state = {} as AppSettingsEditorState;
+  private pathToNgrokInputRef: HTMLInputElement;
 
   public static getDerivedStateFromProps(
     newProps: AppSettingsEditorProps,
@@ -79,6 +80,12 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
     };
   }
 
+  public componentDidMount(): void {
+    if (this.pathToNgrokInputRef) {
+      this.pathToNgrokInputRef.focus();
+    }
+  }
+
   public render(): JSX.Element {
     const {
       ngrokPath = '',
@@ -124,6 +131,7 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
                 <TextField
                   className={styles.appSettingsInput}
                   inputContainerClassName={styles.inputContainer}
+                  inputRef={this.setNgrokInputRef}
                   readOnly={false}
                   value={ngrokPath}
                   onChange={this.onInputChange}
@@ -309,4 +317,8 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
     this.setState({ dirty });
     this.props.setDirtyFlag(dirty);
   }
+
+  private setNgrokInputRef = (ref: HTMLInputElement): void => {
+    this.pathToNgrokInputRef = ref;
+  };
 }

packages/sdk/ui-react/src/widget/textField/textField.spec.tsx

@@ -0,0 +1,87 @@
+//
+// 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 * as React from 'react';
+import { mount } from 'enzyme';
+
+import { TextField } from './textField';
+
+describe('<TextField /> Component', () => {
+  it('should render without any errors', () => {
+    const wrapper = mount(<TextField />);
+    const node = wrapper.find(TextField);
+    expect(node.html()).not.toBeFalsy();
+  });
+
+  it('should call the inputRef prop to set the ref', () => {
+    const mockInputRef = jest.fn(() => null);
+    const wrapper = mount(<TextField inputRef={mockInputRef} />);
+    const instance: any = wrapper.instance();
+    const mockRef = {};
+    instance.setInputRef({});
+
+    expect(mockInputRef).toHaveBeenCalledWith(mockRef);
+  });
+
+  it('should return a label node if there is a label', () => {
+    const wrapper = mount(<TextField label={'I am a label'} />);
+    const instance: any = wrapper.instance();
+    const labelNode = instance.labelNode;
+
+    expect(labelNode).toBeTruthy();
+  });
+
+  it('should not return a label node if there is no label', () => {
+    const wrapper = mount(<TextField label={undefined} />);
+    const instance: any = wrapper.instance();
+    const labelNode = instance.labelNode;
+
+    expect(labelNode).toBeNull();
+  });
+
+  it('should return an error node if there is an error', () => {
+    const wrapper = mount(<TextField errorMessage={'I am an error'} />);
+    const instance: any = wrapper.instance();
+    const errorNode = instance.errorNode;
+
+    expect(errorNode).toBeTruthy();
+  });
+
+  it('should not return an error node if there is no error node', () => {
+    const wrapper = mount(<TextField errorMessage={undefined} />);
+    const instance: any = wrapper.instance();
+    const errorNode = instance.errorNode;
+
+    expect(errorNode).toBeNull();
+  });
+});

packages/sdk/ui-react/src/widget/textField/textField.tsx

@@ -42,7 +42,7 @@ export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   errorMessage?: string;
   inputContainerClassName?: string;
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: (ref: HTMLInputElement) => void;
 }
 
 export class TextField extends Component<TextFieldProps, {}> {
@@ -58,7 +58,6 @@ export class TextField extends Component<TextFieldProps, {}> {
     const {
       inputContainerClassName = '',
       className = '',
-      label,
       errorMessage,
       children,
       inputRef,
@@ -71,13 +70,20 @@ export class TextField extends Component<TextFieldProps, {}> {
     return (
       <div className={`${styles.inputContainer} ${inputContainerClassName}`}>
         {this.labelNode}
-        <input className={inputClassName} id={this.inputId} ref={inputRef || undefined} {...inputProps} />
+        <input className={inputClassName} id={this.inputId} ref={this.setInputRef} {...inputProps} />
         {children}
         {this.errorNode}
       </div>
     );
   }
 
+  private setInputRef = (ref: HTMLInputElement): void => {
+    const { inputRef } = this.props;
+    if (inputRef) {
+      inputRef(ref);
+    }
+  };
+
   protected get labelNode(): ReactNode {
     const { label, required, disabled } = this.props;
     const className = required ? styles.requiredIndicator : '';