Fix schema compare diff editor not showing (#16733)

* Fix schema compare diff editor not showing

* remove unneeded

* remove more unused

extensions/schema-compare/src/schemaCompareMainWindow.ts

@@ -33,7 +33,7 @@ export class SchemaCompareMainWindow {
 	private waitText: azdata.TextComponent;
 	private editor: azdata.workspace.ModelViewEditor;
 	private diffEditor: azdata.DiffEditorComponent;
-	private splitView: azdata.SplitViewContainer;
+	private splitView: azdata.SplitViewContainer | undefined;
 	private flexModel: azdata.FlexContainer;
 	private noDifferencesLabel: azdata.TextComponent;
 	private sourceTargetFlexLayout: azdata.FlexContainer;
@@ -132,19 +132,6 @@ export class SchemaCompareMainWindow {
 					this.view = view;
 				}
 
-				this.differencesTable = this.view.modelBuilder.table().withProps({
-					data: [],
-					title: loc.differencesTableTitle,
-					columns: []
-				}).component();
-
-				this.diffEditor = this.view.modelBuilder.diffeditor().withProperties({
-					contentLeft: os.EOL,
-					contentRight: os.EOL,
-					height: 500,
-					title: loc.diffEditorTitle
-				}).component();
-
 				this.splitView = this.view.modelBuilder.splitViewContainer().component();
 
 				let sourceTargetLabels = this.view.modelBuilder.flexContainer().component();
@@ -299,9 +286,14 @@ export class SchemaCompareMainWindow {
 				'operationId': this.comparisonResult.operationId
 			}).send();
 
-		let data = this.getAllDifferences(this.comparisonResult.differences);
+		this.flexModel.removeItem(this.loader);
+		this.flexModel.removeItem(this.waitText);
+		this.resetButtons(ResetButtonState.afterCompareComplete);
 
-		this.differencesTable.updateProperties({
+		if (this.comparisonResult.differences.length > 0) {
+			const data = this.getAllDifferences(this.comparisonResult.differences);
+
+			this.differencesTable = this.view.modelBuilder.table().withProps({
 				data: data,
 				columns: [
 					{
@@ -334,21 +326,48 @@ export class SchemaCompareMainWindow {
 					}
 				],
 				CSSStyles: { 'left': '15px' },
-			width: '98%'
+				width: '98%',
-		});
+				title: loc.differencesTableTitle
+			}).component();
+
+			this.diffEditor = this.view.modelBuilder.diffeditor().withProperties({
+				contentLeft: os.EOL,
+				contentRight: os.EOL,
+				height: 500,
+				title: loc.diffEditorTitle
+			}).component();
+
+			let sourceText = '';
+			let targetText = '';
+			this.tablelistenersToDispose.push(this.differencesTable.onRowSelected(() => {
+				let difference = this.comparisonResult.differences[this.differencesTable.selectedRows[0]];
+				if (difference !== undefined) {
+					sourceText = this.getFormattedScript(difference, true);
+					targetText = this.getFormattedScript(difference, false);
+
+					this.diffEditor.updateProperties({
+						contentLeft: sourceText,
+						contentRight: targetText,
+						title: loc.diffEditorTitle
+					});
+				}
+			}));
+			this.tablelistenersToDispose.push(this.differencesTable.onCellAction(async (rowState) => {
+				let checkboxState = <azdata.ICheckboxCellActionEventArgs>rowState;
+				if (checkboxState) {
+					await this.applyIncludeExclude(checkboxState);
+				}
+			}));
+
+			this.splitView = this.view.modelBuilder.splitViewContainer().withItems([
+				this.differencesTable,
+				this.diffEditor
+			]).component();
 
-		this.splitView.addItem(this.differencesTable);
-		this.splitView.addItem(this.diffEditor);
 			this.splitView.setLayout({
 				orientation: 'vertical',
 				splitViewHeight: 800
 			});
-
-		this.flexModel.removeItem(this.loader);
-		this.flexModel.removeItem(this.waitText);
-		this.resetButtons(ResetButtonState.afterCompareComplete);
-
-		if (this.comparisonResult.differences.length > 0) {
 			this.flexModel.addItem(this.splitView);
 
 			// create a map of the differences to row numbers
@@ -380,28 +399,6 @@ export class SchemaCompareMainWindow {
 				this.setButtonStatesForNoChanges(false);
 			}
 		}
-
-		let sourceText = '';
-		let targetText = '';
-		this.tablelistenersToDispose.push(this.differencesTable.onRowSelected(() => {
-			let difference = this.comparisonResult.differences[this.differencesTable.selectedRows[0]];
-			if (difference !== undefined) {
-				sourceText = this.getFormattedScript(difference, true);
-				targetText = this.getFormattedScript(difference, false);
-
-				this.diffEditor.updateProperties({
-					contentLeft: sourceText,
-					contentRight: targetText,
-					title: loc.diffEditorTitle
-				});
-			}
-		}));
-		this.tablelistenersToDispose.push(this.differencesTable.onCellAction(async (rowState) => {
-			let checkboxState = <azdata.ICheckboxCellActionEventArgs>rowState;
-			if (checkboxState) {
-				await this.applyIncludeExclude(checkboxState);
-			}
-		}));
 	}
 
 	public async applyIncludeExclude(checkboxState: azdata.ICheckboxCellActionEventArgs): Promise<void> {
@@ -596,19 +593,16 @@ export class SchemaCompareMainWindow {
 	}
 
 	public async startCompare(): Promise<void> {
+		if (this.splitView) {
 			this.flexModel.removeItem(this.splitView);
+			this.splitView = undefined;
+		}
 		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.showIncludeExcludeWaitingMessage = true;
-		this.diffEditor.updateProperties({
-			contentLeft: os.EOL,
-			contentRight: os.EOL,
-			title: loc.diffEditorTitle
-		});
 
-		this.differencesTable.selectedRows = null;
 		if (this.tablelistenersToDispose) {
 			this.tablelistenersToDispose.forEach(x => x.dispose());
 		}
@@ -842,7 +836,10 @@ export class SchemaCompareMainWindow {
 
 	// reset state afer loading an scmp
 	private resetForNewCompare(): void {
+		if (this.splitView) {
 			this.flexModel.removeItem(this.splitView);
+			this.splitView = undefined;
+		}
 		this.flexModel.removeItem(this.noDifferencesLabel);
 		this.flexModel.addItem(this.startText, { CSSStyles: { 'margin': 'auto' } });
 	}

src/sql/azdata.d.ts

@@ -2691,7 +2691,7 @@ declare module 'azdata' {
 	}
 
 	// Building on top of flex item
-	export interface SplitViewBuilder extends ContainerBuilder<SplitViewContainer, SplitViewLayout, FlexItemLayout, SplitViewContainer> {
+	export interface SplitViewBuilder extends ContainerBuilder<SplitViewContainer, SplitViewLayout, FlexItemLayout, ComponentProperties> {
 	}
 
 	export interface DivBuilder extends ContainerBuilder<DivContainer, DivLayout, DivItemLayout, DivContainerProperties> {