Add message when no history exists on projects dashboard (#15002)

* Add message when no history exists on projects dashboard * Bump version for sql db projects * Update text, add refresh button * Remove commented code
2026-01-13 17:22:15 -05:00 · 2021-04-07 00:42:11 -07:00
parent 9035914d5d
commit addef2d584
5 changed files with 89 additions and 54 deletions
--- a/extensions/data-workspace/images/refresh.svg
+++ b/extensions/data-workspace/images/refresh.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1328 0.296875C10.9974 0.53125 11.7891 0.898438 12.5078 1.39844C13.2266 1.89323 13.8438 2.48177 14.3594 3.16406C14.8802 3.84115 15.2839 4.59375 15.5703 5.42188C15.8568 6.24479 16 7.10417 16 8C16 8.73438 15.9036 9.44271 15.7109 10.125C15.5234 10.8073 15.2552 11.4453 14.9062 12.0391C14.5625 12.6328 14.1458 13.1745 13.6562 13.6641C13.1719 14.1484 12.6328 14.5651 12.0391 14.9141C11.4453 15.2578 10.8073 15.526 10.125 15.7188C9.44271 15.9062 8.73438 16 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.526 4.55469 15.2578 3.96094 14.9141C3.36719 14.5651 2.82552 14.1484 2.33594 13.6641C1.85156 13.1745 1.4349 12.6328 1.08594 12.0391C0.742188 11.4453 0.473958 10.8099 0.28125 10.1328C0.09375 9.45052 0 8.73958 0 8C0 7.27083 0.0963542 6.5625 0.289062 5.875C0.481771 5.1875 0.755208 4.54167 1.10938 3.9375C1.46875 3.32812 1.90365 2.77604 2.41406 2.28125C2.92448 1.78125 3.5 1.35417 4.14062 1H2V0H6V4H5V1.67969C4.39062 1.97135 3.83854 2.33854 3.34375 2.78125C2.85417 3.21875 2.4349 3.71354 2.08594 4.26562C1.73698 4.8125 1.46875 5.40365 1.28125 6.03906C1.09375 6.67448 1 7.32812 1 8C1 8.64062 1.08333 9.26042 1.25 9.85938C1.41667 10.4531 1.65104 11.0104 1.95312 11.5312C2.26042 12.0469 2.6276 12.5182 3.05469 12.9453C3.48177 13.3724 3.95312 13.7396 4.46875 14.0469C4.98958 14.349 5.54688 14.5833 6.14062 14.75C6.73438 14.9167 7.35417 15 8 15C8.64062 15 9.25781 14.9167 9.85156 14.75C10.4505 14.5833 11.0078 14.349 11.5234 14.0469C12.0443 13.7396 12.5182 13.3724 12.9453 12.9453C13.3724 12.5182 13.737 12.0469 14.0391 11.5312C14.3464 11.0104 14.5833 10.4531 14.75 9.85938C14.9167 9.26562 15 8.64583 15 8C15 7.21875 14.8724 6.46615 14.6172 5.74219C14.3672 5.01823 14.0156 4.35938 13.5625 3.76562C13.1094 3.17188 12.5677 2.65885 11.9375 2.22656C11.3125 1.78906 10.6224 1.46615 9.86719 1.25781L10.1328 0.296875Z" fill="#0078D4"/>
+</svg>
--- a/extensions/data-workspace/src/common/constants.ts
+++ b/extensions/data-workspace/src/common/constants.ts
@@ -23,6 +23,7 @@ export const DoNotShowAgain = localize('dataworkspace.doNotShowAgain', "Do not s
 export const ProjectsFailedToLoad = localize('dataworkspace.projectsFailedToLoad', "Some projects failed to load. Please open console for more information");
 export const fileDoesNotExist = (name: string): string => { return localize('fileDoesNotExist', "File '{0}' doesn't exist", name); };
 export const projectNameNull = localize('projectNameNull', "Project name is null");
+export const noPreviousData = (tableName: string): string => { return localize('noPreviousData', "Prior {0} will appear here, please run to see the results.", tableName); };

 // config settings
 export const projectsConfigurationKey = 'projects';
@@ -75,6 +76,9 @@ export const LocalClonePathPlaceholder = localize('dataworkspace.localClonePathP
 export const ProjectConfigurationKey = 'projects';
 export const ProjectSaveLocationKey = 'defaultProjectSaveLocation';

+// Dashboard dialog
+export const Refresh = localize('dataworksapce.refresh', 'Refresh');
+
 export namespace cssStyles {
 	export const title = { 'font-size': '18px', 'font-weight': '600' };
 	export const tableHeader = { 'text-align': 'left', 'font-weight': '500', 'font-size': '13px', 'user-select': 'text' };
--- a/extensions/data-workspace/src/common/iconHelper.ts
+++ b/extensions/data-workspace/src/common/iconHelper.ts
@@ -13,11 +13,13 @@ export interface IconPath {
 export class IconPathHelper {
 	private static extensionContext: vscode.ExtensionContext;
 	public static folder: IconPath;
+	public static refresh: IconPath;

 	public static setExtensionContext(extensionContext: vscode.ExtensionContext) {
 		IconPathHelper.extensionContext = extensionContext;

 		IconPathHelper.folder = IconPathHelper.makeIcon('folder', true);
+		IconPathHelper.refresh = IconPathHelper.makeIcon('refresh', true);
 	}

 	private static makeIcon(name: string, sameIcon: boolean = false) {
--- a/extensions/data-workspace/src/dialogs/projectDashboard.ts
+++ b/extensions/data-workspace/src/dialogs/projectDashboard.ts
@@ -8,6 +8,7 @@ import { IDashboardColumnInfo, IDashboardTable, IProjectAction, IProjectActionGr
 import * as path from 'path';
 import * as vscode from 'vscode';
 import * as constants from '../common/constants';
+import { IconPathHelper } from '../common/iconHelper';
 import { IWorkspaceService } from '../common/interfaces';
 import { fileExist } from '../common/utils';

@@ -17,6 +18,8 @@ export class ProjectDashboard {
 	private modelView: azdata.ModelView | undefined;
 	private projectProvider: IProjectProvider | undefined;
 	private overviewTab: azdata.DashboardTab | undefined;
+	private rootContainer: azdata.FlexContainer | undefined;
+	private tableContainer: azdata.Component | undefined;

 	constructor(private _workspaceService: IWorkspaceService, private _treeItem: WorkspaceTreeItem) {
 	}
@@ -69,17 +72,32 @@ export class ProjectDashboard {
 		projectActions.forEach((action, actionIndex) => {
 			if (this.isProjectAction(action)) {
 				const button = this.createButton(action);
-				buttons.push({ component: button });
+				buttons.push({ component: button, toolbarSeparatorAfter: (projectActionsLength - 1 === actionIndex) });
 			} else {
 				const groupLength = action.actions.length;

 				action.actions.forEach((groupAction, index) => {
 					const button = this.createButton(groupAction);
-					buttons.push({ component: button, toolbarSeparatorAfter: ((groupLength - 1 === index) && (projectActionsLength - 1 !== actionIndex)) });	// Add toolbar separator at the end of the group, if the group is not the last in the list
+					buttons.push({ component: button, toolbarSeparatorAfter: ((groupLength - 1 === index) || (projectActionsLength - 1 === actionIndex)) });	// Add toolbar separator at the end of the group
 				});
 			}
 		});

+		const refreshButton = this.modelView!.modelBuilder.button()
+			.withProperties<azdata.ButtonProperties>({
+				label: constants.Refresh,
+				iconPath: IconPathHelper.refresh,
+				height: '20px'
+			}).component();
+
+		refreshButton.onDidClick(() => {
+			this.rootContainer?.removeItem(this.tableContainer!);
+			this.tableContainer = this.createTables();
+			this.rootContainer?.addItem(this.tableContainer);
+		});
+
+		buttons.push({ component: refreshButton });
+
 		return this.modelView!.modelBuilder.toolbarContainer()
 			.withToolbarItems(
 				buttons
@@ -106,7 +124,7 @@ export class ProjectDashboard {
 	}

 	private createContainer(title: string, location: string): azdata.FlexContainer {
-		const rootContainer = this.modelView!.modelBuilder.flexContainer().withLayout(
+		this.rootContainer = this.modelView!.modelBuilder.flexContainer().withLayout(
 			{
 				flexFlow: 'column',
 				width: '100%',
@@ -114,12 +132,12 @@ export class ProjectDashboard {
 			}).component();

 		const headerContainer = this.createHeader(title, location);
-		const tableContainer = this.createTables();
+		this.tableContainer = this.createTables();

-		rootContainer.addItem(headerContainer);
-		rootContainer.addItem(tableContainer);
+		this.rootContainer.addItem(headerContainer);
+		this.rootContainer.addItem(this.tableContainer);

-		return rootContainer;
+		return this.rootContainer;
 	}

 	/**
@@ -186,54 +204,62 @@ export class ProjectDashboard {
 				.component();
 			tableContainer.addItem(tableNameLabel, { CSSStyles: { 'padding-left': '25px', 'padding-bottom': '20px', ...constants.cssStyles.title } });

-			const columns: azdata.DeclarativeTableColumn[] = [];
-			info.columns.forEach((column: IDashboardColumnInfo) => {
-				let col = {
-					displayName: column.displayName,
-					valueType: column.type === 'icon' ? azdata.DeclarativeDataType.component : azdata.DeclarativeDataType.string,
-					isReadOnly: true,
-					width: column.width,
-					headerCssStyles: {
-						'border': 'none',
-						...constants.cssStyles.tableHeader
-					},
-					rowCssStyles: {
-						...constants.cssStyles.tableRow
-					},
-				};
-				columns.push(col);
-			});
-
-			const data: azdata.DeclarativeTableCellValue[][] = [];
-			info.data.forEach(values => {
-				const columnValue: azdata.DeclarativeTableCellValue[] = [];
-				values.forEach(val => {
-					if (typeof val === 'string') {
-						columnValue.push({ value: val });
-					} else {
-						const iconComponent = this.modelView!.modelBuilder.image().withProperties<azdata.ImageComponentProperties>({
-							iconPath: val.icon,
-							width: '15px',
-							height: '15px',
-							iconHeight: '15px',
-							iconWidth: '15px'
-						}).component();
-						const stringComponent = this.modelView!.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
-							value: val.text,
-							CSSStyles: { 'margin-block-start': 'auto', 'block-size': 'auto', 'margin-block-end': '0px' }
-						}).component();
-
-						const columnData = this.modelView!.modelBuilder.flexContainer().withItems([iconComponent, stringComponent], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px' } }).withLayout({ flexFlow: 'row' }).component();
-						columnValue.push({ value: columnData });
-					}
+			if (info.data.length === 0) {
+				const noDataText = constants.noPreviousData(info.name.toLocaleLowerCase());
+				const noDataLabel = this.modelView!.modelBuilder.text()
+					.withProperties<azdata.TextComponentProperties>({ value: noDataText })
+					.component();
+				tableContainer.addItem(noDataLabel, { CSSStyles: { 'padding-left': '25px', 'padding-bottom': '20px' } });
+			} else {
+				const columns: azdata.DeclarativeTableColumn[] = [];
+				info.columns.forEach((column: IDashboardColumnInfo) => {
+					let col = {
+						displayName: column.displayName,
+						valueType: column.type === 'icon' ? azdata.DeclarativeDataType.component : azdata.DeclarativeDataType.string,
+						isReadOnly: true,
+						width: column.width,
+						headerCssStyles: {
+							'border': 'none',
+							...constants.cssStyles.tableHeader
+						},
+						rowCssStyles: {
+							...constants.cssStyles.tableRow
+						},
+					};
+					columns.push(col);
 				});
-				data.push(columnValue);
-			});

-			const table = this.modelView!.modelBuilder.declarativeTable()
-				.withProperties<azdata.DeclarativeTableProperties>({ columns: columns, dataValues: data, ariaLabel: info.name, CSSStyles: { 'margin-left': '30px' } }).component();
+				const data: azdata.DeclarativeTableCellValue[][] = [];
+				info.data.forEach(values => {
+					const columnValue: azdata.DeclarativeTableCellValue[] = [];
+					values.forEach(val => {
+						if (typeof val === 'string') {
+							columnValue.push({ value: val });
+						} else {
+							const iconComponent = this.modelView!.modelBuilder.image().withProperties<azdata.ImageComponentProperties>({
+								iconPath: val.icon,
+								width: '15px',
+								height: '15px',
+								iconHeight: '15px',
+								iconWidth: '15px'
+							}).component();
+							const stringComponent = this.modelView!.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+								value: val.text,
+								CSSStyles: { 'margin-block-start': 'auto', 'block-size': 'auto', 'margin-block-end': '0px' }
+							}).component();

-			tableContainer.addItem(table);
+							const columnData = this.modelView!.modelBuilder.flexContainer().withItems([iconComponent, stringComponent], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px' } }).withLayout({ flexFlow: 'row' }).component();
+							columnValue.push({ value: columnData });
+						}
+					});
+					data.push(columnValue);
+				});
+
+				const table = this.modelView!.modelBuilder.declarativeTable()
+					.withProperties<azdata.DeclarativeTableProperties>({ columns: columns, dataValues: data, ariaLabel: info.name, CSSStyles: { 'margin-left': '30px' } }).component();
+
+				tableContainer.addItem(table);
+			}
 		});
 		return tableContainer;
 	}
--- a/extensions/sql-database-projects/package.json
+++ b/extensions/sql-database-projects/package.json
@@ -2,12 +2,12 @@
  "name": "sql-database-projects",
  "displayName": "SQL Database Projects",
  "description": "The SQL Database Projects extension for Azure Data Studio allows users to develop and publish database schemas.",
-  "version": "0.8.0",
+  "version": "0.8.1",
  "publisher": "Microsoft",
  "preview": true,
  "engines": {
    "vscode": "^1.30.1",
-    "azdata": ">=1.27.0"
+    "azdata": ">=1.28.0"
  },
  "license": "https://raw.githubusercontent.com/Microsoft/azuredatastudio/main/LICENSE.txt",
  "icon": "images/sqlDatabaseProjects.png",