Merge pull request #1991 from visualize-admin/feat/flags

feat: Hide new features behind flags + remove depreciated flags automatically

Author: bprusinowski

CHANGELOG.md

@@ -12,14 +12,17 @@ You can also check the
 # Unreleased
 
 - Features
-  - Added a way to add text objects to dashboard layouts
-  - Added Markdown support in chart titles and descriptions
+  - Added a way to add text objects to dashboard layouts (hidden behind an
+    enable-experimental-features flag)
+  - Added Markdown support in chart titles and descriptions (hidden behind an
+    enable-experimental-features flag)
   - Centered x-axis labels
   - Added y-axis labels
   - Added a new option to the vertical axis on the line chart, allowing users to
     display a dot over the line where it intercepts the x-axis ticks
   - Downloading images of bar charts now includes the whole chart, not just the
     visible part
+  - Bar charts are now hidden behind a an enable-experimental-features flag
 - Fixes
   - Preview via API now works correctly for map charts
   - GraphQL debug panel now displays the queries correctly when in debug mode

app/components/markdown.tsx

@@ -4,6 +4,8 @@ import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
 import remarkGfm from "remark-gfm";
 
+import { useFlag } from "@/flags";
+
 const components: ComponentProps<typeof ReactMarkdown>["components"] = {
   h1: ({ children, style, ...props }) => (
     <h1 style={{ ...style, marginTop: 0 }} {...props}>
@@ -50,12 +52,16 @@ const components: ComponentProps<typeof ReactMarkdown>["components"] = {
 export const Markdown = (
   props: Omit<ComponentProps<typeof ReactMarkdown>, "components">
 ) => {
-  return (
+  const enable = useFlag("enable-experimental-features");
+
+  return enable ? (
     <ReactMarkdown
       components={components}
       remarkPlugins={[remarkGfm]}
       rehypePlugins={[rehypeRaw, rehypeSanitize]}
       {...props}
     />
+  ) : (
+    <>{props.children}</>
   );
 };

app/configurator/components/chart-type-selector.tsx

@@ -17,6 +17,7 @@ import { ControlSectionSkeleton } from "@/configurator/components/chart-controls
 import { IconButton } from "@/configurator/components/icon-button";
 import { useAddOrEditChartType } from "@/configurator/config-form";
 import { ConfiguratorStateWithChartConfigs } from "@/configurator/configurator-state";
+import { useFlag } from "@/flags";
 import { useDataCubesComponentsQuery } from "@/graphql/hooks";
 import { useLocale } from "@/locales/use-locale";
 
@@ -39,6 +40,7 @@ export const ChartTypeSelector = (props: ChartTypeSelectorProps) => {
     chartKey,
     ...rest
   } = props;
+  const enableBarChart = useFlag("enable-experimental-features");
   const locale = useLocale();
   const chartConfig = getChartConfig(state);
   const [{ data }] = useDataCubesComponentsQuery({
@@ -121,7 +123,11 @@ export const ChartTypeSelector = (props: ChartTypeSelectorProps) => {
                 message: "Regular",
               })}
               currentChartType={chartType}
-              chartTypes={regularChartTypes}
+              chartTypes={
+                enableBarChart
+                  ? regularChartTypes
+                  : regularChartTypes.filter((chartType) => chartType !== "bar")
+              }
               possibleChartTypesDict={possibleChartTypesDict}
               onClick={handleClick}
               testId="chart-type-selector-regular"

app/configurator/components/field.tsx

@@ -90,6 +90,7 @@ import {
   isMostRecentValue,
   VISUALIZE_MOST_RECENT_VALUE,
 } from "@/domain/most-recent-value";
+import { useFlag } from "@/flags";
 import { useTimeFormatLocale } from "@/formatters";
 import { TimeUnit } from "@/graphql/query-hooks";
 import { Locale } from "@/locales/locales";
@@ -680,12 +681,17 @@ export const MetaInputField = ({
   value?: string;
 }) => {
   const field = useMetaField({ type, metaKey, locale, value });
+  const enableMarkdown = useFlag("enable-experimental-features");
 
   switch (inputType) {
     case "text":
       return <Input label={label} {...field} />;
     case "markdown":
-      return <MarkdownInput label={label} {...field} />;
+      if (enableMarkdown) {
+        return <MarkdownInput label={label} {...field} />;
+      } else {
+        return <Input label={label} {...field} />;
+      }
   }
 };
 

app/configurator/components/layout-configurator.tsx

@@ -65,6 +65,7 @@ import {
   TemporalDimension,
   TemporalEntityDimension,
 } from "@/domain/data";
+import { useFlag } from "@/flags";
 import { useTimeFormatLocale, useTimeFormatUnit } from "@/formatters";
 import { useConfigsCubeComponents } from "@/graphql/hooks";
 import { Icon } from "@/icons";
@@ -565,6 +566,12 @@ const LayoutBlocksConfigurator = () => {
     dispatch({ type: "LAYOUT_ACTIVE_FIELD_CHANGED", value: blockKey });
   });
 
+  const enabled = useFlag("enable-experimental-features");
+
+  if (!enabled) {
+    return null;
+  }
+
   return layout.type === "dashboard" ? (
     <ControlSection role="tablist" aria-labelledby="controls-blocks" collapse>
       <SubsectionTitle titleId="controls-blocks" gutterBottom={false}>

app/flags/flag.tsx

@@ -3,9 +3,9 @@ import qs from "qs";
 import { isRunningInBrowser } from "@/utils/is-running-in-browser";
 
 import FlagStore from "./store";
-import { FlagName, FlagValue } from "./types";
+import { FlagName, FLAGS, FlagValue } from "./types";
 
-const FLAG_PREFIX = "flag__";
+export const FLAG_PREFIX = "flag__";
 
 const store = new FlagStore();
 
@@ -18,24 +18,34 @@ export const flag = function flag(...args: [FlagName] | [FlagName, FlagValue]) {
   } else {
     const [name, value] = args;
     store.set(name, value);
+
     return value;
   }
 };
 
+/** List all flag names from the store */
+const listFlagNames = () => {
+  return store.keys().sort();
+};
+
 /** List all flags from the store */
 const listFlags = () => {
-  return store.keys().sort();
+  return listFlagNames().map((name) => ({
+    name,
+    description: FLAGS.find((flag) => flag.name === name)?.description,
+    value: store.get(name as FlagName),
+  }));
 };
 
 /** Resets all the flags */
 const resetFlags = () => {
-  listFlags().forEach((name) => store.remove(name as FlagName));
+  listFlagNames().forEach((name) => store.remove(name as FlagName));
 };
 
 /**
  * Enables several flags
  *
- * Supports passing either  object flagName -> flagValue
+ * Supports passing either object flagName -> flagValue
  *
  * @param {Record<string, boolean>} flagsToEnable
  */
@@ -52,6 +62,7 @@ const enable = (flagsToEnable: FlagName[]) => {
 };
 
 flag.store = store;
+flag.listNames = listFlagNames;
 flag.list = listFlags;
 flag.reset = resetFlags;
 flag.enable = enable;
@@ -61,6 +72,7 @@ const initFromSearchParams = (locationSearch: string) => {
     ? locationSearch.substr(1)
     : locationSearch;
   const params = qs.parse(locationSearch);
+
   for (const [param, value] of Object.entries(params)) {
     if (param.startsWith(FLAG_PREFIX) && typeof value === "string") {
       try {

app/flags/ls-adapter.ts app/flags/local-storage-adapter.tsapp/flags/ls-adapter.ts renamed to app/flags/local-storage-adapter.ts

@@ -1,15 +1,15 @@
-import { FlagName, FlagValue } from "./types";
+import { FLAG_PREFIX } from "@/flags/flag";
 
-const prefix = "flag__";
+import { FlagName, FlagValue } from "./types";
 
 type FlagNameOrString = FlagName | (string & {});
 
-const getKey = (name: FlagNameOrString) => prefix + name;
+const getKey = (name: FlagNameOrString) => `${FLAG_PREFIX}${name}`;
 
 const listFlagLocalStorage = () => {
   return Object.keys(localStorage)
-    .filter((x) => x.indexOf(prefix) === 0)
-    .map((x) => x.replace(prefix, ""));
+    .filter((x) => x.indexOf(FLAG_PREFIX) === 0)
+    .map((x) => x.replace(FLAG_PREFIX, ""));
 };
 
 /**

app/flags/store.ts

@@ -1,41 +1,52 @@
 import mitt, { Emitter } from "mitt";
 
-import lsAdapter from "./ls-adapter";
-import { FlagName, FlagValue } from "./types";
+import localStorageAdapter from "./local-storage-adapter";
+import { FlagName, FlagValue, FLAG_NAMES } from "./types";
 
-type Events = { change: string };
+type Events = {
+  change: string;
+};
 
 /**
  * In memory key value storage.
  *
- * Can potentially be backed by localStorage if present
+ * Can potentially be backed by localStorage if present.
 
- * Emits `change` when a key is set (eventEmitter)
+ * Emits `change` when a key is set (eventEmitter).
  */
 class FlagStore {
-  longtermStore: typeof lsAdapter | null;
-
+  longTermStore: typeof localStorageAdapter | null;
   store: Record<string, any>;
   ee: Emitter<Events>;
 
   constructor() {
     this.store = {};
-    this.longtermStore = null;
+    this.longTermStore = null;
     this.ee = mitt();
+
     if (typeof localStorage !== "undefined") {
-      this.longtermStore = lsAdapter;
+      this.longTermStore = localStorageAdapter;
     }
+
     this.restore();
   }
 
   restore() {
-    if (!this.longtermStore) {
+    const longTermStore = this.longTermStore;
+
+    if (!longTermStore) {
       return;
     }
-    const allValues = this.longtermStore.getAll();
+
+    const allValues = longTermStore.getAll();
+
     Object.entries(allValues).forEach(([flag, val]) => {
-      this.store[flag] = val;
-      this.ee.emit("change", flag);
+      if (FLAG_NAMES.includes(flag as FlagName)) {
+        this.store[flag] = val;
+        this.ee.emit("change", flag);
+      } else {
+        longTermStore.removeItem(flag);
+      }
     });
   }
 
@@ -47,26 +58,29 @@ class FlagStore {
     if (!Object.prototype.hasOwnProperty.call(this.store, name)) {
       this.store[name] = null;
     }
+
     return this.store[name];
   }
 
   set(name: FlagName, value: FlagValue) {
-    if (this.longtermStore) {
-      this.longtermStore.setItem(name, value);
+    if (this.longTermStore) {
+      this.longTermStore.setItem(name, value);
     }
+
     this.store[name] = value;
     this.ee.emit("change", name);
   }
 
   remove(name: FlagName) {
     delete this.store[name];
-    if (this.longtermStore) {
-      this.longtermStore.removeItem(name);
+
+    if (this.longTermStore) {
+      this.longTermStore.removeItem(name);
     }
+
     this.ee.emit("change", name);
   }
 
-  // eslint-disable-next-line class-methods-use-this
   removeListener(_event: string, _fn: (changed: string) => void) {}
 }
 

app/flags/types.ts

@@ -1,11 +1,28 @@
 export type FlagValue = any;
-
-export type FlagName =
-  /** Whether debug UI like the configurator debug panel is shown */
-  | "debug"
-  /** Whether server side cache is disabled */
-  | "server-side-cache.disable"
-  /** The GraphQL endpoint, is used for testing purposes */
-  | "graphql.endpoint"
-  /** Use at your own risk */
-  | "easter-eggs";
+export const FLAGS = [
+  {
+    name: "debug" as const,
+    description:
+      "Controls whether debug elements are shown, e.g. ConfiguratorState viewer or GraphQL debug panel.",
+  },
+  {
+    name: "server-side-cache.disable" as const,
+    description: "Disables server side cache.",
+  },
+  {
+    name: "graphql.endpoint" as const,
+    description: "The GraphQL endpoint, can be used for testing purposes.",
+  },
+  {
+    name: "easter-eggs" as const,
+    description: "Enables easter eggs",
+  },
+  {
+    name: "enable-experimental-features" as const,
+    description:
+      "Enables experimental features, including dashboard text blocks, Markdown editor and bar charts.",
+  },
+];
+export const FLAG_NAMES = FLAGS.map((flag) => flag.name);
+type Flag = (typeof FLAGS)[number];
+export type FlagName = Flag["name"];

app/flags/useFlag.ts

@@ -3,32 +3,40 @@ import { useEffect, useState } from "react";
 import { flag } from "./flag";
 import { FlagName } from "./types";
 
-export default function useFlag(name: FlagName) {
+export default function useFlagValue(name: FlagName) {
   const [flagValue, setFlag] = useState(() => flag(name));
+
   useEffect(() => {
     const handleChange = (changed: string) => {
       if (changed === name) {
         setFlag(flag(name));
       }
     };
+
     flag.store.ee.on("change", handleChange);
+
     return () => {
       flag.store.removeListener("change", handleChange);
     };
   }, [setFlag, name]);
+
   return flagValue;
 }
 
 export function useFlags() {
   const [flags, setFlags] = useState(flag.list());
+
   useEffect(() => {
     const handleChange = () => {
       setFlags(flag.list());
     };
+
     flag.store.ee.on("change", handleChange);
+
     return () => {
       flag.store.removeListener("change", handleChange);
     };
   }, [setFlags]);
-  return flags as FlagName[];
+
+  return flags;
 }