BIG-78: feat: prevent table row click action on some given nested elements.

src/components/Datatable/TableCell.js

@@ -4,9 +4,11 @@ import { If } from 'components';
 import { Skeleton } from 'components';
 import { useAppIntlContext } from 'components/AppIntlProvider';
 import TableContext from './TableContext';
-import { saveInvoke } from 'utils';
+import { saveInvoke, ignoreEventFromSelectors } from 'utils';
 import { isCellLoading } from './utils';
 
+const ROW_CLICK_SELECTORS_INGORED = ['.expand-toggle', '.selection-checkbox'];
+
 /**
  * Table cell.
  */
@@ -50,6 +52,9 @@ export default function TableCell({ cell, row, index }) {
   }
   // Handle cell click action.
   const handleCellClick = (event) => {
+    if (ignoreEventFromSelectors(event, ROW_CLICK_SELECTORS_INGORED)) {
+      return;
+    }
     saveInvoke(onCellClick, cell, event);
   };
 
@@ -58,7 +63,7 @@ export default function TableCell({ cell, row, index }) {
       {...cell.getCellProps({
         className: classNames(cell.column.className, 'td', {
           'is-text-overview': cell.column.textOverview,
-          'clickable': cell.column.clickable,
+          clickable: cell.column.clickable,
           'align-right': cell.column.align === 'right',
         }),
         onClick: handleCellClick,
@@ -83,11 +88,15 @@ export default function TableCell({ cell, row, index }) {
           // to build the toggle for expanding a row
         }
         <If condition={cell.row.canExpand && expandable && isExpandColumn}>
-          <span {...getToggleRowExpandedProps({ className: 'expand-toggle' })}>
+          <span
+            {...getToggleRowExpandedProps({
+              className: 'expand-toggle',
+            })}
+            style={{}}
+          >
             <span
-              className={classNames({
-                'arrow-down': isExpanded,
-                'arrow-right': !isExpanded,
+              className={classNames('expand-arrow', {
+                'is-expanded': isExpanded,
               })}
             />
           </span>