feat(client): add local instructions for rdb courses (freeCodeCamp#59184)

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

Author: moT01

client/i18n/locales/english/translations.json

@@ -509,6 +509,28 @@
       "learn-more": "Learn more about <0>Gitpod workspaces.</0>",
       "logout-warning": "If you log out of freeCodeCamp before you complete the entire {{course}} course, your progress will not be saved to your freeCodeCamp account."
     },
+    "local": {
+      "intro": "This course runs in a virtual Linux machine on your computer. To run the course, you first need to download each of the following if you don't already have them:",
+      "download-vscode": "<0>VS Code</0> and the <1>Dev Containers</1> extension",
+      "heading": "Then, follow these instructions to start the course:",
+      "step-1": "Open a terminal and clone the RDB Alpha repo if you don't already have it with <0>git clone https://github.com/freeCodeCamp/rdb-alpha</0>",
+      "step-2": "Navigate to the <0>rdb-alpha</0> directory in the terminal with <1>cd rdb-alpha</1>, and open VS Code with <2>code .</2>",
+      "sub-step-heading": "If you want to save your progress to your freeCodeCamp account, do the following:",
+      "sub-step-1": "Generate a user token if you don't already have one:",
+      "generate-token-btn": "Generate User Token",
+      "sub-step-2": "Copy your user token:",
+      "copy-token-btn": "Copy User Token",
+      "logout-warning": "If you log out of freeCodeCamp before you complete the entire {{course}} course, your user token will be deleted and your progress will not be saved to your freeCodeCamp account.",
+      "sub-step-3": "In the VS Code that opened, find and open the file named <0>Dockerfile</0>. At the bottom of the file, paste your token in as the value for the <1>CODEROAD_WEBHOOK_TOKEN</1> variable. It should look like this: <2>ENV CODEROAD_WEBHOOK_TOKEN=your-token-here</2>",
+      "step-3": "Open the command palette in VS Code by expanding the \"View\" menu and clicking \"Command Palette...\" and enter <0>Dev Containers: Rebuild and Reopen in Container</0> in the input.",
+      "step-4": "A new VS Code window will open and begin building the Docker image. It will take several minutes the first time.",
+      "step-5": "Once it is finished building, open the command palette again and enter <0>CodeRoad: Start</0> to open CodeRoad.",
+      "step-6": "In the CodeRoad window, click \"Start New Tutorial\" and then the \"URL\" tab at the top.",
+      "step-7": "Copy the course URL below, paste it in the URL input, and click \"Load\".",
+      "copy-url": "Copy Course URL",
+      "step-8": "Click \"Start\" to begin.",
+      "step-9": "Follow the instructions in CodeRoad to complete the course. Note: You may need to restart the terminal once for terminal settings to take effect and the tests to pass."
+    },
     "step-1": "Step 1: Complete the project",
     "step-2": "Step 2: Submit your code",
     "submit-public-url": "When you have completed the project, save all the required files into a public repository and submit the URL to it below.",
@@ -918,6 +940,12 @@
     "generate-exam-error": "An error occurred trying to generate your exam.",
     "cert-not-found": "The certification {{certSlug}} does not exist.",
     "reset-editor-layout": "Your editor layout has been reset.",
