Sql-Assessment api info button (#13490)

extensions/sql-assessment/resources/dark/status_info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#F6F6F6;} .icon-vs-blue{fill:#424242;} .icon-white{fill:#FFFFFF;}</style><path class="icon-canvas-transparent" d="M16 16h-16v-16h16v16z" id="canvas"/><path class="icon-vs-out" d="M0 8c0-4.418 3.582-8 8-8s8 3.582 8 8-3.582 8-8 8-8-3.582-8-8z" id="outline"/><path class="icon-vs-blue" d="M8 1c-3.865 0-7 3.135-7 7s3.135 7 7 7 7-3.135 7-7-3.135-7-7-7zm1 12h-2v-7h2v7zm0-8h-2v-2h2v2z" id="iconBg"/><path class="icon-white" d="M7 6h2v7h-2v-7zm0-1h2v-2h-2v2z" id="iconFg"/></svg>

extensions/sql-assessment/resources/light/status_info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#212121;} .icon-vs-blue{fill:#FFFFFF;} .icon-white{fill:#212121;}</style><path class="icon-canvas-transparent" d="M16 16h-16v-16h16v16z" id="canvas"/><path class="icon-vs-out" d="M0 8c0-4.418 3.582-8 8-8s8 3.582 8 8-3.582 8-8 8-8-3.582-8-8z" id="outline"/><path class="icon-vs-blue" d="M8 1c-3.865 0-7 3.135-7 7s3.135 7 7 7 7-3.135 7-7-3.135-7-7-7zm1 12h-2v-7h2v7zm0-8h-2v-2h2v2z" id="iconBg"/><path class="icon-white" d="M7 6h2v7h-2v-7zm0-1h2v-2h-2v2z" id="iconFg"/></svg>

extensions/sql-assessment/src/assessmentResultGrid.ts

@@ -30,7 +30,6 @@ export class AssessmentResultGrid implements vscode.Disposable {
 	private asmtType!: AssessmentType;
 	private targetTypeIcon: { [targetType: number]: azdata.IconColumnCellValue };
 
-
 	private readonly checkIdColOrder = 5;
 	private readonly targetColOrder = 1;
 	private readonly messageColOrder = 3;
@@ -81,7 +80,6 @@ export class AssessmentResultGrid implements vscode.Disposable {
 				headerFilter: true
 			}).component();
 
-
 		this.toDispose.push(
 			this.table.onRowSelected(async () => {
 				if (this.table.selectedRows?.length !== 1) {
@@ -90,7 +88,6 @@ export class AssessmentResultGrid implements vscode.Disposable {
 				await this.showDetails(this.table.selectedRows[0]);
 			}));
 
-
 		this.rootContainer = view.modelBuilder.flexContainer()
 			.withItems([this.table], {
 				flex: '1 1 auto',
@@ -109,7 +106,6 @@ export class AssessmentResultGrid implements vscode.Disposable {
 			flex: '0 0 200px',
 			order: 2,
 			CSSStyles: {
-				'padding-bottom': '15px',
 				'visibility': 'hidden'
 			}
 		});
@@ -132,18 +128,22 @@ export class AssessmentResultGrid implements vscode.Disposable {
 		this.rootContainer.setItemLayout(this.table, {
 			flex: '1 1 auto',
 			CSSStyles: {
-				'height': '100%'
+				'height': '100%',
+				'border-bottom': '3px solid rgb(221, 221, 221)'
 			}
 		});
 
 		await this.table.updateProperties({
 			'height': '100%'
 		});
-
+		if (this.dataItems.length > 0) {
-		this.detailsPanel.updateCssStyles({
+			this.table.selectedRows = [0];
+		} else {
+			await this.detailsPanel.updateCssStyles({
 				'visibility': 'hidden'
 			});
 		}
+	}
 
 	// we need to filter out warnings and error results since we don't have an appropriate way of displaying such messages.
 	// have to redone this once required functionality will be added to the core.
@@ -196,8 +196,6 @@ export class AssessmentResultGrid implements vscode.Disposable {
 		});
 	}
 
-
-
 	private createDetailsPanel(view: azdata.ModelView): azdata.FlexContainer {
 
 		const root = view.modelBuilder.flexContainer()
@@ -206,8 +204,7 @@ export class AssessmentResultGrid implements vscode.Disposable {
 				height: '200px',
 			}).withProperties({
 				CSSStyles: {
-					'padding': '20px',
+					'padding': '0px 10px'
-					'border-top': '3px solid rgb(221, 221, 221)'
 				}
 			}).component();
 		const cssNoMarginFloatLeft = { 'margin': '0px', 'float': 'left' };
@@ -285,6 +282,7 @@ export class AssessmentResultGrid implements vscode.Disposable {
 
 		return root;
 	}
+
 	private clearOutDefaultRuleset(tags: string[]): string[] {
 		let idx = tags.findIndex(item => item.toUpperCase() === 'DEFAULTRULESET');
 		if (idx > -1) {

extensions/sql-assessment/src/tabs/assessmentMainTab.ts

@@ -14,13 +14,15 @@ import { HTMLReportBuilder } from '../htmlReportGenerator';
 import { AssessmentResultGrid } from '../assessmentResultGrid';
 import { LocalizedStrings } from '../localized';
 import { TelemetryReporter, SqlAssessmentTelemetryView, SqlTelemetryActions } from '../telemetry';
+import { EOL } from 'os';
 
 const localize = nls.loadMessageBundle();
 
 export class SqlAssessmentMainTab extends SqlAssessmentTab {
-	private assessmentPropertiesContainer!: azdata.PropertiesContainerComponent;
 	private apiVersionPropItem: azdata.PropertiesContainerItem;
 	private defaultRulesetPropItem: azdata.PropertiesContainerItem;
+	private serverProps: azdata.PropertiesContainerItem[] = [];
+
 	private invokeAssessmentLabel: string = localize('invokeAssessmentLabelServer', "Invoke assessment");
 	private getItemsLabel: string = localize('getAssessmentItemsServer', "View applicable rules");
 	private btnExportAsScript!: azdata.ButtonComponent;
@@ -31,7 +33,6 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 	private resultGrid!: AssessmentResultGrid;
 
 
-
 	public constructor(extensionContext: vscode.ExtensionContext, engine: AssessmentEngine) {
 		super(extensionContext, LocalizedStrings.ASSESSMENT_TAB_NAME, 'MainTab', {
 			dark: extensionContext.asAbsolutePath('resources/dark/server.svg'),
@@ -64,12 +65,11 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 				height: '100%',
 
 			}).component();
+		await this.createServerProperties(view);
 
-		rootContainer.addItem(await this.createPropertiesSection(view), { flex: '0 0 auto' });
 		rootContainer.addItem(await this.createToolbar(view), {
 			flex: '0 0 auto', CSSStyles: {
 				'border-top': '3px solid rgb(221, 221, 221)',
-				'margin-top': '20px',
 				'height': '32px'
 			}
 		});
@@ -78,74 +78,22 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 		rootContainer.addItem(this.resultGrid.component, {
 			flex: '1 1 auto',
 			CSSStyles: {
-				'padding-bottom': '15px'
+				'padding-bottom': '10px'
 			}
 		});
 
 		return rootContainer;
 	}
 
-	private async createPropertiesSection(view: azdata.ModelView): Promise<azdata.FlexContainer> {
+	private async createServerProperties(view: azdata.ModelView): Promise<void> {
 		const serverInfo = await azdata.connection.getServerInfo(view.connection.connectionId);
 		const connectionProfile = await azdata.connection.getCurrentConnection();
-
+		this.serverProps = [
-		const propertiesContainer = view.modelBuilder.flexContainer()
-			.withLayout({
-				flexFlow: 'row',
-				justifyContent: 'flex-start'
-			}).component();
-
-		const apiInformationContainer = view.modelBuilder.flexContainer()
-			.withLayout({
-				flexFlow: 'column',
-				alignContent: 'flex-start'
-			}).component();
-		apiInformationContainer.addItem(
-			view.modelBuilder.text().withProperties({ value: LocalizedStrings.SECTION_TITLE_API }).component(), {
-			CSSStyles: { 'font-size': 'larger' }
-		});
-
-		this.assessmentPropertiesContainer = view.modelBuilder.propertiesContainer()
-			.withProperties<azdata.PropertiesContainerComponentProperties>({
-				propertyItems: [
-					this.apiVersionPropItem,
-					this.defaultRulesetPropItem]
-			}).component();
-
-		apiInformationContainer.addItem(this.assessmentPropertiesContainer, {
-			CSSStyles: {
-				'margin-left': '20px'
-			}
-		});
-
-		const sqlServerContainer = view.modelBuilder.flexContainer()
-			.withLayout({
-				flexFlow: 'column',
-				alignContent: 'flex-start'
-			}).component();
-		sqlServerContainer.addItem(
-			view.modelBuilder.text().withProperties({ value: LocalizedStrings.SECTION_TITLE_SQL_SERVER }).component(), {
-			CSSStyles: { 'font-size': 'larger' }
-		});
-		sqlServerContainer.addItem(
-			view.modelBuilder.propertiesContainer()
-				.withProperties<azdata.PropertiesContainerComponentProperties>({
-					propertyItems: [
 			{ displayName: LocalizedStrings.SERVER_VERSION, value: serverInfo.serverVersion },
 			{ displayName: LocalizedStrings.SERVER_INSTANCENAME, value: connectionProfile.serverName },
 			{ displayName: LocalizedStrings.SERVER_EDITION, value: serverInfo.serverEdition },
 			{ displayName: LocalizedStrings.SERVER_OSVERSION, value: serverInfo.osVersion },
-					]
+		];
-				}).component(), {
-			CSSStyles: {
-				'margin-left': '20px'
-			}
-		});
-
-		propertiesContainer.addItem(apiInformationContainer, { flex: '0 0 300px', CSSStyles: { 'margin-left': '10px' } });
-		propertiesContainer.addItem(sqlServerContainer, { flex: '1 1 auto' });
-
-		return propertiesContainer;
 	}
 
 	private async createToolbar(view: azdata.ModelView): Promise<azdata.ToolbarContainer> {
@@ -279,6 +227,42 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 			vscode.env.openExternal(vscode.Uri.parse('https://aka.ms/sql-assessment-api'));
 		}));
 
+		let btnAPIDetails = view.modelBuilder.button()
+			.withProperties<azdata.ButtonProperties>({
+				label: LocalizedStrings.SECTION_TITLE_API,
+				iconPath: {
+					dark: this.extensionContext.asAbsolutePath('resources/dark/status_info.svg'),
+					light: this.extensionContext.asAbsolutePath('resources/light/status_info.svg')
+				},
+			}).component();
+		this.toDispose.push(btnAPIDetails.onDidClick(async () => {
+			let infoArray: azdata.PropertiesContainerItem[] = [];
+
+			if (this.apiVersionPropItem.value) {
+				infoArray.push(this.apiVersionPropItem);
+			}
+
+			if (this.defaultRulesetPropItem.value) {
+				infoArray.push(this.defaultRulesetPropItem);
+			}
+
+			infoArray.push(...this.serverProps);
+			const message = localize('msgBoxAsmtInfo', "SQL Assessment Information") + EOL + EOL +
+				infoArray.map(v => `${v.displayName}: ${v.value}`).join(EOL);
+
+			const copy: vscode.MessageItem = { title: localize('msgBoxCopyBtn', "Copy") };
+			const ok: vscode.MessageItem = { isCloseAffordance: true, title: localize('ok', "OK") };
+
+			const response = await vscode.window.showInformationMessage(message, { modal: true }, copy, ok);
+			if (response === copy) {
+				await vscode.env.clipboard.writeText(message);
+				vscode.window.showInformationMessage(localize('msgBoxCopied', 'SQL Assessment Information copied'));
+			}
+		}));
+
+		btnGetAssessmentItemsLoading.loading = false;
+		btnInvokeAssessmentLoading.loading = false;
+
 		return view.modelBuilder.toolbarContainer()
 			.withToolbarItems(
 				[
@@ -286,7 +270,8 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 					{ component: btnGetAssessmentItemsLoading },
 					{ component: this.btnExportAsScript },
 					{ component: this.btnHTMLExport },
-					{ component: btnViewSamples }
+					{ component: btnViewSamples },
+					{ component: btnAPIDetails }
 				]
 			).component();
 	}
@@ -294,10 +279,6 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 	private displayResults(result: azdata.SqlAssessmentResult, assessmentType: AssessmentType): void {
 		this.apiVersionPropItem.value = result.apiVersion;
 		this.defaultRulesetPropItem.value = result.items?.length > 0 ? result.items[0].rulesetVersion : '';
-		this.assessmentPropertiesContainer.propertyItems = [
-			this.apiVersionPropItem,
-			this.defaultRulesetPropItem
-		];
 
 		this.resultGrid.displayResult(result, assessmentType);
 		this.btnExportAsScript.enabled = this.btnHTMLExport.enabled = assessmentType === AssessmentType.InvokeAssessment;

extensions/sql-assessment/src/tabs/historyTab.ts

@@ -88,7 +88,11 @@ export class SqlAssessmentHistoryTab extends SqlAssessmentTab {
 				this.resultGrid.displayResult(historyResult.result, AssessmentType.InvokeAssessment);
 				title.value = localize('asmt.history.resultsTitle', "Assessment Results from {0}", new Date(historyResult.dateUpdated).toLocaleString());
 				root.addItem(infoPanel, { flex: `0 0 50px` });
-				root.addItem(this.resultGrid.component);
+				root.addItem(this.resultGrid.component, {
+					flex: '1 1 auto', CSSStyles: {
+						'padding-bottom': '10px'
+					}
+				});
 				this.summaryTable.selectedRows = [];
 			}