Merge branch 'sync/ce-ee' of github.com:makeplane/plane-ee into develop

space/store/issue_details.ts

@@ -54,7 +54,7 @@ export interface IIssueDetailStore {
   removeIssueVote: (workspaceId: string, projectId: string, issueId: string) => Promise<void>;
 }
 
-class IssueDetailStore implements IssueDetailStore {
+class IssueDetailStore implements IIssueDetailStore {
   loader: boolean = false;
   error: any = null;
   peekId: string | null = null;

web/components/core/favorite-star.tsx

@@ -0,0 +1,28 @@
+import { Star } from "lucide-react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+type Props = {
+  buttonClassName?: string;
+  iconClassName?: string;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  selected: boolean;
+};
+
+export const FavoriteStar: React.FC<Props> = (props) => {
+  const { buttonClassName, iconClassName, onClick, selected } = props;
+
+  return (
+    <button type="button" className={cn("h-4 w-4 grid place-items-center", buttonClassName)} onClick={onClick}>
+      <Star
+        className={cn(
+          "h-4 w-4 text-custom-text-300 transition-all",
+          {
+            "fill-yellow-500 stroke-yellow-500": selected,
+          },
+          iconClassName
+        )}
+      />
+    </button>
+  );
+};

web/components/core/index.ts

@@ -1,7 +1,8 @@
 export * from "./filters";
 export * from "./modals";
 export * from "./sidebar";
-export * from "./theme";
 export * from "./activity";
+export * from "./favorite-star";
+export * from "./theme";
 export * from "./image-picker-popover";
 export * from "./page-title";

web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx

@@ -1,17 +1,18 @@
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Star, User2 } from "lucide-react";
-// hooks
-import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui";
-import { CycleQuickActions } from "@/components/cycles";
-import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
-import { renderFormattedDate } from "@/helpers/date-time.helper";
-import { useCycle, useEventTracker, useMember } from "@/hooks/store";
-// components
+import { User2 } from "lucide-react";
 // ui
