Add new work-in-progress Data Explorer filter modal popup and support…

…ing refactoring, tools (#2570)
posit-dev · Mar 29, 2024 · 267943a · 267943a
1 parent d85cb93
commit 267943a
Show file tree

Hide file tree

Showing 37 changed files with 2,425 additions and 255 deletions.
diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json
@@ -505,6 +505,10 @@
 		"--vscode-pickerGroup-border",
 		"--vscode-pickerGroup-foreground",
 		"--vscode-ports-iconRunningProcessForeground",
+		"--positronActionBar-foreground",
+		"--positronActionBar-textInputBackground",
+		"--positronActionBar-textInputSelectionBackground",
+		"--positronActionBar-textInputSelectionForeground",
 		"--vscode-positronConsole-ansiBlack",
 		"--vscode-positronConsole-ansiBlue",
 		"--vscode-positronConsole-ansiBrightBlack",
@@ -548,7 +552,13 @@
 		"--vscode-positronDataViewer-background",
 		"--vscode-positronDataViewer-grid",
 		"--vscode-positronDataViewer-headerBackground",
-		"--vscode-positronDropDown-border",
+		"--vscode-positronDropDownListBox-border",
+		"--vscode-positronDropDownListBox-background",
+		"--vscode-positronDropDownListBox-foreground",
+		"--vscode-positronDropDownListBox-hoverBackground",
+		"--vscode-positronDropDownListBox-hoverForeground",
+		"--vscode-positronDropDownListBox-separatorBackground",
+		"--vscode-positronError-foreground",
 		"--vscode-positronModalDialog-background",
 		"--vscode-positronModalDialog-border",
 		"--vscode-positronModalDialog-buttonActiveBackground",

diff --git a/src/vs/base/browser/ui/positronComponents/button/button.tsx b/src/vs/base/browser/ui/positronComponents/button/button.tsx
@@ -133,4 +133,5 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<Props>>((p
 	);
 });
 
+// Set the display name.
 Button.displayName = 'Button';
diff --git a/src/vs/workbench/browser/positronComponents/dropDownListBox/dropDownListBox.css b/src/vs/workbench/browser/positronComponents/dropDownListBox/dropDownListBox.css
@@ -8,7 +8,12 @@
 	border-radius: 4px;
 	align-items: center;
 	grid-template-columns: [title] 1fr [chevron] 22px [end];
-	border: 1px solid var(--vscode-positronDropDown-border) !important;
+	color: var(--vscode-positronDropDownListBox-foreground);
+	border: 1px solid var(--vscode-positronDropDownListBox-border) !important;
+}
+
+.drop-down-list-box:disabled {
+	opacity: 50%;
 }
 
 .drop-down-list-box
@@ -28,19 +33,23 @@
 	grid-column: chevron / end;
 }
 
+.drop-down-list-box
+.chevron.disabled {
+}
+
 .drop-down-list-box-items {
 	width: 100%;
 	margin: 4px;
 	display: flex;
 	flex-direction: column;
-	background: var(--vscode-positronContextMenu-background);
+	background: var(--vscode-positronDropDownListBox-background);
 }
 
 .drop-down-list-box-items
 .separator {
 	height: 1px;
 	margin: 4px 10px;
-	background: var(--vscode-menu-border);
+	background: var(--vscode-positronDropDownListBox-separatorBackground);
 }
 
 .drop-down-list-box-items
@@ -54,15 +63,16 @@
 	align-items: center;
 	align-content: center;
 	background: transparent;
+	color: var(--vscode-positronDropDownListBox-foreground);
 	grid-template-columns: [title] 1fr [icon] min-content [end];
 	color: var(--vscode-positronContextMenu-foreground);
 }
 
 .drop-down-list-box-items
 .item:not(.disabled):hover {
 	border-radius: 4px;
-	color: var(--vscode-positronContextMenu-hoverForeground);
-	background: var(--vscode-positronContextMenu-hoverBackground);
+	color: var(--vscode-positronDropDownListBox-hoverForeground);
+	background: var(--vscode-positronDropDownListBox-hoverBackground);
 }
 
 .drop-down-list-box-items
@@ -78,7 +88,7 @@
 
 .drop-down-list-box-items
 .item:not(.disabled):focus-visible {
-	background: var(--vscode-positronContextMenu-hoverBackground);
+	background: var(--vscode-positronDropDownListBox-hoverBackground);
 }
 
 .drop-down-list-box-items

diff --git a/src/vs/workbench/browser/positronComponents/dropDownListBox/dropDownListBox.tsx b/src/vs/workbench/browser/positronComponents/dropDownListBox/dropDownListBox.tsx
@@ -7,7 +7,7 @@ import 'vs/css!./dropDownListBox';
 
 // React.
 import * as React from 'react';
-import { useRef, useState } from 'react'; // eslint-disable-line no-duplicate-imports
+import { useEffect, useRef, useState } from 'react'; // eslint-disable-line no-duplicate-imports
 
 // Other dependencies.
 import * as DOM from 'vs/base/browser/dom';
@@ -30,9 +30,32 @@ interface DropDownListBoxProps {
 	disabled?: boolean;
 	title: string;
 	entries: (DropDownListBoxItem | DropDownListBoxSeparator)[];
+	selectedIdentifier?: string;
 	onSelectionChanged: (identifier: string) => void;
 }
 
