fix: FIT-1488: Makes search, filters and Resolve URIs controls on Task Source Viewer be saved per project (#9559)

Author: ricardoantoniocm

web/libs/datamanager/src/components/Common/Table/RowContextMenu/RowContextMenu.tsx

@@ -4,7 +4,7 @@ import { Dropdown, DropdownContext, IconViewAll, IconCopyOutline, IconBraces, Ic
 // @ts-expect-error - Menu is from JS module
 import { Menu } from "../../Menu/Menu";
 import { modal } from "../../Modal/Modal";
-import { TaskSourceViewer } from "../../TaskSourceViewer";
+import { TaskSourceViewer, getTaskSourceViewerStorageKey } from "../../TaskSourceViewer";
 // @ts-expect-error - utils is JS module
 import { getProperty } from "../utils";
 
@@ -25,6 +25,8 @@ export interface RowContextMenuProps {
   cursorPosition?: { x: number; y: number };
   /** Callback when menu closes */
   onClose: () => void;
+  /** Optional project ID for project-scoped TaskSourceViewer storage */
+  projectId?: string | number | null;
 }
 
 export const RowContextMenu: FC<RowContextMenuProps> = ({
@@ -36,6 +38,7 @@ export const RowContextMenu: FC<RowContextMenuProps> = ({
   onViewAnalytics,
   cursorPosition,
   onClose,
+  projectId,
 }) => {
   // Columns that should not have copy cell content option
   const excludedColumns = [
@@ -185,7 +188,7 @@ export const RowContextMenu: FC<RowContextMenuProps> = ({
           content={taskData}
           onTaskLoad={onTaskLoad}
           sdkType={sdkType}
-          storageKey="dm:tasksource"
+          storageKey={getTaskSourceViewerStorageKey(projectId)}
           renderToggle={(toggle) => {
             // Update modal header with toggle
             modalInstance?.update({ header: toggle });
@@ -195,7 +198,7 @@ export const RowContextMenu: FC<RowContextMenuProps> = ({
     });
 
     onClose();
-  }, [row, api, sdkType, onClose]);
+  }, [row, api, sdkType, onClose, projectId]);
 
   // 5. View annotator performance (LSE-only)
   const handleViewAnalytics = useCallback(() => {

web/libs/datamanager/src/components/Common/Table/Table.jsx

@@ -18,7 +18,7 @@ import { cn } from "../../../utils/bem";
 import { FieldsButton } from "../FieldsButton";
 import { FF_LOPS_E_3, isFF } from "../../../utils/feature-flags";
 import { DensityToggle } from "../../DataManager/Toolbar/DensityToggle";
-import { TaskSourceViewer } from "../TaskSourceViewer";
+import { TaskSourceViewer, getTaskSourceViewerStorageKey } from "../TaskSourceViewer";
 
 const Decorator = (decoration) => {
   return {
@@ -62,7 +62,7 @@ export const Table = observer(
     const [colOrder, setColOrder] = useState(JSON.parse(localStorage.getItem(colOrderKey)) ?? {});
     const listRef = useRef();
     const Decoration = useMemo(() => Decorator(decoration), [decoration]);
-    const { api, type } = useSDK();
+    const { api, type, projectId } = useSDK();
     const toolbarHeight = 41;
     const isQuickView = view.root.isLabeling;
     const [toolbarVisible, setToolbarVisible] = useState(true);
@@ -194,7 +194,7 @@ export const Table = observer(
                     content={out}
                     onTaskLoad={onTaskLoad}
                     sdkType={type}
-                    storageKey="dm:tasksource"
+                    storageKey={getTaskSourceViewerStorageKey(projectId)}
                     renderToggle={(toggle) => {
                       // Update modal header with toggle
                       modalInstance?.update({ header: toggle });
@@ -640,7 +640,7 @@ const innerElementType = forwardRef(({ children, ...rest }, ref) => {
 const ContextMenuPortal = memo(
   ({ contextMenu, view, onViewAnalytics, onViewReviewerAnalytics, onClose, RowContextMenuComponent }) => {
     const MenuComponent = RowContextMenuComponent || RowContextMenu;
-    const { api, type } = useSDK();
+    const { api, type, projectId } = useSDK();
 
     return (
       <MenuComponent
@@ -649,6 +649,7 @@ const ContextMenuPortal = memo(
         view={view}
         api={api}
         sdkType={type}
+        projectId={projectId}
         onViewAnalytics={onViewAnalytics}
         onViewReviewerAnalytics={onViewReviewerAnalytics}
         cursorPosition={{ x: contextMenu.x, y: contextMenu.y }}

web/libs/datamanager/src/components/Common/TaskSourceViewer/TaskSourceViewer.test.tsx

@@ -67,6 +67,8 @@ jest.mock("./TaskSourceViewer.module.scss", () => ({
 }));
 
 describe("TaskSourceViewer Component", () => {
+  // View uses global key; resolveUrls and JSON viewer use project-scoped key (storageKey prop)
+  const GLOBAL_STORAGE_KEY = "dm:tasksource";
   const mockTaskData = {
     id: 123,
     data: {
@@ -133,7 +135,7 @@ describe("TaskSourceViewer Component", () => {
     });
 
     it("should show resolve URI toggle in JsonViewer toolbar for interactive view", async () => {
-      localStorage.setItem("test:tasksource:view", "interactive");
+      localStorage.setItem(`${GLOBAL_STORAGE_KEY}:view`, "interactive");
 
       render(<TaskSourceViewer {...defaultProps} />);
 
@@ -145,7 +147,7 @@ describe("TaskSourceViewer Component", () => {
     });
 
     it("should reload task data when resolve URIs toggle changes", async () => {
-      localStorage.setItem("test:tasksource:view", "interactive");
+      localStorage.setItem(`${GLOBAL_STORAGE_KEY}:view`, "interactive");
       const user = userEvent.setup();
       const mockOnTaskLoad = jest.fn().mockResolvedValue(mockTaskData);
 
@@ -166,7 +168,7 @@ describe("TaskSourceViewer Component", () => {
     });
 
     it("should save resolve URIs preference to localStorage", async () => {
-      localStorage.setItem("test:tasksource:view", "interactive");
+      localStorage.setItem(`${GLOBAL_STORAGE_KEY}:view`, "interactive");
       const user = userEvent.setup();
 
       render(<TaskSourceViewer {...defaultProps} />);
@@ -193,7 +195,7 @@ describe("TaskSourceViewer Component", () => {
     });
 
     it("should respect stored view preference from localStorage", async () => {
-      localStorage.setItem("test:tasksource:view", "interactive");
+      localStorage.setItem(`${GLOBAL_STORAGE_KEY}:view`, "interactive");
 
       render(<TaskSourceViewer {...defaultProps} />);
 
@@ -237,7 +239,7 @@ describe("TaskSourceViewer Component", () => {
       capturedOnViewChange!("interactive");
 
       await waitFor(() => {
-        expect(localStorage.getItem("test:tasksource:view")).toBe("interactive");
+        expect(localStorage.getItem(`${GLOBAL_STORAGE_KEY}:view`)).toBe("interactive");
         expect(screen.getByTestId("json-viewer")).toBeInTheDocument();
       });
     });

web/libs/datamanager/src/components/Common/TaskSourceViewer/TaskSourceViewer.tsx

@@ -7,6 +7,15 @@ import { ViewToggle, type ViewMode } from "./ViewToggle";
 
 export type { ViewMode };
 
+/** Build project-scoped localStorage key for JSON viewer search and filter state. Returns undefined when projectId is missing. */
+export function getTaskSourceViewerStorageKey(projectId: string | number | null | undefined): string | undefined {
+  if (projectId == null || projectId === "") return undefined;
+  return `dm:tasksource:${projectId}`;
+}
+
+/** Global key for view mode (Code/Interactive) only — shared across all projects. */
+const TASK_SOURCE_VIEWER_GLOBAL_KEY = "dm:tasksource";
+
 /** Options passed to onTaskLoad callback */
 export interface TaskLoadOptions {
   /** Whether to resolve storage URIs to proxy URLs (default: false) */
@@ -20,7 +29,7 @@ export interface TaskSourceViewerProps {
   onTaskLoad: (options?: TaskLoadOptions) => Promise<any>;
   /** SDK type (e.g., "DE" for Data Explorer) */
   sdkType?: string;
-  /** Storage key for localStorage persistence */
+  /** Storage key for project-scoped persistence (JSON viewer search/filters and Resolve URIs). View mode stays global. */
   storageKey?: string;
   /** Render toggle in external location (e.g., modal header) */
   renderToggle?: (toggle: React.ReactNode) => void;
@@ -64,35 +73,28 @@ export const TaskSourceViewer: FC<TaskSourceViewerProps> = ({
   content,
   onTaskLoad,
   sdkType,
-  storageKey = "dm:tasksource",
+  storageKey,
   renderToggle,
 }) => {
   const isInteractiveViewerEnabled = isFF(FF_INTERACTIVE_JSON_VIEWER);
 
   const [taskData, setTaskData] = useState(content);
   const [loading, setLoading] = useState(true);
 
-  // Manage view state internally
-  const [view, setView] = useState<ViewMode>(() =>
-    storageKey ? (localStorage.getItem(`${storageKey}:view`) as ViewMode) || "code" : "code",
+  // View mode (Code/Interactive) — global key so preference is shared across projects
+  const [view, setView] = useState<ViewMode>(
+    () => (localStorage.getItem(`${TASK_SOURCE_VIEWER_GLOBAL_KEY}:view`) as ViewMode) || "code",
   );
 
-  // Manage resolve URIs state - default OFF to show original storage URIs
+  // Resolve URIs — per project when storageKey is set (same key as JSON viewer search/filters)
   const [resolveUrls, setResolveUrls] = useState<boolean>(() =>
     storageKey ? localStorage.getItem(`${storageKey}:resolveUrls`) === "true" : false,
   );
 
-  const handleViewChange = useCallback(
-    (newView: ViewMode) => {
-      setView(newView);
-
-      // Save to localStorage
-      if (storageKey) {
-        localStorage.setItem(`${storageKey}:view`, newView);
-      }
-    },
-    [storageKey],
-  );
+  const handleViewChange = useCallback((newView: ViewMode) => {
+    setView(newView);
+    localStorage.setItem(`${TASK_SOURCE_VIEWER_GLOBAL_KEY}:view`, newView);
+  }, []);
 
   // Load full task data
   useEffect(() => {

web/libs/datamanager/src/components/Common/TaskSourceViewer/index.ts

@@ -1,2 +1,2 @@
-export { TaskSourceViewer } from "./TaskSourceViewer";
+export { TaskSourceViewer, getTaskSourceViewerStorageKey } from "./TaskSourceViewer";
 export type { TaskSourceViewerProps } from "./TaskSourceViewer";