Load empty board if view type is kanban (#3605)

* Load empty board if view type is kanban

* Fix tests

* Revert

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx

@@ -1,19 +1,19 @@
+import { useState } from 'react';
 import styled from '@emotion/styled';
 
 import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport';
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
-import { RecordUpdateHookParams } from '@/object-record/field/contexts/FieldContext';
-import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
-import { RecordTableEffect } from '@/object-record/record-index/components/RecordTableEffect';
-import { RecordTableWithWrappers } from '@/object-record/record-table/components/RecordTableWithWrappers';
+import { RecordIndexTableContainer } from '@/object-record/record-index/components/RecordIndexTableContainer';
+import { RecordIndexViewInitEffect } from '@/object-record/record-index/components/RecordIndexViewInitEffect';
 import { TableOptionsDropdownId } from '@/object-record/record-table/constants/TableOptionsDropdownId';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { TableOptionsDropdown } from '@/object-record/record-table/options/components/TableOptionsDropdown';
 import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport';
 import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
 import { ViewBar } from '@/views/components/ViewBar';
+import { ViewType } from '@/views/types/ViewType';
 import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
 import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
 import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
@@ -26,15 +26,21 @@ const StyledContainer = styled.div`
   padding-left: ${({ theme }) => theme.table.horizontalCellPadding};
 `;
 
-export const RecordIndexContainer = ({
-  recordTableId,
-  objectNamePlural,
-  createRecord,
-}: {
-  recordTableId: string;
+type RecordIndexContainerProps = {
+  recordIndexId: string;
   objectNamePlural: string;
-  createRecord: () => void;
-}) => {
+  createRecord: () => Promise<void>;
+};
+
+export const RecordIndexContainer = ({
+  createRecord,
+  recordIndexId,
+  objectNamePlural,
+}: RecordIndexContainerProps) => {
+  const [recordIndexViewType, setRecordIndexViewType] = useState<
+    ViewType | undefined
+  >(undefined);
+
   const { objectNameSingular } = useObjectNameSingularFromPlural({
     objectNamePlural,
   });
@@ -46,26 +52,13 @@ export const RecordIndexContainer = ({
   const { columnDefinitions } =
     useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
 
-  const { updateOneRecord } = useUpdateOneRecord({
-    objectNameSingular,
-  });
-
   const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport();
   const { openCompanySpreadsheetImport } = useSpreadsheetCompanyImport();
 
-  const viewBarId = objectNamePlural ?? '';
-
   const { setTableFilters, setTableSorts, setTableColumns } = useRecordTable({
-    recordTableId,
+    recordTableId: recordIndexId,
   });
 
-  const updateEntity = ({ variables }: RecordUpdateHookParams) => {
-    updateOneRecord?.({
-      idToUpdate: variables.where.id as string,
-      updateOneRecordInput: variables.updateOneRecordInput,
-    });
-  };
-
   const handleImport = () => {
     const openImport =
       objectNamePlural === 'companies'
@@ -78,12 +71,12 @@ export const RecordIndexContainer = ({
     <StyledContainer>
       <SpreadsheetImportProvider>
         <ViewBar
-          viewBarId={viewBarId}
+          viewBarId={recordIndexId}
           optionsDropdownButton={
             <TableOptionsDropdown
-              recordTableId={recordTableId}
+              recordTableId={recordIndexId}
               onImport={
-                ['companies', 'people'].includes(recordTableId)
+                ['companies', 'people'].includes(recordIndexId)
                   ? handleImport
                   : undefined
               }
@@ -101,19 +94,22 @@ export const RecordIndexContainer = ({
           onViewSortsChange={(viewSorts) => {
             setTableSorts(mapViewSortsToSorts(viewSorts));
           }}
+          onViewTypeChange={(viewType: ViewType) => {
+            setRecordIndexViewType(viewType);
+          }}
         />
       </SpreadsheetImportProvider>
-      <RecordTableEffect
+      {recordIndexViewType === ViewType.Table && (
+        <RecordIndexTableContainer
+          recordTableId={recordIndexId}
+          viewBarId={recordIndexId}
+          objectNamePlural={objectNamePlural}
+          createRecord={createRecord}
+        />
+      )}
+      <RecordIndexViewInitEffect
         objectNamePlural={objectNamePlural}
-        recordTableId={recordTableId}
-        viewBarId={viewBarId}
-      />
-      <RecordTableWithWrappers
-        recordTableId={recordTableId}
-        objectNamePlural={objectNamePlural}
-        viewBarId={viewBarId}
-        updateRecordMutation={updateEntity}
-        createRecord={createRecord}
+        viewBarId={recordIndexId}
       />
     </StyledContainer>
   );

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainer.tsx

@@ -0,0 +1,55 @@
+import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
+import { RecordUpdateHookParams } from '@/object-record/field/contexts/FieldContext';
+import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import { RecordTableEffect } from '@/object-record/record-index/components/RecordTableEffect';
+import { RecordTableActionBar } from '@/object-record/record-table/action-bar/components/RecordTableActionBar';
+import { RecordTableWithWrappers } from '@/object-record/record-table/components/RecordTableWithWrappers';
+import { RecordTableContextMenu } from '@/object-record/record-table/context-menu/components/RecordTableContextMenu';
+
+type RecordIndexTableContainerProps = {
+  recordTableId: string;
+  viewBarId: string;
+  objectNamePlural: string;
+  createRecord: () => Promise<void>;
+};
+
+export const RecordIndexTableContainer = ({
+  recordTableId,
+  viewBarId,
+  objectNamePlural,
+  createRecord,
+}: RecordIndexTableContainerProps) => {
+  const { objectNameSingular } = useObjectNameSingularFromPlural({
+    objectNamePlural,
+  });
+
+  const { updateOneRecord } = useUpdateOneRecord({
+    objectNameSingular,
+  });
+
+  const updateEntity = ({ variables }: RecordUpdateHookParams) => {
+    updateOneRecord?.({
+      idToUpdate: variables.where.id as string,
+      updateOneRecordInput: variables.updateOneRecordInput,
+    });
+  };
+
+  return (
+    <>
+      <RecordTableEffect
+        objectNamePlural={objectNamePlural}
+        recordTableId={recordTableId}
+        viewBarId={viewBarId}
+      />
+      <RecordTableWithWrappers
+        recordTableId={recordTableId}
+        objectNamePlural={objectNamePlural}
+        viewBarId={viewBarId}
+        updateRecordMutation={updateEntity}
+        createRecord={createRecord}
+      />
+      <RecordTableActionBar recordTableId={recordTableId} />
+      <RecordTableContextMenu recordTableId={recordTableId} />
+    </>
+  );
+};

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexViewInitEffect.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+
+import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
+import { useViewBar } from '@/views/hooks/useViewBar';
+
+export const RecordIndexViewInitEffect = ({
+  objectNamePlural,
+  viewBarId,
+}: {
+  objectNamePlural: string;
+  viewBarId: string;
+}) => {
+  const { objectNameSingular } = useObjectNameSingularFromPlural({
+    objectNamePlural,
+  });
+
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular,
+  });
+
+  const { columnDefinitions, filterDefinitions, sortDefinitions } =
+    useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
+
+  const {
+    setViewObjectMetadataId,
+    setAvailableSortDefinitions,
+    setAvailableFilterDefinitions,
+    setAvailableFieldDefinitions,
+  } = useViewBar({ viewBarId });
+
+  useEffect(() => {
+    if (!objectMetadataItem) {
+      return;
+    }
+    setViewObjectMetadataId?.(objectMetadataItem.id);
+    setAvailableSortDefinitions?.(sortDefinitions);
+    setAvailableFilterDefinitions?.(filterDefinitions);
+    setAvailableFieldDefinitions?.(columnDefinitions);
+  }, [
+    setViewObjectMetadataId,
+    objectMetadataItem,
+    setAvailableSortDefinitions,
+    sortDefinitions,
+    setAvailableFilterDefinitions,
+    filterDefinitions,
+    setAvailableFieldDefinitions,
+    columnDefinitions,
+  ]);
+
+  return <></>;
+};

packages/twenty-front/src/modules/object-record/record-index/components/RecordTableEffect.tsx

@@ -7,7 +7,6 @@ import { useRecordTableContextMenuEntries } from '@/object-record/hooks/useRecor
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
 import { useViewBar } from '@/views/hooks/useViewBar';
-import { ViewType } from '@/views/types/ViewType';
 
 export const RecordTableEffect = ({
   objectNamePlural,
@@ -39,14 +38,9 @@ export const RecordTableEffect = ({
   const { columnDefinitions, filterDefinitions, sortDefinitions } =
     useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
 
-  const {
-    setAvailableSortDefinitions,
-    setAvailableFilterDefinitions,
-    setAvailableFieldDefinitions,
-    setViewType,
-    setViewObjectMetadataId,
-    setEntityCountInCurrentView,
-  } = useViewBar({ viewBarId });
+  const { setEntityCountInCurrentView } = useViewBar({
+    viewBarId,
+  });
 
   useEffect(() => {
     if (basePathToShowPage && labelIdentifierFieldMetadata) {
@@ -63,28 +57,13 @@ export const RecordTableEffect = ({
   ]);
 
   useEffect(() => {
-    if (!objectMetadataItem) {
-      return;
-    }
-    setViewObjectMetadataId?.(objectMetadataItem.id);
-    setViewType?.(ViewType.Table);
-
-    setAvailableSortDefinitions?.(sortDefinitions);
-    setAvailableFilterDefinitions?.(filterDefinitions);
-    setAvailableFieldDefinitions?.(columnDefinitions);
-
     const availableTableColumns = columnDefinitions.filter(
       filterAvailableTableColumns,
     );
 
     setAvailableTableColumns(availableTableColumns);
   }, [
-    setViewObjectMetadataId,
-    setViewType,
     columnDefinitions,
-    setAvailableSortDefinitions,
-    setAvailableFilterDefinitions,
-    setAvailableFieldDefinitions,
     objectMetadataItem,
     sortDefinitions,
     filterDefinitions,

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

@@ -70,7 +70,7 @@ type RecordTableWithWrappersProps = {
   recordTableId: string;
   viewBarId: string;
   updateRecordMutation: (params: any) => void;
-  createRecord: () => void;
+  createRecord: () => Promise<void>;
 };
 
 export const RecordTableWithWrappers = ({