feat: mvp features for soft launch (#44539)

* refactor: use enum

* feat: create links between legacy and new

* refactor: pull out legacy-links component

* fix: import order

* fix: provide icon for new superblock

* feat: only show the copy on the new superblock

* fix: use the proper i18n keys correctly

* feat: put the new superblock at the end of the map

* feat: update the new superblock title

* test: update for soft launch order

* fix: show original project links on /settings

Soft launch only.

* test: use SHOW_NEW_CURRICULUM in tests

* fix: rename the remaining rwd-22s

* feat: make the messge prettier

* fix: message copy

* refactor: make comment make sense

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

client/i18n/locales/english/intro.json

@@ -67,7 +67,7 @@
     }
   },
   "2022/responsive-web-design": {
-    "title": "Responsive Web Design",
+    "title": "Responsive Web Design (Beta)",
     "intro": [
       "In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.",
       "First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.",
@@ -672,6 +672,8 @@
     "expand": "Expand courses",
     "collapse": "Collapse courses",
     "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."
+    "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 version of the curriculum. ",
+    "go-back-to-learn": "Go back to the stable version."
   }
 }

client/src/assets/icons/index.tsx

@@ -14,6 +14,7 @@ import ResponsiveDesign from './responsive-design';
 import Shield from './shield';
 
 const iconMap = {
+  [SuperBlocks.RespWebDesignNew]: ResponsiveDesign,
   [SuperBlocks.RespWebDesign]: ResponsiveDesign,
   [SuperBlocks.JsAlgoDataStruct]: JavaScriptIcon,
   [SuperBlocks.FrontEndDevLibs]: ReactIcon,

client/src/components/layouts/global.css

@@ -595,7 +595,9 @@ blockquote .small {
   border-color: #31708f;
 }
 .alert .btn:hover,
-.alert .btn:focus {
+.alert .btn:focus,
+.alert a:hover,
+.alert a:hover {
   background-color: #31708f;
   color: #d9edf7;
   border-color: #31708f;

client/src/resources/cert-and-project-map.ts

@@ -1,7 +1,7 @@
 import { SuperBlocks } from '../../../config/certification-settings';
 import envData from '../../../config/env.json';
 
-const { showNewCurriculum } = envData;
+const { showNewCurriculum, showUpcomingChanges } = envData;
 
 const responsiveWebBase =
   '/learn/responsive-web-design/responsive-web-design-projects';
@@ -729,7 +729,8 @@ function getResponsiveWebDesignPath(
   project: string,
   { showNewCurriculum }: { showNewCurriculum: boolean }
 ) {
-  return showNewCurriculum
+  // TODO: for the hard launch, the conditional should just be `showNewCurriculum`
+  return showNewCurriculum && showUpcomingChanges
     ? `${responsiveWeb22Base}/${project}-project/${project}`
     : `${responsiveWebBase}/${project}/`;
 }

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SuperBlocks } from '../../../../../config/certification-settings';
+import { Link } from '../../../components/helpers';
+import { Alert } from '@freecodecamp/react-bootstrap';
+
+interface LegacyLinksProps {
+  superBlock: SuperBlocks;
+}
+
+function LegacyLinks({ superBlock }: LegacyLinksProps): JSX.Element {
+  const { t } = useTranslation();
+  return (
+    <>
+      {superBlock === SuperBlocks.RespWebDesignNew && (
+        <Alert bsStyle='info'>
+          <p>
+            {t('intro:misc-text.viewing-upcoming-change')}{' '}
+            <Link sameTab={false} to={`/learn/`}>
+              {t('intro:misc-text.go-back-to-learn')}
+            </Link>
+          </p>
+        </Alert>
+      )}
+    </>
+  );
+}
+
+export default LegacyLinks;

client/src/templates/Introduction/intro.css

@@ -3,6 +3,11 @@
   font-size: 1.17rem;
 }
 
+.super-block-intro-page .alert p {
+  font-family: inherit;
+  font-size: inherit;
+}
+
 .big-subheading {
   font-size: 2rem;
   overflow-wrap: break-word;

client/src/templates/Introduction/super-block-intro.tsx

@@ -27,6 +27,7 @@ import {
 import { MarkdownRemark, AllChallengeNode, User } from '../../redux/prop-types';
 import Block from './components/block';
 import CertChallenge from './components/cert-challenge';
+import LegacyLinks from './components/legacy-links';
 import SuperBlockIntro from './components/super-block-intro';
 import { resetExpansion, toggleBlock } from './redux';
 
@@ -196,8 +197,9 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
         <Row className='super-block-intro-page'>
           <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
             <Spacer size={2} />
+            <LegacyLinks superBlock={superBlock} />
             <SuperBlockIntro superBlock={superBlock} />
-            {superBlock === 'relational-databases' && isSignedIn && (
+            {superBlock === SuperBlocks.RelationalDb && isSignedIn && (
               <WebhookToken isSuperBlockPage={true} />
             )}
             <Spacer size={2} />

config/certification-settings.ts

@@ -18,6 +18,7 @@ export const certTypes = {
 };
 
 export enum SuperBlocks {
+  RespWebDesignNew = '2022/responsive-web-design',
   RespWebDesign = 'responsive-web-design',
   JsAlgoDataStruct = 'javascript-algorithms-and-data-structures',
   FrontEndDevLibs = 'front-end-development-libraries',

curriculum/test/test-challenges.js

@@ -274,10 +274,17 @@ function populateTestsForLang({ lang, challenges, meta }) {
         return;
       }
       it(`${superBlock} should have the same order in every meta`, function () {
-        const firstOrder = getSuperOrder(filteredMeta[0].superBlock);
+        const firstOrder = getSuperOrder(filteredMeta[0].superBlock, {
+          showNewCurriculum: process.env.SHOW_NEW_CURRICULUM
+        });
         assert.isNumber(firstOrder);
         assert.isTrue(
-          filteredMeta.every(el => getSuperOrder(el.superBlock) === firstOrder),
+          filteredMeta.every(
+            el =>
+              getSuperOrder(el.superBlock, {
+                showNewCurriculum: process.env.SHOW_NEW_CURRICULUM
+              }) === firstOrder
+          ),
           'The superOrder properties are mismatched.'
         );
       });

curriculum/utils.js

@@ -36,7 +36,7 @@ const superBlockToOrder = {
 };
 
 const superBlockToNewOrder = {
-  '2022/responsive-web-design': 0,
+  'responsive-web-design': 0,
   'javascript-algorithms-and-data-structures': 1,
   'front-end-development-libraries': 2,
   'data-visualization': 3,
@@ -48,7 +48,7 @@ const superBlockToNewOrder = {
   'information-security': 9,
   'machine-learning-with-python': 10,
   'coding-interview-prep': 11,
-  'responsive-web-design': 12
+  '2022/responsive-web-design': 12
 };
 
 function getSuperOrder(

curriculum/utils.test.js

@@ -38,7 +38,7 @@ describe('getSuperOrder', () => {
   it('returns a different order if passed the option showNewCurriculum: true', () => {
     expect.assertions(13);
     expect(
-      getSuperOrder('2022/responsive-web-design', { showNewCurriculum: true })
+      getSuperOrder('responsive-web-design', { showNewCurriculum: true })
     ).toBe(0);
     expect(
       getSuperOrder('javascript-algorithms-and-data-structures', {
@@ -82,7 +82,7 @@ describe('getSuperOrder', () => {
       getSuperOrder('coding-interview-prep', { showNewCurriculum: true })
     ).toBe(11);
     expect(
-      getSuperOrder('responsive-web-design', { showNewCurriculum: true })
+      getSuperOrder('2022/responsive-web-design', { showNewCurriculum: true })
     ).toBe(12);
   });
 });