Sammy/t 362 on people view when i click on comment bubble icon row level (#202)

* test: add empty comment test

* test: comments section opens on click on comments chip

* test: add a failing test for opening comment section

* feature: open comments drawer on click on comment chip

* test: refactor company test, create folders

front/src/modules/comments/components/comments/CommentChip.tsx

@@ -51,7 +51,7 @@ export function CommentChip({ count, onClick }: CommentChipProps) {
   const formattedCount = count > 99 ? '99+' : count;
 
   return (
-    <StyledChip onClick={onClick}>
+    <StyledChip data-testid="comment-chip" onClick={onClick}>
       <StyledCount>{formattedCount}</StyledCount>
       <IconComment size={12} />
     </StyledChip>

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { CellCommentChip } from '@/comments/components/comments/CellCommentChip';
 import { EditableDoubleText } from '@/ui/components/editable-cell/types/EditableDoubleText';
 
+import { useOpenCommentRightDrawer } from '../../comments/hooks/useOpenCommentRightDrawer';
 import { usePeopleCommentsCountQuery } from '../../comments/services';
 
 import { PersonChip } from './PersonChip';
@@ -41,10 +42,17 @@ export function EditablePeopleFullName({
     onChange(firstValue, secondValue);
   }
 
+  const openCommentRightDrawer = useOpenCommentRightDrawer();
+
   function handleCommentClick(event: React.MouseEvent<HTMLDivElement>) {
     event.preventDefault();
     event.stopPropagation();
-    console.log('comment clicked');
+    openCommentRightDrawer([
+      {
+        type: 'Company',
+        id: personId,
+      },
+    ]);
   }
 
   const commentCount = usePeopleCommentsCountQuery(personId);

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

@@ -0,0 +1,38 @@
+import { expect } from '@storybook/jest';
+import type { Meta } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { Companies } from '../Companies';
+
+import { Story } from './Companies.stories';
+import { render } from './shared';
+
+const meta: Meta<typeof Companies> = {
+  title: 'Pages/Companies/Comments',
+  component: Companies,
+};
+
+export default meta;
+
+export const OpenCommentsSection: Story = {
+  render,
+  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__/Companies.filterBy.stories.tsx

@@ -8,7 +8,7 @@ import { Story } from './Companies.stories';
 import { mocks, render } from './shared';
 
 const meta: Meta<typeof Companies> = {
-  title: 'Pages/Companies',
+  title: 'Pages/Companies/FilterBy',
   component: Companies,
 };
 

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

@@ -8,7 +8,7 @@ import { Story } from './Companies.stories';
 import { mocks, render } from './shared';
 
 const meta: Meta<typeof Companies> = {
-  title: 'Pages/Companies',
+  title: 'Pages/Companies/SortBy',
   component: Companies,
 };
 

front/src/pages/people/__stories__/People.comments.stories.tsx

@@ -0,0 +1,38 @@
+import { expect } from '@storybook/jest';
+import type { Meta } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { People } from '../People';
+
+import { Story } from './People.stories';
+import { render } from './shared';
+
+const meta: Meta<typeof People> = {
+  title: 'Pages/People/Comments',
+  component: People,
+};
+
+export default meta;
+
+export const OpenCommentsSection: Story = {
+  render,
+  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,
+  },
+};