Improves timeline slice by interaction mode

 - Auto-enables show all branches when slice by branch is selected
 - Auto-switches to slice by author when show all branches is unchecked

Author: eamodio

src/webviews/apps/plus/timeline/timeline.ts

@@ -94,16 +94,12 @@ export class GlTimelineApp extends GlAppHost<State> {
 		return !this.repository?.virtual;
 	}
 
-	get isSliceByAllowed() {
-		return this.config.showAllBranches && this.isSliceBySupported;
-	}
-
 	get isSliceBySupported() {
 		return !this.repository?.virtual && (this.scope?.type === 'file' || this.scope?.type === 'folder');
 	}
 
 	get sliceBy() {
-		return this.isSliceByAllowed ? this.config.sliceBy : 'author';
+		return this.isSliceBySupported && this.config.showAllBranches ? this.config.sliceBy : 'author';
 	}
 
 	get subscription() {
@@ -465,27 +461,22 @@ export class GlTimelineApp extends GlAppHost<State> {
 	private renderConfigSliceBy() {
 		if (!this.isSliceBySupported) return nothing;
 
-		const { sliceBy, isSliceByAllowed } = this;
-
-		const template = html`<label for="sliceBy" ?disabled=${!isSliceByAllowed}>Slice By</label>
-			<select
-				class="select"
-				name="sliceBy"
-				position="below"
-				.value=${sliceBy}
-				?disabled=${!isSliceByAllowed}
-				@change=${this.onSliceByChanged}
-			>
-				<option value="author" ?selected=${sliceBy === 'author'}>Author</option>
-				<option value="branch" ?selected=${sliceBy === 'branch'}>Branch</option>
-			</select>`;
-
-		if (isSliceByAllowed) return html`<section><span class="select-container">${template}</span></section>`;
+		const { sliceBy } = this;
 
 		return html`<section>
-			<gl-tooltip style="width: 100%" content="Slicing by branches is only available when viewing all branches">
-				<span class="select-container">${template}</span>
-			</gl-tooltip>
+			<span class="select-container"
+				><label for="sliceBy">Slice By</label>
+				<select
+					class="select"
+					name="sliceBy"
+					position="below"
+					.value=${sliceBy}
+					@change=${this.onSliceByChanged}
+				>
+					<option value="author" ?selected=${sliceBy === 'author'}>Author</option>
+					<option value="branch" ?selected=${sliceBy === 'branch'}>Branch</option>
+				</select></span
+			>
 		</section>`;
 	}
 

src/webviews/plus/timeline/timelineWebview.ts

@@ -452,11 +452,19 @@ export class TimelineWebviewProvider implements WebviewProvider<State, State, Ti
 		if (changes.showAllBranches != null && changes.showAllBranches !== config.showAllBranches) {
 			changed = true;
 			config.showAllBranches = changes.showAllBranches;
+
+			if (config.sliceBy === 'branch' && !config.showAllBranches) {
+				config.sliceBy = 'author';
+			}
 		}
 
 		if (changes.sliceBy != null && changes.sliceBy !== config.sliceBy) {
 			changed = true;
 			config.sliceBy = changes.sliceBy;
+
+			if (config.sliceBy === 'branch' && !config.showAllBranches) {
+				config.showAllBranches = true;
+			}
 		}
 
 		if (changed) {