Retain browser setting for modal dynamic groups (#5149)

* don't inherit dynamic groups setting from grid

* fix e2e

* dynamic groups paginationd default e2e

* fix key conflict

app/packages/state/src/hooks/useSetModalState.ts

@@ -2,7 +2,6 @@ import type { CallbackInterface, RecoilState } from "recoil";
 
 import { useRelayEnvironment } from "react-relay";
 import { useRecoilCallback } from "recoil";
-import { dynamicGroupsViewMode } from "../recoil";
 import * as atoms from "../recoil/atoms";
 import * as filterAtoms from "../recoil/filters";
 import * as groupAtoms from "../recoil/groups";
@@ -45,8 +44,6 @@ export default () => {
           ];
         }),
 
-        [dynamicGroupsViewMode(true), dynamicGroupsViewMode(false)],
-
         [atoms.cropToContent(true), atoms.cropToContent(false)],
         [atoms.sortFilterResults(true), atoms.sortFilterResults(false)],
         [groupAtoms.groupStatistics(true), groupAtoms.groupStatistics(false)],

app/packages/state/src/recoil/options.ts

@@ -4,7 +4,7 @@ import {
   mediaFieldsFragment,
   mediaFieldsFragment$key,
 } from "@fiftyone/relay";
-import { atomFamily, selector, selectorFamily } from "recoil";
+import { DefaultValue, atomFamily, selector, selectorFamily } from "recoil";
 import { getBrowserStorageEffectForKey } from "./customEffects";
 import { datasetSampleCount } from "./dataset";
 import { fieldPaths } from "./schema";
@@ -55,17 +55,43 @@ export const selectedMediaField = selectorFamily<string, boolean>({
       set(selectedMediaFieldAtomFamily(modal), value),
 });
 
-export const dynamicGroupsViewMode = atomFamily<
-  "carousel" | "pagination" | "video",
+export const dynamicGroupsViewModeStore = atomFamily<
+  "carousel" | "pagination" | "video" | null,
   boolean
 >({
-  key: "dynamicGroupsViewMode",
-  default: "pagination",
+  key: "dynamicGroupsViewModeStore",
+  default: null,
   effects: (modal) => [
     getBrowserStorageEffectForKey(`dynamicGroupsViewMode-${modal}`),
   ],
 });
 
+export const dynamicGroupsViewMode = selectorFamily({
+  key: "dynamicGroupsViewMode",
+  get:
+    (modal: boolean) =>
+    ({ get }) => {
+      const value = get(dynamicGroupsViewModeStore(modal));
+
+      if (!value) {
+        return modal
+          ? get(dynamicGroupsViewModeStore(false)) ?? "pagination"
+          : "pagination";
+      }
+
+      return value;
+    },
+  set:
+    (modal: boolean) =>
+    ({ reset, set }, newValue) => {
+      const instance = dynamicGroupsViewModeStore(modal);
+
+      newValue instanceof DefaultValue
+        ? reset(instance)
+        : set(instance, newValue);
+    },
+});
+
 export const isLargeVideo = selector<boolean>({
   key: "isLargeVideo",
   get: ({ get }) => {