From 8ab2ec25eab69a17d5c07d1e15f9832f31014e50 Mon Sep 17 00:00:00 2001
From: Thiemo Kreuz <thiemo.kreuz@wikimedia.de>
Date: Thu, 15 Jul 2021 15:01:35 +0200
Subject: [PATCH] Fix template editor showing more than one new sidebar

Bug: T274544
Bug: T286715
Change-Id: I9fe8b53a73b1862eca2d99afb02aa3d532d61918
---
 .../ui/dialogs/ve.ui.MWTemplateDialog.js      | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js b/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
index 4e23dbcdf5..246e288ff6 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
@@ -470,6 +470,11 @@ ve.ui.MWTemplateDialog.prototype.getSetupProcess = function ( data ) {
 			this.bookletLayout.autoFocus = false;
 
 			if ( this.isNewSidebar ) {
+				// FIXME: This is created at the wrong time. That's why we run into the situation
+				//  where an old instance exists. Should be in initialize().
+				if ( this.pocSidebar ) {
+					this.pocSidebar.$element.remove();
+				}
 				this.pocSidebar = new ve.ui.MWTransclusionOutlineContainerWidget(
 					this.transclusionModel,
 					this.bookletLayout
@@ -530,12 +535,17 @@ ve.ui.MWTemplateDialog.prototype.getSetupProcess = function ( data ) {
 				dialog.$body.append( dialog.bookletLayout.$element );
 				if ( dialog.pocSidebar ) {
 					// TODO: bookletLayout will be deprecated.
-					dialog.bookletLayout.outlinePanel.$element.prepend( $( '<div>' )
-						.addClass( 've-ui-mwTemplateDialog-pocSidebar-debug-container' )
-						.append(
-							dialog.pocSidebar.$element,
-							dialog.bookletLayout.outlineSelectWidget.$element
-						) );
+					var $debugContainer = dialog.bookletLayout.outlinePanel.$element
+						.children( '.ve-ui-mwTemplateDialog-pocSidebar-debug-container' );
+					if ( !$debugContainer.length ) {
+						$debugContainer = $( '<div>' )
+							.addClass( 've-ui-mwTemplateDialog-pocSidebar-debug-container' )
+							.prependTo( dialog.bookletLayout.outlinePanel.$element );
+					}
+					$debugContainer.append(
+						dialog.pocSidebar.$element,
+						dialog.bookletLayout.outlineSelectWidget.$element
+					);
 				}
 
 				dialog.bookletLayout.autoFocus = true;