Fix extracting i18n from jsx code

React code (in jsx files) was not being extracted at all. Fixed this
by updating to edx-i18n-tools 0.4.5.

Also, template literals (feature of es2015) don't work well with
gettext at all. So convert those instances to HtmlUtils or
StringUtils interpolation calls.

FEDX-505

openedx/features/course_experience/.eslintrc.js

@@ -2,6 +2,10 @@ module.exports = {
   extends: 'eslint-config-edx',
   root: true,
   settings: {
-    'import/resolver': 'webpack',
+    'import/resolver': {
+      webpack: {
+        config: 'webpack.dev.config.js',
+      },
+    },
   },
 };

openedx/features/course_experience/static/course_experience/js/CourseGoals.js

@@ -1,5 +1,7 @@
 /* globals gettext */
 
+import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils';
+
 export class CourseGoals {  // eslint-disable-line import/prefer-default-export
 
   constructor(options) {
@@ -19,7 +21,10 @@ export class CourseGoals {  // eslint-disable-line import/prefer-default-export
           $('.section-goals').slideDown();
           $('.section-goals .goal .text').text(data.goal_text);
           $('.section-goals select').val(data.goal_key);
-          const successMsg = gettext(`Thank you for setting your course goal to ${data.goal_text.toLowerCase()}!`);
+          const successMsg = HtmlUtils.interpolateHtml(
+            gettext('Thank you for setting your course goal to {goal}!'),
+            { goal: data.goal_text.toLowerCase() },
+          );
           if (!data.is_unsure) {
             // xss-lint: disable=javascript-jquery-html
             $('.message-content').html(`<div class="success-message">${successMsg}</div>`);