Hide Opportunities as nothing is built yet and make company table fully editable (#109)

* Hide Opportunities as nothing is built yet and make company table fully editable

* Fix tests

front/src/pages/companies/__tests__/Companies.test.tsx

@@ -1,15 +1,117 @@
-import { render, waitFor } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 
 import { CompaniesDefault } from '../__stories__/Companies.stories';
+import { act } from 'react-dom/test-utils';
+import {
+  GraphqlMutationCompany,
+  GraphqlQueryCompany,
+} from '../../../interfaces/company.interface';
 
-it('Checks the Companies page render', async () => {
-  const { getByTestId } = render(<CompaniesDefault />);
+jest.mock('../../../apollo', () => {
+  const companyInterface = jest.requireActual(
+    '../../../interfaces/company.interface',
+  );
+  return {
+    apiClient: {
+      mutate: (arg: {
+        mutation: unknown;
+        variables: GraphqlMutationCompany;
+      }) => {
+        const gqlCompany = arg.variables as unknown as GraphqlQueryCompany;
+        return { data: companyInterface.mapCompany(gqlCompany) };
+      },
+    },
+  };
+});
 
-  const title = getByTestId('top-bar-title');
-  expect(title).toHaveTextContent('Companies');
+it('Checks company name edit is updating data', async () => {
+  const { getByText, getByDisplayValue } = render(<CompaniesDefault />);
 
   await waitFor(() => {
-    const row = getByTestId('row-id-0');
-    expect(row).toBeDefined();
+    expect(getByText('Airbnb')).toBeDefined();
+  });
+
+  act(() => {
+    fireEvent.click(getByText('Airbnb'));
+  });
+
+  await waitFor(() => {
+    expect(getByDisplayValue('Airbnb')).toBeInTheDocument();
+  });
+
+  act(() => {
+    const nameInput = getByDisplayValue('Airbnb');
+
+    if (!nameInput) {
+      throw new Error('nameInput is null');
+    }
+    fireEvent.change(nameInput, { target: { value: 'Airbnbb' } });
+    fireEvent.click(getByText('All Companies')); // Click outside
+  });
+
+  await waitFor(() => {
+    expect(getByText('Airbnbb')).toBeDefined();
+  });
+});
+
+it('Checks company url edit is updating data', async () => {
+  const { getByText, getByDisplayValue } = render(<CompaniesDefault />);
+
+  await waitFor(() => {
+    expect(getByText('airbnb.com')).toBeDefined();
+  });
+
+  act(() => {
+    fireEvent.click(getByText('airbnb.com'));
+  });
+
+  await waitFor(() => {
+    expect(getByDisplayValue('airbnb.com')).toBeInTheDocument();
+  });
+
+  act(() => {
+    const urlInput = getByDisplayValue('airbnb.com');
+
+    if (!urlInput) {
+      throw new Error('urlInput is null');
+    }
+    fireEvent.change(urlInput, { target: { value: 'airbnb.co' } });
+    fireEvent.click(getByText('All Companies')); // Click outside
+  });
+
+  await waitFor(() => {
+    expect(getByText('airbnb.co')).toBeInTheDocument();
+  });
+});
+
+it('Checks company address edit is updating data', async () => {
+  const { getByText, getByDisplayValue } = render(<CompaniesDefault />);
+
+  await waitFor(() => {
+    expect(getByText('17 rue de clignancourt')).toBeDefined();
+  });
+
+  act(() => {
+    fireEvent.click(getByText('17 rue de clignancourt'));
+  });
+
+  await waitFor(() => {
+    expect(getByDisplayValue('17 rue de clignancourt')).toBeInTheDocument();
+  });
+
+  act(() => {
+    const addressInput = getByDisplayValue('17 rue de clignancourt');
+
+    if (!addressInput) {
+      throw new Error('addressInput is null');
+    }
+    fireEvent.change(addressInput, {
+      target: { value: '21 rue de clignancourt' },
+    });
+    fireEvent.click(getByText('All Companies')); // Click outside
+  });
+
+  await waitFor(() => {
+    expect(getByText('21 rue de clignancourt')).toBeInTheDocument();
   });
 });

front/src/pages/companies/companies-table.tsx

@@ -8,19 +8,19 @@ import ColumnHead from '../../components/table/ColumnHead';
 import Checkbox from '../../components/form/Checkbox';
 import CompanyChip from '../../components/chips/CompanyChip';
 import EditableText from '../../components/table/editable-cell/EditableText';
-import PipeChip from '../../components/chips/PipeChip';
 import {
   FaRegBuilding,
   FaCalendar,
   FaLink,
   FaMapPin,
-  FaStream,
   FaRegUser,
   FaUsers,
   FaBuilding,
+  FaUser,
 } from 'react-icons/fa';
-import ClickableCell from '../../components/table/ClickableCell';
-import PersonChip from '../../components/chips/PersonChip';
+import PersonChip, {
+  PersonChipPropsType,
+} from '../../components/chips/PersonChip';
 import EditableChip from '../../components/table/editable-cell/EditableChip';
 import {
   FilterType,
@@ -29,8 +29,15 @@ import {
 import {
   Companies_Bool_Exp,
   Companies_Order_By,
+  Users_Bool_Exp,
 } from '../../generated/graphql';
-import { SEARCH_COMPANY_QUERY } from '../../services/search/search';
+import {
+  SEARCH_COMPANY_QUERY,
+  SEARCH_USER_QUERY,
+} from '../../services/search/search';
+import EditableDate from '../../components/table/editable-cell/EditableDate';
+import EditableRelation from '../../components/table/editable-cell/EditableRelation';
+import { GraphqlQueryUser, PartialUser } from '../../interfaces/user.interface';
 
 export const availableSorts = [
   {
@@ -151,7 +158,7 @@ export const companiesColumns = [
         changeHandler={(value: string) => {
           const company = props.row.original;
           company.name = value;
-          updateCompany(company).catch((error) => console.error(error));
+          updateCompany(company);
         }}
         ChipComponent={CompanyChip}
       />
@@ -165,7 +172,7 @@ export const companiesColumns = [
         changeHandler={(value) => {
           const company = props.row.original;
           company.employees = parseInt(value);
-          updateCompany(company).catch((error) => console.error(error));
+          updateCompany(company);
         }}
       />
     ),
@@ -178,7 +185,7 @@ export const companiesColumns = [
         changeHandler={(value) => {
           const company = props.row.original;
           company.domain_name = value;
-          updateCompany(company).catch((error) => console.error(error));
+          updateCompany(company);
         }}
       />
     ),
@@ -191,33 +198,22 @@ export const companiesColumns = [
         changeHandler={(value) => {
           const company = props.row.original;
           company.address = value;
-          updateCompany(company).catch((error) => console.error(error));
+          updateCompany(company);
         }}
       />
     ),
   }),
-  columnHelper.accessor('opportunities', {
-    header: () => (
-      <ColumnHead viewName="Opportunities" viewIcon={<FaStream />} />
-    ),
-    cell: (props) => (
-      <ClickableCell href="#">
-        {props.row.original.opportunities.map((opportunity) => (
-          <PipeChip opportunity={opportunity} />
-        ))}
-      </ClickableCell>
-    ),
-  }),
   columnHelper.accessor('creationDate', {
     header: () => <ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />,
     cell: (props) => (
-      <ClickableCell href="#">
-        {new Intl.DateTimeFormat(undefined, {
-          month: 'short',
-          day: 'numeric',
-          year: 'numeric',
-        }).format(props.row.original.creationDate)}
-      </ClickableCell>
+      <EditableDate
+        value={props.row.original.creationDate}
+        changeHandler={(value: Date) => {
+          const company = props.row.original;
+          company.creationDate = value;
+          updateCompany(company);
+        }}
+      />
     ),
   }),
   columnHelper.accessor('accountOwner', {
@@ -225,13 +221,54 @@ export const companiesColumns = [
       <ColumnHead viewName="Account Owner" viewIcon={<FaRegUser />} />
     ),
     cell: (props) => (
-      <ClickableCell href="#">
-        <>
-          {props.row.original.accountOwner && (
-            <PersonChip name={props.row.original.accountOwner?.displayName} />
-          )}
-        </>
-      </ClickableCell>
+      <EditableRelation<PartialUser, PersonChipPropsType>
+        relation={props.row.original.accountOwner}
+        searchPlaceholder="Account Owner"
+        ChipComponent={PersonChip}
+        chipComponentPropsMapper={(
+          accountOwner: PartialUser,
+        ): PersonChipPropsType => {
+          return {
+            name: accountOwner.displayName,
+          };
+        }}
+        changeHandler={(relation: PartialUser) => {
+          const company = props.row.original;
+          if (company.accountOwner) {
+            company.accountOwner.id = relation.id;
+          } else {
+            company.accountOwner = {
+              id: relation.id,
+              email: relation.email,
+              displayName: relation.displayName,
+            };
+          }
+          updateCompany(company);
+        }}
+        searchFilter={
+          {
+            key: 'account_owner_name',
+            label: 'Account Owner',
+            icon: <FaUser />,
+            whereTemplate: () => {
+              return {};
+            },
+            searchQuery: SEARCH_USER_QUERY,
+            searchTemplate: (searchInput: string) => ({
+              displayName: { _ilike: `%${searchInput}%` },
+            }),
+            searchResultMapper: (accountOwner: GraphqlQueryUser) => ({
+              displayValue: accountOwner.displayName,
+              value: {
+                id: accountOwner.id,
+                email: accountOwner.email,
+                displayName: accountOwner.displayName,
+              },
+            }),
+            operands: [],
+          } satisfies FilterType<Users_Bool_Exp>
+        }
+      />
     ),
   }),
 ];

front/src/pages/people/people-table.tsx

@@ -5,19 +5,16 @@ import {
   FaRegUser,
   FaMapPin,
   FaPhone,
-  FaStream,
   FaUser,
   FaBuilding,
 } from 'react-icons/fa';
 import { createColumnHelper } from '@tanstack/react-table';
-import ClickableCell from '../../components/table/ClickableCell';
 import ColumnHead from '../../components/table/ColumnHead';
 import Checkbox from '../../components/form/Checkbox';
 import CompanyChip, {
   CompanyChipPropsType,
 } from '../../components/chips/CompanyChip';
 import { GraphqlQueryPerson, Person } from '../../interfaces/person.interface';
-import PipeChip from '../../components/chips/PipeChip';
 import EditableText from '../../components/table/editable-cell/EditableText';
 import {
   FilterType,
@@ -361,14 +358,6 @@ export const peopleColumns = [
       />
     ),
   }),
-  columnHelper.accessor('pipe', {
-    header: () => <ColumnHead viewName="Pipe" viewIcon={<FaStream />} />,
-    cell: (props) => (
-      <ClickableCell href="#">
-        <PipeChip opportunity={props.row.original.pipe} />
-      </ClickableCell>
-    ),
-  }),
   columnHelper.accessor('city', {
     header: () => <ColumnHead viewName="City" viewIcon={<FaMapPin />} />,
     cell: (props) => (