Aggregate queries follow up (#9636)

In this PR - [X] Fix missing IconCheck for count all on kanban headers: https://discord.com/channels/1130383047699738754/1319330910361096242/1319330910361096242 - [X] Fix aggregate cell height: https://discord.com/channels/1130383047699738754/1328749516488441997/1328749516488441997 - [X] Fix aggregate bar should extend fully to the right: https://discord.com/channels/1130383047699738754/1328750532193681569/1328750532193681569 - [X] Fix first aggregate cell should fully spread to the left: https://discord.com/channels/1130383047699738754/1326614678788374638/1326614678788374638
twentyhq · Jan 15, 2025 · f828e75 · f828e75
1 parent ff93fd3
commit f828e75
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 22 deletions.
diff --git a/...record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx b/...record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx
@@ -7,6 +7,7 @@ import { RecordBoardColumnHeaderAggregateDropdownMenuItem } from '@/object-recor
 import { aggregateOperationComponentState } from '@/object-record/record-board/record-board-column/states/aggregateOperationComponentState';
 import { availableFieldIdsForAggregateOperationComponentState } from '@/object-record/record-board/record-board-column/states/availableFieldIdsForAggregateOperationComponentState';
 import { getAggregateOperationLabel } from '@/object-record/record-board/record-board-column/utils/getAggregateOperationLabel';
+import { recordIndexKanbanAggregateOperationState } from '@/object-record/record-index/states/recordIndexKanbanAggregateOperationState';
 import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
 import { ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
 import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
@@ -17,8 +18,9 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useUpdateViewAggregate } from '@/views/hooks/useUpdateViewAggregate';
 import isEmpty from 'lodash.isempty';
+import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { IconChevronLeft } from 'twenty-ui';
+import { IconCheck, IconChevronLeft } from 'twenty-ui';
 
 export const RecordBoardColumnHeaderAggregateDropdownOptionsContent = ({
   availableAggregations,
@@ -50,6 +52,10 @@ export const RecordBoardColumnHeaderAggregateDropdownOptionsContent = ({
 
   const { updateViewAggregate } = useUpdateViewAggregate();
 
+  const recordIndexKanbanAggregateOperation = useRecoilValue(
+    recordIndexKanbanAggregateOperationState,
+  );
+
   return (
     <>
       <DropdownMenuHeader StartIcon={IconChevronLeft} onClick={resetContent}>
@@ -95,6 +101,14 @@ export const RecordBoardColumnHeaderAggregateDropdownOptionsContent = ({
                     ? false
                     : true
                 }
+                RightIcon={
+                  availableAggregationOperation ===
+                    AGGREGATE_OPERATIONS.count &&
+                  recordIndexKanbanAggregateOperation?.operation ===
+                    AGGREGATE_OPERATIONS.count
+                    ? IconCheck
+                    : undefined
+                }
               />
             ),
           )}

diff --git a/...t/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx b/...t/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx
@@ -15,7 +15,8 @@ const StyledTbody = styled.tbody`
       z-index: 5;
       transition: 0.3s ease;
     }
-    td:nth-of-type(3) {
+    tr:not(:last-child) td:nth-of-type(3) {
+      // Last row is aggregate footer
       position: sticky;
       left: 43px;
       z-index: 5;

diff --git a/...ont/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx b/...ont/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx
@@ -5,6 +5,8 @@ import { MOBILE_VIEWPORT, ThemeContext } from 'twenty-ui';
 
 import { isDefined } from '~/utils/isDefined';
 
+export const RECORD_TABLE_TD_WIDTH = '32px';
+
 const StyledTd = styled.td<{
   zIndex?: number;
   backgroundColor: string;
@@ -44,8 +46,8 @@ const StyledTd = styled.td<{
   ${({ freezeFirstColumns }) =>
     freezeFirstColumns
       ? `@media (max-width: ${MOBILE_VIEWPORT}px) {
-      width: 32px;
-      max-width: 32px;
+      width: ${RECORD_TABLE_TD_WIDTH};
+      max-width: ${RECORD_TABLE_TD_WIDTH};
     }`
       : ''}
 `;

diff --git a/.../object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx b/.../object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx
@@ -30,21 +30,8 @@ const StyledTableRow = styled.tr<{
     border-right-color: ${({ theme }) => theme.background.primary};
   }
   &.first-columns-sticky {
-    td:nth-of-type(1) {
-      position: sticky;
-      left: 0;
-      z-index: 5;
-      transition: 0.3s ease;
-    }
     td:nth-of-type(2) {
       position: sticky;
-      left: 11px;
-      z-index: 5;
-      transition: 0.3s ease;
-    }
-    td:nth-of-type(3) {
-      position: sticky;
-      left: 43px;
       z-index: 5;
       transition: 0.3s ease;
       &::after {
@@ -115,7 +102,6 @@ export const RecordTableAggregateFooter = ({
       endOfTableSticky={endOfTableSticky}
       hasHorizontalOverflow={hasHorizontalOverflow}
     >
-      <StyledTd />
       <StyledTd />
       {visibleTableColumns.map((column, index) => {
         return (
@@ -133,6 +119,9 @@ export const RecordTableAggregateFooter = ({
           </RecordTableColumnAggregateFooterCellContext.Provider>
         );
       })}
+      <td colSpan={visibleTableColumns.length - 1} />
+      <td />
+      <td />
     </StyledTableRow>
   );
 };
diff --git a/...ect-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx b/...ect-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx
@@ -11,6 +11,7 @@ const COLUMN_MIN_WIDTH = 104;
 
 const StyledColumnFooterCell = styled.td<{
   columnWidth: number;
+  isFirstCell?: boolean;
 }>`
   background-color: ${({ theme }) => theme.background.primary};
   color: ${({ theme }) => theme.font.color.tertiary};
@@ -74,6 +75,8 @@ export const RecordTableAggregateFooterCell = ({
         tableColumnsByKey[fieldMetadataId].size + 24,
         COLUMN_MIN_WIDTH,
       )}
+      colSpan={isFirstCell ? 2 : undefined}
+      isFirstCell={isFirstCell}
     >
       <StyledColumnFootContainer>
         <RecordTableColumnFooterWithDropdown

diff --git a/...record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx b/...record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx
@@ -1,4 +1,5 @@
 import { hasRecordGroupsComponentSelector } from '@/object-record/record-group/states/selectors/hasRecordGroupsComponentSelector';
+import { RECORD_TABLE_TD_WIDTH } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
 import { RecordTableColumnAggregateFooterCellContext } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterCellContext';
 import { RecordTableColumnAggregateFooterValue } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue';
 import { hasAggregateOperationForViewFieldFamilySelector } from '@/object-record/record-table/record-table-footer/states/hasAggregateOperationForViewFieldFamilySelector';
@@ -10,19 +11,19 @@ import { useContext, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { IconChevronDown } from 'twenty-ui';
 
-const StyledCell = styled.div<{ isUnfolded: boolean }>`
+const StyledCell = styled.div<{ isUnfolded: boolean; isFirstCell: boolean }>`
   align-items: center;
   display: flex;
   flex-direction: row;
   flex-shrink: 0;
   font-weight: ${({ theme }) => theme.font.weight.medium};
 
   gap: ${({ theme }) => theme.spacing(1)};
-  height: ${({ theme }) => theme.spacing(7)};
+  height: ${({ theme }) => theme.spacing(8)};
   justify-content: space-between;
   min-width: ${({ theme }) => theme.spacing(7)};
   flex-grow: 1;
-  width: 100%;
+  max-width: 100%;
 
   background: ${({ theme, isUnfolded }) =>
     isUnfolded ? theme.background.transparent.light : theme.background.primary};
@@ -33,6 +34,12 @@ const StyledCell = styled.div<{ isUnfolded: boolean }>`
         ? theme.background.transparent.medium
         : theme.background.transparent.light};
   }
+
+  ${({ isFirstCell }) =>
+    isFirstCell &&
+    `
+    padding-left: ${RECORD_TABLE_TD_WIDTH};
+  `}
 `;
 
 const StyledIcon = styled(IconChevronDown)`
@@ -76,7 +83,7 @@ export const RecordTableColumnAggregateFooterValueCell = ({
       }}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <StyledCell isUnfolded={isDropdownOpen}>
+      <StyledCell isUnfolded={isDropdownOpen} isFirstCell={isFirstCell}>
         {isHovered ||
         isDropdownOpen ||
         hasAggregateOperationForViewField ||