chore: issue comment empty state added (#4202)

makeplane · Apr 16, 2024 · 0a6d771 · 0a6d771
1 parent 18b5735
commit 0a6d771
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 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
@@ -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
@@ -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",
   },