+/**
+ * Finds a drop down list box item by identifier.
+ * @param identifier The identifier of the drop down list box item to find.
+ * @param entries The set of drop down list box entries.
+ * @returns The drop down list box item, if it was found; otherwise, undefined.
+ */
+const findDropDownListBoxItem = (
+	identifier: string | undefined,
+	entries: (DropDownListBoxItem | DropDownListBoxSeparator)[]
+) => {
+	// Find the drop down list box item.
+	for (let i = 0; i < entries.length; i++) {
+		const entry = entries[i];
+		if (entry instanceof DropDownListBoxItem && entry.options.identifier === identifier) {
+			return entry;
+		}
+	}
+
+	// The drop down list box item wasn't found.
+	return undefined;
+};
+
 /**
  * DropDownListBox component.
  * @param props The component properties.
@@ -44,10 +67,20 @@ export const DropDownListBox = (props: DropDownListBoxProps) => {
 
 	// State hooks.
 	const [selectedDropDownListBoxItem, setSelectedDropDownListBoxItem] =
-		useState<DropDownListBoxItem | undefined>(undefined);
+		useState<DropDownListBoxItem | undefined>(
+			findDropDownListBoxItem(props.selectedIdentifier, props.entries)
+		);
 	const [highlightedDropDownListBoxItem, setHighlightedDropDownListBoxItem] =
 		useState<DropDownListBoxItem | undefined>(undefined);
 
+	// Updates the selected drop down list box item.
+	useEffect(() => {
+		setSelectedDropDownListBoxItem(findDropDownListBoxItem(
+			props.selectedIdentifier,
+			props.entries
+		));
+	}, [props.entries, props.selectedIdentifier]);
+
 	/**
 	 * Gets the title to display.
 	 * @returns The title to display.
@@ -66,13 +99,8 @@ export const DropDownListBox = (props: DropDownListBoxProps) => {
 	return (
 		<Button
 			ref={ref}
-			className={
-				positronClassNames(
-					'drop-down-list-box',
-					props.className,
-					{ 'disabled': props.disabled }
-				)
-			}
+			disabled={props.disabled}
+			className={positronClassNames('drop-down-list-box', props.className)}
 			onPressed={() => {
 				// Create the renderer.
 				const renderer = new PositronModalReactRenderer({
@@ -103,7 +131,7 @@ export const DropDownListBox = (props: DropDownListBoxProps) => {
 			}}
 		>
 			<div className='title'>{titleToDisplay()}</div>
-			<div className='chevron' aria-hidden='true'>
+			<div className={positronClassNames('chevron', { 'disabled': props.disabled })} aria-hidden='true'>
 				<div className='codicon codicon-chevron-down' />
 			</div>
 		</Button>

diff --git a/.../workbench/browser/positronComponents/positronModalDialog/components/labeledTextInput.tsx b/.../workbench/browser/positronComponents/positronModalDialog/components/labeledTextInput.tsx
@@ -34,4 +34,5 @@ export const LabeledTextInput = forwardRef<HTMLInputElement, LabeledTextInputPro
 	);
 });
 
+// Set the display name.
 LabeledTextInput.displayName = 'LabeledTextInput';
diff --git a/src/vs/workbench/browser/positronComponents/positronModalPopup/positronModalPopup.tsx b/src/vs/workbench/browser/positronComponents/positronModalPopup/positronModalPopup.tsx
@@ -61,6 +61,7 @@ export interface PositronModalPopupProps {
 	minWidth?: number;
 	width: number | 'max-content';
 	height: number | 'min-content';
+	focusableElementSelectors?: string;
 	keyboardNavigation: KeyboardNavigation;
 }
 
@@ -136,7 +137,7 @@ export const PositronModalPopup = (props: PropsWithChildren<PositronModalPopupPr
 			const navigateFocusableElements = (direction: 'next' | 'previous', wrap: boolean) => {
 				// Get the focusable elements.
 				const focusableElements = popupContainerRef.current.querySelectorAll<HTMLElement>(
-					focusableElementSelectors
+					props.focusableElementSelectors ?? focusableElementSelectors
 				);
 
 				// If there are no focusable elements in the modal popup, consume the event and

diff --git a/...nel/components/addRowFilterModalPopup.css → ...ModalPopup/addEditRowFilterModalPopup.css b/...nel/components/addRowFilterModalPopup.css → ...ModalPopup/addEditRowFilterModalPopup.css
@@ -3,7 +3,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 .positron-modal-popup
-.add-row-filter-modal-popup-body {
+.add-edit-row-filter-modal-popup-body {
 	gap: 8px;
 	width: 100%;
 	padding: 10px;
@@ -12,7 +12,13 @@
 }
 
 .positron-modal-popup
-.add-row-filter-modal-popup-body
+.add-edit-row-filter-modal-popup-body
+.error {
+	color: var(--vscode-positronError-foreground);
+}
+
+.positron-modal-popup
+.add-edit-row-filter-modal-popup-body
 .button-apply-filter {
 	height: 26px;
 	padding: 4px;
-Original file line number
+Diff line change
@@ Expand Up @@
     	);
     });
+    // Set the display name.
     Button.displayName = 'Button';