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/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} />
-            <CompanyAccountOwnerEditableField company={company} />
-            <CompanyEmployeesEditableField company={company} />
-            <CompanyAddressEditableField company={company} />
-            <CompanyCreatedAtEditableField company={company} />
+            <EditableFieldMutationContext.Provider
+              value={useUpdateOneCompanyMutation}
+            >
+              <EditableFieldEntityIdContext.Provider value={company.id}>
+                {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>,
+];