From fbf059c60ab44cd6253196c780c7a788923e172b Mon Sep 17 00:00:00 2001 From: Tom <20648924+moT01@users.noreply.github.com> Date: Tue, 6 Feb 2024 13:32:19 -0600 Subject: [PATCH] feat: add feature flags to disable RDB courses (#53423) Co-authored-by: Shaun Hamilton Co-authored-by: Oliver Eyton-Williams --- client/i18n/locales/english/intro.json | 3 + .../growth-book/codeally-button.tsx | 25 ++++++++ .../components/growth-book/codeally-down.tsx | 64 +++++++++++++++++-- .../growth-book/codeally-iframe.tsx | 21 ++++++ .../templates/Challenges/codeally/show.tsx | 28 ++++---- .../Introduction/components/legacy-links.tsx | 26 ++++---- 6 files changed, 135 insertions(+), 32 deletions(-) create mode 100644 client/src/components/growth-book/codeally-button.tsx create mode 100644 client/src/components/growth-book/codeally-iframe.tsx diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 9a63f08487f..45d581bde43 100644 --- a/client/i18n/locales/english/intro.json +++ b/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.", + "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. 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.", "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.", diff --git a/client/src/components/growth-book/codeally-button.tsx b/client/src/components/growth-book/codeally-button.tsx new file mode 100644 index 00000000000..fa216d81f75 --- /dev/null +++ b/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 ( + + ); +} diff --git a/client/src/components/growth-book/codeally-down.tsx b/client/src/components/growth-book/codeally-down.tsx index 0549c35e3a6..8a41fcad9e6 100644 --- a/client/src/components/growth-book/codeally-down.tsx +++ b/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 (

@@ -24,5 +22,63 @@ export function CodeAllyDown(): JSX.Element | null {

{t('intro:misc-text.progress-wont-save')}

 + ); +}; + +const DisablingSoon = () => { + const { t } = useTranslation(); + return ( + +

{t('intro:misc-text.course-disabling-soon')}

+ +

+ + + placeholder + + +

+ +

{t('intro:misc-text.progress-wont-save')}

+ + ); +}; + +const Disabled = () => { + const { t } = useTranslation(); + return ( + +

+ + + placeholder + + +

+ +

{t('intro:misc-text.progress-wont-save')}

+ + ); +}; + +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 ? ( + + ) : codeAllyDisablingSoonFeature.on ? ( + + ) : codeAllyDownFeature.on ? ( + ) : null; } diff --git a/client/src/components/growth-book/codeally-iframe.tsx b/client/src/components/growth-book/codeally-iframe.tsx new file mode 100644 index 00000000000..3972fa434ce --- /dev/null +++ b/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 : ( +