feat: Add seed people and companies data for demo environment (#2207) (#2307)

* feat: seed companies and people data

* init DataSeedDemoWorkspaceCommand to handle:
- seedCoreSchema()
- seedMetadataSchema()

* feature: Seed workspace with demo data

- delete workspace
- initDemo() with prefillWorkspaceWithDemoObjects()

* added companies-demo.ts with data
* added people-demo.ts with data

* added workspaceId to seedFeatureFlags()

* delete previous CoreSchema before seedCoreSchema

* added workspaceMemberPrefillData

* getDemoWorkspaces() to get DEMO_WORKSPACES from config

* defined DemoSeedUserIds

- created core/demo/ to keep modified seedCoreSchema() there
- DemoSeedUserIds with new set of users and Ids

* generateOpportunities() to seed demo opportunities (limit = 50)

* Code review and fixes

* Fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/object-record/hooks/useFindManyRecords.ts

@@ -142,6 +142,23 @@ export const useFindManyRecords = <
                 ...fetchMoreResult?.[objectMetadataItem.namePlural]?.edges,
               ]);
             }
+            onCompleted?.({
+              __typename: `${capitalize(
+                objectMetadataItem.nameSingular,
+              )}Connection`,
+              edges: newEdges,
+              pageInfo:
+                fetchMoreResult?.[objectMetadataItem.namePlural].pageInfo,
+            });
+
+            if (data?.[objectMetadataItem.namePlural]) {
+              setLastCursor(
+                data?.[objectMetadataItem.namePlural]?.pageInfo.endCursor,
+              );
+              setHasNextPage(
+                data?.[objectMetadataItem.namePlural]?.pageInfo.hasNextPage,
+              );
+            }
 
             return Object.assign({}, prev, {
               [objectMetadataItem.namePlural]: {
@@ -171,13 +188,18 @@ export const useFindManyRecords = <
       }
     }
   }, [
-    lastCursor,
+    hasNextPage,
+    setIsFetchingMoreObjects,
     fetchMore,
     filter,
     orderBy,
-    objectMetadataItem,
-    hasNextPage,
-    setIsFetchingMoreObjects,
+    lastCursor,
+    objectMetadataItem.namePlural,
+    objectMetadataItem.nameSingular,
+    onCompleted,
+    data,
+    setLastCursor,
+    setHasNextPage,
     enqueueSnackBar,
   ]);
 

front/src/modules/ui/layout/page/DefaultLayout.tsx

@@ -44,6 +44,7 @@ const StyledPageContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: row;
+  height: 100vh;
 `;
 
 const StyledMainContainer = styled.div`

