[frontend] Allow middle-mouse button to click on DataTable (#8394)

OpenCTI-Platform · Oct 1, 2024 · 9a8fc45 · 9a8fc45
1 parent 2a0b74c
commit 9a8fc45
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 41 deletions.
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableBody.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableBody.tsx
@@ -102,7 +102,7 @@ const DataTableBody = ({
     }
     // From there, currentRefContainer is not null
     /* eslint-disable @typescript-eslint/no-non-null-assertion */
-    const clientWidth = currentRefContainer!.clientWidth - storedSize; // Scrollbar size to prevent alignment issues
+    const clientWidth = currentRefContainer!.clientWidth - storedSize - 10; // Scrollbar size to prevent alignment issues
     for (let i = startsWithSelect ? 1 : 0; i < columns.length - (endsWithNavigate ? 1 : 0); i += 1) {
       const column = reset ? columns[i] : { ...columns[i], ...localStorageColumns[columns[i].id] };
       const shouldCompute = (!column.size || resize || !localStorageColumns[columns[i].id]?.size) && (column.percentWidth && Boolean(computeState));
@@ -146,8 +146,8 @@ const DataTableBody = ({
     } else {
       currentRefContainer!.style.overflow = 'hidden';
     }
-    colSizes['--header-table-size'] = tableSize;
-    colSizes['--col-table-size'] = tableSize;
+    colSizes['--header-table-size'] = tableSize + 10;
+    colSizes['--col-table-size'] = tableSize + 10;
     if (variant === DataTableVariant.widget) {
       if (!rootRef) {
         throw Error('Invalid configuration for widget list');

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx
@@ -143,68 +143,76 @@ const DataTableLine = ({
   const endWithNavigate = effectiveColumns.at(-1)?.id === 'navigate';
 
   const handleSelectLine = (event: React.MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
     if (event.shiftKey) {
       onToggleShiftEntity(index, data, event);
     } else {
       onToggleEntity(data, event);
     }
   };
 
+  const handleNavigate = (event: React.MouseEvent) => {
+    if (event.ctrlKey) {
+      window.open(link, '_blank');
+    } else {
+      navigate(link);
+    }
+  };
+
   const handleRowClick = (event: React.MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
+
     if (selectOnLineClick) {
       handleSelectLine(event);
     } else if (onLineClick) {
       onLineClick(data);
-    } else if (navigable) {
-      if (event.ctrlKey) {
-        window.open(link, '_blank');
-      } else {
-        navigate(link);
-      }
+    } else {
+      handleNavigate(event);
     }
   };
 
   return (
     <div
       key={row.id}
       className={classes.row}
-      // using onMouseDown to redirect before drag and drop happens when used in dashboard widgets
-      onMouseDown={variant === DataTableVariant.widget ? handleRowClick : undefined}
-      onClick={variant !== DataTableVariant.widget ? handleRowClick : undefined}
       style={{ cursor: clickable ? 'pointer' : 'unset' }}
+      // We need both to handle accessibility and widget.
+      onMouseDown={variant === DataTableVariant.widget ? handleNavigate : undefined}
+      onClick={variant !== DataTableVariant.widget ? handleRowClick : undefined}
       data-testid={getMainRepresentative(data)}
     >
-      {startsWithSelect && (
-        <div
-          key={`select_${data.id}`}
-          className={classes.cellContainer}
-          style={{
-            width: 'calc(var(--col-select-size) * 1px)',
-          }}
-        >
-
-          <Checkbox
-            onClick={handleSelectLine}
-            checked={
-              (selectAll
-                && !((data.id || 'id') in (deSelectedElements || {})))
-              || (data.id || 'id') in (selectedElements || {})
-            }
+      <a
+        style={{ display: 'flex', color: 'inherit' }}
+        href={navigable ? link : undefined}
+      >
+        {startsWithSelect && (
+          <div
+            key={`select_${data.id}`}
+            className={classes.cellContainer}
+            style={{
+              width: 'calc(var(--col-select-size) * 1px)',
+            }}
+          >
+
+            <Checkbox
+              onClick={handleSelectLine}
+              checked={
+                (selectAll
+                  && !((data.id || 'id') in (deSelectedElements || {})))
+                || (data.id || 'id') in (selectedElements || {})
+              }
+            />
+          </div>
+        )}
+        {effectiveColumns.slice(startsWithSelect ? 1 : 0, (actions || disableNavigation) ? undefined : -1).map((column) => (
+          <DataTableCell
+            key={column.id}
+            cell={column}
+            data={data}
+            storageHelpers={storageHelpers}
           />
-        </div>
-      )}
-      {effectiveColumns.slice(startsWithSelect ? 1 : 0, (actions || disableNavigation) ? undefined : -1).map((column) => (
-        <DataTableCell
-          key={column.id}
-          cell={column}
-          data={data}
-          storageHelpers={storageHelpers}
-        />
-      ))}
+        ))}
+      </a>
       {(actions || endWithNavigate) && (
         <div
           key={`navigate_${data.id}`}
@@ -213,7 +221,18 @@ const DataTableLine = ({
             width: 'calc(var(--col-navigate-size) * 1px)',
             overflow: 'initial',
           }}
-          onClick={(e) => e.stopPropagation()}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          onMouseUp={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
         >
           {actions && actions(data)}
           {endWithNavigate && (