refactor: some refactoring

openedx · Feb 13, 2025 · 362e883 · 362e883
1 parent 698580e
commit 362e883
Show file tree

Hide file tree

Showing 7 changed files with 168 additions and 45 deletions.
diff --git a/cms/djangoapps/contentstore/views/block.py b/cms/djangoapps/contentstore/views/block.py
@@ -323,7 +323,18 @@ def xblock_edit_view(request, usage_key_string):
     with store.bulk_operations(usage_key.course_key):
         course, xblock, lms_link, preview_lms_link = _get_item_in_course(request, usage_key)
         container_handler_context = get_container_handler_context(request, usage_key, course, xblock)
-        container_handler_context.update({'action_name': 'edit'})
+
+        fragment = get_preview_fragment(request, xblock, {})
+
+        hashed_resources = {
+            hash_resource(resource): resource._asdict() for resource in fragment.resources
+        }
+
+        container_handler_context.update({
+            "action_name": "edit",
+            "resources": list(hashed_resources.items()),
+        })
+
         return render_to_response('container_editor.html', container_handler_context)
 
 

diff --git a/cms/djangoapps/contentstore/views/tests/test_block.py b/cms/djangoapps/contentstore/views/tests/test_block.py
@@ -23,6 +23,7 @@
 from opaque_keys.edx.locator import BlockUsageLocator, CourseLocator
 from pyquery import PyQuery
 from pytz import UTC
+from bs4 import BeautifulSoup
 from web_fragments.fragment import Fragment
 from webob import Response
 from xblock.core import XBlockAside
@@ -4582,5 +4583,27 @@ def test_xblock_edit_view(self):
 
         html_content = resp.content.decode(resp.charset)
         self.assertIn("var decodedActionName = 'edit';", html_content)
-        self.assertIn('"lms_url": "http://localhost:8000/courses/course-v1:org.0+course_0+Run_0/jump_to/block-v1:org.0+course_0+Run_0+type@video+block@My_Video"', html_content)
-        self.assertIn('"embed_lms_url": "http://localhost:8000/xblock/block-v1:org.0+course_0+Run_0+type@video+block@My_Video"', html_content)
+        self.assertIn(
+            '"lms_url": "http://localhost:8000/courses/course-v1:org.0+course_0+Run_0/'
+            'jump_to/block-v1:org.0+course_0+Run_0+type@video+block@My_Video"',
+            html_content
+        )
+        self.assertIn(
+            '"embed_lms_url": "http://localhost:8000/xblock/block-v1:org.0+course_0+Run_0/'
+            'type@video+block@My_Video"',
+            html_content
+        )
+
+    def test_xblock_edit_view_contains_resources(self):
+        url = reverse_usage_url("xblock_edit_handler", self.video.location)
+        resp = self.client.get(url)
+        self.assertEqual(resp.status_code, 200)
+
+        html_content = resp.content.decode(resp.charset)
+        soup = BeautifulSoup(html_content, "html.parser")
+
+        resource_links = [link["href"] for link in soup.find_all("link", {"rel": "stylesheet"})]
+        script_sources = [script["src"] for script in soup.find_all("script") if script.get("src")]
+
+        self.assertGreater(len(resource_links), 0, f"No CSS resources found in HTML. Found: {resource_links}")
+        self.assertGreater(len(script_sources), 0, f"No JS resources found in HTML. Found: {script_sources}")
diff --git a/cms/static/cms/js/main.js b/cms/static/cms/js/main.js
@@ -47,6 +47,15 @@ define([
                 title: gettext("Studio's having trouble saving your work"),
                 message: message
             });
