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/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} />
-            <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>,
+];

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: [
-    (Story) => (
-      <Routes>
-        <Route path="/person/:personId" element={<Story />} />
-      </Routes>
-    ),
-    PageDecorator,
-  ],
-  args: { currentPath: `/person/${mockedPeopleData[0].id}` },
+  decorators: [PageDecorator],
+  args: {
+    routePath: AppPath.PersonShowPage,
+    routeParams: { ':personId': 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,