feat: i18n for help text (#42235)

Add internationalisation capabilities for the pre-filled text in
the Ask for Help forum post.

client/i18n/locales/english/translations.json

@@ -565,5 +565,22 @@
     "set-certs-public": "Set your certification settings to public",
     "set-profile-public": "Set your profile settings to public",
     "set-claim": "Claim and view your certification"
+  },
+  "forum-help": {
+    "browser-info": "**Your browser information:**",
+    "user-agent": "User Agent is: <code>{{userAgent}}</code>",
+    "challenge": "**Challenge:** {{challengeTitle}}",
+    "challenge-link": "**Link to the challenge:**",
+    "whats-happening": "**Tell us what's happening:**",
+    "describe": "Describe your issue in detail here.",
+    "camper-project": "**Your project link(s)**",
+    "camper-code": "**Your code so far**",
+    "warning": "WARNING",
+    "too-long-one": "The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.",
+    "too-long-two": "You will need to take an additional step here so the code you wrote presents in an easy to read format.",
+    "too-long-three": "Please copy/paste all the editor code showing in the challenge from where you just linked.",
+    "add-code-one": "Replace these two sentences with your copied code.",
+    "add-code-two": "Please leave the ``` line above and the ``` line below,",
+    "add-code-three": "because they allow your code to properly format in the post."
   }
 }

client/src/templates/Challenges/redux/create-question-epic.js

@@ -10,6 +10,7 @@ import {
 import { tap, mapTo } from 'rxjs/operators';
 import { transformEditorLink } from '../utils';
 import envData from '../../../../../config/env.json';
+import i18next from 'i18next';
 
 const { forumLocation } = envData;
 
@@ -42,56 +43,41 @@ function createQuestionEpic(action$, state$, { window }) {
         projectFormValuesSelector(state)
       );
       const endingText = dedent(
-        `**Your browser information:**
+        `${i18next.t('forum-help.browser-info')}\n\n${i18next.t(
-
+          'forum-help.user-agent',
-        User Agent is: <code>${userAgent}</code>.
+          { userAgent }
-
+        )}\n\n${i18next.t(
-        **Challenge:** ${challengeTitle}
+          'forum-help.challenge'
-
+        )} ${challengeTitle}\n\n${i18next.t(
-        **Link to the challenge:**
+          'forum-help.challenge-link'
-        ${href}`
+        )}\n${href}`
       );
 
-      let textMessage = dedent(
+      let textMessage = dedent(`${i18next.t(
-        `**Tell us what's happening:**
+        'forum-help.whats-happening'
-        Describe your issue in detail here.
+      )}\n${i18next.t('forum-help.describe')}\n\n
-
         ${
           projectFormValues.length
-            ? `**Your project link(s)**\n`
+            ? `${i18next.t('forum-help.camper-project')}\n`
-            : `**Your code so far**`
+            : i18next.t('forum-help.camper-code')
         }
         ${
           projectFormValues
             ?.map(([key, val]) => `${key}: ${transformEditorLink(val)}\n`)
             ?.join('') || filesToMarkdown(files)
-        }
+        }\n\n
-
+        ${endingText}`);
-        ${endingText}`
-      );
 
       const altTextMessage = dedent(
-        `**Tell us what's happening:**
+        `${i18next.t('forum-help.whats-happening')}\n\n\n\n${i18next.t(
-
+          'forum-help.camper-code'
-
+        )}\n\n${i18next.t('forum-help.warning')}\n\n${i18next.t(
-
+          'forum-help.too-long-one'
-        **Your code so far**
+        )}\n\n${i18next.t('forum-help.too-long-two')}\n\n${i18next.t(
-
+          'forum-help.too-long-three'
-        WARNING
+        )}\n\n\`\`\`\n${i18next.t('forum-help.add-code-one')}\n${i18next.t(
-
+          'forum-help.add-code-two'
-        The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
+        )}\n${i18next.t('forum-help.add-code-three')}\n\n\`\`\`\n${endingText}`
-
-        You will need to take an additional step here so the code you wrote presents in an easy to read format.
-
-        Please copy/paste all the editor code showing in the challenge from where you just linked.
-
-        \`\`\`
-
-        Replace these two sentences with your copied code.
-        Please leave the \`\`\` line above and the \`\`\` line below,
-        because they allow your code to properly format in the post.
-
-        \`\`\`\n${endingText}`
       );
 
       const category = window.encodeURIComponent(helpCategory || 'Help');