Notebook Views Insert Cells Modal (#16836)

* Add html-to-image package

* Add image card type

src/sql/workbench/browser/modelComponents/card.component.html

@@ -2,7 +2,7 @@
 <div #cardDiv role="radio" *ngIf="label" [class]="getClass() + ' horizontal'" (click)="onCardClick()"
 	[attr.aria-checked]="selected" (mouseover)="onCardHoverChanged($event)" (mouseout)="onCardHoverChanged($event)"
 	tabIndex="0" [style.width]="width" [style.height]="height">
-	<ng-container *ngIf="isVerticalButton || isDetailsCard">
+	<ng-container *ngIf="isVerticalButton || isDetailsCard || isImageCard">
 		<span *ngIf="hasStatus" class="card-status">
 			<div class="status-content" [style.backgroundColor]="statusColor"></div>
 		</span>
@@ -47,6 +47,15 @@
 				</span>
 			</div>
 		</ng-container>
+
+		<ng-container *ngIf="isImageCard">
+			<div class="card-content">
+				<div [class]="'card-image ' + iconClass"></div>
+				<div *ngIf="label" class="card-label-overlay">
+					<h4 class="card-label">{{label}}</h4>
+				</div>
+			</div>
+		</ng-container>
 	</ng-container>
 	<ng-container *ngIf="isListItemCard">
 		<div class="list-item-content">

src/sql/workbench/browser/modelComponents/card.component.ts

@@ -18,8 +18,9 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import * as DOM from 'vs/base/browser/dom';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
-import { IColorTheme } from 'vs/platform/theme/common/themeService';
+import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { ILogService } from 'vs/platform/log/common/log';
+import { CARD_OVERLAY_BACKGROUND, CARD_OVERLAY_FOREGROUND } from 'vs/workbench/common/theme';
 
 export interface ActionDescriptor {
 	label: string;
@@ -52,7 +53,8 @@ export interface CardDescriptionItem {
 export enum CardType {
 	VerticalButton = 'VerticalButton',
 	Details = 'Details',
-	ListItem = 'ListItem'
+	ListItem = 'ListItem',
+	Image = 'Image'
 }
 
 @Component({
@@ -119,6 +121,11 @@ export default class CardComponent extends ComponentWithIconBase<azdata.CardProp
 
 	public getClass(): string {
 		let cardClass = this.isListItemCard ? 'model-card-list-item-legacy' : 'model-card-legacy';
+
+		if (this.cardType === 'Image') {
+			cardClass += ' image-card';
+		}
+
 		return (this.selectable && this.selected || this._hasFocus) ? `${cardClass} selected` :
 			`${cardClass} unselected`;
 	}
@@ -151,7 +158,7 @@ export default class CardComponent extends ComponentWithIconBase<azdata.CardProp
 	}
 
 	private get selectable(): boolean {
-		return this.enabled && (this.cardType === 'VerticalButton' || this.cardType === 'ListItem');
+		return this.enabled && (this.cardType === 'VerticalButton' || this.cardType === 'ListItem' || this.cardType === 'Image');
 	}
 
 	// CSS-bound properties
@@ -184,6 +191,10 @@ export default class CardComponent extends ComponentWithIconBase<azdata.CardProp
 		return !this.cardType || this.cardType === 'ListItem';
 	}
 
+	public get isImageCard(): boolean {
+		return !this.cardType || this.cardType === 'Image';
+	}
+
 	public get isVerticalButton(): boolean {
 		return this.cardType === 'VerticalButton';
 	}
@@ -236,3 +247,23 @@ export default class CardComponent extends ComponentWithIconBase<azdata.CardProp
 
 	}
 }
+
+registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
+	const backgroundColor = theme.getColor(CARD_OVERLAY_BACKGROUND);
+	const foregroundColor = theme.getColor(CARD_OVERLAY_FOREGROUND);
+	if (backgroundColor) {
+		collector.addRule(`
+		.model-card-legacy .card-label-overlay {
+			background-color: ${backgroundColor.toString()};
+		}
+		`);
+	}
+
+	if (foregroundColor) {
+		collector.addRule(`
+		.model-card-legacy.image-card .card-label {
+			color: ${foregroundColor.toString()};
+		}
+		`);
+	}
+});

src/sql/workbench/browser/modelComponents/media/legacycard.css

@@ -26,6 +26,47 @@
 	min-width: 30px;
 }
 
+.model-card-legacy.image-card {
+	height: auto;
+	margin: 0;
+	display: block;
+}
+
+.model-card-legacy.image-card .card-content {
+	display: block;
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	min-height: 100px;
+}
+
+.model-card-legacy.image-card .card-image {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	background-size: contain;
+	background-position: initial;
+	background-repeat: no-repeat;
+	max-width: unset;
+	max-height: unset;
+}
+
+.model-card-legacy.image-card .card-label-overlay {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	height: 25px;
+	line-height: 25px;
+	padding: 0;
+	margin: 0;
+	display: block;
+}
+
+.model-card-legacy.image-card .card-label {
+	margin: 0;
+	padding: 0px 10px
+}
+
 .model-card-legacy .card-vertical-button {
 	position: relative;
 	display: flex;
@@ -103,6 +144,7 @@
 	border-width: 1px;
 	border-color: rgb(0, 120, 215);
 	border-style: solid;
+	z-index: 1;
 }
 
 .model-card-list-item-legacy .selection-indicator-container, .model-card-legacy .selection-indicator-container {