From 304eca8cdab778535193c0cc6a3aa66b8334594f Mon Sep 17 00:00:00 2001
From: Josephus Paye II <j.paye96@gmail.com>
Date: Wed, 20 Feb 2019 20:02:35 +1100
Subject: [PATCH 1/4] Add RobotSelectorSingle

---
 src/client/components/dropdown/style.css      |  9 ++-
 src/client/components/dropdown/view.tsx       |  4 +-
 .../components/robot_selector_single/plug.svg |  3 +
 .../robot_selector_single/robot.svg           |  3 +
 .../robot_selector_single/style.css           | 30 ++++++++++
 .../components/robot_selector_single/view.tsx | 56 +++++++++++++++++++
 .../robot_selector_single/view_model.ts       | 45 +++++++++++++++
 src/client/components/select/view.tsx         |  4 +-
 8 files changed, 151 insertions(+), 3 deletions(-)
 create mode 100644 src/client/components/robot_selector_single/plug.svg
 create mode 100644 src/client/components/robot_selector_single/robot.svg
 create mode 100644 src/client/components/robot_selector_single/style.css
 create mode 100644 src/client/components/robot_selector_single/view.tsx
 create mode 100644 src/client/components/robot_selector_single/view_model.ts

diff --git a/src/client/components/dropdown/style.css b/src/client/components/dropdown/style.css
index 5922b40f..5096e2ef 100644
--- a/src/client/components/dropdown/style.css
+++ b/src/client/components/dropdown/style.css
@@ -4,7 +4,6 @@
 
 .dropdownMenu {
   position: absolute;
-  top: 100%;
   z-index: 1;
 }
 
@@ -15,3 +14,11 @@
 .dropdownMenuRight {
   right: 0;
 }
+
+.dropdownMenuUp {
+  bottom: 100%;
+}
+
+.dropdownMenuDown {
+  top: 100%;
+}
diff --git a/src/client/components/dropdown/view.tsx b/src/client/components/dropdown/view.tsx
index 38278053..bc9d5f58 100644
--- a/src/client/components/dropdown/view.tsx
+++ b/src/client/components/dropdown/view.tsx
@@ -13,6 +13,7 @@ export interface DropdownProps {
   isOpen: boolean
   isFullwidth?: boolean
   dropdownPosition?: 'left' | 'right'
+  dropDirection?: 'up' | 'down'
   onRef?(dropdown: HTMLDivElement): void
   onToggleClick?(event: MouseEvent<HTMLSpanElement>): void
 }
