feat: add beta flag to component templates (#35802)

Mark components like libraryv2 and problem bank beta in API to be used by both legacy templates and new authoring mfe.

Also updates order of components.

cms/djangoapps/contentstore/views/component.py

@@ -49,17 +49,19 @@ log = logging.getLogger(__name__)
 
 # NOTE: This list is disjoint from ADVANCED_COMPONENT_TYPES
 COMPONENT_TYPES = [
-    'discussion',
-    'library',
-    'library_v2',  # Not an XBlock
-    'itembank',
     'html',
-    'openassessment',
-    'problem',
     'video',
+    'problem',
+    'itembank',
+    'library_v2',  # Not an XBlock
+    'library',
+    'discussion',
+    'openassessment',
     'drag-and-drop-v2',
 ]
 
+BETA_COMPONENT_TYPES = ['library_v2', 'itembank']
+
 ADVANCED_COMPONENT_TYPES = sorted({name for name, class_ in XBlock.load_classes()} - set(COMPONENT_TYPES))
 
 ADVANCED_PROBLEM_TYPES = settings.ADVANCED_PROBLEM_TYPES
@@ -426,7 +428,8 @@ def get_component_templates(courselike, library=False):  # lint-amnesty, pylint:
             "type": category,
             "templates": templates_for_category,
             "display_name": component_display_names[category],
-            "support_legend": create_support_legend_dict()
+            "support_legend": create_support_legend_dict(),
+            "beta": category in BETA_COMPONENT_TYPES,
         })
 
     # Libraries do not support advanced components at this time.
@@ -476,7 +479,7 @@ def get_component_templates(courselike, library=False):  # lint-amnesty, pylint:
             course_advanced_keys
         )
     if advanced_component_templates['templates']:
-        component_templates.insert(0, advanced_component_templates)
+        component_templates.append(advanced_component_templates)
 
     return component_templates
 

cms/djangoapps/contentstore/views/tests/test_block.py

@@ -3184,13 +3184,13 @@ class TestComponentTemplates(CourseTestCase):
         templates = get_component_templates(self.course)
         button_names = [template["display_name"] for template in templates]
         self.assertIn("Advanced", button_names)
-        self.assertEqual(len(templates[0]["templates"]), len(expected_xblocks))
+        self.assertEqual(len(templates[-1]["templates"]), len(expected_xblocks))
         template_display_names = [
-            template["display_name"] for template in templates[0]["templates"]
+            template["display_name"] for template in templates[-1]["templates"]
         ]
         self.assertEqual(template_display_names, expected_xblocks)
         template_support_levels = [
-            template["support_level"] for template in templates[0]["templates"]
+            template["support_level"] for template in templates[-1]["templates"]
         ]
         self.assertEqual(template_support_levels, expected_support_levels)
 

cms/static/js/models/component_template.js

@@ -11,7 +11,8 @@ define(['backbone'], function(Backbone) {
             // boilerplate_name (may be null)
             // is_common (only used for problems)
             templates: [],
-            support_legend: {}
+            support_legend: {},
+            beta: false,
         },
         parse: function(response) {
             // Returns true only for templates that both have no boilerplate and are of
@@ -26,6 +27,7 @@ define(['backbone'], function(Backbone) {
             this.templates = response.templates;
             this.display_name = response.display_name;
             this.support_legend = response.support_legend;
+            this.beta = response.beta;
 
             // Sort the templates.
             this.templates.sort(function(a, b) {

cms/static/js/views/components/add_xblock_button.js

@@ -8,7 +8,8 @@ define(['js/views/baseview', 'edx-ui-toolkit/js/utils/html-utils'],
                 var attributes = {
                     type: this.model.type,
                     templates: this.model.templates,
-                    display_name: this.model.display_name
+                    display_name: this.model.display_name,
+                    beta: this.model.beta,
                 };
                 BaseView.prototype.initialize.call(this);
                 this.template = this.loadTemplate('add-xblock-component-button');

cms/templates/js/add-xblock-component-button.underscore

@@ -6,7 +6,7 @@
   <span class="large-template-icon large-<%- type %>-icon"></span>
   <span class="sr"> <%- gettext("Add Component:") %></span>
   <span class="name"><%- display_name %></span>
-  <% if (type === 'library_v2' || type === 'itembank') { %>
+  <% if (beta) { %>
   <span class="beta"><%- gettext("Beta") %></span>
   <% } %>
 </button>