Make full name editable on People page (#100)

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

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

@@ -0,0 +1,41 @@
+import { fireEvent, render } from '@testing-library/react';
+
+import { EditableFullNameStory } from '../__stories__/EditableFullName.stories';
+
+it('Checks the EditableFullName editing event bubbles up', async () => {
+  const func = jest.fn(() => null);
+  const { getByTestId } = render(
+    <EditableFullNameStory
+      firstname="Jone"
+      lastname="Doe"
+      changeHandler={func}
+    />,
+  );
+
+  const parent = getByTestId('content-editable-parent');
+
+  const wrapper = parent.querySelector('div');
+
+  if (!wrapper) {
+    throw new Error('Editable input not found');
+  }
+  fireEvent.click(wrapper);
+
+  const firstnameInput = parent.querySelector('input:first-child');
+
+  if (!firstnameInput) {
+    throw new Error('Editable input not found');
+  }
+
+  fireEvent.change(firstnameInput, { target: { value: 'Jo' } });
+  expect(func).toBeCalledWith('Jo', 'Doe');
+
+  const lastnameInput = parent.querySelector('input:last-child');
+
+  if (!lastnameInput) {
+    throw new Error('Editable input not found');
+  }
+
+  fireEvent.change(lastnameInput, { target: { value: 'Do' } });
+  expect(func).toBeCalledWith('Jo', 'Do');
+});