Allow hiding the "Compare" tab

Closes #98

Author: pol-rivero

app/src/lib/app-state.ts

@@ -320,6 +320,9 @@ export interface IAppState {
   /** Whether or not the worktrees dropdown should be shown in the toolbar */
   readonly showWorktrees: boolean
 
+  /** Whether or not the Compare tab should be shown in the repository view */
+  readonly showCompareTab: boolean
+
   /**
    * A map keyed on a user account (GitHub.com or GitHub Enterprise)
    * containing an object with repositories that the authenticated

app/src/lib/stores/app-store.ts

@@ -467,6 +467,8 @@ const shellKey = 'shell'
 
 const showRecentRepositoriesKey = 'show-recent-repositories'
 const showWorktreesKey = 'show-worktrees'
+const showCompareTabKey = 'show-compare-tab'
+const showCompareTabDefault = true
 const repositoryIndicatorsEnabledKey = 'enable-repository-indicators'
 
 // background fetching should occur hourly when Desktop is active, but this
@@ -634,6 +636,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
   private titleBarStyle: TitleBarStyle = 'native'
   private showRecentRepositories: boolean = true
   private showWorktrees: boolean = false
+  private showCompareTab: boolean = showCompareTabDefault
   private hideWindowOnQuit: boolean = __DARWIN__
 
   private useWindowsOpenSSH: boolean = false
@@ -751,6 +754,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
 
     this.showRecentRepositories = getBoolean(showRecentRepositoriesKey) ?? true
     this.showWorktrees = getBoolean(showWorktreesKey) ?? false
+    this.showCompareTab = getBoolean(showCompareTabKey, showCompareTabDefault)
 
     this.repositoryIndicatorUpdater = new RepositoryIndicatorUpdater(
       this.getRepositoriesForIndicatorRefresh,
@@ -1203,6 +1207,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
       titleBarStyle: this.titleBarStyle,
       showRecentRepositories: this.showRecentRepositories,
       showWorktrees: this.showWorktrees,
+      showCompareTab: this.showCompareTab,
       apiRepositories: this.apiRepositoriesStore.getState(),
       useWindowsOpenSSH: this.useWindowsOpenSSH,
       showCommitLengthWarning: this.showCommitLengthWarning,
@@ -4177,6 +4182,25 @@ export class AppStore extends TypedBaseStore<IAppState> {
     this.emitUpdate()
   }
 
+  public _setShowCompareTab(showCompareTab: boolean) {
+    if (this.showCompareTab === showCompareTab) {
+      return
+    }
+    setBoolean(showCompareTabKey, showCompareTab)
+    this.showCompareTab = showCompareTab
+    if (!showCompareTab) {
+      for (const repository of this.repositories) {
+        const state = this.repositoryStateCache.get(repository)
+        if (state.selectedSection === RepositorySectionTab.Compare) {
+          this.repositoryStateCache.update(repository, () => ({
+            selectedSection: RepositorySectionTab.History,
+          }))
+        }
+      }
+    }
+    this.emitUpdate()
+  }
+
   public _setCommitSpellcheckEnabled(commitSpellcheckEnabled: boolean) {
     if (this.commitSpellcheckEnabled === commitSpellcheckEnabled) {
       return

app/src/ui/app.tsx

@@ -1680,6 +1680,7 @@ export class App extends React.Component<IAppProps, IAppState> {
             titleBarStyle={this.state.titleBarStyle}
             showRecentRepositories={this.state.showRecentRepositories}
             showWorktrees={this.state.showWorktrees}
+            showCompareTab={this.state.showCompareTab}
             repositoryIndicatorsEnabled={this.state.repositoryIndicatorsEnabled}
             hideWindowOnQuit={this.state.hideWindowOnQuit}
             onEditGlobalGitConfig={this.editGlobalGitConfig}
@@ -3717,6 +3718,7 @@ export class App extends React.Component<IAppProps, IAppState> {
           onCherryPick={this.startCherryPickWithoutBranch}
           pullRequestSuggestedNextAction={state.pullRequestSuggestedNextAction}
           showChangesFilter={state.showChangesFilter}
+          showCompareTab={this.state.showCompareTab}
           shouldShowGenerateCommitMessageCallOut={
             !this.state.commitMessageGenerationButtonClicked
           }

app/src/ui/dispatcher/dispatcher.ts

@@ -2928,6 +2928,10 @@ export class Dispatcher {
     this.appStore._setShowWorktrees(showWorktrees)
   }
 
+  public setShowCompareTab(showCompareTab: boolean) {
+    this.appStore._setShowCompareTab(showCompareTab)
+  }
+
   public setHideWindowOnQuit(hideWindowOnQuit: boolean) {
     this.appStore._setHideWindowOnQuit(hideWindowOnQuit)
   }

app/src/ui/preferences/appearance.tsx

@@ -29,6 +29,8 @@ interface IAppearanceProps {
   readonly onShowRecentRepositoriesChanged: (show: boolean) => void
   readonly showWorktrees: boolean
   readonly onShowWorktreesChanged: (show: boolean) => void
+  readonly showCompareTab: boolean
+  readonly onShowCompareTabChanged: (show: boolean) => void
   readonly showBranchNameInRepoList: ShowBranchNameInRepoListSetting
   readonly onShowBranchNameInRepoListChanged: (
     value: ShowBranchNameInRepoListSetting
@@ -45,6 +47,7 @@ interface IAppearanceState {
   readonly titleBarStyle: TitleBarStyle
   readonly showRecentRepositories: boolean
   readonly showWorktrees: boolean
+  readonly showCompareTab: boolean
 }
 
 function getTitleBarStyleDescription(titleBarStyle: TitleBarStyle): string {
@@ -73,6 +76,7 @@ export class Appearance extends React.Component<
       titleBarStyle: props.titleBarStyle,
       showRecentRepositories: props.showRecentRepositories,
       showWorktrees: props.showWorktrees,
+      showCompareTab: props.showCompareTab,
     }
 
     if (!usePropTheme) {
@@ -124,6 +128,14 @@ export class Appearance extends React.Component<
     this.props.onShowWorktreesChanged(show)
   }
 
+  private onShowCompareTabChanged = (
+    event: React.FormEvent<HTMLInputElement>
+  ) => {
+    const show = event.currentTarget.checked
+    this.setState({ showCompareTab: show })
+    this.props.onShowCompareTabChanged(show)
+  }
+
   private onSelectedTabSizeChanged = (
     event: React.FormEvent<HTMLSelectElement>
   ) => {
@@ -340,17 +352,30 @@ export class Appearance extends React.Component<
 
   private renderWorktreeVisibility() {
     return (
-      <div className="advanced-section">
-        <h2 id="worktree-heading">{'Worktrees'}</h2>
-
-        <Checkbox
-          label="Show worktrees dropdown in toolbar"
-          value={
-            this.state.showWorktrees ? CheckboxValue.On : CheckboxValue.Off
-          }
-          onChange={this.onShowWorktreesChanged}
-        />
-      </div>
+      <>
+        <div className="advanced-section">
+          <h2 id="worktree-heading">{'Worktrees'}</h2>
+
+          <Checkbox
+            label="Show worktrees dropdown in toolbar"
+            value={
+              this.state.showWorktrees ? CheckboxValue.On : CheckboxValue.Off
+            }
+            onChange={this.onShowWorktreesChanged}
+          />
+        </div>
+        <div className="advanced-section">
+          <h2>{'Commit list'}</h2>
+
+          <Checkbox
+            label="Show Compare tab"
+            value={
+              this.state.showCompareTab ? CheckboxValue.On : CheckboxValue.Off
+            }
+            onChange={this.onShowCompareTabChanged}
+          />
+        </div>
+      </>
     )
   }
 

app/src/ui/preferences/preferences.tsx

@@ -95,6 +95,7 @@ interface IPreferencesProps {
   readonly titleBarStyle: TitleBarStyle
   readonly showRecentRepositories: boolean
   readonly showWorktrees: boolean
+  readonly showCompareTab: boolean
   readonly repositoryIndicatorsEnabled: boolean
   readonly showBranchNameInRepoList: ShowBranchNameInRepoListSetting
   readonly branchSortOrder: BranchSortOrder
@@ -141,6 +142,7 @@ interface IPreferencesState {
   readonly titleBarStyle: TitleBarStyle
   readonly showRecentRepositories: boolean
   readonly showWorktrees: boolean
+  readonly showCompareTab: boolean
   /**
    * If unable to save Git configuration values (name, email)
    * due to an existing configuration lock file this property
@@ -227,6 +229,7 @@ export class Preferences extends React.Component<
       titleBarStyle: this.props.titleBarStyle,
       showRecentRepositories: this.props.showRecentRepositories,
       showWorktrees: this.props.showWorktrees,
+      showCompareTab: this.props.showCompareTab,
       repositoryIndicatorsEnabled: this.props.repositoryIndicatorsEnabled,
       showBranchNameInRepoList: this.props.showBranchNameInRepoList,
       branchSortOrder: this.props.branchSortOrder,
@@ -564,6 +567,8 @@ export class Preferences extends React.Component<
             }
             showWorktrees={this.state.showWorktrees}
             onShowWorktreesChanged={this.onShowWorktreesChanged}
+            showCompareTab={this.state.showCompareTab}
+            onShowCompareTabChanged={this.onShowCompareTabChanged}
             showBranchNameInRepoList={this.state.showBranchNameInRepoList}
             onShowBranchNameInRepoListChanged={
               this.onShowBranchNameInRepoListChanged
@@ -851,6 +856,10 @@ export class Preferences extends React.Component<
     this.setState({ showWorktrees })
   }
 
+  private onShowCompareTabChanged = (showCompareTab: boolean) => {
+    this.setState({ showCompareTab })
+  }
+
   private renderFooter() {
     const hasDisabledError = this.state.disallowedCharactersMessage != null
 
@@ -917,6 +926,10 @@ export class Preferences extends React.Component<
         dispatcher.setShowWorktrees(this.state.showWorktrees)
       }
 
+      if (this.state.showCompareTab !== this.props.showCompareTab) {
+        dispatcher.setShowCompareTab(this.state.showCompareTab)
+      }
+
       if (this.state.hideWindowOnQuit !== this.props.hideWindowOnQuit) {
         dispatcher.setHideWindowOnQuit(this.state.hideWindowOnQuit)
       }

app/src/ui/repository.tsx

@@ -125,6 +125,9 @@ interface IRepositoryViewProps {
   /** Whether or not to show the changes filter */
   readonly showChangesFilter: boolean
 
+  /** Whether or not to show the Compare tab */
+  readonly showCompareTab: boolean
+
   /**
    * Whether there are any hooks in the repository that could be
    * skipped during commit with the --no-verify flag
@@ -248,9 +251,11 @@ export class RepositoryView extends React.Component<
           <span>History</span>
         </div>
 
-        <div className="with-indicator" id="compare-tab">
-          <span>Compare</span>
-        </div>
+        {this.props.showCompareTab && (
+          <div className="with-indicator" id="compare-tab">
+            <span>Compare</span>
+          </div>
+        )}
       </TabBar>
     )
   }