From 9ac037c524385a0222e1e7c13f80ae62550fd993 Mon Sep 17 00:00:00 2001
From: Eunjae Lee <hey@eunjae.dev>
Date: Wed, 2 Apr 2025 11:58:18 +0200
Subject: [PATCH] fix: switch saveMode for SaveFilterSegmentButton (#20502)

---
 packages/features/data-table/DataTableProvider.tsx |  4 ++--
 .../components/segment/SaveFilterSegmentButton.tsx | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/features/data-table/DataTableProvider.tsx b/packages/features/data-table/DataTableProvider.tsx
index 3eb5cdba7f..1516ab40a3 100644
--- a/packages/features/data-table/DataTableProvider.tsx
+++ b/packages/features/data-table/DataTableProvider.tsx
@@ -160,10 +160,10 @@ export function DataTableProvider({
 
   const setPageSizeAndGoToFirstPage = useCallback(
     (newPageSize: number | null) => {
-      setPageSize(newPageSize === DEFAULT_PAGE_SIZE ? null : newPageSize);
+      setPageSize(newPageSize === defaultPageSize ? null : newPageSize);
       setPageIndex(null);
     },
-    [setPageSize, setPageIndex]
+    [setPageSize, setPageIndex, defaultPageSize]
   );
 
   const { segments, selectedSegment, canSaveSegment, setSegmentIdAndSaveToLocalStorage } = useSegments({
diff --git a/packages/features/data-table/components/segment/SaveFilterSegmentButton.tsx b/packages/features/data-table/components/segment/SaveFilterSegmentButton.tsx
index f7bd0c4404..d35a11e1e1 100644
--- a/packages/features/data-table/components/segment/SaveFilterSegmentButton.tsx
+++ b/packages/features/data-table/components/segment/SaveFilterSegmentButton.tsx
@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 import { checkAdminOrOwner } from "@calcom/features/auth/lib/checkAdminOrOwner";
@@ -51,12 +51,22 @@ export function SaveFilterSegmentButton() {
     selectedSegment,
     canSaveSegment,
     setSegmentId,
+    pageSize,
   } = useDataTable();
 
   const [saveMode, setSaveMode] = useState<"create" | "update">(() =>
     selectedSegment ? "update" : "create"
   );
 
+  // When the dialog is not open,
+  // switch `saveMode` according to `selectedSegment`
+  useEffect(() => {
+    if (isOpen) {
+      return;
+    }
+    setSaveMode(selectedSegment ? "update" : "create");
+  }, [selectedSegment, isOpen]);
+
   const { data: teams } = trpc.viewer.teams.list.useQuery();
 
   const { mutate: createSegment } = trpc.viewer.filterSegments.create.useMutation({
@@ -94,7 +104,7 @@ export function SaveFilterSegmentButton() {
       sorting,
       columnVisibility,
       columnSizing,
-      perPage: 10,
+      perPage: pageSize,
     };
 
     if (saveMode === "update") {