-// helpers
+import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui";
+// components
+import { FavoriteStar } from "@/components/core";
+import { CycleQuickActions } from "@/components/cycles";
 // constants
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
+// helpers
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+// hooks
+import { useCycle, useEventTracker, useMember } from "@/hooks/store";
 
 type Props = {
   cycleId: string;
@@ -112,15 +113,13 @@ export const UpcomingCycleListItem: React.FC<Props> = observer((props) => {
           </span>
         )}
 
-        {cycle.is_favorite ? (
-          <button type="button" onClick={handleRemoveFromFavorites}>
-            <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-          </button>
-        ) : (
-          <button type="button" onClick={handleAddToFavorites}>
-            <Star className="h-3.5 w-3.5 text-custom-text-200" />
-          </button>
-        )}
+        <FavoriteStar
+          onClick={(e) => {
+            if (cycle.is_favorite) handleRemoveFromFavorites(e);
+            else handleAddToFavorites(e);
+          }}
+          selected={!!cycle.is_favorite}
+        />
 
         {workspaceSlug && projectId && (
           <CycleQuickActions

web/components/cycles/board/cycles-board-card.tsx

@@ -2,25 +2,23 @@ import { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-// components
-import { Info, Star } from "lucide-react";
+import { Info } from "lucide-react";
+// types
 import type { TCycleGroups } from "@plane/types";
-import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
-import { CycleQuickActions } from "@/components/cycles";
-// hooks
 // ui
-// icons
-// helpers
-// import { copyTextToClipboard } from "@/helpers/string.helper";
+import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
+// components
+import { FavoriteStar } from "@/components/core";
+import { CycleQuickActions } from "@/components/cycles";
 // constants
 import { CYCLE_STATUS } from "@/constants/cycle";
 import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
 import { EUserWorkspaceRoles } from "@/constants/workspace";
+// helpers
 import { findHowManyDaysLeft, getDate, renderFormattedDate } from "@/helpers/date-time.helper";
-// constants
+// hooks
 import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-//.types
 
 export interface ICyclesBoardCard {
   workspaceSlug: string;
@@ -69,8 +67,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
     ? cycleTotalIssues === 0
       ? "0 Issue"
       : cycleTotalIssues === cycleDetails.completed_issues
-      ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
-      : `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues`
+        ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
+        : `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues`
     : "0 Issue";
 
   const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
@@ -234,16 +232,15 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
                 <span className="text-xs text-custom-text-400">No due date</span>
               )}
               <div className="z-[5] flex items-center gap-1.5">
-                {isEditingAllowed &&
-                  (cycleDetails.is_favorite ? (
-                    <button type="button" onClick={handleRemoveFromFavorites}>
-                      <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                    </button>
-                  ) : (
-                    <button type="button" onClick={handleAddToFavorites}>
-                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                    </button>
-                  ))}
+                {isEditingAllowed && (
+                  <FavoriteStar
+                    onClick={(e) => {
+                      if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
+                      else handleAddToFavorites(e);
+                    }}
+                    selected={!!cycleDetails.is_favorite}
+                  />
+                )}
 
                 <CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
               </div>

web/components/cycles/list/cycles-list-item.tsx

@@ -3,12 +3,13 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 // icons
-import { Check, Info, Star, User2 } from "lucide-react";
+import { Check, Info, User2 } from "lucide-react";
 // types
 import type { TCycleGroups } from "@plane/types";
 // ui
 import { Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar, setPromiseToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { CycleQuickActions } from "@/components/cycles";
 // constants
 import { CYCLE_STATUS } from "@/constants/cycle";
@@ -231,17 +232,15 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
                 </div>
               </Tooltip>
 
-              {isEditingAllowed &&
-                !isArchived &&
-                (cycleDetails.is_favorite ? (
-                  <button type="button" onClick={handleRemoveFromFavorites}>
-                    <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                  </button>
-                ) : (
-                  <button type="button" onClick={handleAddToFavorites}>
-                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                  </button>
-                ))}
+              {isEditingAllowed && !isArchived && (
+                <FavoriteStar
+                  onClick={(e) => {
+                    if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
+                    else handleAddToFavorites(e);
+                  }}
+                  selected={!!cycleDetails.is_favorite}
+                />
+              )}
               <CycleQuickActions
                 cycleId={cycleId}
                 projectId={projectId}

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>
   );
 });

web/components/modules/module-card-item.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-// icons
-import { Info, Star } from "lucide-react";
+import { Info } from "lucide-react";
 // ui
 import { Avatar, AvatarGroup, LayersIcon, Tooltip, setPromiseToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { ModuleQuickActions } from "@/components/modules";
 // constants
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
@@ -139,8 +139,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     ? !moduleTotalIssues || moduleTotalIssues === 0
       ? "0 Issue"
       : moduleTotalIssues === moduleDetails.completed_issues
-      ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
-      : `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues`
+        ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
+        : `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues`
     : "0 Issue";
 
   return (
@@ -224,16 +224,15 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
             )}
 
             <div className="z-[5] flex items-center gap-1.5">
-              {isEditingAllowed &&
-                (moduleDetails.is_favorite ? (
-                  <button type="button" onClick={handleRemoveFromFavorites}>
-                    <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                  </button>
-                ) : (
-                  <button type="button" onClick={handleAddToFavorites}>
-                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                  </button>
-                ))}
+              {isEditingAllowed && (
+                <FavoriteStar
+                  onClick={(e) => {
+                    if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+                    else handleAddToFavorites(e);
+                  }}
+                  selected={!!moduleDetails.is_favorite}
+                />
+              )}
               {workspaceSlug && projectId && (
                 <ModuleQuickActions
                   moduleId={moduleId}

web/components/modules/module-list-item.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-// icons
-import { Check, Info, Star, User2 } from "lucide-react";
+import { Check, Info, User2 } from "lucide-react";
 // ui
 import { Avatar, AvatarGroup, CircularProgressIndicator, Tooltip, setPromiseToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { ModuleQuickActions } from "@/components/modules";
 // constants
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
@@ -212,17 +212,15 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
               </div>
             </Tooltip>
 
-            {isEditingAllowed &&
-              !isArchived &&
-              (moduleDetails.is_favorite ? (
-                <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
-                  <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                </button>
-              ) : (
-                <button type="button" onClick={handleAddToFavorites} className="z-[1]">
-                  <Star className="h-3.5 w-3.5 text-custom-text-300" />
-                </button>
-              ))}
+            {isEditingAllowed && !isArchived && (
+              <FavoriteStar
+                onClick={(e) => {
+                  if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+                  else handleAddToFavorites(e);
+                }}
+                selected={moduleDetails.is_favorite}
+              />
+            )}
             {workspaceSlug && projectId && (
               <ModuleQuickActions
                 moduleId={moduleId}

web/components/pages/list/block.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { Circle, Info, Lock, Minus, Star, UsersRound } from "lucide-react";
+import { Circle, Info, Lock, Minus, UsersRound } from "lucide-react";
 import { Avatar, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { PageQuickActions } from "@/components/pages";
 // helpers
-import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
 import { useMember, usePage } from "@/hooks/store";
@@ -86,21 +86,14 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
         </Tooltip>
 
         {/* favorite/unfavorite */}
-        <button
-          type="button"
-          className="h-4 w-4 grid place-items-center"
+        <FavoriteStar
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
             handleFavorites();
           }}
-        >
-          <Star
-            className={cn("h-4 w-4 text-custom-text-300 transition-all", {
-              "fill-yellow-500 stroke-yellow-500": is_favorite,
-            })}
-          />
-        </button>
+          selected={is_favorite}
+        />
 
         {/* quick actions dropdown */}
         <PageQuickActions pageId={pageId} projectId={projectId} workspaceSlug={workspaceSlug} />

web/components/project/card.tsx

@@ -2,23 +2,23 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { ArchiveRestoreIcon, Check, LinkIcon, Lock, Pencil, Star, Trash2 } from "lucide-react";
+import { ArchiveRestoreIcon, Check, LinkIcon, Lock, Pencil, Trash2 } from "lucide-react";
+// types
 import type { IProject } from "@plane/types";
 // ui
 import { Avatar, AvatarGroup, Button, Tooltip, TOAST_TYPE, setToast, setPromiseToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { ArchiveRestoreProjectModal, DeleteProjectModal, JoinProjectModal, ProjectLogo } from "@/components/project";
-// helpers
+// constants
 import { EUserProjectRoles } from "@/constants/project";
+// helpers
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useProject } from "@/hooks/store";
-// types
 import { usePlatformOS } from "@/hooks/use-platform-os";
-// hooks
-// constants
 
 type Props = {
   project: IProject;
@@ -166,19 +166,19 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
                 >
                   <LinkIcon className="h-3 w-3 text-white" />
                 </button>
-                <button
-                  className="flex h-6 w-6 items-center justify-center rounded bg-white/10"
+                <FavoriteStar
+                  buttonClassName="h-6 w-6 bg-white/10"
+                  iconClassName={cn("h-3 w-3", {
+                    "text-white": !project.is_favorite,
+                  })}
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     if (project.is_favorite) handleRemoveFromFavorites();
                     else handleAddToFavorites();
                   }}
-                >
-                  <Star
-                    className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
-                  />
-                </button>
+                  selected={project.is_favorite}
+                />
               </div>
             )}
           </div>

web/components/project/send-project-invitation-modal.tsx

@@ -142,8 +142,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
       if (!memberDetails?.member) return;
       return {
         value: `${memberDetails?.member.id}`,
-        query: `${memberDetails?.member.first_name} ${memberDetails?.member
-          .last_name} ${memberDetails?.member.display_name.toLowerCase()}`,
+        query: `${memberDetails?.member.first_name} ${
+          memberDetails?.member.last_name
+        } ${memberDetails?.member.display_name.toLowerCase()}`,
         content: (
           <div className="flex w-full items-center gap-2">
             <div className="flex-shrink-0 pt-0.5">
@@ -203,8 +204,11 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
 
                     <div className="mb-3 space-y-4">
                       {fields.map((field, index) => (
-                        <div key={field.id} className="group mb-1 grid grid-cols-12 items-start gap-x-4 text-sm">
-                          <div className="col-span-7 flex flex-col gap-1">
+                        <div
+                          key={field.id}
+                          className="group mb-1 grid grid-cols-6  sm:grid-cols-12 items-start gap-x-4 text-sm"
+                        >
+                          <div className="col-span-4 sm:col-span-10 flex flex-col gap-1">
                             <Controller
                               control={control}
                               name={`members.${index}.member_id`}
@@ -246,7 +250,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                             )}
                           </div>
 
-                          <div className="col-span-5 flex items-center justify-between gap-2">
+                          <div className="col-span-2 sm:col-span-2 flex items-center justify-between gap-2">
                             <div className="flex w-full flex-col gap-1">
                               <Controller
                                 name={`members.${index}.role`}
@@ -284,8 +288,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                 </span>
                               )}
                             </div>
-                            <div className="flex-item flex w-6">
-                              {fields.length > 1 && (
+
+                            {fields.length > 1 && (
+                              <div className="flex-item flex w-6">
                                 <button
                                   type="button"
                                   className="place-items-center self-center rounded"
@@ -293,8 +298,8 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                 >
                                   <X className="h-4 w-4 text-custom-text-200" />
                                 </button>
-                              )}
-                            </div>
+                              </div>
+                            )}
                           </div>
                         </div>
                       ))}

