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

@@ -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'
   };
 }
 

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 }}

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>

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,

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>