Fixes

twentyhq · charlesBochet · Jul 5, 2024 · Jul 3, 2024 · Jul 3, 2024 · Jul 3, 2024
commit 2b408d137c89ab9f8673fb57aa70a772793820f2
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmpty.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmpty.tsx
diff --git a/...modules/object-record/record-table/record-table-body/components/RecordTableBodyEffect.tsx b/...modules/object-record/record-table/record-table-body/components/RecordTableBodyEffect.tsx
@@ -40,6 +40,15 @@ export const RecordTableBodyEffect = () => {
 
   useEffect(() => {
     setIsRecordTableScrolledTop(scrollTop === 0);
+    if (scrollTop > 0) {
+      document
+        .getElementById('record-table-header')
+        ?.classList.add('header-sticky');
+    } else {
+      document
+        .getElementById('record-table-header')
+        ?.classList.remove('header-sticky');
+    }
   }, [scrollTop, setIsRecordTableScrolledTop]);
 
   const scrollLeft = useRecoilValue(scrollLeftState);
@@ -54,10 +63,16 @@ export const RecordTableBodyEffect = () => {
       document
         .getElementById('record-table-body')
         ?.classList.add('first-columns-sticky');
+      document
+        .getElementById('record-table-header')
+        ?.classList.add('first-columns-sticky');
     } else {
       document
         .getElementById('record-table-body')
         ?.classList.remove('first-columns-sticky');
+      document
+        .getElementById('record-table-header')
+        ?.classList.remove('first-columns-sticky');
     }
   }, [scrollLeft, setIsRecordTableScrolledLeft]);
 

