feat(app): Enable new connectivity card

app/src/components/RobotSettings/ConnectionCard.js

@@ -2,10 +2,8 @@
 // RobotSettings card for wifi status
 import * as React from 'react'
 import {connect} from 'react-redux'
-import {getIn} from '@thi.ng/paths'
 import find from 'lodash/find'
 
-import {getConfig} from '../../config'
 import {makeGetRobotNetworkingStatus} from '../../http-api-client'
 import {Card} from '@opentrons/components'
 import SelectNetwork from './SelectNetwork'
@@ -18,23 +16,17 @@ import type {InternetStatus, NetworkInterface} from '../../http-api-client'
 type OP = {robot: ViewableRobot}
 
 type SP = {|
-  __featureEnabled: boolean,
   internetStatus: ?InternetStatus,
   wifiNetwork: ?NetworkInterface,
   ethernetNetwork: ?NetworkInterface,
 |}
 
 type Props = {...$Exact<OP>, ...SP}
 
-const __FEATURE_FLAG = 'devInternal.manageRobotConnection.newCard'
-
 export default connect(makeMapStateToProps)(ConnectionCard)
 
 const TITLE = 'Connectivity'
 function ConnectionCard (props: Props) {
-  // TODO(mc, 2018-10-15): remove feature flag
-  if (!props.__featureEnabled) return null
-
   const {robot, internetStatus, wifiNetwork, ethernetNetwork} = props
 
   return (
@@ -64,7 +56,6 @@ function makeMapStateToProps (): (State, OP) => SP {
       internetStatus,
       wifiNetwork: find(interfaces, {type: 'wifi'}),
       ethernetNetwork: find(interfaces, {type: 'ethernet'}),
-      __featureEnabled: !!getIn(getConfig(state), __FEATURE_FLAG),
     }
   }
 }

app/src/components/RobotSettings/connection.js

@@ -1,7 +1,7 @@
 // @flow
 // UI components for displaying connection info
 import * as React from 'react'
-import Select from 'react-select'
+import Select, {components} from 'react-select'
 import find from 'lodash/find'
 import {Icon} from '@opentrons/components'
 import {CardContentHalf} from '../layout'
@@ -88,13 +88,66 @@ export function NetworkDropdown (props: NetworkDropdownProps) {
   const options = list.map(NetworkOption)
   const selectedOption = find(options, {value})
 
+  const selectStyles = {
+    option: (base, state) => ({
+      ...base,
+      padding: '0.25rem 0',
+    }),
+    input: () => ({
+      marginTop: '-0.25rem',
+      marginLeft: 0,
+    }),
+    container: base => ({
+      ...base,
+      backgroundColor: 'transparent',
+      height: '2rem',
+      overflow: 'visible',
+    }),
+    control: () => ({
+      backgroundColor: '#e5e2e2',
+      border: 'none',
+      padding: '0.25rem 0rem',
+      outline: 'none',
+      borderRadius: '3px',
+      height: '1.75rem',
+      boxShadow: 'none',
+    }),
+    indicatorSeparator: () => ({
+      display: 'none',
+    }),
+  }
+
+  // Custom dropdown indicator icon component needed to match comp lib
+  const DropdownIndicator = props => {
+    return (
+      components.DropdownIndicator && (
+        <components.DropdownIndicator {...props}>
+          <div className={styles.dropdown_icon}>
+            <Icon name="menu-down" width="100%" />
+          </div>
+        </components.DropdownIndicator>
+      )
+    )
+  }
+
+  // custom Menu (options dropwdown) component
+  const Menu = props => {
+    return (
+      <components.Menu {...props}>
+        <div className={styles.options_menu}>{props.children}</div>
+      </components.Menu>
+    )
+  }
+
   return (
     <Select
       className={styles.wifi_dropdown}
       isDisabled={disabled}
       value={selectedOption}
       onChange={onChange}
       options={options}
+      styles={selectStyles}
+      components={{DropdownIndicator, Menu}}
     />
   )
 }

app/src/components/RobotSettings/index.js

@@ -2,12 +2,11 @@
 // robot status panel with connect button
 import * as React from 'react'
 
-import {CardContainer, CardRow, CardColumn} from '../layout'
+import {CardContainer, CardRow} from '../layout'
 import StatusCard from './StatusCard'
 import InformationCard from './InformationCard'
 import ControlsCard from './ControlsCard'
 import ConnectionCard from './ConnectionCard'
-import ConnectivityCard from './ConnectivityCard'
 import AdvancedSettingsCard from './AdvancedSettingsCard'
 import ConnectAlertModal from './ConnectAlertModal'
 import RobotUpdateModal from './RobotUpdateModal'
@@ -38,11 +37,6 @@ export default function RobotSettings (props: Props) {
       <CardRow>
         <ConnectionCard robot={robot} />
       </CardRow>
-      <CardRow>
-        <CardColumn>
-          <ConnectivityCard robot={robot} />
-        </CardColumn>
-      </CardRow>
       <CardRow>
         <AdvancedSettingsCard robot={robot} resetUrl={resetUrl} />
       </CardRow>

app/src/components/RobotSettings/styles.css

@@ -61,10 +61,19 @@
 /* TODO(mc, 2018-10-15): switch wifi select/options to flex ASAP */
 .wifi_dropdown {
   max-width: 75%;
+
+  /* TODO(ka, 2018-10-19): This is needed to address an inaccessible positioning element from react-select */
+  & > div:not(:first-child) {
+    box-shadow: none;
+    background-color: transparent;
+  }
 }
 
 .wifi_option {
   @apply --font-body-1-dark;
+
+  width: 100%;
+  padding: 0.25rem 0.5rem;
 }
 
 .wifi_option_icon,
@@ -85,6 +94,26 @@
   padding-left: 0.25rem;
 }
 
+.dropdown_icon {
+  position: absolute;
+  top: 0.2rem;
+  right: 0.25rem;
+  width: 1.25rem;
+  pointer-events: none;
+
+  & svg {
+    color: var(--c-dark-gray);
+  }
+}
+
+.options_menu {
+  background-color: var(--c-light-gray);
+  position: relative;
+  top: -2.5rem;
+  border-radius: 3px;
+  padding: 0.25rem 0 0.5rem;
+}
+
 .connection_label {
   @apply --font-body-1-dark;
 

app/src/config/index.js

@@ -56,13 +56,6 @@ export type Config = {
   discovery: {
     candidates: string | Array<string>,
   },
-
-  // internal development flags
-  devInternal?: {
-    manageRobotConnection?: {
-      newConnectivityCard?: boolean,
-    },
-  },
 }
 
 type UpdateConfigAction = {|