From fd63bb6f85c5886b8f30cff1c4215b745b6b8110 Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Wed, 22 Dec 2021 16:53:40 +0000 Subject: [PATCH] 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 Co-authored-by: Nicholas Carrigan (he/him) --- client/i18n/locales/english/intro.json | 6 ++-- client/src/assets/icons/index.tsx | 1 + client/src/components/layouts/global.css | 4 ++- client/src/resources/cert-and-project-map.ts | 5 ++-- .../Introduction/components/legacy-links.tsx | 29 +++++++++++++++++++ client/src/templates/Introduction/intro.css | 5 ++++ .../Introduction/super-block-intro.tsx | 4 ++- config/certification-settings.ts | 1 + curriculum/test/test-challenges.js | 11 +++++-- curriculum/utils.js | 4 +-- curriculum/utils.test.js | 4 +-- 11 files changed, 62 insertions(+), 12 deletions(-) create mode 100644 client/src/templates/Introduction/components/legacy-links.tsx diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 7820da656f..8823699e80 100644 --- a/client/i18n/locales/english/intro.json +++ b/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." } } diff --git a/client/src/assets/icons/index.tsx b/client/src/assets/icons/index.tsx index a0d9e24d4c..43898859b2 100644 --- a/client/src/assets/icons/index.tsx +++ b/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, diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css index 80ec16ee42..72b546c489 100644 --- a/client/src/components/layouts/global.css +++ b/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; diff --git a/client/src/resources/cert-and-project-map.ts b/client/src/resources/cert-and-project-map.ts index 122a49e89b..e8ea47859c 100644 --- a/client/src/resources/cert-and-project-map.ts +++ b/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}/`; } diff --git a/client/src/templates/Introduction/components/legacy-links.tsx b/client/src/templates/Introduction/components/legacy-links.tsx new file mode 100644 index 0000000000..a55fd2b816 --- /dev/null +++ b/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 && ( + +

+ {t('intro:misc-text.viewing-upcoming-change')}{' '} + + {t('intro:misc-text.go-back-to-learn')} + +

+ + )} + + ); +} + +export default LegacyLinks; diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css index edafb3e1c7..5bb8ee47b9 100644 --- a/client/src/templates/Introduction/intro.css +++ b/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; diff --git a/client/src/templates/Introduction/super-block-intro.tsx b/client/src/templates/Introduction/super-block-intro.tsx index 21f5224d96..4ec567622e 100644 --- a/client/src/templates/Introduction/super-block-intro.tsx +++ b/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) => { + - {superBlock === 'relational-databases' && isSignedIn && ( + {superBlock === SuperBlocks.RelationalDb && isSignedIn && ( )} diff --git a/config/certification-settings.ts b/config/certification-settings.ts index 4e1a054726..a4f26e4222 100644 --- a/config/certification-settings.ts +++ b/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', diff --git a/curriculum/test/test-challenges.js b/curriculum/test/test-challenges.js index abe4f2c849..447c0a7070 100644 --- a/curriculum/test/test-challenges.js +++ b/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.' ); }); diff --git a/curriculum/utils.js b/curriculum/utils.js index f221f67cbc..6c45d7c3b1 100644 --- a/curriculum/utils.js +++ b/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( diff --git a/curriculum/utils.test.js b/curriculum/utils.test.js index a143c7fdc4..c3926ca4c8 100644 --- a/curriculum/utils.test.js +++ b/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); }); });