web/components/project/sidebar-list-item.tsx

@@ -273,7 +273,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   {project.is_favorite && (
                     <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
                       <span className="flex items-center justify-start gap-2">
-                        <Star className="h-3.5 w-3.5 fill-orange-400 stroke-[1.5] text-orange-400" />
+                        <Star className="h-3.5 w-3.5 fill-yellow-500 stroke-yellow-500" />
                         <span>Remove from favorites</span>
                       </span>
                     </CustomMenu.MenuItem>

web/components/views/view-list-item.tsx

@@ -2,11 +2,13 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "lucide-react";
+import { LinkIcon, PencilIcon, TrashIcon } from "lucide-react";
+// types
 import { IProjectView } from "@plane/types";
 // ui
 import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
 // components
+import { FavoriteStar } from "@/components/core";
 import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "@/components/views";
 // constants
 import { EUserProjectRoles } from "@/constants/project";
@@ -15,7 +17,6 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useProjectView, useUser } from "@/hooks/store";
-// types
 
 type Props = {
   view: IProjectView;
@@ -91,32 +92,17 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
                   <p className="hidden rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200 group-hover:block">
                     {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
                   </p>
-                  {isEditingAllowed &&
-                    (view.is_favorite ? (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          handleRemoveFromFavorites();
-                        }}
-                        className="grid place-items-center"
-                      >
-                        <StarIcon className="h-3.5 w-3.5 fill-orange-400 text-orange-400" strokeWidth={2} />
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          handleAddToFavorites();
-                        }}
-                        className="grid place-items-center"
-                      >
-                        <StarIcon size={14} strokeWidth={2} />
-                      </button>
-                    ))}
+                  {isEditingAllowed && (
+                    <FavoriteStar
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (view.is_favorite) handleRemoveFromFavorites();
+                        else handleAddToFavorites();
+                      }}
+                      selected={view.is_favorite}
+                    />
+                  )}
 
                   <CustomMenu ellipsis>
                     {isEditingAllowed && (

web/components/workspace/send-workspace-invitation-modal.tsx

@@ -121,8 +121,8 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
 
                     <div className="mb-3 space-y-4">
                       {fields.map((field, index) => (
-                        <div key={field.id} className="group relative grid grid-cols-11 items-start gap-4">
-                          <div className="col-span-7">
+                        <div key={field.id} className="group relative grid grid-cols-12 items-start gap-4">
+                          <div className="col-span-9">
                             <Controller
                               control={control}
                               name={`emails.${index}.email`}

web/constants/empty-state.ts

@@ -533,7 +533,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",
   },