[fast follows] - improve rest api documentation, fix add new button being considered in drag, fix grip color (#13709)

as per title

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

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

@@ -1,5 +1,4 @@
 import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPermissionsForObject';
-import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useCreateNewIndexRecord } from '@/object-record/record-table/hooks/useCreateNewIndexRecord';
 import { RecordTableActionRow } from '@/object-record/record-table/record-table-row/components/RecordTableActionRow';
@@ -11,10 +10,6 @@ import { IconPlus } from 'twenty-ui/display';
 export const RecordTableAddNew = () => {
   const { objectMetadataItem } = useRecordTableContextOrThrow();
 
-  const recordIds = useRecoilComponentValue(
-    recordIndexAllRecordIdsComponentSelector,
-  );
-
   const hasRecordTableFetchedAllRecords = useRecoilComponentValue(
     hasRecordTableFetchedAllRecordsComponentState,
   );
@@ -35,15 +30,13 @@ export const RecordTableAddNew = () => {
 
   return (
     <RecordTableActionRow
-      draggableId="add-new-record"
-      draggableIndex={recordIds.length + 1}
-      LeftIcon={IconPlus}
-      text={t`Add new`}
       onClick={() => {
         createNewIndexRecord({
           position: 'last',
         });
       }}
+      LeftIcon={IconPlus}
+      text={t`Add New`}
     />
   );
 };

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

@@ -28,9 +28,9 @@ export const RecordTableNoRecordGroupRows = () => {
           />
         );
       })}
-      <RecordTableAddNew />
       <RecordTableBodyFetchMoreLoader />
       <RecordTableBodyDroppablePlaceholder />
+      <RecordTableAddNew />
       {!isRecordTableInitialLoading && allRecordIds.length > 0 && (
         <RecordTableAggregateFooter />
       )}

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

@@ -56,9 +56,9 @@ export const RecordTableRecordGroupRows = () => {
           />
         );
       })}
+      <RecordTableBodyDroppablePlaceholder />
       <RecordTableRecordGroupSectionLoadMore />
       <RecordTableRecordGroupSectionAddNew />
-      <RecordTableBodyDroppablePlaceholder />
       <RecordTableAggregateFooter
         key={currentRecordGroupId}
         currentRecordGroupId={currentRecordGroupId}

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

@@ -24,6 +24,9 @@ const StyledContainer = styled.div`
 const StyledIconWrapper = styled.div<{ isDragging: boolean }>`
   opacity: ${({ isDragging }) => (isDragging ? 1 : 0)};
   transition: opacity 0.1s;
