From ca32c199e8e5983013d36613f9bd178dc69285d1 Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Sat, 16 May 2026 20:28:15 +0700
Subject: [PATCH] refactor(frontend): compose DataTable storageKey via
 usePageStorageKeys
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hard-coding the full `table_4_/settings/prompts:agents` / `:tools` keys in
the page duplicated the route prefix that `usePageStorageKeys` already
computes — if the prefix ever bumps (e.g. `table_4_` → `table_5_` on a
storage migration), every call site silently goes stale. Read the route
base from the hook instead and only own the per-table suffix in the page.
Updated the `storageKey` JSDoc on DataTable to document this composition
pattern.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/ui/data-table.tsx        | 10 ++++++++++
 frontend/src/pages/settings/settings-prompts.tsx |  9 +++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ui/data-table.tsx b/frontend/src/components/ui/data-table.tsx
index 6a9e0caa..c4c77a0f 100644
--- a/frontend/src/components/ui/data-table.tsx
+++ b/frontend/src/components/ui/data-table.tsx
@@ -111,6 +111,16 @@ interface DataTableProps<TData, TValue = unknown> {
      * one DataTable. Pages that mount multiple DataTables on the same route
      * (e.g. `/settings/prompts`) must pass distinct keys per instance, or
      * their persisted state will alias and overwrite each other.
+     *
+     * Recommended composition for multi-table routes — take the route base
+     * through `usePageStorageKeys` and append a per-table suffix instead of
+     * hard-coding the `table_4_<path>` prefix:
+     *
+     * ```tsx
+     * const { table: base } = usePageStorageKeys();
+     * <DataTable storageKey={`${base}:agents`} … />
+     * <DataTable storageKey={`${base}:tools`} … />
+     * ```
      */
     storageKey?: string;
 }
diff --git a/frontend/src/pages/settings/settings-prompts.tsx b/frontend/src/pages/settings/settings-prompts.tsx
index 5e2dcbdf..508d2871 100644
--- a/frontend/src/pages/settings/settings-prompts.tsx
+++ b/frontend/src/pages/settings/settings-prompts.tsx
@@ -35,6 +35,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { StatusCard } from '@/components/ui/status-card';
 import { useDeletePromptMutation, useSettingsPromptsQuery } from '@/graphql/types';
+import { usePageStorageKeys } from '@/hooks/use-page-storage-keys';
 // Types for table data
 type AgentPromptTableData = {
     displayName: string; // Formatted display name
@@ -69,6 +70,10 @@ const SettingsPrompts = () => {
     const { data, error, loading: isLoading } = useSettingsPromptsQuery();
     const [deletePrompt, { loading: isDeleteLoading }] = useDeletePromptMutation();
     const navigate = useNavigate();
+    // Shared base key for the route; each DataTable appends its own suffix so
+    // sorting / column visibility / search-column narrowing live in distinct
+    // slots even though the page mounts two tables.
+    const { table: tableStorageBase } = usePageStorageKeys();
 
     // Reset dialog states
     const [resetDialogOpen, setResetDialogOpen] = useState(false);
@@ -860,7 +865,7 @@ const SettingsPrompts = () => {
                             initialPageSize={1000}
                             renderRowContextMenu={renderAgentRowContextMenu}
                             renderSubComponent={renderAgentSubComponent}
-                            storageKey="table_4_/settings/prompts:agents"
+                            storageKey={`${tableStorageBase}:agents`}
                         />
                     </div>
                 )}
@@ -881,7 +886,7 @@ const SettingsPrompts = () => {
                             initialPageSize={1000}
                             renderRowContextMenu={renderToolRowContextMenu}
                             renderSubComponent={renderToolSubComponent}
-                            storageKey="table_4_/settings/prompts:tools"
+                            storageKey={`${tableStorageBase}:tools`}
                         />
                     </div>
                 )}