fixes "Hide menu bar" setting (#3961)

Co-authored-by: Opender Singh <opender94@gmail.com>
Co-authored-by: James Gatz <jamesgatzos@gmail.com>

packages/insomnia-app/app/common/electron-helpers.ts

@@ -59,3 +59,16 @@ export function restartApp() {
   app.relaunch();
   app.exit();
 }
+
+export const setMenuBarVisibility = (visible: boolean) => {
+  const { BrowserWindow } = electron.remote || electron;
+  BrowserWindow.getAllWindows()
+    .forEach(window => {
+      // the `setMenuBarVisibility` signature uses `visible` semantics
+      window.setMenuBarVisibility(visible);
+
+      // the `setAutoHideMenu` signature uses `hide` semantics
+      const hide = !visible;
+      window.setAutoHideMenuBar(hide);
+    });
+};

packages/insomnia-app/app/models/request.ts

@@ -73,7 +73,7 @@ export interface RequestBody {
   params?: RequestBodyParameter[];
 }
 
-interface BaseRequest {
+export interface BaseRequest {
   url: string;
   name: string;
   description: string;

packages/insomnia-app/app/models/settings.ts

@@ -16,7 +16,7 @@ export interface PluginConfig {
 
 export type PluginConfigMap = Record<string, PluginConfig>;
 
-interface BaseSettings {
+export interface BaseSettings {
   autoHideMenuBar: boolean;
   autocompleteDelay: number;
   deviceId: string | null;

packages/insomnia-app/app/ui/components/modals/request-settings-modal.tsx

@@ -7,7 +7,7 @@ import { HandleGetRenderContext, HandleRender } from '../../../common/render';
 import * as models from '../../../models';
 import { GrpcRequest, isGrpcRequest } from '../../../models/grpc-request';
 import * as requestOperations from '../../../models/helpers/request-operations';
-import type { Request } from '../../../models/request';
+import type { BaseRequest, Request } from '../../../models/request';
 import { isWorkspace, Workspace } from '../../../models/workspace';
 import DebouncedInput from '../base/debounced-input';
 import Modal from '../base/modal';
@@ -232,7 +232,7 @@ class RequestSettingsModal extends PureComponent<Props, State> {
     this.modal?.hide();
   }
 
-  renderCheckboxInput(setting: string) {
+  renderCheckboxInput(setting: keyof BaseRequest) {
     const { request } = this.state;
 
     if (!request) {

packages/insomnia-app/app/ui/components/settings/boolean-setting.tsx

@@ -0,0 +1,53 @@
+import React, { ChangeEvent, FC, useCallback } from 'react';
+import { useSelector } from 'react-redux';
+
+import * as models from '../../../models/index';
+import { BaseSettings } from '../../../models/settings';
+import { selectSettings } from '../../redux/selectors';
+import HelpTooltip from '../help-tooltip';
+import Tooltip from '../tooltip';
+
+export const BooleanSetting: FC<{
+  label: string;
+  setting: keyof BaseSettings;
+  help?: string;
+  forceRestart?: boolean;
+}> = ({
+  label,
+  setting,
+  help,
+  forceRestart,
+}) => {
+  const settings = useSelector(selectSettings);
+
+  if (!settings.hasOwnProperty(setting)) {
+    throw new Error(`Invalid boolean setting name ${setting}`);
+  }
+
+  const onChange = useCallback(async (event: ChangeEvent<HTMLInputElement>) => {
+    const { checked } = event.currentTarget;
+    await models.settings.patch({
+      [setting]: checked,
+    });
+  }, [setting]);
+
+  return (
+    <div className="form-control form-control--thin">
+      <label className="inline-block">
+        {label}
+        {help && <HelpTooltip className="space-left">{help}</HelpTooltip>}
+        {forceRestart && (
+          <Tooltip message="Will restart the app" className="space-left">
+            <i className="fa fa-refresh super-duper-faint" />
+          </Tooltip>
+        )}
+        <input
+          checked={Boolean(settings[setting])}
+          name={setting}
+          onChange={onChange}
+          type="checkbox"
+        />
+      </label>
+    </div>
+  );
+};

packages/insomnia-app/app/ui/components/settings/general.tsx

@@ -34,7 +34,7 @@ import * as globalActions from '../../redux/modules/global';
 import Link from '../base/link';
 import CheckForUpdatesButton from '../check-for-updates-button';
 import HelpTooltip from '../help-tooltip';
-import Tooltip from '../tooltip';
+import { BooleanSetting } from './boolean-setting';
 
 // Font family regex to match certain monospace fonts that don't get
 // recognized as monospace
@@ -109,11 +109,6 @@ class General extends PureComponent<Props, State> {
     restartApp();
   }
 
-  async _handleFontSizeChange(el: React.SyntheticEvent<HTMLInputElement>) {
-    const settings = await this._handleUpdateSetting(el);
-    setFont(settings);
-  }
-
   async _handleFontChange(el: React.SyntheticEvent<HTMLInputElement>) {
     const settings = await this._handleUpdateSetting(el);
     setFont(settings);
@@ -158,30 +153,6 @@ class General extends PureComponent<Props, State> {
     );
   }
 
-  renderBooleanSetting(label: string, name: string, help?: string, forceRestart?: boolean) {
-    const { settings } = this.props;
-
-    if (!settings.hasOwnProperty(name)) {
-      throw new Error(`Invalid boolean setting name ${name}`);
-    }
-
-    const onChange = forceRestart ? this._handleUpdateSettingAndRestart : this._handleUpdateSetting;
-    return (
-      <div className="form-control form-control--thin">
-        <label className="inline-block">
-          {label}
-          {help && <HelpTooltip className="space-left">{help}</HelpTooltip>}
-          {forceRestart && (
-            <Tooltip message="Will restart app" className="space-left">
-              <i className="fa fa-refresh super-duper-faint" />
-            </Tooltip>
-          )}
-          <input type="checkbox" name={name} checked={settings[name]} onChange={onChange} />
-        </label>
-      </div>
-    );
-  }
-
   renderTextSetting(label: string, name: string, help: string, props: Record<string, any>) {
     const { settings } = this.props;
 
@@ -217,17 +188,31 @@ class General extends PureComponent<Props, State> {
       <div className="pad-bottom">
         <div className="row-fill row-fill--top">
           <div>
-            {this.renderBooleanSetting('Use bulk header editor', 'useBulkHeaderEditor', '')}
-            {this.renderBooleanSetting(
-              'Vertical request/response layout',
-              'forceVerticalLayout',
-              '',
-            )}
+            <BooleanSetting
+              label="Use bulk header editor"
+              setting="useBulkHeaderEditor"
+            />
+            <BooleanSetting
+              label="Vertical request/response layout"
+              setting="forceVerticalLayout"
+            />
           </div>
           <div>
-            {this.renderBooleanSetting('Reveal passwords', 'showPasswords', '')}
-            {!isMac() && this.renderBooleanSetting('Hide menu bar', 'autoHideMenuBar', '', true)}
-            {this.renderBooleanSetting('Raw template syntax', 'nunjucksPowerUserMode', '', true)}
+            <BooleanSetting
+              label="Reveal passwords"
+              setting="showPasswords"
+            />
+            {!isMac() && (
+              <BooleanSetting
+                label="Hide menu bar"
+                setting="autoHideMenuBar"
+              />
+            )}
+            <BooleanSetting
+              label="Raw template syntax"
+              setting="nunjucksPowerUserMode"
+              forceRestart
+            />
           </div>
         </div>
         <div className="row-fill row-fill--top pad-top-sm">
@@ -266,10 +251,19 @@ class General extends PureComponent<Props, State> {
 
         <div className="row-fill row-fill--top">
           <div>
-            {this.renderBooleanSetting('Indent with tabs', 'editorIndentWithTabs', '')}
-            {this.renderBooleanSetting('Wrap text editor lines', 'editorLineWrapping', '')}
+            <BooleanSetting
+              label="Indent with tabs"
+              setting="editorIndentWithTabs"
+            />
+            <BooleanSetting
+              label="Wrap text editor lines"
+              setting="editorLineWrapping"
+            />
           </div>
-          <div>{this.renderBooleanSetting('Font ligatures', 'fontVariantLigatures', '')}</div>
+          <div><BooleanSetting
+            label="Font ligatures"
+            setting="fontVariantLigatures"
+          /></div>
         </div>
 
         <div className="form-row pad-top-sm">
@@ -300,7 +294,7 @@ class General extends PureComponent<Props, State> {
           {this.renderNumberSetting('Interface Font Size (px)', 'fontSize', '', {
             min: MIN_INTERFACE_FONT_SIZE,
             max: MAX_INTERFACE_FONT_SIZE,
-            onBlur: this._handleFontSizeChange,
+            onBlur: this._handleFontChange,
           })}
         </div>
 
@@ -371,23 +365,29 @@ class General extends PureComponent<Props, State> {
 
         <div className="row-fill row-fill--top">
           <div>
-            {this.renderBooleanSetting('Validate certificates', 'validateSSL', '')}
-            {this.renderBooleanSetting('Follow redirects', 'followRedirects', '')}
-            {this.renderBooleanSetting(
-              'Filter responses by environment',
-              'filterResponsesByEnv',
-              'Only show responses that were sent under the currently-active environment. This ' +
-              'adds additional separation when working with Development, Staging, Production ' +
-              'environments, for example.',
-            )}
+            <BooleanSetting
+              label="Validate certificates"
+              setting="validateSSL"
+            />
+            <BooleanSetting
+              label="Follow redirects"
+              setting="followRedirects"
+            />
+            <BooleanSetting
+              label="Filter responses by environment"
+              setting="filterResponsesByEnv"
+              help="Only show responses that were sent under the currently-active environment. This adds additional separation when working with Development, Staging, Production environments, for example."
+            />
           </div>
           <div>
-            {this.renderBooleanSetting('Disable JS in HTML preview', 'disableHtmlPreviewJs', '')}
-            {this.renderBooleanSetting(
-              'Disable Links in response viewer',
-              'disableResponsePreviewLinks',
-              '',
-            )}
+            <BooleanSetting
+              label="Disable JS in HTML preview"
+              setting="disableHtmlPreviewJs"
+            />
+            <BooleanSetting
+              label="Disable Links in response viewer"
+              setting="disableResponsePreviewLinks"
+            />
           </div>
         </div>
 
@@ -454,11 +454,11 @@ class General extends PureComponent<Props, State> {
 
         <h2>Security</h2>
         <div className="form-row pad-top-sm">
-          {this.renderBooleanSetting(
-            'Clear OAuth 2 session on start',
-            'clearOAuth2SessionOnRestart',
-            'Clears the session of the OAuth2 popup window every time Insomnia is launched',
-          )}
+          <BooleanSetting
+            label="Clear OAuth 2 session on start"
+            setting="clearOAuth2SessionOnRestart"
+            help="Clears the session of the OAuth2 popup window every time Insomnia is launched"
+          />
           <button
             className="btn btn--clicky pointer"
             style={{
@@ -486,7 +486,10 @@ class General extends PureComponent<Props, State> {
           </HelpTooltip>
         </h2>
 
-        {this.renderBooleanSetting('Enable proxy', 'proxyEnabled', '')}
+        <BooleanSetting
+          label="Enable proxy"
+          setting="proxyEnabled"
+        />
 
         <div className="form-row pad-top-sm">
           {this.renderTextSetting('HTTP Proxy', 'httpProxy', '', {
@@ -519,11 +522,11 @@ class General extends PureComponent<Props, State> {
               </div>
               <h2>Software Updates</h2>
             </div>
-            {this.renderBooleanSetting(
-              'Automatically download and install updates',
-              'updateAutomatically',
-              'If disabled, you will receive a notification when a new update is available',
-            )}
+            <BooleanSetting
+              label="Automatically download and install updates"
+              setting="updateAutomatically"
+              help="If disabled, you will receive a notification when a new update is available"
+            />
             <div className="form-control form-control--outlined pad-top-sm">
               <label>
                 Update Channel
@@ -545,11 +548,10 @@ class General extends PureComponent<Props, State> {
           <Fragment>
             <hr className="pad-top" />
             <h2>Software Updates</h2>
-            {this.renderBooleanSetting(
-              'Do not notify of new releases',
-              'disableUpdateNotification',
-              '',
-            )}
+            <BooleanSetting
+              label="Do not notify of new releases"
+              setting="disableUpdateNotification"
+            />
           </Fragment>
         )}
 
@@ -570,15 +572,10 @@ class General extends PureComponent<Props, State> {
         <hr className="pad-top" />
         <h2>Data Sharing</h2>
         <div className="form-control form-control--thin">
-          <label className="inline-block">
-            Send Usage Statistics{' '}
-            <input
-              type="checkbox"
-              name="enableAnalytics"
-              checked={!!settings.enableAnalytics}
-              onChange={this._handleUpdateSetting}
-            />
-          </label>
+          <BooleanSetting
+            label="Send Usage Statistics"
+            setting="enableAnalytics"
+          />
           <p className="txt-sm faint">
             Help Kong improve its products by sending anonymous data about features and plugins
             used, hardware and software configuration, statistics on number of requests,{' '}
@@ -604,16 +601,22 @@ class General extends PureComponent<Props, State> {
             <hr className="pad-top" />
             <h2>Development</h2>
             <div className="form-row pad-top-sm">
-              {this.renderBooleanSetting(
-                'Has been prompted to migrate from Insomnia Designer',
-                'hasPromptedToMigrateFromDesigner',
-              )}
+              <BooleanSetting
+                label="Has been prompted to migrate from Insomnia Designer"
+                setting="hasPromptedToMigrateFromDesigner"
+              />
             </div>
             <div className="form-row pad-top-sm">
-              {this.renderBooleanSetting('Has seen onboarding experience', 'hasPromptedOnboarding')}
+              <BooleanSetting
+                label="Has seen onboarding experience"
+                setting="hasPromptedOnboarding"
+              />
             </div>
             <div className="form-row pad-top-sm">
-              {this.renderBooleanSetting('Has seen analytics prompt', 'hasPromptedAnalytics')}
+              <BooleanSetting
+                label="Has seen analytics prompt"
+                setting="hasPromptedAnalytics"
+              />
             </div>
           </>
         )}

packages/insomnia-app/app/ui/containers/app-hooks.tsx

@@ -1,9 +1,11 @@
 import { FC } from 'react';
 
+import { useMenuBarVisibility } from '../hooks/settings-hooks';
 import { useSyncMigration } from '../hooks/use-sync-migration';
 
 export const AppHooks: FC = () => {
   useSyncMigration();
+  useMenuBarVisibility();
 
   return null;
 };

packages/insomnia-app/app/ui/hooks/settings-hooks.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+import { setMenuBarVisibility } from '../../common/electron-helpers';
+import { selectSettings } from '../redux/selectors';
+
+export const useMenuBarVisibility = () => {
+  const { autoHideMenuBar } = useSelector(selectSettings);
+
+  useEffect(() => {
+    setMenuBarVisibility(!autoHideMenuBar);
+  }, [autoHideMenuBar]);
+};