fix: better event handling

Author: astandrik

src/containers/DrawerWrapper/DrawerWrapper.tsx

@@ -55,9 +55,9 @@ export const DrawerContentWrapper = ({
             }
         };
 
-        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('click', handleClickOutside);
         return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('click', handleClickOutside);
         };
     }, [isVisible, onClose, detectClickOutside]);
 
@@ -114,6 +114,11 @@ export const DrawerWrapper = ({
     className,
     detectClickOutside,
 }: DrawerWrapperProps) => {
+    React.useEffect(() => {
+        return () => {
+            onCloseDrawer();
+        };
+    }, [onCloseDrawer]);
     return (
         <React.Fragment>
             {children}

src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx

@@ -73,11 +73,6 @@ export const RunningQueriesData = ({
     const rows = data?.resultSets?.[0]?.result;
     const {handleRowSelect, selectedRow, hasSearchParams} = useRunningQueriesRowSelection(rows);
 
-    const handleRowClick = (row: KeyValueRow) => {
-        // Simply pass the row to handleRowSelect
-        handleRowSelect(row);
-    };
-
     const handleCloseDetails = React.useCallback(() => {
         handleRowSelect(null);
     }, [handleRowSelect]);
@@ -127,7 +122,7 @@ export const RunningQueriesData = ({
                         data={rows || []}
                         loading={isFetching && currentData === undefined}
                         settings={TOP_QUERIES_TABLE_SETTINGS}
-                        onRowClick={handleRowClick}
+                        onRowClick={handleRowSelect}
                         rowClassName={(row) => b('row', {active: row === selectedRow})}
                         sortOrder={tableSort}
                         onSort={handleTableSort}

src/containers/Tenant/Diagnostics/TopQueries/hooks/useRunningQueriesRowSelection.ts

@@ -50,7 +50,13 @@ export function useRunningQueriesRowSelection(rows?: KeyValueRow[] | null) {
     const matchedRow = findMatchedQueryRow();
 
     const handleRowSelect = React.useCallback(
-        (row: KeyValueRow | null) => {
+        (
+            row: KeyValueRow | null,
+            _index?: number,
+            event?: React.MouseEvent<HTMLTableRowElement>,
+        ) => {
+            event?.stopPropagation();
+
             if (!row) {
                 setQueryParams(
                     {

src/containers/Tenant/Diagnostics/TopQueries/hooks/useTopQueriesRowSelection.ts

@@ -54,7 +54,13 @@ export function useTopQueriesRowSelection(rows?: KeyValueRow[] | null) {
     const matchedRow = findMatchedQueryRow();
 
     const handleRowSelect = React.useCallback(
-        (row: KeyValueRow | null) => {
+        (
+            row: KeyValueRow | null,
+            _index?: number,
+            event?: React.MouseEvent<HTMLTableRowElement>,
+        ) => {
+            event?.stopPropagation();
+
             if (!row) {
                 setQueryParams(
                     {