diff --git a/src/electron/views/device-connect-view/components/android-setup/prompt-choose-device-step.scss b/src/electron/views/device-connect-view/components/android-setup/prompt-choose-device-step.scss index d9b74ce1426..21b1f8ca39a 100644 --- a/src/electron/views/device-connect-view/components/android-setup/prompt-choose-device-step.scss +++ b/src/electron/views/device-connect-view/components/android-setup/prompt-choose-device-step.scss @@ -14,3 +14,7 @@ .checkmark { font-size: large; } + +.row { + height: 36px; +} diff --git a/src/electron/views/device-connect-view/components/android-setup/prompt-choose-device-step.tsx b/src/electron/views/device-connect-view/components/android-setup/prompt-choose-device-step.tsx index dd988d37afc..a7787bd918d 100644 --- a/src/electron/views/device-connect-view/components/android-setup/prompt-choose-device-step.tsx +++ b/src/electron/views/device-connect-view/components/android-setup/prompt-choose-device-step.tsx @@ -1,21 +1,45 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. -import { NamedFC } from 'common/react/named-fc'; +import { DeviceMetadata } from 'electron/flux/types/device-metadata'; import { CheckboxVisibility, DefaultButton, DetailsList, FontIcon, + ISelection, + Selection, SelectionMode, } from 'office-ui-fabric-react'; import * as React from 'react'; import { AndroidSetupStepLayout, AndroidSetupStepLayoutProps } from './android-setup-step-layout'; import { CommonAndroidSetupStepProps } from './android-setup-types'; +import { DeviceDescription } from './device-description'; import * as styles from './prompt-choose-device-step.scss'; -export const PromptChooseDeviceStep = NamedFC( - 'PromptChooseDeviceStep', - (props: CommonAndroidSetupStepProps) => { +export type PromptChooseDeviceStepState = { + selectedDevice: DeviceMetadata; +}; + +export class PromptChooseDeviceStep extends React.Component< + CommonAndroidSetupStepProps, + PromptChooseDeviceStepState +> { + private selection: ISelection; + constructor(props) { + super(props); + this.state = { selectedDevice: null }; + + this.selection = new Selection({ + onSelectionChanged: () => { + const details = this.selection.getSelection(); + if (details.length > 0) { + this.setState({ selectedDevice: details[0] as DeviceMetadata }); + } + }, + }); + } + + public render(): JSX.Element { const onNextButton = () => { // To be implemented in future feature work console.log(`androidSetupActionCreator.next()`); @@ -26,33 +50,42 @@ export const PromptChooseDeviceStep = NamedFC( console.log(`androidSetupActionCreator.rescan()`); }; - const items = [ + // Available devices will be retrieved from store in future feature work + const devices: DeviceMetadata[] = [ { - value: 'Phone 1', + description: 'Phone 1', + isEmulator: true, }, { - value: 'Phone 2', + description: 'Phone 2', + isEmulator: false, }, { - value: 'Phone 3', + description: 'Phone 3', + isEmulator: true, }, ]; + const items = devices.map(m => ({ metadata: m })); + const layoutProps: AndroidSetupStepLayoutProps = { headerText: 'Choose which device to use', children: ( <> -

2 Android devices or emulators connected

+

{devices.length} Android devices or emulators connected

{ return checkboxProps.checked ? ( <> @@ -61,22 +94,27 @@ export const PromptChooseDeviceStep = NamedFC( ) : null; }} onRenderItemColumn={item => { - return

{item.value}

; + return ( + + ); }} /> ), leftFooterButtonProps: { text: 'Close', - onClick: _ => props.deps.closeApp(), + onClick: _ => this.props.deps.closeApp(), }, rightFooterButtonProps: { text: 'Next', - disabled: false, + disabled: this.state.selectedDevice === null, onClick: onNextButton, }, }; return ; - }, -); + } +} diff --git a/src/tests/unit/tests/electron/views/device-connect-view/components/android-setup/__snapshots__/prompt-choose-device-step.test.tsx.snap b/src/tests/unit/tests/electron/views/device-connect-view/components/android-setup/__snapshots__/prompt-choose-device-step.test.tsx.snap index d66ef32ec00..db19a8949a8 100644 --- a/src/tests/unit/tests/electron/views/device-connect-view/components/android-setup/__snapshots__/prompt-choose-device-step.test.tsx.snap +++ b/src/tests/unit/tests/electron/views/device-connect-view/components/android-setup/__snapshots__/prompt-choose-device-step.test.tsx.snap @@ -11,7 +11,7 @@ exports[`PromptChooseDeviceStep renders per snapshot 1`] = ` } rightFooterButtonProps={ Object { - "disabled": false, + "disabled": true, "onClick": [Function], "text": "Next", } @@ -19,7 +19,8 @@ exports[`PromptChooseDeviceStep renders per snapshot 1`] = ` >

- 2 Android devices or emulators connected + 3 + Android devices or emulators connected

diff --git a/src/tests/unit/tests/electron/views/device-connect-view/components/android-setup/prompt-choose-device-step.test.tsx b/src/tests/unit/tests/electron/views/device-connect-view/components/android-setup/prompt-choose-device-step.test.tsx index 4fef967f678..54fd04524bd 100644 --- a/src/tests/unit/tests/electron/views/device-connect-view/components/android-setup/prompt-choose-device-step.test.tsx +++ b/src/tests/unit/tests/electron/views/device-connect-view/components/android-setup/prompt-choose-device-step.test.tsx @@ -3,7 +3,7 @@ import { AndroidSetupStepLayout } from 'electron/views/device-connect-view/components/android-setup/android-setup-step-layout'; import { CommonAndroidSetupStepProps } from 'electron/views/device-connect-view/components/android-setup/android-setup-types'; import { PromptChooseDeviceStep } from 'electron/views/device-connect-view/components/android-setup/prompt-choose-device-step'; -import { shallow } from 'enzyme'; +import { mount, shallow } from 'enzyme'; import * as React from 'react'; import { AndroidSetupStepPropsBuilder } from 'tests/unit/common/android-setup-step-props-builder'; import { IMock, Mock, Times } from 'typemoq'; @@ -30,4 +30,11 @@ describe('PromptChooseDeviceStep', () => { rendered.find(AndroidSetupStepLayout).prop('leftFooterButtonProps').onClick(stubEvent); closeAppMock.verify(m => m(), Times.once()); }); + + it('next button becomes enabled after device is selected', () => { + const rendered = mount(); + expect(rendered.find('button').at(2).props().disabled).toBeTruthy(); + rendered.find('DeviceDescription').at(0).simulate('click'); + expect(rendered.find('button').at(2).props().disabled).toBeUndefined(); + }); });