Create and EditableRelation component and make it generic (#107)

* Create and EditableRelation component and make it generic

* Refactor EditableCell component to be more flexible

* Complete Company picker on people page

* Fix lint

front/src/components/table/editable-cell/__tests__/EditableRelation.test.tsx

@@ -0,0 +1,58 @@
+import { fireEvent, render, waitFor } from '@testing-library/react';
+
+import { EditableRelationStory } from '../__stories__/EditableRelation.stories';
+import { CompanyChipPropsType } from '../../../chips/CompanyChip';
+import { PartialCompany } from '../../../../interfaces/company.interface';
+
+import { EditableRelationProps } from '../EditableRelation';
+import { act } from 'react-dom/test-utils';
+
+it('Checks the EditableRelation editing event bubbles up', async () => {
+  const func = jest.fn(() => null);
+  const { getByTestId, getByText } = render(
+    <EditableRelationStory
+      {...(EditableRelationStory.args as EditableRelationProps<
+        PartialCompany,
+        CompanyChipPropsType
+      >)}
+      changeHandler={func}
+    />,
+  );
+
+  const parent = getByTestId('content-editable-parent');
+
+  const wrapper = parent.querySelector('div');
+
+  await waitFor(() => {
+    expect(getByText('Heroku')).toBeInTheDocument();
+  });
+
+  if (!wrapper) {
+    throw new Error('Editable relation not found');
+  }
+  fireEvent.click(wrapper);
+
+  const input = parent.querySelector('input');
+  if (!input) {
+    throw new Error('Search input not found');
+  }
+  act(() => {
+    fireEvent.change(input, { target: { value: 'Ai' } });
+  });
+
+  await waitFor(() => {
+    expect(getByText('Airbnb')).toBeInTheDocument();
+  });
+
+  act(() => {
+    fireEvent.click(getByText('Airbnb'));
+  });
+
+  await waitFor(() => {
+    expect(func).toBeCalledWith({
+      domain_name: 'abnb.com',
+      id: 'abnb',
+      name: 'Airbnb',
+    });
+  });
+});