Make full name editable on People page (#100)

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

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

@@ -0,0 +1,75 @@
+import styled from '@emotion/styled';
+import { ChangeEvent, useRef, useState } from 'react';
+import EditableCellWrapper from './EditableCellWrapper';
+import PersonChip from '../../chips/PersonChip';
+
+type OwnProps = {
+  firstname: string;
+  lastname: string;
+  changeHandler: (firstname: string, lastname: string) => void;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  & > input:last-child {
+    padding-left: ${(props) => props.theme.spacing(2)};
+    border-left: 1px solid ${(props) => props.theme.primaryBorder};
+  }
+`;
+
+const StyledEditInplaceInput = styled.input`
+  width: 45%;
+  border: none;
+  outline: none;
+  height: 18px;
+
+  &::placeholder {
+    font-weight: bold;
+    color: ${(props) => props.theme.text20};
+  }
+`;
+
+function EditableFullName({ firstname, lastname, changeHandler }: OwnProps) {
+  const firstnameInputRef = useRef<HTMLInputElement>(null);
+  const [firstnameValue, setFirstnameValue] = useState(firstname);
+  const [lastnameValue, setLastnameValue] = useState(lastname);
+  const [isEditMode, setIsEditMode] = useState(false);
+
+  return (
+    <EditableCellWrapper
+      onEditModeChange={(editMode: boolean) => setIsEditMode(editMode)}
+    >
+      {isEditMode ? (
+        <StyledContainer>
+          <StyledEditInplaceInput
+            autoFocus
+            placeholder="Firstname"
+            ref={firstnameInputRef}
+            value={firstnameValue}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              setFirstnameValue(event.target.value);
+              changeHandler(event.target.value, lastnameValue);
+            }}
+          />
+          <StyledEditInplaceInput
+            autoFocus
+            placeholder={'Lastname'}
+            ref={firstnameInputRef}
+            value={lastnameValue}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              setLastnameValue(event.target.value);
+              changeHandler(firstnameValue, event.target.value);
+            }}
+          />
+        </StyledContainer>
+      ) : (
+        <PersonChip name={firstnameValue + ' ' + lastnameValue} />
+      )}
+    </EditableCellWrapper>
+  );
+}
+
+export default EditableFullName;

front/src/components/table/editable-cell/EditableText.tsx

@@ -41,9 +41,6 @@ function EditableCell({
 
   const onEditModeChange = (isEditMode: boolean) => {
     setIsEditMode(isEditMode);
-    if (isEditMode) {
-      inputRef.current?.focus();
-    }
   };
 
   return (
@@ -55,6 +52,7 @@ function EditableCell({
         <StyledInplaceInput
           isEditMode={isEditMode}
           placeholder={placeholder || ''}
+          autoFocus
           ref={inputRef}
           value={inputValue}
           onChange={(event: ChangeEvent<HTMLInputElement>) => {

front/src/components/table/editable-cell/__stories__/EditableFullName.stories.tsx

@@ -0,0 +1,39 @@
+import EditableFullName from '../EditableFullName';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../../layout/styles/themes';
+import { StoryFn } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
+
+const component = {
+  title: 'EditableFullName',
+  component: EditableFullName,
+};
+
+type OwnProps = {
+  firstname: string;
+  lastname: string;
+  changeHandler: (firstname: string, lastname: string) => void;
+};
+
+export default component;
+
+const Template: StoryFn<typeof EditableFullName> = (args: OwnProps) => {
+  return (
+    <MemoryRouter>
+      <ThemeProvider theme={lightTheme}>
+        <div data-testid="content-editable-parent">
+          <EditableFullName {...args} />
+        </div>
+      </ThemeProvider>
+    </MemoryRouter>
+  );
+};
+
+export const EditableFullNameStory = Template.bind({});
+EditableFullNameStory.args = {
+  firstname: 'John',
+  lastname: 'Doe',
+  changeHandler: () => {
+    console.log('changed');
+  },
+};

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');
+});