Repository: oppia/oppia

Issue:
[BUG]: Not able to click topic tile in the math classroom page
### Describe the bug

In the math classroom page (develop branch), the topic tile is not working i.e., on clicking the topic for navigating into the topic viewer page an error message is presented in the console.

### URL of the page where the issue is observed.

`/learn/math`

### Steps To Reproduce

Steps to repro:
1. Create profile and add admin rights
2. Load dummy topic from the admin page
3. Add the topic ID into classroom config in the Config tab under /admin
4. Navigate to the math classroom page at /learn/math
5. Click on the topic

### Expected Behavior


1. The console error should not be presented
2. Should be able to click on the topic tile in the classroom and navigate to the topic viewer page.

### Screenshots/Videos


https://github.com/oppia/oppia/assets/57531197/d52e3fc3-a1a9-4b4e-91e5-e36a27d5c447



### What device are you using?

Desktop

### Operating System

Linux

### What browsers are you seeing the problem on?

Chrome

### Browser version

_No response_

### Additional context

_No response_

### Tips for developers

Before tackling the bug, please use `git bisect` (see https://git-scm.com/docs/git-bisect) to investigate which PR caused it (you only need to go back as far as commit https://github.com/oppia/oppia/commits/9a334e9). If you find the PR, leave a comment on this issue pointing to it, or just say that it happened before commit 9a334e9 if you could reproduce it there. This will help us fix the issue by reverting the faulty PR.

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!

[BUG]: Not able to click topic tile in the math classroom page
### Describe the bug

In the math classroom page (develop branch), the topic tile is not working i.e., on clicking the topic for navigating into the topic viewer page an error message is presented in the console.

### URL of the page where the issue is observed.

`/learn/math`

### Steps To Reproduce

Steps to repro:
1. Create profile and add admin rights
2. Load dummy topic from the admin page
3. Add the topic ID into classroom config in the Config tab under /admin
4. Navigate to the math classroom page at /learn/math
5. Click on the topic

### Expected Behavior


1. The console error should not be presented
2. Should be able to click on the topic tile in the classroom and navigate to the topic viewer page.

### Screenshots/Videos


https://github.com/oppia/oppia/assets/57531197/d52e3fc3-a1a9-4b4e-91e5-e36a27d5c447



### What device are you using?

Desktop

### Operating System

Linux

### What browsers are you seeing the problem on?

Chrome

### Browser version

_No response_

### Additional context

_No response_

### Tips for developers

Before tackling the bug, please use `git bisect` (see https://git-scm.com/docs/git-bisect) to investigate which PR caused it (you only need to go back as far as commit https://github.com/oppia/oppia/commits/9a334e9). If you find the PR, leave a comment on this issue pointing to it, or just say that it happened before commit 9a334e9 if you could reproduce it there. This will help us fix the issue by reverting the faulty PR.

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:
Adding @prafulbbandre & @SanjaySajuJacob for ref.
This issue arises because the dummy topics created when clicking on "Activities > Load dummy new structures data" in the Admin page are malformed. They don't have the necessary data (e.g. thumbnail, meta tag content, etc.)

To fix this, investigate the method _load_dummy_new_structures_data() in core/controllers/admin.py. Go to /admin and generate a topic according to the instructions in the issue description, Then visit the topic that was generated (which you can find from the /topics-and-skills-dashboard page). Your fix is correct once the generated topic does not contain any warnings.

In order to claim this issue, please show a screenshot of the generated topic that shows that it doesn't have any warnings, and explain the changes that you made in order to remove each warning. Thanks!
Hello there! would like to fix this issue, an you assign it to me
Hi @SiddharthaKR ,
Thankyou for showing interest in this issue.
As Per the guidance at [Contributing-code-to-Oppia](https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia), please provide an explanation of what your PR will do (with names of files you're changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue.
@prafulbbandre 
Based on the provided information in the issue tag and having a glance of the codebase.

**Problem Description**:
The problem occurs when creating a new topic, and certain fields such as meta tag content are not properly validated.
NULL values are being passed to the HTML templates, which is causing issues.

**Files to be looked into**:
_generate_dummy_classroom method in an admin.py.

create_default_topic method in topic_domain.py  --> return cls(
                                                                                    topic_id, name, name, url_fragment, None, None, None,...)
save_new_topic method in  topic_domain.py..
publish_topic method in  topic_domain.py.

_create_topic method in  topic_services.py.

validate method in topic_domain.py.

require_valid_meta_tag_content method in utils.py.

Also if necessary values are obtained at Fronted so the corresponding frontend files

**Solution Steps**:-
-Ensuring Default Topic Data in generate_dummy_classroom
-Improving Validation In the create_default_topic - Validating the fields such as name, url_fragment, description, 
 meta_tag_content, etc., to ensure they are not NULL and meet the required criteria.
-Handling NULL Values in HTML Templates to resolve warnings

> @prafulbbandre Based on the provided information in the issue tag and having a glance of the codebase.
> 
> **Problem Description**: The problem occurs when creating a new topic, and certain fields such as meta tag content are not properly validated. NULL values are being passed to the HTML templates, which is causing issues.
> 
> **Files to be looked into**: _generate_dummy_classroom method in an admin.py.
> 
> create_default_topic method in topic_domain.py --> return cls( topic_id, name, name, url_fragment, None, None, None,...) save_new_topic method in topic_domain.py.. publish_topic method in topic_domain.py.
> 
> _create_topic method in topic_services.py.
> 
> validate method in topic_domain.py.
> 
> require_valid_meta_tag_content method in utils.py.
> 
> Also if necessary values are obtained at Fronted so the corresponding frontend files
> 
> **Solution Steps**:- -Ensuring Default Topic Data in generate_dummy_classroom -Improving Validation In the create_default_topic - Validating the fields such as name, url_fragment, description, meta_tag_content, etc., to ensure they are not NULL and meet the required criteria. -Handling NULL Values in HTML Templates to resolve warnings

Assigning @SiddharthaKR,
Please ensure you provide image and video proofs from the test server with the URL section in the PR.
Please provide PR opening date.
Thank you!
Thanks @prafulbbandre, considering  proper testing I will try to open the PR till 9th of October 
Hi @SiddharthaKR, any update?
Hello @Nik-09  @prafulbbandre  will you please assign me to this issue ?
I've deassigned @SiddharthaKR due to inactivity. 

@pritam2317 Per the guidance at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue, please provide an explanation of what your PR will do (with names of files you're changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue. Try to also explain clearly why this bug is occurring, pointing to specific lines of code as needed to support your argument.

Please also follow the other instructions on that wiki page if you have not yet done so. Thanks!
Hello, we are two students who would like to fix this bug. For our university course we are supposed to find an open source project that seems relevant to us and liked the idea of your project. We would use the next 4 weeks to fix this bug if that's okay :) 
Hi @jeanninedar Please follow this [comment](https://github.com/oppia/oppia/issues/18667#issuecomment-1785022656) to get started.
I have already added the following tasks in _load_dummy_new_structures_data() of core/controllers/admin.py. -
i)thumbnail_filename 
ii)thumbnail_bg_color 
now the slicing problem is solved. 
![Screenshot from 2023-11-16 13-32-34](https://github.com/oppia/oppia/assets/72196402/cd6f50f9-05de-41cb-acf5-cf868c4b1036)

I'm little bit confused whether we should publish the dummy topic or not? and Please assign me to this issue.
Thank you @pritam2317 for solving the issue of slicing. I am assigning this issue to you. I think publishing the Dummy Topic will be beneficial since this will save time for development/testing for others.

@prafulbbandre @seanlip WDYT regarding the publication of the dummy topic?
Thanks

Yup, ok to publish the dummy topic. Thanks!
Hello,
as this issue has now been assigned, we will keep looking for other open issues.

Kind regards and best of luck!  
> Hello, as this issue has now been assigned, we will keep looking for other open issues.
> 
> Kind regards and best of luck!

Hi @jeanninedar ,
Please take a look at this starter [Good first issues](https://github.com/orgs/oppia/projects/3/views/10) to get started and rather than asking to get assign try to explain your solution to any open issue this will help you to get assigned to it. If the solution looks good we can assign you the issue.
Hope this helps.
Thanks!




> > Hello, as this issue has now been assigned, we will keep looking for other open issues.
> > Kind regards and best of luck!
> 
> Hi @jeanninedar , Please take a look at this starter [Good first issues](https://github.com/orgs/oppia/projects/3/views/10) to get started and rather than asking to get assign try to explain your solution to any open issue this will help you to get assigned to it. If the solution looks good we can assign you the issue. Hope this helps. Thanks!

Hey @prafulbbandre,
thank you very much for the advice! We'll have a look at it :)
Hi @pritam2317 Please let me know the PR opening date.
Thanks!
Within 2-3 day's I'll create the PR because currently i'm out of station. @prafulbbandre 
It's been 2-3 days and there's been no update, so I'm deassigning. If anyone else would like to take up this issue, please post a screenshot/video showing that it's working on your local machine and explain what code changes you made. Thanks!
within today i will do it forsure...
Adding @prafulbbandre & @SanjaySajuJacob for ref.
This issue arises because the dummy topics created when clicking on "Activities > Load dummy new structures data" in the Admin page are malformed. They don't have the necessary data (e.g. thumbnail, meta tag content, etc.)

To fix this, investigate the method _load_dummy_new_structures_data() in core/controllers/admin.py. Go to /admin and generate a topic according to the instructions in the issue description, Then visit the topic that was generated (which you can find from the /topics-and-skills-dashboard page). Your fix is correct once the generated topic does not contain any warnings.

In order to claim this issue, please show a screenshot of the generated topic that shows that it doesn't have any warnings, and explain the changes that you made in order to remove each warning. Thanks!
Hello there! would like to fix this issue, an you assign it to me
Hi @SiddharthaKR ,
Thankyou for showing interest in this issue.
As Per the guidance at [Contributing-code-to-Oppia](https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia), please provide an explanation of what your PR will do (with names of files you're changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue.
@prafulbbandre 
Based on the provided information in the issue tag and having a glance of the codebase.

**Problem Description**:
The problem occurs when creating a new topic, and certain fields such as meta tag content are not properly validated.
NULL values are being passed to the HTML templates, which is causing issues.

**Files to be looked into**:
_generate_dummy_classroom method in an admin.py.

create_default_topic method in topic_domain.py  --> return cls(
                                                                                    topic_id, name, name, url_fragment, None, None, None,...)
save_new_topic method in  topic_domain.py..
publish_topic method in  topic_domain.py.

_create_topic method in  topic_services.py.

validate method in topic_domain.py.

require_valid_meta_tag_content method in utils.py.

Also if necessary values are obtained at Fronted so the corresponding frontend files

**Solution Steps**:-
-Ensuring Default Topic Data in generate_dummy_classroom
-Improving Validation In the create_default_topic - Validating the fields such as name, url_fragment, description, 
 meta_tag_content, etc., to ensure they are not NULL and meet the required criteria.
-Handling NULL Values in HTML Templates to resolve warnings

> @prafulbbandre Based on the provided information in the issue tag and having a glance of the codebase.
> 
> **Problem Description**: The problem occurs when creating a new topic, and certain fields such as meta tag content are not properly validated. NULL values are being passed to the HTML templates, which is causing issues.
> 
> **Files to be looked into**: _generate_dummy_classroom method in an admin.py.
> 
> create_default_topic method in topic_domain.py --> return cls( topic_id, name, name, url_fragment, None, None, None,...) save_new_topic method in topic_domain.py.. publish_topic method in topic_domain.py.
> 
> _create_topic method in topic_services.py.
> 
> validate method in topic_domain.py.
> 
> require_valid_meta_tag_content method in utils.py.
> 
> Also if necessary values are obtained at Fronted so the corresponding frontend files
> 
> **Solution Steps**:- -Ensuring Default Topic Data in generate_dummy_classroom -Improving Validation In the create_default_topic - Validating the fields such as name, url_fragment, description, meta_tag_content, etc., to ensure they are not NULL and meet the required criteria. -Handling NULL Values in HTML Templates to resolve warnings

Assigning @SiddharthaKR,
Please ensure you provide image and video proofs from the test server with the URL section in the PR.
Please provide PR opening date.
Thank you!
Thanks @prafulbbandre, considering  proper testing I will try to open the PR till 9th of October 
Hi @SiddharthaKR, any update?
Hello @Nik-09  @prafulbbandre  will you please assign me to this issue ?
I've deassigned @SiddharthaKR due to inactivity. 

@pritam2317 Per the guidance at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue, please provide an explanation of what your PR will do (with names of files you're changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue. Try to also explain clearly why this bug is occurring, pointing to specific lines of code as needed to support your argument.

Please also follow the other instructions on that wiki page if you have not yet done so. Thanks!
Hello, we are two students who would like to fix this bug. For our university course we are supposed to find an open source project that seems relevant to us and liked the idea of your project. We would use the next 4 weeks to fix this bug if that's okay :) 
Hi @jeanninedar Please follow this [comment](https://github.com/oppia/oppia/issues/18667#issuecomment-1785022656) to get started.
I have already added the following tasks in _load_dummy_new_structures_data() of core/controllers/admin.py. -
i)thumbnail_filename 
ii)thumbnail_bg_color 
now the slicing problem is solved. 
![Screenshot from 2023-11-16 13-32-34](https://github.com/oppia/oppia/assets/72196402/cd6f50f9-05de-41cb-acf5-cf868c4b1036)

I'm little bit confused whether we should publish the dummy topic or not? and Please assign me to this issue.
Thank you @pritam2317 for solving the issue of slicing. I am assigning this issue to you. I think publishing the Dummy Topic will be beneficial since this will save time for development/testing for others.

@prafulbbandre @seanlip WDYT regarding the publication of the dummy topic?
Thanks

Yup, ok to publish the dummy topic. Thanks!
Hello,
as this issue has now been assigned, we will keep looking for other open issues.

Kind regards and best of luck!  
> Hello, as this issue has now been assigned, we will keep looking for other open issues.
> 
> Kind regards and best of luck!

Hi @jeanninedar ,
Please take a look at this starter [Good first issues](https://github.com/orgs/oppia/projects/3/views/10) to get started and rather than asking to get assign try to explain your solution to any open issue this will help you to get assigned to it. If the solution looks good we can assign you the issue.
Hope this helps.
Thanks!




> > Hello, as this issue has now been assigned, we will keep looking for other open issues.
> > Kind regards and best of luck!
> 
> Hi @jeanninedar , Please take a look at this starter [Good first issues](https://github.com/orgs/oppia/projects/3/views/10) to get started and rather than asking to get assign try to explain your solution to any open issue this will help you to get assigned to it. If the solution looks good we can assign you the issue. Hope this helps. Thanks!

Hey @prafulbbandre,
thank you very much for the advice! We'll have a look at it :)
Hi @pritam2317 Please let me know the PR opening date.
Thanks!
Within 2-3 day's I'll create the PR because currently i'm out of station. @prafulbbandre 
It's been 2-3 days and there's been no update, so I'm deassigning. If anyone else would like to take up this issue, please post a screenshot/video showing that it's working on your local machine and explain what code changes you made. Thanks!
within today i will do it forsure...

Resolving patch:
diff --git a/core/controllers/admin.py b/core/controllers/admin.py
--- a/core/controllers/admin.py
+++ b/core/controllers/admin.py
@@ -55,8 +55,6 @@
 from core.domain import stats_services
 from core.domain import story_domain
 from core.domain import story_services
-from core.domain import subtopic_page_domain
-from core.domain import subtopic_page_services
 from core.domain import topic_domain
 from core.domain import topic_fetchers
 from core.domain import topic_services
@@ -622,13 +620,18 @@ def _load_dummy_new_structures_data(self) -> None:
                     'User does not have enough rights to generate data.')
             topic_id_1 = topic_fetchers.get_new_topic_id()
             topic_id_2 = topic_fetchers.get_new_topic_id()
+
             story_id = story_services.get_new_story_id()
+
             skill_id_1 = skill_services.get_new_skill_id()
             skill_id_2 = skill_services.get_new_skill_id()
             skill_id_3 = skill_services.get_new_skill_id()
+
             question_id_1 = question_services.get_new_question_id()
             question_id_2 = question_services.get_new_question_id()
             question_id_3 = question_services.get_new_question_id()
+            question_id_4 = question_services.get_new_question_id()
+            question_id_5 = question_services.get_new_question_id()
 
             skill_1 = self._create_dummy_skill(
                 skill_id_1, 'Dummy Skill 1', '<p>Dummy Explanation 1</p>')
@@ -643,12 +646,23 @@ def _load_dummy_new_structures_data(self) -> None:
                 question_id_2, 'Question 2', [skill_id_2])
             question_3 = self._create_dummy_question(
                 question_id_3, 'Question 3', [skill_id_3])
+            question_4 = self._create_dummy_question(
+                question_id_4, 'Question 4', [skill_id_1])
+            question_5 = self._create_dummy_question(
+                question_id_5, 'Question 5', [skill_id_1])
+
             question_services.add_question(self.user_id, question_1)
+            question_services.add_question(self.user_id, question_4)
+            question_services.add_question(self.user_id, question_5)
             question_services.add_question(self.user_id, question_2)
             question_services.add_question(self.user_id, question_3)
 
             question_services.create_new_question_skill_link(
                 self.user_id, question_id_1, skill_id_1, 0.3)
+            question_services.create_new_question_skill_link(
+                self.user_id, question_id_4, skill_id_1, 0.3)
+            question_services.create_new_question_skill_link(
+                self.user_id, question_id_5, skill_id_1, 0.3)
             question_services.create_new_question_skill_link(
                 self.user_id, question_id_2, skill_id_2, 0.5)
             question_services.create_new_question_skill_link(
@@ -657,21 +671,21 @@ def _load_dummy_new_structures_data(self) -> None:
             topic_1 = topic_domain.Topic.create_default_topic(
                 topic_id_1, 'Dummy Topic 1', 'dummy-topic-one', 'description',
                 'fragm')
+            topic_1.skill_ids_for_diagnostic_test = [skill_id_1]
+            topic_1.thumbnail_filename = 'thumbnail.svg'
+            topic_1.thumbnail_bg_color = '#C6DCDA'
+            topic_1.subtopics = [
+                topic_domain.Subtopic(
+                    1, 'Title', [skill_id_1], 'image.svg',
+                    constants.ALLOWED_THUMBNAIL_BG_COLORS['subtopic'][0], 21131,
+                    'dummy-subtopic-three')]
+            topic_1.next_subtopic_id = 2
+            topic_1.add_canonical_story(story_id)
+
             topic_2 = topic_domain.Topic.create_default_topic(
                 topic_id_2, 'Empty Topic', 'empty-topic', 'description',
                 'fragm')
 
-            topic_1.add_canonical_story(story_id)
-            topic_1.add_uncategorized_skill_id(skill_id_1)
-            topic_1.add_uncategorized_skill_id(skill_id_2)
-            topic_1.add_uncategorized_skill_id(skill_id_3)
-            topic_1.add_subtopic(1, 'Dummy Subtopic Title', 'dummysubtopic')
-            topic_1.move_skill_id_to_subtopic(None, 1, skill_id_2)
-            topic_1.move_skill_id_to_subtopic(None, 1, skill_id_3)
-
-            subtopic_page = (
-                subtopic_page_domain.SubtopicPage.create_default_subtopic_page(
-                    1, topic_id_1))
             # These explorations were chosen since they pass the validations
             # for published stories.
             self._reload_exploration('6')
@@ -758,16 +772,8 @@ def generate_dummy_story_nodes(
             skill_services.save_new_skill(self.user_id, skill_3)
             story_services.save_new_story(self.user_id, story)
             topic_services.save_new_topic(self.user_id, topic_1)
+            topic_services.publish_topic(topic_id_1, self.user_id)
             topic_services.save_new_topic(self.user_id, topic_2)
-            subtopic_page_services.save_subtopic_page(
-                self.user_id, subtopic_page, 'Added subtopic',
-                [topic_domain.TopicChange({
-                    'cmd': topic_domain.CMD_ADD_SUBTOPIC,
-                    'subtopic_id': 1,
-                    'title': 'Dummy Subtopic Title',
-                    'url_fragment': 'dummy-fragment'
-                })]
-            )
 
             # Generates translation opportunities for the Contributor Dashboard.
             exp_ids_in_story = story.story_contents.get_all_linked_exp_ids()


Test patch:
diff --git a/core/controllers/admin_test.py b/core/controllers/admin_test.py
--- a/core/controllers/admin_test.py
+++ b/core/controllers/admin_test.py
@@ -560,7 +560,7 @@ def test_load_new_structures_data(self) -> None:
                     skill_summaries[0].id, skill_summaries[1].id,
                     skill_summaries[2].id], 0)
         )
-        self.assertEqual(len(questions), 3)
+        self.assertEqual(len(questions), 5)
         # Testing that there are 3 hindi translation opportunities
         # available on the Contributor Dashboard. Hindi was picked arbitrarily,
         # any language code other than english (what the dummy explorations
diff --git a/scripts/populate_sample_contributor_data_test.py b/scripts/populate_sample_contributor_data_test.py
--- a/scripts/populate_sample_contributor_data_test.py
+++ b/scripts/populate_sample_contributor_data_test.py
@@ -29,7 +29,6 @@
 from core.platform import models
 from core.platform.auth import firebase_auth_services_test
 from core.tests import test_utils
-
 from scripts import populate_sample_contributor_data
 
 import requests
@@ -210,7 +209,7 @@ def _assert_generate_sample_new_structures_data(self) -> None:
                 ],
                 0)
         )
-        self.assertEqual(len(questions), 3)
+        self.assertEqual(len(questions), 5)
 
         translation_opportunities, _, _ = (
             opportunity_services.get_translation_opportunities('hi', '', None))
@@ -221,11 +220,16 @@ def _assert_topics_in_classroom(self, classroom_name: str) -> None:
         classroom_dict = self.get_json(
             '%s/%s' % (feconf.CLASSROOM_DATA_HANDLER, classroom_name))
         topic_summaries = topic_fetchers.get_all_topic_summaries()
-        for topic_summary in topic_summaries:
+        topic_summary_dicts_from_classroom = classroom_dict[
+            'topic_summary_dicts']
+        for index, topic_summary in enumerate(topic_summaries):
             topic_summary_dict = dict(topic_summary.to_dict())
-            topic_summary_dict['is_published'] = False
-            self.assertIn(
-                topic_summary_dict, classroom_dict['topic_summary_dicts'])
+            topic_summary_dict_from_classroom = (
+                topic_summary_dicts_from_classroom[index])
+            topic_summary_dict['is_published'] = (
+                topic_summary_dict_from_classroom['is_published'])
+            self.assertEqual(
+                topic_summary_dict, topic_summary_dict_from_classroom)
 
     def _assert_sign_up_new_user(self, email: str, username: str) -> None:
         """Asserts that the function _mock_firebase_auth_create_user() is called