feat(client/env): split CRUD_MODE into WRITER_MODE and DEV_MODE (#8383)

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,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

.github/workflows/developing.yml

@@ -37,6 +37,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"

.github/workflows/npm-publish.yml

@@ -46,7 +46,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

.github/workflows/npm-published-simulation.yml

@@ -45,7 +45,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: |

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: HydrationData) {
 
   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 ? (
       <LazyStandardLayout>
         <WritersHomepage />
       </LazyStandardLayout>
@@ -170,7 +170,7 @@ export function App(appProps: HydrationData) {
         path="/:locale/*"
         element={
           <Routes>
-            {CRUD_MODE && (
+            {WRITER_MODE && (
               <>
                 <Route
                   path="/_flaws"
@@ -208,7 +208,7 @@ export function App(appProps: HydrationData) {
                 {/*
                 This route exclusively exists for development on the <Homepage>
                 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
                  */}

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:

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
@@ -24,7 +24,7 @@ export function Banner() {
       ? BannerId.NEWSLETTER_ANNOUNCEMENT
       : BannerId.MULTIPLE_COLLECTIONS
     : null;
-  if (currentBannerId && (CRUD_MODE || !isEmbargoed(currentBannerId))) {
+  if (currentBannerId && (DEV_MODE || !isEmbargoed(currentBannerId))) {
     return (
       <React.Suspense fallback={null}>
         <ActiveBanner

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,
     }
   );

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,
     }
   );

client/src/contributor-spotlight/index.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { useParams } from "react-router-dom";
 import useSWR from "swr";
 
-import { CRUD_MODE } from "../env";
+import { WRITER_MODE } from "../env";
 import { HydrationData } from "../../../libs/types/hydration";
 import { GetInvolved } from "../ui/molecules/get_involved";
 import { Quote } from "../ui/molecules/quote";
@@ -43,7 +43,7 @@ export function ContributorSpotlight(props: HydrationData<ContributorDetails>) {
     },
     {
       fallbackData,
-      revalidateOnFocus: CRUD_MODE,
+      revalidateOnFocus: WRITER_MODE,
       revalidateOnMount: !fallbackData,
     }
   );

client/src/document/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useSearchParams, useNavigate } from "react-router-dom";
 import useSWR, { mutate } from "swr";
 
-import { CRUD_MODE, PLACEMENT_ENABLED } from "../env";
+import { WRITER_MODE, PLACEMENT_ENABLED } from "../env";
 import { useGA } from "../ga-context";
 import { useIsServer, useLocale } from "../hooks";
 
@@ -109,9 +109,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,
     }
   );
 
@@ -235,7 +235,7 @@ export function Document(props /* TODO: define a TS interface for this */) {
         </div>
 
         <MainContentContainer>
-          {!isServer && CRUD_MODE && !props.isPreview && doc.isActive && (
+          {!isServer && WRITER_MODE && !props.isPreview && doc.isActive && (
             <React.Suspense fallback={<Loading message={"Loading toolbar"} />}>
               <Toolbar
                 doc={doc}

client/src/document/toolbar/edit-actions.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { CRUD_MODE_HOSTNAMES } from "../../env";
+import { WRITER_MODE_HOSTNAMES } from "../../env";
 import { Source } from "../../../../libs/types/document";
 
 import "./edit-actions.scss";
@@ -60,7 +60,7 @@ export function EditActions({ source }: { source: Source }) {
 
   // If window.location.host is 'localhost:3000` then
   // window.location.hostname is 'localhost'
-  const isReadOnly = !CRUD_MODE_HOSTNAMES.includes(window.location.hostname);
+  const isReadOnly = !WRITER_MODE_HOSTNAMES.includes(window.location.hostname);
 
   return (
     <ul className="edit-actions">

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,8 +205,8 @@ function Flaws({
   flaws: FlawCount[];
   reloadPage: () => void;
 }) {
-  if (!CRUD_MODE) {
-    throw new Error("This shouldn't be used in non-development builds");
+  if (!WRITER_MODE) {
+    throw new Error("This shouldn't be used without WRITER_MODE=true");
   }
 
   const fixableFlaws = Object.values(doc.flaws)
@@ -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

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 (
     <div className="toolbar">

client/src/env.ts

@@ -8,21 +8,42 @@ 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")
-  )
-);
+/** 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 (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."
+  );
+} 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 =
+  CRUD_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 =
+  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";
 

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 "../../../../libs/types/hydration";
 import { Icon } from "../../ui/atoms/icon";
 import Mandala from "../../ui/molecules/mandala";
@@ -24,7 +24,7 @@ export function ContributorSpotlight(props: HydrationData<any>) {
     },
     {
       fallbackData,
-      revalidateOnFocus: CRUD_MODE,
+      revalidateOnFocus: DEV_MODE,
       revalidateOnMount: !fallbackData,
     }
   );

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 "../../../../libs/types/hydration";
 
 import "./index.scss";
@@ -18,7 +18,7 @@ export default function FeaturedArticles(props: HydrationData<any>) {
     },
     {
       fallbackData,
-      revalidateOnFocus: CRUD_MODE,
+      revalidateOnFocus: DEV_MODE,
       revalidateOnMount: !fallbackData,
     }
   );

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 "../../../../libs/types/hydration";
 import { NewsItem } from "../../../../libs/types/document";
 
@@ -24,7 +24,7 @@ export function LatestNews(props: HydrationData<any>) {
     },
     {
       fallbackData,
-      revalidateOnFocus: CRUD_MODE,
+      revalidateOnFocus: DEV_MODE,
       revalidateOnMount: !fallbackData,
     }
   );

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 "../../../../libs/types/hydration";
 
 import "./index.scss";
@@ -23,7 +23,7 @@ function RecentContributions(props: HydrationData<any>) {
     },
     {
       fallbackData,
-      revalidateOnFocus: CRUD_MODE,
+      revalidateOnFocus: DEV_MODE,
       revalidateOnMount: !fallbackData,
     }
   );

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 { Toc } from "../../../../libs/types/document";
@@ -45,7 +45,7 @@ function StaticPage({
     },
     {
       fallbackData,
-      revalidateOnFocus: CRUD_MODE,
+      revalidateOnFocus: DEV_MODE,
       revalidateOnMount: !fallbackData,
     }
   );

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 (
     <div className="dark offer-hero">
       <header className="container offer-hero-header">