Create skeleton for new History region in editor

[MAILPOET-1976]

assets/css/src/newsletterEditor.scss

@@ -10,6 +10,7 @@
 
 @import 'components/newsletterEditor/components/forms';
 @import 'components/newsletterEditor/components/heading';
+@import 'components/newsletterEditor/components/history';
 @import 'components/newsletterEditor/components/sidebar';
 @import 'components/newsletterEditor/components/sidepanel';
 @import 'components/newsletterEditor/components/save';

assets/js/src/newsletter_editor/App.js

@@ -12,6 +12,7 @@ var AppView = Marionette.View.extend({
     sidebarRegion: '#mailpoet_editor_sidebar',
     bottomRegion: '#mailpoet_editor_bottom',
     headingRegion: '#mailpoet_editor_heading',
+    historyRegion: '#mailpoet_editor_history',
     topRegion: '#mailpoet_editor_top',
   },
 

assets/js/src/newsletter_editor/components/history.js

@@ -0,0 +1,16 @@
+import App from 'newsletter_editor/App';
+import Marionette from 'backbone.marionette';
+
+var Module = {};
+
+Module.HistoryView = Marionette.View.extend({
+  getTemplate: function getTemplate() {
+    return window.templates.history;
+  },
+});
+
+App.on('start', function appStart(StartApp) {
+  StartApp._appView.showChildView('historyRegion', new Module.HistoryView());
+});
+
+export default Module;

assets/js/src/newsletter_editor/webpack_index.jsx

@@ -18,6 +18,7 @@ import 'newsletter_editor/components/styles.js'; // side effect - calls App.on()
 import 'newsletter_editor/components/sidebar.js'; // side effect - calls App.on()
 import 'newsletter_editor/components/content.js'; // side effect - calls App.on()
 import 'newsletter_editor/components/heading.js'; // side effect - calls App.on()
+import 'newsletter_editor/components/history.js'; // side effect - calls App.on()
 import 'newsletter_editor/components/save.js'; // side effect - calls App.on()
 import 'newsletter_editor/components/communication.js'; // side effect - calls App.on()
 

tests/javascript/mochaTestHelper.js

@@ -163,6 +163,7 @@ testHelpers.loadTemplate('blocks/text/widget.hbs', window, { id: 'newsletter_edi
 testHelpers.loadTemplate('blocks/text/settings.hbs', window, { id: 'newsletter_editor_template_text_settings' });
 
 testHelpers.loadTemplate('components/heading.hbs', window, { id: 'newsletter_editor_template_heading' });
+testHelpers.loadTemplate('components/history.hbs', window, { id: 'newsletter_editor_template_history' });
 testHelpers.loadTemplate('components/save.hbs', window, { id: 'newsletter_editor_template_save' });
 testHelpers.loadTemplate('components/styles.hbs', window, { id: 'newsletter_editor_template_styles' });
 
@@ -177,6 +178,7 @@ global.templates = {
   styles: Handlebars.compile(jQuery('#newsletter_editor_template_styles').html()),
   save: Handlebars.compile(jQuery('#newsletter_editor_template_save').html()),
   heading: Handlebars.compile(jQuery('#newsletter_editor_template_heading').html()),
+  history: Handlebars.compile(jQuery('#newsletter_editor_template_history').html()),
 
   sidebar: Handlebars.compile(jQuery('#newsletter_editor_template_sidebar').html()),
   sidebarContent: Handlebars.compile(jQuery('#newsletter_editor_template_sidebar_content').html()),

tests/javascript/newsletter_editor/components/history.spec.js

@@ -0,0 +1,16 @@
+import HistoryComponent from 'newsletter_editor/components/history';
+
+const expect = global.expect;
+
+describe('History', function () {
+  describe('view', function () {
+    var view;
+    beforeEach(function () {
+      view = new (HistoryComponent.HistoryView)();
+    });
+
+    it('renders', function () {
+      expect(view.render).to.not.throw();
+    });
+  });
+});

views/newsletter/editor.html

@@ -237,6 +237,10 @@
     'newsletter_editor_template_heading',
     'newsletter/templates/components/heading.hbs'
   ) %>
+  <%= partial(
+    'newsletter_editor_template_history',
+    'newsletter/templates/components/history.hbs'
+  ) %>
   <%= partial(
     'newsletter_editor_template_save',
     'newsletter/templates/components/save.hbs'
@@ -451,6 +455,9 @@
       heading: Handlebars.compile(
         jQuery('#newsletter_editor_template_heading').html()
       ),
+      history: Handlebars.compile(
+        jQuery('#newsletter_editor_template_history').html()
+      ),
 
       sidebar: Handlebars.compile(
         jQuery('#newsletter_editor_template_sidebar').html()

views/newsletter/templates/components/history.hbs

@@ -0,0 +1,3 @@
+<div class="mailpoet_history_wrapper">
+
+</div>

views/newsletter/templates/components/sidebar/sidebar.hbs

@@ -1,3 +1,4 @@
+<div class="mailpoet_sidebar_region" id="mailpoet_editor_history"></div>
 <div class="mailpoet_region mailpoet_content_region mailpoet_sidebar_region postbox"></div>
 <div class="mailpoet_region mailpoet_layout_region mailpoet_sidebar_region postbox closed"></div>
 <div class="mailpoet_region mailpoet_styles_region mailpoet_sidebar_region postbox closed"></div>

webpack.config.js

@@ -357,6 +357,7 @@ const testConfig = {
       'components/config.spec.js',
       'components/content.spec.js',
       'components/heading.spec.js',
+      'components/history.spec.js',
       'components/save.spec.js',
       'components/sidebar.spec.js',
       'components/styles.spec.js',