feat: apply RecordDetailSection style on RecordDuplicatesSection and …

…add stories Closes #4240
twentyhq · Feb 29, 2024 · 4eb0885 · 4eb0885
1 parent bc11cf8
commit 4eb0885
Show file tree

Hide file tree

Showing 28 changed files with 395 additions and 240 deletions.
diff --git a/packages/twenty-front/src/__stories__/App.stories.tsx b/packages/twenty-front/src/__stories__/App.stories.tsx
@@ -1,33 +1,32 @@
 import { HelmetProvider } from 'react-helmet-async';
-import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
 import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { UserProvider } from '@/users/components/UserProvider';
 import { App } from '~/App';
+import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 const meta: Meta<typeof App> = {
   title: 'App/App',
   component: App,
   decorators: [
+    MemoryRouterDecorator,
     (Story) => (
       <ClientConfigProvider>
         <UserProvider>
-          <MemoryRouter>
-            <FullHeightStorybookLayout>
-              <HelmetProvider>
-                <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-                  <ObjectMetadataItemsProvider>
-                    <Story />
-                  </ObjectMetadataItemsProvider>
-                </SnackBarProviderScope>
-              </HelmetProvider>
-            </FullHeightStorybookLayout>
-          </MemoryRouter>
+          <FullHeightStorybookLayout>
+            <HelmetProvider>
+              <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+                <ObjectMetadataItemsProvider>
+                  <Story />
+                </ObjectMetadataItemsProvider>
+              </SnackBarProviderScope>
+            </HelmetProvider>
+          </FullHeightStorybookLayout>
         </UserProvider>
       </ClientConfigProvider>
     ),

diff --git a/packages/twenty-front/src/modules/activities/tasks/__stories__/TaskList.stories.tsx b/packages/twenty-front/src/modules/activities/tasks/__stories__/TaskList.stories.tsx
@@ -1,24 +1,16 @@
-import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { TaskList } from '@/activities/tasks/components/TaskList';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedActivities } from '~/testing/mock-data/activities';
 
 const meta: Meta<typeof TaskList> = {
   title: 'Modules/Activity/TaskList',
   component: TaskList,
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    ),
-    ComponentDecorator,
-    SnackBarDecorator,
-  ],
+  decorators: [MemoryRouterDecorator, ComponentDecorator, SnackBarDecorator],
   args: {
     title: 'Tasks',
     tasks: mockedActivities,

diff --git a/packages/twenty-front/src/modules/object-record/hooks/useFindDuplicateRecords.ts b/packages/twenty-front/src/modules/object-record/hooks/useFindDuplicateRecords.ts
@@ -3,6 +3,7 @@ import { useQuery } from '@apollo/client';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { ObjectMetadataItemIdentifier } from '@/object-metadata/types/ObjectMetadataItemIdentifier';
+import { getFindDuplicateRecordsQueryResponseField } from '@/object-record/hooks/useGenerateFindDuplicateRecordsQuery';
 import { useMapConnectionToRecords } from '@/object-record/hooks/useMapConnectionToRecords';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { ObjectRecordConnection } from '@/object-record/types/ObjectRecordConnection';
@@ -29,14 +30,18 @@ export const useFindDuplicateRecords = <T extends ObjectRecord = ObjectRecord>({
 
   const { enqueueSnackBar } = useSnackBar();
 
+  const queryResponseField = getFindDuplicateRecordsQueryResponseField(
+    objectMetadataItem.nameSingular,
+  );
+
   const { data, loading, error } = useQuery<ObjectRecordQueryResult<T>>(
     findDuplicateRecordsQuery,
     {
       variables: {
         id: objectRecordId,
       },
       onCompleted: (data) => {
-        onCompleted?.(data[objectMetadataItem.nameSingular]);
+        onCompleted?.(data[queryResponseField]);
       },
       onError: (error) => {
         logError(
@@ -53,8 +58,7 @@ export const useFindDuplicateRecords = <T extends ObjectRecord = ObjectRecord>({
     },
   );
 
-  const objectRecordConnection =
-    data?.[`${objectMetadataItem.nameSingular}Duplicates`];
+  const objectRecordConnection = data?.[queryResponseField];
 
   const mapConnectionToRecords = useMapConnectionToRecords();
 

diff --git a/...ages/twenty-front/src/modules/object-record/hooks/useGenerateFindDuplicateRecordsQuery.ts b/...ages/twenty-front/src/modules/object-record/hooks/useGenerateFindDuplicateRecordsQuery.ts
@@ -4,6 +4,10 @@ import { useMapFieldMetadataToGraphQLQuery } from '@/object-metadata/hooks/useMa
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { capitalize } from '~/utils/string/capitalize';
 
+export const getFindDuplicateRecordsQueryResponseField = (
+  objectNameSingular: string,
+) => `${objectNameSingular}Duplicates`;
+
 export const useGenerateFindDuplicateRecordsQuery = () => {
   const mapFieldMetadataToGraphQLQuery = useMapFieldMetadataToGraphQLQuery();
 
@@ -15,7 +19,9 @@ export const useGenerateFindDuplicateRecordsQuery = () => {
     depth?: number;
   }) => gql`
     query FindDuplicate${capitalize(objectMetadataItem.nameSingular)}($id: ID) {
-      ${objectMetadataItem.nameSingular}Duplicates(id: $id){
+      ${getFindDuplicateRecordsQueryResponseField(
+        objectMetadataItem.nameSingular,
+      )}(id: $id) {
         edges {
           node {
             id

diff --git a/packages/twenty-front/src/modules/object-record/record-field/__mocks__/fieldDefinitions.ts b/packages/twenty-front/src/modules/object-record/record-field/__mocks__/fieldDefinitions.ts
@@ -18,7 +18,7 @@ const mockedPersonObjectMetadataItem = {
   ...mockedPeopleMetadata.node,
   fields: mockedPeopleMetadata.node.fields.edges.map(({ node }) => node),
 };
-const mockedCompanyObjectMetadataItem = {
+export const mockedCompanyObjectMetadataItem = {
   ...mockedCompaniesMetadata.node,
   fields: mockedCompaniesMetadata.node.fields.edges.map(({ node }) => node),
 };

diff --git a/...ecord/record-field/meta-types/display/components/__stories__/ChipFieldDisplay.stories.tsx b/...ecord/record-field/meta-types/display/components/__stories__/ChipFieldDisplay.stories.tsx
@@ -1,13 +1,12 @@
 import { useEffect } from 'react';
-import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 import { useSetRecoilState } from 'recoil';
 
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { ChipFieldDisplay } from '@/object-record/record-field/meta-types/display/components/ChipFieldDisplay';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
-
-import { FieldContext } from '../../../../contexts/FieldContext';
+import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 
 const ChipFieldValueSetterEffect = () => {
   const setEntityFields = useSetRecoilState(recordStoreFamilyState('123'));
@@ -28,30 +27,29 @@ const ChipFieldValueSetterEffect = () => {
 const meta: Meta = {
   title: 'UI/Data/Field/Display/ChipFieldDisplay',
   decorators: [
+    MemoryRouterDecorator,
     (Story) => (
-      <MemoryRouter>
-        <FieldContext.Provider
-          value={{
-            entityId: '123',
-            basePathToShowPage: '/object-record/',
-            isLabelIdentifier: false,
-            fieldDefinition: {
-              fieldMetadataId: 'full name',
-              label: 'Henry Cavill',
-              type: 'FULL_NAME',
-              iconName: 'IconCalendarEvent',
-              metadata: {
-                fieldName: 'full name',
-                objectMetadataNameSingular: 'person',
-              },
+      <FieldContext.Provider
+        value={{
+          entityId: '123',
+          basePathToShowPage: '/object-record/',
+          isLabelIdentifier: false,
+          fieldDefinition: {
+            fieldMetadataId: 'full name',
+            label: 'Henry Cavill',
+            type: 'FULL_NAME',
+            iconName: 'IconCalendarEvent',
+            metadata: {
+              fieldName: 'full name',
+              objectMetadataNameSingular: 'person',
             },
-            hotkeyScope: 'hotkey-scope',
-          }}
-        >
-          <ChipFieldValueSetterEffect />
-          <Story />
-        </FieldContext.Provider>
-      </MemoryRouter>
+          },
+          hotkeyScope: 'hotkey-scope',
+        }}
+      >
+        <ChipFieldValueSetterEffect />
+        <Story />
+      </FieldContext.Provider>
     ),
     ComponentDecorator,
   ],

diff --git a/...cord/record-field/meta-types/display/components/__stories__/EmailFieldDisplay.stories.tsx b/...cord/record-field/meta-types/display/components/__stories__/EmailFieldDisplay.stories.tsx
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
-import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { useEmailField } from '@/object-record/record-field/meta-types/hooks/useEmailField';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 
-import { FieldContext } from '../../../../contexts/FieldContext';
-import { useEmailField } from '../../../hooks/useEmailField';
 import { EmailFieldDisplay } from '../EmailFieldDisplay';
 
 const EmailFieldValueSetterEffect = ({ value }: { value: string }) => {
@@ -21,6 +21,7 @@ const EmailFieldValueSetterEffect = ({ value }: { value: string }) => {
 const meta: Meta = {
   title: 'UI/Data/Field/Display/EmailFieldDisplay',
   decorators: [
+    MemoryRouterDecorator,
     (Story, { args }) => (
       <FieldContext.Provider
         value={{
@@ -39,10 +40,8 @@ const meta: Meta = {
           hotkeyScope: 'hotkey-scope',
         }}
       >
-        <MemoryRouter>
-          <EmailFieldValueSetterEffect value={args.value} />
-          <Story />
-        </MemoryRouter>
+        <EmailFieldValueSetterEffect value={args.value} />
+        <Story />
       </FieldContext.Provider>
     ),
     ComponentDecorator,

diff --git a/...cord/record-field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx b/...cord/record-field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
-import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { usePhoneField } from '@/object-record/record-field/meta-types/hooks/usePhoneField';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 
-import { FieldContext } from '../../../../contexts/FieldContext';
-import { usePhoneField } from '../../../hooks/usePhoneField';
 import { PhoneFieldDisplay } from '../PhoneFieldDisplay';
 
 const PhoneFieldValueSetterEffect = ({ value }: { value: string }) => {
@@ -21,6 +21,7 @@ const PhoneFieldValueSetterEffect = ({ value }: { value: string }) => {
 const meta: Meta = {
   title: 'UI/Data/Field/Display/PhoneFieldDisplay',
   decorators: [
+    MemoryRouterDecorator,
     (Story, { args }) => (
       <FieldContext.Provider
         value={{
@@ -41,10 +42,8 @@ const meta: Meta = {
           useUpdateRecord: () => [() => undefined, {}],
         }}
       >
-        <MemoryRouter>
-          <PhoneFieldValueSetterEffect value={args.value} />
-          <Story />
-        </MemoryRouter>
+        <PhoneFieldValueSetterEffect value={args.value} />
+        <Story />
       </FieldContext.Provider>
     ),
     ComponentDecorator,

diff --git a/...ges/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/...ges/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -13,8 +13,8 @@ import {
 import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
 import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
 import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
-import { RecordDuplicatesFieldCardSection } from '@/object-record/record-show/record-detail-section/components/RecordDuplicatesFieldCardSection';
-import { RecordRelationFieldCardSection } from '@/object-record/record-show/record-detail-section/components/RecordRelationFieldCardSection';
+import { RecordDetailDuplicatesSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailDuplicatesSection';
+import { RecordDetailRelationSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationSection';
 import { recordLoadingFamilyState } from '@/object-record/record-store/states/recordLoadingFamilyState';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { recordStoreIdentifierFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreIdentifierSelector';
@@ -194,7 +194,7 @@ export const RecordShowContainer = ({
                   </FieldContext.Provider>
                 ))}
               </PropertyBox>
-              <RecordDuplicatesFieldCardSection
+              <RecordDetailDuplicatesSection
                 objectRecordId={objectRecordId}
                 objectNameSingular={objectNameSingular}
               />
@@ -229,7 +229,7 @@ export const RecordShowContainer = ({
                       hotkeyScope: InlineCellHotkeyScope.InlineCell,
                     }}
                   >
-                    <RecordRelationFieldCardSection />
+                    <RecordDetailRelationSection />
                   </FieldContext.Provider>
                 ))}
             </>

diff --git a/...ect-record/record-show/record-detail-section/components/RecordDetailDuplicatesSection.tsx b/...ect-record/record-show/record-detail-section/components/RecordDetailDuplicatesSection.tsx
@@ -0,0 +1,37 @@
+import { RecordChip } from '@/object-record/components/RecordChip';
+import { useFindDuplicateRecords } from '@/object-record/hooks/useFindDuplicateRecords';
+import { RecordDetailRecordsList } from '@/object-record/record-show/record-detail-section/components/RecordDetailRecordsList';
+import { RecordDetailRecordsListItem } from '@/object-record/record-show/record-detail-section/components/RecordDetailRecordsListItem';
+import { RecordDetailSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailSection';
+import { RecordDetailSectionHeader } from '@/object-record/record-show/record-detail-section/components/RecordDetailSectionHeader';
+
+export const RecordDetailDuplicatesSection = ({
+  objectRecordId,
+  objectNameSingular,
+}: {
+  objectRecordId: string;
+  objectNameSingular: string;
+}) => {
+  const { records: duplicateRecords } = useFindDuplicateRecords({
+    objectRecordId,
+    objectNameSingular,
+  });
+
+  if (!duplicateRecords.length) return null;
+
+  return (
+    <RecordDetailSection>
+      <RecordDetailSectionHeader title="Duplicates" />
+      <RecordDetailRecordsList>
+        {duplicateRecords.slice(0, 5).map((duplicateRecord) => (
+          <RecordDetailRecordsListItem key={duplicateRecord.id}>
+            <RecordChip
+              record={duplicateRecord}
+              objectNameSingular={objectNameSingular}
+            />
+          </RecordDetailRecordsListItem>
+        ))}
+      </RecordDetailRecordsList>
+    </RecordDetailSection>
+  );
+};
diff --git a/...es/object-record/record-show/record-detail-section/components/RecordDetailRecordsList.tsx b/...es/object-record/record-show/record-detail-section/components/RecordDetailRecordsList.tsx
@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+const StyledRecordsList = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+  overflow: hidden;
+`;
+
+export { StyledRecordsList as RecordDetailRecordsList };
diff --git a/...bject-record/record-show/record-detail-section/components/RecordDetailRecordsListItem.tsx b/...bject-record/record-show/record-detail-section/components/RecordDetailRecordsListItem.tsx
@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+const StyledListItem = styled.div`
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spacing(1)};
+  display: flex;
+  height: ${({ theme }) => theme.spacing(10)};
+`;
+
+export { StyledListItem as RecordDetailRecordsListItem };
diff --git a/...t-record/record-show/record-detail-section/components/RecordDetailRelationRecordsList.tsx b/...t-record/record-show/record-detail-section/components/RecordDetailRelationRecordsList.tsx
@@ -0,0 +1,20 @@
+import { RecordDetailRecordsList } from '@/object-record/record-show/record-detail-section/components/RecordDetailRecordsList';
+import { RecordDetailRelationRecordsListItem } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+
+type RecordDetailRelationRecordsListProps = {
+  relationRecords: ObjectRecord[];
+};
+
+export const RecordDetailRelationRecordsList = ({
+  relationRecords,
+}: RecordDetailRelationRecordsListProps) => (
+  <RecordDetailRecordsList>
+    {relationRecords.slice(0, 5).map((relationRecord) => (
+      <RecordDetailRelationRecordsListItem
+        key={relationRecord.id}
+        relationRecord={relationRecord}
+      />
+    ))}
+  </RecordDetailRecordsList>
+);