Move the beta notice to a flag. (#955)

Enable it for non-production stages.

This removes livePreview. To get the same effect you need to do
flag=none.

Author: microbit-matt-hillsdon

src/environment.ts

@@ -4,4 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 export const version = process.env.REACT_APP_VERSION || "local";
-export const stage = process.env.REACT_APP_STAGE || "local";
+
+export type Stage = "local" | "REVIEW" | "STAGING" | "PRODUCTION";
+
+export const stage = (process.env.REACT_APP_STAGE || "local") as Stage;

src/flags.ts

@@ -10,28 +10,21 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { stage as stageFromEnvironment } from "./environment";
+import { Stage, stage as stageFromEnvironment } from "./environment";
 
 /**
  * A union of the flag names (alphabetical order).
  */
 export type Flag =
-  /**
-   * Enables a preview of SoundEffects via the audio-sound-effect MicroPython branch.
-   */
-  | "audioSoundEffect"
-
   /**
    * Enables verbose debug logging to the console of drag events.
    */
   | "dndDebug"
 
   /**
-   * Flag to enable live-only features and hide beta only ones.
-   *
-   * We'll remove this when we go live.
+   * Flag to add a beta notice. Enabled for staging site but not production stages.
    */
-  | "livePreview"
+  | "betaNotice"
 
   /**
    * Disables the pop-up welcome dialog.
@@ -42,22 +35,21 @@ export type Flag =
   | "noWelcome";
 
 interface FlagMetadata {
-  defaultOnStages: string[];
+  defaultOnStages: Stage[];
   name: Flag;
 }
 
 const allFlags: FlagMetadata[] = [
   // Alphabetical order.
-  { name: "audioSoundEffect", defaultOnStages: [] },
   { name: "dndDebug", defaultOnStages: [] },
-  { name: "livePreview", defaultOnStages: ["local", "REVIEW"] },
+  { name: "betaNotice", defaultOnStages: ["local", "REVIEW", "STAGING"] },
   { name: "noWelcome", defaultOnStages: ["local", "REVIEW"] },
 ];
 
 type Flags = Record<Flag, boolean>;
 
 // Exposed for testing.
-export const flagsForParams = (stage: string, params: URLSearchParams) => {
+export const flagsForParams = (stage: Stage, params: URLSearchParams) => {
   const enableFlags = new Set(params.getAll("flag"));
   const allFlagsDefault = enableFlags.has("none")
     ? false
@@ -74,7 +66,7 @@ export const flagsForParams = (stage: string, params: URLSearchParams) => {
 
 const isEnabled = (
   f: FlagMetadata,
-  stage: string,
+  stage: Stage,
   allFlagsDefault: boolean | undefined,
   thisFlagOn: boolean
 ): boolean => {

src/workbench/SideBar.tsx

@@ -211,7 +211,7 @@ const SideBar = ({
               <Flex height="100%" direction="column">
                 <ErrorBoundary>
                   {p.contents}
-                  {!flags.livePreview && (
+                  {flags.betaNotice && (
                     <PreReleaseNotice onDialogChange={setReleaseDialog} />
                   )}
                 </ErrorBoundary>

src/workbench/flags.test.ts

@@ -14,16 +14,13 @@ describe("flags", () => {
     expect(flags.dndDebug).toEqual(false);
   });
 
-  for (const stage of ["STAGING", "PRODUCTION"]) {
-    // This might change in future if we opt in to flags on staging once we have production.
-    it("enables nothing in " + stage, () => {
-      const params = new URLSearchParams([]);
+  it("enables nothing in production", () => {
+    const params = new URLSearchParams([]);
 
-      const flags = flagsForParams(stage, params);
+    const flags = flagsForParams("PRODUCTION", params);
 
-      expect(Object.values(flags).every((x) => x)).toEqual(false);
-    });
-  }
+    expect(Object.values(flags).every((x) => !x)).toEqual(true);
+  });
 
   it("enable specific flag", () => {
     const params = new URLSearchParams([["flag", "noWelcome"]]);