* feat: Add completion progress bar to dashboard

[SE-4473] Add completion progress bar to dashboard (#29271)

common/lib/xmodule/xmodule/js/src/sequence/display.js

@@ -425,6 +425,8 @@
                     }
                 });
             }
+            // Reload progress bar
+            this.$('#progress-frame').attr('src', this.$('#progress-frame').attr('src'));
         };
 
         Sequence.prototype.mark_active = function(position) {

common/lib/xmodule/xmodule/seq_module.py

@@ -9,6 +9,7 @@ import collections
 import json
 import logging
 from datetime import datetime
+from django.conf import settings
 from functools import reduce
 
 from lxml import etree
@@ -21,7 +22,7 @@ from xblock.core import XBlock
 from xblock.exceptions import NoSuchServiceError
 from xblock.fields import Boolean, Integer, List, Scope, String
 
-from edx_toggles.toggles import LegacyWaffleFlag
+from edx_toggles.toggles import LegacyWaffleFlag, SettingDictToggle
 from xmodule.util.xmodule_django import add_webpack_to_fragment
 from xmodule.x_module import (
     HTMLSnippet,
@@ -65,6 +66,15 @@ TIMED_EXAM_GATING_WAFFLE_FLAG = LegacyWaffleFlag(  # lint-amnesty, pylint: disab
     module_name=__name__,
 )
 
+# .. toggle_name: FEATURES['SHOW_PROGRESS_BAR']
+# .. toggle_implementation: SettingDictToggle
+# .. toggle_default: False
+# .. toggle_description: Set to True to show progress bar.
+# .. toggle_use_cases: open_edx
+# .. toggle_creation_date: 2022-02-09
+# .. toggle_target_removal_date: None
+SHOW_PROGRESS_BAR = SettingDictToggle("FEATURES", "SHOW_PROGRESS_BAR", default=False, module_name=__name__)
+
 
 class SequenceFields:  # lint-amnesty, pylint: disable=missing-class-docstring
     has_children = True
@@ -607,6 +617,9 @@ class SequenceBlock(
 
         fragment = Fragment()
         params = self._get_render_metadata(context, display_items, prereq_met, prereq_meta_info, banner_text, view, fragment)  # lint-amnesty, pylint: disable=line-too-long
+        if SHOW_PROGRESS_BAR.is_enabled() and getattr(settings, 'COMPLETION_AGGREGATOR_URL', ''):
+            parent_block_id = self.get_parent().scope_ids.usage_id.block_id
+            params['chapter_completion_aggregator_url'] = '/'.join([settings.COMPLETION_AGGREGATOR_URL, str(self.course_id), parent_block_id]) + '/'
         fragment.add_content(self.runtime.service(self, 'mako').render_template("seq_module.html", params))
 
         self._capture_full_seq_item_metrics(display_items)

lms/templates/courseware/courseware.html

@@ -21,6 +21,8 @@ from openedx.features.course_experience import course_home_page_title, DISABLE_C
    settings.FEATURES.get('ENABLE_SPECIAL_EXAMS', False) and
    (course.enable_proctored_exams or course.enable_timed_exams)
    )
+
+   completion_aggregator_url = settings.COMPLETION_AGGREGATOR_URL if settings.FEATURES.get("SHOW_PROGRESS_BAR", False) else ""
 %>
 
 % if display_reset_dates_banner:
@@ -241,6 +243,12 @@ ${HTML(fragment.foot_html())}
                                 <span class="nav-item nav-item-sequence">${sequence_title}</span>
                             % endif
                         </div>
+                        % if settings.FEATURES.get("SHOW_PROGRESS_BAR", False):
+                          <div class="container">
+                            <iframe style="border: none; height: 50px; position: relative; top: 10px; width: -webkit-fill-available" src="${completion_aggregator_url}/${course.id}/">
+                            </iframe>
+                          </div>
+                        % endif
                     </div>
                 </nav>
             </div>

lms/templates/seq_module.html

@@ -1,5 +1,8 @@
 <%page expression_filter="h"/>
-<%! from django.utils.translation import pgettext, ugettext as _ %>
+<%!
+  from django.utils.translation import pgettext, ugettext as _
+  from django.conf import settings
+%>
 
 <div id="sequence_${element_id}" class="sequence" data-id="${item_id}"
      data-position="${position}"
@@ -114,6 +117,11 @@
     ${gated_sequence_paywall | n, decode.utf8}
   % else:
   <div class="sr-is-focusable" tabindex="-1"></div>
+  % if settings.FEATURES.get("SHOW_PROGRESS_BAR", False):
+    <div class="progress-container">
+      <iframe id="progress-frame" style="border: none; width: 100%; height: 70px;" src="${chapter_completion_aggregator_url}"></iframe>
+    </div>
+  % endif
 
   % for idx, item in enumerate(items):
   <div id="seq_contents_${idx}"