Fix oppia#6962: Remove jinja interaction templates and integrate css …

…file into webpack (oppia#7286)

* remove interaction templates from exploration editor and exploration player

* install style loader and css loader

* remove interaction template from other pages

* use absolute path for require

* work on failing FE test

* remove unused html files

* work on failing BE test

core/controllers/creator_dashboard.py

@@ -120,15 +120,10 @@ def get(self):
         dependencies_html, additional_angular_modules = (
             dependency_registry.Registry.get_deps_html_and_angular_modules(
                 interaction_dependency_ids + self.ADDITIONAL_DEPENDENCY_IDS))
-        interaction_templates = (
-            interaction_registry.Registry.get_interaction_html(
-                interaction_ids))
 
         self.values.update({
             'INTERACTION_SPECS': interaction_registry.Registry.get_all_specs(),
             'additional_angular_modules': additional_angular_modules,
-            'interaction_templates': jinja2.utils.Markup(
-                interaction_templates),
             'dependencies_html': jinja2.utils.Markup(dependencies_html)
         })
         self.render_template('dist/creator-dashboard-page.mainpage.html')

core/controllers/editor.py

@@ -88,10 +88,6 @@ def get(self, exploration_id):
             dependency_registry.Registry.get_deps_html_and_angular_modules(
                 interaction_dependency_ids + self.EDITOR_PAGE_DEPENDENCY_IDS))
 
-        interaction_templates = (
-            interaction_registry.Registry.get_interaction_html(
-                interaction_ids))
-
         self.values.update({
             'INTERACTION_SPECS': interaction_registry.Registry.get_all_specs(),
             'additional_angular_modules': additional_angular_modules,
@@ -113,8 +109,6 @@ def get(self, exploration_id):
             'can_unpublish': rights_manager.check_can_unpublish_activity(
                 self.user, exploration_rights),
             'dependencies_html': jinja2.utils.Markup(dependencies_html),
-            'interaction_templates': jinja2.utils.Markup(
-                interaction_templates),
             'meta_description': feconf.CREATE_PAGE_DESCRIPTION,
         })
 

core/controllers/practice_sessions.py

@@ -44,15 +44,9 @@ def get(self, _):
             dependency_registry.Registry.get_deps_html_and_angular_modules(
                 interaction_dependency_ids))
 
-        interaction_templates = (
-            interaction_registry.Registry.get_interaction_html(
-                interaction_ids))
-
         self.values.update({
             'additional_angular_modules': additional_angular_modules,
             'INTERACTION_SPECS': interaction_registry.Registry.get_all_specs(),
-            'interaction_templates': jinja2.utils.Markup(
-                interaction_templates),
             'dependencies_html': jinja2.utils.Markup(dependencies_html),
         })
         self.render_template('dist/practice-session-page.mainpage.html')

core/controllers/reader.py

@@ -77,7 +77,6 @@ def _get_exploration_player_data(
         - 'exploration_version': int. The version of the exploration.
         - 'collection_id': str. ID of the collection.
         - 'collection_title': str. Title of collection.
-        - 'interaction_templates': str. The HTML bodies of the interactions
             required by the given exploration ID.
         - 'is_private': bool. Whether the exploration is private or not.
         - 'meta_name': str. Title of exploration.
@@ -113,10 +112,6 @@ def _get_exploration_player_data(
         dependency_registry.Registry.get_deps_html_and_angular_modules(
             dependency_ids))
 
-    interaction_templates = (
-        interaction_registry.Registry.get_interaction_html(
-            interaction_ids))
-
     return {
         'INTERACTION_SPECS': interaction_registry.Registry.get_all_specs(),
         'additional_angular_modules': additional_angular_modules,
@@ -127,8 +122,6 @@ def _get_exploration_player_data(
         'exploration_version': version,
         'collection_id': collection_id,
         'collection_title': collection_title,
-        'interaction_templates': jinja2.utils.Markup(
-            interaction_templates),
         'is_private': rights_manager.is_exploration_private(
             exploration_id),
         # Note that this overwrites the value in base.py.

core/controllers/review_tests.py

@@ -44,15 +44,9 @@ def get(self, _):
             dependency_registry.Registry.get_deps_html_and_angular_modules(
                 interaction_dependency_ids))
 
-        interaction_templates = (
-            interaction_registry.Registry.get_interaction_html(
-                interaction_ids))
-
         self.values.update({
             'additional_angular_modules': additional_angular_modules,
             'INTERACTION_SPECS': interaction_registry.Registry.get_all_specs(),
-            'interaction_templates': jinja2.utils.Markup(
-                interaction_templates),
             'dependencies_html': jinja2.utils.Markup(dependencies_html),
         })
         self.render_template('dist/review-test-page.mainpage.html')

core/controllers/skill_editor.py

@@ -77,15 +77,9 @@ def get(self, skill_id):
             dependency_registry.Registry.get_deps_html_and_angular_modules(
                 interaction_dependency_ids + self.EDITOR_PAGE_DEPENDENCY_IDS))
 
-        interaction_templates = (
-            interaction_registry.Registry.get_interaction_html(
-                interaction_ids))
-
         self.values.update({
             'additional_angular_modules': additional_angular_modules,
             'INTERACTION_SPECS': interaction_registry.Registry.get_all_specs(),
-            'interaction_templates': jinja2.utils.Markup(
-                interaction_templates),
             'dependencies_html': jinja2.utils.Markup(dependencies_html)
         })
 

core/controllers/topic_editor.py

@@ -123,15 +123,9 @@ def get(self, topic_id):
             dependency_registry.Registry.get_deps_html_and_angular_modules(
                 interaction_dependency_ids + self.EDITOR_PAGE_DEPENDENCY_IDS))
 
