feat(client): add codeally_down feature flag (#50190)

* feat(client): add codeally_down feature flag

---------

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

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Alert } from '@freecodecamp/react-bootstrap';
+import { useFeature } from '@growthbook/growthbook-react';
+import Spacer from '../../components/helpers/spacer';
+
+export function CodeAllyDown(): JSX.Element | null {
+  const codeAllyDownFeature = useFeature('codeally_down');
+  const { t } = useTranslation();
+
+  return codeAllyDownFeature.on ? (
+    <Alert bsStyle='danger'>
+      <p>
+        <Trans i18nKey='intro:misc-text.course-maintenance'>
+          <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>
+  ) : null;
+}

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

@@ -1,7 +1,7 @@
 // Package Utilities
 import { Alert, Grid, Col, Row, Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
-import React, { Component } from 'react';
+import React, { Component, RefObject } from 'react';
 import Helmet from 'react-helmet';
 import type { TFunction } from 'i18next';
 import { Trans, withTranslation } from 'react-i18next';
@@ -45,7 +45,7 @@ import ProjectToolPanel from '../projects/tool-panel';
 import SolutionForm from '../projects/solution-form';
 import { FlashMessages } from '../../../components/Flash/redux/flash-messages';
 import { SuperBlocks } from '../../../../../config/certification-settings';
-import { CODEALLY_DOWN } from '../../../../../config/misc';
+import { CodeAllyDown } from '../../../components/growth-book/codeally-down';
 
 import './codeally.css';
 
@@ -110,10 +110,9 @@ interface ShowCodeAllyProps {
   userToken: string | null;
 }
 
-// Component
 class ShowCodeAlly extends Component<ShowCodeAllyProps> {
   static displayName: string;
-  private _container: HTMLElement | null = null;
+  private _container: RefObject<HTMLElement> | undefined;
 
   componentDidMount(): void {
     const {
@@ -133,7 +132,8 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
       helpCategory
     });
     challengeMounted(challengeMeta.id);
-    this._container?.focus();
+
+    this._container?.current?.focus();
   }
 
   componentWillUnmount() {
@@ -246,35 +246,14 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
       </LearnLayout>
     ) : (
       <Hotkeys
-        innerRef={(c: HTMLElement | null) => (this._container = c)}
+        innerRef={this._container}
         nextChallengePath={nextChallengePath}
         prevChallengePath={prevChallengePath}
       >
         <LearnLayout>
           <Helmet title={`${blockName}: ${title} | freeCodeCamp.org`} />
           <Grid>
-            {CODEALLY_DOWN && superBlock === SuperBlocks.RelationalDb && (
-              <Row>
-                <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                  <Spacer size='medium' />
-                  <Alert bsStyle='danger'>
-                    <p>
-                      <Trans i18nKey='intro:misc-text.course-maintenance'>
-                        <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>
-                </Col>
-              </Row>
-            )}
+            {superBlock === SuperBlocks.RelationalDb && <CodeAllyDown />}
             <Row>
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <Spacer size='medium' />

client/src/templates/Challenges/components/hotkeys.tsx

@@ -1,5 +1,5 @@
 import { navigate } from 'gatsby';
-import React, { MutableRefObject } from 'react';
+import React, { MutableRefObject, RefObject } from 'react';
 import { HotKeys, GlobalHotKeys } from 'react-hotkeys';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
@@ -67,10 +67,10 @@ interface HotkeysProps
   challengeFiles: ChallengeFiles;
   challengeType?: number;
   children: React.ReactElement;
-  editorRef: MutableRefObject<editor.IStandaloneCodeEditor | undefined>;
+  editorRef?: MutableRefObject<editor.IStandaloneCodeEditor | undefined>;
   executeChallenge?: (options?: { showCompletionModal: boolean }) => void;
   submitChallenge: () => void;
-  innerRef: MutableRefObject<HTMLElement | undefined>;
+  innerRef: RefObject<HTMLElement> | undefined;
   instructionsPanelRef?: React.RefObject<HTMLElement>;
   setEditorFocusability: (arg0: boolean) => void;
   setIsAdvancing: (arg0: boolean) => void;
@@ -99,12 +99,12 @@ function Hotkeys({
   user: { keyboardShortcuts }
 }: HotkeysProps): JSX.Element {
   const handlers = {
-    executeChallenge: (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    executeChallenge: (e?: KeyboardEvent) => {
       // the 'enter' part of 'ctrl+enter' stops HotKeys from listening, so it
       // needs to be prevented.
       // TODO: 'enter' on its own also disables HotKeys, but default behaviour
       // should not be prevented in that case.
-      e.preventDefault();
+      e?.preventDefault();
 
       if (!executeChallenge) return;
 
@@ -126,8 +126,8 @@ function Hotkeys({
     },
     ...(keyboardShortcuts
       ? {
-          focusEditor: (e: React.KeyboardEvent) => {
-            e.preventDefault();
+          focusEditor: (e?: KeyboardEvent) => {
+            e?.preventDefault();
             if (editorRef && editorRef.current) {
               editorRef.current.focus();
             }
@@ -158,8 +158,8 @@ function Hotkeys({
               }
             }
           },
-          showShortcuts: (e: React.KeyboardEvent) => {
-            if (!canFocusEditor && e.shiftKey && e.key === '?') {
+          showShortcuts: (e?: KeyboardEvent) => {
+            if (!canFocusEditor && e?.shiftKey && e.key === '?') {
               openShortcutsModal();
             }
           }
@@ -173,8 +173,6 @@ function Hotkeys({
   // canFocusEditor)
   return (
     <>
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/* @ts-ignore */}
       <HotKeys
         allowChanges={true}
         handlers={handlers}

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { Alert } from '@freecodecamp/react-bootstrap';
 import { SuperBlocks } from '../../../../../config/certification-settings';
 import { isOldRespCert, isRelationalDbCert } from '../../../utils/is-a-cert';
 import { Link } from '../../../components/helpers';
-import { CODEALLY_DOWN } from '../../../../../config/misc';
-import Spacer from '../../../components/helpers/spacer';
+import { CodeAllyDown } from '../../../components/growth-book/codeally-down';
 
 import envData from '../../../../../config/env.json';
 
@@ -34,23 +33,7 @@ function LegacyLinks({ superBlock }: LegacyLinksProps): JSX.Element {
   else if (isRelationalDbCert(superBlock))
     return (
       <>
-        {CODEALLY_DOWN && (
-          <Alert bsStyle='danger'>
-            <p>
-              <Trans i18nKey='intro:misc-text.course-maintenance'>
-                <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>
-        )}
+        <CodeAllyDown />
         {clientLocale != 'english' && (
           <Alert bsStyle='info'>
             <p>{t('intro:misc-text.english-only')}</p>

config/misc.ts

@@ -3,4 +3,3 @@ export const MAX_MOBILE_WIDTH = 767;
 export const TOOL_PANEL_HEIGHT = 37;
 export const SEARCH_EXPOSED_WIDTH = 980;
 export const DONATE_NAV_EXPOSED_WIDTH = 600;
-export const CODEALLY_DOWN = false;