fix: make help button use subforum topics (#37741)

* fix: make help button use subforum topics

* fix: add test to check that block exists

Co-authored-by: ojeytonwilliams <ojeytonwilliams@gmail.com>

* fix: improve error message

* Update curriculum/test/test-challenges.js

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

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

@@ -29,9 +29,7 @@ function createQuestionEpic(action$, state$, { window }) {
     tap(() => {
       const state = state$.value;
       const files = challengeFilesSelector(state);
-      const { title: challengeTitle, challengeType } = challengeMetaSelector(
-        state
-      );
+      const { block, title: challengeTitle } = challengeMetaSelector(state);
       const {
         navigator: { userAgent },
         location: { href }
@@ -77,9 +75,7 @@ function createQuestionEpic(action$, state$, { window }) {
         \`\`\`\n${endingText}`
       );
 
-      const category = window.encodeURIComponent(
-        helpCategory[challengeType] || 'Help'
-      );
+      const category = window.encodeURIComponent(helpCategory[block] || 'Help');
 
       const studentCode = window.encodeURIComponent(textMessage);
       const altStudentCode = window.encodeURIComponent(altTextMessage);

client/src/templates/Challenges/redux/index.js

@@ -21,6 +21,7 @@ const initialState = {
   canFocusEditor: true,
   challengeFiles: {},
   challengeMeta: {
+    block: '',
     id: '',
     nextChallengePath: '/',
     prevChallengePath: '/',

client/utils/challengeTypes.js

@@ -69,8 +69,47 @@ exports.submitTypes = {
 
 // determine which help forum questions should be posted to
 exports.helpCategory = {
-  [html]: 'HTML-CSS',
-  [js]: 'JavaScript',
-  [backend]: 'JavaScript',
-  [modern]: 'JavaScript'
+  'basic-html-and-html5': 'HTML-CSS',
+  'basic-css': 'HTML-CSS',
+  'applied-visual-design': 'HTML-CSS',
+  'applied-accessibility': 'HTML-CSS',
+  'responsive-web-design-principles': 'HTML-CSS',
+  'css-flexbox': 'HTML-CSS',
+  'css-grid': 'HTML-CSS',
+  'responsive-web-design-projects': 'Certification Projects',
+  'basic-javascript': 'JavaScript',
+  es6: 'JavaScript',
+  'regular-expressions': 'JavaScript',
+  debugging: 'JavaScript',
+  'basic-data-structures': 'JavaScript',
+  'basic-algorithm-scripting': 'JavaScript',
+  'object-oriented-programming': 'JavaScript',
+  'functional-programming': 'JavaScript',
+  'intermediate-algorithm-scripting': 'JavaScript',
+  'javascript-algorithms-and-data-structures-projects':
+    'Certification Projects',
+  bootstrap: 'HTML-CSS',
+  jquery: 'JavaScript',
+  sass: 'HTML-CSS',
+  react: 'JavaScript',
+  redux: 'JavaScript',
+  'react-and-redux': 'JavaScript',
+  'front-end-libraries-projects': 'Certification Projects',
+  'data-visualization-with-d3': 'JavaScript',
+  'json-apis-and-ajax': 'JavaScript',
+  'data-visualization-projects': 'Certification Projects',
+  'managing-packages-with-npm': 'JavaScript',
+  'basic-node-and-express': 'JavaScript',
+  'mongodb-and-mongoose': 'JavaScript',
+  'apis-and-microservices-projects': 'Certification Projects',
+  'information-security-with-helmetjs': 'JavaScript',
+  'quality-assurance-and-testing-with-chai': 'JavaScript',
+  'advanced-node-and-express': 'JavaScript',
+  'information-security-and-quality-assurance-projects':
+    'Certification Projects',
+  algorithms: 'JavaScript',
+  'data-structures': 'JavaScript',
+  'take-home-projects': 'Certification Projects',
+  'rosetta-code': 'JavaScript',
+  'project-euler': 'JavaScript'
 };

client/utils/gatsby/challengePageCreator.js

@@ -61,6 +61,7 @@ const getIntroIfRequired = (node, index, nodeArray) => {
 
 exports.createChallengePages = createPage => ({ node }, index, thisArray) => {
   const {
+    block,
     fields: { slug },
     required = [],
     template,
@@ -76,6 +77,7 @@ exports.createChallengePages = createPage => ({ node }, index, thisArray) => {
     component: getTemplateComponent(challengeType),
     context: {
       challengeMeta: {
+        block: block,
         introPath: getIntroIfRequired(node, index, thisArray),
         template,
         required,

curriculum/test/test-challenges.js

@@ -36,7 +36,12 @@ const { getChallengesForLang } = require('../getChallenges');
 const MongoIds = require('./utils/mongoIds');
 const ChallengeTitles = require('./utils/challengeTitles');
 const { challengeSchemaValidator } = require('../schema/challengeSchema');
-const { challengeTypes } = require('../../client/utils/challengeTypes');
+const {
+  challengeTypes,
+  helpCategory
+} = require('../../client/utils/challengeTypes');
+
+const { dasherize } = require('../../utils/slugs');
 
 const { testedLangs } = require('../utils');
 
@@ -150,6 +155,15 @@ async function getChallenges(lang) {
   return { lang, challenges };
 }
 
+function validateBlock(challenge) {
+  const dashedBlock = dasherize(challenge.block);
+  if (!helpCategory.hasOwnProperty(dashedBlock)) {
+    return `'${dashedBlock}' block not found as a helpCategory in client/utils/challengeTypes.js file for the '${challenge.title}' challenge`;
+  } else {
+    return null;
+  }
+}
+
 function populateTestsForLang({ lang, challenges }) {
   const mongoIds = new MongoIds();
   const challengeTitles = new ChallengeTitles();
@@ -162,9 +176,14 @@ function populateTestsForLang({ lang, challenges }) {
       describe(challenge.title || 'No title', function() {
         it('Common checks', function() {
           const result = validateChallenge(challenge);
+          const invalidBlock = validateBlock(challenge);
+
           if (result.error) {
             throw new AssertionError(result.error);
           }
+          if (challenge.challengeType !== 7 && invalidBlock) {
+            throw new Error(invalidBlock);
+          }
           const { id, title } = challenge;
           mongoIds.check(id, title);
           challengeTitles.check(title);