From a713ee74c493ce21e43ecc1dc265efbeadb52634 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Thu, 9 Mar 2023 17:45:32 +0000 Subject: [PATCH 1/5] chore: split CRUD_MODE env var into WRITER_MODE and DEV_MODE MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Currently we place a lot of “local environment” features/setup behind the CRUD_MODE environment variable. There's some problems with that: - It enables a bunch of writer-specific features we really don't need as devs, such as index.json reloading every few seconds, and the flaws toolbar - It isn't enabled on :5042, so testing certain features (such as glean) aren't possible on that port, as they require further setup locally which isn't done when CRUD_MODE is false --- .env-dist | 2 ++ .github/workflows/npm-publish.yml | 2 +- .../workflows/npm-published-simulation.yml | 2 +- client/src/app.tsx | 12 +++++------ client/src/banners/README.md | 2 +- client/src/banners/index.tsx | 4 ++-- client/src/contributor-spotlight/index.tsx | 4 ++-- client/src/document/index.tsx | 8 ++++---- client/src/document/toolbar/edit-actions.tsx | 4 ++-- client/src/document/toolbar/flaws.tsx | 6 +++--- client/src/document/toolbar/index.tsx | 4 ++-- client/src/env.ts | 18 ++++++++++------- .../homepage/contributor-spotlight/index.tsx | 4 ++-- .../src/homepage/featured-articles/index.tsx | 4 ++-- client/src/homepage/latest-news/index.tsx | 4 ++-- .../homepage/recent-contributions/index.tsx | 4 ++-- client/src/homepage/static-page/index.tsx | 4 ++-- .../plus/offer-overview/offer-hero/index.tsx | 4 ++-- client/src/site-search/search-results.tsx | 6 +++--- client/src/sitemap/index.tsx | 8 ++++---- client/src/telemetry/glean-context.tsx | 6 +++--- docs/envvars.md | 20 ++++++++++++------- docs/npm-packaging.md | 2 +- testing/README.md | 2 +- 24 files changed, 74 insertions(+), 62 deletions(-) diff --git a/.env-dist b/.env-dist index 5719809fc5a3..fde17baddea9 100644 --- a/.env-dist +++ b/.env-dist @@ -2,5 +2,7 @@ CONTENT_ROOT=../content/files #CONTENT_TRANSLATED_ROOT=../translated-content/files #CONTRIBUTOR_SPOTLIGHT_ROOT=../mdn-contributor-spotlight/contributors +REACT_APP_DEV_MODE=true + # See documentation in docs/envvars.md for more information about this #BUILD_FLAW_LEVELS=broken_links:error, macros:ignore diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index 0aaeb8206e84..b75e3abb01c2 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -34,7 +34,7 @@ jobs: env: # What this does is it makes sure the built client is made for # doing CRUD work (e.g. previewing, toolbar, flaws UI, etc) - REACT_APP_CRUD_MODE: true + REACT_APP_WRITER_MODE: true # This makes sure the auth is disabled. I.e. the "Sign in" link # in the header. It also disables any XHR checks to the server's diff --git a/.github/workflows/npm-published-simulation.yml b/.github/workflows/npm-published-simulation.yml index 4a035b6c72a6..26f3f0a2c689 100644 --- a/.github/workflows/npm-published-simulation.yml +++ b/.github/workflows/npm-published-simulation.yml @@ -42,7 +42,7 @@ jobs: # The following env vars is what we do in npm-publish.yml # Each variable set is documented there. - REACT_APP_CRUD_MODE: true + REACT_APP_WRITER_MODE: true REACT_APP_DISABLE_AUTH: true CONTENT_ROOT: testing/content/files run: | diff --git a/client/src/app.tsx b/client/src/app.tsx index 88c702a3de60..d5d7e3a5c3c4 100644 --- a/client/src/app.tsx +++ b/client/src/app.tsx @@ -5,7 +5,7 @@ import { Routes, Route, useLocation, useMatch } from "react-router-dom"; // and applied before any component specific style import "./app.scss"; -import { CRUD_MODE, PLACEMENT_ENABLED, PLUS_IS_ENABLED } from "./env"; +import { WRITER_MODE, PLACEMENT_ENABLED, PLUS_IS_ENABLED } from "./env"; import { Homepage } from "./homepage"; import { Document } from "./document"; import { A11yNav } from "./ui/molecules/a11y-nav"; @@ -133,11 +133,11 @@ export function App(appProps) { const isServer = useIsServer(); - // When preparing a build for use in the NPM package, CRUD_MODE is always true. + // When preparing a build for use in the NPM package, WRITER_MODE is always true. // But if the App is loaded from the code that builds the SPAs, then `isServer` - // is true. So you have to have `isServer && CRUD_MODE` at the same time. + // is true. So you have to have `isServer && WRITER_MODE` at the same time. const homePage = - !isServer && CRUD_MODE ? ( + !isServer && WRITER_MODE ? ( @@ -162,7 +162,7 @@ export function App(appProps) { path="/:locale/*" element={ - {CRUD_MODE && ( + {WRITER_MODE && ( <> component itself. - Normally, you get to the home page by NOT being in CRUD_MODE, but + Normally, you get to the home page by NOT being in WRITER_MODE, but if you want to use the hot-reloading app, it might be convenient to be able to run it locally */} diff --git a/client/src/banners/README.md b/client/src/banners/README.md index b1894198145a..3adf17335693 100644 --- a/client/src/banners/README.md +++ b/client/src/banners/README.md @@ -22,7 +22,7 @@ To adjust the number of days to embargo the banner, update `daysToEmbargo`: const daysToEmbargo = 14; ``` -> NOTE: Banners are not embargoed, if `REACT_APP_CRUD_MODE` is set to `true`. +> NOTE: Banners are not embargoed, if `REACT_APP_DEV_MODE` is set to `true`. Now head over to `client/src/banners/active-banner.tsx` and add or update the the component function for the banner as appropriate: diff --git a/client/src/banners/index.tsx b/client/src/banners/index.tsx index 7f74abb53468..91d3738e26c4 100644 --- a/client/src/banners/index.tsx +++ b/client/src/banners/index.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { setEmbargoed, isEmbargoed } from "./banner-utils"; -import { CRUD_MODE, NEWSLETTER_ENABLED } from "../env"; +import { DEV_MODE, NEWSLETTER_ENABLED } from "../env"; // We may or may not load any active banner. But if there's a small chance // that we might, it's best practice to not have to lazy-load the CSS @@ -26,7 +26,7 @@ export function Banner() { ? BannerId.NEWSLETTER_ANNOUNCEMENT : BannerId.MULTIPLE_COLLECTIONS : BannerId.PLUS_LAUNCH_ANNOUNCEMENT; - if (currentBannerId && (CRUD_MODE || !isEmbargoed(currentBannerId))) { + if (currentBannerId && (DEV_MODE || !isEmbargoed(currentBannerId))) { return ( ) { }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: WRITER_MODE, revalidateOnMount: !fallbackData, } ); diff --git a/client/src/document/index.tsx b/client/src/document/index.tsx index ed030a95c653..4b70a48b048d 100644 --- a/client/src/document/index.tsx +++ b/client/src/document/index.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useSearchParams, useParams, useNavigate } from "react-router-dom"; import useSWR, { mutate } from "swr"; -import { CRUD_MODE } from "../env"; +import { WRITER_MODE } from "../env"; import { useGA } from "../ga-context"; import { useIsServer } from "../hooks"; @@ -106,9 +106,9 @@ export function Document(props /* TODO: define a TS interface for this */) { }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: WRITER_MODE, revalidateOnMount: !fallbackData, - refreshInterval: CRUD_MODE ? 500 : 0, + refreshInterval: WRITER_MODE ? 500 : 0, } ); useIncrementFrequentlyViewed(doc); @@ -226,7 +226,7 @@ export function Document(props /* TODO: define a TS interface for this */) { - {!isServer && CRUD_MODE && !props.isPreview && doc.isActive && ( + {!isServer && WRITER_MODE && !props.isPreview && doc.isActive && ( }> diff --git a/client/src/document/toolbar/flaws.tsx b/client/src/document/toolbar/flaws.tsx index 70ffa5fd6aee..d39a300f24a4 100644 --- a/client/src/document/toolbar/flaws.tsx +++ b/client/src/document/toolbar/flaws.tsx @@ -4,7 +4,7 @@ import { annotate, annotationGroup } from "rough-notation"; import { RoughAnnotation } from "rough-notation/lib/model"; import { diffWords } from "diff"; -import { CRUD_MODE, CRUD_MODE_HOSTNAMES } from "../../env"; +import { WRITER_MODE, WRITER_MODE_HOSTNAMES } from "../../env"; import { humanizeFlawName } from "../../flaw-utils"; import { useDocumentURL } from "../hooks"; import { @@ -205,7 +205,7 @@ function Flaws({ flaws: FlawCount[]; reloadPage: () => void; }) { - if (!CRUD_MODE) { + if (!WRITER_MODE) { throw new Error("This shouldn't be used in non-development builds"); } @@ -217,7 +217,7 @@ function Flaws({ }) .flat(); - const isReadOnly = !CRUD_MODE_HOSTNAMES.includes(window.location.hostname); + const isReadOnly = !WRITER_MODE_HOSTNAMES.includes(window.location.hostname); // Note! This will work on Windows. The filename can be sent to // the server in POSIX style and the `open-editor` program will make diff --git a/client/src/document/toolbar/index.tsx b/client/src/document/toolbar/index.tsx index ca6af10d991a..ae87449873df 100644 --- a/client/src/document/toolbar/index.tsx +++ b/client/src/document/toolbar/index.tsx @@ -1,5 +1,5 @@ import { useEffect } from "react"; -import { CRUD_MODE_HOSTNAMES } from "../../env"; +import { WRITER_MODE_HOSTNAMES } from "../../env"; import { Doc } from "../../../../libs/types/document"; import { EditActions } from "./edit-actions"; import { ToggleDocumentFlaws } from "./flaws"; @@ -40,7 +40,7 @@ export default function Toolbar({ } }, [doc]); - const isReadOnly = !CRUD_MODE_HOSTNAMES.includes(window.location.hostname); + const isReadOnly = !WRITER_MODE_HOSTNAMES.includes(window.location.hostname); return (
diff --git a/client/src/env.ts b/client/src/env.ts index ed7cc5bdd06c..e8f0b267301c 100644 --- a/client/src/env.ts +++ b/client/src/env.ts @@ -8,21 +8,25 @@ export const DISABLE_AUTH = Boolean( JSON.parse(process.env.REACT_APP_DISABLE_AUTH || "false") ); -export const CRUD_MODE = Boolean( - JSON.parse( - process.env.REACT_APP_CRUD_MODE || - JSON.stringify(process.env.NODE_ENV === "development") - ) +export const WRITER_MODE = Boolean( + JSON.parse(process.env.REACT_APP_WRITER_MODE || "false") ); -export const CRUD_MODE_HOSTNAMES = ( - process.env.REACT_APP_CRUD_MODE_HOSTNAMES || +export const WRITER_MODE_HOSTNAMES = ( + process.env.REACT_APP_WRITER_MODE_HOSTNAMES || "localhost,localhost.org,127.0.0.1" ) .split(",") .map((x) => x.trim()) .filter(Boolean); +export const DEV_MODE = Boolean( + JSON.parse( + process.env.REACT_APP_DEV_MODE || + JSON.stringify(process.env.NODE_ENV === "development") + ) +); + export const KUMA_HOST = process.env.REACT_APP_KUMA_HOST || "developer.mozilla.org"; diff --git a/client/src/homepage/contributor-spotlight/index.tsx b/client/src/homepage/contributor-spotlight/index.tsx index 06869d1fd3ec..1132cb038d97 100644 --- a/client/src/homepage/contributor-spotlight/index.tsx +++ b/client/src/homepage/contributor-spotlight/index.tsx @@ -1,5 +1,5 @@ import useSWR from "swr"; -import { CRUD_MODE } from "../../env"; +import { DEV_MODE } from "../../env"; import { HydrationData } from "../../types/hydration"; import { Icon } from "../../ui/atoms/icon"; import Mandala from "../../ui/molecules/mandala"; @@ -24,7 +24,7 @@ export function ContributorSpotlight(props: HydrationData) { }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: DEV_MODE, revalidateOnMount: !fallbackData, } ); diff --git a/client/src/homepage/featured-articles/index.tsx b/client/src/homepage/featured-articles/index.tsx index 296a2410262e..340ef990dda6 100644 --- a/client/src/homepage/featured-articles/index.tsx +++ b/client/src/homepage/featured-articles/index.tsx @@ -1,5 +1,5 @@ import useSWR from "swr"; -import { CRUD_MODE } from "../../env"; +import { DEV_MODE } from "../../env"; import { HydrationData } from "../../types/hydration"; import "./index.scss"; @@ -18,7 +18,7 @@ export default function FeaturedArticles(props: HydrationData) { }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: DEV_MODE, revalidateOnMount: !fallbackData, } ); diff --git a/client/src/homepage/latest-news/index.tsx b/client/src/homepage/latest-news/index.tsx index 1b17a45b8e12..7ea8997dd131 100644 --- a/client/src/homepage/latest-news/index.tsx +++ b/client/src/homepage/latest-news/index.tsx @@ -1,7 +1,7 @@ import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import useSWR from "swr"; -import { CRUD_MODE } from "../../env"; +import { DEV_MODE } from "../../env"; import { HydrationData } from "../../types/hydration"; import { NewsItem } from "../../../../libs/types/document"; @@ -24,7 +24,7 @@ export function LatestNews(props: HydrationData) { }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: DEV_MODE, revalidateOnMount: !fallbackData, } ); diff --git a/client/src/homepage/recent-contributions/index.tsx b/client/src/homepage/recent-contributions/index.tsx index f233f493beea..ccd3ae122afc 100644 --- a/client/src/homepage/recent-contributions/index.tsx +++ b/client/src/homepage/recent-contributions/index.tsx @@ -1,7 +1,7 @@ import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import useSWR from "swr"; -import { CRUD_MODE } from "../../env"; +import { DEV_MODE } from "../../env"; import { HydrationData } from "../../types/hydration"; import "./index.scss"; @@ -23,7 +23,7 @@ function RecentContributions(props: HydrationData) { }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: DEV_MODE, revalidateOnMount: !fallbackData, } ); diff --git a/client/src/homepage/static-page/index.tsx b/client/src/homepage/static-page/index.tsx index ec9cabe4eeab..afabdfb9287e 100644 --- a/client/src/homepage/static-page/index.tsx +++ b/client/src/homepage/static-page/index.tsx @@ -1,6 +1,6 @@ import React, { ReactElement } from "react"; import useSWR from "swr"; -import { CRUD_MODE } from "../../env"; +import { DEV_MODE } from "../../env"; import { SidebarContainer } from "../../document/organisms/sidebar"; import { TOC } from "../../document/organisms/toc"; import { DocParent, Toc } from "../../../../libs/types/document"; @@ -48,7 +48,7 @@ function StaticPage({ }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: DEV_MODE, revalidateOnMount: !fallbackData, } ); diff --git a/client/src/plus/offer-overview/offer-hero/index.tsx b/client/src/plus/offer-overview/offer-hero/index.tsx index 7ecf67f3845c..65fdbab16598 100644 --- a/client/src/plus/offer-overview/offer-hero/index.tsx +++ b/client/src/plus/offer-overview/offer-hero/index.tsx @@ -1,9 +1,9 @@ -import { CRUD_MODE } from "../../../env"; +import { DEV_MODE } from "../../../env"; import Mandala from "../../../ui/molecules/mandala"; import "./index.scss"; function OfferHero() { - const animate = !CRUD_MODE; + const animate = !DEV_MODE; return (
diff --git a/client/src/site-search/search-results.tsx b/client/src/site-search/search-results.tsx index 31e2e382c69f..e13b466f342a 100644 --- a/client/src/site-search/search-results.tsx +++ b/client/src/site-search/search-results.tsx @@ -3,7 +3,7 @@ import { createSearchParams, Link, useSearchParams } from "react-router-dom"; import useSWR from "swr"; import { Loading } from "../ui/atoms/loading"; -import { CRUD_MODE, KUMA_HOST } from "../env"; +import { WRITER_MODE, KUMA_HOST } from "../env"; import { useLocale } from "../hooks"; import { appendURL } from "./utils"; import { Button } from "../ui/atoms/button"; @@ -195,8 +195,8 @@ export default function SearchResults() { } function RemoteSearchWarning() { - if (CRUD_MODE) { - // If you're in CRUD_MODE, the search results will be proxied from a remote + if (WRITER_MODE) { + // If you're in WRITER_MODE, the search results will be proxied from a remote // Kuma and it might be confusing if a writer is wondering why their // actively worked-on content isn't showing up in searches. // The default value in the server is not accessible from the react app, diff --git a/client/src/sitemap/index.tsx b/client/src/sitemap/index.tsx index 9b2217c241b6..ed938a5138d2 100644 --- a/client/src/sitemap/index.tsx +++ b/client/src/sitemap/index.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Link, useNavigate, useLocation } from "react-router-dom"; import useSWR from "swr"; -import { CRUD_MODE, CRUD_MODE_HOSTNAMES } from "../env"; +import { WRITER_MODE, WRITER_MODE_HOSTNAMES } from "../env"; import { useLocale } from "../hooks"; import { Loading } from "../ui/atoms/loading"; import { MainContentContainer } from "../ui/atoms/page-content"; @@ -399,7 +399,7 @@ function Breadcrumb({ const root = pathname.split("/").slice(0, 2); root.push("_sitemap"); - const isReadOnly = !CRUD_MODE_HOSTNAMES.includes(window.location.hostname); + const isReadOnly = !WRITER_MODE_HOSTNAMES.includes(window.location.hostname); return ( <> @@ -429,7 +429,7 @@ function Breadcrumb({ {thisDoc.title} {" "} - {CRUD_MODE && !isReadOnly && ( + {WRITER_MODE && !isReadOnly && ( ( void; }) { const locale = useLocale(); - const isReadOnly = !CRUD_MODE_HOSTNAMES.includes(window.location.hostname); + const isReadOnly = !WRITER_MODE_HOSTNAMES.includes(window.location.hostname); return (
    diff --git a/client/src/telemetry/glean-context.tsx b/client/src/telemetry/glean-context.tsx index 5e5a69ade22a..6dee819f525f 100644 --- a/client/src/telemetry/glean-context.tsx +++ b/client/src/telemetry/glean-context.tsx @@ -4,7 +4,7 @@ import * as navigatorMetric from "./generated/navigator"; import * as elementMetric from "./generated/element"; import * as pings from "./generated/pings"; import Glean from "@mozilla/glean/web"; -import { CRUD_MODE, GLEAN_CHANNEL, GLEAN_DEBUG, GLEAN_ENABLED } from "../env"; +import { DEV_MODE, GLEAN_CHANNEL, GLEAN_DEBUG, GLEAN_ENABLED } from "../env"; import { useEffect, useRef } from "react"; import { useLocation } from "react-router"; import { useIsServer } from "../hooks"; @@ -54,12 +54,12 @@ function glean(): GleanAnalytics { Glean.initialize(GLEAN_APP_ID, uploadEnabled, { maxEvents: 1, channel: GLEAN_CHANNEL, - serverEndpoint: CRUD_MODE + serverEndpoint: DEV_MODE ? "https://developer.allizom.org" : document.location.origin, }); - if (CRUD_MODE) { + if (DEV_MODE) { Glean.setDebugViewTag("mdn-dev"); } Glean.setLogPings(GLEAN_DEBUG); diff --git a/docs/envvars.md b/docs/envvars.md index 6f171d361970..64fd53d1ca4e 100644 --- a/docs/envvars.md +++ b/docs/envvars.md @@ -246,24 +246,30 @@ name instead. That means you can log in _from_ Yari with a single click. This removes sign-in and `whoami` XHR fetching. Useful when using Yari purely for content editing as authentication is then not required. -### `REACT_APP_CRUD_MODE` +### `REACT_APP_DEV_MODE` **Default: `NODE_ENV==='development'`** -Basically, these are the optional, lazy-loaded features of the app that only -make sense when you're working on authoring the content. For example the Toolbar -bar appears based on this. +Enables features or setup which only make sense in local development. It defaults to `NODE_ENV==='development'` if not set which means that it's enable by default when doing development with the `localhost:3000` dev server. -### `REACT_APP_CRUD_MODE_HOSTNAMES` +### `REACT_APP_WRITER_MODE` + +**Default: `false`** + +Basically, these are the optional, lazy-loaded features of the app that only +make sense when you're working on authoring the content. For example the Toolbar +bar appears based on this. + +### `REACT_APP_WRITER_MODE_HOSTNAMES` **Default: `localhost, localhost.org, 127.0.0.1`** -Only applicable if `REACT_APP_CRUD_MODE` is truthy. Essentially you can disable +Only applicable if `REACT_APP_WRITER_MODE` is truthy. Essentially you can disable certain CRUD mode features depending on the hostname you use. So if you built -the static assets (the React code) with `REACT_APP_CRUD_MODE=true` it might +the static assets (the React code) with `REACT_APP_WRITER_MODE=true` it might disable certain features if you use a `window.location.hostname` that is _not_ in this list. diff --git a/docs/npm-packaging.md b/docs/npm-packaging.md index ac6a0c73132d..42bd88b53713 100644 --- a/docs/npm-packaging.md +++ b/docs/npm-packaging.md @@ -61,7 +61,7 @@ directories: `~/yari` and `~/content`. And you want to know if some edit to the First of all, make you relevant edits in `~/yari` then run: export REACT_APP_DISABLE_AUTH=true - export REACT_APP_CRUD_MODE=true + export REACT_APP_WRITER_MODE=true yarn build:prepare echo .git/info/exclude >> .npmignore echo .env >> .npmignore diff --git a/testing/README.md b/testing/README.md index c7b2d989d296..d284583f6f45 100644 --- a/testing/README.md +++ b/testing/README.md @@ -100,7 +100,7 @@ developers would see. To run these you first need to run, in one terminal: yarn dev ``` -> NOTE: Ensure that you have `REACT_APP_CRUD_MODE` set to `true` in the `.env` +> NOTE: Ensure that you have `REACT_APP_WRITER_MODE` set to `true` in the `.env` > at the root of the project before running `yarn dev`. And in another terminal, run: From 2e481ad777191203b846910e5d975a254558a704 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Thu, 9 Mar 2023 19:40:21 +0000 Subject: [PATCH 2/5] fix --- .github/workflows/developing.yml | 1 + docs/envvars.md | 10 +++++----- scripts/developing.sh | 1 + 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/.github/workflows/developing.yml b/.github/workflows/developing.yml index b9e04f1c890d..6d61b8cc222f 100644 --- a/.github/workflows/developing.yml +++ b/.github/workflows/developing.yml @@ -34,6 +34,7 @@ jobs: - name: Start the dev server env: + REACT_APP_WRITER_MODE: true # Remember, the mdn/content repo got cloned into `pwd` into a # sub-folder called "mdn/content" CONTENT_ROOT: "${{ github.workspace }}/mdn/content/files" diff --git a/docs/envvars.md b/docs/envvars.md index 64fd53d1ca4e..095c27be2408 100644 --- a/docs/envvars.md +++ b/docs/envvars.md @@ -267,11 +267,11 @@ bar appears based on this. **Default: `localhost, localhost.org, 127.0.0.1`** -Only applicable if `REACT_APP_WRITER_MODE` is truthy. Essentially you can disable -certain CRUD mode features depending on the hostname you use. So if you built -the static assets (the React code) with `REACT_APP_WRITER_MODE=true` it might -disable certain features if you use a `window.location.hostname` that is _not_ -in this list. +Only applicable if `REACT_APP_WRITER_MODE` is truthy. Essentially you can +disable certain CRUD mode features depending on the hostname you use. So if you +built the static assets (the React code) with `REACT_APP_WRITER_MODE=true` it +might disable certain features if you use a `window.location.hostname` that is +_not_ in this list. The use case for this is when you build the site in a pull request and want flaws to _appear_ but without the "Fix fixable flaws" link or the "Open in your diff --git a/scripts/developing.sh b/scripts/developing.sh index 8640f31e07c6..b5c8cfb977e9 100755 --- a/scripts/developing.sh +++ b/scripts/developing.sh @@ -30,6 +30,7 @@ echo "--------------------" echo "Start the dev server" echo "--------------------" +export REACT_APP_WRITER_MODE=true export CONTENT_ROOT="mdn/content/files" ls "$CONTENT_ROOT/en-us/mdn/kitchensink" echo "" > client/.env From 05a581112307ddd3715e77a2463dcaf4b7d12e90 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 10 Mar 2023 15:08:31 +0000 Subject: [PATCH 3/5] review fixes --- client/src/document/toolbar/flaws.tsx | 2 +- client/src/env.ts | 37 ++++++++++++++++++++------- docs/envvars.md | 7 ++--- 3 files changed, 31 insertions(+), 15 deletions(-) diff --git a/client/src/document/toolbar/flaws.tsx b/client/src/document/toolbar/flaws.tsx index d39a300f24a4..eaf3ab936233 100644 --- a/client/src/document/toolbar/flaws.tsx +++ b/client/src/document/toolbar/flaws.tsx @@ -206,7 +206,7 @@ function Flaws({ reloadPage: () => void; }) { if (!WRITER_MODE) { - throw new Error("This shouldn't be used in non-development builds"); + throw new Error("This shouldn't be used without WRITER_MODE=true"); } const fixableFlaws = Object.values(doc.flaws) diff --git a/client/src/env.ts b/client/src/env.ts index e8f0b267301c..01d93678433d 100644 --- a/client/src/env.ts +++ b/client/src/env.ts @@ -8,9 +8,32 @@ export const DISABLE_AUTH = Boolean( JSON.parse(process.env.REACT_APP_DISABLE_AUTH || "false") ); -export const WRITER_MODE = Boolean( - JSON.parse(process.env.REACT_APP_WRITER_MODE || "false") -); +/** Deprecated, don't export, use WRITER_MODE and/or DEV_MODE instead. */ +const CRUD_MODE = + process.env.REACT_APP_WRITER_MODE || process.env.REACT_APP_DEV_MODE + ? false + : Boolean( + JSON.parse( + process.env.REACT_APP_CRUD_MODE || + JSON.stringify(process.env.NODE_ENV === "development") + ) + ); + +if (CRUD_MODE) { + console.warn( + "Warning: REACT_APP_CRUD_MODE is deprecated, set REACT_APP_WRITER_MODE and/or REACT_APP_DEV_MODE instead." + ); + + if (process.env.NODE_ENV === "development") { + console.warn( + "Warning: setting REACT_APP_CRUD_MODE with NODE_ENV=development is deprecated, set REACT_APP_WRITER_MODE and/or REACT_APP_DEV_MODE instead." + ); + } +} + +export const WRITER_MODE = + CRUD_MODE || + Boolean(JSON.parse(process.env.REACT_APP_WRITER_MODE || "false")); export const WRITER_MODE_HOSTNAMES = ( process.env.REACT_APP_WRITER_MODE_HOSTNAMES || @@ -20,12 +43,8 @@ export const WRITER_MODE_HOSTNAMES = ( .map((x) => x.trim()) .filter(Boolean); -export const DEV_MODE = Boolean( - JSON.parse( - process.env.REACT_APP_DEV_MODE || - JSON.stringify(process.env.NODE_ENV === "development") - ) -); +export const DEV_MODE = + CRUD_MODE || Boolean(JSON.parse(process.env.REACT_APP_DEV_MODE || "false")); export const KUMA_HOST = process.env.REACT_APP_KUMA_HOST || "developer.mozilla.org"; diff --git a/docs/envvars.md b/docs/envvars.md index 095c27be2408..763cd5db1663 100644 --- a/docs/envvars.md +++ b/docs/envvars.md @@ -248,13 +248,10 @@ for content editing as authentication is then not required. ### `REACT_APP_DEV_MODE` -**Default: `NODE_ENV==='development'`** +**Default: `false`** Enables features or setup which only make sense in local development. -It defaults to `NODE_ENV==='development'` if not set which means that it's -enable by default when doing development with the `localhost:3000` dev server. - ### `REACT_APP_WRITER_MODE` **Default: `false`** @@ -282,7 +279,7 @@ make sense to present the "Fix fixable flaws" button for example. ### `REACT_APP_ENABLE_PLUS` -**Default: `NODE_ENV==='development'`** +**Default: `false`** Determines if the MDN++ SPA should be reachable or not. From 4c3806cacc0bb393cfd12b308ea0235755e91766 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Mon, 15 May 2023 14:49:36 +0000 Subject: [PATCH 4/5] use WRITER_MODE in blog --- client/src/blog/index.tsx | 4 ++-- client/src/blog/post.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/blog/index.tsx b/client/src/blog/index.tsx index 9aa121f0a778..4d2e3887a41c 100644 --- a/client/src/blog/index.tsx +++ b/client/src/blog/index.tsx @@ -1,7 +1,7 @@ import useSWR from "swr"; import { HTTPError } from "../document"; -import { CRUD_MODE } from "../env"; +import { WRITER_MODE } from "../env"; import { Route, Routes } from "react-router-dom"; import { HydrationData } from "../../../libs/types/hydration"; @@ -84,7 +84,7 @@ function BlogIndex(props: HydrationData) { }, { fallbackData: props.hyData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: WRITER_MODE, revalidateOnMount: !props.hyData, } ); diff --git a/client/src/blog/post.tsx b/client/src/blog/post.tsx index 240642ea145b..37f0bcef7fd5 100644 --- a/client/src/blog/post.tsx +++ b/client/src/blog/post.tsx @@ -2,7 +2,7 @@ import useSWR from "swr"; import { HydrationData } from "../../../libs/types/hydration"; import { HTTPError, RenderDocumentBody } from "../document"; -import { CRUD_MODE } from "../env"; +import { WRITER_MODE } from "../env"; import "./index.scss"; import "./post.scss"; @@ -127,7 +127,7 @@ export function BlogPost(props: HydrationData) { }, { fallbackData: props as BlogPostData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: WRITER_MODE, revalidateOnMount: !props.blogMeta, } ); From faf2b77d0ae77f695971830f53d3b73fce50dbda Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 6 Jun 2023 11:24:37 +0000 Subject: [PATCH 5/5] improve deprecated warning logic --- client/src/env.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/client/src/env.ts b/client/src/env.ts index 47f466442f88..a1b9b35211f3 100644 --- a/client/src/env.ts +++ b/client/src/env.ts @@ -19,16 +19,14 @@ const CRUD_MODE = ) ); -if (CRUD_MODE) { +if (process.env.REACT_APP_CRUD_MODE) { console.warn( "Warning: REACT_APP_CRUD_MODE is deprecated, set REACT_APP_WRITER_MODE and/or REACT_APP_DEV_MODE instead." ); - - if (process.env.NODE_ENV === "development") { - console.warn( - "Warning: setting REACT_APP_CRUD_MODE with NODE_ENV=development is deprecated, set REACT_APP_WRITER_MODE and/or REACT_APP_DEV_MODE instead." - ); - } +} else if (process.env.NODE_ENV === "development" && CRUD_MODE) { + console.warn( + "Warning: setting REACT_APP_CRUD_MODE with NODE_ENV=development is deprecated, set REACT_APP_WRITER_MODE and/or REACT_APP_DEV_MODE instead." + ); } export const WRITER_MODE =