Fixed last column width bug on table with groups (#14541)

This PR fixes the last column of a table with groups that was wrapping
on a new line on a empty table or its filtering equivalent (filter
without result)

Fixes in https://github.com/twentyhq/core-team-issues/issues/1490 :
- Fixes most urgent : Empty table with groups header wraps
- Fixes less urgent : Resizing a table with groups makes some filling
resize in the wrong direction

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableColumnWidthEffect.tsx

@@ -1,4 +1,5 @@
 import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthVariableName';
+import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useRecordTableLastColumnWidthToFill } from '@/object-record/record-table/hooks/useRecordTableLastColumnWidthToFill';
 import { resizedFieldMetadataIdComponentState } from '@/object-record/record-table/states/resizedFieldMetadataIdComponentState';
@@ -28,6 +29,11 @@ export const RecordTableColumnWidthEffect = () => {
       `${lastColumnWidth}px`,
     );
 
+    updateRecordTableCSSVariable(
+      RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME,
+      `${lastColumnWidth}px`,
+    );
+
     for (const [index, recordField] of visibleRecordFields.entries()) {
       updateRecordTableCSSVariable(
         getRecordTableColumnFieldWidthCSSVariableName(index),

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx

@@ -7,6 +7,8 @@ import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record-
 import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidthClassName';
 import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthClassName';
 import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthVariableName';
+import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthClassName';
+import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName';
 import { RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE } from '@/object-record/record-table/constants/RecordTableLabelIdentifierColumnWidthOnMobile';
 
 import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
@@ -150,6 +152,7 @@ const StyledTable = styled.div<{
     }
 
     returnedCSS += `${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}: ${lastColumnWidth}px;`;
+    returnedCSS += `${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}: ${lastColumnWidth}px;`;
 
     return returnedCSS;
   }};
@@ -163,6 +166,18 @@ const StyledTable = styled.div<{
       ${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}
     );
   }
