From 98902312f71761d4a6f317f6c34a4c3b6df730e6 Mon Sep 17 00:00:00 2001
From: David Newell <d.newell1@outlook.com>
Date: Wed, 4 Dec 2024 13:37:07 +0000
Subject: [PATCH] fix: table ids & loading (#26594)

---
 .../ErrorTrackingConfigurationScene.tsx            | 14 ++++++++++++--
 .../error-tracking/errorTrackingSymbolSetLogic.tsx |  6 +-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/scenes/error-tracking/ErrorTrackingConfigurationScene.tsx b/frontend/src/scenes/error-tracking/ErrorTrackingConfigurationScene.tsx
index a7e105958f356..d381d62640a0f 100644
--- a/frontend/src/scenes/error-tracking/ErrorTrackingConfigurationScene.tsx
+++ b/frontend/src/scenes/error-tracking/ErrorTrackingConfigurationScene.tsx
@@ -18,6 +18,11 @@ export const scene: SceneExport = {
 
 export function ErrorTrackingConfigurationScene(): JSX.Element {
     const { missingSymbolSets, validSymbolSets } = useValues(errorTrackingSymbolSetLogic)
+    const { loadSymbolSets } = useActions(errorTrackingSymbolSetLogic)
+
+    useEffect(() => {
+        loadSymbolSets()
+    }, [loadSymbolSets])
 
     return (
         <div className="space-y-4">
@@ -27,18 +32,22 @@ export function ErrorTrackingConfigurationScene(): JSX.Element {
                 automatically retrieves source maps where possible. Cases where it was not possible are listed below.
                 Source maps can be uploaded retroactively but changes will only apply to all future exceptions ingested.
             </p>
-            {missingSymbolSets.length > 0 && <SymbolSetTable dataSource={missingSymbolSets} pageSize={5} missing />}
-            {validSymbolSets.length > 0 && <SymbolSetTable dataSource={validSymbolSets} pageSize={10} />}
+            {missingSymbolSets.length > 0 && (
+                <SymbolSetTable id="missing" dataSource={missingSymbolSets} pageSize={5} missing />
+            )}
+            {validSymbolSets.length > 0 && <SymbolSetTable id="valid" dataSource={validSymbolSets} pageSize={10} />}
             <SymbolSetUploadModal />
         </div>
     )
 }
 
 const SymbolSetTable = ({
+    id,
     dataSource,
     pageSize,
     missing,
 }: {
+    id: string
     dataSource: ErrorTrackingSymbolSet[]
     pageSize: number
     missing?: boolean
@@ -98,6 +107,7 @@ const SymbolSetTable = ({
 
     return (
         <LemonTable
+            id={id}
             showHeader={missing}
             pagination={{ pageSize }}
             columns={columns}
diff --git a/frontend/src/scenes/error-tracking/errorTrackingSymbolSetLogic.tsx b/frontend/src/scenes/error-tracking/errorTrackingSymbolSetLogic.tsx
index f52e94729b13a..e1c7cb57173cd 100644
--- a/frontend/src/scenes/error-tracking/errorTrackingSymbolSetLogic.tsx
+++ b/frontend/src/scenes/error-tracking/errorTrackingSymbolSetLogic.tsx
@@ -1,5 +1,5 @@
 import { lemonToast } from '@posthog/lemon-ui'
-import { actions, afterMount, kea, path, reducers, selectors } from 'kea'
+import { actions, kea, path, reducers, selectors } from 'kea'
 import { forms } from 'kea-forms'
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
@@ -103,8 +103,4 @@ export const errorTrackingSymbolSetLogic = kea<errorTrackingSymbolSetLogicType>(
             },
         },
     })),
-
-    afterMount(({ actions }) => {
-        actions.loadSymbolSets()
-    }),
 ])