Refactor/remove react table (#642)

* Refactored tables without tan stack
* Fixed checkbox behavior with multiple handlers on click
* Fixed hotkeys scope
* Fix debounce in editable cells
* Lowered coverage

---------

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

front/src/modules/companies/table/components/CompanyEntityTableData.tsx

@@ -0,0 +1,50 @@
+import { useRecoilState } from 'recoil';
+
+import { defaultOrderBy } from '@/companies/services';
+import { isFetchingEntityTableDataState } from '@/ui/tables/states/isFetchingEntityTableDataState';
+import { tableRowIdsState } from '@/ui/tables/states/tableRowIdsState';
+import {
+  PersonOrderByWithRelationInput,
+  useGetCompaniesQuery,
+} from '~/generated/graphql';
+
+import { useSetCompanyEntityTable } from '../hooks/useSetCompanyEntityTable';
+
+export function CompanyEntityTableData({
+  orderBy = defaultOrderBy,
+  whereFilters,
+}: {
+  orderBy?: PersonOrderByWithRelationInput[];
+  whereFilters?: any;
+}) {
+  const [, setTableRowIds] = useRecoilState(tableRowIdsState);
+
+  const [, setIsFetchingEntityTableData] = useRecoilState(
+    isFetchingEntityTableDataState,
+  );
+
+  const setCompanyEntityTable = useSetCompanyEntityTable();
+
+  useGetCompaniesQuery({
+    variables: { orderBy, where: whereFilters },
+    onCompleted: (data) => {
+      const companies = data.companies ?? [];
+
+      const companyIds = companies.map((company) => company.id);
+
+      setTableRowIds((currentRowIds) => {
+        if (JSON.stringify(currentRowIds) !== JSON.stringify(companyIds)) {
+          return companyIds;
+        }
+
+        return currentRowIds;
+      });
+
+      setCompanyEntityTable(companies);
+
+      setIsFetchingEntityTableData(false);
+    },
+  });
+
+  return <></>;
+}

front/src/modules/companies/table/components/EditableCompanyAccountOwnerCell.tsx

@@ -0,0 +1,25 @@
+import { useRecoilValue } from 'recoil';
+
+import { CompanyAccountOwnerCell } from '@/companies/components/CompanyAccountOwnerCell';
+import { companyAccountOwnerFamilyState } from '@/companies/states/companyAccountOwnerFamilyState';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+
+export function EditableCompanyAccountOwnerCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const accountOwner = useRecoilValue(
+    companyAccountOwnerFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <CompanyAccountOwnerCell
+      company={{
+        id: currentRowEntityId ?? '',
+        accountOwner: {
+          displayName: accountOwner?.displayName ?? '',
+          id: accountOwner?.id ?? '',
+        },
+      }}
+    />
+  );
+}

front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx

