feat: add feature flags to disable RDB courses (#53423)

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/i18n/locales/english/intro.json

@@ -1448,6 +1448,9 @@
     "legacy-desc": "These courses are no longer part of the certification path, but are still available for you to further your learning.",
     "legacy-go-back": "Go to the current version of the curriculum.",
     "course-maintenance": "These courses are undergoing maintenance. If they are not working, you can learn how to run them locally at <0>https://www.freecodecamp.org/news/how-to-run-freecodecamps-relational-databases-curriculum-using-docker-vscode-and-coderoad</0>.",
+    "course-disabling-soon": "The browser version of these courses will be temporarily disabled soon and your virtual machines will be deleted. Any progress in your virtual machines will be lost. If you have any files you want from them, you should save them to your computer. We apologize for any inconvenience. We hope to have an improved browser version of these courses available again in the next few weeks.",
+    "course-disabled": "These courses are temporarily unavailable to run in the browser. We apologize for any inconvenience. You can learn how to run them locally at <0>https://www.freecodecamp.org/news/how-to-run-freecodecamps-relational-databases-curriculum-using-docker-vscode-and-coderoad</0>. We hope to have an improved browser version available again in the next few weeks.",
+    "run-locally": "For now, we recommend running the courses locally on your computer. You can learn how at <0>https://www.freecodecamp.org/news/how-to-run-freecodecamps-relational-databases-curriculum-using-docker-vscode-and-coderoad</0>.",
     "progress-wont-save": "Your progress will not be saved to your freeCodeCamp account when running them locally.",
     "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/components/growth-book/codeally-button.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useFeature } from '@growthbook/growthbook-react';
+import { Button } from '@freecodecamp/ui';
+
+interface CodeAllyButtonProps {
+  onClick: () => void;
+  text: string;
+}
+
+export function CodeAllyButton(props: CodeAllyButtonProps): JSX.Element | null {
+  const codeAllyDisabledFeature = useFeature('codeally_disabled');
+
+  return (
+    <Button
+      aria-describedby='codeally-cookie-warning'
+      block={true}
+      variant='primary'
+      data-cy='start-codeally'
+      disabled={codeAllyDisabledFeature.on}
+      onClick={props.onClick}
+    >
+      {props.text}
+    </Button>
+  );
+}

client/src/components/growth-book/codeally-down.tsx

@@ -4,11 +4,9 @@ import { Alert } from '@freecodecamp/ui';
 import { useFeature } from '@growthbook/growthbook-react';
 import Spacer from '../../components/helpers/spacer';
 
-export function CodeAllyDown(): JSX.Element | null {
-  const codeAllyDownFeature = useFeature('codeally_down');
+const Down = () => {
   const { t } = useTranslation();
-
-  return codeAllyDownFeature.on ? (
+  return (
     <Alert variant='danger'>
       <p>
         <Trans i18nKey='intro:misc-text.course-maintenance'>
@@ -24,5 +22,63 @@ export function CodeAllyDown(): JSX.Element | null {
       <Spacer size='small' />
       <p>{t('intro:misc-text.progress-wont-save')}</p>
     </Alert>
+  );
+};
+
+const DisablingSoon = () => {
+  const { t } = useTranslation();
+  return (
+    <Alert variant='danger'>
+      <p>{t('intro:misc-text.course-disabling-soon')}</p>
+      <Spacer size='small' />
+      <p>
+        <Trans i18nKey='intro:misc-text.run-locally'>
+          <a
+            href='https://www.freecodecamp.org/news/how-to-run-freecodecamps-relational-databases-curriculum-using-docker-vscode-and-coderoad'
+            rel='noreferrer'
+            target='_blank'
+          >
+            placeholder
+          </a>
+        </Trans>
+      </p>
+      <Spacer size='small' />
+      <p>{t('intro:misc-text.progress-wont-save')}</p>
+    </Alert>
+  );
+};
+
+const Disabled = () => {
+  const { t } = useTranslation();
+  return (
+    <Alert variant='danger'>
+      <p>
+        <Trans i18nKey='intro:misc-text.course-disabled'>
+          <a
+            href='https://www.freecodecamp.org/news/how-to-run-freecodecamps-relational-databases-curriculum-using-docker-vscode-and-coderoad'
+            rel='noreferrer'
+            target='_blank'
+          >
+            placeholder
+          </a>
+        </Trans>
+      </p>
+      <Spacer size='small' />
+      <p>{t('intro:misc-text.progress-wont-save')}</p>
+    </Alert>
+  );
+};
+
+export function CodeAllyDown(): JSX.Element | null {
+  const codeAllyDownFeature = useFeature('codeally_down');
+  const codeAllyDisablingSoonFeature = useFeature('codeally_disabling_soon');
+  const codeAllyDisabledFeature = useFeature('codeally_disabled');
+
+  return codeAllyDisabledFeature.on ? (
+    <Disabled />
+  ) : codeAllyDisablingSoonFeature.on ? (
+    <DisablingSoon />
+  ) : codeAllyDownFeature.on ? (
+    <Down />
   ) : null;
 }

client/src/components/growth-book/codeally-iframe.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useFeature } from '@growthbook/growthbook-react';
+
+interface CodeAllyIframeProps {
+  src: string;
+}
+
+export function CodeAllyIframe(props: CodeAllyIframeProps): JSX.Element | null {
+  const codeAllyDisabledFeature = useFeature('codeally_disabled');
+
+  return codeAllyDisabledFeature.on ? null : (
+    <iframe
+      className='codeally-frame'
+      data-cy='codeally-frame'
+      name={`codeAlly${Date.now()}`}
+      sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
+      src={props.src}
+      title='Editor'
+    />
+  );
+}

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

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row, Alert, Button } from '@freecodecamp/ui';
+import { Container, Col, Row, Alert } from '@freecodecamp/ui';
 
 // Local Utilities
 import Spacer from '../../../components/helpers/spacer';
@@ -48,6 +48,8 @@ import { SuperBlocks } from '../../../../../shared/config/superblocks';
 import { CodeAllyDown } from '../../../components/growth-book/codeally-down';
 
 import './codeally.css';
+import { CodeAllyIframe } from '../../../components/growth-book/codeally-iframe';
+import { CodeAllyButton } from '../../../components/growth-book/codeally-button';
 
 // Redux
 const mapStateToProps = createSelector(
@@ -238,13 +240,8 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
     return showCodeAlly ? (
       <LearnLayout>
         <Helmet title={windowTitle} />
-        <iframe
-          className='codeally-frame'
-          data-cy='codeally-frame'
-          name={`codeAlly${Date.now()}`}
-          sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
+        <CodeAllyIframe
           src={`https://codeally.io/embed/?repoUrl=${url}&${goBackTo}&${envVariables}&${tempToken}&${date}`}
-          title='Editor'
         />
       </LearnLayout>
     ) : (
@@ -307,17 +304,14 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                 <Alert id='codeally-cookie-warning' variant='info'>
                   <p>{t(`intro:misc-text.enable-cookies`)}</p>
                 </Alert>
-                <Button
-                  aria-describedby='codeally-cookie-warning'
-                  block={true}
-                  variant='primary'
-                  data-cy='start-codeally'
+                <CodeAllyButton
                   onClick={tryToShowCodeAlly}
-                >
-                  {challengeType === challengeTypes.codeAllyCert
-                    ? t('buttons.click-start-project')
-                    : t('buttons.click-start-course')}
-                </Button>
+                  text={
+                    challengeType === challengeTypes.codeAllyCert
+                      ? t('buttons.click-start-project')
+                      : t('buttons.click-start-course')
+                  }
+                />
                 {isSignedIn &&
                   challengeType === challengeTypes.codeAllyCert && (
                     <>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Alert } from '@freecodecamp/ui';
+import { useFeature } from '@growthbook/growthbook-react';
 import { SuperBlocks } from '../../../../../shared/config/superblocks';
 import { isOldRespCert, isRelationalDbCert } from '../../../utils/is-a-cert';
 import { Link } from '../../../components/helpers';
@@ -16,6 +17,7 @@ interface LegacyLinksProps {
 
 function LegacyLinks({ superBlock }: LegacyLinksProps): JSX.Element {
   const { t } = useTranslation();
+  const codeAllyDisabledFeature = useFeature('codeally_disabled');
 
   if (isOldRespCert(superBlock))
     return (
@@ -39,17 +41,19 @@ function LegacyLinks({ superBlock }: LegacyLinksProps): JSX.Element {
             <p>{t('intro:misc-text.english-only')}</p>
           </Alert>
         )}
-        <Alert variant='info'>
-          <p>
-            <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>
+        {codeAllyDisabledFeature.on ? null : (
+          <Alert variant='info'>
+            <p>
+              <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 <></>;