+            try {
+                window.parent.postMessage({
+                    type: 'studioAjaxError',
+                    message: 'Sends a message when an AJAX error occurs',
+                    payload: {}
+                }, document.referrer);
+            } catch (e) {
+                console.error(e);
+            }
             console.log('Studio AJAX Error', { // eslint-disable-line no-console
                 url: event.currentTarget.URL,
                 response: jqXHR.responseText,

diff --git a/cms/static/js/views/container.js b/cms/static/js/views/container.js
@@ -70,17 +70,6 @@ function($, _, XBlockView, ModuleUtils, gettext, StringUtils, NotificationView)
                     newParent = undefined;
                 },
                 update: function(event, ui) {
-                    try {
-                        window.parent.postMessage(
-                            {
-                                type: 'refreshPositions',
-                                message: 'Refresh positions of all xblocks',
-                                payload: {}
-                            }, document.referrer
-                        );
-                    } catch (e) {
-                        console.error(e);
-                    }
                     // When dragging from one ol to another, this method
                     // will be called twice (once for each list). ui.sender will
                     // be null if the change is related to the list the element
@@ -137,6 +126,17 @@ function($, _, XBlockView, ModuleUtils, gettext, StringUtils, NotificationView)
                     if (successCallback) {
                         successCallback();
                     }
+                    try {
+                        window.parent.postMessage(
+                            {
+                                type: 'refreshPositions',
+                                message: 'Refresh positions of all xblocks',
+                                payload: {}
+                            }, document.referrer
+                        );
+                    } catch (e) {
+                        console.error(e);
+                    }
                     // Update publish and last modified information from the server.
                     xblockInfo.fetch();
                 }

diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js
@@ -149,6 +149,9 @@ function($, _, Backbone, gettext, BasePage,
                     case 'refreshXBlock':
                         this.render();
                         break;
+                    case 'completeXBlockEditing':
+                        this.refreshXBlock(xblockElement, false);
+                        break;
                     case 'completeManageXBlockAccess':
                         this.refreshXBlock(xblockElement, false);
                         break;
@@ -507,6 +510,18 @@ function($, _, Backbone, gettext, BasePage,
                     window.location.href = destinationUrl;
                     return;
                 }
+
+                if (this.options.isIframeEmbed) {
+                    return window.parent.postMessage(
+                        {
+                            type: 'editXBlock',
+                            message: 'Sends a message when the legacy modal window is shown',
+                            payload: {
+                                id: this.findXBlockElement(event.target).data('locator')
+                            }
+                        }, document.referrer
+                    );
+                }
             }
 
             var xblockElement = this.findXBlockElement(event.target),
@@ -1050,23 +1065,20 @@ function($, _, Backbone, gettext, BasePage,
         },
 
         viewXBlockContent: function(event) {
-          try {
-            if (this.options.isIframeEmbed) {
-              event.preventDefault();
-              var usageId = event.currentTarget.href.split('/').pop() || '';
-              window.parent.postMessage(
-                {
-                  type: 'handleViewXBlockContent',
-                  payload: {
-                    usageId: usageId,
-                  },
-                }, document.referrer
-              );
-              return true;
+            try {
+                if (this.options.isIframeEmbed) {
+                    event.preventDefault();
+                    var usageId = event.currentTarget.href.split('/').pop() || '';
+                    window.parent.postMessage({
+                        type: 'handleViewXBlockContent',
+                        message: 'View the content of the XBlock',
+                        payload: { usageId },
+                    }, document.referrer);
+                    return true;
+                }
+            } catch (e) {
+                console.error(e);
             }
-          } catch (e) {
-            console.error(e);
-          }
         },
 
         toggleSaveButton: function() {

diff --git a/cms/static/sass/course-unit-mfe-iframe-bundle.scss b/cms/static/sass/course-unit-mfe-iframe-bundle.scss
@@ -3,9 +3,10 @@
 
 body {
   min-width: 800px;
+  background: transparent;
 }
 
-.wrapper {
+[class*="view-"] .wrapper {
   .inner-wrapper {
     max-width: 100%;
   }
@@ -114,7 +115,6 @@ body {
           background-color: $primary;
           color: $white;
           border-color: $transparent;
-        color: $white;
       }
 
         &:focus {
@@ -417,6 +417,10 @@ body {
       }
     }
   }
+
+  .studio-xblock-wrapper::marker {
+    content: '';
+  }
 }
 
 .view-container .content-primary {
@@ -537,19 +541,40 @@ body {
   }
 }
 
-[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item {
-  .editor-button,
-  .settings-button {
-    @extend %light-button;
-  }
+body [class*="view-"] .openassessment_editor_buttons.xblock-actions {
+  padding: 15px 2% 3px 2%;
 }
 
-[class*="view-"] .wrapper.wrapper-modal-window .modal-window .modal-actions .action-primary {
-  @extend %primary-button;
+[class*="view-"] {
+  .modal-lg {
+    max-width: 1200px;
+  }
+
+  .modal-lg.modal-editor .modal-header .editor-modes .action-item {
+    .editor-button,
+    .settings-button {
+      @extend %light-button;
+    }
+  }
+
+  .wrapper.wrapper-modal-window .modal-window .modal-actions .action-primary {
+    @extend %primary-button;
+  }
+
+  #openassessment-editor {
+    #oa_basic_settings_editor #openassessment_title_editor_wrapper input, input[type=number] {
+      width: 48%;
+    }
+  }
 }
 
-div.wrapper-comp-settings {
+[class*="view-"] div.wrapper-comp-settings {
   .list-input.settings-list {
+    input:not([type="file"]):not([type="number"]),
+    select {
+      width: 48%;
+    }
+
     .metadata-list-enum .create-setting {
       @extend %modal-actions-button;
 
@@ -573,6 +598,7 @@ div.wrapper-comp-settings {
   .list-input.settings-list {
     .field.comp-setting-entry.is-set .setting-input {
       color: $text-color;
+      margin-bottom: 5px;
     }
 
     select {
@@ -760,3 +786,42 @@ select {
 .wrapper-xblock .xblock-header-primary .header-actions .wrapper-nav-sub {
   z-index: $zindex-dropdown;
 }
+
+.xblock-studio_view-drag-and-drop-v2 .xblock--drag-and-drop--editor {
+  .zone-align-select,
+  .item-styles-form input,
+  .drag-builder textarea,
+  .drag-builder textarea,
+  .drag-builder textarea,
+  .drag-builder textarea,
+  .target-image-form textarea  {
+    width: 100%;
+  }
+
+  .target-image-form input[type="text"] {
+    width: 100%;
+
+    &.background-url {
+      margin-bottom: 10px;
+    }
+
+    &.autozone-layout {
+      &.autozone-layout-cols,
+      &.autozone-layout-rows {
+        width: auto;
+      }
+    }
+
+    &.autozone-size {
+      &.autozone-size-width,
+      &.autozone-size-height {
+        width: auto;
+      }
+    }
+  }
+
+  .feedback-tab input:not([type=checkbox]),
+  .xblock--drag-and-drop--editor .feedback-tab select {
+    width: 100%;
+  }
+}
diff --git a/cms/templates/container_editor.html b/cms/templates/container_editor.html
@@ -82,9 +82,12 @@
             <link rel="stylesheet" type="text/css" href="${static.url('common/css/vendor/editImageModal.min.css')}" />
         % endif
         <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
-        {% comment %} TODO: Confirm if we can retrieve static files from the backend {% endcomment %}
-        <link rel="stylesheet" type="text/css" href="${static.url('dist/openassessment-ltr.57031c2cf8d1638b07a0.css')}" />
-        </%block>
+        % for _, resource in resources:
+            % if resource['kind'] == 'url' and resource['mimetype'] == 'text/css':
+                <link rel="stylesheet" href="${resource['data']}" type="text/css" />
+            % endif
+        % endfor
+    </%block>
 
     <!-- Hotjar Tracking Code -->
     <script>
@@ -101,8 +104,8 @@
 </head>
 
 <body class="${static.dir_rtl()} <%block name='bodyclass'></%block> lang_${LANGUAGE_CODE} view-container">
-    <%static:js group='base_vendor'/>
-    <%static:webpack entry="commons"/>
+    <%static:js group='base_vendor' />
+    <%static:webpack entry='commons' />
 
     <script type="text/javascript">
         window.baseUrl = '${settings.STATIC_URL | n, js_escaped_string}';