Repository: oppia/oppia

Issue:
[BUG]: Can't see the Math expression preview at the time of question submission in contributor dashboard of OppiaTestServer.
### Describe the bug

Encountered an issue while navigating the **OppiaTestServer** contributor dashboard: Upon submitting a math-related question and attempting to insert mathematical formulas, the expected expression preview is missing.
This issue impedes efficient question creation and requires resolution for a smoother user experience.

### URL of the page where the issue is observed.

https://www.oppiatestserver.org/contributor-dashboard#

### Steps To Reproduce

1. Go to **contributor-dashboard** of OppiaTestServer.
2. Navigate to **submit question**
3. Then click on any math-related topic **Suggest Question** button.
4. After that select **difficulty level** and **continue**.
5. Then click on the button called **insert mathematical formula** of the text editor.
6. After writing some mathematical expressions, you will find that there is no preview of your written expression.

### Expected Behavior

Mathematical expressions should show a preview while submitting questions via the contributor dashboard on OppiaTestServer."

### Screenshots/Videos

## UI:
![image](https://github.com/oppia/oppia/assets/99060332/c4afd2cd-2fc8-493d-9f85-89f657946fd2)
![unnamed](https://github.com/oppia/oppia/assets/99060332/7013986c-f7bf-4132-9685-bd99b8969257)
## Console:
![unnamed](https://github.com/oppia/oppia/assets/99060332/a5cd070b-4134-4f1e-aa9f-2eb75c6fe71d)


### What device are you using?

Desktop

### Operating System

Windows

### What browsers are you seeing the problem on?

Chrome

### Browser version

122.0.6261.58 

### Additional context

_No response_

### Tips for developers

Before addressing the bug, please identify which PR caused the issue (you can follow the steps [here](https://github.com/oppia/oppia/wiki/How-to-find-the-commit-which-introduced-a-bug)). If you identify the PR, comment on the issue with a link to it. If not, mention the commit hash of the oldest commit you saw the bug on (and the month and year it was made in).

Also, if this is your first issue, please make sure to follow https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue and https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#setting-things-up before claiming it. Thanks!



Discussion:
@seanlip I tried enhancing the `MathJaxDirective` file by including a dynamic script loading functionality to ensure MathJax's availability across different application sections, such as the contributor dashboard, where it might not be loaded by default. It basically checks for MathJax's presence and conditionally appending a script tag to the document's head, the directive can asynchronously load MathJax if necessary. Previously, I was getting "MathJax is undefined" in my console log and it no longer exist after modifying the code ensuring MathJax is available for typesetting mathematical expressions before the directive attempts to use it.
[Screencast from 27-02-24 04:43:12 PM IST.webm](https://github.com/oppia/oppia/assets/15065795/af2077fc-d73d-40cd-b4c7-20fbbf9d2e9f)

@Jaimin791 It doesn't sound like you are addressing the console error noted in the original description? 
Also some of these errors might be related to https://github.com/oppia/oppia/issues/19789, it might be worth seeing what happens after you patch the corresponding fix in.
It does gets fixed in #19789 , see the video in the fixing [PR](https://github.com/oppia/oppia/pull/19832)
> @Jaimin791 It doesn't sound like you are addressing the console error noted in the original description? 

Yup, I did it. The first one (As the screenshot is cropped so not visible) was MathJax is still undefined. 
> It does gets fixed in #19789 , see the video in the fixing [PR](https://github.com/oppia/oppia/pull/19832)

Indeed, it does. 
The two errors are not related. The one described in this bug corresponds to "Queue" property not being found in the Mathjax instance -- this only occurs in the CD page. https://github.com/oppia/oppia/issues/19789 does not fix this particular issue. Reopening.

Possibly caused by a recent migration of the CD page in https://github.com/oppia/oppia/pull/19467 
Just confirming that https://github.com/oppia/oppia/pull/19467 might be the cause. The error is not reproducible in commits before it. As @Jaimin791 hinted, it is probably due to MathJax not getting loaded correctly in the CD page -- we use script tags to fetch the script and it might be getting stripped after the migration.
@kevintab95 I see, it seems that moving from Angular 2 to Angular 8 has caused this issue since you can't add a script tag to a component, therefore even though the script is referenced here: https://github.com/oppia/oppia/blob/431bcbfb2b6a71ed9644deb66a7d6ab175f444a1/core/templates/pages/contributor-dashboard-page/contributor-dashboard-page-root.component.html#L18 it doesn't work. I guess @Jaimin791 can pick this up if you think his solution is good. We should also remove MathJax references when migrating the existing pages.
Thanks @jnvtnguyen. Would it be possible to create a revert PR for this? That's the quickest way to unblock the release -- this is the last bug to fix.

Resolving patch:
diff --git a/core/controllers/contributor_dashboard.py b/core/controllers/contributor_dashboard.py
--- a/core/controllers/contributor_dashboard.py
+++ b/core/controllers/contributor_dashboard.py
@@ -61,6 +61,20 @@ class ClientSideSkillOpportunityDict(opportunity_domain.SkillOpportunityDict):
     topic_name: str
 
 
+class ContributorDashboardPage(
+    base.BaseHandler[Dict[str, str], Dict[str, str]]
+):
+    """Page showing the contributor dashboard."""
+
+    URL_PATH_ARGS_SCHEMAS: Dict[str, str] = {}
+    HANDLER_ARGS_SCHEMAS: Dict[str, Dict[str, str]] = {'GET': {}}
+
+    @acl_decorators.open_access
+    def get(self) -> None:
+        """Handles GET requests and renders the contributor dashboard page."""
+        self.render_template('contributor-dashboard-page.mainpage.html')
+
+
 class ContributionOpportunitiesHandlerNormalizedRequestDict(TypedDict):
     """Dict representation of ContributionOpportunitiesHandler's
     normalized_request dictionary.
diff --git a/main.py b/main.py
--- a/main.py
+++ b/main.py
@@ -319,6 +319,9 @@ def get_redirect_route(
     get_redirect_route(
         r'/translationcontributionstatshandler',
         contributor_dashboard_admin.TranslationContributionStatsHandler),
+    get_redirect_route(
+        r'%s' % feconf.CONTRIBUTOR_DASHBOARD_URL,
+        contributor_dashboard.ContributorDashboardPage),
     get_redirect_route(
         r'%s/<contribution_type>/<contribution_subtype>/<username>' % (
             feconf.CONTRIBUTOR_STATS_SUMMARIES_URL),


Test patch:
diff --git a/core/controllers/contributor_dashboard_test.py b/core/controllers/contributor_dashboard_test.py
--- a/core/controllers/contributor_dashboard_test.py
+++ b/core/controllers/contributor_dashboard_test.py
@@ -50,6 +50,17 @@
 (suggestion_models,) = models.Registry.import_models([models.Names.SUGGESTION])
 
 
+class ContributorDashboardPageTest(test_utils.GenericTestBase):
+    """Test for showing contributor dashboard pages."""
+
+    def test_contributor_dashboard_page_loads_correctly(
+        self
+    ) -> None:
+        response = self.get_html_response(feconf.CONTRIBUTOR_DASHBOARD_URL)
+        response.mustcontain(
+            '<contributor-dashboard-page></contributor-dashboard-page>')
+
+
 class ContributionOpportunitiesHandlerTest(test_utils.GenericTestBase):
     """Unit test for the ContributionOpportunitiesHandler."""