306 implement multi relation picker for person and try to factorize relation picker (#319)

* Removed useless folder

* First working version

* Refactored MultipleEntitySelect and splitted into 2 components

* Added TODO

* Removed useless Query

* Fixed refetch

* Fixed naming

* Fix tests

---------

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

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

@@ -0,0 +1,45 @@
+import { useRecoilState } from 'recoil';
+
+import { CommentThreadForDrawer } from '@/comments/types/CommentThreadForDrawer';
+import { RightDrawerBody } from '@/ui/layout/right-drawer/components/RightDrawerBody';
+import { RightDrawerPage } from '@/ui/layout/right-drawer/components/RightDrawerPage';
+import { RightDrawerTopBar } from '@/ui/layout/right-drawer/components/RightDrawerTopBar';
+import {
+  SortOrder,
+  useGetCommentThreadsByTargetsQuery,
+} from '~/generated/graphql';
+
+import { commentableEntityArrayState } from '../states/commentableEntityArrayState';
+
+import { CommentThread } from './CommentThread';
+
+export function RightDrawerComments() {
+  const [commentableEntityArray] = useRecoilState(commentableEntityArrayState);
+
+  const { data: queryResult } = useGetCommentThreadsByTargetsQuery({
+    variables: {
+      commentThreadTargetIds: commentableEntityArray.map(
+        (commentableEntity) => commentableEntity.id,
+      ),
+      orderBy: [
+        {
+          createdAt: SortOrder.Desc,
+        },
+      ],
+    },
+  });
+
+  const commentThreads: CommentThreadForDrawer[] =
+    queryResult?.findManyCommentThreads ?? [];
+
+  return (
+    <RightDrawerPage>
+      <RightDrawerTopBar title="Comments" />
+      <RightDrawerBody>
+        {commentThreads.map((commentThread) => (
+          <CommentThread key={commentThread.id} commentThread={commentThread} />
+        ))}
+      </RightDrawerBody>
+    </RightDrawerPage>
+  );
+}