+  svg path {
+    fill: ${({ theme }) => theme.border.color.strong};
+  }
 `;
 
 export const RecordTableCellGrip = () => {

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

@@ -1,22 +1,31 @@
 import styled from '@emotion/styled';
 
+import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
-import { RecordTableDraggableTr } from '@/object-record/record-table/record-table-row/components/RecordTableDraggableTr';
 import { useTheme } from '@emotion/react';
 import { type IconComponent } from 'twenty-ui/display';
 
-const StyledRecordTableDraggableTr = styled(RecordTableDraggableTr)`
+const StyledRecordTableDraggableTr = styled.tr`
   cursor: pointer;
   transition: background-color ${({ theme }) => theme.animation.duration.fast}
     ease-in-out;
+  border: none;
+  background: ${({ theme }) => theme.background.primary};
+  position: relative;
+  z-index: ${TABLE_Z_INDEX.base};
 
   &:hover {
-    background-color: ${({ theme }) => theme.background.transparent.light};
+    td:not(:first-of-type) {
+      background-color: ${({ theme }) => theme.background.transparent.light};
+    }
   }
 
   td {
     border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+    background-color: ${({ theme }) => theme.background.primary};
+    transition: background-color ${({ theme }) => theme.animation.duration.fast}
+      ease-in-out;
 
     &:first-of-type {
       border-bottom: 1px solid ${({ theme }) => theme.background.primary};
@@ -49,16 +58,12 @@ const StyledText = styled.span`
 `;
 
 type RecordTableActionRowProps = {
-  draggableId: string;
-  draggableIndex: number;
   LeftIcon: IconComponent;
   text: string;
   onClick?: (event?: React.MouseEvent<HTMLTableRowElement>) => void;
 };
 
 export const RecordTableActionRow = ({
-  draggableId,
-  draggableIndex,
   LeftIcon,
   text,
   onClick,
@@ -68,13 +73,7 @@ export const RecordTableActionRow = ({
   const { visibleTableColumns } = useRecordTableContextOrThrow();
 
   return (
-    <StyledRecordTableDraggableTr
-      recordId={draggableId}
-      draggableIndex={draggableIndex}
-      focusIndex={draggableIndex}
-      onClick={onClick}
-      isDragDisabled
-    >
+    <StyledRecordTableDraggableTr onClick={onClick}>
       <td aria-hidden />
       <StyledIconContainer>
         <LeftIcon

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

@@ -1,11 +1,9 @@
 import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPermissionsForObject';
 import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
-import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useCreateNewIndexRecord } from '@/object-record/record-table/hooks/useCreateNewIndexRecord';
 import { RecordTableActionRow } from '@/object-record/record-table/record-table-row/components/RecordTableActionRow';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { t } from '@lingui/core/macro';
 import { useRecoilValue } from 'recoil';
 import { IconPlus } from 'twenty-ui/display';
@@ -15,10 +13,6 @@ export const RecordTableRecordGroupSectionAddNew = () => {
 
   const currentRecordGroupId = useCurrentRecordGroupId();
 
-  const recordIds = useRecoilComponentValue(
-    recordIndexAllRecordIdsComponentSelector,
-  );
-
   const recordGroup = useRecoilValue(
     recordGroupDefinitionFamilyState(currentRecordGroupId),
   );
@@ -43,8 +37,6 @@ export const RecordTableRecordGroupSectionAddNew = () => {
 
   return (
     <RecordTableActionRow
-      draggableId={`add-new-record-${currentRecordGroupId}`}
-      draggableIndex={recordIds.length + 2}
       LeftIcon={IconPlus}
       text={t`Add new`}
       onClick={() => {

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

@@ -1,11 +1,9 @@
 import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
 import { useRecordIndexTableFetchMore } from '@/object-record/record-index/hooks/useRecordIndexTableFetchMore';
 import { recordIndexHasFetchedAllRecordsByGroupComponentState } from '@/object-record/record-index/states/recordIndexHasFetchedAllRecordsByGroupComponentState';
-import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableActionRow } from '@/object-record/record-table/record-table-row/components/RecordTableActionRow';
 import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { IconArrowDown } from 'twenty-ui/display';
 
 export const RecordTableRecordGroupSectionLoadMore = () => {
@@ -21,10 +19,6 @@ export const RecordTableRecordGroupSectionLoadMore = () => {
     currentRecordGroupId,
   );
 
-  const recordIds = useRecoilComponentValue(
-    recordIndexAllRecordIdsComponentSelector,
-  );
-
   const handleLoadMore = () => {
     fetchMoreRecordsLazy();
   };
@@ -35,8 +29,6 @@ export const RecordTableRecordGroupSectionLoadMore = () => {
 
   return (
     <RecordTableActionRow
-      draggableId={`load-more-records-${currentRecordGroupId}`}
-      draggableIndex={recordIds.length + 1}
       LeftIcon={IconArrowDown}
       text="Load more"
       onClick={handleLoadMore}

packages/twenty-server/src/engine/core-modules/open-api/utils/components.utils.ts

@@ -415,8 +415,10 @@ export const computeMetadataSchemaComponents = (
               operations: {
                 type: 'array',
                 items: { type: 'string' },
+                default: [],
               },
               description: { type: 'string' },
+              secret: { type: 'string' },
             },
           };
           schemas[`${capitalize(item.nameSingular)}ForResponse`] = {
@@ -430,6 +432,7 @@ export const computeMetadataSchemaComponents = (
                 items: { type: 'string' },
               },
               description: { type: 'string' },
+              secret: { type: 'string' },
               workspaceId: { type: 'string', format: 'uuid' },
               createdAt: { type: 'string', format: 'date-time' },
               updatedAt: { type: 'string', format: 'date-time' },
@@ -453,8 +456,9 @@ export const computeMetadataSchemaComponents = (
             properties: {
               name: { type: 'string' },
               expiresAt: { type: 'string', format: 'date-time' },
+              roleId: { type: 'string', format: 'uuid' },
             },
-            required: ['name', 'expiresAt'],
+            required: ['name', 'expiresAt', 'roleId'],
           };
           schemas[`${capitalize(item.namePlural)}`] = {
             type: 'array',
@@ -469,7 +473,12 @@ export const computeMetadataSchemaComponents = (
             properties: {
               name: { type: 'string' },
               expiresAt: { type: 'string', format: 'date-time' },
-              revokedAt: { type: 'string', format: 'date-time' },
+              revokedAt: {
+                type: 'string',
+                format: 'date-time',
+                description:
+                  'Set to null to clear revocation. Defaults to null if not provided.',
+              },
             },
           };
           schemas[`${capitalize(item.nameSingular)}ForResponse`] = {
@@ -480,6 +489,7 @@ export const computeMetadataSchemaComponents = (
               name: { type: 'string' },
               expiresAt: { type: 'string', format: 'date-time' },
               revokedAt: { type: 'string', format: 'date-time' },
+              roleId: { type: 'string', format: 'uuid' },
               workspaceId: { type: 'string', format: 'uuid' },
               createdAt: { type: 'string', format: 'date-time' },
               updatedAt: { type: 'string', format: 'date-time' },