Repository: oppia/oppia

Issue:
Replace Jinja templates in the frontend with Angular.
_This is intended as a starter project for newer contributors._

We want to remove all the uses of Jinja from the frontend codebase and replace these with some AngularJS equivalent, with the ultimate aim of getting rid of Jinja so that pages serve and load faster. Each file in the list below has a list of occurrences of Jinja templates that need to be removed and replaced with an appropriate Angular substitute. As an example, you can take a look at [this PR](https://github.com/oppia/oppia/pull/3733/files) and see how changes were made in the file `search_results_directive.html`.

For new contributors: If you're new to Angular, you can give this [tutorial](https://www.codeschool.com/courses/shaping-up-with-angularjs) a try.

If you'd like to help with this issue, please select a file from the list below, put your name in parentheses next to it, and submit a PR after replacing all the jinja templates in that file. Once the PR is submitted, you can tick the checkboxes. Note that all filepaths should be assumed to start from core/templates/dev/head/pages.

----

**Files to remove jinja templates from:**

- [x] header_css_libs.html  (see incomplete work #4958) @jathusan123
  - `{% if MINIFICATION or not DEV_MODE %}`
- [x] header_js_libs.html (see incomplete work #4958)
  - `{% if MINIFICATION or not DEV_MODE %}`
- [x] footer_js_libs.html (#5937)
  - `{% if not DEV_MODE %}`
> - [x] collection_editor/collection_editor.html 
>   - `{% if title %}`
> - [x] exploration_editor/exploration_editor.html 
>   - `{% if title %}`
> - [x] library/library.html 
>   - `{% if page_mode in ['group', 'search'] %}`
> - [x] error/error.html 
>   - `{% if status_code == 400 %}`

**Note:** This part (above quoted) of the issue is moved to #5597 as the fix appears to be a much larger work than a starter project.

**Completed**

- [x] exploration_player/exploration_player.html (previous work #5158) @vojtechjelinek 
  - `{% if exploration_version %}`
  - `{% if not iframed %}` --> first occurrence
  - `{% if not iframed %}` --> second occurrence
- [x] base.html @hoangviet1993 #5048 
  - `{% if additional_angular_modules %}`
  - `{% if iframed %}` (need other approch to remove!) 
  - `{% if DEV_MODE %}`
  - `{% if SITE_FEEDBACK_FORM_URL %}`
- [x] exploration_player/learner_local_nav.html @WickedBrat #4261 
  - `{% if can_edit %}`
  - `{% if username %}`
- [x] exploration_editor/settings_tab/settings_tab.html @code247 #4209 
  - `{% if can_modify_roles %}`
  - `{% if can_release_ownership %}`
  - `{% if can_delete %}`
  - `{% if can_unpublish %}`
- [x] splash pages (All splash files need to be done in one PR) @DubeySandeep #3964
  - `{% if not user_is_logged_in %}`
    - splash/splash.html
    - splash/splash_ah0.html
    - splash/splash_ah1.html
    - splash/splash_ah2.html
    - splash/splash_ai0.html
    - splash/splash_ai1.html
    - splash/splash_ai2.html
    - splash/splash_ai3.html
    - splash/splash_at0.html
    - splash/splash_at1.html
    - splash/splash_at2.html
    - splash/splash_av0.html
    - splash/splash_av1.html
- [x] error/error.html @Nix07 #3969
  - `{% if code == 400 %}` --> first occurrence
  - `{% if code == 400 %}` --> second occurrence
  - `{% if code == 400 %}` --> third occurrence
- [x] preferences/preferences.html @ishucr7 #4019 
  - `{% if username %}`
- [x] forum/forum.html @ishucr7 #4050 
  - `{% if on_localhost %}`
- [x] exploration_editor/feedback_tab/feedback_tab.html @nithusha21 #4123
  - `{% if user_email %}` --> first occurrence
  - `{% if not user_email %}`
  - `{% if user_email %}` --> second occurrence
- [x] creator_dashboard/creator_dashboard.html @aks681 #4127
  - `{% if not can_create_collections %}`
  - `{% if can_create_collections %}` --> first occurrence
  - `{% if can_create_collections %}` --> second occurrence
- [x] exploration_editor/editor_tab/state_editor_responses.html @EvsChen 
  - `{% if SHOW_TRAINABLE_UNRESOLVED_ANSWERS %}` --> first occurrence
  - `{% if SHOW_TRAINABLE_UNRESOLVED_ANSWERS %}` --> second occurrence
- [x] collection_player/collection_player.html @vojtechjelinek #5869
  - `{% if collection_id %}`  (On a quick look we found that we can entirely remove this jinja template as this is of no use. So after complete investigation one can delete this template entirely)
  - `{% if can_edit %}`



Discussion:
I would like to start with collection_player/collection_player.html
Hi @kavyabvishwanath, welcome! Before taking up an issue from here, though, would you mind following the instructions [here](https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#setting-things-up) to get started?
Hi @kavyabvishwanath -- further to my earlier message, thanks for filling in the CLA and survey! I've assigned you to the relevant file. Have fun!
Thank you @seanlip .. I'm on it
Hi, I would like to work on exploration_player/exploration_player.html, is it possible? Normally, I filled the CLA and the survey.
Hi @marion59000, sure! I've assigned you. 
Hi, @seanlip I would like to take error/error.html.
@Nix07, great! Assigned you.
Hi I would like to work on "exploration_editor/feedback_tab/feedback_tab.html"

Hi @nithusha21, great! I've assigned you.
Hi, @seanlip , I would like to work on 'creator_dashboard/creator_dashboard.html'
@aks681, that sounds great! I've assigned you. :)
@seanlip  can i take this 'exploration_editor/exploration_editor.html'
@jervis446, Sure! I've assigned you. :)
is library/library.html free to work on??
@GanitGenius, Yeah it's free. I've assigned you. 
Can I take up the base.html ?
@tameeshB sure, assigned you :)
Hi, Can I take up settings_tab.html?
Hi @code247, welcome :) Before taking this up, would you please follow the steps [here](https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#setting-things-up) to get started?
@code247, assigned you :)
Hi @WickedBrat, before working on this, please follow the steps given [here](https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#setting-things-up) to set things up and get started :)
Hey @WickedBrat, library.html wasn't supposed to be a part of this issue, my bad :( 
Would you mind picking up some other file ?
@WickedBrat, assigned you :)
A new contributor here. Can I have a task assigned to me?
Hi @chrised123, welcome :). I've assigned you to `collection_player/collection_player.html`. You can start working on it (Assuming you've done the setup and signed the CLA as asked [here](https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#setting-things-up)).
Hi @DubeySandeep, I have completed the development. Have to check whether it works correctly or not. However, I cannot access that page. Can you please guide me in accessing the page in a browser?

Hi @chrised123, for dev site: run `scripts/start.sh` (as mentioned [here](https://github.com/oppia/oppia/wiki/Installing-Oppia-%28Linux%29#running-oppia-on-a-development-server)), for prod. site: https://oppia.org
Also, try to ask theses questions on [gitter](https://gitter.im/oppia/oppia-chat).
Hey there! I'd like to work on `footer_js_libs.html`.
hey @shubha1593, just assign me to `base.html`, please.
Hi @jhonatanbds, Thanks for taking interest in this issue, have you signed the CLA (asked [here](
https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#setting-things-up))? Do let me know when it's done (or you have done already!) so that I can assign you!
Thanks! :)
Hi @YimingPan, you've been assigned to `footer_js_libs.html`. 
@jhonatanbds, you've been assigned to `base.html`. :)
@DubeySandeep, yup @jhonatanbds has signed the CLA.
Hello @shubha1593. I will take exploration_player/exploration_player.html
@shubha1593  can you assign me header_css_libs.html, header_js_libs.html?
@Kunalgarg2100, did you sign the CLA?
@Kunalgarg2100 assigned you.
@kevinlee12 yup, signed.
@shubha1593 Would like to work on state_editor_responses.html. Thanks!

Hi @EvsChen, I've assigned you to `state_editor_responses.html`. You can start working on it. Thanks! :)
Hi @seanlip and @shubha1593 can I please be assigned to `header_css_libs.html`?
Hi @shreyateeza, that is already assigned to someone else! I'm sorry but no file seems to be free right now in this issue. Would you like to give [#4057](https://github.com/oppia/oppia/issues/4057) issue a try?
Hi @chrised123, are you still working on collection_player?
@shubha1593 yes. I am afraid I need more time. 
@chrised123 Sure, thanks for the update. Let us know if you need some help!
Hi @seanlip, I have signed the CLA and filled in the survey, can I have an issue assigned to me?
@supra08, thanks for signing the CLA, I have assigned you to `exploration_player/exploration_player.html` part of this issue. :)
Hi! can i be assigned any issue? I have filled the CLA form.
Hi @palakg11, thanks for signing CLA, I've assigned you to `collection_player/collection_player.html` part of this issue. :)
Hi @Kunalgarg2100, any updates on ` header_css_libs.html`, `header_js_libs.html`?
Unassigned  @Kunalgarg2100 from ` header_css_libs.html`, `header_js_libs.html` because of lack of response.
Hello @DubeySandeep ! I have filled in the survey and signed the CLA. I would like to work on  `header_css_libs.html` and `header_js_libs.html`. 
Hi, @adarsh1021! Great. I've assigned you. Welcome to Oppia :) 
Hey I have signed the CLA, Can I be assigned an issue
Hi @divayg! I think only `base.html` has not been assigned yet. Do you want to work on that file?  
Thanks! 
@apb7 Yes, Please
Thanks!

@divayg: Assigned you! Thanks!
@apb7  I too completed the CLA , on what issues can I work on?
@apb7 ,I updated the `collection_player/collection_player.html` file.
In that I changed 

- `{% if collection_id %}`

- `{%if can_edit %}`

both this tags to ng-if and its working in the dev environment. How I can move further?

@chari1239: I have assigned you. Please feel free to open a PR when your work is done. Thanks!
@apb7  . I am getting error in pattern checks ,when I ran the command ` bash scripts/run_presubmit_checks.sh` .I don't have idea of this.How can I proceed?
@chari1239: Please see the generated error message and then try to resolve it. Thanks! 
@chari1239, any updates on "collection_player.html"? 
hey i would like to take header_css_libs.html and header_js_libs.html
@opllama2 , Sure! I have assigned you for the same. :)

Resolving patch:
diff --git a/core/controllers/base.py b/core/controllers/base.py
--- a/core/controllers/base.py
+++ b/core/controllers/base.py
@@ -195,6 +195,8 @@ def __init__(self, request, response):  # pylint: disable=super-init-not-called
         self.is_super_admin = (
             current_user_services.is_current_user_super_admin())
 
+        self.values['additional_angular_modules'] = []
+        self.values['iframed'] = False
         self.values['is_moderator'] = user_services.is_at_least_moderator(
             self.user_id)
         self.values['is_admin'] = user_services.is_admin(self.user_id)


Test patch:
diff --git a/core/controllers/base_test.py b/core/controllers/base_test.py
--- a/core/controllers/base_test.py
+++ b/core/controllers/base_test.py
@@ -73,11 +73,17 @@ def test_dev_indicator_appears_in_dev_and_not_in_production(self):
 
         with self.swap(feconf, 'DEV_MODE', True):
             response = self.testapp.get(feconf.LIBRARY_INDEX_URL)
-            self.assertIn('<div class="oppia-dev-mode">', response.body)
+            self.assertIn('DEV_MODE: JSON.parse(\'true\')',
+                          response.body)
+            self.assertIn('<div ng-if="DEV_MODE" class="oppia-dev-mode">',
+                          response.body)
 
         with self.swap(feconf, 'DEV_MODE', False):
             response = self.testapp.get(feconf.LIBRARY_INDEX_URL)
-            self.assertNotIn('<div class="oppia-dev-mode">', response.body)
+            self.assertIn('DEV_MODE: JSON.parse(\'false\')',
+                          response.body)
+            self.assertIn('<div ng-if="DEV_MODE" class="oppia-dev-mode">',
+                          response.body)
 
     def test_that_no_get_results_in_500_error(self):
         """Test that no GET request results in a 500 error."""
diff --git a/core/controllers/library_test.py b/core/controllers/library_test.py
--- a/core/controllers/library_test.py
+++ b/core/controllers/library_test.py
@@ -53,10 +53,12 @@ def test_library_handler_demo_exploration(self):
         """Test the library data handler on demo explorations."""
         response_dict = self.get_json(feconf.LIBRARY_SEARCH_DATA_URL)
         self.assertEqual({
+            'iframed': False,
             'is_admin': False,
             'is_moderator': False,
             'is_super_admin': False,
             'activity_list': [],
+            'additional_angular_modules': [],
             'search_cursor': None,
             'profile_picture_data_url': None,
         }, response_dict)