diff --git a/src/sql/workbench/browser/modal/modal.ts b/src/sql/workbench/browser/modal/modal.ts index 1665753387..c2585e9d4e 100644 --- a/src/sql/workbench/browser/modal/modal.ts +++ b/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') { - DOM.append(this._leftFooter!, footerButton); + const container = position === 'left' ? this._leftFooter! : this._rightFooter!; + 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); } diff --git a/src/sql/workbench/services/dialog/browser/wizardModal.ts b/src/sql/workbench/services/dialog/browser/wizardModal.ts index 391f7b66e5..aa2e8c23f8 100644 --- a/src/sql/workbench/services/dialog/browser/wizardModal.ts +++ b/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 { - let buttonElement = this.addFooterButton(button.label, onSelect, button.position, button.secondary); + 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, 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;