+    "user-token-generated": "A user token was created for you.",
+    "user-token-generate-error": "Something went wrong trying to generate a user token for you.",
+    "user-token-copied": "User token copied to clipboard.",
+    "user-token-copy-error": "Something went wrong trying to copy your token.",
+    "course-url-copied": "Course URL copied to clipboard.",
+    "course-url-copy-error": "Something went wrong trying to copy the course URL.",
     "ms": {
       "transcript": {
         "link-err-1": "Please include a Microsoft transcript URL in the request.",

client/src/components/Flash/redux/flash-messages.ts

@@ -11,6 +11,8 @@ export enum FlashMessages {
   CodeSaveError = 'flash.code-save-error',
   CodeSaveLess = 'flash.code-save-less',
   CompleteProjectFirst = 'flash.complete-project-first',
+  CourseUrlCopied = 'flash.course-url-copied',
+  CourseUrlCopyError = 'flash.course-url-copy-error',
   DeleteTokenErr = 'flash.delete-token-err',
   EmailValid = 'flash.email-valid',
   GenerateExamError = 'flash.generate-exam-error',
@@ -66,6 +68,10 @@ export enum FlashMessages {
   UsernameUpdated = 'flash.username-updated',
   UsernameUsed = 'flash.username-used',
   UserNotCertified = 'flash.user-not-certified',
+  UserTokenCopied = 'flash.user-token-copied',
+  UserTokenCopyError = 'flash.user-token-copy-error',
+  UserTokenGenerated = 'flash.user-token-generated',
+  UserTokenGenerateError = 'flash.user-token-generate-error',
   WrongName = 'flash.wrong-name',
   WrongUpdating = 'flash.wrong-updating',
   WentWrong = 'flash.went-wrong'

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

@@ -4,25 +4,34 @@ import React from 'react';
 import { useFeature } from '@growthbook/growthbook-react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@freecodecamp/ui';
+import { challengeTypes } from '../../../../shared/config/challenge-types';
 
 interface CodeAllyButtonProps {
-  text: string;
+  challengeType: number;
   onClick: () => void;
 }
 
-export function CodeAllyButton(props: CodeAllyButtonProps): JSX.Element | null {
+export function CodeAllyButton({
+  challengeType,
+  onClick
+}: CodeAllyButtonProps): JSX.Element | null {
   const codeAllyDisabledFeature = useFeature('codeally_disabled');
   const { t } = useTranslation();
 
+  const text =
+    challengeType === challengeTypes.codeAllyCert
+      ? t('buttons.click-start-project')
+      : t('buttons.click-start-course');
+
   return (
     <Button
-      onClick={codeAllyDisabledFeature.on ? () => {} : props.onClick}
+      onClick={codeAllyDisabledFeature.on ? () => {} : onClick}
       disabled={codeAllyDisabledFeature.on}
       variant='primary'
       block={true}
     >
       <span className='sr-only'>, {t('aria.opens-new-window')}</span>
-      {props.text}&nbsp;&nbsp;
+      {text}&nbsp;&nbsp;
       <FontAwesomeIcon icon={faExternalLinkAlt} />
     </Button>
   );

client/src/templates/Challenges/codeally/rdb-gitpod-continue-alert.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Trans } from 'react-i18next';
+import { Alert, Spacer } from '@freecodecamp/ui';
+
+interface RdbGitpodContinueAlertProps {
+  course: string;
+}
+
+function RdbGitpodContinueAlert({
+  course
+}: RdbGitpodContinueAlertProps): JSX.Element {
+  return (
+    <Alert variant='info'>
+      <Trans values={{ course }} i18nKey='learn.gitpod.continue-project'>
+        <a
+          href='https://gitpod.io/workspaces'
+          rel='noopener noreferrer'
+          target='_blank'
+        >
+          placeholder
+        </a>
+      </Trans>
+      <Spacer size='m' />
+      <Trans i18nKey='learn.gitpod.learn-more'>
+        <a
+          href='https://forum.freecodecamp.org/t/using-gitpod-in-the-curriculum/668669'
+          rel='noopener noreferrer'
+          target='_blank'
+        >
+          placeholder
+        </a>
+      </Trans>
+    </Alert>
+  );
+}
+
+RdbGitpodContinueAlert.displayName = 'RdbGitpodContinueAlert';
+
+export default RdbGitpodContinueAlert;

client/src/templates/Challenges/codeally/rdb-gitpod-instructions.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+function RdbGitpodInstructions(): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <div className='ca-description'>
+      <p>{t('learn.gitpod.intro')}</p>
+      <ol>
+        <li>
+          <Trans i18nKey='learn.gitpod.step-1'>
+            <a
+              href='https://github.com/join'
+              rel='noopener noreferrer'
+              target='_blank'
+              title={t('learn.source-code-link')}
+            >
+              placeholder
+            </a>
+          </Trans>
+        </li>
+        <li>{t('learn.gitpod.step-2')}</li>
+        <li>{t('learn.gitpod.step-3')}</li>
+        <li>
+          {t('learn.gitpod.step-4')}
+          <ul>
+            <li>{t('learn.gitpod.step-5')}</li>
+            <li>{t('learn.gitpod.step-6')}</li>
+            <li>{t('learn.gitpod.step-7')}</li>
+            <li>{t('learn.gitpod.step-8')}</li>
+          </ul>
+        </li>
+        <li>{t('learn.gitpod.step-9')}</li>
+      </ol>
+    </div>
+  );
+}
+
+RdbGitpodInstructions.displayName = 'RdbGitpodInstructions';
+
+export default RdbGitpodInstructions;

client/src/templates/Challenges/codeally/rdb-gitpod-logout-alert.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Alert } from '@freecodecamp/ui';
+
+interface RdbGitpodLogoutAlertProps {
+  course: string;
+}
+
+function RdbGitpodLogoutAlert({
+  course
+}: RdbGitpodLogoutAlertProps): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <Alert variant='danger'>
+      {t('learn.gitpod.logout-warning', { course })}
+    </Alert>
+  );
+}
+
+RdbGitpodLogoutAlert.displayName = 'RdbGitpodLogoutAlert';
+
+export default RdbGitpodLogoutAlert;