-        interaction_templates = (
-            interaction_registry.Registry.get_interaction_html(
-                interaction_ids))
-
         self.values.update({
             'additional_angular_modules': additional_angular_modules,
             'INTERACTION_SPECS': interaction_registry.Registry.get_all_specs(),
-            'interaction_templates': jinja2.utils.Markup(
-                interaction_templates),
             'dependencies_html': jinja2.utils.Markup(dependencies_html)
         })
 

core/templates/dev/head/pages/creator-dashboard-page/creator-dashboard-page.mainpage.html

@@ -33,7 +33,6 @@
     <script src="/third_party/static/MathJax-2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 
     @require('../footer_js_libs.html')
-    {{ interaction_templates }}
     {{ dependencies_html }}
   </body>
 </html>

core/templates/dev/head/pages/exploration-editor-page/exploration-editor-page.mainpage.html

@@ -63,6 +63,5 @@
       <script src="/dist/<%= htmlWebpackPlugin.files.js[chunk] %>"></script>
     <% } %>
   <% } %>
-  {{ interaction_templates }}
   {{ dependencies_html }}
 {% endblock footer_js %}

core/templates/dev/head/pages/exploration-player-page/exploration-player-page.mainpage.html

@@ -56,7 +56,6 @@
     <script src="/templates/dev/head/mathjaxConfig.js"></script>
     <script src="/third_party/static/MathJax-2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
     @require('../footer_js_libs.html')
-    {{ interaction_templates }}
     {{ dependencies_html }}
   </body>
 </html>

core/templates/dev/head/pages/practice-session-page/practice-session-page.mainpage.html

@@ -33,7 +33,6 @@
     <script src="/templates/dev/head/mathjaxConfig.js"></script>
     <script src="/third_party/static/MathJax-2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
     @require('../footer_js_libs.html')
-    {{ interaction_templates }}
     {{ dependencies_html }}
   </body>
 </html>

core/templates/dev/head/pages/review-test-page/review-test-page.mainpage.html

@@ -34,7 +34,6 @@
     <script src="/templates/dev/head/mathjaxConfig.js"></script>
     <script src="/third_party/static/MathJax-2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
     @require('../footer_js_libs.html')
-    {{ interaction_templates }}
     {{ dependencies_html }}
   </body>
 </html>

core/templates/dev/head/pages/skill-editor-page/skill-editor-page.mainpage.html

@@ -37,7 +37,6 @@
     <script src="/templates/dev/head/mathjaxConfig.js"></script>
     <script src="/third_party/static/MathJax-2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
     @require('../footer_js_libs.html')
-    {{ interaction_templates }}
     {{ dependencies_html }}
   </body>
 </html>

core/templates/dev/head/pages/topic-editor-page/topic-editor-page.mainpage.html

@@ -37,7 +37,6 @@
     <script src="/templates/dev/head/mathjaxConfig.js"></script>
     <script src="/third_party/static/MathJax-2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
     @require('../footer_js_libs.html')
-    {{ interaction_templates }}
     {{ dependencies_html }}
   </body>
 </html>

core/tests/karma.conf.ts

@@ -180,6 +180,10 @@ module.exports = function(config) {
               loader: 'istanbul-instrumenter-loader',
               options: { esModules: true }
             }
