Add workspace information in Import UI (#13648)

* Add workspace information in Import UI

* Addressed comments

* Reduced space between Workspace heading and the label
This commit is contained in:
Sakshi Sharma
2020-12-08 09:09:33 -08:00
committed by GitHub
parent e182649adc
commit 2f18753b1f
6 changed files with 98 additions and 16 deletions

View File

@@ -8,6 +8,7 @@ import * as vscode from 'vscode';
import * as constants from '../common/constants';
import * as newProjectTool from '../tools/newProjectTool';
import * as mssql from '../../../mssql';
import * as path from 'path';
import { IconPathHelper } from '../common/iconHelper';
import { cssStyles } from '../common/uiConstants';
@@ -24,6 +25,7 @@ export class CreateProjectFromDatabaseDialog {
public projectNameTextBox: azdata.InputBoxComponent | undefined;
public projectLocationTextBox: azdata.InputBoxComponent | undefined;
public folderStructureDropDown: azdata.DropDownComponent | undefined;
public workspaceInputBox: azdata.InputBoxComponent | undefined;
private formBuilder: azdata.FormBuilder | undefined;
private connectionId: string | undefined;
private toDispose: vscode.Disposable[] = [];
@@ -81,6 +83,10 @@ export class CreateProjectFromDatabaseDialog {
const createProjectSettingsFormSection = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
createProjectSettingsFormSection.addItems([folderStructureRow]);
const workspaceContainerRow = this.createWorkspaceContainerRow(view);
const createworkspaceContainerFormSection = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
createworkspaceContainerFormSection.addItems([workspaceContainerRow]);
this.formBuilder = <azdata.FormBuilder>view.modelBuilder.formContainer()
.withFormItems([
{
@@ -106,6 +112,14 @@ export class CreateProjectFromDatabaseDialog {
component: createProjectSettingsFormSection,
}
]
},
{
title: constants.workspace,
components: [
{
component: createworkspaceContainerFormSection,
}
]
}
], {
horizontal: false,
@@ -150,6 +164,7 @@ export class CreateProjectFromDatabaseDialog {
this.sourceDatabaseDropDown.onValueChanged(() => {
this.setProjectName();
this.updateWorkspaceInputbox(this.projectLocationTextBox!.value!, this.projectNameTextBox!.value!);
this.tryEnableCreateButton();
});
@@ -236,6 +251,8 @@ export class CreateProjectFromDatabaseDialog {
this.projectNameTextBox.onTextChanged(() => {
this.projectNameTextBox!.value = this.projectNameTextBox!.value?.trim();
this.projectNameTextBox!.updateProperty('title', this.projectNameTextBox!.value);
this.updateWorkspaceInputbox(this.projectLocationTextBox!.value!, this.projectNameTextBox!.value!);
this.tryEnableCreateButton();
});
@@ -263,6 +280,7 @@ export class CreateProjectFromDatabaseDialog {
this.projectLocationTextBox.onTextChanged(() => {
this.projectLocationTextBox!.updateProperty('title', this.projectLocationTextBox!.value);
this.updateWorkspaceInputbox(this.projectLocationTextBox!.value!, this.projectNameTextBox!.value!);
this.tryEnableCreateButton();
});
@@ -300,6 +318,7 @@ export class CreateProjectFromDatabaseDialog {
this.projectLocationTextBox!.value = folderUris[0].fsPath;
this.projectLocationTextBox!.updateProperty('title', folderUris[0].fsPath);
this.updateWorkspaceInputbox(this.projectLocationTextBox!.value!, this.projectNameTextBox!.value!);
});
return browseFolderButton;
@@ -329,6 +348,42 @@ export class CreateProjectFromDatabaseDialog {
return folderStructureRow;
}
/**
* Creates container with information on which workspace the project will be added to and where the workspace will be
* created if no workspace is currently open
* @param view
*/
private createWorkspaceContainerRow(view: azdata.ModelView): azdata.FlexContainer {
this.workspaceInputBox = view.modelBuilder.inputBox().withProperties({
ariaLabel: constants.workspaceLocationTitle,
enabled: false,
value: vscode.workspace.workspaceFile?.fsPath ?? '',
title: vscode.workspace.workspaceFile?.fsPath ?? '' // hovertext for if file path is too long to be seen in textbox
}).component();
const workspaceLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
value: vscode.workspace.workspaceFile ? constants.addProjectToCurrentWorkspace : constants.newWorkspaceWillBeCreated,
CSSStyles: { 'margin-top': '-10px', 'margin-bottom': '5px' }
}).component();
const workspaceContainerRow = view.modelBuilder.flexContainer().withItems([workspaceLabel, this.workspaceInputBox], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px', 'margin-top': '0px' } }).withLayout({ flexFlow: 'column' }).component();
return workspaceContainerRow;
}
/**
* Update the workspace inputbox based on the passed in location and name if there isn't a workspace currently open
* @param location
* @param name
*/
public updateWorkspaceInputbox(location: string, name: string): void {
if (!vscode.workspace.workspaceFile) {
const fileLocation = location && name ? path.join(location, `${name}.code-workspace`) : '';
this.workspaceInputBox!.value = fileLocation;
this.workspaceInputBox!.title = fileLocation;
}
}
// only enable Create button if all fields are filled
public tryEnableCreateButton(): void {
if (this.sourceConnectionTextBox!.value && this.sourceDatabaseDropDown!.value