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

WIP features behind flags

Author: ptbrowne

app/browser/dataset-browse.tsx

@@ -42,6 +42,7 @@ import Tag from "@/components/tag";
 import useDisclosure from "@/components/use-disclosure";
 import { SearchCube, Termset } from "@/domain/data";
 import { truthy } from "@/domain/types";
+import { useFlag } from "@/flags";
 import { useFormatDate } from "@/formatters";
 import {
   DataCubeOrganization,
@@ -870,8 +871,9 @@ export const SearchFilters = ({
       />
     ) : null;
 
+  const termsetFlag = useFlag("search.termsets");
   const termsetNav =
-    termsetCounts.length === 0 ? null : (
+    termsetCounts.length === 0 || !termsetFlag ? null : (
       <TermsetNavSection
         termsetCounts={termsetCounts ?? []}
         currentFilter={termsetFilter}

app/components/chart-selection-tabs.tsx

@@ -47,6 +47,7 @@ import { useSearchDatasetPanelStore } from "@/configurator/components/add-new-da
 import { ChartTypeSelector } from "@/configurator/components/chart-type-selector";
 import { getIconName } from "@/configurator/components/ui-helpers";
 import { useUserConfig } from "@/domain/user-configs";
+import { useFlag } from "@/flags";
 import { useDataCubesComponentsQuery } from "@/graphql/hooks";
 import { Icon, IconName } from "@/icons";
 import { useLocale } from "@/src";
@@ -160,6 +161,8 @@ const TabsEditable = (props: TabsEditableProps) => {
 
   const { open: openAddDatasetPanel } = useSearchDatasetPanelStore();
 
+  const addNewDatasetFlag = useFlag("configurator.add-dataset.new");
+
   return (
     <>
       <TabsInner
@@ -213,16 +216,18 @@ const TabsEditable = (props: TabsEditableProps) => {
             direction="column"
           >
             <Stack direction="column" gap="0.5rem" m="1rem">
-              <Typography
-                variant="body2"
-                color="text.secondary"
-                textAlign="center"
-                gutterBottom
-              >
-                <Trans id="chart-selection-tabs.add-chart-same-dataset.caption">
-                  Add chart based on the same dataset
-                </Trans>
-              </Typography>
+              {addNewDatasetFlag ? (
+                <Typography
+                  variant="body2"
+                  color="text.secondary"
+                  textAlign="center"
+                  gutterBottom
+                >
+                  <Trans id="chart-selection-tabs.add-chart-same-dataset.caption">
+                    Add chart based on the same dataset
+                  </Trans>
+                </Typography>
+              ) : null}
               <ChartTypeSelector
                 state={state}
                 type="add"
@@ -232,30 +237,32 @@ const TabsEditable = (props: TabsEditableProps) => {
                 sx={{ width: 320, px: 3, pb: 3 }}
               />
             </Stack>
-            <Stack direction="column" gap="0.5rem" mx="1.5rem" my="1rem">
-              <Typography
-                variant="body2"
-                color="text.secondary"
-                textAlign="center"
-                gutterBottom
-              >
-                <Trans id="chart-selection-tabs.add-chart-different-dataset.caption">
-                  Add chart based on a different dataset
-                </Trans>
-              </Typography>
-              <Button
-                fullWidth
-                sx={{ justifyContent: "center" }}
-                onClick={() => {
-                  setTabsState({ ...tabsState, popoverOpen: false });
-                  openAddDatasetPanel();
-                }}
-              >
-                <Trans id="chart-selection-tabs.add-chart-different-dataset.button">
-                  Select dataset
-                </Trans>
-              </Button>
-            </Stack>
+            {addNewDatasetFlag ? (
+              <Stack direction="column" gap="0.5rem" mx="1.5rem" my="1rem">
+                <Typography
+                  variant="body2"
+                  color="text.secondary"
+                  textAlign="center"
+                  gutterBottom
+                >
+                  <Trans id="chart-selection-tabs.add-chart-different-dataset.caption">
+                    Add chart based on a different dataset
+                  </Trans>
+                </Typography>
+                <Button
+                  fullWidth
+                  sx={{ justifyContent: "center" }}
+                  onClick={() => {
+                    setTabsState({ ...tabsState, popoverOpen: false });
+                    openAddDatasetPanel();
+                  }}
+                >
+                  <Trans id="chart-selection-tabs.add-chart-different-dataset.button">
+                    Select dataset
+                  </Trans>
+                </Button>
+              </Stack>
+            ) : null}
           </Stack>
         </Popover>
       ) : null}

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

@@ -2,7 +2,7 @@ import { t, Trans } from "@lingui/macro";
 import { Box, Stack, Tooltip, Typography } from "@mui/material";
 import { groups } from "d3-array";
 import get from "lodash/get";
-import React, { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 
 import { DEFAULT_SORTING, getFieldComponentIri } from "@/charts";
 import {
@@ -93,7 +93,7 @@ import {
   useDataCubesComponentsQuery,
   useDataCubesObservationsQuery,
 } from "@/graphql/hooks";
-import SvgIcExclamation from "@/icons/components/IcExclamation";
+import SvgIcInfoOutline from "@/icons/components/IcInfoOutline";
 import { useLocale } from "@/locales/use-locale";
 
 export const ChartOptionsSelector = ({
@@ -1097,19 +1097,13 @@ const ChartFieldAnimation = ({ field }: { field: AnimationField }) => {
                       })}
                     >
                       <Typography sx={{ color: "primary.main" }}>
-                        <SvgIcExclamation
-                          style={{
-                            transform: "scale(0.8)",
-                            width: 18,
-                            height: 18,
-                          }}
-                        />
+                        <SvgIcInfoOutline width={16} height={16} />
                       </Typography>
                     </Tooltip>
                   </Box>
                 }
               />
-              <Flex sx={{ justifyContent: "flex-start" }}>
+              <Flex justifyContent="flex-start">
                 <ChartOptionRadioField
                   label={t({
                     id: "controls.section.animation.type.continuous",
@@ -1130,8 +1124,9 @@ const ChartFieldAnimation = ({ field }: { field: AnimationField }) => {
                 />
               </Flex>
             </Box>
-            <Box sx={{ display: "flex", alignItems: "center", mt: 5 }}>
+            <Box display="flex" alignItems="center" mt={5} gap="0.5rem">
               <ChartOptionSwitchField
+                sx={{ mr: 0 }}
                 label={t({
                   id: "controls.section.animation.dynamic-scaling",
                   message: "Dynamic Scaling",
@@ -1147,14 +1142,8 @@ const ChartFieldAnimation = ({ field }: { field: AnimationField }) => {
                     "Enable dynamic scaling to adjust the chart's scale based on the data range, ensuring optimal visualization.",
                 })}
               >
-                <Typography sx={{ ml: "-12px", color: "primary.main" }}>
-                  <SvgIcExclamation
-                    style={{
-                      transform: "scale(0.8)",
-                      width: 18,
-                      height: 18,
-                    }}
-                  />
+                <Typography color="primary.main">
+                  <SvgIcInfoOutline width={16} height={16} />
                 </Typography>
               </Tooltip>
             </Box>

app/configurator/components/dataset-control-section.tsx

@@ -26,6 +26,7 @@ import {
   useConfiguratorState,
 } from "@/configurator/configurator-state";
 import { DataCubeMetadata } from "@/domain/data";
+import useFlag from "@/flags/useFlag";
 import { useDataCubesMetadataQuery } from "@/graphql/hooks";
 import SvgIcAdd from "@/icons/components/IcAdd";
 import SvgIcChecked from "@/icons/components/IcChecked";
@@ -197,6 +198,11 @@ export const DatasetsControlSection = () => {
     setActiveSection("general");
   };
 
+  const addDatasetFlag = useFlag("configurator.add-dataset.shared");
+  if (!addDatasetFlag) {
+    return null;
+  }
+
   return (
     <ControlSection collapse defaultExpanded={false}>
       <SubsectionTitle titleId="controls-data" gutterBottom={false}>

app/configurator/components/field.tsx

@@ -15,6 +15,7 @@ import orderBy from "lodash/orderBy";
 import pick from "lodash/pick";
 import React, {
   ChangeEvent,
+  ComponentProps,
   ReactNode,
   useCallback,
   useMemo,
@@ -1096,13 +1097,14 @@ export const ChartOptionSwitchField = ({
   path,
   defaultValue = false,
   disabled = false,
+  ...props
 }: {
   label: React.ComponentProps<typeof FormControlLabel>["label"];
   field: EncodingFieldType | null;
   path: string;
   defaultValue?: boolean;
   disabled?: boolean;
-}) => {
+} & ComponentProps<typeof Switch>) => {
   const fieldProps = useChartOptionBooleanField({
     field,
     path,
@@ -1114,6 +1116,7 @@ export const ChartOptionSwitchField = ({
       disabled={disabled}
       label={label}
       {...fieldProps}
+      {...props}
       checked={fieldProps.checked ?? defaultValue}
     />
   );

app/configurator/components/layout-configurator.tsx

@@ -44,6 +44,7 @@ import {
   isJoinByComponent,
   isTemporalDimension,
 } from "@/domain/data";
+import { useFlag } from "@/flags";
 import { useTimeFormatLocale, useTimeFormatUnit } from "@/formatters";
 import { useDataCubesComponentsQuery } from "@/graphql/hooks";
 import { useLocale } from "@/src";
@@ -54,11 +55,12 @@ import {
 import { getTimeFilterOptions } from "@/utils/time-filter-options";
 
 export const LayoutConfigurator = () => {
+  const sharedFiltersFlag = useFlag("layouter.dashboard.shared-filters");
   return (
     <>
       <LayoutAnnotator />
       <LayoutLayoutConfigurator />
-      <LayoutSharedFiltersConfigurator />
+      {sharedFiltersFlag ? <LayoutSharedFiltersConfigurator /> : null}
     </>
   );
 };
@@ -67,6 +69,8 @@ const LayoutLayoutConfigurator = () => {
   const [state] = useConfiguratorState(isLayouting);
   const { layout } = state;
 
+  const freeCanvasFlag = useFlag("layouter.dashboard.free-canvas");
+
   switch (layout.type) {
     case "dashboard":
       return (
@@ -92,7 +96,9 @@ const LayoutLayoutConfigurator = () => {
             >
               <LayoutButton type="tall" layout={layout} />
               <LayoutButton type="vertical" layout={layout} />
-              <LayoutButton type="canvas" layout={layout} />
+              {freeCanvasFlag ? (
+                <LayoutButton type="canvas" layout={layout} />
+              ) : null}
             </Box>
           </ControlSectionContent>
         </ControlSection>

app/flags/flag.tsx

@@ -2,7 +2,8 @@ import qs from "qs";
 
 import { isRunningInBrowser } from "@/utils/is-running-in-browser";
 
-import FlagStore, { FlagName, FlagValue } from "./store";
+import FlagStore from "./store";
+import { FlagName, FlagValue } from "./types";
 
 const FLAG_PREFIX = "flag__";
 
@@ -28,7 +29,7 @@ export const listFlags = () => {
 
 /** Resets all the flags */
 export const resetFlags = () => {
-  listFlags().forEach((name) => store.remove(name));
+  listFlags().forEach((name) => store.remove(name as FlagName));
 };
 
 /**
@@ -63,18 +64,40 @@ const initFromSearchParams = (locationSearch: string) => {
   for (const [param, value] of Object.entries(params)) {
     if (param.startsWith(FLAG_PREFIX) && typeof value === "string") {
       try {
-        flag(param.substring(FLAG_PREFIX.length), JSON.parse(value));
+        flag(
+          param.substring(FLAG_PREFIX.length) as FlagName,
+          JSON.parse(value)
+        );
       } catch (e) {
         console.error(e);
       }
     }
   }
 };
 
+const isVercelPreviewHost = (host: string) => {
+  return !!/visualization\-tool.*ixt1\.vercel\.app/.exec(host);
+};
+
+const initFromHost = (host: string) => {
+  if (
+    host.includes("localhost") ||
+    host.includes("test.visualize.admin.ch") ||
+    isVercelPreviewHost(host)
+  ) {
+    flag("configurator.add-dataset.new", true);
+    flag("configurator.add-dataset.shared", true);
+    flag("layouter.dashboard.free-canvas", true);
+    flag("layouter.dashboard.shared-filters", true);
+    flag("search.termsets", true);
+  }
+};
+
 if (isRunningInBrowser()) {
   // @ts-ignore
   window.flag = flag;
   initFromSearchParams(window.location.search);
+  initFromHost(window.location.host);
 }
 
 export { flag };

app/flags/ls-adapter.ts

@@ -1,7 +1,10 @@
-import { FlagName, FlagValue } from "./store";
+import { FlagName, FlagValue } from "./types";
 
 export const prefix = "flag__";
-export const getKey = (name: FlagName) => prefix + name;
+
+type FlagNameOrString = FlagName | (string & {});
+
+export const getKey = (name: FlagNameOrString) => prefix + name;
 
 const listFlagLocalStorage = () => {
   return Object.keys(localStorage)
@@ -14,7 +17,7 @@ const listFlagLocalStorage = () => {
  *
  * @param  {String} flag
  */
-const getItem = (flag: FlagName) => {
+const getItem = (flag: FlagNameOrString) => {
   const val = localStorage.getItem(getKey(flag));
   const parsed = val ? JSON.parse(val) : val;
   return parsed;
@@ -26,7 +29,7 @@ const getItem = (flag: FlagName) => {
  * @param  {String} flag
  * @param  {String} value
  */
-const setItem = (flag: FlagName, value: FlagValue) => {
+const setItem = (flag: FlagNameOrString, value: FlagValue) => {
   const str = JSON.stringify(value);
   return localStorage.setItem(getKey(flag), str);
 };
@@ -36,7 +39,7 @@ const setItem = (flag: FlagName, value: FlagValue) => {
  *
  * @param  {String} flag
  */
-const removeItem = (flag: FlagName) => {
+const removeItem = (flag: FlagNameOrString) => {
   return localStorage.removeItem(getKey(flag));
 };