feat: add search link to help modal (freeCodeCamp#47385)

Co-authored-by: =?UTF-8?q?Lasse=20J=C3=B8rgensen?= <28780271+lasjorg@users.noreply.github.com>

Author: Naomi Carrigan

client/i18n/locales/english/translations.json

@@ -286,6 +286,7 @@
     "percent-complete": "{{percent}}% complete",
     "tried-rsa": "If you've already tried the <0>Read-Search-Ask</0> method, then you can ask for help on the freeCodeCamp forum.",
     "rsa": "Read, search, ask",
+    "rsa-forum": "<strong>Before making a new post</strong> please see if your question has <0>already been answered on the forum</0>.",
     "reset": "Reset this lesson?",
     "reset-warn": "Are you sure you wish to reset this lesson? The editors and tests will be reset.",
     "reset-warn-2": "This cannot be undone",

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

@@ -532,7 +532,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
             certification={certification}
             superBlock={superBlock}
           />
-          <HelpModal />
+          <HelpModal challengeTitle={title} challengeBlock={blockName} />
           <VideoModal videoUrl={this.getVideoUrl()} />
           <ResetModal />
           <ProjectPreviewModal

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

@@ -368,7 +368,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                 certification={certification}
                 superBlock={superBlock}
               />
-              <HelpModal />
+              <HelpModal challengeTitle={title} challengeBlock={blockName} />
             </Row>
           </Grid>
         </LearnLayout>

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

@@ -1,3 +1,12 @@
+.alert > p > strong {
+  color: inherit;
+}
+
+.fa-circle-exclamation {
+  font-size: 3rem;
+  padding-bottom: 10px;
+}
+
 @media screen and (max-width: 767px) {
   .help-modal .btn-lg {
     font-size: 16px;

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

@@ -1,3 +1,5 @@
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { Trans, withTranslation } from 'react-i18next';
@@ -16,6 +18,8 @@ interface HelpModalProps {
   executeGA: (attributes: { type: string; data: string }) => void;
   isOpen?: boolean;
   t: (text: string) => string;
+  challengeTitle: string;
+  challengeBlock: string;
 }
 
 const { forumLocation } = envData;
@@ -31,12 +35,22 @@ const mapDispatchToProps = (dispatch: Dispatch) =>
 
 const RSA = forumLocation + '/t/19514';
 
+const generateSearchLink = (title: string, block: string) => {
+  const query = /^step\s*\d*$/i.test(title)
+    ? encodeURIComponent(`${block} - ${title}`)
+    : encodeURIComponent(title);
+  const search = `${forumLocation}/search?q=${query}`;
+  return search;
+};
+
 export function HelpModal({
   closeHelpModal,
   createQuestion,
   executeGA,
   isOpen,
-  t
+  t,
+  challengeBlock,
+  challengeTitle
 }: HelpModalProps): JSX.Element {
   if (isOpen) {
     executeGA({ type: 'modal', data: '/help-modal' });
@@ -61,6 +75,21 @@ export function HelpModal({
             </a>
           </Trans>
         </h3>
+        <div className='alert alert-danger'>
+          <FontAwesomeIcon icon={faExclamationCircle} />
+          <p>
+            <Trans i18nKey='learn.rsa-forum'>
+              <a
+                href={generateSearchLink(challengeTitle, challengeBlock)}
+                rel='noopener noreferrer'
+                target='_blank'
+              >
+                placeholder
+              </a>
+              placeholder
+            </Trans>
+          </p>
+        </div>
         <Button
           block={true}
           bsSize='lg'

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

@@ -270,7 +270,7 @@ class BackEnd extends Component<BackEndProps> {
                 certification={certification}
                 superBlock={superBlock}
               />
-              <HelpModal />
+              <HelpModal challengeTitle={title} challengeBlock={blockName} />
             </Row>
           </Grid>
         </LearnLayout>

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

@@ -204,7 +204,7 @@ class Project extends Component<ProjectProps> {
                 certification={certification}
                 superBlock={superBlock}
               />
-              <HelpModal />
+              <HelpModal challengeTitle={title} challengeBlock={blockName} />
             </Row>
           </Grid>
         </LearnLayout>