Use FieldDefinition for company show page (#1171)

* Use FieldDefinition for company show page

* removing console.log

* fix conflicts

* fix address placeholder + company show page field definition ordering

* fix story

* add replacePlaceholder

* use AppPath enum in stories

* add routeParams

* fix people input story

front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx

@@ -1,46 +0,0 @@
-import { EditableField } from '@/ui/editable-field/components/EditableField';
-import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { IconUserCircle } from '@/ui/icon';
-import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
-import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import { UserChip } from '@/users/components/UserChip';
-import { Company, User } from '~/generated/graphql';
-
-import { CompanyAccountOwnerPickerFieldEditMode } from './CompanyAccountOwnerPickerFieldEditMode';
-
-type OwnProps = {
-  company: Pick<Company, 'id' | 'accountOwnerId'> & {
-    accountOwner?: Pick<User, 'id' | 'displayName' | 'avatarUrl'> | null;
-  };
-};
-
-export function CompanyAccountOwnerEditableField({ company }: OwnProps) {
-  return (
-    <RecoilScope SpecificContext={FieldContext}>
-      <RecoilScope>
-        <EditableField
-          customEditHotkeyScope={{
-            scope: RelationPickerHotkeyScope.RelationPicker,
-          }}
-          iconLabel={<IconUserCircle />}
-          editModeContent={
-            <CompanyAccountOwnerPickerFieldEditMode company={company} />
-          }
-          displayModeContent={
-            company.accountOwner?.displayName ? (
-              <UserChip
-                id={company.accountOwner.id}
-                name={company.accountOwner?.displayName ?? ''}
-                pictureUrl={company.accountOwner?.avatarUrl ?? ''}
-              />
-            ) : (
-              <></>
-            )
-          }
-          isDisplayModeContentEmpty={!company.accountOwner}
-          isDisplayModeFixHeight={true}
-        />
-      </RecoilScope>
-    </RecoilScope>
-  );
-}

front/src/modules/companies/editable-field/components/CompanyAccountOwnerPickerFieldEditMode.tsx

@@ -1,47 +0,0 @@
-import styled from '@emotion/styled';
-
-import { CompanyAccountOwnerPicker } from '@/companies/components/CompanyAccountOwnerPicker';
-import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
-import { Company, User } from '~/generated/graphql';
-
-const StyledContainer = styled.div`
-  left: 0px;
-  position: absolute;
-  top: -8px;
-`;
-
-export type OwnProps = {
-  company: Pick<Company, 'id'> & {
-    accountOwner?: Pick<User, 'id' | 'displayName'> | null;
-  };
-  onSubmit?: () => void;
-  onCancel?: () => void;
-};
-
-export function CompanyAccountOwnerPickerFieldEditMode({
-  company,
-  onSubmit,
-  onCancel,
-}: OwnProps) {
-  const { closeEditableField } = useEditableField();
-
-  function handleSubmit() {
-    closeEditableField();
-    onSubmit?.();
-  }
-
-  function handleCancel() {
-    closeEditableField();
-    onCancel?.();
-  }
-
-  return (
-    <StyledContainer>
-      <CompanyAccountOwnerPicker
-        company={company}
-        onCancel={handleCancel}
-        onSubmit={handleSubmit}
-      />
-    </StyledContainer>
-  );
-}

front/src/modules/companies/editable-field/components/CompanyAddressEditableField.tsx

@@ -1,65 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { EditableField } from '@/ui/editable-field/components/EditableField';
-import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { IconMap } from '@/ui/icon';
-import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
-import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
-
-type OwnProps = {
-  company: Pick<Company, 'id' | 'address'>;
-};
-
-export function CompanyAddressEditableField({ company }: OwnProps) {
-  const [internalValue, setInternalValue] = useState(company.address);
-
-  const [updateCompany] = useUpdateOneCompanyMutation();
-
-  useEffect(() => {
-    setInternalValue(company.address);
-  }, [company.address]);
-
-  async function handleChange(newValue: string) {
-    setInternalValue(newValue);
-  }
-
-  async function handleSubmit() {
-    await updateCompany({
-      variables: {
-        where: {
-          id: company.id,
-        },
-        data: {
-          address: internalValue ?? '',
-        },
-      },
-    });
-  }
-
-  async function handleCancel() {
-    setInternalValue(company.address);
-  }
-
-  return (
-    <RecoilScope SpecificContext={FieldContext}>
-      <EditableField
-        onSubmit={handleSubmit}
-        onCancel={handleCancel}
-        iconLabel={<IconMap />}
-        editModeContent={
-          <TextInputEdit
-            placeholder={'Address'}
-            autoFocus
-            value={internalValue}
-            onChange={(newValue: string) => {
-              handleChange(newValue);
-            }}
-          />
-        }
-        displayModeContent={internalValue ?? ''}
-        isDisplayModeContentEmpty={!(internalValue !== '')}
-      />
-    </RecoilScope>
-  );
-}

front/src/modules/companies/editable-field/components/CompanyCreatedAtEditableField.tsx

@@ -1,79 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { EditableField } from '@/ui/editable-field/components/EditableField';
-import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { EditableFieldEditModeDate } from '@/ui/editable-field/variants/components/EditableFieldEditModeDate';
-import { IconCalendar } from '@/ui/icon';
-import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
-import { formatToHumanReadableDate } from '~/utils';
-import { parseDate } from '~/utils/date-utils';
-
-type OwnProps = {
-  company: Pick<Company, 'id' | 'createdAt'>;
-};
-
-export function CompanyCreatedAtEditableField({ company }: OwnProps) {
-  const [internalValue, setInternalValue] = useState(company.createdAt);
-
-  const [updateCompany] = useUpdateOneCompanyMutation();
-
-  useEffect(() => {
-    setInternalValue(company.createdAt);
-  }, [company.createdAt]);
-
-  // TODO: refactor change and submit
-  async function handleChange(newValue: string) {
-    setInternalValue(newValue);
-
-    await updateCompany({
-      variables: {
-        where: {
-          id: company.id,
-        },
-        data: {
-          createdAt: newValue ?? '',
-        },
-      },
-    });
-  }
-
-  async function handleSubmit() {
-    await updateCompany({
-      variables: {
-        where: {
-          id: company.id,
-        },
-        data: {
-          createdAt: internalValue ?? '',
-        },
-      },
-    });
-  }
-
-  async function handleCancel() {
-    setInternalValue(company.createdAt);
-  }
-
-  return (
-    <RecoilScope SpecificContext={FieldContext}>
-      <EditableField
-        onSubmit={handleSubmit}
-        onCancel={handleCancel}
-        iconLabel={<IconCalendar />}
-        editModeContent={
-          <EditableFieldEditModeDate
-            value={internalValue}
-            onChange={handleChange}
-          />
-        }
-        displayModeContent={
-          internalValue !== ''
-            ? formatToHumanReadableDate(parseDate(internalValue).toJSDate())
-            : 'No date'
-        }
-        isDisplayModeContentEmpty={!(internalValue !== '')}
-      />
-    </RecoilScope>
-  );
-}

front/src/modules/companies/editable-field/components/CompanyDomainNameEditableField.tsx

@@ -1,67 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { EditableField } from '@/ui/editable-field/components/EditableField';
-import { FieldDisplayURL } from '@/ui/editable-field/components/FieldDisplayURL';
-import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { IconLink } from '@/ui/icon';
-import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
-import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
-
-type OwnProps = {
-  company: Pick<Company, 'id' | 'domainName'>;
-};
-
-export function CompanyDomainNameEditableField({ company }: OwnProps) {
-  const [internalValue, setInternalValue] = useState(company.domainName);
-
-  const [updateCompany] = useUpdateOneCompanyMutation();
-
-  useEffect(() => {
-    setInternalValue(company.domainName);
-  }, [company.domainName]);
-
-  async function handleChange(newValue: string) {
-    setInternalValue(newValue);
-  }
-
-  async function handleSubmit() {
-    await updateCompany({
-      variables: {
-        where: {
-          id: company.id,
-        },
-        data: {
-          domainName: internalValue ?? '',
-        },
-      },
-    });
-  }
-
-  async function handleCancel() {
-    setInternalValue(company.domainName);
-  }
-
-  return (
-    <RecoilScope SpecificContext={FieldContext}>
-      <EditableField
-        iconLabel={<IconLink />}
-        onCancel={handleCancel}
-        onSubmit={handleSubmit}
-        editModeContent={
-          <TextInputEdit
-            placeholder={'URL'}
-            autoFocus
-            value={internalValue}
-            onChange={(newValue: string) => {
-              handleChange(newValue);
-            }}
-          />
-        }
-        displayModeContent={<FieldDisplayURL URL={internalValue} />}
-        useEditButton
-        isDisplayModeContentEmpty={!(internalValue !== '')}
-      />
-    </RecoilScope>
-  );
-}

front/src/modules/companies/editable-field/components/CompanyEmployeesEditableField.tsx

@@ -1,80 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { EditableField } from '@/ui/editable-field/components/EditableField';
-import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { IconUsers } from '@/ui/icon';
-import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
-import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
-import {
-  canBeCastAsIntegerOrNull,
-  castAsIntegerOrNull,
-} from '~/utils/cast-as-integer-or-null';
-
-type OwnProps = {
-  company: Pick<Company, 'id' | 'employees'>;
-};
-
-export function CompanyEmployeesEditableField({ company }: OwnProps) {
-  const [internalValue, setInternalValue] = useState(
-    company.employees?.toString(),
-  );
-
-  const [updateCompany] = useUpdateOneCompanyMutation();
-
-  useEffect(() => {
-    setInternalValue(company.employees?.toString());
-  }, [company.employees]);
-
-  async function handleChange(newValue: string) {
-    setInternalValue(newValue);
-  }
-
-  async function handleSubmit() {
-    if (!canBeCastAsIntegerOrNull(internalValue)) {
-      handleCancel();
-      return;
-    }
-
-    const valueCastedAsNumberOrNull = castAsIntegerOrNull(internalValue);
-
-    await updateCompany({
-      variables: {
-        where: {
-          id: company.id,
-        },
-        data: {
-          employees: valueCastedAsNumberOrNull,
-        },
-      },
-    });
-
-    setInternalValue(valueCastedAsNumberOrNull?.toString());
-  }
-
-  async function handleCancel() {
-    setInternalValue(company.employees?.toString());
-  }
-
-  return (
-    <RecoilScope SpecificContext={FieldContext}>
-      <EditableField
-        onSubmit={handleSubmit}
-        onCancel={handleCancel}
-        iconLabel={<IconUsers />}
-        editModeContent={
-          <TextInputEdit
-            placeholder={'Employees'}
-            autoFocus
-            value={internalValue ?? ''}
-            onChange={(newValue: string) => {
-              handleChange(newValue);
-            }}
-          />
-        }
-        displayModeContent={internalValue}
-        isDisplayModeContentEmpty={!(internalValue && internalValue !== '0')}
-      />
-    </RecoilScope>
-  );
-}

front/src/modules/companies/queries/show.ts

@@ -1,5 +1,7 @@
 import { gql } from '@apollo/client';
+import { useSetRecoilState } from 'recoil';
 
+import { genericEntitiesFamilyState } from '@/ui/editable-field/states/genericEntitiesFamilyState';
 import { useGetCompanyQuery } from '~/generated/graphql';
 
 export const GET_COMPANY = gql`
@@ -33,5 +35,13 @@ export const GET_COMPANY = gql`
 `;
 
 export function useCompanyQuery(id: string) {
-  return useGetCompanyQuery({ variables: { where: { id } } });
+  const updateCompanyShowPage = useSetRecoilState(
+    genericEntitiesFamilyState(id),
+  );
+  return useGetCompanyQuery({
+    variables: { where: { id } },
+    onCompleted: (data) => {
+      updateCompanyShowPage(data?.findUniqueCompany);
+    },
+  });
 }

front/src/modules/pipeline/constants/pipelineViewFields.tsx

@@ -61,6 +61,7 @@ export const pipelineViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       type: 'relation',
       fieldName: 'pointOfContact',
       relationType: Entity.Person,
+      useEditButton: true,
     },
     isVisible: true,
   } satisfies ViewFieldDefinition<ViewFieldRelationMetadata>,

front/src/modules/ui/board/states/FieldDefinitionContext.ts

@@ -1,7 +1,10 @@
 import { createContext } from 'react';
 
 import { FieldDefinition } from '@/ui/editable-field/types/FieldDefinition';
-import { FieldMetadata } from '@/ui/editable-field/types/FieldMetadata';
+import {
+  FieldMetadata,
+  FieldType,
+} from '@/ui/editable-field/types/FieldMetadata';
 
 export const FieldDefinitionContext = createContext<
   FieldDefinition<FieldMetadata>
@@ -9,6 +12,6 @@ export const FieldDefinitionContext = createContext<
   id: '',
   label: '',
   icon: undefined,
-  type: '',
+  type: 'unknown' satisfies FieldType,
   metadata: {} as FieldMetadata,
 });

front/src/modules/ui/editable-field/components/GenericEditableField.tsx

@@ -5,10 +5,14 @@ import { isFieldDate } from '../types/guards/isFieldDate';
 import { isFieldNumber } from '../types/guards/isFieldNumber';
 import { isFieldProbability } from '../types/guards/isFieldProbability';
 import { isFieldRelation } from '../types/guards/isFieldRelation';
+import { isFieldText } from '../types/guards/isFieldText';
+import { isFieldURL } from '../types/guards/isFieldURL';
 
 import { GenericEditableDateField } from './GenericEditableDateField';
 import { GenericEditableNumberField } from './GenericEditableNumberField';
 import { GenericEditableRelationField } from './GenericEditableRelationField';
+import { GenericEditableTextField } from './GenericEditableTextField';
+import { GenericEditableURLField } from './GenericEditableURLField';
 import { ProbabilityEditableField } from './ProbabilityEditableField';
 
 export function GenericEditableField() {
@@ -22,9 +26,13 @@ export function GenericEditableField() {
     return <GenericEditableNumberField />;
   } else if (isFieldProbability(fieldDefinition)) {
     return <ProbabilityEditableField />;
+  } else if (isFieldURL(fieldDefinition)) {
+    return <GenericEditableURLField />;
+  } else if (isFieldText(fieldDefinition)) {
+    return <GenericEditableTextField />;
   } else {
     console.warn(
-      `Unknown field metadata type: ${fieldDefinition.metadata.type} in GenericEditableCell`,
+      `Unknown field metadata type: ${fieldDefinition.type} in GenericEditableField`,
     );
     return <></>;
   }

front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx

@@ -69,6 +69,7 @@ export function GenericEditableNumberFieldEditMode() {
     <div ref={wrapperRef}>
       <TextInputEdit
         autoFocus
+        placeholder={currentEditableFieldDefinition.metadata.placeHolder}
         value={internalValue ? internalValue.toString() : ''}
         onChange={(newValue: string) => {
           handleChange(newValue);

front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx

@@ -34,7 +34,7 @@ export function GenericEditableRelationField() {
     <RecoilScope SpecificContext={FieldContext}>
       <RecoilScope>
         <EditableField
-          useEditButton
+          useEditButton={currentEditableFieldDefinition.metadata.useEditButton}
           customEditHotkeyScope={{
             scope: RelationPickerHotkeyScope.RelationPicker,
           }}

front/src/modules/ui/editable-field/components/GenericEditableRelationFieldDisplayMode.tsx

@@ -3,6 +3,7 @@ import { useRecoilValue } from 'recoil';
 
 import { PersonChip } from '@/people/components/PersonChip';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+import { UserChip } from '@/users/components/UserChip';
 
 import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
@@ -35,6 +36,15 @@ export function GenericEditableRelationFieldDisplayMode() {
         />
       );
     }
+    case Entity.User: {
+      return (
+        <UserChip
+          id={fieldValue?.id ?? ''}
+          name={fieldValue?.displayName ?? ''}
+          pictureUrl={fieldValue?.avatarUrl ?? ''}
+        />
+      );
+    }
     default:
       console.warn(
         `Unknown relation type: "${currentEditableFieldDefinition.metadata.relationType}"

front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx

@@ -3,9 +3,9 @@ import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { PeoplePicker } from '@/people/components/PeoplePicker';
-import { ViewFieldRelationValue } from '@/ui/editable-field/types/ViewField';
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+import { UserPicker } from '@/users/components/UserPicker';
 
 import { useEditableField } from '../hooks/useEditableField';
 import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
@@ -13,7 +13,10 @@ import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitio
 import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
 import { FieldDefinition } from '../types/FieldDefinition';
-import { FieldRelationMetadata } from '../types/FieldMetadata';
+import {
+  FieldRelationMetadata,
+  FieldRelationValue,
+} from '../types/FieldMetadata';
 
 const RelationPickerContainer = styled.div`
   left: 0px;
@@ -28,7 +31,7 @@ function RelationPicker({
   handleCancel,
 }: {
   fieldDefinition: FieldDefinition<FieldRelationMetadata>;
-  fieldValue: ViewFieldRelationValue;
+  fieldValue: FieldRelationValue;
   handleEntitySubmit: (newRelationId: EntityForSelect | null) => void;
   handleCancel: () => void;
 }) {
@@ -36,7 +39,16 @@ function RelationPicker({
     case Entity.Person: {
       return (
         <PeoplePicker
-          personId={fieldValue?.id ?? null}
+          personId={fieldValue ? fieldValue.id : ''}
+          onSubmit={handleEntitySubmit}
+          onCancel={handleCancel}
+        />
+      );
+    }
+    case Entity.User: {
+      return (
+        <UserPicker
+          userId={fieldValue ? fieldValue.id : ''}
           onSubmit={handleEntitySubmit}
           onCancel={handleCancel}
         />
@@ -46,7 +58,7 @@ function RelationPicker({
       console.warn(
         `Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableRelationField`,
       );
-      return <> </>;
+      return <></>;
   }
 }
 

front/src/modules/ui/editable-field/components/GenericEditableTextField.tsx

@@ -0,0 +1,41 @@
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
+import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
+import { FieldContext } from '../states/FieldContext';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldNumberMetadata } from '../types/FieldMetadata';
+
+import { EditableField } from './EditableField';
+import { GenericEditableTextFieldEditMode } from './GenericEditableTextFieldEditMode';
+
+export function GenericEditableTextField() {
+  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldNumberMetadata>;
+
+  const fieldValue = useRecoilValue<string>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEditableFieldEntityId ?? '',
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
+    }),
+  );
+
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <EditableField
+        iconLabel={currentEditableFieldDefinition.icon}
+        editModeContent={<GenericEditableTextFieldEditMode />}
+        displayModeContent={fieldValue}
+        isDisplayModeContentEmpty={!fieldValue}
+      />
+    </RecoilScope>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableTextFieldEditMode.tsx

@@ -0,0 +1,72 @@
+import { useContext, useRef, useState } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
+
+import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';
+import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
+import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldTextMetadata } from '../types/FieldMetadata';
+
+export function GenericEditableTextFieldEditMode() {
+  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldTextMetadata>;
+
+  // TODO: we could use a hook that would return the field value with the right type
+  const [fieldValue, setFieldValue] = useRecoilState<string>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEditableFieldEntityId ?? '',
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
+    }),
+  );
+
+  const [internalValue, setInternalValue] = useState(fieldValue);
+
+  const updateField = useUpdateGenericEntityField();
+
+  const wrapperRef = useRef(null);
+
+  useRegisterCloseFieldHandlers(wrapperRef, handleSubmit, onCancel);
+
+  function handleSubmit() {
+    if (internalValue === fieldValue) return;
+
+    setFieldValue(internalValue);
+
+    if (currentEditableFieldEntityId && updateField) {
+      updateField(
+        currentEditableFieldEntityId,
+        currentEditableFieldDefinition,
+        internalValue,
+      );
+    }
+  }
+
+  function onCancel() {
+    setFieldValue(fieldValue);
+  }
+
+  function handleChange(newValue: string) {
+    setInternalValue(newValue);
+  }
+
+  return (
+    <div ref={wrapperRef}>
+      <TextInputEdit
+        autoFocus
+        placeholder={currentEditableFieldDefinition.metadata.placeHolder}
+        value={internalValue}
+        onChange={(newValue: string) => {
+          handleChange(newValue);
+        }}
+      />
+    </div>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx

@@ -0,0 +1,43 @@
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
+import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
+import { FieldContext } from '../states/FieldContext';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldNumberMetadata } from '../types/FieldMetadata';
+
+import { EditableField } from './EditableField';
+import { FieldDisplayURL } from './FieldDisplayURL';
+import { GenericEditableURLFieldEditMode } from './GenericEditableURLFieldEditMode';
+
+export function GenericEditableURLField() {
+  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldNumberMetadata>;
+
+  const fieldValue = useRecoilValue<string>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEditableFieldEntityId ?? '',
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
+    }),
+  );
+
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <EditableField
+        useEditButton
+        iconLabel={currentEditableFieldDefinition.icon}
+        editModeContent={<GenericEditableURLFieldEditMode />}
+        displayModeContent={<FieldDisplayURL URL={fieldValue} />}
+        isDisplayModeContentEmpty={!fieldValue}
+      />
+    </RecoilScope>
+  );
+}

front/src/modules/ui/editable-field/components/GenericEditableURLFieldEditMode.tsx

@@ -0,0 +1,74 @@
+import { useContext, useRef, useState } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
+
+import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';
+import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
+import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldURLMetadata } from '../types/FieldMetadata';
+
+// This one is very similar to GenericEditableTextFieldEditMode
+// We could probably merge them since FieldURLMetadata is basically a FieldTextMetadata
+export function GenericEditableURLFieldEditMode() {
+  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableFieldDefinition = useContext(
+    EditableFieldDefinitionContext,
+  ) as FieldDefinition<FieldURLMetadata>;
+
+  // TODO: we could use a hook that would return the field value with the right type
+  const [fieldValue, setFieldValue] = useRecoilState<string>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEditableFieldEntityId ?? '',
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
+    }),
+  );
+
+  const [internalValue, setInternalValue] = useState(fieldValue);
+
+  const updateField = useUpdateGenericEntityField();
+
+  const wrapperRef = useRef(null);
+
+  useRegisterCloseFieldHandlers(wrapperRef, handleSubmit, onCancel);
+
+  function handleSubmit() {
+    if (internalValue === fieldValue) return;
+
+    setFieldValue(internalValue);
+
+    if (currentEditableFieldEntityId && updateField) {
+      updateField(
+        currentEditableFieldEntityId,
+        currentEditableFieldDefinition,
+        internalValue,
+      );
+    }
+  }
+
+  function onCancel() {
+    setFieldValue(fieldValue);
+  }
+
+  function handleChange(newValue: string) {
+    setInternalValue(newValue);
+  }
+
+  return (
+    <div ref={wrapperRef}>
+      <TextInputEdit
+        autoFocus
+        placeholder={currentEditableFieldDefinition.metadata.placeHolder}
+        value={internalValue}
+        onChange={(newValue: string) => {
+          handleChange(newValue);
+        }}
+      />
+    </div>
+  );
+}

front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts

@@ -1,7 +1,5 @@
 import { useContext } from 'react';
 
-import { isFieldChip } from '@/ui/editable-field/types/guards/isFieldChip';
-
 import { EditableFieldMutationContext } from '../states/EditableFieldMutationContext';
 import { FieldDefinition } from '../types/FieldDefinition';
 import {
@@ -27,6 +25,7 @@ import {
   FieldURLMetadata,
   FieldURLValue,
 } from '../types/FieldMetadata';
+import { isFieldChip } from '../types/guards/isFieldChip';
 import { isFieldChipValue } from '../types/guards/isFieldChipValue';
 import { isFieldDate } from '../types/guards/isFieldDate';
 import { isFieldDateValue } from '../types/guards/isFieldDateValue';
@@ -53,31 +52,30 @@ export function useUpdateGenericEntityField() {
   const [updateEntity] = useUpdateEntityMutation();
 
   return function updateEntityField<
-    MetadataType extends FieldMetadata,
+    ValueType extends FieldMetadata extends FieldDoubleTextMetadata
-    ValueType extends MetadataType extends FieldDoubleTextMetadata
       ? FieldDoubleTextValue
-      : MetadataType extends FieldTextMetadata
+      : FieldMetadata extends FieldTextMetadata
       ? FieldTextValue
-      : MetadataType extends FieldPhoneMetadata
+      : FieldMetadata extends FieldPhoneMetadata
       ? FieldPhoneValue
-      : MetadataType extends FieldURLMetadata
+      : FieldMetadata extends FieldURLMetadata
       ? FieldURLValue
-      : MetadataType extends FieldNumberMetadata
+      : FieldMetadata extends FieldNumberMetadata
       ? FieldNumberValue
-      : MetadataType extends FieldDateMetadata
+      : FieldMetadata extends FieldDateMetadata
       ? FieldDateValue
-      : MetadataType extends FieldChipMetadata
+      : FieldMetadata extends FieldChipMetadata
       ? FieldChipValue
-      : MetadataType extends FieldDoubleTextChipMetadata
+      : FieldMetadata extends FieldDoubleTextChipMetadata
       ? FieldDoubleTextChipValue
-      : MetadataType extends FieldRelationMetadata
+      : FieldMetadata extends FieldRelationMetadata
       ? FieldRelationValue
-      : MetadataType extends FieldProbabilityMetadata
+      : FieldMetadata extends FieldProbabilityMetadata
       ? FieldProbabilityValue
       : unknown,
   >(
     currentEntityId: string,
-    field: FieldDefinition<MetadataType>,
+    field: FieldDefinition<FieldMetadata>,
     newFieldValue: ValueType,
   ) {
     const newFieldValueUnknown = newFieldValue as unknown;

front/src/modules/ui/editable-field/states/EditableFieldDefinitionContext.ts

@@ -1,8 +1,8 @@
 import { createContext } from 'react';
 
 import { FieldDefinition } from '../types/FieldDefinition';
-import { ViewFieldMetadata } from '../types/ViewField';
+import { FieldMetadata } from '../types/FieldMetadata';
 
 export const EditableFieldDefinitionContext = createContext<
-  FieldDefinition<ViewFieldMetadata>
+  FieldDefinition<FieldMetadata>
->({} as FieldDefinition<ViewFieldMetadata>);
+>({} as FieldDefinition<FieldMetadata>);

front/src/modules/ui/editable-field/types/FieldDefinition.ts

@@ -1,9 +1,9 @@
-import { FieldMetadata } from './FieldMetadata';
+import { FieldMetadata, FieldType } from './FieldMetadata';
 
 export type FieldDefinition<T extends FieldMetadata | unknown> = {
   id: string;
   label: string;
   icon?: JSX.Element;
-  type: string;
+  type: FieldType;
   metadata: T;
 };

front/src/modules/ui/editable-field/types/FieldMetadata.ts

@@ -2,6 +2,7 @@ import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelec
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 
 export type FieldType =
+  | 'unknown'
   | 'text'
   | 'relation'
   | 'chip'
@@ -14,41 +15,36 @@ export type FieldType =
   | 'probability';
 
 export type FieldTextMetadata = {
-  type: 'text';
   placeHolder: string;
   fieldName: string;
 };
 
 export type FieldPhoneMetadata = {
-  type: 'phone';
   placeHolder: string;
   fieldName: string;
 };
 
 export type FieldURLMetadata = {
-  type: 'url';
   placeHolder: string;
   fieldName: string;
 };
 
 export type FieldDateMetadata = {
-  type: 'date';
   fieldName: string;
 };
 
 export type FieldNumberMetadata = {
-  type: 'number';
   fieldName: string;
+  placeHolder: string;
 };
 
 export type FieldRelationMetadata = {
-  type: 'relation';
   relationType: Entity;
   fieldName: string;
+  useEditButton?: boolean;
 };
 
 export type FieldChipMetadata = {
-  type: 'chip';
   relationType: Entity;
   contentFieldName: string;
   urlFieldName: string;
@@ -56,7 +52,6 @@ export type FieldChipMetadata = {
 };
 
 export type FieldDoubleTextMetadata = {
-  type: 'double-text';
   firstValueFieldName: string;
   firstValuePlaceholder: string;
   secondValueFieldName: string;
@@ -64,7 +59,6 @@ export type FieldDoubleTextMetadata = {
 };
 
 export type FieldDoubleTextChipMetadata = {
-  type: 'double-text-chip';
   firstValueFieldName: string;
   firstValuePlaceholder: string;
   secondValueFieldName: string;
@@ -74,11 +68,10 @@ export type FieldDoubleTextChipMetadata = {
 };
 
 export type FieldProbabilityMetadata = {
-  type: 'probability';
   fieldName: string;
 };
 
-export type FieldMetadata = { type: FieldType } & (
+export type FieldMetadata =
   | FieldTextMetadata
   | FieldRelationMetadata
   | FieldChipMetadata
@@ -88,8 +81,7 @@ export type FieldMetadata = { type: FieldType } & (
   | FieldURLMetadata
   | FieldNumberMetadata
   | FieldDateMetadata
-  | FieldProbabilityMetadata
+  | FieldProbabilityMetadata;
-);
 
 export type FieldTextValue = string;
 

front/src/modules/ui/editable-field/types/ViewField.ts

@@ -46,6 +46,7 @@ export type ViewFieldRelationMetadata = {
   type: 'relation';
   relationType: Entity;
   fieldName: string;
+  useEditButton?: boolean;
 };
 
 export type ViewFieldChipMetadata = {

front/src/pages/auth/__stories__/CreateProfile.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
 import { graphql } from 'msw';
 
+import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   type PageDecoratorArgs,
@@ -16,7 +17,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/CreateProfile',
   component: CreateProfile,
   decorators: [PageDecorator],
-  args: { currentPath: '/create/profile' },
+  args: { routePath: AppPath.CreateProfile },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: [

front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
 import { graphql } from 'msw';
 
+import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   type PageDecoratorArgs,
@@ -16,7 +17,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/CreateWorkspace',
   component: CreateWorkspace,
   decorators: [PageDecorator],
-  args: { currentPath: '/create/workspace' },
+  args: { routePath: AppPath.CreateWorkspace },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: [

front/src/pages/auth/__stories__/SignInUp.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fireEvent, within } from '@storybook/testing-library';
 
+import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   type PageDecoratorArgs,
@@ -13,7 +14,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/SignInUp',
   component: SignInUp,
   decorators: [PageDecorator],
-  args: { currentPath: '/sign-in' },
+  args: { routePath: AppPath.SignIn },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,

front/src/pages/companies/CompanyShow.tsx

@@ -3,25 +3,29 @@ import { useTheme } from '@emotion/react';
 
 import { Timeline } from '@/activities/timeline/components/Timeline';
 import { CompanyTeam } from '@/companies/components/CompanyTeam';
-import { CompanyAccountOwnerEditableField } from '@/companies/editable-field/components/CompanyAccountOwnerEditableField';
-import { CompanyAddressEditableField } from '@/companies/editable-field/components/CompanyAddressEditableField';
-import { CompanyCreatedAtEditableField } from '@/companies/editable-field/components/CompanyCreatedAtEditableField';
-import { CompanyDomainNameEditableField } from '@/companies/editable-field/components/CompanyDomainNameEditableField';
-import { CompanyEmployeesEditableField } from '@/companies/editable-field/components/CompanyEmployeesEditableField';
 import { useCompanyQuery } from '@/companies/queries';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
+import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
+import { EditableFieldDefinitionContext } from '@/ui/editable-field/states/EditableFieldDefinitionContext';
+import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext';
+import { EditableFieldMutationContext } from '@/ui/editable-field/states/EditableFieldMutationContext';
 import { IconBuildingSkyscraper } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
 import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer';
 import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSummaryCard';
-import { CommentableType } from '~/generated/graphql';
+import {
+  CommentableType,
+  useUpdateOneCompanyMutation,
+} from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
 import { CompanyNameEditableField } from '../../modules/companies/editable-field/components/CompanyNameEditableField';
 import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageContainer';
 
+import { companyShowFieldsDefinition } from './constants/companyShowFieldsDefinition';
+
 export function CompanyShow() {
   const companyId = useParams().companyId ?? '';
   const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites();
@@ -59,11 +63,22 @@ export function CompanyShow() {
             )}
           />
           <PropertyBox extraPadding={true}>
-            <CompanyDomainNameEditableField company={company} />
+            <EditableFieldMutationContext.Provider
-            <CompanyAccountOwnerEditableField company={company} />
+              value={useUpdateOneCompanyMutation}
-            <CompanyEmployeesEditableField company={company} />
+            >
-            <CompanyAddressEditableField company={company} />
+              <EditableFieldEntityIdContext.Provider value={company.id}>
-            <CompanyCreatedAtEditableField company={company} />
+                {companyShowFieldsDefinition.map((fieldDefinition) => {
+                  return (
+                    <EditableFieldDefinitionContext.Provider
+                      value={fieldDefinition}
+                      key={fieldDefinition.id}
+                    >
+                      <GenericEditableField />
+                    </EditableFieldDefinitionContext.Provider>
+                  );
+                })}
+              </EditableFieldEntityIdContext.Provider>
+            </EditableFieldMutationContext.Provider>
           </PropertyBox>
           <CompanyTeam company={company}></CompanyTeam>
         </ShowPageLeftContainer>

front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 import assert from 'assert';
 
+import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   type PageDecoratorArgs,
@@ -18,7 +19,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Companies/FilterBy',
   component: Companies,
   decorators: [PageDecorator],
-  args: { currentPath: '/companies' },
+  args: { routePath: AppPath.CompaniesPage },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,

front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx

@@ -2,6 +2,7 @@ import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
+import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   type PageDecoratorArgs,
@@ -16,7 +17,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Companies/SortBy',
   component: Companies,
   decorators: [PageDecorator],
-  args: { currentPath: '/companies' },
+  args: { routePath: AppPath.CompaniesPage },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,

front/src/pages/companies/__stories__/Companies.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   type PageDecoratorArgs,
@@ -12,7 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Companies',
   component: Companies,
   decorators: [PageDecorator],
-  args: { currentPath: '/companies' },
+  args: { routePath: AppPath.CompaniesPage },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,

front/src/pages/companies/__stories__/Company.stories.tsx

@@ -7,6 +7,7 @@ import { graphql } from 'msw';
 import { GET_ACTIVITIES_BY_TARGETS, GET_ACTIVITY } from '@/activities/queries';
 import { CREATE_ACTIVITY_WITH_COMMENT } from '@/activities/queries/create';
 import { GET_COMPANY, UPDATE_ONE_COMPANY } from '@/companies/queries';
+import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   type PageDecoratorArgs,
@@ -21,7 +22,10 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Companies/Company',
   component: CompanyShow,
   decorators: [PageDecorator],
-  args: { currentPath: '/companies/89bb825c-171e-4bcc-9cf7-43448d6fb278' },
+  args: {
+    routePath: AppPath.CompanyShowPage,
+    routeParams: { ':companyId': mockedCompaniesData[0].id },
+  },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: [

front/src/pages/companies/constants/companyShowFieldsDefinition.tsx

@@ -0,0 +1,69 @@
+import { FieldDefinition } from '@/ui/editable-field/types/FieldDefinition';
+import {
+  FieldDateMetadata,
+  FieldMetadata,
+  FieldNumberMetadata,
+  FieldRelationMetadata,
+  FieldTextMetadata,
+  FieldURLMetadata,
+} from '@/ui/editable-field/types/FieldMetadata';
+import {
+  IconCalendar,
+  IconLink,
+  IconMap,
+  IconUserCircle,
+  IconUsers,
+} from '@/ui/icon';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+
+export const companyShowFieldsDefinition: FieldDefinition<FieldMetadata>[] = [
+  {
+    id: 'domainName',
+    label: 'Domain name',
+    icon: <IconLink />,
+    type: 'url',
+    metadata: {
+      fieldName: 'domainName',
+      placeHolder: 'URL',
+    },
+  } satisfies FieldDefinition<FieldURLMetadata>,
+  {
+    id: 'accountOwner',
+    label: 'Account owner',
+    icon: <IconUserCircle />,
+    type: 'relation',
+    metadata: {
+      fieldName: 'accountOwner',
+      relationType: Entity.User,
+    },
+  } satisfies FieldDefinition<FieldRelationMetadata>,
+  {
+    id: 'employees',
+    label: 'Employees',
+    icon: <IconUsers />,
+    type: 'number',
+    metadata: {
+      fieldName: 'employees',
+      placeHolder: 'Employees',
+    },
+  } satisfies FieldDefinition<FieldNumberMetadata>,
+  {
+    id: 'address',
+    label: 'Address',
+    icon: <IconMap />,
+    type: 'text',
+    metadata: {
+      fieldName: 'address',
+      placeHolder: 'Address',
+    },
+  } satisfies FieldDefinition<FieldTextMetadata>,
+  {
+    id: 'createdAt',
+    label: 'Created at',
+    icon: <IconCalendar />,
+    type: 'date',
+    metadata: {
+      fieldName: 'createdAt',
+    },
+  } satisfies FieldDefinition<FieldDateMetadata>,
+];

front/src/pages/opportunities/__stories__/Opportunities.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
 
+import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   type PageDecoratorArgs,
@@ -13,7 +14,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Opportunities/Default',
   component: Opportunities,
   decorators: [PageDecorator],
-  args: { currentPath: '/opportunities' },
+  args: { routePath: AppPath.OpportunitiesPage },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,

front/src/pages/people/PersonShow.tsx

@@ -21,6 +21,7 @@ import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageCo
 
 export function PersonShow() {
   const personId = useParams().personId ?? '';
+
   const { insertPersonFavorite, deletePersonFavorite } = useFavorites();
 
   const { data } = usePersonQuery(personId);

front/src/pages/people/__stories__/People.filterBy.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 import assert from 'assert';
 
+import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   type PageDecoratorArgs,
@@ -18,7 +19,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/People/FilterBy',
   component: People,
   decorators: [PageDecorator],
-  args: { currentPath: '/people' },
+  args: { routePath: AppPath.PeoplePage },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,

front/src/pages/people/__stories__/People.inputs.stories.tsx

@@ -6,6 +6,7 @@ import { graphql } from 'msw';
 
 import { UPDATE_ONE_PERSON } from '@/people/queries';
 import { SEARCH_COMPANY_QUERY } from '@/search/queries/search';
+import { AppPath } from '@/types/AppPath';
 import { Company } from '~/generated/graphql';
 import {
   PageDecorator,
@@ -25,7 +26,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/People/Input',
   component: People,
   decorators: [PageDecorator],
-  args: { currentPath: '/people' },
+  args: { routePath: AppPath.PeoplePage },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
@@ -216,14 +217,6 @@ export const EditRelation: Story = {
       await userEvent.click(airbnbChip);
     });
 
-    await step(
-      'Click on last row company cell to exit relation picker',
-      async () => {
-        const otherCell = await canvas.findByText('Janice Dane');
-        await userEvent.click(otherCell);
-      },
-    );
-
     await step('Check if Airbnb is in second row company cell', async () => {
       await canvas.findByText('Airbnb');
     });

front/src/pages/people/__stories__/People.sortBy.stories.tsx

@@ -2,6 +2,7 @@ import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
+import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   type PageDecoratorArgs,
@@ -17,7 +18,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/People/SortBy',
   component: People,
   decorators: [PageDecorator],
-  args: { currentPath: '/people' },
+  args: { routePath: AppPath.PeoplePage },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,

front/src/pages/people/__stories__/People.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   type PageDecoratorArgs,
@@ -12,7 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/People',
   component: People,
   decorators: [PageDecorator],
-  args: { currentPath: '/people' },
+  args: { routePath: AppPath.PeoplePage },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,

front/src/pages/people/__stories__/Person.stories.tsx

@@ -1,6 +1,6 @@
-import { Route, Routes } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   type PageDecoratorArgs,
@@ -13,15 +13,11 @@ import { PersonShow } from '../PersonShow';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/People/Person',
   component: PersonShow,
-  decorators: [
+  decorators: [PageDecorator],
-    (Story) => (
+  args: {
-      <Routes>
+    routePath: AppPath.PersonShowPage,
-        <Route path="/person/:personId" element={<Story />} />
+    routeParams: { ':personId': mockedPeopleData[0].id },
-      </Routes>
+  },
-    ),
-    PageDecorator,
-  ],
-  args: { currentPath: `/person/${mockedPeopleData[0].id}` },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,

front/src/pages/settings/__stories__/SettingsProfile.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsProfile',
   component: SettingsProfile,
   decorators: [PageDecorator],
-  args: { currentPath: '/settings/profile' },
+  args: { routePath: '/settings/profile' },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,

front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsWorkspaceMembers',
   component: SettingsWorkspaceMembers,
   decorators: [PageDecorator],
-  args: { currentPath: '/settings/workspace-members' },
+  args: { routePath: '/settings/workspace-members' },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,

front/src/pages/tasks/__stories__/Tasks.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   type PageDecoratorArgs,
@@ -12,7 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Tasks/Default',
   component: Tasks,
   decorators: [PageDecorator],
-  args: { currentPath: '/tasks' },
+  args: { routePath: AppPath.TasksPage },
   parameters: {
     docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,

front/src/testing/decorators/PageDecorator.tsx

@@ -1,4 +1,4 @@
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { Decorator } from '@storybook/react';
 
 import { ClientConfigProvider } from '~/modules/client-config/components/ClientConfigProvider';
@@ -7,18 +7,32 @@ import { UserProvider } from '~/modules/users/components/UserProvider';
 
 import { FullHeightStorybookLayout } from '../FullHeightStorybookLayout';
 
-export type PageDecoratorArgs = { currentPath: string };
+export type PageDecoratorArgs = { routePath: string; routeParams: RouteParams };
 
-export const PageDecorator: Decorator<{ currentPath: string }> = (
+type RouteParams = {
-  Story,
+  [param: string]: string;
-  { args },
+};
-) => (
+
+function computeLocation(routePath: string, routeParams: RouteParams) {
+  return routePath.replace(/:(\w+)/g, (paramName) => {
+    return routeParams[paramName] ?? '';
+  });
+}
+
+export const PageDecorator: Decorator<{
+  routePath: string;
+  routeParams: RouteParams;
+}> = (Story, { args }) => (
   <UserProvider>
     <ClientConfigProvider>
-      <MemoryRouter initialEntries={[args.currentPath]}>
+      <MemoryRouter
+        initialEntries={[computeLocation(args.routePath, args.routeParams)]}
+      >
         <FullHeightStorybookLayout>
           <DefaultLayout>
-            <Story />
+            <Routes>
+              <Route path={args.routePath} element={<Story />} />
+            </Routes>
           </DefaultLayout>
         </FullHeightStorybookLayout>
       </MemoryRouter>