Sash bar for Edit Data SQL pane (#9818)

* WIP sash fix

* stuff to fix

* working mostly

* added tabbedPanel fix

* added null checks

* removed additional space in editdata.css

* wip change for border-top

* Fix for query editor and editdata colors in modes

* removed junk additions for panel.css

* fixed div and classes for editDataGridPanel,

* small optimizations

* Small tweaks

* simplified color checks

* test commit

* Test changes

* no need for important

* updates made

* removed small space

src/sql/workbench/contrib/editData/browser/editDataEditor.ts

@@ -13,6 +13,7 @@ import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { PANEL_BORDER } from 'vs/workbench/common/theme';
 
 import { EditDataInput } from 'sql/workbench/browser/editData/editDataInput';
 
@@ -279,6 +280,7 @@ export class EditDataEditor extends BaseEditor {
 		} else {
 			this._resultsEditorContainer = DOM.append(parentElement, input.results.container);
 		}
+		this.updateStyles();
 	}
 
 	/**
@@ -297,6 +299,14 @@ export class EditDataEditor extends BaseEditor {
 		this._sash.show();
 	}
 
+
+	updateStyles() {
+		if (this._resultsEditorContainer) {
+			this._resultsEditorContainer.style.borderTopColor = this.getColor(PANEL_BORDER);
+		}
+		super.updateStyles();
+	}
+
 	/**
 	 * Appends the HTML for the SQL editor. Creates new HTML every time.
 	 */
@@ -619,12 +629,26 @@ export class EditDataEditor extends BaseEditor {
 			} else {
 				this._sash.hide();
 			}
+			this.updateSashVisibility();
 		}
 
 		this._updateTaskbar(newInput);
 		return this._setNewInput(newInput, options);
 	}
 
+	private updateSashVisibility(): void {
+		// change the visibility of the sash.
+		if (this._resultsEditorContainer) {
+			if (this.queryPaneEnabled()) {
+				this._resultsEditorContainer.style.borderTopStyle = 'solid';
+				this._resultsEditorContainer.style.borderTopWidth = '1px';
+			} else {
+				this._resultsEditorContainer.style.borderTopStyle = '';
+				this._resultsEditorContainer.style.borderTopWidth = '';
+			}
+		}
+	}
+
 	private _updateQueryEditorVisible(currentEditorIsVisible: boolean): void {
 		if (this._queryEditorVisible) {
 			let visible = currentEditorIsVisible;
@@ -670,9 +694,11 @@ export class EditDataEditor extends BaseEditor {
 
 	public toggleQueryPane(): void {
 		this.editDataInput.queryPaneEnabled = !this.queryPaneEnabled();
+		this.updateSashVisibility();
 		if (this.queryPaneEnabled()) {
 			this._showQueryEditor();
-		} else {
+		}
+		else {
 			this._hideQueryEditor();
 		}
 		this._doLayout(false);

src/sql/workbench/contrib/editData/browser/editDataGridPanel.ts

@@ -98,8 +98,9 @@ export class EditDataGridPanel extends GridParentComponent {
 		@ILogService protected logService: ILogService
 	) {
 		super(contextMenuService, keybindingService, contextKeyService, configurationService, clipboardService, queryEditorService, logService);
-		this.nativeElement = document.createElement('editdatagridpanel');
-		this.nativeElement.className = 'slickgridContainer';
+		this.nativeElement = document.createElement('div');
+		this.nativeElement.className = 'editDataGridPanel';
+		this.nativeElement.classList.add('slickgridContainer');
 		this.dataService = dataService;
 		this.actionProvider = this.instantiationService.createInstance(EditDataGridActionProvider, this.dataService, this.onGridSelectAll(), this.onDeleteRow(), this.onRevertRow());
 		onRestoreViewState(() => this.restoreViewState());

src/sql/workbench/contrib/editData/browser/editDataResultsEditor.ts

@@ -24,7 +24,6 @@ import { IStorageService } from 'vs/platform/storage/common/storage';
 export class EditDataResultsEditor extends BaseEditor {
 
 	public static ID: string = 'workbench.editor.editDataResultsEditor';
-	public static AngularSelectorString: string = 'slickgrid-container.slickgridContainer';
 	protected _input: EditDataResultsInput;
 	protected _rawOptions: BareResultsGridInfo;
 

src/sql/workbench/contrib/editData/browser/media/editData.css

@@ -3,10 +3,12 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.editdatagridpanel * {
-	box-sizing: border-box;
+.editDataGridPanel.slickgridContainer {
+	height: 447px;
+	width: 632px;
 }
 
+
 #workbench\.editor\.editDataEditor .monaco-toolbar .monaco-select-box {
 	margin-top: 4px;
 	margin-bottom: 4px;