feat: Very basic UI for Upstream Sync with Content Library Blocks

* Display an icon for library-sourced content * Show when an update is available
openedx · Oct 15, 2024 · f6f1d13 · f6f1d13
1 parent 1f7c5d5
commit f6f1d13
Showing 1 changed file with 33 additions and 1 deletion.
diff --git a/cms/templates/studio_xblock_wrapper.html b/cms/templates/studio_xblock_wrapper.html
@@ -8,6 +8,7 @@
     dump_js_escaped_json, js_escaped_string
 )
 from cms.djangoapps.contentstore.toggles import use_new_text_editor, use_new_problem_editor, use_new_video_editor, use_video_gallery_flow
+from cms.lib.xblock.upstream_sync import UpstreamLink
 from openedx.core.djangoapps.content_tagging.toggles import is_tagging_feature_disabled
 %>
 <%
@@ -23,6 +24,10 @@
 messages = xblock.validate().to_json()
 has_not_configured_message = messages.get('summary',{}).get('type', None) == 'not-configured'
 block_is_unit = is_unit(xblock)
+
+upstream_info = None
+if xblock.upstream:
+    upstream_info = UpstreamLink.try_get_for_block(xblock)
 %>
 
 <%namespace name='static' file='static_content.html'/>
@@ -103,7 +108,22 @@
                     ${label}
                 </label>
                 % else:
-                <span class="xblock-display-name">${label}</span>
+                    % if upstream_info:
+                        % if upstream_info.error_message:
+                            <!-- "broken link" icon from https://fonts.google.com/icons?selected=Material+Symbols+Outlined:link_off:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%235f6368&icon.query=link -->
+                            <svg role="img" data-tooltip="${_("Sourced from a library - but the upstream link is broken/invalid.")}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 -960 960 960" style="vertical-align: middle; padding-bottom: 4px;">
+                                <path d="m770-302-60-62q40-11 65-42.5t25-73.5q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 57-29.5 105T770-302ZM634-440l-80-80h86v80h-6ZM792-56 56-792l56-56 736 736-56 56ZM440-280H280q-83 0-141.5-58.5T80-480q0-69 42-123t108-71l74 74h-24q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h65l79 80H320Z"/>
+                            </svg>
+                            <span class="sr-only">${_("Sourced from a library - but the upstream link is broken/invalid.")}</span>
+                        % else:
+                            <!-- "library" icon from https://fonts.google.com/icons?selected=Material+Symbols+Outlined:newsstand:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24 -->
+                            <svg role="img" data-tooltip="${_("Sourced from a library.")}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor" style="vertical-align: middle; padding-bottom: 4px;">
+                                <path d="M80-160v-80h800v80H80Zm80-160v-320h80v320h-80Zm160 0v-480h80v480h-80Zm160 0v-480h80v480h-80Zm280 0L600-600l70-40 160 280-70 40Z"/>
+                            </svg>
+                            <span class="sr-only">${_("Sourced from a library.")}</span>
+                        % endif
+                    % endif
+                    <span class="xblock-display-name">${label}</span>
                 % endif
                 % if selected_groups_label:
                 <p class="xblock-group-visibility-label">${selected_groups_label}</p>
@@ -114,6 +134,18 @@
             <ul class="actions-list nav-dd ui-right">
                 % if not is_root:
                     % if can_edit:
+                        % if upstream_info and upstream_info.ready_to_sync:
+                            <li class="action-item">
+                                <button
+                                    class="btn-default library-sync-button action-button"
+                                    data-tooltip="${_("Update available - click to sync")}"
+                                    onclick="$.post('/api/contentstore/v2/downstreams/${xblock.usage_key}/sync').done(() => { location.reload(); })"
+                                >
+                                    <span class="icon fa fa-refresh" aria-hidden="true"></span>
+                                    <span>${_("Update available")}</span>
+                                </button>
+                            </li>
+                        % endif
                         % if use_tagging:
                             <li class="action-item tag-count" data-locator="${xblock.location}"></li>
                         % endif