Reworked and consolidated Data Explorer closed UI (#3549)

posit-dev · Jun 15, 2024 · c0df135 · c0df135
1 parent f54c736
commit c0df135
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 142 deletions.
diff --git a/...or/browser/positronDataExplorerClosed.css → ...orerClosed/positronDataExplorerClosed.css b/...or/browser/positronDataExplorerClosed.css → ...orerClosed/positronDataExplorerClosed.css
@@ -5,9 +5,9 @@
 .positron-data-explorer-closed {
 	top: 0;
 	left: 0;
-	right: 0;
-	bottom: 0;
 	z-index: 30;
+	width: 100%;
+	height: 100%;
 	display: grid;
 	position: absolute;
 	background-color: transparent;
@@ -20,10 +20,11 @@
 	color: white;
 	display: flex;
 	row-gap: 10px;
-	font-size: 16px;
+	font-size: 14px;
 	cursor: pointer;
 	padding: 25px 50px;
 	border-radius: 6px;
+	text-align: center;
 	flex-direction: column;
 	grid-row: message / bottom-gutter;
 	grid-column: message / right-gutter;
@@ -34,7 +35,31 @@
 }
 
 .positron-data-explorer-closed
-.message
-.message-line {
-	text-align: center;
+.close-button {
+	display: flex;
+	font-size: 14px;
+	cursor: pointer;
+	padding: 8px 16px;
+	border-radius: 5px;
+	align-items: center;
+	justify-content: center;
+	border: 1px solid var(--vscode-positronModalDialog-buttonBorder);
+	color: var(--vscode-positronModalDialog-defaultButtonForeground);
+	background: var(--vscode-positronModalDialog-defaultButtonBackground);
+}
+
+.positron-data-explorer-closed
+.close-button:hover {
+	background: var(--vscode-positronModalDialog-defaultButtonHoverBackground);
+}
+
+.positron-data-explorer-closed
+.close-button:focus {
+	outline: none;
+}
+
+.positron-data-explorer-closed
+.close-button:focus-visible {
+	outline-offset: 2px;
+	outline: 1px solid var(--vscode-focusBorder);
 }
diff --git a/...or/browser/positronDataExplorerClosed.tsx → ...orerClosed/positronDataExplorerClosed.tsx b/...or/browser/positronDataExplorerClosed.tsx → ...orerClosed/positronDataExplorerClosed.tsx
@@ -11,14 +11,12 @@ import { PropsWithChildren } from 'react'; // eslint-disable-line no-duplicate-i
 
 // Other dependencies.
 import { localize } from 'vs/nls';
-import { PositronButton } from 'vs/base/browser/ui/positronComponents/button/positronButton';
+import { Button } from 'vs/base/browser/ui/positronComponents/button/button';
 
 /**
  * PositronDataExplorerClosedProps interface.
  */
 export interface PositronDataExplorerClosedProps {
-	languageName?: string;
-	displayName?: string;
 	onClose: () => void;
 }
 
@@ -28,38 +26,30 @@ export interface PositronDataExplorerClosedProps {
  * @returns The rendered component.
  */
 export const PositronDataExplorerClosed = (props: PropsWithChildren<PositronDataExplorerClosedProps>) => {
+	// Constants.
+	const closeDataExplorer = localize(
+		'positron.dataExplorerEditor.closeDataExplorer',
+		"Close Data Explorer"
+	);
+
 	// Render.
 	return (
 		<div className='positron-data-explorer-closed'>
-			<PositronButton className='message' onPressed={props.onClose}>
-				{props.languageName && props.displayName && (
-					<>
-						<div
-							className='message-line'>
-							{(() => localize(
-								'positron.dataExplorerEditor.dataDisplayName',
-								'{0} Data: {1}',
-								props.languageName,
-								props.displayName
-							))()}
-						</div>
-						<div
-							className='message-line'>
-							{(() => localize(
-								'positron.dataExplorerEditor.isNoLongerAvailable',
-								'Is no longer available'
-							))()}
-						</div>
-					</>
-				)}
-				<div
-					className='message-line'>
+			<div className='message' >
+				<div>
 					{(() => localize(
-						'positron.dataExplorerEditor.clickToClose',
-						"Click to close Data Explorer"
+						'positron.dataExplorerEditor.thisObjectIsNoLongerAvailable',
+						'This object is no longer available.'
 					))()}
 				</div>
-			</PositronButton>
+				<Button
+					className='close-button'
+					ariaLabel={closeDataExplorer}
+					onPressed={props.onClose}
+				>
+					{closeDataExplorer}
+				</Button>
+			</div>
 		</div>
 	);
 };
diff --git a/src/vs/workbench/browser/positronDataExplorer/positronDataExplorer.css b/src/vs/workbench/browser/positronDataExplorer/positronDataExplorer.css
@@ -13,40 +13,3 @@
 	background-color: var(--vscode-positronDataExplorer-background);
 	grid-template-rows: [action-bar] 32px [data-explorer-panel] 1fr [end];
 }
-
-.positron-data-explorer-overlay {
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 30;
-	display: grid;
-	position: absolute;
-	background-color: transparent;
-	grid-template-rows: [top-gutter] 1fr [message] max-content [bottom-gutter] 1fr [end];
-	grid-template-columns: [left-gutter] 1fr [message] max-content [right-gutter] 1fr [end];
-}
-
-.positron-data-explorer-overlay
-.message {
-	color: white;
-	display: flex;
-	row-gap: 10px;
-	font-size: 16px;
-	cursor: pointer;
-	padding: 25px 50px;
-	border-radius: 6px;
-	flex-direction: column;
-	grid-row: message / bottom-gutter;
-	grid-column: message / right-gutter;
-	box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
-	color: var(--vscode-positronModalDialog-foreground);
-	border: 1px solid var(--vscode-positronModalDialog-border);
-	background-color: var(--vscode-positronModalDialog-background);
-}
-
-.positron-data-explorer-overlay
-.message
-.message-line {
-	text-align: center;
-}
diff --git a/src/vs/workbench/browser/positronDataExplorer/positronDataExplorer.tsx b/src/vs/workbench/browser/positronDataExplorer/positronDataExplorer.tsx
@@ -10,16 +10,15 @@ import * as React from 'react';
 import { PropsWithChildren, useEffect, useState } from 'react'; // eslint-disable-line no-duplicate-imports
 
 // Other dependencies.
-import { localize } from 'vs/nls';
 import { DisposableStore } from 'vs/base/common/lifecycle';
 import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
-import { PositronButton } from 'vs/base/browser/ui/positronComponents/button/positronButton';
 import { ActionBar } from 'vs/workbench/browser/positronDataExplorer/components/actionBar/actionBar';
 import { PositronActionBarServices } from 'vs/platform/positronActionBar/browser/positronActionBarState';
 import { PositronDataExplorerContextProvider } from 'vs/workbench/browser/positronDataExplorer/positronDataExplorerContext';
 import { DataExplorerPanel } from 'vs/workbench/browser/positronDataExplorer/components/dataExplorerPanel/dataExplorerPanel';
 import { IPositronDataExplorerInstance } from 'vs/workbench/services/positronDataExplorer/browser/interfaces/positronDataExplorerInstance';
+import { PositronDataExplorerClosed } from 'vs/workbench/browser/positronDataExplorer/components/dataExplorerClosed/positronDataExplorerClosed';
 
 /**
  * PositronDataExplorerServices interface.
@@ -51,26 +50,16 @@ export interface PositronDataExplorerProps extends PositronDataExplorerConfigura
 export const PositronDataExplorer = (props: PropsWithChildren<PositronDataExplorerProps>) => {
 	// State hooks.
 	const [closed, setClosed] = useState(false);
-	const [displayName, setDisplayName] = useState('');
 
 	// Main useEffect.
 	useEffect(() => {
 		// Create the disposable store for cleanup.
 		const disposableStore = new DisposableStore();
 
-		// Add the onDidUpdateBackendState event handler.
-		disposableStore.add(
-			props.instance.dataExplorerClientInstance.onDidUpdateBackendState(backendState => {
-				setDisplayName(backendState.display_name);
-			})
-		);
-
 		// Add the onDidClose event handler.
-		disposableStore.add(
-			props.instance.onDidClose(() => {
-				setClosed(true);
-			})
-		);
+		disposableStore.add(props.instance.onDidClose(() => {
+			setClosed(true);
+		}));
 
 		// Return the cleanup function that will dispose of the event handlers.
 		return () => disposableStore.dispose();
@@ -82,35 +71,7 @@ export const PositronDataExplorer = (props: PropsWithChildren<PositronDataExplor
 			<div className='positron-data-explorer'>
 				<ActionBar />
 				<DataExplorerPanel />
-				{closed && (
-					<div className='positron-data-explorer-overlay'>
-						<PositronButton className='message' onPressed={props.onClose}>
-							<div
-								className='message-line'>
-								{(() => localize(
-									'positron.dataExplorer.dataDisplayName',
-									'{0} Data: {1}',
-									props.instance.languageName,
-									displayName
-								))()}
-							</div>
-							<div
-								className='message-line'>
-								{(() => localize(
-									'positron.dataExplorer.isNoLongerAvailable',
-									'Is no longer available'
-								))()}
-							</div>
-							<div
-								className='message-line'>
-								{(() => localize(
-									'positron.dataExplorer.clickToClose',
-									"Click to close Data Explorer"
-								))()}
-							</div>
-						</PositronButton>
-					</div>
-				)}
+				{closed && <PositronDataExplorerClosed onClose={props.onClose} />}
 			</div>
 		</PositronDataExplorerContextProvider>
 	);

diff --git a/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditor.css b/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditor.css
@@ -1,3 +1,7 @@
 /*---------------------------------------------------------------------------------------------
  *  Copyright (C) 2023-2024 Posit Software, PBC. All rights reserved.
  *--------------------------------------------------------------------------------------------*/
+
+.positron-data-explorer-container {
+	position: relative;
+}
diff --git a/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditor.tsx b/src/vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditor.tsx
@@ -29,9 +29,9 @@ import { IEditorGroup } from 'vs/workbench/services/editor/common/editorGroupsSe
 import { PositronDataExplorer } from 'vs/workbench/browser/positronDataExplorer/positronDataExplorer';
 import { IReactComponentContainer, ISize, PositronReactRenderer } from 'vs/base/browser/positronReactRenderer';
 import { PositronDataExplorerUri } from 'vs/workbench/services/positronDataExplorer/common/positronDataExplorerUri';
-import { PositronDataExplorerClosed } from 'vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerClosed';
 import { IPositronDataExplorerService } from 'vs/workbench/services/positronDataExplorer/browser/interfaces/positronDataExplorerService';
 import { PositronDataExplorerEditorInput } from 'vs/workbench/contrib/positronDataExplorerEditor/browser/positronDataExplorerEditorInput';
+import { PositronDataExplorerClosed } from 'vs/workbench/browser/positronDataExplorer/components/dataExplorerClosed/positronDataExplorerClosed';
 
 /**
  * IPositronDataExplorerEditorOptions interface.
@@ -65,16 +65,6 @@ export class PositronDataExplorerEditor extends EditorPane implements IPositronD
 	 */
 	private _positronReactRenderer?: PositronReactRenderer;
 
-	/**
-	 * Gets or sets the last language name that was displayed by this PositronDataExplorerEditor.
-	 */
-	private _lastLanguageName?: string;
-
-	/**
-	 * Gets or sets the last display name that was displayed by this PositronDataExplorerEditor.
-	 */
-	private _lastDisplayName?: string;
-
 	/**
 	 * Gets or sets the width. This value is set in layoutBody and is used to implement the
 	 * IReactComponentContainer interface.
@@ -235,7 +225,6 @@ export class PositronDataExplorerEditor extends EditorPane implements IPositronD
 
 		// Create the Positron data explorer container.
 		this._positronDataExplorerContainer = DOM.$('.positron-data-explorer-container');
-		this._positronDataExplorerContainer.tabIndex = 0;
 	}
 
 	/**
@@ -314,9 +303,6 @@ export class PositronDataExplorerEditor extends EditorPane implements IPositronD
 			// If the Positron data explorer instance was found, render the PositronDataExplorer
 			// component. Otherwise, render the PositronDataExplorerClosed component.
 			if (positronDataExplorerInstance) {
-				// Set the last language name.
-				this._lastLanguageName = positronDataExplorerInstance.languageName;
-
 				// Render the PositronDataExplorer.
 				this._positronReactRenderer.render(
 					<PositronDataExplorer
@@ -332,15 +318,6 @@ export class PositronDataExplorerEditor extends EditorPane implements IPositronD
 					/>
 				);
 
-				// Add the onDidUpdateBackendState event handler.
-				this._positronReactRenderer.register(
-					positronDataExplorerInstance.dataExplorerClientInstance.
-						onDidUpdateBackendState(backendState =>
-							// Set the last display name.
-							this._lastDisplayName = backendState.display_name
-						)
-				);
-
 				// Add the onDidRequestFocus event handler.
 				this._positronReactRenderer.register(
 					positronDataExplorerInstance.onDidRequestFocus(() =>
@@ -350,8 +327,6 @@ export class PositronDataExplorerEditor extends EditorPane implements IPositronD
 			} else {
 				this._positronReactRenderer.render(
 					<PositronDataExplorerClosed
-						languageName={this._lastLanguageName}
-						displayName={this._lastDisplayName}
 						onClose={() => this._group.closeEditor(this.input)}
 					/>
 				);