refactor: Separate addability and editability of chart tabs

visualize-admin · Dec 5, 2023 · 038f4f0 · 038f4f0
1 parent e853a42
commit 038f4f0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/app/components/chart-selection-tabs.tsx b/app/components/chart-selection-tabs.tsx
@@ -133,6 +133,7 @@ const TabsEditable = (props: TabsEditableProps) => {
     <>
       <TabsInner
         data={data}
+        addable={state.state === "CONFIGURING_CHART"}
         editable
         draggable={state.chartConfigs.length > 1}
         onChartAdd={(e) => {
@@ -242,9 +243,10 @@ const TabsFixed = (props: TabsFixedProps) => {
   return (
     <TabsInner
       data={data}
+      addable={false}
       editable={false}
       draggable={false}
-      onChartSwitch={(key: string) => {
+      onChartSwitch={(key) => {
         dispatch({
           type: "SWITCH_ACTIVE_CHART",
           value: key,
@@ -343,6 +345,7 @@ export const PublishChartButton = () => {
 
 type TabsInnerProps = {
   data: TabDatum[];
+  addable: boolean;
   editable: boolean;
   draggable: boolean;
   onChartAdd?: (e: React.MouseEvent<HTMLElement>) => void;
@@ -351,8 +354,15 @@ type TabsInnerProps = {
 };
 
 const TabsInner = (props: TabsInnerProps) => {
-  const { data, editable, draggable, onChartEdit, onChartAdd, onChartSwitch } =
-    props;
+  const {
+    data,
+    addable,
+    editable,
+    draggable,
+    onChartEdit,
+    onChartAdd,
+    onChartSwitch,
+  } = props;
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
 
   return (
@@ -438,7 +448,7 @@ const TabsInner = (props: TabsInnerProps) => {
               ))}
               <div style={{ opacity: 0 }}>{provided.placeholder}</div>
 
-              {editable && (
+              {addable && (
                 <Tab
                   sx={{
                     ml: (theme) => `-${theme.spacing(2)}`,

diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
@@ -1340,7 +1340,7 @@ const reducer: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
       return draft;
 
     case "CHART_CONFIG_REORDER":
-      if (draft.state === "CONFIGURING_CHART") {
+      if (draft.state === "CONFIGURING_CHART" || draft.state === "LAYOUTING") {
         const { oldIndex, newIndex } = action.value;
         const [removed] = draft.chartConfigs.splice(oldIndex, 1);
         draft.chartConfigs.splice(newIndex, 0, removed);
@@ -1349,7 +1349,11 @@ const reducer: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
       return draft;
 
     case "SWITCH_ACTIVE_CHART":
-      if (draft.state === "CONFIGURING_CHART" || draft.state === "PUBLISHED") {
+      if (
+        draft.state === "CONFIGURING_CHART" ||
+        draft.state === "LAYOUTING" ||
+        draft.state === "PUBLISHED"
+      ) {
         draft.activeChartKey = action.value;
       }