add page custom buttons (#16797)

src/sql/workbench/browser/modal/modal.ts

@@ -500,17 +500,22 @@ export abstract class Modal extends Disposable implements IThemable {
 	 * Adds a button to the footer of the modal
 	 * @param label Label to show on the button
 	 * @param onSelect The callback to call when the button is selected
-	 * @param isSecondary Set the css class if true
+	 * @param position The position of the button. Optional values: 'left', 'right'. Default value is 'right'
+	 * @param isSecondary Indicates whether the button is a secondary button
+	 * @param index If specified, the button will be inserted at the specified index
 	 */
-	protected addFooterButton(label: string, onSelect: () => void, orientation: 'left' | 'right' = 'right', isSecondary: boolean = false): Button {
+	protected addFooterButton(label: string, onSelect: () => void, position: 'left' | 'right' = 'right', isSecondary: boolean = false, index?: number): Button {
 		let footerButton = DOM.$('.footer-button');
 		let button = this._register(new Button(footerButton, { secondary: isSecondary }));
 		button.label = label;
 		button.onDidClick(() => onSelect()); // @todo this should be registered to dispose but that brakes some dialogs
-		if (orientation === 'left') {
+		const container = position === 'left' ? this._leftFooter! : this._rightFooter!;
-			DOM.append(this._leftFooter!, footerButton);
+		const buttonIndex = index !== undefined && index <= container.childElementCount ? index : container.childElementCount;
+		if (buttonIndex < container.childElementCount) {
+			const insertBefore = container.children.item(buttonIndex);
+			container.insertBefore(footerButton, insertBefore);
 		} else {
-			DOM.append(this._rightFooter!, footerButton);
+			DOM.append(container, footerButton);
 		}
 		attachButtonStyler(button, this._themeService);
 		this._footerButtons.push(button);
@@ -542,7 +547,7 @@ export abstract class Modal extends Disposable implements IThemable {
 		});
 		if (buttonIndex > -1 && buttonIndex < this._footerButtons.length) {
 			let button = this._footerButtons[buttonIndex];
-			DOM.removeNode(button.element);
+			button.element.parentElement.remove(); // The parent element of the button is the top level element we added to the footer button container.
 			button.dispose();
 			this._footerButtons.splice(buttonIndex, 1);
 		}

src/sql/workbench/services/dialog/browser/wizardModal.ts

@@ -99,8 +99,8 @@ export class WizardModal extends Modal {
 		this._wizard.onMessageChange(message => messageChangeHandler(message));
 	}
 
-	private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true, requirePageValid: boolean = false): Button {
+	private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true, requirePageValid: boolean = false, index?: number): Button {
-		let buttonElement = this.addFooterButton(button.label, onSelect, button.position, button.secondary);
+		let buttonElement = this.addFooterButton(button.label, onSelect, button.position, button.secondary, index);
 		buttonElement.enabled = button.enabled;
 		if (registerClickEvent) {
 			button.registerClickEvent(buttonElement.onDidClick);
@@ -199,6 +199,16 @@ export class WizardModal extends Modal {
 		if (dialogPaneToShow && readHeader) {
 			status(`${dialogPaneToShow.pageNumberDisplayText} ${dialogPaneToShow.title}`);
 		}
+
+		// Remove the current page's custom buttons
+		this._wizard.pages[this._wizard.currentPage]?.customButtons.forEach(button => {
+			this.removeFooterButton(button.label);
+		});
+		// Add the custom buttons for the new page
+		this._wizard.pages[index]?.customButtons.forEach((button, buttonIndex) => {
+			let buttonElement = this.addDialogButton(button, undefined, undefined, undefined, buttonIndex);
+			this.updateButtonElement(buttonElement, button);
+		});
 		this.setButtonsForPage(index);
 		this._wizard.setCurrentPage(index);
 		let currentPageValid = this._wizard.pages[this._wizard.currentPage].valid;