Allow sub views to hide destroy button in EditConfigurationView

Sub views can now optionally hide the destroy button by setting the
hideDestroyButton property to true or implementing it as a function
that returns a boolean. This provides more flexibility for configuration
views that shouldn't allow deletion in certain contexts.

The implementation maintains backward compatibility - all existing views
continue to show the destroy button by default.

REDMINE-20979

Author: tf

package/spec/editor/views/EditConfigurationView-spec.js

@@ -272,4 +272,83 @@ describe('EditConfigurationView', () => {
       expect(view.$el.find('.back').text()).toBe('Back');
     });
   });
+
+  describe('hideDestroyButton', () => {
+    it('shows destroy button by default', () => {
+      const Model = Backbone.Model.extend({
+        mixins: [configurationContainer(), failureTracking]
+      });
+      const View = EditConfigurationView.extend({
+        configure(configurationEditor) {
+          configurationEditor.tab('general', function() {
+          });
+        }
+      });
+
+      const view = new View({model: new Model()}).render();
+
+      expect(view.$el.find('.destroy')).toHaveLength(1);
+    });
+
+    it('hides destroy button when hideDestroyButton is true', () => {
+      const Model = Backbone.Model.extend({
+        mixins: [configurationContainer(), failureTracking]
+      });
+      const View = EditConfigurationView.extend({
+        hideDestroyButton: true,
+
+        configure(configurationEditor) {
+          configurationEditor.tab('general', function() {
+          });
+        }
+      });
+
+      const view = new View({model: new Model()}).render();
+
+      expect(view.$el.find('.destroy')).toHaveLength(0);
+    });
+
+    it('supports hideDestroyButton as function', () => {
+      const Model = Backbone.Model.extend({
+        mixins: [configurationContainer(), failureTracking]
+      });
+      const View = EditConfigurationView.extend({
+        hideDestroyButton() {
+          return this.model.get('preventDestroy');
+        },
+
+        configure(configurationEditor) {
+          configurationEditor.tab('general', function() {
+          });
+        }
+      });
+
+      const viewWithDestroy = new View({model: new Model({preventDestroy: false})}).render();
+      const viewWithoutDestroy = new View({model: new Model({preventDestroy: true})}).render();
+
+      expect(viewWithDestroy.$el.find('.destroy')).toHaveLength(1);
+      expect(viewWithoutDestroy.$el.find('.destroy')).toHaveLength(0);
+    });
+
+    it('does not prevent destroy event handler when button is shown', () => {
+      const Model = Backbone.Model.extend({
+        mixins: [configurationContainer(), failureTracking],
+        destroyWithDelay: jest.fn()
+      });
+      const View = EditConfigurationView.extend({
+        hideDestroyButton: false,
+
+        configure(configurationEditor) {
+          configurationEditor.tab('general', function() {
+          });
+        }
+      });
+
+      const view = new View({model: new Model()}).render();
+      window.confirm = () => true;
+      view.$el.find('.destroy').click();
+
+      expect(view.model.destroyWithDelay).toHaveBeenCalled();
+    });
+  });
 });

package/src/editor/views/EditConfigurationView.js

@@ -42,6 +42,9 @@ import {editor} from '../base';
  * Override the `goBackPath` property or method to customize the path
  * that the back button navigates to. Defaults to `/`.
  *
+ * Set the `hideDestroyButton` property to `true` to hide the destroy
+ * button.
+ *
  * @param {Object} options
  * @param {Backbone.Model} options.model -
  *   Model including the {@link configurationContainer},
@@ -52,9 +55,9 @@ import {editor} from '../base';
 export const EditConfigurationView = Marionette.Layout.extend({
   className: 'edit_configuration_view',
 
-  template: ({t, backLabel}) => `
+  template: ({t, backLabel, hideDestroyButton}) => `
     <a class="back">${backLabel}</a>
-    <a class="destroy">${t('destroy')}</a>
+    ${hideDestroyButton ? '' : `<a class="destroy">${t('destroy')}</a>`}
 
     <div class="failure">
       <p>${t('save_error')}</p>
@@ -68,7 +71,8 @@ export const EditConfigurationView = Marionette.Layout.extend({
   serializeData() {
     return {
       t: key => this.t(key),
-      backLabel: this.getBackLabel()
+      backLabel: this.getBackLabel(),
+      hideDestroyButton: _.result(this, 'hideDestroyButton')
     };
   },