[WEB-3711] fix: relations delete issue (#6887)

* fix: relations delete issue

* fix: removed unnecessary type casting

web/core/components/issues/issue-detail-widgets/relations/content.tsx

@@ -44,6 +44,7 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
   const [issueCrudState, setIssueCrudState] = useState<{
     update: TIssueCrudState;
     delete: TIssueCrudState;
+    removeRelation: TIssueCrudState & { relationKey: string | undefined; relationIssueId: string | undefined };
   }>({
     update: {
       toggle: false,
@@ -55,11 +56,18 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
       issueId: undefined,
       issue: undefined,
     },
+    removeRelation: {
+      toggle: false,
+      issueId: undefined,
+      issue: undefined,
+      relationKey: undefined,
+      relationIssueId: undefined,
+    },
   });
 
   // store hooks
   const {
-    relation: { getRelationsByIssueId },
+    relation: { getRelationsByIssueId, removeRelation },
     toggleDeleteIssueModal,
     toggleCreateIssueModal,
   } = useIssueDetail(issueServiceType);
@@ -72,15 +80,23 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
   const relations = getRelationsByIssueId(issueId);
   const ISSUE_RELATION_OPTIONS = useTimeLineRelationOptions();
 
-  const handleIssueCrudState = (key: "update" | "delete", _issueId: string | null, issue: TIssue | null = null) => {
-    setIssueCrudState({
-      ...issueCrudState,
+  const handleIssueCrudState = (
+    key: "update" | "delete" | "removeRelation",
+    _issueId: string | null,
+    issue: TIssue | null = null,
+    relationKey?: TIssueRelationTypes | null,
+    relationIssueId?: string | null
+  ) => {
+    setIssueCrudState((prevState) => ({
+      ...prevState,
       [key]: {
-        toggle: !issueCrudState[key].toggle,
+        toggle: !prevState[key].toggle,
         issueId: _issueId,
         issue: issue,
+        relationKey: relationKey,
+        relationIssueId: relationIssueId,
       },
-    });
+    }));
   };
 
   // if relations are not available, return null
@@ -150,6 +166,21 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
           }}
           data={issueCrudState?.delete?.issue as TIssue}
           onSubmit={async () => {
+            if (
+              issueCrudState.removeRelation.issueId &&
+              issueCrudState.removeRelation.issue?.project_id &&
+              issueCrudState.removeRelation.relationKey &&
+              issueCrudState.removeRelation.relationIssueId
+            ) {
+              await removeRelation(
+                workspaceSlug,
+                issueCrudState.removeRelation.issue.project_id,
+                issueCrudState.removeRelation.issueId,
+                issueCrudState.removeRelation.relationKey as TIssueRelationTypes,
+                issueCrudState.removeRelation.relationIssueId,
+                true
+              );
+            }
             if (
               issueCrudState.delete.issue &&
               issueCrudState.delete.issue.id &&
@@ -161,7 +192,7 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
               await deleteOperation(
                 workspaceSlug,
                 issueCrudState.delete.issue?.project_id,
-                issueCrudState?.delete?.issue?.id as string
+                issueCrudState?.delete?.issue?.id
               );
             }
           }}

web/core/components/issues/relations/issue-list-item.tsx

@@ -28,7 +28,13 @@ type Props = {
   relationKey: TIssueRelationTypes;
   relationIssueId: string;
   disabled: boolean;
-  handleIssueCrudState: (key: "update" | "delete", issueId: string, issue?: TIssue | null) => void;
+  handleIssueCrudState: (
+    key: "update" | "delete" | "removeRelation",
+    issueId: string,
+    issue?: TIssue | null,
+    relationKey?: TIssueRelationTypes | null,
+    relationIssueId?: string | null
+  ) => void;
   issueServiceType?: TIssueServiceType;
 };
 
@@ -97,6 +103,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
     e.preventDefault();
     handleIssueCrudState("delete", relationIssueId, issue);
     toggleDeleteIssueModal(relationIssueId);
+    handleIssueCrudState("removeRelation", issueId, issue, relationKey, relationIssueId);
   };
 
   const handleCopyIssueLink = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {

web/core/components/issues/relations/issue-list.tsx

@@ -14,7 +14,13 @@ type Props = {
   issueId: string;
   issueIds: string[];
   relationKey: TIssueRelationTypes;
-  handleIssueCrudState: (key: "update" | "delete", issueId: string, issue?: TIssue | null) => void;
+  handleIssueCrudState: (
+    key: "update" | "delete" | "removeRelation",
+    issueId: string,
+    issue?: TIssue | null,
+    relationKey?: TIssueRelationTypes | null,
+    relationIssueId?: string | null
+  ) => void;
   disabled?: boolean;
   issueServiceType?: TIssueServiceType;
 };

web/core/store/issue/issue-details/relation.store.ts

@@ -29,8 +29,9 @@ export interface IIssueRelationStoreActions {
     projectId: string,
     issueId: string,
     relationType: TIssueRelationTypes,
-    related_issue: string
-  ) => Promise<any>;
+    related_issue: string,
+    updateLocally?: boolean
+  ) => Promise<void>;
 }
 
 export interface IIssueRelationStore extends IIssueRelationStoreActions {
@@ -232,7 +233,8 @@ export class IssueRelationStore implements IIssueRelationStore {
     projectId: string,
     issueId: string,
     relationType: TIssueRelationTypes,
-    related_issue: string
+    related_issue: string,
+    updateLocally = false
   ) => {
     try {
       const relationIndex = this.relationMap[issueId]?.[relationType]?.findIndex(
@@ -243,10 +245,12 @@ export class IssueRelationStore implements IIssueRelationStore {
           this.relationMap[issueId]?.[relationType]?.splice(relationIndex, 1);
         });
 
-      const response = await this.issueRelationService.deleteIssueRelation(workspaceSlug, projectId, issueId, {
-        relation_type: relationType,
-        related_issue,
-      });
+      if (!updateLocally) {
+        await this.issueRelationService.deleteIssueRelation(workspaceSlug, projectId, issueId, {
+          relation_type: relationType,
+          related_issue,
+        });
+      }
 
       // While removing one relation, reverse of the relation should also be removed
       const reverseRelatedType = REVERSE_RELATIONS[relationType];
@@ -260,7 +264,6 @@ export class IssueRelationStore implements IIssueRelationStore {
 
       // fetching activity
       this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
-      return response;
     } catch (error) {
       this.fetchRelations(workspaceSlug, projectId, issueId);
       throw error;

web/core/store/issue/issue-details/root.store.ts

@@ -367,8 +367,9 @@ export class IssueDetail implements IIssueDetail {
     projectId: string,
     issueId: string,
     relationType: TIssueRelationTypes,
-    relatedIssue: string
-  ) => this.relation.removeRelation(workspaceSlug, projectId, issueId, relationType, relatedIssue);
+    relatedIssue: string,
+    updateLocally?: boolean
+  ) => this.relation.removeRelation(workspaceSlug, projectId, issueId, relationType, relatedIssue, updateLocally);
 
   // activity
   fetchActivities = async (workspaceSlug: string, projectId: string, issueId: string, loaderType?: TActivityLoader) =>