feat: working react page with implementation of _render_react_page

.eslintrc.js

@@ -14,6 +14,9 @@ config.rules["func-names"] = "off";
 config.rules["max-classes-per-file"] = "off";
 config.rules["prefer-destructuring"] = "off";
 config.rules["no-prototype-builtins"] = "off";
+config.rules["template-curly-spacing"] = "off";
+config.rules["indent"] = "off";
+config.rules["react/prop-types"] = "off";
 
 config.globals["gettext"] = "readonly";
 config.globals["ngettext"] = "readonly";

openassessment/templates/openassessmentblock/react_template.html

@@ -0,0 +1 @@
+<div></div>

openassessment/xblock/load_static.py

@@ -28,41 +28,40 @@ class LoadStatic:
     """
 
     _manifest = {}
-    _base_url = ''
+    _is_dev_server = False
     _is_loaded = False
 
     @staticmethod
     def reload_manifest():
         """
         Reload from manifest file
         """
-        root_url, base_url = '', '/static/dist/'
-        base_url_override = ''
-
-        if hasattr(settings, 'LMS_ROOT_URL'):
-            root_url = settings.LMS_ROOT_URL
-        else:
-            logger.error('LMS_ROOT_URL is undefined')
-
+        # comment this out while developing
+        if (LoadStatic._is_loaded):
+            return
         try:
             json_data = resource_string(__name__, 'static/dist/manifest.json').decode("utf8")
             LoadStatic._manifest = json.loads(json_data)
-            base_url_override = LoadStatic._manifest.get('base_url', None)
+            LoadStatic._is_dev_server = LoadStatic._manifest.get('is_dev_server', False)
             LoadStatic._is_loaded = True
         except OSError:
             logger.error('Cannot find static/dist/manifest.json')
-        finally:
-            if base_url_override and urlparse(base_url_override).scheme:
-                LoadStatic._base_url = base_url_override
-            else:
-                LoadStatic._base_url = urljoin(root_url, base_url)
 
     @staticmethod
     def get_url(key):
         """
         get url from key
         """
-        if not LoadStatic._is_loaded:
-            LoadStatic.reload_manifest()
+        LoadStatic.reload_manifest()
         url = LoadStatic._manifest[key] if key in LoadStatic._manifest else key
-        return urljoin(LoadStatic._base_url, url)
+        if LoadStatic._is_dev_server:
+            return url
+        return urljoin(settings.STATIC_URL, 'dist', url)
+
+    @staticmethod
+    def get_is_dev_server():
+        """
+        get is_dev_server
+        """
+        LoadStatic.reload_manifest()
+        return LoadStatic._is_dev_server

openassessment/xblock/openassessmentblock.py

@@ -584,16 +584,24 @@ def ora_blocks_listing_view(self, context=None):
             "ora_item_view_enabled": ora_item_view_enabled
         }
 
-        template = get_template('openassessmentblock/instructor_dashboard/oa_listing.html')
-
-        min_postfix = '.min' if settings.DEBUG else ''
-
-        return self._create_fragment(
-            template,
+        # template = get_template('openassessmentblock/instructor_dashboard/oa_listing.html')
+
+        # min_postfix = '.min' if settings.DEBUG else ''
+
+        # return self._create_fragment(
+        #     template,
+        #     context_dict,
+        #     initialize_js_func='CourseOpenResponsesListingBlock',
+        #     additional_css=["static/css/lib/backgrid/backgrid%s.css" % min_postfix],
+        #     additional_js=["static/js/lib/backgrid/backgrid%s.js" % min_postfix],
+        #     additional_js_context={
+        #         "ENHANCED_STAFF_GRADER": self.is_enhanced_staff_grader_enabled,
+        #         "ORA_GRADING_MICROFRONTEND_URL": getattr(settings, 'ORA_GRADING_MICROFRONTEND_URL', '')
+        #     }
+        # )
+        return self._render_react_page(
+            'instructor_dashboard/oa_listing',
             context_dict,
-            initialize_js_func='CourseOpenResponsesListingBlock',
-            additional_css=["static/css/lib/backgrid/backgrid%s.css" % min_postfix],
-            additional_js=["static/js/lib/backgrid/backgrid%s.js" % min_postfix],
             additional_js_context={
                 "ENHANCED_STAFF_GRADER": self.is_enhanced_staff_grader_enabled,
                 "ORA_GRADING_MICROFRONTEND_URL": getattr(settings, 'ORA_GRADING_MICROFRONTEND_URL', '')
@@ -664,6 +672,56 @@ def waiting_step_details_view(self, context=None):  # pylint: disable=unused-arg
             additional_js_context=context_dict,
         )
 
+    def _render_react_page(self, page_name, props, on_mount_func=None, additional_js_context=None):
+        template = get_template("openassessmentblock/react_template.html")
+        fragment = Fragment(template.render())
+
+        # if additional_css is None:
+        #     additional_css = []
+        # if additional_js is None:
+        #     additional_js = []
+
+        i18n_service = self.runtime.service(self, 'i18n')
+        if hasattr(i18n_service, 'get_language_bidi') and i18n_service.get_language_bidi():
+            css_url = LoadStatic.get_url("openassessment-rtl.css")
+        else:
+            css_url = LoadStatic.get_url("openassessment-ltr.css")
+
+        # # TODO: load CSS and JavaScript as URLs once they can be served by the CDN
+        # # for css in additional_css:
+        # #     fragment.add_css_url(css)
+        fragment.add_css_url(css_url)
+        fragment.add_javascript_url(LoadStatic.get_url("openassessment-lms.js"))
+        fragment.add_css_url(LoadStatic.get_url("react_base.css"))
+
+        # minified additional_js should be already included in 'make javascript'
+        fragment.add_javascript_url(LoadStatic.get_url("react_base.js"))
+
+        js_context_dict = {
+            "ALLOWED_IMAGE_MIME_TYPES": self.ALLOWED_IMAGE_MIME_TYPES,
+            "ALLOWED_FILE_MIME_TYPES": self.ALLOWED_FILE_MIME_TYPES,
+            "FILE_EXT_BLACK_LIST": self.FILE_EXT_BLACK_LIST,
+            "FILE_TYPE_WHITE_LIST": self.white_listed_file_types,
+            "MAXIMUM_FILE_UPLOAD_COUNT": self.MAX_FILES_COUNT,
+            "TEAM_ASSIGNMENT": self.is_team_assignment(),
+            "AVAILABLE_EDITORS": AVAILABLE_EDITORS,
+            "TEXT_RESPONSE_EDITOR": self.text_response_editor,
+            "PROPS": props,
+            "PAGE_NAME": page_name,
+            "ON_MOUNT_FUNC": on_mount_func,
+            "IS_DEV_SERVER": LoadStatic.get_is_dev_server(),
+            "DISABLE_DEFAULT_CSS": True,
+        }
+
+        # If there's any additional data to be passed down to JS
+        # include it in the context dict
+        if additional_js_context:
+            js_context_dict.update({"CONTEXT": additional_js_context})
+
+        initialize_js_func='RenderReact'
+        fragment.initialize_js(initialize_js_func, js_context_dict)
+        return fragment
+
     def _create_fragment(
         self,
         template,