list and spreadsheet sub issues mutation issue (#4415)

web/components/issues/issue-detail/parent-select.tsx

@@ -34,7 +34,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
     isParentIssueModalOpen,
     toggleParentIssueModal,
     removeSubIssue,
-    subIssues: { setSubIssueHelpers },
+    subIssues: { setSubIssueHelpers, fetchSubIssues },
   } = useIssueDetail();
 
   // derived values
@@ -47,7 +47,8 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
     try {
       await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
       await issueOperations.fetch(workspaceSlug, projectId, issueId);
-      toggleParentIssueModal(issueId);
+      _issueId && (await fetchSubIssues(workspaceSlug, projectId, _issueId));
+      toggleParentIssueModal(null);
     } catch (error) {
       console.error("something went wrong while fetching the issue");
     }
@@ -62,6 +63,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
     try {
       setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
       await removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
+      await fetchSubIssues(workspaceSlug, projectId, parentIssueId);
       setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
     } catch (error) {
       setToast({

web/components/issues/issue-layouts/list/block.tsx

@@ -57,11 +57,14 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
     setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
 
   const issue = issuesMap[issueId];
+  const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
   const { isMobile } = usePlatformOS();
   if (!issue) return null;
 
   const canEditIssueProperties = canEditProperties(issue.project_id);
   const projectIdentifier = getProjectIdentifierById(issue.project_id);
+  // if sub issues have been fetched for the issue, use that for count or use issue's sub_issues_count
+  const subIssuesCount = subIssues ? subIssues.length : issue.sub_issues_count;
 
   const paddingLeft = `${spacingLeft}px`;
 
@@ -90,11 +93,11 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
         }
       )}
     >
-      <div className="flex w-full truncate" style={issue.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}>
+      <div className="flex w-full truncate" style={nestingLevel !== 0 ? { paddingLeft } : {}}>
         <div className="flex flex-grow items-center gap-3 truncate">
           <div className="flex items-center gap-1.5">
             <div className="flex h-5 w-5 items-center justify-center">
-              {issue.sub_issues_count > 0 && (
+              {subIssuesCount > 0 && (
                 <button
                   className="flex items-center justify-center h-5 w-5 cursor-pointer rounded-sm text-custom-text-400  hover:text-custom-text-300"
                   onClick={handleToggleExpand}

web/components/issues/issue-layouts/spreadsheet/issue-row.tsx

@@ -166,6 +166,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
   const { subIssues: subIssuesStore, issue } = useIssueDetail();
 
   const issueDetail = issue.getIssueById(issueId);
+  const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
 
   const paddingLeft = `${spacingLeft}px`;
 
@@ -199,6 +200,8 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
   };
 
   const disableUserActions = !canEditProperties(issueDetail.project_id);
+  // if sub issues have been fetched for the issue, use that for count or use issue's sub_issues_count
+  const subIssuesCount = subIssues ? subIssues.length : issueDetail.sub_issues_count;
 
   return (
     <>
@@ -219,13 +222,13 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
         >
           <div
             className="flex min-w-min items-center gap-0.5 px-4 py-2.5 pl-1.5 pr-0"
-            style={issueDetail.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}
+            style={nestingLevel !== 0 ? { paddingLeft } : {}}
           >
             <div className="flex items-center">
               {/* bulk ops */}
               <span className="size-3.5" />
               <div className="flex size-4 items-center justify-center">
-                {issueDetail.sub_issues_count > 0 && (
+                {subIssuesCount > 0 && (
                   <button
                     className="flex items-center justify-center size-4 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
                     onClick={handleToggleExpand}