From c7c31d9cfbedc7cfdfbacf45e082a43313b1e082 Mon Sep 17 00:00:00 2001
From: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>
Date: Tue, 15 Jul 2025 15:29:17 +0530
Subject: [PATCH] [WEB-4509] fix: layout switcher in global views #3672

---
 apps/web/ee/components/views/helper.tsx | 44 ++++++++++---------------
 1 file changed, 18 insertions(+), 26 deletions(-)

diff --git a/apps/web/ee/components/views/helper.tsx b/apps/web/ee/components/views/helper.tsx
index c174f1e57d..572cb61420 100644
--- a/apps/web/ee/components/views/helper.tsx
+++ b/apps/web/ee/components/views/helper.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { E_FEATURE_FLAGS, EIssueFilterType, EIssueLayoutTypes } from "@plane/constants";
+import { E_FEATURE_FLAGS, EIssueLayoutTypes } from "@plane/constants";
 import { EIssuesStoreType } from "@plane/types";
 import { TLayoutSelectionProps } from "@/ce/components/views/helper";
 import { LayoutSelection } from "@/components/issues";
@@ -8,6 +8,8 @@ import { useIssues } from "@/hooks/store";
 import { useFlag } from "@/plane-web/hooks/store";
 import { WorkspaceGanttRoot } from "../issues/issue-layouts/gantt/root";
 
+const ALLOWED_LAYOUTS = [EIssueLayoutTypes.SPREADSHEET, EIssueLayoutTypes.GANTT];
+
 /**
  * @description Global view layout selection component
  * @param {TLayoutSelectionProps} props
@@ -16,37 +18,27 @@ import { WorkspaceGanttRoot } from "../issues/issue-layouts/gantt/root";
 export const GlobalViewLayoutSelection = ({ onChange, selectedLayout, workspaceSlug }: TLayoutSelectionProps) => {
   const isGanttLayoutEnabled = useFlag(workspaceSlug, E_FEATURE_FLAGS.GLOBAL_VIEWS_TIMELINE);
 
-  if (!isGanttLayoutEnabled) return null;
-
-  return (
-    <LayoutSelection
-      layouts={[EIssueLayoutTypes.SPREADSHEET, EIssueLayoutTypes.GANTT]}
-      onChange={onChange}
-      selectedLayout={selectedLayout}
-    />
-  );
-};
-
-export const WorkspaceAdditionalLayouts = (props: TWorkspaceLayoutProps) => {
-  const isGanttLayoutEnabled = useFlag(props.workspaceSlug, E_FEATURE_FLAGS.GLOBAL_VIEWS_TIMELINE);
-
   const {
     issuesFilter: { updateFilters },
   } = useIssues(EIssuesStoreType.GLOBAL);
 
-  /** To handle layout switch when downgraded */
+  /** To handle layout switch when downgraded and to reset default layout to SPREADSHEET*/
   useEffect(() => {
-    if (!isGanttLayoutEnabled && props.activeLayout === EIssueLayoutTypes.GANTT) {
-      updateFilters(
-        props.workspaceSlug,
-        undefined,
-        EIssueFilterType.DISPLAY_FILTERS,
-        { layout: EIssueLayoutTypes.SPREADSHEET },
-        props.globalViewId
-      );
-    }
-  }, [isGanttLayoutEnabled, props.activeLayout, props.workspaceSlug, props.globalViewId, updateFilters]);
+    const shouldSwitchToSpreadsheet =
+      !ALLOWED_LAYOUTS.includes(selectedLayout) ||
+      (!isGanttLayoutEnabled && selectedLayout === EIssueLayoutTypes.GANTT);
 
+    if (shouldSwitchToSpreadsheet) {
+      onChange(EIssueLayoutTypes.SPREADSHEET);
+    }
+  }, [isGanttLayoutEnabled, selectedLayout, workspaceSlug, updateFilters, onChange]);
+
+  if (!isGanttLayoutEnabled) return null;
+
+  return <LayoutSelection layouts={ALLOWED_LAYOUTS} onChange={onChange} selectedLayout={selectedLayout} />;
+};
+
+export const WorkspaceAdditionalLayouts = (props: TWorkspaceLayoutProps) => {
   switch (props.activeLayout) {
     case EIssueLayoutTypes.GANTT:
       return <WorkspaceGanttRoot {...props} />;