ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-27 01:25:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Add message when no history exists on projects dashboard

* Bump version for sql db projects

* Update text, add refresh button

* Remove commented code
This commit is contained in:
Sakshi Sharma
2021-04-07 00:42:11 -07:00
committed by GitHub
parent 9035914d5d
commit addef2d584
5 changed files with 89 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
extensions/data-workspace/src/dialogs/projectDashboard.ts
View File

@@ -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;
}