MC-3146: Add new row appearances to configuration

- Refactor part of observable updater to prepare the view model ahead of time
- Ensure name is always present in config
- Fix some ~16 type issues, introduce 3 new errors, rebuild ts-errors.json

Author: davemacaulay

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

@@ -68,18 +68,24 @@ export default function createContentType(
 /**
  * Merge defaults and content type data
  *
- * @param {Config} config
+ * @param {ContentTypeConfigInterface} config
  * @param {object} data
  * @returns {any}
  */
-function prepareData(config, data: {}) {
+function prepareData(config: ContentTypeConfigInterface, data: {}) {
     const defaults: FieldDefaultsInterface = {};
     if (config.fields) {
-        _.each(config.fields, (field: ConfigFieldInterface, key: string | number) => {
+        _.each(config.fields, (field, key: string | number) => {
             defaults[key] = field.default;
         });
     }
-    return _.extend(defaults, data);
+    return _.extend(
+        defaults,
+        data,
+        {
+            name: config.name,
+        },
+    );
 }
 
 /**

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

@@ -10,6 +10,8 @@ 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;
@@ -31,15 +33,35 @@ 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 {object} viewModel
+     * @param {Preview | Master} viewModel
      * @param {DataObject} data
      */
-    public update(viewModel: object, data: DataObject) {
-        const appearance = data && data.appearance !== undefined ? data.appearance : undefined;
-        const appearanceConfiguration = appearanceConfig(viewModel.parent.config.name, appearance);
+    public update(viewModel: Preview | Master, data: DataObject) {
+        const appearanceConfiguration = this.getAppearanceConfig(viewModel, data);
         if (undefined === appearanceConfiguration
             || undefined === appearanceConfiguration.data_mapping
             || undefined === appearanceConfiguration.data_mapping.elements
@@ -199,4 +221,16 @@ 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

@@ -0,0 +1,18 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+interface PreviewDataElementData {
+    [key: string]: any;
+}
+
+export default interface PreviewData {
+    [key: string]: {
+        [key: string]: KnockoutObservable<PreviewDataElementData>;
+        attributes: KnockoutObservable<PreviewDataElementData>;
+        style: KnockoutObservable<PreviewDataElementData>;
+        css: KnockoutObservable<PreviewDataElementData>;
+        html: KnockoutObservable<PreviewDataElementData>;
+    };
+}

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

@@ -29,14 +29,15 @@ 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: ObservableObject = {};
+    public data: PreviewData = {};
     public displayLabel: KnockoutObservable<string>;
     public wrapperElement: Element;
 
@@ -77,6 +78,12 @@ 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),
+        );
     }
 
     /**
@@ -432,9 +439,9 @@ export default class Preview {
      */
     protected bindEvents() {
         this.parent.dataStore.subscribe(
-            (data: DataObject) => {
+            _.debounce(() => {
                 this.updateObservables();
-            },
+            }, 10),
         );
     }
 

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

@@ -55,6 +55,13 @@ process.stdin.on('end', () => {
         });
     }
 
+    // Uncomment to re-generate
+    // require('fs').writeFileSync(
+    //     require('path').join(__dirname, 'ts-errors.json'),
+    //     JSON.stringify(compilerErrors, null, 2),
+    //     'utf8'
+    // );
+
     const newErrors = [];
     const resolvedErrors = [];
     // Walk each file to do an error comparison