feat: add database cert alert (#45346)

* feat: add database cert alert

* fix: change link to forum post

* fix: alert text

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>

client/i18n/locales/english/intro.json

@@ -766,6 +766,7 @@
     "legacy-header": "Legacy Courses",
     "legacy-desc": "These courses are no longer part of the certification path, but are still available for you to further your learning.",
     "viewing-upcoming-change": "You are looking at a beta page. ",
-    "go-back-to-learn": "Go back to the stable version of the curriculum."
+    "go-back-to-learn": "Go back to the stable version of the curriculum.",
+    "read-database-cert-article": "Please read this forum post before proceeding."
   }
 }

client/src/templates/Introduction/components/block.tsx

@@ -17,7 +17,7 @@ import { completedChallengesSelector, executeGA } from '../../../redux';
 import { ChallengeNode, CompletedChallenge } from '../../../redux/prop-types';
 import { playTone } from '../../../utils/tone';
 import { makeExpandedBlockSelector, toggleBlock } from '../redux';
-import IsNewRespCert from '../../../utils/is-new-responsive-web-design-cert';
+import { isNewRespCert } from '../../../utils/is-a-cert';
 import Challenges from './challenges';
 import '../intro.css';
 
@@ -104,7 +104,7 @@ export class Block extends Component<BlockProps> {
       t
     } = this.props;
 
-    const isNewResponsiveWebDesign = IsNewRespCert(superBlock);
+    const isNewResponsiveWebDesign = isNewRespCert(superBlock);
 
     let completedCount = 0;
     const challengesWithCompleted = challenges.map(({ challenge }) => {

client/src/templates/Introduction/components/challenges.tsx

@@ -11,7 +11,7 @@ import { executeGA } from '../../../redux';
 import { SuperBlocks } from '../../../../../config/certification-settings';
 import { ExecuteGaArg } from '../../../pages/donate';
 import { ChallengeWithCompletedNode } from '../../../redux/prop-types';
-import isNewRespCert from '../../../utils/is-new-responsive-web-design-cert';
+import { isNewRespCert } from '../../../utils/is-a-cert';
 
 const mapDispatchToProps = (dispatch: Dispatch) =>
   bindActionCreators({ executeGA }, dispatch);

client/src/templates/Introduction/components/legacy-links.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Alert } from '@freecodecamp/react-bootstrap';
 import { SuperBlocks } from '../../../../../config/certification-settings';
-import IsNewRespCert from '../../../utils/is-new-responsive-web-design-cert';
+import { isNewRespCert, isRelationalDbCert } from '../../../utils/is-a-cert';
 import { Link } from '../../../components/helpers';
 
 interface LegacyLinksProps {
@@ -11,9 +11,10 @@ interface LegacyLinksProps {
 
 function LegacyLinks({ superBlock }: LegacyLinksProps): JSX.Element {
   const { t } = useTranslation();
+
+  if (isNewRespCert(superBlock))
     return (
       <>
-      {IsNewRespCert(superBlock) && (
         <Alert bsStyle='info'>
           <p>
             {t('intro:misc-text.viewing-upcoming-change')}{' '}
@@ -22,9 +23,26 @@ function LegacyLinks({ superBlock }: LegacyLinksProps): JSX.Element {
             </Link>
           </p>
         </Alert>
-      )}
       </>
     );
+  else if (isRelationalDbCert(superBlock))
+    return (
+      <>
+        <Alert bsStyle='info'>
+          <p>
+            {t('intro:misc-text.viewing-upcoming-change')}{' '}
+            <Link
+              external={true}
+              sameTab={false}
+              to={`https://forum.freecodecamp.org/t/how-to-troubleshoot-the-web-version-of-the-relational-database-curriculum/500231`}
+            >
+              {t('intro:misc-text.read-database-cert-article')}
+            </Link>
+          </p>
+        </Alert>
+      </>
+    );
+  else return <></>;
 }
 
 export default LegacyLinks;

client/src/utils/is-a-cert.ts

@@ -0,0 +1,9 @@
+import { SuperBlocks } from '../../../config/certification-settings';
+
+export function isNewRespCert(superBlock: string): boolean {
+  return superBlock === SuperBlocks.RespWebDesignNew;
+}
+
+export function isRelationalDbCert(superBlock: string): boolean {
+  return superBlock === SuperBlocks.RelationalDb;
+}

client/src/utils/is-new-responsive-web-design-cert.ts

@@ -1,5 +0,0 @@
-import { SuperBlocks } from '../../../config/certification-settings';
-
-export default function IsNewRespCert(superBlock: string): boolean {
-  return superBlock === SuperBlocks.RespWebDesignNew;
-}