Add "show company / people" view and "Notes" concept (#528)

* Begin adding show view and refactoring threads to become notes

* Progress on design

* Progress redesign timeline

* Dropdown button, design improvement

* Open comment thread edit mode in drawer

* Autosave local storage and commentThreadcount

* Improve display and fix missing key issue

* Remove some hardcoded CSS properties

* Create button

* Split company show into ui/business + fix eslint

* Fix font weight

* Begin auto-save on edit mode

* Save server-side query result to Apollo cache

* Fix save behavior

* Refetch timeline after creating note

* Rename createCommentThreadWithComment

* Improve styling

* Revert "Improve styling"

This reverts commit 9fbbf2db006e529330edc64f3eb8ff9ecdde6bb0.

* Improve CSS styling

* Bring back border radius inadvertently removed

* padding adjustment

* Improve blocknote design

* Improve edit mode display

* Remove Comments.tsx

* Remove irrelevant comment stories

* Removed un-necessary panel component

* stop using fragment, move trash icon

* Add a basic story for CompanyShow

* Add a basic People show view

* Fix storybook tests

* Add very basic Person story

* Refactor PR1

* Refactor part 2

* Refactor part 3

* Refactor part 4

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/pages/companies/__stories__/Companies.comments.stories.tsx

@@ -1,38 +0,0 @@
-import { expect } from '@storybook/jest';
-import type { Meta } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-
-import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
-
-import { Companies } from '../Companies';
-
-import { Story } from './Companies.stories';
-
-const meta: Meta<typeof Companies> = {
-  title: 'Pages/Companies/Comments',
-  component: Companies,
-};
-
-export default meta;
-
-export const OpenCommentsSection: Story = {
-  render: getRenderWrapperForPage(<Companies />, '/companies'),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const firstRow = await canvas.findByTestId('row-id-1');
-
-    expect(firstRow).toBeDefined();
-
-    const commentsChip = await within(firstRow).findByTestId('comment-chip');
-    expect(commentsChip).toBeDefined();
-
-    userEvent.click(commentsChip);
-    const commentSection = await canvas.findByText('Comments');
-    expect(commentSection).toBeDefined();
-  },
-  parameters: {
-    msw: graphqlMocks,
-  },
-};

front/src/pages/companies/__stories__/Company.stories.tsx

@@ -0,0 +1,80 @@
+import { getOperationName } from '@apollo/client/utilities';
+import type { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
+import { graphql } from 'msw';
+
+import {
+  GET_COMMENT_THREAD,
+  GET_COMMENT_THREADS_BY_TARGETS,
+} from '@/comments/services';
+import { CREATE_COMMENT_THREAD_WITH_COMMENT } from '@/comments/services/create';
+import { GET_COMPANY } from '@/companies/services';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedCommentThreads } from '~/testing/mock-data/comment-threads';
+import { mockedCompaniesData } from '~/testing/mock-data/companies';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
+
+import { CompanyShow } from '../CompanyShow';
+
+const meta: Meta<typeof CompanyShow> = {
+  title: 'Pages/Companies/Company',
+  component: CompanyShow,
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof CompanyShow>;
+
+export const Default: Story = {
+  render: getRenderWrapperForPage(
+    <CompanyShow />,
+    '/companies/89bb825c-171e-4bcc-9cf7-43448d6fb278',
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const notesButton = await canvas.findByText('Notes');
+    await notesButton.click();
+  },
+  parameters: {
+    msw: [
+      ...graphqlMocks,
+      graphql.mutation(
+        getOperationName(CREATE_COMMENT_THREAD_WITH_COMMENT) ?? '',
+        (req, res, ctx) => {
+          return res(
+            ctx.data({
+              createOneCommentThread: mockedCommentThreads[0],
+            }),
+          );
+        },
+      ),
+      graphql.query(
+        getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
+        (req, res, ctx) => {
+          return res(
+            ctx.data({
+              findManyCommentThreads: mockedCommentThreads,
+            }),
+          );
+        },
+      ),
+      graphql.query(
+        getOperationName(GET_COMMENT_THREAD) ?? '',
+        (req, res, ctx) => {
+          return res(
+            ctx.data({
+              findManyCommentThreads: mockedCommentThreads[0],
+            }),
+          );
+        },
+      ),
+      graphql.query(getOperationName(GET_COMPANY) ?? '', (req, res, ctx) => {
+        return res(
+          ctx.data({
+            findUniqueCompany: mockedCompaniesData[0],
+          }),
+        );
+      }),
+    ],
+  },
+};