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/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: {