@@ -0,0 +1,32 @@
+import { useRecoilValue } from 'recoil';
+
+import { companyAddressFamilyState } from '@/companies/states/companyAddressFamilyState';
+import { EditableCellText } from '@/ui/components/editable-cell/types/EditableCellText';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdateCompanyMutation } from '~/generated/graphql';
+
+export function EditableCompanyAddressCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updateCompany] = useUpdateCompanyMutation();
+
+  const address = useRecoilValue(
+    companyAddressFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <EditableCellText
+      value={address ?? ''}
+      onChange={async (newAddress: string) => {
+        if (!currentRowEntityId) return;
+
+        await updateCompany({
+          variables: {
+            id: currentRowEntityId,
+            address: newAddress,
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/companies/table/components/EditableCompanyCreatedAtCell.tsx

@@ -0,0 +1,33 @@
+import { DateTime } from 'luxon';
+import { useRecoilValue } from 'recoil';
+
+import { companyCreatedAtFamilyState } from '@/companies/states/companyCreatedAtFamilyState';
+import { EditableCellDate } from '@/ui/components/editable-cell/types/EditableCellDate';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdateCompanyMutation } from '~/generated/graphql';
+
+export function EditableCompanyCreatedAtCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const createdAt = useRecoilValue(
+    companyCreatedAtFamilyState(currentRowEntityId ?? ''),
+  );
+
+  const [updateCompany] = useUpdateCompanyMutation();
+
+  return (
+    <EditableCellDate
+      onChange={async (newDate: Date) => {
+        if (!currentRowEntityId) return;
+
+        await updateCompany({
+          variables: {
+            id: currentRowEntityId,
+            createdAt: newDate.toISOString(),
+          },
+        });
+      }}
+      value={createdAt ? DateTime.fromISO(createdAt).toJSDate() : new Date()}
+    />
+  );
+}

front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx

@@ -0,0 +1,32 @@
+import { useRecoilValue } from 'recoil';
+
+import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
+import { EditableCellText } from '@/ui/components/editable-cell/types/EditableCellText';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdateCompanyMutation } from '~/generated/graphql';
+
+export function EditableCompanyDomainNameCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updateCompany] = useUpdateCompanyMutation();
+
+  const name = useRecoilValue(
+    companyDomainNameFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <EditableCellText
+      value={name ?? ''}
+      onChange={async (domainName: string) => {
+        if (!currentRowEntityId) return;
+
+        await updateCompany({
+          variables: {
+            id: currentRowEntityId,
+            domainName: domainName,
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx

@@ -0,0 +1,33 @@
+import { useRecoilValue } from 'recoil';
+
+import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState';
+import { EditableCellText } from '@/ui/components/editable-cell/types/EditableCellText';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdateCompanyMutation } from '~/generated/graphql';
+
+export function EditableCompanyEmployeesCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updateCompany] = useUpdateCompanyMutation();
+
+  const employees = useRecoilValue(
+    companyEmployeesFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    // TODO: Create an EditableCellNumber component
+    <EditableCellText
+      value={employees ?? ''}
+      onChange={async (newEmployees: string) => {
+        if (!currentRowEntityId) return;
+
+        await updateCompany({
+          variables: {
+            id: currentRowEntityId,
+            employees: parseInt(newEmployees),
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/companies/table/components/EditableCompanyNameCell.tsx

@@ -0,0 +1,32 @@
+import { useRecoilValue } from 'recoil';
+
+import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
+import { companyCommentCountFamilyState } from '@/companies/states/companyCommentCountFamilyState';
+import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
+import { companyNameFamilyState } from '@/companies/states/companyNameFamilyState';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+
+export function EditableCompanyNameCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const name = useRecoilValue(companyNameFamilyState(currentRowEntityId ?? ''));
+
+  const domainName = useRecoilValue(
+    companyDomainNameFamilyState(currentRowEntityId ?? ''),
+  );
+
+  const commentCount = useRecoilValue(
+    companyCommentCountFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <CompanyEditableNameChipCell
+      company={{
+        id: currentRowEntityId ?? '',
+        name: name ?? '',
+        domainName: domainName ?? '',
+        _commentThreadCount: commentCount ?? 0,
+      }}
+    />
+  );
+}

front/src/modules/companies/table/components/companyColumns.tsx

@@ -0,0 +1,61 @@
+import { TableColumn } from '@/people/table/components/peopleColumns';
+import {
+  IconBuildingSkyscraper,
+  IconCalendarEvent,
+  IconLink,
+  IconMap,
+  IconUser,
+  IconUsers,
+} from '@/ui/icons/index';
+
+import { EditableCompanyAccountOwnerCell } from './EditableCompanyAccountOwnerCell';
+import { EditableCompanyAddressCell } from './EditableCompanyAddressCell';
+import { EditableCompanyCreatedAtCell } from './EditableCompanyCreatedAtCell';
+import { EditableCompanyDomainNameCell } from './EditableCompanyDomainNameCell';
+import { EditableCompanyEmployeesCell } from './EditableCompanyEmployeesCell';
+import { EditableCompanyNameCell } from './EditableCompanyNameCell';
+
+export const companyColumns: TableColumn[] = [
+  {
+    id: 'name',
+    title: 'Name',
+    icon: <IconBuildingSkyscraper size={16} />,
+    size: 180,
+    cellComponent: <EditableCompanyNameCell />,
+  },
+  {
+    id: 'domainName',
+    title: 'URL',
+    icon: <IconLink size={16} />,
+    size: 100,
+    cellComponent: <EditableCompanyDomainNameCell />,
+  },
+  {
+    id: 'employees',
+    title: 'Employees',
+    icon: <IconUsers size={16} />,
+    size: 150,
+    cellComponent: <EditableCompanyEmployeesCell />,
+  },
+  {
+    id: 'address',
+    title: 'Address',
+    icon: <IconMap size={16} />,
+    size: 170,
+    cellComponent: <EditableCompanyAddressCell />,
+  },
+  {
+    id: 'createdAt',
+    title: 'Creation',
+    icon: <IconCalendarEvent size={16} />,
+    size: 150,
+    cellComponent: <EditableCompanyCreatedAtCell />,
+  },
+  {
+    id: 'accountOwner',
+    title: 'Account owner',
+    icon: <IconUser size={16} />,
+    size: 150,
+    cellComponent: <EditableCompanyAccountOwnerCell />,
+  },
+];