From 1bf44e018868b006adf63a9976c7f98e39eed9a2 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Fri, 4 Aug 2023 19:27:48 -0700
Subject: [PATCH] Fixes table header (#1087)

* Wrap up Front chat

* Wrap up Front chat

* Disable entity selectionwhen starting from menu
---
 front/src/modules/ui/table/components/EntityTable.tsx |  7 +++----
 .../modules/ui/table/components/EntityTableBody.tsx   |  9 ++-------
 .../modules/ui/table/components/EntityTableHeader.tsx |  2 +-
 .../utilities/drag-select/components}/DragSelect.tsx  | 11 +++++++++++
 4 files changed, 17 insertions(+), 12 deletions(-)
 rename front/src/{utils => modules/ui/utilities/drag-select/components}/DragSelect.tsx (81%)

diff --git a/front/src/modules/ui/table/components/EntityTable.tsx b/front/src/modules/ui/table/components/EntityTable.tsx
index 1f8eb6627..d4e4d3af3 100644
--- a/front/src/modules/ui/table/components/EntityTable.tsx
+++ b/front/src/modules/ui/table/components/EntityTable.tsx
@@ -3,9 +3,9 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
+import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
-import { DragSelect } from '../../../../utils/DragSelect';
 import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus';
 import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus';
 import { useSetRowSelectedState } from '../hooks/useSetRowSelectedState';
@@ -103,7 +103,6 @@ export function EntityTable<SortField>({
   useUpdateEntityMutation,
 }: OwnProps<SortField>) {
   const tableBodyRef = useRef<HTMLDivElement>(null);
-  const entityTableBodyRef = useRef<HTMLTableSectionElement>(null);
 
   const rowIds = useRecoilValue(tableRowIdsState);
   const setRowSelectedState = useSetRowSelectedState();
@@ -138,11 +137,11 @@ export function EntityTable<SortField>({
           <StyledTableWrapper>
             <StyledTable>
               <EntityTableHeader />
-              <EntityTableBody tbodyRef={entityTableBodyRef} />
+              <EntityTableBody />
             </StyledTable>
           </StyledTableWrapper>
           <DragSelect
-            dragSelectable={entityTableBodyRef}
+            dragSelectable={tableBodyRef}
             onDragSelectionStart={resetSelections}
             onDragSelectionChange={setRowSelectedState}
           />
diff --git a/front/src/modules/ui/table/components/EntityTableBody.tsx b/front/src/modules/ui/table/components/EntityTableBody.tsx
index 1b93382f7..c6204abde 100644
--- a/front/src/modules/ui/table/components/EntityTableBody.tsx
+++ b/front/src/modules/ui/table/components/EntityTableBody.tsx
@@ -1,4 +1,3 @@
-import { Ref } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState';
@@ -10,11 +9,7 @@ import { tableRowIdsState } from '../states/tableRowIdsState';
 
 import { EntityTableRow } from './EntityTableRow';
 
-type OwnProps = {
-  tbodyRef: Ref<HTMLTableSectionElement>;
-};
-
-export function EntityTableBody({ tbodyRef }: OwnProps) {
+export function EntityTableBody() {
   const rowIds = useRecoilValue(tableRowIdsState);
 
   const isNavbarSwitchingSize = useRecoilValue(isNavbarSwitchingSizeState);
@@ -28,7 +23,7 @@ export function EntityTableBody({ tbodyRef }: OwnProps) {
   }
 
   return (
-    <tbody ref={tbodyRef}>
+    <tbody>
       {rowIds.map((rowId, index) => (
         <RowIdContext.Provider value={rowId} key={rowId}>
           <RowIndexContext.Provider value={index}>
diff --git a/front/src/modules/ui/table/components/EntityTableHeader.tsx b/front/src/modules/ui/table/components/EntityTableHeader.tsx
index 6edbccad5..baf3a66bf 100644
--- a/front/src/modules/ui/table/components/EntityTableHeader.tsx
+++ b/front/src/modules/ui/table/components/EntityTableHeader.tsx
@@ -188,7 +188,7 @@ export function EntityTableHeader() {
   );
 
   return (
-    <thead>
+    <thead data-select-disable>
       <tr>
         <th
           style={{
diff --git a/front/src/utils/DragSelect.tsx b/front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx
similarity index 81%
rename from front/src/utils/DragSelect.tsx
rename to front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx
index f56ba6b0d..d30033d41 100644
--- a/front/src/utils/DragSelect.tsx
+++ b/front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx
@@ -16,6 +16,17 @@ export function DragSelect({
   onDragSelectionStart,
 }: OwnProps) {
   const { DragSelection } = useSelectionContainer({
+    shouldStartSelecting: (target) => {
+      if (target instanceof HTMLElement) {
+        let el = target;
+        while (el.parentElement && !el.dataset.selectDisable) {
+          el = el.parentElement;
+        }
+
+        return el.dataset.selectDisable !== 'true';
+      }
+      return true;
+    },
     onSelectionStart: onDragSelectionStart,
     onSelectionChange: (box) => {
       const scrollAwareBox = {