fix(ui): use identical search terms (#59306)

client/i18n/config-for-tests.ts

@@ -11,8 +11,8 @@ i18n
       escapeValue: false
     },
     lng: 'en',
-    ns: ['translations'],
-    resources: { en: { translations: {} } },
+    ns: ['intro', 'translations'],
+    resources: { en: { intro: {}, translations: {} } },
     returnNull: false
   })
   .catch((error: Error) => {

client/src/templates/Challenges/classic/show.tsx

@@ -522,7 +522,11 @@ function ShowClassic({
           />
         )}
         <CompletionModal />
-        <HelpModal challengeTitle={title} challengeBlock={blockName} />
+        <HelpModal
+          challengeTitle={title}
+          challengeBlock={blockName}
+          superBlock={superBlock}
+        />
         <VideoModal videoUrl={videoUrl} />
         <ResetModal challengeType={challengeType} />
         <ProjectPreviewModal

client/src/templates/Challenges/codeally/show.tsx

@@ -381,7 +381,11 @@ function ShowCodeAlly(props: ShowCodeAllyProps) {
               <Spacer size='m' />
             </Col>
             <CompletionModal />
-            <HelpModal challengeTitle={title} challengeBlock={block} />
+            <HelpModal
+              challengeTitle={title}
+              challengeBlock={block}
+              superBlock={superBlock}
+            />
           </Row>
         </Container>
       </LearnLayout>

client/src/templates/Challenges/components/help-modal.test.tsx

@@ -1,36 +1,41 @@
+import i18n from '../../../../i18n/config-for-tests';
 import { generateSearchLink } from './help-modal';
 
 describe('generateSearchLink', () => {
-  it("should return a link with search query containing block name and challenge title if the title includes 'step'", () => {
+  it("should return a link with search query containing block name and challenge title if the title includes 'step'", async () => {
+    await i18n.reloadResources('en', 'intro');
     const link = generateSearchLink(
       'Step 10',
-      'learn-basic-javascript-by-building-a-role-playing-game'
+      'learn-basic-javascript-by-building-a-role-playing-game',
+      'javascript-algorithms-and-data-structures-v8'
     );
 
     expect(link).toBe(
-      'https://forum.freecodecamp.org/search?q=learn%20basic%20javascript%20by%20building%20a%20role%20playing%20game%20-%20Step%2010'
+      'https://forum.freecodecamp.org/search?q=javascript-algorithms-and-data-structures-v8.blocks.learn-basic-javascript-by-building-a-role-playing-game.title%20-%20Step%2010%20in%3Atitle'
     );
   });
 
   it("should return a link with search query containing block name and challenge title if the title includes 'task'", () => {
     const link = generateSearchLink(
       'Task 10',
-      'learn-greetings-in-your-first-day-at-the-office'
+      'learn-greetings-in-your-first-day-at-the-office',
+      'a2-english-for-developers'
     );
 
     expect(link).toBe(
-      'https://forum.freecodecamp.org/search?q=learn%20greetings%20in%20your%20first%20day%20at%20the%20office%20-%20Task%2010'
+      'https://forum.freecodecamp.org/search?q=a2-english-for-developers.blocks.learn-greetings-in-your-first-day-at-the-office.title%20-%20Task%2010%20in%3Atitle'
     );
   });
 
   it("should return a link with search query containing only challenge title if the title does not include 'step' or 'task'", () => {
     const link = generateSearchLink(
       'Perform Basic String Formatting in C#',
-      'write-your-first-code-using-c-sharp'
+      'write-your-first-code-using-c-sharp',
+      'foundational-c-sharp-with-microsoft'
     );
 
     expect(link).toBe(
-      'https://forum.freecodecamp.org/search?q=Perform%20Basic%20String%20Formatting%20in%20C%23'
+      'https://forum.freecodecamp.org/search?q=foundational-c-sharp-with-microsoft.blocks.write-your-first-code-using-c-sharp.title%20-%20Perform%20Basic%20String%20Formatting%20in%20C%23%20in%3Atitle'
     );
   });
 });

client/src/templates/Challenges/components/help-modal.tsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { Dispatch, bindActionCreators } from 'redux';
 import { Button, FormControl, Modal, Spacer } from '@freecodecamp/ui';
 
+import { t } from 'i18next';
 import envData from '../../../../config/env.json';
 import { createQuestion, closeModal } from '../redux/actions';
 import { isHelpModalOpenSelector } from '../redux/selectors';
@@ -17,6 +18,7 @@ interface HelpModalProps {
   isOpen?: boolean;
   challengeTitle: string;
   challengeBlock: string;
+  superBlock: string;
 }
 
 const { forumLocation } = envData;
@@ -33,12 +35,15 @@ const mapDispatchToProps = (dispatch: Dispatch) =>
     dispatch
   );
 
-export const generateSearchLink = (title: string, block: string) => {
-  const blockWithoutHyphens = block.replace(/-/g, ' ');
+export const generateSearchLink = (
+  title: string,
+  block: string,
+  superBlock: string
+) => {
+  const titleText = t(`intro:${superBlock}.blocks.${block}.title`);
+  const selector = 'in:title';
+  const query = encodeURIComponent(`${titleText} - ${title} ${selector}`);
 
-  const query = /^(step|task)\s*\d*$/i.test(title)
-    ? encodeURIComponent(`${blockWithoutHyphens} - ${title}`)
-    : encodeURIComponent(title);
   const search = `${forumLocation}/search?q=${query}`;
   return search;
 };
@@ -93,6 +98,7 @@ function HelpModal({
   createQuestion,
   isOpen,
   challengeBlock,
+  superBlock,
   challengeTitle
 }: HelpModalProps): JSX.Element {
   const { t } = useTranslation();
@@ -178,7 +184,11 @@ function HelpModal({
                   setSimilarQuestionsCheckbox(event.target.checked)
                 }
                 value={similarQuestionsCheckbox}
-                href={generateSearchLink(challengeTitle, challengeBlock)}
+                href={generateSearchLink(
+                  challengeTitle,
+                  challengeBlock,
+                  superBlock
+                )}
               />
             </fieldset>
 
@@ -255,7 +265,11 @@ function HelpModal({
                 <p>
                   <Trans i18nKey='learn.rsa-forum'>
                     <a
-                      href={generateSearchLink(challengeTitle, challengeBlock)}
+                      href={generateSearchLink(
+                        challengeTitle,
+                        challengeBlock,
+                        superBlock
+                      )}
                       rel='noopener noreferrer'
                       target='_blank'
                     >

client/src/templates/Challenges/exam/show.tsx

@@ -528,7 +528,11 @@ function ShowExam(props: ShowExamProps) {
               </Button>
             </Col>
             <CompletionModal />
-            <HelpModal challengeTitle={title} challengeBlock={blockName} />
+            <HelpModal
+              challengeTitle={title}
+              challengeBlock={blockName}
+              superBlock={superBlock}
+            />
           </Row>
         </Container>
       </LearnLayout>

client/src/templates/Challenges/fill-in-the-blank/show.tsx

@@ -258,7 +258,11 @@ const ShowFillInTheBlank = ({
               <Spacer size='l' />
             </Col>
             <CompletionModal />
-            <HelpModal challengeTitle={title} challengeBlock={blockName} />
+            <HelpModal
+              challengeTitle={title}
+              challengeBlock={blockName}
+              superBlock={superBlock}
+            />
           </Row>
         </Container>
         <ShortcutsModal />

client/src/templates/Challenges/generic/show.tsx

@@ -296,7 +296,11 @@ const ShowGeneric = ({
               <Spacer size='l' />
             </Col>
             <CompletionModal />
-            <HelpModal challengeTitle={title} challengeBlock={blockName} />
+            <HelpModal
+              challengeTitle={title}
+              challengeBlock={blockName}
+              superBlock={superBlock}
+            />
           </Row>
         </Container>
       </LearnLayout>

client/src/templates/Challenges/ms-trophy/show.tsx

@@ -202,7 +202,11 @@ function MsTrophy(props: MsTrophyProps) {
               <Spacer size='m' />
             </Col>
             <CompletionModal />
-            <HelpModal challengeTitle={title} challengeBlock={blockName} />
+            <HelpModal
+              challengeTitle={title}
+              challengeBlock={blockName}
+              superBlock={superBlock}
+            />
           </Row>
         </Container>
       </LearnLayout>

client/src/templates/Challenges/projects/backend/show.tsx

@@ -210,7 +210,11 @@ const ShowBackEnd = (props: BackEndProps) => {
               <Spacer size='m' />
             </Col>
             <CompletionModal />
-            <HelpModal challengeTitle={title} challengeBlock={blockName} />
+            <HelpModal
+              challengeTitle={title}
+              challengeBlock={blockName}
+              superBlock={superBlock}
+            />
           </Row>
         </Container>
       </LearnLayout>

client/src/templates/Challenges/projects/frontend/show.tsx

@@ -170,7 +170,11 @@ const ShowFrontEndProject = (props: ProjectProps) => {
               <Spacer size='m' />
             </Col>
             <CompletionModal />
-            <HelpModal challengeTitle={title} challengeBlock={blockName} />
+            <HelpModal
+              challengeTitle={title}
+              challengeBlock={blockName}
+              superBlock={superBlock}
+            />
           </Row>
         </Container>
       </LearnLayout>

e2e/help-modal.spec.ts

@@ -241,7 +241,7 @@ test.describe('Help Modal component', () => {
     });
     await expect(link).toHaveAttribute(
       'href',
-      'https://forum.freecodecamp.org/search?q=Write%20Your%20First%20C%23%20Code'
+      'https://forum.freecodecamp.org/search?q=Write%20Your%20First%20Code%20Using%20C%23%20-%20Write%20Your%20First%20C%23%20Code%20in%3Atitle'
     );
     await expect(link).toHaveAttribute('target', '_blank');
     await expect(link).toHaveAttribute('rel', 'noopener noreferrer');