diff --git a/...c/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx b/...c/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx
@@ -7,82 +7,59 @@ import { RecordTableHeaderCell } from '@/object-record/record-table/record-table
 import { RecordTableHeaderCheckboxColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn';
 import { RecordTableHeaderDragDropColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn';
 import { RecordTableHeaderLastColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn';
-import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
-import { isRecordTableScrolledTopComponentState } from '@/object-record/record-table/states/isRecordTableScrolledTopComponentState';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 
 const StyledTableHead = styled.thead<{
   isScrolledTop?: boolean;
   isScrolledLeft?: boolean;
 }>`
   cursor: pointer;
 
-  th {
-    border-block: 1px solid ${({ theme }) => theme.border.color.light};
-    color: ${({ theme }) => theme.font.color.tertiary};
-    padding: 0;
-    text-align: left;
-
-    :last-child {
-      border-right-color: transparent;
-    }
-    :first-of-type {
-      border-top-color: transparent;
-      border-bottom-color: transparent;
-    }
-  }
-
-  th {
-    background-color: ${({ theme }) => theme.background.primary};
-    border-right: 1px solid ${({ theme }) => theme.border.color.light};
-    top: 0;
-    z-index: ${({ isScrolledTop, isScrolledLeft }) =>
-      !isScrolledLeft && !isScrolledTop
-        ? 2
-        : !isScrolledLeft
-          ? 0
-          : !isScrolledTop
-            ? 2
-            : 0};
-    position: sticky;
-  }
-
-  th:nth-of-type(1),
-  th:nth-of-type(2),
-  th:nth-of-type(3) {
-    z-index: ${({ isScrolledTop, isScrolledLeft }) =>
-      !isScrolledLeft && !isScrolledTop
-        ? 7
-        : !isScrolledLeft
-          ? 3
-          : !isScrolledTop
-            ? 6
-            : 0};
-
-    background-color: ${({ theme }) => theme.background.primary};
-  }
-
   th:nth-of-type(1) {
     width: 9px;
     left: 0;
     border-right-color: ${({ theme }) => theme.background.primary};
   }
 
   th:nth-of-type(2) {
-    left: 9px;
     border-right-color: ${({ theme }) => theme.background.primary};
   }
 
-  th:nth-of-type(3) {
-    left: 39px;
+  &.first-columns-sticky {
+    th:nth-child(1) {
+      position: sticky;
+      left: 0;
+      z-index: 5;
+    }
+    th:nth-child(2) {
+      position: sticky;
+      left: 9px;
+      z-index: 5;
+    }
+    th:nth-child(3) {
+      position: sticky;
+      left: 39px;
+      z-index: 5;
+      @media (max-width: ${MOBILE_VIEWPORT}px) {
+        width: 35px;
+        max-width: 35px;
+      }
+    }
+  }
+
+  &.header-sticky {
+    th {
+      position: sticky;
+      top: 0;
+      z-index: 5;
+    }
+  }
 
-    ${({ isScrolledLeft }) =>
-      !isScrolledLeft
-        ? `@media (max-width: ${MOBILE_VIEWPORT}px) {
-      width: 35px;
-      max-width: 35px;
-    }`
-        : ''}
+  &.header-sticky.first-columns-sticky {
+    th:nth-child(1),
+    th:nth-child(2),
+    th:nth-child(3) {
+      z-index: 10;
+    }
   }
 `;
 
@@ -95,20 +72,8 @@ export const RecordTableHeader = ({
 
   const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
 
-  const isRecordTableScrolledTop = useRecoilComponentValue(
-    isRecordTableScrolledTopComponentState,
-  );
-
-  const isRecordTableScrolledLeft = useRecoilComponentValue(
-    isRecordTableScrolledLeftComponentState,
-  );
-
   return (
-    <StyledTableHead
-      data-select-disable
-      isScrolledTop={isRecordTableScrolledTop}
-      isScrolledLeft={isRecordTableScrolledLeft}
-    >
+    <StyledTableHead id="record-table-header" data-select-disable>
       <tr>
         <RecordTableHeaderDragDropColumn />
         <RecordTableHeaderCheckboxColumn />

diff --git a/...dules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx b/...dules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx
@@ -1,12 +1,12 @@
-import { useCallback, useMemo, useState } from 'react';
 import styled from '@emotion/styled';
+import { useCallback, useMemo, useState } from 'react';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 import { IconPlus } from 'twenty-ui';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { RecordTableColumnHead } from '@/object-record/record-table/record-table-header/components/RecordTableColumnHead';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
+import { RecordTableColumnHead } from '@/object-record/record-table/record-table-header/components/RecordTableColumnHead';
 import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
@@ -24,6 +24,14 @@ const StyledColumnHeaderCell = styled.th<{
   columnWidth: number;
   isResizing?: boolean;
 }>`
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  border-top: 1px solid ${({ theme }) => theme.border.color.light};
+  color: ${({ theme }) => theme.font.color.tertiary};
+  padding: 0;
+  text-align: left;
+
+  background-color: ${({ theme }) => theme.background.primary};
+  border-right: 1px solid ${({ theme }) => theme.border.color.light};
   ${({ columnWidth }) => `
       min-width: ${columnWidth}px;
       width: ${columnWidth}px;

diff --git a/...ct-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx b/...ct-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
@@ -4,6 +4,7 @@ import { useRecoilValue } from 'recoil';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { Checkbox } from '@/ui/input/components/Checkbox';
+import { useTheme } from '@emotion/react';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -35,9 +36,13 @@ export const RecordTableHeaderCheckboxColumn = () => {
     }
   };
 
+  const theme = useTheme();
+
   return (
     <th
       style={{
+        borderBottom: `1px solid ${theme.border.color.light}`,
+        borderTop: `1px solid ${theme.border.color.light}`,
         width: 30,
         minWidth: 30,
         maxWidth: 30,

diff --git a/...ct-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx b/...ct-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx
@@ -1,3 +1,10 @@
+import { styled } from '@linaria/react';
+
+const StyledTh = styled.th`
+  border-bottom: none;
+  border-top: none;
+`;
+
 export const RecordTableHeaderDragDropColumn = () => {
-  return <th></th>;
+  return <StyledTh></StyledTh>;
 };
diff --git a/...object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx b/...object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx
@@ -22,13 +22,17 @@ const StyledPlusIconHeaderCell = styled.th<{
   padding-left: ${theme.spacing(3)};
   `;
   }};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  border-top: 1px solid ${({ theme }) => theme.border.color.light};
   border-left: none !important;
+  color: ${({ theme }) => theme.font.color.tertiary};
   min-width: 32px;
+  border-right: none !important;
+
   ${({ isTableWiderThanScreen, theme }) =>
     isTableWiderThanScreen
       ? `
     width: 32px;
-    border-right: none !important;
     background-color: ${theme.background.primary};
     `
       : ''};

diff --git a/...enty-front/src/modules/ui/utilities/state/component-state/utils/createComponentStateV2.ts b/...enty-front/src/modules/ui/utilities/state/component-state/utils/createComponentStateV2.ts
@@ -1,6 +1,7 @@
 import { AtomEffect, atomFamily } from 'recoil';
 
 import { ScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopeInternalContext';
+import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
 import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
 import { isDefined } from '~/utils/isDefined';
 
@@ -16,7 +17,7 @@ export const createComponentStateV2 = <ValueType>({
   defaultValue,
   componentContext,
   effects,
-}: CreateComponentStateV2Type<ValueType>) => {
+}: CreateComponentStateV2Type<ValueType>): ComponentState<ValueType> => {
   if (isDefined(componentContext)) {
     if (!isDefined((window as any).componentContextStateMap)) {
       (window as any).componentContextStateMap = new Map();

diff --git a/packages/twenty-front/vite.config.ts b/packages/twenty-front/vite.config.ts
@@ -71,6 +71,7 @@ export default defineConfig(({ command, mode }) => {
           '**/RecordTableCellBaseContainer.tsx',
           '**/RecordTableCellTd.tsx',
           '**/RecordTableTd.tsx',
+          '**/RecordTableHeaderDragDropColumn.tsx',
         ],
         babelOptions: {
           presets: ['@babel/preset-typescript', '@babel/preset-react'],