From 49330a222ac8b3314abf9206d5fc2b27372d2c51 Mon Sep 17 00:00:00 2001 From: Navin Karkera Date: Wed, 20 Nov 2024 00:37:28 +0530 Subject: [PATCH] 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. --- .../modals/preview_v2_library_changes.js | 29 +++++++------ cms/static/js/views/pages/container.js | 42 +++++++++++++++---- .../sass/course-unit-mfe-iframe-bundle.scss | 9 +++- cms/templates/studio_xblock_wrapper.html | 2 +- 4 files changed, 61 insertions(+), 21 deletions(-) diff --git a/cms/static/js/views/modals/preview_v2_library_changes.js b/cms/static/js/views/modals/preview_v2_library_changes.js index 282132898895..943fe103220e 100644 --- a/cms/static/js/views/modals/preview_v2_library_changes.js +++ b/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(); diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js index e0b2542e48fd..1d57eb92b807 100644 --- a/cms/static/js/views/pages/container.js +++ b/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) { - event.preventDefault(); + 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'); - var xblockElement = this.findXBlockElement(event.target), - self = this, - modal = new PreviewLibraryChangesModal(options); + 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); + } - modal.showPreviewFor(xblockElement, this.model, function() { - self.refreshXBlock(xblockElement, false); - }); + event.preventDefault(); + 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 */ diff --git a/cms/static/sass/course-unit-mfe-iframe-bundle.scss b/cms/static/sass/course-unit-mfe-iframe-bundle.scss index 95774ea74058..a71882f1c355 100644 --- a/cms/static/sass/course-unit-mfe-iframe-bundle.scss +++ b/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; diff --git a/cms/templates/studio_xblock_wrapper.html b/cms/templates/studio_xblock_wrapper.html index 14685963c904..41555410236a 100644 --- a/cms/templates/studio_xblock_wrapper.html +++ b/cms/templates/studio_xblock_wrapper.html @@ -143,7 +143,7 @@ data-tooltip="${_("Update available - click to sync")}" > - ${_("Update available")} + ${_("Update available")} % endif