@@ -20,7 +21,8 @@ export interface DropdownProps {
 export const Dropdown: StatelessComponent<DropdownProps> = (props: DropdownProps) => {
   const fullwidth = props.isFullwidth ? style.dropdownMenuFullwidth : ''
   const position = props.dropdownPosition === 'right' ? style.dropdownMenuRight : ''
-  const dropdownMenuClassName = classNames(style.dropdownMenu, fullwidth, position)
+  const direction = props.dropDirection === 'up' ? style.dropdownMenuUp : style.dropdownMenuDown
+  const dropdownMenuClassName = classNames(style.dropdownMenu, fullwidth, position, direction)
 
   return (
     <div className={classNames([style.dropdown, props.className])} ref={props.onRef}>
diff --git a/src/client/components/robot_selector_single/plug.svg b/src/client/components/robot_selector_single/plug.svg
new file mode 100644
index 00000000..418620c1
--- /dev/null
+++ b/src/client/components/robot_selector_single/plug.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path d="M308.6 11.7c-6.8 0-12.3 5.5-12.3 12.3v87.3h-80.6V23.9c0-6.8-5.5-12.3-12.3-12.3-6.8 0-12.3 5.5-12.3 12.3v87.3h-52.5c-6.8 0-12.3 5.5-12.3 12.3s5.5 12.2 12.3 12.2h12.2v71.7c0 40.7 23.4 76.1 57.3 93.5v40.9c0 15.6 12.7 28.3 28.3 28.3h7.2v4c0 27.7 22.5 50.2 50.2 50.2h41.4c14.2 0 25.7 11.5 25.7 25.7s-11.5 25.7-25.7 25.7H138.7c-6.8 0-12.3 5.5-12.3 12.3s5.5 12.3 12.3 12.3h196.6c27.7 0 50.2-22.5 50.2-50.2 0-27.7-22.5-50.2-50.2-50.2H294c-14.2 0-25.7-11.5-25.7-25.7v-4h7.2c15.6 0 28.3-12.7 28.3-28.3V301c34-17.4 57.3-52.7 57.3-93.5v-71.7h12.2c6.8 0 12.3-5.5 12.3-12.2s-5.5-12.3-12.3-12.3h-52.5V23.9c0-6.7-5.5-12.2-12.2-12.2zm-29.4 330.2c0 2.1-1.7 3.8-3.8 3.8h-38.8c-2.1 0-3.8-1.7-3.8-3.8v-32c7.5 1.7 15.2 2.7 23.2 2.7s15.7-1 23.2-2.7v32zm57.4-134.4c0 44.4-36.1 80.6-80.6 80.6s-80.6-36.1-80.6-80.6v-71.7h161.1v71.7z"/>
+</svg>
\ No newline at end of file
diff --git a/src/client/components/robot_selector_single/robot.svg b/src/client/components/robot_selector_single/robot.svg
new file mode 100644
index 00000000..c9f93dd6
--- /dev/null
+++ b/src/client/components/robot_selector_single/robot.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="430.117" height="430.118" viewBox="0 0 430.117 430.118">
+  <path d="M251.808 171.704c0-8.623 6.926-15.609 15.485-15.609 8.536 0 15.467 6.986 15.467 15.609 0 8.62-6.931 15.611-15.467 15.611-8.56-.004-15.485-6.995-15.485-15.611zm-48.167-132.97h-.128V60.13h19.639V39.36c6.758-3.426 11.443-10.398 11.443-18.547C234.595 9.315 225.363 0 213.96 0c-11.399 0-20.641 9.315-20.641 20.813-.004 7.693 4.173 14.323 10.322 17.921zm-42.973 148.577c8.539 0 15.469-6.991 15.469-15.614 0-8.62-6.931-15.607-15.469-15.607-8.559 0-15.485 6.987-15.485 15.607 0 8.623 6.926 15.614 15.485 15.614zm53.292 242.807c23.296 0 43.098-14.943 50.616-35.843H163.34c7.521 20.899 27.317 35.843 50.62 35.843zM52.57 366.702c0-8.261 4.807-15.336 11.724-18.696v-88.497c0-17.455 13.476-31.708 30.513-32.838v-42.825s4.145-78.05 68.534-102.328c19.126-7.208 36.588-10.123 51.718-10.671 15.141.548 32.604 3.463 51.711 10.667 64.401 24.278 68.551 102.328 68.551 102.328v42.821c17.025 1.134 30.504 15.392 30.504 32.842v88.502c6.916 3.36 11.724 10.44 11.724 18.696 0 11.49-9.241 20.806-20.638 20.806-11.397 0-20.638-9.315-20.638-20.806 0-8.261 4.812-15.336 11.714-18.696v-59.16c-3.836 1.979-8.14 3.174-12.662 3.482v20.562c.117 1.662.252 3.31.252 5.013 0 1.802-.116 3.584-.252 5.367v.476h-.022c-2.749 34.257-29.328 61.699-63.016 65.442l.028.467H157.796l.038-.467c-33.687-3.743-60.259-31.186-63.008-65.442h-.019v-.476c-.128-1.783-.252-3.565-.252-5.367 0-1.699.128-3.351.252-5.013v-20.559c-4.539-.312-8.842-1.498-12.678-3.486v59.17c6.914 3.36 11.724 10.436 11.724 18.687 0 11.5-9.239 20.811-20.643 20.811-11.393-.002-20.64-9.312-20.64-20.812zm196.932-108.846c0-5.525-4.443-10.016-9.932-10.016-5.498 0-9.941 4.485-9.941 10.016 0 5.535 4.443 10.025 9.941 10.025 5.489 0 9.932-4.49 9.932-10.025zm24.455 0c0-5.525-4.443-10.016-9.932-10.016s-9.94 4.485-9.94 10.016c0 5.535 4.452 10.025 9.94 10.025s9.932-4.49 9.932-10.025zm24.465 0c0-5.525-4.443-10.016-9.932-10.016-5.498 0-9.94 4.485-9.94 10.016 0 5.535 4.442 10.025 9.94 10.025 5.489 0 9.932-4.49 9.932-10.025zm-166.997-83.261c0 26.591 20.64 28.33 20.64 28.33 7.183 2.289 22.362 1.153 29.23 0 6.321-1.076 29.515-3.097 33.208-3.426.141.014.364.038.551.046.196-.009.416-.032.546-.046 3.697.324 26.883 2.35 33.211 3.426 6.88 1.153 22.048 2.289 29.235 0 0 0 20.633-1.734 20.633-28.33 0 0 0-29.486-20.633-47.408-20.013-17.382-50.092-21.153-61.896-21.377v-.019c-.168 0-.373.014-.551.014-.172 0-.387-.014-.546-.014-.168 0-.378.014-.551.014-.175 0-.385-.014-.548-.014v.019c-11.792.224-41.88 3.995-61.89 21.377-20.639 17.922-20.639 47.408-20.639 47.408z"/>
+</svg>
\ No newline at end of file
diff --git a/src/client/components/robot_selector_single/style.css b/src/client/components/robot_selector_single/style.css
new file mode 100644
index 00000000..335b5f9c
--- /dev/null
+++ b/src/client/components/robot_selector_single/style.css
@@ -0,0 +1,30 @@
+.empty {
+  color: #888;
+  padding: 1em;
+  text-align: center;
+}
+
+.emptyIcon {
+  background-color: #888;
+  border-radius: 100%;
+  box-shadow:
+    0 0 8px 0 rgba(0, 0, 0, 0.2),
+    1px 1px 4px 0 rgba(0,0,0,0.2);
+  fill: #fff;
+  height: 3em;
+  margin: 0 auto 1em auto;
+  opacity: 0.8;
+  padding: 1em;
+  width: 3em;
+}
+
+.emptyTitle {
+  font-size: 1.54em;
+  padding: 0.25em 0;
+  white-space: nowrap;
+}
+
+.emptyDescription {
+  font-size: 0.93em;
+  white-space: nowrap;
+}
\ No newline at end of file
diff --git a/src/client/components/robot_selector_single/view.tsx b/src/client/components/robot_selector_single/view.tsx
new file mode 100644
index 00000000..4d05576a
--- /dev/null
+++ b/src/client/components/robot_selector_single/view.tsx
@@ -0,0 +1,56 @@
+import * as classNames from 'classnames'
+import { observer } from 'mobx-react'
+import * as React from 'react'
+
+import { RobotModel } from '../robot/model'
+import { Option, Select } from '../select/view'
+
+import PlugIcon from './plug.svg'
+import RobotIcon from './robot.svg'
+import * as style from './style.css'
+import { RobotSelectorViewModel } from './view_model'
+
+export type RobotSelectorSingleProps = {
+  className?: string
+  robots: RobotModel[]
+  selected?: RobotModel
+  dropDirection?: 'up' | 'down'
+  onSelect(robot: RobotModel): void
+}
+
+@observer
+export class RobotSelectorSingle extends React.Component<RobotSelectorSingleProps> {
+  render() {
+    const { className, robots, selected, dropDirection } = this.props
+    const viewModel = RobotSelectorViewModel.of({
+      robots,
+      selected,
+    })
+
+    const empty = (
+      <div className={style.empty}>
+        <div className={style.emptyIcon}><PlugIcon /></div>
+        <div className={style.emptyTitle}>No connected robots</div>
+        <span className={style.emptyDescription}>Run yarn start:sim to simulate robots</span>
+      </div>
+    )
+
+    return (
+      <div className={classNames([style.robotSelector, className])}>
+        <Select
+          options={viewModel.options}
+          selectedOption={viewModel.selectedOption}
+          onChange={this.onChange}
+          placeholder='Select a robot...'
+          empty={empty}
+          icon={<RobotIcon />}
+          dropDirection={dropDirection}
+        />
+      </div>
+    )
+  }
+
+  private onChange = (option: Option & { robot: RobotModel }) => {
+    this.props.onSelect(option.robot)
+  }
+}
diff --git a/src/client/components/robot_selector_single/view_model.ts b/src/client/components/robot_selector_single/view_model.ts
new file mode 100644
index 00000000..052985ec
--- /dev/null
+++ b/src/client/components/robot_selector_single/view_model.ts
@@ -0,0 +1,45 @@
+import { computed, observable } from 'mobx'
+import { createTransformer } from 'mobx-utils'
+
+import { RobotModel } from '../robot/model'
+
+export interface RobotSelectorViewModelOpts {
+  robots: RobotModel[]
+  selected?: RobotModel
+}
+
+export class RobotSelectorViewModel {
+  @observable private robots: RobotModel[]
+  @observable private selected?: RobotModel
+
+  constructor(opts: RobotSelectorViewModelOpts) {
+    this.robots = opts.robots
+    this.selected = opts.selected
+  }
+
+  static of = createTransformer((opts: RobotSelectorViewModelOpts): RobotSelectorViewModel => {
+    return new RobotSelectorViewModel(opts)
+  })
+
+  @computed
+  get options() {
+    return this.robots.map(robot => {
+      return {
+        id: robot.id,
+        label: robot.name,
+        robot,
+      }
+    })
+  }
+
+  @computed
+  get selectedOption() {
+    if (this.selected) {
+      return {
+        id: this.selected.id,
+        label: this.selected.name,
+        robot: this.selected,
+      }
+    }
+  }
+}
diff --git a/src/client/components/select/view.tsx b/src/client/components/select/view.tsx
index 59236b0a..b0b2bb7b 100644
--- a/src/client/components/select/view.tsx
+++ b/src/client/components/select/view.tsx
@@ -24,6 +24,7 @@ export type SelectProps = {
   selectedOption?: Option
   icon?: ReactNode
   empty?: ReactNode
+  dropDirection?: 'up' | 'down'
   onChange(option: Option): void
 }
 
@@ -48,7 +49,7 @@ export class Select extends React.Component<SelectProps> {
   }
 
   render(): JSX.Element {
-    const { className, icon, placeholder, empty, options, selectedOption } = this.props
+    const { className, icon, placeholder, dropDirection, empty, options, selectedOption } = this.props
 
     const button = (
       <button className={style.button}>
@@ -62,6 +63,7 @@ export class Select extends React.Component<SelectProps> {
       <Dropdown
         className={className}
         dropdownToggle={button}
+        dropDirection={dropDirection}
         isOpen={this.isOpen}
         isFullwidth={true}
         onToggleClick={this.onToggleClick}

From 4aa7b2c43e05e29b7b51c3a3ee61163e25eaf5e9 Mon Sep 17 00:00:00 2001
From: Josephus Paye II <j.paye96@gmail.com>
Date: Wed, 20 Feb 2019 20:02:41 +1100
Subject: [PATCH 2/4] Add stories

---
 .../robot_selector_single.stories.tsx         | 81 +++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/client/components/robot_selector_single/robot_selector_single.stories.tsx

diff --git a/src/client/components/robot_selector_single/robot_selector_single.stories.tsx b/src/client/components/robot_selector_single/robot_selector_single.stories.tsx
new file mode 100644
index 00000000..5b842f98
--- /dev/null
+++ b/src/client/components/robot_selector_single/robot_selector_single.stories.tsx
@@ -0,0 +1,81 @@
+import { action } from '@storybook/addon-actions'
+import { storiesOf } from '@storybook/react'
+import { action as mobxAction, observable } from 'mobx'
+import { observer } from 'mobx-react'
+import * as React from 'react'
+
+import { RobotModel } from '../robot/model'
+
+import { RobotSelectorSingle } from './view'
+
+const actions = {
+  onSelect: action('onSelect'),
+}
+
+storiesOf('components.robot_selector_single', module)
+  .addDecorator(story => <div style={{ maxWidth: '320px' }}>{story()}</div>)
+  .add('renders empty', () => {
+    return <RobotSelectorSingle
+      robots={[]}
+      onSelect={actions.onSelect}
+    />
+  })
+  .add('renders with robots', () => {
+    const robots = getRobots()
+    return <RobotSelectorSingle
+      robots={robots}
+      onSelect={actions.onSelect}
+    />
+  })
+  .add('renders with selection', () => {
+    const robots = getRobots()
+    const selected = robots[0]
+    return <RobotSelectorSingle
+      robots={robots}
+      selected={selected}
+      onSelect={actions.onSelect}
+    />
+  })
+  .add('interactive', () => {
+    const robots = getRobots()
+    const model = observable({
+      robots,
+      selected: robots[1],
+    })
+    const onSelect = mobxAction((robot: RobotModel) => model.selected = robot)
+    const Component = observer(() => <RobotSelectorSingle
+      robots={model.robots}
+      selected={model.selected}
+      onSelect={onSelect}
+    />)
+    return <Component />
+  })
+
+function getRobots(): RobotModel[] {
+  return [
+    {
+      id: '1',
+      name: 'Virtual Robot 1',
+      connected: true,
+      enabled: true,
+      address: '',
+      port: 0,
+    },
+    {
+      id: '2',
+      name: 'Virtual Robot 2',
+      connected: true,
+      enabled: true,
+      address: '',
+      port: 0,
+    },
+    {
+      id: '3',
+      name: 'Virtual Robot 3',
+      connected: true,
+      enabled: true,
+      address: '',
+      port: 0,
+    },
+  ]
+}

From d66f5492f227d25c5ba30e18ff6c9fa76f69d9ec Mon Sep 17 00:00:00 2001
From: Brendan Annable <brendan@annable.me>
Date: Sat, 2 Mar 2019 14:47:53 +1100
Subject: [PATCH 3/4] remove view model and internal state

---
 .../robot_selector_single.stories.tsx         |  7 +-
 .../components/robot_selector_single/view.tsx | 73 +++++++++++--------
 .../robot_selector_single/view_model.ts       | 45 ------------
 3 files changed, 46 insertions(+), 79 deletions(-)
 rename src/client/components/robot_selector_single/{ => stories}/robot_selector_single.stories.tsx (93%)
 delete mode 100644 src/client/components/robot_selector_single/view_model.ts

diff --git a/src/client/components/robot_selector_single/robot_selector_single.stories.tsx b/src/client/components/robot_selector_single/stories/robot_selector_single.stories.tsx
similarity index 93%
rename from src/client/components/robot_selector_single/robot_selector_single.stories.tsx
rename to src/client/components/robot_selector_single/stories/robot_selector_single.stories.tsx
index 5b842f98..5d08cb6c 100644
--- a/src/client/components/robot_selector_single/robot_selector_single.stories.tsx
+++ b/src/client/components/robot_selector_single/stories/robot_selector_single.stories.tsx
@@ -4,9 +4,8 @@ import { action as mobxAction, observable } from 'mobx'
 import { observer } from 'mobx-react'
 import * as React from 'react'
 
-import { RobotModel } from '../robot/model'
-
-import { RobotSelectorSingle } from './view'
+import { RobotModel } from '../../robot/model'
+import { RobotSelectorSingle } from '../view'
 
 const actions = {
   onSelect: action('onSelect'),
@@ -48,7 +47,7 @@ storiesOf('components.robot_selector_single', module)
       selected={model.selected}
       onSelect={onSelect}
     />)
-    return <Component />
+    return <Component/>
   })
 
 function getRobots(): RobotModel[] {
diff --git a/src/client/components/robot_selector_single/view.tsx b/src/client/components/robot_selector_single/view.tsx
index 4d05576a..248733b6 100644
--- a/src/client/components/robot_selector_single/view.tsx
+++ b/src/client/components/robot_selector_single/view.tsx
@@ -1,4 +1,5 @@
 import * as classNames from 'classnames'
+import { computed } from 'mobx'
 import { observer } from 'mobx-react'
 import * as React from 'react'
 
@@ -8,7 +9,6 @@ import { Option, Select } from '../select/view'
 import PlugIcon from './plug.svg'
 import RobotIcon from './robot.svg'
 import * as style from './style.css'
-import { RobotSelectorViewModel } from './view_model'
 
 export type RobotSelectorSingleProps = {
   className?: string
@@ -21,36 +21,49 @@ export type RobotSelectorSingleProps = {
 @observer
 export class RobotSelectorSingle extends React.Component<RobotSelectorSingleProps> {
   render() {
-    const { className, robots, selected, dropDirection } = this.props
-    const viewModel = RobotSelectorViewModel.of({
-      robots,
-      selected,
-    })
-
-    const empty = (
-      <div className={style.empty}>
-        <div className={style.emptyIcon}><PlugIcon /></div>
-        <div className={style.emptyTitle}>No connected robots</div>
-        <span className={style.emptyDescription}>Run yarn start:sim to simulate robots</span>
-      </div>
-    )
-
-    return (
-      <div className={classNames([style.robotSelector, className])}>
-        <Select
-          options={viewModel.options}
-          selectedOption={viewModel.selectedOption}
-          onChange={this.onChange}
-          placeholder='Select a robot...'
-          empty={empty}
-          icon={<RobotIcon />}
-          dropDirection={dropDirection}
-        />
-      </div>
-    )
+    const { className, dropDirection } = this.props
+    return <div className={classNames([style.robotSelector, className])}>
+      <Select
+        options={this.options}
+        selectedOption={this.selectedOption}
+        onChange={this.onChange}
+        placeholder='Select a robot...'
+        empty={this.renderEmpty}
+        icon={<RobotIcon/>}
+        dropDirection={dropDirection}
+      />
+    </div>
   }
 
-  private onChange = (option: Option & { robot: RobotModel }) => {
-    this.props.onSelect(option.robot)
+  @computed
+  private get renderEmpty() {
+    return <div className={style.empty}>
+      <div className={style.emptyIcon}><PlugIcon/></div>
+      <div className={style.emptyTitle}>No connected robots</div>
+      <span className={style.emptyDescription}>Run yarn start:sim to simulate robots</span>
+    </div>
+  }
+
+  @computed
+  private get options() {
+    return this.props.robots.map(robot => ({
+      id: robot.id,
+      label: robot.name,
+      robot,
+    }))
+  }
+
+  @computed
+  private get selectedOption() {
+    if (this.props.selected) {
+      return {
+        id: this.props.selected.id,
+        label: this.props.selected.name,
+      }
+    }
+  }
+
+  private onChange = (option: Option) => {
+    this.props.onSelect(this.props.robots.find(robot => robot.id === option.id)!)
   }
 }
diff --git a/src/client/components/robot_selector_single/view_model.ts b/src/client/components/robot_selector_single/view_model.ts
deleted file mode 100644
index 052985ec..00000000
--- a/src/client/components/robot_selector_single/view_model.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { computed, observable } from 'mobx'
-import { createTransformer } from 'mobx-utils'
-
-import { RobotModel } from '../robot/model'
-
-export interface RobotSelectorViewModelOpts {
-  robots: RobotModel[]
-  selected?: RobotModel
-}
-
-export class RobotSelectorViewModel {
-  @observable private robots: RobotModel[]
-  @observable private selected?: RobotModel
-
-  constructor(opts: RobotSelectorViewModelOpts) {
-    this.robots = opts.robots
-    this.selected = opts.selected
-  }
-
-  static of = createTransformer((opts: RobotSelectorViewModelOpts): RobotSelectorViewModel => {
-    return new RobotSelectorViewModel(opts)
-  })
-
-  @computed
-  get options() {
-    return this.robots.map(robot => {
-      return {
-        id: robot.id,
-        label: robot.name,
-        robot,
-      }
-    })
-  }
-
-  @computed
-  get selectedOption() {
-    if (this.selected) {
-      return {
-        id: this.selected.id,
-        label: this.selected.name,
-        robot: this.selected,
-      }
-    }
-  }
-}

From 2e709b6dcc76df846c60943fbd5b8569c6302101 Mon Sep 17 00:00:00 2001
From: Brendan Annable <brendan@annable.me>
Date: Sat, 2 Mar 2019 16:04:45 +1100
Subject: [PATCH 4/4] remove className prop

---
 src/client/components/robot_selector_single/view.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/client/components/robot_selector_single/view.tsx b/src/client/components/robot_selector_single/view.tsx
index 248733b6..173be3f1 100644
--- a/src/client/components/robot_selector_single/view.tsx
+++ b/src/client/components/robot_selector_single/view.tsx
@@ -1,4 +1,3 @@
-import * as classNames from 'classnames'
 import { computed } from 'mobx'
 import { observer } from 'mobx-react'
 import * as React from 'react'
@@ -11,7 +10,6 @@ import RobotIcon from './robot.svg'
 import * as style from './style.css'
 
 export type RobotSelectorSingleProps = {
-  className?: string
   robots: RobotModel[]
   selected?: RobotModel
   dropDirection?: 'up' | 'down'
@@ -21,8 +19,8 @@ export type RobotSelectorSingleProps = {
 @observer
 export class RobotSelectorSingle extends React.Component<RobotSelectorSingleProps> {
   render() {
-    const { className, dropDirection } = this.props
-    return <div className={classNames([style.robotSelector, className])}>
+    const { dropDirection } = this.props
+    return <div className={style.robotSelector}>
       <Select
         options={this.options}
         selectedOption={this.selectedOption}