From 6676903f9ddb761b2f5e237de3be89ab0910c8c7 Mon Sep 17 00:00:00 2001
From: Katie Adee <kaa328@nyu.edu>
Date: Mon, 11 Jun 2018 18:53:35 -0400
Subject: [PATCH] feat(app): Toggle devtools feature flag in app settings
 (#1678)

Closes #1632
---
 app-shell/lib/main.js                         |  2 +-
 .../AppSettings/AdvancedSettingsCard.js       | 49 +++++++++++++++++++
 app/src/components/AppSettings/index.js       |  4 ++
 app/src/config/index.js                       | 11 +++++
 4 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 app/src/components/AppSettings/AdvancedSettingsCard.js

diff --git a/app-shell/lib/main.js b/app-shell/lib/main.js
index 1830f4c852c..117d625def0 100644
--- a/app-shell/lib/main.js
+++ b/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
diff --git a/app/src/components/AppSettings/AdvancedSettingsCard.js b/app/src/components/AppSettings/AdvancedSettingsCard.js
new file mode 100644
index 00000000000..76eb469254c
--- /dev/null
+++ b/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())
+  }
+}
diff --git a/app/src/components/AppSettings/index.js b/app/src/components/AppSettings/index.js
index 0927afb12a3..5b0e2d229ff 100644
--- a/app/src/components/AppSettings/index.js
+++ b/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>
   )
 }
diff --git a/app/src/config/index.js b/app/src/config/index.js
index 008a2e04f8e..f9be320df3e 100644
--- a/app/src/config/index.js
+++ b/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))
+  }
+}