+
+  div.${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME} {
+    width: var(
+      ${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}
+    );
+    min-width: var(
+      ${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}
+    );
+    max-width: var(
+      ${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}
+    );
+  }
 `;
 
 export const RecordTableStyleWrapper = StyledTable;

packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthClassName.ts

@@ -0,0 +1,2 @@
+export const RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME =
+  'record-table-column-with-group-last-empty-column';

packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName.ts

@@ -0,0 +1,2 @@
+export const RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME =
+  '--record-table-column-with-group-last-empty-column';

packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useResizeTableHeader.ts

@@ -2,6 +2,7 @@ import { useUpdateRecordField } from '@/object-record/record-field/hooks/useUpda
 
 import { COLUMN_MIN_WIDTH } from '@/object-record/record-table/constants/ColumnMinWidth';
 import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthVariableName';
+import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
 import { useRecordTableLastColumnWidthToFill } from '@/object-record/record-table/hooks/useRecordTableLastColumnWidthToFill';
@@ -96,6 +97,16 @@ export const useResizeTableHeader = () => {
         `${newLastColumnWidth}px`,
       );
 
+      const newGroupSectionLastColumnWidth = Math.max(
+        lastColumnWidth,
+        lastColumnWidth + newResizeOffset,
+      );
+
+      updateRecordTableCSSVariable(
+        RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME,
+        `${newGroupSectionLastColumnWidth}px`,
+      );
+
       setResizeFieldOffset(x - initialPointerPositionX);
     },
     [

packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx

@@ -6,7 +6,7 @@ import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableAddButtonPlaceholderCell } from '@/object-record/record-table/record-table-row/components/RecordTableAddButtonPlaceholderCell';
 import { RecordTableDragAndDropPlaceholderCell } from '@/object-record/record-table/record-table-row/components/RecordTableDragAndDropPlaceholderCell';
-import { RecordTableLastDynamicFillingCell } from '@/object-record/record-table/record-table-row/components/RecordTableLastDynamicFillingCell';
+import { RecordTableGroupSectionLastDynamicFillingCell } from '@/object-record/record-table/record-table-row/components/RecordTableGroupSectionLastDynamicFillingCell';
 import { useTheme } from '@emotion/react';
 import {
   filterOutByProperty,
@@ -142,7 +142,7 @@ export const RecordTableActionRow = ({
         }
       />
       <RecordTableAddButtonPlaceholderCell />
-      <RecordTableLastDynamicFillingCell />
+      <RecordTableGroupSectionLastDynamicFillingCell />
     </StyledRecordTableDraggableTr>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableGroupSectionLastDynamicFillingCell.tsx

@@ -0,0 +1,23 @@
+import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthClassName';
+import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
+import styled from '@emotion/styled';
+import { cx } from '@linaria/core';
+
+const StyledPlaceholderLastDynamicFillingCell = styled.div`
+  height: ${RECORD_TABLE_ROW_HEIGHT}px;
+`;
+
+export const RecordTableGroupSectionLastDynamicFillingCell = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  return (
+    <StyledPlaceholderLastDynamicFillingCell
+      className={cx(
+        RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME,
+        className,
+      )}
+    />
+  );
+};

packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx

@@ -15,8 +15,8 @@ import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/
 import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableAddButtonPlaceholderCell } from '@/object-record/record-table/record-table-row/components/RecordTableAddButtonPlaceholderCell';
-import { RecordTableLastDynamicFillingCell } from '@/object-record/record-table/record-table-row/components/RecordTableLastDynamicFillingCell';
-import { RecordTableRecordGroupStickyEffect } from '@/object-record/record-table/record-table-section/components/RecordTableRecordGroupStickyEffect';
+import { RecordTableGroupSectionLastDynamicFillingCell } from '@/object-record/record-table/record-table-row/components/RecordTableGroupSectionLastDynamicFillingCell';
+
 import { useAggregateRecordsForRecordTableSection } from '@/object-record/record-table/record-table-section/hooks/useAggregateRecordsForRecordTableSection';
 import { isRecordGroupTableSectionToggledComponentState } from '@/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState';
 import { isRecordTableRowActiveComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowActiveComponentFamilyState';
@@ -167,8 +167,7 @@ export const RecordTableRecordGroupSection = () => {
   const sumOfWidthOfVisibleRecordFieldsAfterLabelIdentifierField =
     visibleRecordFieldsWithoutLabelIdentifier.reduce(sumByProperty('size'), 0);
 
-  const sumOfBorderWidthForFields =
-    visibleRecordFieldsWithoutLabelIdentifier.length;
+  const sumOfBorderWidthForFields = visibleRecordFields.length;
 
   const fieldsPlaceholderWidth =
     sumOfWidthOfVisibleRecordFieldsAfterLabelIdentifierField +
@@ -246,11 +245,10 @@ export const RecordTableRecordGroupSection = () => {
           objectMetadataItem={objectMetadataItem}
           aggregateLabel={aggregateLabel}
         />
-        <RecordTableRecordGroupStickyEffect />
       </StyledRecordGroupSection>
       <StyledFieldPlaceholderCell widthOfFields={fieldsPlaceholderWidth} />
       <RecordTableAddButtonPlaceholderCell />
-      <RecordTableLastDynamicFillingCell />
+      <RecordTableGroupSectionLastDynamicFillingCell />
     </StyledTrContainer>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupStickyEffect.tsx

@@ -1,26 +0,0 @@
-import { useEffect } from 'react';
-
-import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
-import { isRecordTableScrolledHorizontallyComponentState } from '@/object-record/record-table/states/isRecordTableScrolledHorizontallyComponentState';
-import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollLeftComponentState';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
-
-export const RecordTableRecordGroupStickyEffect = () => {
-  const scrollLeft = useRecoilComponentValue(
-    scrollWrapperScrollLeftComponentState,
-  );
-
-  const setIsRecordTableScrolledHorizontally = useSetRecoilComponentState(
-    isRecordTableScrolledHorizontallyComponentState,
-  );
-
-  const currentRecordGroupId = useCurrentRecordGroupId();
-
-  useEffect(() => {
-    setIsRecordTableScrolledHorizontally(scrollLeft > 0);
-    // TODO: see if we need to reimplement setting classes here.
-  }, [currentRecordGroupId, scrollLeft, setIsRecordTableScrolledHorizontally]);
-
-  return <></>;
-};