Changing the start for Schema compare and adding some text (#5356)

* Dialog Ok will not start Schema compare explit compare will. Adding wait text.

* Fixing variable name and spelling

extensions/schema-compare/src/dialogs/schemaCompareDialog.ts

@@ -11,7 +11,7 @@ import * as os from 'os';
 import { SchemaCompareResult } from '../schemaCompareResult';
 
 const localize = nls.loadMessageBundle();
-const CompareButtonText: string = localize('schemaCompareDialog.compare', 'Compare');
+const OkButtonText: string = localize('schemaCompareDialog.ok', 'Ok');
 const CancelButtonText: string = localize('schemaCompareDialog.cancel', 'Cancel');
 const SourceTitle: string = localize('schemaCompareDialog.SourceTitle', 'Source');
 const TargetTitle: string = localize('schemaCompareDialog.TargetTitle', 'Target');
@@ -75,7 +75,7 @@ export class SchemaCompareDialog {
 
 		this.initializeDialog();
 
-		this.dialog.okButton.label = CompareButtonText;
+		this.dialog.okButton.label = OkButtonText;
 		this.dialog.okButton.onClick(async () => await this.execute());
 
 		this.dialog.cancelButton.label = CancelButtonText;

extensions/schema-compare/src/schemaCompareResult.ts

@@ -16,6 +16,8 @@ const diffEditorTitle = localize('schemaCompare.ObjectDefinitionsTitle', 'Object
 export class SchemaCompareResult {
 	private differencesTable: azdata.TableComponent;
 	private loader: azdata.LoadingComponent;
+	private startText: azdata.TextComponent;
+	private waitText: azdata.TextComponent;
 	private editor: azdata.workspace.ModelViewEditor;
 	private diffEditor: azdata.DiffEditorComponent;
 	private splitView: azdata.SplitViewContainer;
@@ -76,7 +78,7 @@ export class SchemaCompareResult {
 			this.createGenerateScriptButton(view);
 			this.createApplyButton(view);
 			this.createOptionsButton(view);
-			this.resetButtons();
+			this.resetButtons(true);
 
 			let toolBar = view.modelBuilder.toolbarContainer();
 			toolBar.addToolbarItems([{
@@ -131,15 +133,24 @@ export class SchemaCompareResult {
 			this.sourceTargetFlexLayout.addItem(this.targetNameComponent, { CSSStyles: { 'width': '45%', 'height': '25px', 'margin-top': '10px', 'margin-left': '15px' } });
 
 			this.loader = view.modelBuilder.loadingComponent().component();
+			this.waitText = view.modelBuilder.text().withProperties({
+				value: localize('schemaCompare.waitText', 'Initializing Comparison. This might take a moment.')
+			}).component();
+
+			this.startText = view.modelBuilder.text().withProperties({
+				value: localize('schemaCompare.startText', 'Press Compare to start Schema Comparison.')
+			}).component();
+
 			this.noDifferencesLabel = view.modelBuilder.text().withProperties({
-				value: localize('schemaCompare.noDifferences', 'No schema differences were found')
+				value: localize('schemaCompare.noDifferences', 'No schema differences were found.')
 			}).component();
 
 			this.flexModel = view.modelBuilder.flexContainer().component();
 			this.flexModel.addItem(toolBar.component(), { flex: 'none' });
 			this.flexModel.addItem(sourceTargetLabels, { flex: 'none' });
 			this.flexModel.addItem(this.sourceTargetFlexLayout, { flex: 'none' });
-			this.flexModel.addItem(this.loader, { CSSStyles: { 'margin-top': '30px' } });
+			this.flexModel.addItem(this.startText, { CSSStyles: { 'margin': 'auto' } });
+
 			this.flexModel.setLayout({
 				flexFlow: 'column',
 				height: '100%'
@@ -151,7 +162,6 @@ export class SchemaCompareResult {
 
 	public start(): void {
 		this.editor.openEditor();
-		this.execute();
 	}
 
 	private async execute(): Promise<void> {
@@ -202,6 +212,7 @@ export class SchemaCompareResult {
 		});
 
 		this.flexModel.removeItem(this.loader);
+		this.flexModel.removeItem(this.waitText);
 		this.switchButton.enabled = true;
 		this.compareButton.enabled = true;
 		this.optionsButton.enabled = true;
@@ -267,10 +278,12 @@ export class SchemaCompareResult {
 		return script;
 	}
 
-	private reExecute(): void {
+	private startCompare(): void {
 		this.flexModel.removeItem(this.splitView);
 		this.flexModel.removeItem(this.noDifferencesLabel);
+		this.flexModel.removeItem(this.startText);
 		this.flexModel.addItem(this.loader, { CSSStyles: { 'margin-top': '30px' } });
+		this.flexModel.addItem(this.waitText, { CSSStyles: { 'margin-top': '30px', 'align-self': 'center' } });
 		this.diffEditor.updateProperties({
 			contentLeft: os.EOL,
 			contentRight: os.EOL,
@@ -278,7 +291,7 @@ export class SchemaCompareResult {
 		});
 
 		this.differencesTable.selectedRows = null;
-		this.resetButtons();
+		this.resetButtons(false);
 		this.execute();
 	}
 
@@ -293,7 +306,7 @@ export class SchemaCompareResult {
 		}).component();
 
 		this.compareButton.onDidClick(async (click) => {
-			this.reExecute();
+			this.startCompare();
 		});
 	}
 
@@ -376,10 +389,17 @@ export class SchemaCompareResult {
 		});
 	}
 
-	private resetButtons(): void {
+	private resetButtons(beforeCompareStart: boolean): void {
+		if (beforeCompareStart) {
+			this.compareButton.enabled = true;
+			this.optionsButton.enabled = true;
+			this.switchButton.enabled = true;
+		}
+		else {
 			this.compareButton.enabled = false;
 			this.optionsButton.enabled = false;
 			this.switchButton.enabled = false;
+		}
 		this.generateScriptButton.enabled = false;
 		this.applyButton.enabled = false;
 		this.generateScriptButton.title = localize('schemaCompare.generateScriptEnabledButton', 'Generate script to deploy changes to target');
@@ -421,7 +441,7 @@ export class SchemaCompareResult {
 				]
 			});
 
-			this.reExecute();
+			this.startCompare();
 		});
 	}