MC-3146: Add new row appearances to configuration

This partially reverts commit e6c3886.

- Revert refactoring as it has undesired effects on system

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/observable-updater.js

@@ -10,8 +10,6 @@ import {DataObject} from "../data-store";
 import MassConverterPool from "../mass-converter/converter-pool";
 import {fromSnakeToCamelCase} from "../utils/string";
 import appearanceConfig from "./appearance-config";
-import Master from "./master";
-import Preview from "./preview";
 
 export default class ObservableUpdater {
     private converterPool: typeof ConverterPool;
@@ -33,35 +31,15 @@ export default class ObservableUpdater {
         this.converterResolver = converterResolver;
     }
 
-    /**
-     * Prepare a view model for preview data to be updated later
-     *
-     * @param {Preview} viewModel
-     * @param {DataObject} data
-     */
-    public prepare(viewModel: Preview, data: DataObject) {
-        const appearanceConfiguration = this.getAppearanceConfig(viewModel, data);
-
-        for (const elementName of Object.keys(appearanceConfiguration.data_mapping.elements)) {
-            if (viewModel.data[elementName] === undefined) {
-                viewModel.data[elementName] = {
-                    attributes: ko.observable({}),
-                    style: ko.observable({}),
-                    css: ko.observable({}),
-                    html: ko.observable({}),
-                };
-            }
-        }
-    }
-
     /**
      * Update preview observables after data changed in data store
      *
-     * @param {Preview | Master} viewModel
+     * @param {object} viewModel
      * @param {DataObject} data
      */
-    public update(viewModel: Preview | Master, data: DataObject) {
-        const appearanceConfiguration = this.getAppearanceConfig(viewModel, data);
+    public update(viewModel: object, data: DataObject) {
+        const appearance = data && data.appearance !== undefined ? data.appearance : undefined;
+        const appearanceConfiguration = appearanceConfig(viewModel.parent.config.name, appearance);
         if (undefined === appearanceConfiguration
             || undefined === appearanceConfiguration.data_mapping
             || undefined === appearanceConfiguration.data_mapping.elements
@@ -221,16 +199,4 @@ export default class ObservableUpdater {
         }
         return data;
     }
-
-    /**
-     * Retrieve the appearance config
-     *
-     * @param {Preview | Master} viewModel
-     * @param {DataObject} data
-     * @returns {ContentTypeConfigAppearanceInterface}
-     */
-    private getAppearanceConfig(viewModel: Preview | Master, data: DataObject) {
-        const appearance = data && data.appearance !== undefined ? data.appearance.toString() : undefined;
-        return appearanceConfig(viewModel.parent.config.name, appearance);
-    }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/preview.js

@@ -29,15 +29,14 @@ import StyleAttributeMapper, {StyleAttributeMapperResult} from "../master-format
 import appearanceConfig from "./appearance-config";
 import ObservableObject from "./observable-object.d";
 import ObservableUpdater from "./observable-updater";
-import PreviewData from "./preview-data";
 
 /**
  * @api
  */
 export default class Preview {
     public parent: ContentTypeCollectionInterface;
     public config: ContentTypeConfigInterface;
-    public data: PreviewData = {};
+    public data: ObservableObject = {};
     public displayLabel: KnockoutObservable<string>;
     public wrapperElement: Element;
 
@@ -78,12 +77,6 @@ export default class Preview {
         this.displayLabel = ko.observable(this.config.label);
         this.setupDataFields();
         this.bindEvents();
-
-        // Prepare the observable updater to create all observables required on the view model
-        this.observableUpdater.prepare(
-            this,
-            _.extend({}, this.parent.dataStore.get() as DataObject),
-        );
     }
 
     /**
@@ -439,9 +432,9 @@ export default class Preview {
      */
     protected bindEvents() {
         this.parent.dataStore.subscribe(
-            _.debounce(() => {
+            (data: DataObject) => {
                 this.updateObservables();
-            }, 10),
+            },
         );
     }