MC-10833: Resolve TypeScript errors

- Implement Preview interfaces to resolve toolbar issues

Author: davemacaulay

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

@@ -8,6 +8,8 @@ import ko from "knockout";
 import events from "Magento_PageBuilder/js/events";
 import {OptionInterface, ValueInterface} from "./content-type-toolbar.types";
 import Preview from "./content-type/preview";
+import {PreviewCollectionInterface} from "./content-type/preview-collection.types";
+import {PreviewInterface} from "./content-type/preview.types";
 import checkStageFullScreen from "./utils/check-stage-full-screen";
 
 /**
@@ -54,10 +56,10 @@ export default class Toolbar {
     /**
      * Set state based on toolbar focusin event for the preview
      *
-     * @param {Preview} context
+     * @param {ContentTypeToolbarPreviewInterface} context
      * @param {Event} event
      */
-    public onFocusIn(context: Preview, event: Event): void {
+    public onFocusIn(context: ContentTypeToolbarPreviewInterface, event: Event): void {
         const currentContentTypeTarget = context.toolbar.getCurrentContentTypeTarget();
         const toolbarOptions = currentContentTypeTarget.find(".pagebuilder-toolbar-options");
         // Change toolbar orientation if overflow on full screen mode
@@ -86,10 +88,10 @@ export default class Toolbar {
     /**
      * Set state based on toolbar focusout event for the preview
      *
-     * @param {Preview} context
+     * @param {ContentTypeToolbarPreviewInterface} context
      * @param {Event} event
      */
-    public onFocusOut(context: Preview, event: Event): void {
+    public onFocusOut(context: ContentTypeToolbarPreviewInterface, event: Event): void {
         const currentContentTypeTarget = context.toolbar.getCurrentContentTypeTarget();
         currentContentTypeTarget.removeClass("pagebuilder-toolbar-active");
         currentContentTypeTarget.find(".pagebuilder-toolbar-options").css("transform", "");
@@ -108,3 +110,13 @@ export default class Toolbar {
         return $(`#${this.preview.parent.id}`).find(".pagebuilder-content-type");
     }
 }
+
+/**
+ * Preview interface for preview instances implementation the toolbar functionality
+ */
+export interface ContentTypeToolbarPreviewInterface extends PreviewInterface {
+    toolbar: Toolbar;
+}
+export interface ContentTypeToolbarPreviewCollectionInterface extends PreviewCollectionInterface {
+    toolbar: Toolbar;
+}

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

@@ -9,7 +9,7 @@ import _ from "underscore";
 import ContentTypeConfigInterface from "../../content-type-config.types";
 import HideShowOption from "../../content-type-menu/hide-show-option";
 import {OptionsInterface} from "../../content-type-menu/option.types";
-import Toolbar from "../../content-type-toolbar";
+import Toolbar, {ContentTypeToolbarPreviewInterface} from "../../content-type-toolbar";
 import {OptionInterface} from "../../content-type-toolbar.types";
 import ContentTypeInterface from "../../content-type.types";
 import {ContentTypeDroppedCreateEventParamsInterface} from "../content-type-events.types";
@@ -19,7 +19,7 @@ import BasePreview from "../preview";
 /**
  * @api
  */
-export default class Preview extends BasePreview {
+export default class Preview extends BasePreview implements ContentTypeToolbarPreviewInterface {
     public toolbar: Toolbar;
     private element: Element;
 

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

@@ -7,8 +7,9 @@ import ContentTypeCollectionInterface from "../content-type-collection.types";
 import createContentType from "../content-type-factory";
 import ContentTypeInterface from "../content-type.types";
 import Preview from "./preview";
+import {PreviewCollectionInterface} from "./preview-collection.types";
 
-export default class PreviewCollection extends Preview {
+export default class PreviewCollection extends Preview implements PreviewCollectionInterface {
     public parent: ContentTypeCollectionInterface;
 
     /**

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+import ContentTypeCollectionInterface from "../content-type-collection.types";
+import PreviewCollection from "./preview-collection";
+
+export interface PreviewCollectionInterface extends PreviewCollection {
+    parent: ContentTypeCollectionInterface;
+}

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

@@ -29,11 +29,12 @@ import {get, set} from "../utils/object";
 import appearanceConfig from "./appearance-config";
 import ObservableUpdater from "./observable-updater";
 import ObservableObject from "./observable-updater.types";
+import {PreviewInterface} from "./preview.types";
 
 /**
  * @api
  */
-export default class Preview {
+export default class Preview implements PreviewInterface {
     public parent: ContentTypeInterface;
     public config: ContentTypeConfigInterface;
     public data: ObservableObject = {};

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

@@ -0,0 +1,24 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import ContentTypeConfigInterface from "../content-type-config.types";
+import ContentTypeInterface from "../content-type.types";
+import ObservableObject from "./observable-updater.types";
+
+export interface PreviewInterface {
+    parent: ContentTypeInterface;
+    config: ContentTypeConfigInterface;
+    data: ObservableObject;
+    displayLabel: KnockoutObservable<string>;
+    display: KnockoutObservable<boolean>;
+    wrapperElement: Element;
+    placeholderCss: KnockoutObservable<object>;
+    isPlaceholderVisible: KnockoutObservable<boolean>;
+    isEmpty: KnockoutObservable<boolean>;
+    /**
+     * @deprecated
+     */
+    previewData: {[key: string]: any};
+}