feat: apply RecordDetailSection style on RecordDuplicatesSection and … (#4241)

feat: apply RecordDetailSection style on RecordDuplicatesSection and add stories

Closes #3963, Closes #4240

packages/twenty-front/src/testing/decorators/MemoryRouterDecorator.tsx

@@ -0,0 +1,8 @@
+import { MemoryRouter } from 'react-router-dom';
+import { Decorator } from '@storybook/react';
+
+export const MemoryRouterDecorator: Decorator = (Story) => (
+  <MemoryRouter>
+    <Story />
+  </MemoryRouter>
+);

packages/twenty-front/src/testing/graphqlMocks.ts

@@ -7,7 +7,10 @@ import { FIND_MANY_OBJECT_METADATA_ITEMS } from '@/object-metadata/graphql/queri
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { mockedActivities } from '~/testing/mock-data/activities';
-import { mockedCompaniesData } from '~/testing/mock-data/companies';
+import {
+  mockedCompaniesData,
+  mockedDuplicateCompanyData,
+} from '~/testing/mock-data/companies';
 import { mockedClientConfig } from '~/testing/mock-data/config';
 import { mockedPipelineSteps } from '~/testing/mock-data/pipeline-steps';
 import { mockedUsersData } from '~/testing/mock-data/users';
@@ -140,6 +143,49 @@ export const graphqlMocks = {
         },
       });
     }),
+    graphql.query('FindDuplicateCompany', () => {
+      return HttpResponse.json({
+        data: {
+          companyDuplicates: {
+            edges: [
+              {
+                node: {
+                  ...mockedDuplicateCompanyData,
+                  favorites: {
+                    edges: [],
+                    __typename: 'FavoriteConnection',
+                  },
+                  attachments: {
+                    edges: [],
+                    __typename: 'AttachmentConnection',
+                  },
+                  people: {
+                    edges: [],
+                    __typename: 'PersonConnection',
+                  },
+                  opportunities: {
+                    edges: [],
+                    __typename: 'OpportunityConnection',
+                  },
+                  activityTargets: {
+                    edges: [],
+                    __typename: 'ActivityTargetConnection',
+                  },
+                },
+                cursor: null,
+              },
+            ],
+            pageInfo: {
+              hasNextPage: false,
+              hasPreviousPage: false,
+              startCursor: null,
+              endCursor: null,
+            },
+            totalCount: 1,
+          },
+        },
+      });
+    }),
     graphql.query('FindManyPeople', () => {
       return HttpResponse.json({
         data: {

packages/twenty-front/src/testing/mock-data/companies.ts

@@ -179,6 +179,11 @@ export const mockedCompaniesData: Array<MockedCompany> = [
   },
 ];
 
+export const mockedDuplicateCompanyData: MockedCompany = {
+  ...mockedCompaniesData[0],
+  id: '8b40856a-2ec9-4c03-8bc0-c032c89e1824',
+};
+
 export const mockedEmptyCompanyData = {
   id: '9231e6ee-4cc2-4c7b-8c55-dff16f4d968a',
   name: '',