fix(ui): prevent accidental navigation in AppTable and VariantsTable

web/oss/src/components/InfiniteVirtualTable/hooks/useTableManager.tsx

@@ -6,11 +6,13 @@ import {Button, Grid, Tooltip} from "antd"
 import type {ColumnsType} from "antd/es/table"
 import clsx from "clsx"
 
+import {shouldIgnoreRowClick} from "@/oss/lib/tableRowClick"
+
 import type {InfiniteDatasetStore} from "../createInfiniteDatasetStore"
 import type {
-    TableScopeConfig,
-    TableFeaturePagination,
     InfiniteVirtualTableFeatureProps,
+    TableFeaturePagination,
+    TableScopeConfig,
 } from "../features/InfiniteVirtualTableFeatureShell"
 import type {
     InfiniteTableRowBase,
@@ -20,29 +22,6 @@ import type {
 
 import useTableExport from "./useTableExport"
 
-/**
- * Helper to detect if a click event should be ignored for row navigation
- * Returns true if the click was on an interactive element (button, link, dropdown, etc.)
- */
-export const shouldIgnoreRowClick = (event: MouseEvent<HTMLElement>): boolean => {
-    const target = event.target as HTMLElement
-
-    // Check if clicking on interactive elements
-    if (
-        target.closest("button") ||
-        target.closest("a") ||
-        target.closest(".ant-dropdown-trigger") ||
-        target.closest(".ant-checkbox-wrapper") ||
-        target.closest(".ant-select") ||
-        target.closest("input") ||
-        target.closest("textarea")
-    ) {
-        return true
-    }
-
-    return false
-}
-
 export interface UseTableManagerConfig<T extends InfiniteTableRowBase> {
     /** The dataset store for this table */
     datasetStore: InfiniteDatasetStore<T, any, any>

web/oss/src/components/VariantsComponents/Table/index.tsx

@@ -6,6 +6,7 @@ import {atom, useAtom} from "jotai"
 
 import useURL from "@/oss/hooks/useURL"
 import {EnhancedVariant} from "@/oss/lib/shared/variant/transformer/types"
+import {shouldIgnoreRowClick} from "@/oss/lib/tableRowClick"
 import {variantTableSelectionAtomFamily} from "@/oss/state/variant/atoms/selection"
 
 import ResizableTitle from "../../ResizableTitle"
@@ -143,7 +144,8 @@ const VariantsTable = ({
                 onRow={(record: any) => ({
                     className: "variant-table-row",
                     style: {cursor: "pointer"},
-                    onClick: () => {
+                    onClick: (event) => {
+                        if (shouldIgnoreRowClick(event)) return
                         onRowClick(record)
                     },
                 })}

web/oss/src/components/pages/app-management/components/AppTable.tsx

@@ -7,6 +7,7 @@ import {useRouter} from "next/router"
 import NoResultsFound from "@/oss/components/NoResultsFound/NoResultsFound"
 import useURL from "@/oss/hooks/useURL"
 import {formatDay} from "@/oss/lib/helpers/dateTimeHelper"
+import {shouldIgnoreRowClick} from "@/oss/lib/tableRowClick"
 import {ListAppsItem} from "@/oss/lib/Types"
 
 import {getAppTypeIcon} from "../../prompts/assets/iconHelpers"
@@ -126,7 +127,10 @@ const AppTable = ({filteredApps, openDeleteAppModal, openEditAppModal}: AppTable
                 bordered
                 onRow={(record) => ({
                     style: {cursor: "pointer"},
-                    onClick: () => router.push(`${baseAppURL}/${record.app_id}/overview`),
+                    onClick: (event) => {
+                        if (shouldIgnoreRowClick(event)) return
+                        router.push(`${baseAppURL}/${record.app_id}/overview`)
+                    },
                 })}
                 locale={{emptyText: <NoResultsFound />}}
             />

web/oss/src/lib/tableRowClick.ts

@@ -0,0 +1,46 @@
+import type {MouseEvent} from "react"
+
+/**
+ * Determines if a row click event should be ignored because it originated from
+ * an interactive element within the row.
+ *
+ * This helper prevents accidental row navigation when users interact with:
+ * - Buttons (including dropdown triggers)
+ * - Links
+ * - Checkboxes and radio buttons
+ * - Select dropdowns
+ * - Input fields and textareas
+ *
+ * @param event - The mouse click event from the table row
+ * @returns `true` if the click should be ignored (don't trigger row action), `false` otherwise
+ *
+ * @example
+ * ```tsx
+ * <Table
+ *   onRow={(record) => ({
+ *     onClick: (event) => {
+ *       if (shouldIgnoreRowClick(event)) return
+ *       navigateToRecord(record)
+ *     }
+ *   })}
+ * />
+ * ```
+ */
+export const shouldIgnoreRowClick = (event: MouseEvent<HTMLElement>): boolean => {
+    const target = event.target as HTMLElement
+
+    // Check if clicking on interactive elements
+    if (
+        target.closest("button") ||
+        target.closest("a") ||
+        target.closest(".ant-dropdown-trigger") ||
+        target.closest(".ant-checkbox-wrapper") ||
+        target.closest(".ant-select") ||
+        target.closest("input") ||
+        target.closest("textarea")
+    ) {
+        return true
+    }
+
+    return false
+}