feat(app): Toggle devtools feature flag in app settings (#1678)

Closes #1632

app-shell/lib/main.js

@@ -19,7 +19,7 @@ log.debug('App config', {
 })
 
 if (config.devtools) {
-  require('electron-debug')({showDevTools: true})
+  require('electron-debug')({enabled: true, showDevTools: true})
 }
 
 // hold on to references so they don't get garbage collected

app/src/components/AppSettings/AdvancedSettingsCard.js

@@ -0,0 +1,49 @@
+// @flow
+// app info card with version and updated
+import * as React from 'react'
+import {connect} from 'react-redux'
+
+import type {State, Dispatch} from '../../types'
+import {getDevToolsOn, toggleDevTools} from '../../config'
+import {Card} from '@opentrons/components'
+import {LabeledToggle, ToggleInfo} from '../toggles'
+
+type SP = {
+  devToolsOn: boolean,
+}
+
+type DP = {
+  toggleDevTools: () => mixed
+}
+type Props = SP & DP
+
+const TITLE = 'Advanced Settings'
+
+export default connect(mapStateToProps, mapDispatchToProps)(AdvancedSettingsCard)
+
+function AdvancedSettingsCard (props: Props) {
+  return (
+    <Card title={TITLE} column>
+      <LabeledToggle
+        label='Enable Developer Tools'
+        toggledOn={props.devToolsOn}
+        onClick={props.toggleDevTools}
+      />
+      <ToggleInfo>
+        <p>Requires restart. Turns on the app&#39;s developer tools, which provide access to the inner workings of the app and additional logging.</p>
+      </ToggleInfo>
+    </Card>
+  )
+}
+
+function mapStateToProps (state: State): SP {
+  return {
+    devToolsOn: getDevToolsOn(state)
+  }
+}
+
+function mapDispatchToProps (dispatch: Dispatch) {
+  return {
+    toggleDevTools: () => dispatch(toggleDevTools())
+  }
+}

app/src/components/AppSettings/index.js

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import type {ShellUpdate} from '../../shell'
 import {AnalyticsSettingsCard} from '../analytics-settings'
+import AdvancedSettingsCard from './AdvancedSettingsCard'
 import AppInfoCard from './AppInfoCard'
 import AppUpdateModal from './AppUpdateModal'
 
@@ -22,6 +23,9 @@ export default function AppSettings (props: Props) {
       <div className={styles.row}>
         <AnalyticsSettingsCard {...props} />
       </div>
+      <div className={styles.row}>
+        <AdvancedSettingsCard />
+      </div>
     </div>
   )
 }

app/src/config/index.js

@@ -85,3 +85,14 @@ export function configReducer (
 export function getConfig (state: State): Config {
   return state.config
 }
+
+export function getDevToolsOn (state: State): boolean {
+  return state.config.devtools
+}
+
+export function toggleDevTools (): Action {
+  return (dispatch, getState) => {
+    const devToolsOn = getDevToolsOn(getState())
+    return dispatch(updateConfig('devtools', !devToolsOn))
+  }
+}