fix infinite loop for sub issues (#4550)

web/components/issues/sub-issues/issue-list-item.tsx

@@ -18,6 +18,7 @@ export interface ISubIssues {
   workspaceSlug: string;
   projectId: string;
   parentIssueId: string;
+  rootIssueId: string;
   spacingLeft: number;
   disabled: boolean;
   handleIssueCrudState: (
@@ -34,6 +35,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
     workspaceSlug,
     projectId,
     parentIssueId,
+    rootIssueId,
     issueId,
     spacingLeft = 10,
     disabled,
@@ -70,6 +72,10 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
     setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
 
   if (!issue) return <></>;
+
+  // check if current issue is the root issue
+  const isCurrentIssueRoot = issueId === rootIssueId;
+
   return (
     <div key={issueId}>
       {issue && (
@@ -78,7 +84,8 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
           style={{ paddingLeft: `${spacingLeft}px` }}
         >
           <div className="h-[22px] w-[22px] flex-shrink-0">
-            {subIssueCount > 0 && (
+            {/* disable the chevron when current issue is also the root issue*/}
+            {subIssueCount > 0 && !isCurrentIssueRoot && (
               <>
                 {subIssueHelpers.preview_loader.includes(issue.id) ? (
                   <div className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-sm bg-custom-background-80 transition-all">
@@ -206,11 +213,13 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
         </div>
       )}
 
-      {subIssueHelpers.issue_visibility.includes(issueId) && subIssueCount > 0 && (
+      {/* should not expand the current issue if it is also the root issue*/}
+      {subIssueHelpers.issue_visibility.includes(issueId) && subIssueCount > 0 && !isCurrentIssueRoot && (
         <IssueList
           workspaceSlug={workspaceSlug}
           projectId={issue.project_id}
           parentIssueId={issue.id}
+          rootIssueId={rootIssueId}
           spacingLeft={spacingLeft + 22}
           disabled={disabled}
           handleIssueCrudState={handleIssueCrudState}

web/components/issues/sub-issues/issues-list.tsx

@@ -12,6 +12,7 @@ export interface IIssueList {
   workspaceSlug: string;
   projectId: string;
   parentIssueId: string;
+  rootIssueId: string;
   spacingLeft: number;
   disabled: boolean;
   handleIssueCrudState: (
@@ -27,6 +28,7 @@ export const IssueList: FC<IIssueList> = observer((props) => {
     workspaceSlug,
     projectId,
     parentIssueId,
+    rootIssueId,
     spacingLeft = 10,
     disabled,
     handleIssueCrudState,
@@ -50,6 +52,7 @@ export const IssueList: FC<IIssueList> = observer((props) => {
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 parentIssueId={parentIssueId}
+                rootIssueId={rootIssueId}
                 issueId={issueId}
                 spacingLeft={spacingLeft}
                 disabled={disabled}

web/components/issues/sub-issues/root.tsx

@@ -399,6 +399,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                     workspaceSlug={workspaceSlug}
                     projectId={projectId}
                     parentIssueId={parentIssueId}
+                    rootIssueId={parentIssueId}
                     spacingLeft={10}
                     disabled={!disabled}
                     handleIssueCrudState={handleIssueCrudState}