temp: implement PoC to display optional_completion info for individual XBlocks

To see "Option 4", you need to enable `XBlockAsidesConfig`.

Author: Agrendalath

common/templates/xblock_wrapper.html

@@ -1,12 +1,25 @@
 ## xss-lint: disable=mako-missing-default
 <%!
 from openedx.core.djangolib.js_utils import dump_js_escaped_json
+from django.utils.translation import gettext as _
 %>
+% if 'data-is-optional="True"' in data_attributes:
+  <span class="optional-completion-banner" style="display: block; background: #5b5b5b67; padding: 8px; margin-bottom: 8px;">${_("Optional 1")}</span>
+% endif
 <div class="${' '.join(classes) | n, decode.utf8}" ${data_attributes}>
+
+% if 'data-is-optional="True"' in data_attributes:
+  <span class="optional-completion-banner" style="display: block; background: #bc43437f; padding: 8px; margin-bottom: 8px;">${_("Optional 2")}</span>
+% endif
+
 % if js_init_parameters:
   <script type="json/xblock-args" class="xblock-json-init-args">
     ${js_init_parameters | n, dump_js_escaped_json}
   </script>
 % endif
   ${content}
 </div>
+
+% if 'data-is-optional="True"' in data_attributes:
+  <span class="optional-completion-banner" style="display: block; background: #215b768b; padding: 8px; margin-bottom: 8px;">${_("Optional 3")}</span>
+% endif

openedx/core/lib/xblock_utils/__init__.py

@@ -23,6 +23,7 @@
 from web_fragments.fragment import Fragment
 from xblock.core import XBlock
 from xblock.exceptions import InvalidScopeError
+from xblock.fields import Scope
 from xblock.scorable import ScorableXBlockMixin
 
 from common.djangoapps import static_replace
@@ -141,6 +142,13 @@ def wrap_xblock(
     if block.name:
         data['name'] = block.name
 
+    # We check whether the block is explicitly set as optional because this information is already displayed for units
+    # in the Learning MFE.
+    has_children = getattr(block, "children", False)
+    is_explicitly_optional = block.get_explicitly_set_fields_by_scope(Scope.settings).get('optional_completion', False)
+    if view != STUDIO_VIEW and not has_children and is_explicitly_optional:
+        data['is-optional'] = getattr(block, 'optional_completion', False)
+
     template_context = {
         'content': block.display_name if display_name_only else frag.content,
         'classes': css_classes,

setup.py

@@ -40,6 +40,7 @@
 ]
 XBLOCKS_ASIDES = [
     'tagging_aside = cms.lib.xblock.tagging:StructuredTagsAside',
+    'optional_completion_aside = xmodule.x_module:OptionalCompletionDisplayAside',
 ]
 
 

xmodule/x_module.py

@@ -1652,3 +1652,25 @@ def get(self, _key):
 
     def set(self, key, value, timeout=None):
         pass
+
+
+class OptionalCompletionDisplayAside(XBlockAside):
+    """
+    Displays the "Optional" information below each optional individual XBlock.
+
+    We check whether the block is explicitly set as optional because this information is already displayed for units
+    in the Learning MFE.
+    """
+
+    @XBlockAside.aside_for(STUDENT_VIEW)
+    def aside_view(self, block, context=None):
+        """The student view for the optional completion aside."""
+        has_children = getattr(block, "children", False)
+        is_explicitly_optional = block.get_explicitly_set_fields_by_scope(Scope.settings).get(
+            'optional_completion', False
+        )
+        if has_children or not is_explicitly_optional:
+            return Fragment("")
+        fragment = Fragment(f'<div class="optional-completion-banner">{_("Optional 4")}</div>')
+        fragment.add_css(".optional-completion-banner { background: #eef; padding: 8px; margin-bottom: 8px; }")
+        return fragment