fix: switch saveMode for SaveFilterSegmentButton (#20502)

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({

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") {