+          },
+          {
+            test: /\.css$/,
+            use: ['style-loader', 'css-loader']
           }
         ]
       },

extensions/interactions/CodeRepl/CodeRepl.ts

@@ -16,6 +16,8 @@
  * @fileoverview Requires for CodeRepl interaction.
  */
 
+require('interactions/CodeRepl/static/code_repl.css');
+
 require('interactions/CodeRepl/CodeReplPredictionService.ts');
 
 require('interactions/CodeRepl/directives/CodeReplRulesService.ts');

extensions/interactions/ItemSelectionInput/ItemSelectionInput.ts

@@ -16,6 +16,8 @@
  * @fileoverview Requires for ItemSelectionInput interaction.
  */
 
+require('interactions/ItemSelectionInput/static/item_selection_input.css');
+
 require(
   'interactions/ItemSelectionInput/directives/' +
   'ItemSelectionInputRulesService.ts');

extensions/interactions/LogicProof/LogicProof.ts

@@ -15,6 +15,9 @@
 /**
  * @fileoverview Requires for LogicProof interaction.
  */
+
+require('interactions/LogicProof/static/logic_proof.css');
+
 require('interactions/LogicProof/directives/LogicProofRulesService.ts');
 require('interactions/LogicProof/directives/LogicProofValidationService.ts');
 require(

extensions/interactions/MultipleChoiceInput/MultipleChoiceInput.ts

@@ -16,6 +16,8 @@
  * @fileoverview Requires for MultipleChoiceInput interaction.
  */
 
+require('interactions/MultipleChoiceInput/static/multiple_choice_input.css');
+
 require(
   'interactions/MultipleChoiceInput/directives/' +
   'MultipleChoiceInputRulesService.ts');

extensions/interactions/MusicNotesInput/MusicNotesInput.ts

@@ -16,6 +16,8 @@
  * @fileoverview Requires for MusicNotesInput interaction.
  */
 
+require('interactions/MusicNotesInput/static/music_notes_input.css');
+
 require(
   'interactions/MusicNotesInput/directives/MusicNotesInputRulesService.ts');
 require(

extensions/interactions/base_test.py

@@ -267,10 +267,6 @@ def test_default_interactions_are_valid(self):
             #  Required:
             #    * A python file called {InteractionName}.py.
             #    * An __init__.py file used to import the Python file.
-            #    * An html file called {InteractionName}.html. Most of the HTML
-            #      files are empty, only some contain <link> for importing CSS
-            #      do not add anything into these files, they are scheduled for
-            #      deletion (#6962).
             #    * A TypeScript file called {InteractionName}.ts.
             #    * A directory name 'directives' containing TS and HTML files
             #      for directives
@@ -306,18 +302,15 @@ def test_default_interactions_are_valid(self):
                 pass
 
             self.assertEqual(
-                interaction_dir_optional_dirs_and_files_count + 6,
+                interaction_dir_optional_dirs_and_files_count + 5,
                 len(interaction_dir_contents)
             )
 
             py_file = os.path.join(interaction_dir, '%s.py' % interaction_id)
-            html_file = os.path.join(
-                interaction_dir, '%s.html' % interaction_id)
             ts_file = os.path.join(
                 interaction_dir, '%s.ts' % interaction_id)
 
             self.assertTrue(os.path.isfile(py_file))
-            self.assertTrue(os.path.isfile(html_file))
             self.assertTrue(os.path.isfile(ts_file))
 
             # Check that __init__.py file exists.

package.json

@@ -67,6 +67,7 @@
     "cache-loader": "^3.0.1",
     "clean-webpack-plugin": "^2.0.1",
     "core-js": "^2.5.3",
+    "css-loader": "^3.1.0",
     "dotenv": "^7.0.0",
     "enhanced-resolve": "^4.1.0",
     "eslint": "^5.16.0",

webpack.dev.config.ts

@@ -82,6 +82,13 @@ module.exports = {
     {
       test: /\.html$/,
       loader: 'underscore-template-loader'
+    },
+    {
+      test: /\.css$/,
+      include: [
+        path.resolve(__dirname, 'extensions'),
+      ],
+      use: ['style-loader', 'css-loader']
     }]
   },
   output: {

webpack.prod.config.ts

@@ -82,6 +82,13 @@ module.exports = {
     {
       test: /\.html$/,
       loader: 'underscore-template-loader'
+    },
+    {
+      test: /\.css$/,
+      include: [
+        path.resolve(__dirname, 'extensions'),
+      ],
+      use: ['style-loader', 'css-loader']
     }]
   },
   output: {