From f681d13331613337fba25a74d855d689a96a6f1d Mon Sep 17 00:00:00 2001
From: tippl <richard.tippl@gmail.com>
Date: Thu, 12 Jul 2018 22:38:51 +0200
Subject: [PATCH] Add bar color indicator for environments (#1042)

* Add bar color indicator for environments

* Fix according to code review
---
 packages/insomnia-app/app/models/settings.js     |  6 ++++--
 .../dropdowns/environments-dropdown.js           |  6 +++++-
 .../app/ui/components/settings/general.js        | 16 ++++++++++++++++
 .../app/ui/components/sidebar/sidebar.js         |  5 ++++-
 .../insomnia-app/app/ui/components/wrapper.js    | 14 +++++++++++++-
 5 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/packages/insomnia-app/app/models/settings.js b/packages/insomnia-app/app/models/settings.js
index 9eb30af20..46d2cf9c2 100644
--- a/packages/insomnia-app/app/models/settings.js
+++ b/packages/insomnia-app/app/models/settings.js
@@ -25,7 +25,8 @@ type BaseSettings = {
   nunjucksPowerUserMode: boolean,
   deviceId: string | null,
   updateChannel: string,
-  updateAutomatically: boolean
+  updateAutomatically: boolean,
+  environmentHighlightColorStyle: string
 };
 
 export type Settings = BaseModel & BaseSettings;
@@ -58,7 +59,8 @@ export function init(): BaseSettings {
     nunjucksPowerUserMode: false,
     deviceId: null,
     updateChannel: UPDATE_CHANNEL_STABLE,
-    updateAutomatically: true
+    updateAutomatically: true,
+    environmentHighlightColorStyle: 'dot'
   };
 }
 
diff --git a/packages/insomnia-app/app/ui/components/dropdowns/environments-dropdown.js b/packages/insomnia-app/app/ui/components/dropdowns/environments-dropdown.js
index 085fca937..5724c04d2 100644
--- a/packages/insomnia-app/app/ui/components/dropdowns/environments-dropdown.js
+++ b/packages/insomnia-app/app/ui/components/dropdowns/environments-dropdown.js
@@ -21,6 +21,7 @@ type Props = {
   handleChangeEnvironment: Function,
   workspace: Workspace,
   environments: Array<Environment>,
+  environmentHighlightColorStyle: String,
 
   // Optional
   className?: string,
@@ -67,6 +68,7 @@ class EnvironmentsDropdown extends React.PureComponent<Props> {
       workspace,
       environments,
       activeEnvironment,
+      environmentHighlightColorStyle,
       ...other
     } = this.props;
 
@@ -100,7 +102,9 @@ class EnvironmentsDropdown extends React.PureComponent<Props> {
                   </Tooltip>
                 )}
               <div className="sidebar__menu__thing__text">
-                {activeEnvironment && activeEnvironment.color ? (
+                {activeEnvironment &&
+                activeEnvironment.color &&
+                environmentHighlightColorStyle === 'dot' ? (
                   <i
                     className="fa fa-circle space-right"
                     style={{ color: activeEnvironment.color }}
diff --git a/packages/insomnia-app/app/ui/components/settings/general.js b/packages/insomnia-app/app/ui/components/settings/general.js
index b535385db..a0fd8f277 100644
--- a/packages/insomnia-app/app/ui/components/settings/general.js
+++ b/packages/insomnia-app/app/ui/components/settings/general.js
@@ -144,6 +144,22 @@ class General extends React.PureComponent<Props> {
           </label>
         </div>
 
+        <div className="form-control form-control--outlined pad-top-sm">
+          <label>
+            Environment Highlight Color Style{' '}
+            <HelpTooltip>
+              Configures the appearance of environment's color indicator
+            </HelpTooltip>
+            <select
+              defaultValue={settings.environmentHighlightColorStyle}
+              name="environmentHighlightColorStyle"
+              onChange={this._handleUpdateSetting}>
+              <option value="dot">Dot</option>
+              <option value="bar">Bar</option>
+            </select>
+          </label>
+        </div>
+
         <div className="form-row">
           <div className="form-control form-control--outlined pad-top-sm">
             <label>
diff --git a/packages/insomnia-app/app/ui/components/sidebar/sidebar.js b/packages/insomnia-app/app/ui/components/sidebar/sidebar.js
index 699bf5f69..c9f55edf9 100644
--- a/packages/insomnia-app/app/ui/components/sidebar/sidebar.js
+++ b/packages/insomnia-app/app/ui/components/sidebar/sidebar.js
@@ -56,7 +56,8 @@ class Sidebar extends PureComponent {
       handleSetRequestGroupCollapsed,
       moveDoc,
       handleActivateRequest,
-      activeRequest
+      activeRequest,
+      environmentHighlightColorStyle
     } = this.props;
 
     return (
@@ -83,6 +84,7 @@ class Sidebar extends PureComponent {
             activeEnvironment={activeEnvironment}
             environments={environments}
             workspace={workspace}
+            environmentHighlightColorStyle={environmentHighlightColorStyle}
           />
           <button className="btn btn--super-compact" onClick={showCookiesModal}>
             <div className="sidebar__menu__thing">
@@ -155,6 +157,7 @@ Sidebar.propTypes = {
   workspaces: PropTypes.arrayOf(PropTypes.object).isRequired,
   unseenWorkspaces: PropTypes.arrayOf(PropTypes.object).isRequired,
   environments: PropTypes.arrayOf(PropTypes.object).isRequired,
+  environmentHighlightColorStyle: PropTypes.string.isRequired,
 
   // Optional
   filter: PropTypes.string,
diff --git a/packages/insomnia-app/app/ui/components/wrapper.js b/packages/insomnia-app/app/ui/components/wrapper.js
index e91266af4..e32f7ad5c 100644
--- a/packages/insomnia-app/app/ui/components/wrapper.js
+++ b/packages/insomnia-app/app/ui/components/wrapper.js
@@ -577,7 +577,16 @@ class Wrapper extends React.PureComponent<Props, State> {
         className={classnames('wrapper', {
           'wrapper--vertical': settings.forceVerticalLayout
         })}
-        style={{ gridTemplateColumns: columns, gridTemplateRows: rows }}>
+        style={{
+          gridTemplateColumns: columns,
+          gridTemplateRows: rows,
+          borderTop:
+            activeEnvironment &&
+            activeEnvironment.color &&
+            settings.environmentHighlightColorStyle === 'bar'
+              ? '5px solid ' + activeEnvironment.color
+              : null
+        }}>
         <ErrorBoundary showAlert>
           <Sidebar
             ref={handleSetSidebarRef}
@@ -609,6 +618,9 @@ class Wrapper extends React.PureComponent<Props, State> {
             isLoading={isLoading}
             workspaces={workspaces}
             environments={environments}
+            environmentHighlightColorStyle={
+              settings.environmentHighlightColorStyle
+            }
           />
         </ErrorBoundary>