UI Component for Parameterized Notebook (#13021)

* Backend work for  Parameterization + Tests

* address comments

* Add Parameters Tag upon state change

* Edit CSS Styling for accessibility

* more generic tag names

src/sql/platform/theme/common/colorRegistry.ts

@@ -66,3 +66,5 @@ export const codeEditorLineNumber = registerColor('notebook.codeEditorLineNumber
 export const codeEditorToolbarIcon = registerColor('notebook.codeEditorToolbarIcon', { light: '#999999', dark: '#A19F9D', hc: '#FFFFFF' }, nls.localize('notebook.codeEditorToolbarIcon', "Notebook: Code editor toolbar icons"));
 export const codeEditorToolbarBackground = registerColor('notebook.codeEditorToolbarBackground', { light: '#EEEEEE', dark: '#333333', hc: '#000000' }, nls.localize('notebook.codeEditorToolbarBackground', "Notebook: Code editor toolbar background"));
 export const codeEditorToolbarBorder = registerColor('notebook.codeEditorToolbarBorder', { light: '#C8C6C4', dark: '#333333', hc: '#000000' }, nls.localize('notebook.codeEditorToolbarBorder', "Notebook: Code editor toolbar right border"));
+export const notebookCellTagBackground = registerColor('notebook.notebookCellTagBackground', { light: '#0078D4', dark: '#0078D4', hc: '#0078D4' }, nls.localize('notebook.notebookCellTagBackground', "Tag background color."));
+export const notebookCellTagForeground = registerColor('notebook.notebookCellTagForeground', { light: '#FFFFFF', dark: '#FFFFFF', hc: '#FFFFFF' }, nls.localize('notebook.notebookCellTagForeground', "Tag foreground color."));

src/sql/workbench/contrib/notebook/browser/cellViews/code.component.html

@@ -13,5 +13,8 @@
 			</div>
 		</div>
 		<collapse-component *ngIf="cellModel.cellType === 'code' && cellModel.source && cellModel.source.length > 1" [cellModel]="cellModel" [activeCellId]="activeCellId"></collapse-component>
+		<div #parameter class="parameter" *ngIf="cellModel.cellType === 'code' && cellModel.isParameter">
+			<span>{{parametersText}}</span>
+		</div>
 	</div>
 </div>

src/sql/workbench/contrib/notebook/browser/cellViews/code.component.ts

@@ -35,6 +35,7 @@ import { SimpleProgressIndicator } from 'sql/workbench/services/progress/browser
 import { notebookConstants } from 'sql/workbench/services/notebook/browser/interfaces';
 import { tryMatchCellMagic } from 'sql/workbench/services/notebook/browser/utils';
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
+import { localize } from 'vs/nls';
 
 export const CODE_SELECTOR: string = 'code-component';
 const MARKDOWN_CLASS = 'markdown';
@@ -144,6 +145,10 @@ export class CodeComponent extends CellView implements OnInit, OnChanges {
 		return this.cellModel.cellGuid;
 	}
 
+	get parametersText(): string {
+		return localize('parametersText', "Parameters");
+	}
+
 	private updateConnectionState(shouldConnect: boolean) {
 		if (this.isSqlCodeCell()) {
 			let cellUri = this.cellModel.cellUri.toString();

src/sql/workbench/contrib/notebook/browser/cellViews/code.css

@@ -108,3 +108,16 @@ code-component .hide-component-button {
 	background-position: center;
 	background-color: transparent;
 }
+
+code-component .parameter {
+	bottom: 0;
+	margin-right: 15px;
+	position: absolute;
+	right: 0;
+}
+
+code-component .parameter span {
+	display: inline-block;
+	padding: 3px 7px;
+	text-align: center;
+}

src/sql/workbench/contrib/notebook/browser/cellViews/codeCell.component.ts

@@ -55,6 +55,9 @@ export class CodeCellComponent extends CellView implements OnInit, OnChanges {
 			this._register(this.cellModel.onCollapseStateChanged((state) => {
 				this._changeRef.detectChanges();
 			}));
+			this._register(this.cellModel.onParameterStateChanged((state) => {
+				this._changeRef.detectChanges();
+			}));
 			this._register(this.cellModel.onOutputsChanged(() => {
 				this._changeRef.detectChanges();
 			}));

src/sql/workbench/contrib/notebook/browser/notebookStyles.ts

@@ -8,7 +8,7 @@ import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/
 import { SIDE_BAR_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND } from 'vs/workbench/common/theme';
 import { activeContrastBorder, contrastBorder, buttonBackground, textLinkForeground, textLinkActiveForeground, textPreformatForeground, textBlockQuoteBackground, textBlockQuoteBorder, buttonForeground } from 'vs/platform/theme/common/colorRegistry';
 import { editorLineHighlight, editorLineHighlightBorder } from 'vs/editor/common/view/editorColorRegistry';
-import { cellBorder, notebookToolbarIcon, notebookToolbarLines, buttonMenuArrow, dropdownArrow, markdownEditorBackground, codeEditorBackground, codeEditorBackgroundActive, codeEditorLineNumber, codeEditorToolbarIcon, codeEditorToolbarBackground, codeEditorToolbarBorder, toolbarBackground, toolbarIcon, toolbarBottomBorder, notebookToolbarSelectBackground, splitBorder } from 'sql/platform/theme/common/colorRegistry';
+import { cellBorder, notebookToolbarIcon, notebookToolbarLines, buttonMenuArrow, dropdownArrow, markdownEditorBackground, codeEditorBackground, codeEditorBackgroundActive, codeEditorLineNumber, codeEditorToolbarIcon, codeEditorToolbarBackground, codeEditorToolbarBorder, toolbarBackground, toolbarIcon, toolbarBottomBorder, notebookToolbarSelectBackground, splitBorder, notebookCellTagBackground, notebookCellTagForeground } from 'sql/platform/theme/common/colorRegistry';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { BareResultsGridInfo, getBareResultsGridInfoStyles } from 'sql/workbench/contrib/query/browser/queryResultsEditor';
@@ -237,5 +237,10 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 		if (codeEditorToolbarBorderColor) {
 			collector.addRule(`.notebook-cell.active code-cell-component code-component .toolbar { border-right-color: ${codeEditorToolbarBorderColor}!important;}`);
 		}
+		const notebookCellTagBackgroundColor = theme.getColor(notebookCellTagBackground);
+		const notebookCellTagForegroundColor = theme.getColor(notebookCellTagForeground);
+		if (notebookCellTagBackgroundColor && notebookCellTagForegroundColor) {
+			collector.addRule(`code-component .parameter span { background-color: ${notebookCellTagBackgroundColor}; color: ${notebookCellTagForegroundColor}`);
+		}
 	});
 }