Hide console tab list (#6555)

Adds capability for console tab list to hide when one or no session is
present.

Addresses: #6556 

---------

Co-authored-by: Marie Idleman <[email protected]>

Author: samclark2015

src/vs/platform/positronActionBar/browser/components/actionBarButton.tsx

@@ -39,6 +39,7 @@ export type ActionBarButtonProps = {
 	readonly maxTextWidth?: number;
 	readonly align?: 'left' | 'right';
 	readonly tooltip?: string | (() => string | undefined);
+	readonly dataTestId?: string;
 	readonly dropdownTooltip?: string | (() => string | undefined);
 	readonly checked?: boolean;
 	readonly disabled?: boolean;
@@ -92,7 +93,7 @@ export const ActionBarButton = forwardRef<
 	 */
 	const ActionBarButtonFace = () => {
 		return (
-			<div aria-hidden='true' className='action-bar-button-face'>
+			<div aria-hidden='true' className='action-bar-button-face' data-testid={props.dataTestId}>
 				{props.iconId && (
 					<div
 						className={positronClassNames(

src/vs/workbench/contrib/positronConsole/browser/components/actionBar.tsx

@@ -40,6 +40,7 @@ const kPaddingRight = 8;
  */
 interface ActionBarProps {
 	readonly reactComponentContainer: IReactComponentContainer;
+	readonly showDeleteButton?: boolean;
 }
 
 /**
@@ -61,6 +62,7 @@ const positronClearConsole = localize('positronClearConsole', "Clear console");
 const positronRestartConsole = localize('positronRestartConsole', "Restart console");
 const positronShutdownConsole = localize('positronShutdownConsole', "Shutdown console");
 const positronStartConsole = localize('positronStartConsole', "Start console");
+const positronDeleteConsole = localize('positronDeleteConsole', "Delete console");
 const positronCurrentWorkingDirectory = localize('positronCurrentWorkingDirectory', "Current Working Directory");
 
 /**
@@ -327,6 +329,14 @@ export const ActionBar = (props: ActionBarProps) => {
 			'User-requested restart from console action bar');
 	};
 
+	const deleteSessionHandler = async () => {
+		if (!positronConsoleContext.activePositronConsoleInstance) {
+			return;
+		}
+
+		await positronConsoleContext.runtimeSessionService.deleteSession(positronConsoleContext.activePositronConsoleInstance.session.sessionId);
+	};
+
 	/**
 	 * CurrentWorkingDirectoryProps interface.
 	 */
@@ -442,6 +452,17 @@ export const ActionBar = (props: ActionBarProps) => {
 							tooltip={positronRestartConsole}
 							onPressed={restartConsoleHandler}
 						/>
+						{props.showDeleteButton &&
+							<ActionBarButton
+								align='right'
+								ariaLabel={positronDeleteConsole}
+								dataTestId='trash-session'
+								disabled={!(canShutdown || canStart)}
+								iconId='trash'
+								tooltip={positronDeleteConsole}
+								onPressed={deleteSessionHandler}
+							/>
+						}
 						{multiSessionsEnabled &&
 							<>
 								<ConsoleInstanceInfoButton />

src/vs/workbench/contrib/positronConsole/browser/components/consoleCore.tsx

@@ -67,6 +67,11 @@ export const ConsoleCore = (props: ConsoleCoreProps) => {
 		// The maximum tab list width is 1/5 of the total available width
 		const MAXIMUM_CONSOLE_TAB_LIST_WIDTH = Math.trunc(props.width / 5);
 
+		if (positronConsoleContext.consoleSessionListCollapsed) {
+			setConsolePaneWidth(props.width);
+			return;
+		}
+
 		// Initialize the width for the console pane and console tab list if it hasn't been
 		if (consoleWidth === 0) {
 			setConsoleTabListWidth(MAXIMUM_CONSOLE_TAB_LIST_WIDTH)
@@ -88,7 +93,7 @@ export const ConsoleCore = (props: ConsoleCoreProps) => {
 
 		// Track the console width to accurately resize in future
 		setConsoleWidth(props.width)
-	}, [consolePaneWidth, consoleTabListWidth, consoleWidth, props.width])
+	}, [consolePaneWidth, consoleTabListWidth, consoleWidth, props.width, positronConsoleContext.consoleSessionListCollapsed])
 
 	/**
 	 * onBeginResize handler.
@@ -130,7 +135,7 @@ export const ConsoleCore = (props: ConsoleCoreProps) => {
 						<div
 							style={{ height: props.height, width: consolePaneWidth }}
 						>
-							<ActionBar {...props} />
+							<ActionBar {...props} showDeleteButton={positronConsoleContext.consoleSessionListCollapsed} />
 							<div className='console-instances-container'>
 								{positronConsoleContext.positronConsoleInstances.map(positronConsoleInstance =>
 									<ConsoleInstance
@@ -149,7 +154,7 @@ export const ConsoleCore = (props: ConsoleCoreProps) => {
 							onBeginResize={handleBeginResize}
 							onResize={handleResize}
 						/>
-						<ConsoleTabList height={props.height} width={consoleTabListWidth} />
+						{!positronConsoleContext.consoleSessionListCollapsed && <ConsoleTabList height={props.height} width={consoleTabListWidth} />}
 					</>
 					: <>
 						<ActionBar {...props} />

src/vs/workbench/contrib/positronConsole/browser/positronConsoleState.tsx

@@ -57,6 +57,8 @@ export interface PositronConsoleServices extends PositronActionBarServices {
 export interface PositronConsoleState extends PositronConsoleServices {
 	readonly positronConsoleInstances: IPositronConsoleInstance[];
 	readonly activePositronConsoleInstance?: IPositronConsoleInstance;
+
+	readonly consoleSessionListCollapsed: boolean;
 }
 
 /**
@@ -71,6 +73,7 @@ export const usePositronConsoleState = (services: PositronConsoleServices): Posi
 	const [activePositronConsoleInstance, setActivePositronConsoleInstance] = useState<IPositronConsoleInstance | undefined>(
 		services.positronConsoleService.activePositronConsoleInstance
 	);
+	const [consoleSessionListCollapsed, setConsoleSessionListCollapsed] = useState<boolean>(positronConsoleInstances.length <= 1);
 
 	// Add event handlers.
 	useEffect(() => {
@@ -104,10 +107,16 @@ export const usePositronConsoleState = (services: PositronConsoleServices): Posi
 		return () => disposableStore.dispose();
 	}, [services.positronConsoleService, services.runtimeSessionService, setActivePositronConsoleInstance]);
 
+	useEffect(() => {
+		setConsoleSessionListCollapsed(positronConsoleInstances.length <= 1);
+	}, [positronConsoleInstances]);
+
+
 	// Return the Positron console state.
 	return {
 		...services,
+		consoleSessionListCollapsed,
 		positronConsoleInstances,
-		activePositronConsoleInstance: activePositronConsoleInstance
+		activePositronConsoleInstance: activePositronConsoleInstance,
 	};
 };

test/e2e/pages/console.ts

@@ -27,6 +27,7 @@ export class Console {
 	barPowerButton: Locator;
 	barRestartButton: Locator;
 	barClearButton: Locator;
+	barTrashButton: Locator;
 	consoleRestartButton: Locator;
 	activeConsole: Locator;
 	suggestionList: Locator;
@@ -40,6 +41,7 @@ export class Console {
 		this.barPowerButton = this.code.driver.page.getByLabel('Shutdown console');
 		this.barRestartButton = this.code.driver.page.getByLabel('Restart console');
 		this.barClearButton = this.code.driver.page.getByLabel('Clear console');
+		this.barTrashButton = this.code.driver.page.getByTestId('trash-session');
 		this.consoleRestartButton = this.code.driver.page.locator(CONSOLE_RESTART_BUTTON);
 		this.activeConsole = this.code.driver.page.locator(ACTIVE_CONSOLE_INSTANCE);
 		this.suggestionList = this.code.driver.page.locator(SUGGESTION_LIST);

test/e2e/pages/sessions.ts

@@ -25,7 +25,7 @@ export class Sessions {
 	private quickPick: SessionQuickPick;
 	private trashButton: (sessionId: string) => Locator;
 	private newConsoleButton: Locator;
-	private restartButton: Locator;
+	restartButton: Locator;
 	private shutDownButton: Locator;
 	sessionTabs: Locator;
 	currentSessionTab: Locator;
@@ -211,13 +211,28 @@ export class Sessions {
 	async deleteDisconnectedSessions() {
 		await test.step('Delete all disconnected sessions', async () => {
 			const sessionIds = await this.getAllSessionIds();
+			const disconnectedSessions: string[] = [];
 
+			// Collect all disconnected session IDs
 			for (const sessionId of sessionIds) {
 				const status = await this.getStatus(sessionId);
 				if (status === 'disconnected') {
-					await this.delete(sessionId);
+					disconnectedSessions.push(sessionId);
 				}
 			}
+
+			if (disconnectedSessions.length === 0) { return; } // Nothing to delete
+
+			// Delete all but the last one
+			for (let i = 0; i < disconnectedSessions.length - 1; i++) {
+				await this.delete(disconnectedSessions[i]);
+			}
+
+			// Handle the last one separately because there is no tab list trash icon to click on
+			const { state } = await this.getMetadata();
+			if (state === 'disconnected' || state === 'exited') {
+				await this.console.barTrashButton.click();
+			}
 		});
 	}
 
@@ -385,11 +400,22 @@ export class Sessions {
 	 * Note: Sessions that are disconnected are filtered out
 	 */
 	async getActiveSessions(): Promise<QuickPickSessionInfo[]> {
-		const allSessions = await this.sessionTabs.all();
+		const allSessionTabs = await this.sessionTabs.all();
+		const metadataButtonExists = await this.metadataButton.isVisible();
+
+		if (allSessionTabs.length === 0) {
+			// No active sessions
+			if (!metadataButtonExists) { return []; }
+
+			// One session exists but the tab list is hidden
+			const { path, name, state } = await this.getMetadata();
+			return state === 'disconnected' || state === 'exited' ? [] : [{ path, name }];
+		}
 
+		// Multiple sessions are present
 		const activeSessions = (
 			await Promise.all(
-				allSessions.map(async session => {
+				allSessionTabs.map(async session => {
 					const isDisconnected = await session.locator('.codicon-positron-status-disconnected').isVisible();
 					if (isDisconnected) { return null; }
 
@@ -515,9 +541,17 @@ export class Sessions {
 					const activeSessionsFromConsole = await this.getActiveSessions();
 					expect(activeSessionsFromConsole).toHaveLength(count);
 				} else {
-					await expect(this.sessionTabs).toHaveCount(count);
+					if (count === 0) {
+						await expect(this.sessionTabs).not.toBeVisible();
+						await expect(this.metadataButton).not.toBeVisible();
+					} else if (count === 1) {
+						await expect(this.sessionTabs).not.toBeVisible();
+						await expect(this.metadataButton).toBeVisible();
+					} else {
+						await expect(this.sessionTabs).toHaveCount(count);
+					}
 				}
-			}).toPass({ timeout: 5000 });
+			}).toPass({ timeout: 45000 });
 		});
 	}
 

test/e2e/tests/sessions/sessions.test.ts

@@ -44,23 +44,18 @@ test.describe('Sessions', {
 
 		// Start Python session
 		pythonSession.id = await sessions.launch({ ...pythonSession, waitForReady: false });
+		rSession.id = await sessions.launch({ ...rSession, waitForReady: false });
 
-		// Verify Python session is visible and transitions from active --> idle
-		await sessions.expectStatusToBe(pythonSession.id, 'active');
+		// Verify R session transitions from active --> idle while Python session remains idle
+		await sessions.expectStatusToBe(rSession.id, 'active');
+		await sessions.expectStatusToBe(rSession.id, 'idle');
 		await sessions.expectStatusToBe(pythonSession.id, 'idle');
 
-		// Restart Python session and confirm state returns to active --> idle
+		// Restart Python session, verify Python transitions to active --> idle and R remains idle
 		await sessions.restart(pythonSession.id, false);
 		await sessions.expectStatusToBe(pythonSession.id, 'active');
 		await sessions.expectStatusToBe(pythonSession.id, 'idle');
-
-		// Start R session
-		rSession.id = await sessions.launch({ ...rSession, waitForReady: false });
-
-		// Verify R session transitions from active --> idle while Python session remains idle
-		await sessions.expectStatusToBe(rSession.id, 'active');
 		await sessions.expectStatusToBe(rSession.id, 'idle');
-		await sessions.expectStatusToBe(pythonSession.id, 'idle');
 
 		// Shutdown Python session, verify Python transitions to disconnected while R remains idle
 		await sessions.select(pythonSession.id);
@@ -201,14 +196,15 @@ test.describe('Sessions', {
 		await sessions.expectSessionListsToMatch();
 
 		// Restart Python session and verify active sessions
-		await sessions.restart(pythonSession.name);
-		await sessions.expectSessionCountToBe(1, 'active');
+		await console.barClearButton.click();
+		await sessions.restartButton.click();
 		await sessions.expectSessionListsToMatch();
 	});
 
 	test('Validate can delete sessions', async function ({ app }) {
 		const sessions = app.workbench.sessions;
 		const variables = app.workbench.variables;
+		const console = app.workbench.console;
 
 		// Ensure sessions exist and are idle
 		await sessions.reuseSessionIfExists(pythonSession);
@@ -221,7 +217,7 @@ test.describe('Sessions', {
 		await variables.expectRuntimeToBe(rSession.name);
 
 		// Delete 2nd session and verify no active sessions or runtime in session picker
-		await sessions.delete(rSession.name);
+		await console.barTrashButton.click();
 		await expect(sessions.startSessionButton).toHaveText('Start Session');
 		await sessions.expectSessionCountToBe(0);
 		await sessions.expectSessionListsToMatch();

test/e2e/tests/top-action-bar/session-button.test.ts

@@ -3,6 +3,7 @@
  *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { expect } from '@playwright/test';
 import { SessionInfo } from '../../infra';
 import { test, tags } from '../_test.setup';
 
@@ -30,14 +31,20 @@ test.describe('Top Action Bar: Session Button', {
 	});
 
 	test('Python - Verify session starts and displays as running', async function ({ app }) {
-		pythonSession.id = await app.workbench.sessions.launch({ ...pythonSession, triggerMode: 'session-picker' });
-		await app.workbench.sessions.expectSessionPickerToBe(pythonSession);
-		await app.workbench.sessions.expectStatusToBe(pythonSession.id, 'idle');
+		const sessions = app.workbench.sessions;
+
+		pythonSession.id = await sessions.launch({ ...pythonSession, triggerMode: 'session-picker' });
+		await sessions.expectSessionPickerToBe(pythonSession);
+		const { state } = await sessions.getMetadata();
+		expect(state).toBe('idle');
 	});
 
 	test('R - Verify session starts and displays as running', async function ({ app }) {
-		rSession.id = await app.workbench.sessions.launch({ ...rSession, triggerMode: 'session-picker' });
-		await app.workbench.sessions.expectSessionPickerToBe(rSession);
-		await app.workbench.sessions.expectStatusToBe(rSession.id, 'idle');
+		const sessions = app.workbench.sessions;
+
+		rSession.id = await sessions.launch({ ...rSession, triggerMode: 'session-picker' });
+		await sessions.expectSessionPickerToBe(rSession);
+		const { state } = await sessions.getMetadata();
+		expect(state).toBe('idle');
 	});
 });