feat: post message on preview library block changes (#35861)

Posts message with library xblock changes info instead of displaying a modal if the unit is rendered in an iframe.

cms/static/js/views/modals/preview_v2_library_changes.js

@@ -4,9 +4,8 @@
  * authors to preview the new version of a library-sourced XBlock, and decide
  * whether to accept ("sync") or reject ("ignore") the changes.
  */
-define(['jquery', 'underscore', 'gettext', 'js/views/modals/base_modal',
-    'common/js/components/utils/view_utils', 'js/views/utils/xblock_utils'],
-function($, _, gettext, BaseModal, ViewUtils, XBlockViewUtils) {
+define(['jquery', 'underscore', 'gettext', 'js/views/modals/base_modal', 'common/js/components/utils/view_utils'],
+function($, _, gettext, BaseModal, ViewUtils) {
     'use strict';
 
     var PreviewLibraryChangesModal = BaseModal.extend({
@@ -40,18 +39,24 @@ function($, _, gettext, BaseModal, ViewUtils, XBlockViewUtils) {
 
         /**
          * Show an edit modal for the specified xblock
-         * @param xblockElement The element that contains the xblock to be edited.
-         * @param rootXBlockInfo An XBlockInfo model that describes the root xblock on the page.
+         * @param xblockInfo The XBlockInfo model that describes the xblock.
+         * @param courseAuthoringMfeUrl The course authoring mfe url.
+         * @param upstreamBlockId The library block id.
+         * @param upstreamBlockVersionSynced The library block current version.
          * @param refreshFunction A function to refresh the block after it has been updated
          */
-        showPreviewFor: function(xblockElement, rootXBlockInfo, refreshFunction) {
-            this.xblockElement = xblockElement;
-            this.xblockInfo = XBlockViewUtils.findXBlockInfo(xblockElement, rootXBlockInfo);
-            this.courseAuthoringMfeUrl = rootXBlockInfo.attributes.course_authoring_url;
-            const headerElement = xblockElement.find('.xblock-header-primary');
+        showPreviewFor: function(
+          xblockInfo,
+          courseAuthoringMfeUrl,
+          upstreamBlockId,
+          upstreamBlockVersionSynced,
+          refreshFunction
+        ) {
+            this.xblockInfo = xblockInfo;
+            this.courseAuthoringMfeUrl = courseAuthoringMfeUrl;
             this.downstreamBlockId = this.xblockInfo.get('id');
-            this.upstreamBlockId = headerElement.data('upstream-ref');
-            this.upstreamBlockVersionSynced = headerElement.data('version-synced');
+            this.upstreamBlockId = upstreamBlockId;
+            this.upstreamBlockVersionSynced = upstreamBlockVersionSynced;
             this.refreshFunction = refreshFunction;
 
             this.render();

cms/static/js/views/pages/container.js

@@ -442,15 +442,43 @@ function($, _, Backbone, gettext, BasePage,
 
         /** Show the modal for previewing changes before syncing a library-sourced XBlock. */
         showXBlockLibraryChangesPreview: function(event, options) {
+            const xblockElement = this.findXBlockElement(event.target);
+            const self = this;
+            const xblockInfo = XBlockUtils.findXBlockInfo(xblockElement, this.model);
+            const courseAuthoringMfeUrl = this.model.attributes.course_authoring_url;
+            const headerElement = xblockElement.find('.xblock-header-primary');
+            const upstreamBlockId = headerElement.data('upstream-ref');
+            const upstreamBlockVersionSynced = headerElement.data('version-synced');
+
+            try {
+                if (this.options.isIframeEmbed) {
+                    window.parent.postMessage(
+                        {
+                            type: 'showXBlockLibraryChangesPreview',
+                            payload: {
+                                downstreamBlockId: xblockInfo.get('id'),
+                                displayName: xblockInfo.get('display_name'),
+                                isVertical: xblockInfo.isVertical(),
+                                upstreamBlockId,
+                                upstreamBlockVersionSynced,
+                            }
+                        }, document.referrer
+                    );
+                    return true;
+                }
+            } catch (e) {
+                console.error(e);
+            }
+
             event.preventDefault();
-
-            var xblockElement = this.findXBlockElement(event.target),
-                self = this,
-                modal = new PreviewLibraryChangesModal(options);
-
-            modal.showPreviewFor(xblockElement, this.model, function() {
-                self.refreshXBlock(xblockElement, false);
-            });
+            var modal = new PreviewLibraryChangesModal(options);
+            modal.showPreviewFor(
+                xblockInfo,
+                courseAuthoringMfeUrl,
+                upstreamBlockId,
+                upstreamBlockVersionSynced,
+                function() { self.refreshXBlock(xblockElement, false); }
+            );
         },
 
         /** Show the multi-select library content picker, for adding to a Problem Bank (itembank) Component */

cms/static/sass/course-unit-mfe-iframe-bundle.scss

@@ -43,7 +43,7 @@
     .wrapper-xblock .header-actions .actions-list .action-item .action-button {
       @extend %button-styles;
 
-      color: $black;
+      color: $primary;
 
       .fa-ellipsis-v {
         font-size: $base-font-size;
@@ -51,6 +51,7 @@
 
       &:hover {
         background-color: $primary;
+        color: $white;
         border-color: $transparent;
       }
 
@@ -373,6 +374,12 @@
   }
 }
 
+.library-sync-button {
+  .action-button-text {
+    display: none;
+  }
+}
+
 .action-edit {
   .action-button-text {
     display: none;

cms/templates/studio_xblock_wrapper.html

@@ -143,7 +143,7 @@ upstream_info = UpstreamLink.try_get_for_block(xblock)
                                     data-tooltip="${_("Update available - click to sync")}"
                                 >
                                     <span class="icon fa fa-refresh" aria-hidden="true"></span>
-                                    <span>${_("Update available")}</span>
+                                    <span class="action-button-text">${_("Update available")}</span>
                                 </button>
                             </li>
                         % endif