feat: Add initial layout prop to configurator schema

visualize-admin · Dec 6, 2023 · abcb0b1 · abcb0b1
1 parent afefce6
commit abcb0b1
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 2 deletions.
diff --git a/app/config-types.ts b/app/config-types.ts
@@ -1103,11 +1103,18 @@ const DataSource = t.type({
 });
 export type DataSource = t.TypeOf<typeof DataSource>;
 
+const Layout = t.type({
+  type: t.literal("tab"),
+});
+export type Layout = t.TypeOf<typeof Layout>;
+export type LayoutType = Layout["type"];
+
 const Config = t.type(
   {
     version: t.string,
     dataSource: DataSource,
     meta: Meta,
+    layout: Layout,
     chartConfigs: t.array(ChartConfig),
     activeChartKey: t.string,
   },

diff --git a/app/configurator/components/configurator.tsx b/app/configurator/components/configurator.tsx
@@ -224,7 +224,17 @@ const LayoutingStep = () => {
               mx: "auto",
             }}
           >
-            <IconButton label="layoutTab" onClick={() => {}} />
+            <IconButton
+              label="layoutTab"
+              checked={state.layout.type === "tab"}
+              onClick={() => {
+                if (state.layout.type === "tab") {
+                  return;
+                }
+
+                dispatch({ type: "LAYOUT_CHANGED", value: { type: "tab" } });
+              }}
+            />
           </PanelHeaderWrapper>
           <PanelHeaderWrapper
             type="R"

diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
@@ -40,6 +40,7 @@ import {
   GenericFields,
   ImputationType,
   InteractiveFiltersConfig,
+  LayoutType,
   decodeConfiguratorState,
   enableLayouting,
   getChartConfig,
@@ -292,6 +293,12 @@ export type ConfiguratorStateAction =
   | {
       type: "SWITCH_ACTIVE_CHART";
       value: string;
+    }
+  | {
+      type: "LAYOUT_CHANGED";
+      value: {
+        type: LayoutType;
+      };
     };
 
 const LOCALSTORAGE_PREFIX = "vizualize-configurator-state";
@@ -642,6 +649,7 @@ const transitionStepNext = (
           state: "CONFIGURING_CHART",
           dataSource: draft.dataSource,
           meta: draft.meta,
+          layout: { type: "tab" },
           chartConfigs: [chartConfig],
           activeChartKey: chartConfig.key,
         };
@@ -1359,6 +1367,13 @@ const reducer: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
 
       return draft;
 
+    case "LAYOUT_CHANGED":
+      if (draft.state === "LAYOUTING") {
+        draft.layout = action.value;
+      }
+
+      return draft;
+
     default:
       throw unreachableError(action);
   }

diff --git a/app/utils/chart-config/versioning.ts b/app/utils/chart-config/versioning.ts
@@ -812,7 +812,7 @@ export const migrateChartConfig = makeMigrate(chartConfigMigrations, {
   defaultToVersion: CHART_CONFIG_VERSION,
 });
 
-export const CONFIGURATOR_STATE_VERSION = "3.0.1";
+export const CONFIGURATOR_STATE_VERSION = "3.1.0";
 
 const configuratorStateMigrations: Migration[] = [
   {
@@ -940,6 +940,25 @@ const configuratorStateMigrations: Migration[] = [
       });
     },
   },
+  {
+    description: "ALL + layout",
+    from: "3.0.1",
+    to: "3.1.0",
+    up: (config) => {
+      const newConfig = { ...config, version: "3.1.0" };
+
+      return produce(newConfig, (draft: any) => {
+        draft.layout = { type: "tab" };
+      });
+    },
+    down: (config) => {
+      const newConfig = { ...config, version: "3.0.1" };
+
+      return produce(newConfig, (draft: any) => {
+        delete draft.layout;
+      });
+    },
+  },
 ];
 
 export const migrateConfiguratorState = makeMigrate(