feat: new editor design

Author: rpenido

lti_consumer/lti_xblock.py

@@ -268,7 +268,7 @@ class LtiConsumerXBlock(StudioEditableXBlockMixin, XBlock):
         default=_("LTI Consumer"),
     )
     description = String(
-        display_name=_("LTI Application Information"),
+        display_name=_("Data Sharing Notice"),
         help=_(
             "Enter a description of the third party application. "
             "If requesting username and/or email, use this text box to inform users "
@@ -384,7 +384,7 @@ class LtiConsumerXBlock(StudioEditableXBlockMixin, XBlock):
     )
 
     lti_1p3_enable_nrps = Boolean(
-        display_name=_("Enable LTI NRPS"),
+        display_name=_("Names & Roles (NRPS)"),
         help=_("Enable LTI Names and Role Provisioning Services."),
         default=False,
         scope=Scope.settings
@@ -407,11 +407,11 @@ class LtiConsumerXBlock(StudioEditableXBlockMixin, XBlock):
         ),
     )
     lti_advantage_ags_mode = String(
-        display_name=_("LTI Assignment and Grades Service"),
+        display_name=_("Assignment and Grades"),
         values=[
+            {"display_name": _("Declarative"), "value": "declarative"},
+            {"display_name": _("Programmatic"), "value": "programmatic"},
             {"display_name": _("Disabled"), "value": "disabled"},
-            {"display_name": _("Allow tools to submit grades only (declarative)"), "value": "declarative"},
-            {"display_name": _("Allow tools to manage and submit grade (programmatic)"), "value": "programmatic"},
         ],
         default='declarative',
         scope=Scope.settings,
@@ -465,7 +465,7 @@ class LtiConsumerXBlock(StudioEditableXBlockMixin, XBlock):
         scope=Scope.settings
     )
     launch_target = String(
-        display_name=_("LTI Launch Target"),
+        display_name=_("Open tool in"),
         help=_(
             "Select Inline if you want the LTI content to open in an IFrame in the current page. "
             "Select Modal if you want the LTI content to open in a modal window in the current page. "
@@ -481,7 +481,7 @@ class LtiConsumerXBlock(StudioEditableXBlockMixin, XBlock):
         ],
     )
     button_text = String(
-        display_name=_("Button Text"),
+        display_name=_("Launch Button Text"),
         help=_(
             "Enter the text on the button used to launch the third party application. "
             "This setting is only used when Hide External Tool is set to False and "
@@ -491,7 +491,7 @@ class LtiConsumerXBlock(StudioEditableXBlockMixin, XBlock):
         scope=Scope.settings
     )
     inline_height = Integer(
-        display_name=_("Inline Height"),
+        display_name=_("Inline Height (px)"),
         help=_(
             "Enter the desired pixel height of the iframe which will contain the LTI tool. "
             "This setting is only used when Hide External Tool is set to False and "
@@ -501,7 +501,7 @@ class LtiConsumerXBlock(StudioEditableXBlockMixin, XBlock):
         scope=Scope.settings
     )
     modal_height = Integer(
-        display_name=_("Modal Height"),
+        display_name=_("Modal Height (px)"),
         help=_(
             "Enter the desired viewport percentage height of the modal overlay which will contain the LTI tool. "
             "This setting is only used when Hide External Tool is set to False and "
@@ -511,7 +511,7 @@ class LtiConsumerXBlock(StudioEditableXBlockMixin, XBlock):
         scope=Scope.settings
     )
     modal_width = Integer(
-        display_name=_("Modal Width"),
+        display_name=_("Modal Width (px)"),
         help=_(
             "Enter the desired viewport percentage width of the modal overlay which will contain the LTI tool. "
             "This setting is only used when Hide External Tool is set to False and "
@@ -521,13 +521,13 @@ class LtiConsumerXBlock(StudioEditableXBlockMixin, XBlock):
         scope=Scope.settings
     )
     has_score = Boolean(
-        display_name=_("Scored"),
+        display_name=_("This activity is graded"),
         help=_("Select True if this component will receive a numerical score from the external LTI system."),
         default=False,
         scope=Scope.settings
     )
     weight = Float(
-        display_name="Weight",
+        display_name=_("Grade Weight"),
         help=_(
             "Enter the number of points possible for this component.  "
             "The default value is 1.0.  "
@@ -558,7 +558,7 @@ class LtiConsumerXBlock(StudioEditableXBlockMixin, XBlock):
         scope=Scope.settings
     )
     accept_grades_past_due = Boolean(
-        display_name=_("Accept grades past deadline"),
+        display_name=_("Accept grades after due date"),
         help=_("Select True to allow third party systems to post grades past the deadline."),
         default=True,
         scope=Scope.settings
@@ -567,21 +567,21 @@ class LtiConsumerXBlock(StudioEditableXBlockMixin, XBlock):
     # party application. When "Open in New Page" is not selected, the tool automatically appears without any
     # user action.
     ask_to_send_username = Boolean(
-        display_name=_("Request user's username"),
+        display_name=_("Share Username"),
         # Translators: This is used to request the user's username for a third party service.
         help=_("Select True to request the user's username."),
         default=False,
         scope=Scope.settings
     )
     ask_to_send_full_name = Boolean(
-        display_name=_("Request user's full name"),
+        display_name=_("Share Full name"),
         # Translators: This is used to request the user's full name for a third party service.
         help=_("Select True to request the user's full name."),
         default=False,
         scope=Scope.settings
     )
     ask_to_send_email = Boolean(
-        display_name=_("Request user's email"),
+        display_name=_("Share Email"),
         # Translators: This is used to request the user's email for a third party service.
         help=_("Select True to request the user's email address."),
         default=False,
@@ -759,6 +759,7 @@ def get_pii_sharing_enabled(self):
         #       because the service is not defined in those contexts.
         return True
 
+    # FIXME: Check this docstring
     @property
     def editable_fields(self):
         """
@@ -1182,14 +1183,43 @@ def studio_view(self, context):
         Get Studio View fragment
         """
         loader = ResourceLoader(__name__)
-        fragment = super().studio_view(context)
 
-        fragment.add_javascript(loader.load_unicode("static/js/xblock_studio_view.js"))
+        context = {
+            'fields': {},
+            'pii_sharing_enabled': self.get_pii_sharing_enabled(),
+        }
+
+        # Add editable fields to context
+        for field_name in self.editable_fields:
+            field = self.fields[field_name]
+            field_info = self._make_field_info(field_name, field)
+            if field_info is not None:
+                context["fields"][field_name] = field_info
+
+        fragment = Fragment()
+        fragment.add_content(loader.render_django_template(
+            '/templates/html/lti_studio_edit.html',
+            context=context,
+            i18n_service=self.runtime.service(self, 'i18n')
+        ))
+
+        fragment.add_css(loader.load_unicode('static/css/xblock_studio_view.css'))
+
+        fragment.add_javascript(loader.load_unicode('static/js/xblock_studio_view.js'))
+
+        fragment.add_javascript(loader.load_unicode('static/js/xblock_studio_view.js'))
+
         js_context = {
             "EXTERNAL_MULTIPLE_LAUNCH_URLS_ENABLED": external_multiple_launch_urls_enabled(
                 self.scope_ids.usage_id.course_key
-            )
+            ),
+            "editableFields": self.editable_fields,
         }
+
+        statici18n_js_url = self._get_statici18n_js_url()
+        if statici18n_js_url:
+            fragment.add_javascript_url(statici18n_js_url)
+
         fragment.initialize_js('LtiConsumerXBlockInitStudio', js_context)
 
         return fragment