From 3c384534f61c0b3ada7bae076b64dc8053b35074 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 16 Apr 2024 12:41:38 +0530
Subject: [PATCH] chore: issue comment empty state added

---
 .../issue-activity/comments/root.tsx          | 34 ++++++++++++-------
 web/constants/empty-state.ts                  |  2 +-
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/web/components/issues/issue-detail/issue-activity/comments/root.tsx b/web/components/issues/issue-detail/issue-activity/comments/root.tsx
index 1db216537ee..3381d02c927 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/root.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/root.tsx
@@ -1,5 +1,9 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
+// components
+import { EmptyState } from "@/components/empty-state";
+// hooks
+import { EmptyStateType } from "@/constants/empty-state";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
 // components
@@ -28,18 +32,24 @@ export const IssueCommentRoot: FC<TIssueCommentRoot> = observer((props) => {
 
   return (
     <div>
-      {commentIds.map((commentId, index) => (
-        <IssueCommentCard
-          projectId={projectId}
-          key={commentId}
-          workspaceSlug={workspaceSlug}
-          commentId={commentId}
-          ends={index === 0 ? "top" : index === commentIds.length - 1 ? "bottom" : undefined}
-          activityOperations={activityOperations}
-          showAccessSpecifier={showAccessSpecifier}
-          disabled={disabled}
-        />
-      ))}
+      {commentIds.length > 0 ? (
+        commentIds.map((commentId, index) => (
+          <IssueCommentCard
+            projectId={projectId}
+            key={commentId}
+            workspaceSlug={workspaceSlug}
+            commentId={commentId}
+            ends={index === 0 ? "top" : index === commentIds.length - 1 ? "bottom" : undefined}
+            activityOperations={activityOperations}
+            showAccessSpecifier={showAccessSpecifier}
+            disabled={disabled}
+          />
+        ))
+      ) : (
+        <div className="flex items-center justify-center py-9">
+          <EmptyState type={EmptyStateType.ISSUE_COMMENT_EMPTY_STATE} layout="screen-simple" />
+        </div>
+      )}
     </div>
   );
 });
diff --git a/web/constants/empty-state.ts b/web/constants/empty-state.ts
index 6130674fd4e..d62c8808ebc 100644
--- a/web/constants/empty-state.ts
+++ b/web/constants/empty-state.ts
@@ -532,7 +532,7 @@ const emptyStateDetails = {
   [EmptyStateType.ISSUE_COMMENT_EMPTY_STATE]: {
     key: EmptyStateType.ISSUE_COMMENT_EMPTY_STATE,
     title: "No comments yet",
-    description: "Comments can be used as a discussion and follow-up space for the issues",
+    description: "Comments can be used as a discussion and \n follow-up space for the issues",
     path: "/empty-state/search/comments",
   },