front/src/modules/ui/layout/page/RightDrawerContainer.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 
+import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/PageHeader';
 import { RightDrawer } from '@/ui/layout/right-drawer/components/RightDrawer';
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 
@@ -16,7 +17,9 @@ const StyledMainContainer = styled.div`
   display: flex;
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(2)};
-  height: 100%;
+  height: calc(
+    100% - ${({ theme }) => theme.spacing(5)} - ${PAGE_BAR_MIN_HEIGHT}px
+  );
   padding-bottom: ${({ theme }) => theme.spacing(3)};
   padding-right: ${({ theme }) => theme.spacing(3)};
   width: 100%;

front/src/modules/ui/object/record-table/components/RecordTable.tsx

@@ -2,6 +2,7 @@ import { useRef } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilCallback } from 'recoil';
 
+import { RecordTableBodyEffect } from '@/ui/object/record-table/components/RecordTableBodyEffect';
 import { RecordTableHeader } from '@/ui/object/record-table/components/RecordTableHeader';
 import { RecordTableInternalEffect } from '@/ui/object/record-table/components/RecordTableInternalEffect';
 import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
@@ -108,6 +109,7 @@ export const RecordTable = ({
               <div ref={tableBodyRef}>
                 <StyledTable className="entity-table-cell">
                   <RecordTableHeader createRecord={createRecord} />
+                  <RecordTableBodyEffect />
                   <RecordTableBody />
                 </StyledTable>
                 <DragSelect

front/src/modules/ui/object/record-table/components/RecordTableBody.tsx

@@ -1,10 +1,9 @@
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
-import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
 import {
   RecordTableRow,
@@ -12,8 +11,8 @@ import {
 } from '@/ui/object/record-table/components/RecordTableRow';
 import { RowIdContext } from '@/ui/object/record-table/contexts/RowIdContext';
 import { RowIndexContext } from '@/ui/object/record-table/contexts/RowIndexContext';
+import { useRecordTableScopedStates } from '@/ui/object/record-table/hooks/internal/useRecordTableScopedStates';
 import { isFetchingRecordTableDataState } from '@/ui/object/record-table/states/isFetchingRecordTableDataState';
-import { isDefined } from '~/utils/isDefined';
 
 import { useRecordTable } from '../hooks/useRecordTable';
 import { tableRowIdsState } from '../states/tableRowIdsState';
@@ -24,6 +23,8 @@ export const RecordTableBody = () => {
   const tableRowIds = useRecoilValue(tableRowIdsState);
 
   const { scopeId: objectNamePlural } = useRecordTable();
+  const { tableLastRowVisibleState } = useRecordTableScopedStates();
+  const setTableLastRowVisible = useSetRecoilState(tableLastRowVisibleState);
 
   const { objectNameSingular } = useObjectNameSingularFromPlural({
     objectNamePlural,
@@ -42,17 +43,11 @@ export const RecordTableBody = () => {
   const isFetchingRecordTableData = useRecoilValue(
     isFetchingRecordTableDataState,
   );
-
-  // Todo, move this to an effect to not trigger many re-renders
-  const { fetchMoreRecords: fetchMoreObjects } = useObjectRecordTable();
+  const lastRowId = tableRowIds[tableRowIds.length - 1];
 
   useEffect(() => {
-    if (lastTableRowIsVisible && isDefined(fetchMoreObjects)) {
-      fetchMoreObjects();
-    }
-  }, [lastTableRowIsVisible, fetchMoreObjects]);
-
-  const lastRowId = tableRowIds[tableRowIds.length - 1];
+    setTableLastRowVisible(lastTableRowIsVisible);
+  }, [lastTableRowIsVisible, setTableLastRowVisible]);
 
   if (isFetchingRecordTableData) {
     return <></>;

front/src/modules/ui/object/record-table/components/RecordTableBodyEffect.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable';
+import { useRecordTableScopedStates } from '@/ui/object/record-table/hooks/internal/useRecordTableScopedStates';
+import { isDefined } from '~/utils/isDefined';
+
+export const RecordTableBodyEffect = () => {
+  const { fetchMoreRecords: fetchMoreObjects } = useObjectRecordTable();
+  const { tableLastRowVisibleState } = useRecordTableScopedStates();
+  const tableLastRowVisible = useRecoilValue(tableLastRowVisibleState);
+
+  useEffect(() => {
+    if (tableLastRowVisible && isDefined(fetchMoreObjects)) {
+      fetchMoreObjects();
+    }
+  }, [fetchMoreObjects, tableLastRowVisible]);
+
+  return <></>;
+};

front/src/modules/ui/object/record-table/hooks/internal/useRecordTableScopedStates.ts

@@ -24,6 +24,7 @@ export const useRecordTableScopedStates = (args?: {
     visibleTableColumnsSelector,
     onEntityCountChangeState,
     onColumnsChangeState,
+    tableLastRowVisibleState,
   } = getRecordTableScopedStates({
     recordTableScopeId: scopeId,
   });
@@ -40,5 +41,6 @@ export const useRecordTableScopedStates = (args?: {
     visibleTableColumnsSelector,
     onEntityCountChangeState,
     onColumnsChangeState,
+    tableLastRowVisibleState,
   };
 };

front/src/modules/ui/object/record-table/states/tableLastRowVisibleScopedState.ts

@@ -0,0 +1,6 @@
+import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+
+export const tableLastRowVisibleScopedState = createScopedState<boolean>({
+  key: 'tableLastRowVisibleScopedState',
+  defaultValue: false,
+});

front/src/modules/ui/object/record-table/utils/getRecordTableScopedStates.ts

@@ -1,4 +1,5 @@
 import { objectMetadataConfigScopedState } from '@/ui/object/record-table/states/objectMetadataConfigScopedState';
+import { tableLastRowVisibleScopedState } from '@/ui/object/record-table/states/tableLastRowVisibleScopedState';
 import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
 
 import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
@@ -61,6 +62,11 @@ export const getRecordTableScopedStates = ({
     recordTableScopeId,
   );
 
+  const tableLastRowVisibleState = getScopedState(
+    tableLastRowVisibleScopedState,
+    recordTableScopeId,
+  );
+
   return {
     availableTableColumnsState,
     tableFiltersState,
@@ -72,5 +78,6 @@ export const getRecordTableScopedStates = ({
     visibleTableColumnsSelector,
     onColumnsChangeState,
     onEntityCountChangeState,
+    tableLastRowVisibleState,
   };
 };