[WEB-3218] fix: redirection for cross projects issue relations (#6457)

Author: prateekshourya29

web/core/components/issues/issue-detail-widgets/issue-detail-widget-collapsibles.tsx

@@ -55,12 +55,7 @@ export const IssueDetailWidgetCollapsibles: FC<Props> = observer((props) => {
         />
       )}
       {shouldRenderRelations && (
-        <RelationsCollapsible
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          issueId={issueId}
-          disabled={disabled}
-        />
+        <RelationsCollapsible workspaceSlug={workspaceSlug} issueId={issueId} disabled={disabled} />
       )}
       {shouldRenderLinks && (
         <LinksCollapsible workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />

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

@@ -20,7 +20,6 @@ import { useRelationOperations } from "./helper";
 
 type Props = {
   workspaceSlug: string;
-  projectId: string;
   issueId: string;
   disabled: boolean;
   issueServiceType?: TIssueServiceType;
@@ -37,7 +36,7 @@ export type TRelationObject = {
 };
 
 export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { workspaceSlug, issueId, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
   // state
   const [issueCrudState, setIssueCrudState] = useState<{
     update: TIssueCrudState;
@@ -127,7 +126,6 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
             >
               <RelationIssueList
                 workspaceSlug={workspaceSlug}
-                projectId={projectId}
                 issueId={issueId}
                 relationKey={relation.relationKey}
                 issueIds={relation.issueIds}
@@ -149,10 +147,20 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
           }}
           data={issueCrudState?.delete?.issue as TIssue}
           onSubmit={async () => {
-            const deleteOperation = !!issueCrudState.delete.issue?.is_epic
-              ? epicOperations.remove
-              : issueOperations.remove;
-            await deleteOperation(workspaceSlug, projectId, issueCrudState?.delete?.issue?.id as string);
+            if (
+              issueCrudState.delete.issue &&
+              issueCrudState.delete.issue.id &&
+              issueCrudState.delete.issue.project_id
+            ) {
+              const deleteOperation = !!issueCrudState.delete.issue?.is_epic
+                ? epicOperations.remove
+                : issueOperations.remove;
+              await deleteOperation(
+                workspaceSlug,
+                issueCrudState.delete.issue?.project_id,
+                issueCrudState?.delete?.issue?.id as string
+              );
+            }
           }}
           isEpic={!!issueCrudState.delete.issue?.is_epic}
         />
@@ -169,7 +177,8 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
               }}
               data={issueCrudState?.update?.issue ?? undefined}
               onSubmit={async (_issue: TIssue) => {
-                await epicOperations.update(workspaceSlug, projectId, _issue.id, _issue);
+                if (!_issue.id || !_issue.project_id) return;
+                await epicOperations.update(workspaceSlug, _issue.project_id, _issue.id, _issue);
               }}
             />
           ) : (
@@ -181,7 +190,8 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
               }}
               data={issueCrudState?.update?.issue ?? undefined}
               onSubmit={async (_issue: TIssue) => {
-                await issueOperations.update(workspaceSlug, projectId, _issue.id, _issue);
+                if (!_issue.id || !_issue.project_id) return;
+                await issueOperations.update(workspaceSlug, _issue.project_id, _issue.id, _issue);
               }}
             />
           )}

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

@@ -11,14 +11,13 @@ import { useIssueDetail } from "@/hooks/store";
 
 type Props = {
   workspaceSlug: string;
-  projectId: string;
   issueId: string;
   disabled?: boolean;
   issueServiceType?: TIssueServiceType;
 };
 
 export const RelationsCollapsible: FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { workspaceSlug, issueId, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
   // store hooks
   const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
 
@@ -41,7 +40,6 @@ export const RelationsCollapsible: FC<Props> = observer((props) => {
     >
       <RelationsCollapsibleContent
         workspaceSlug={workspaceSlug}
-        projectId={projectId}
         issueId={issueId}
         disabled={disabled}
         issueServiceType={issueServiceType}

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

@@ -21,7 +21,6 @@ import { useRelationOperations } from "../issue-detail-widgets/relations/helper"
 
 type Props = {
   workspaceSlug: string;
-  projectId: string;
   issueId: string;
   relationKey: TIssueRelationTypes;
   relationIssueId: string;
@@ -33,7 +32,6 @@ type Props = {
 export const RelationIssueListItem: FC<Props> = observer((props) => {
   const {
     workspaceSlug,
-    projectId,
     issueId,
     relationKey,
     relationIssueId,
@@ -57,15 +55,16 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
   const { handleRedirection } = useIssuePeekOverviewRedirection(!!issue?.is_epic);
   const issueOperations = useRelationOperations(!!issue?.is_epic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
   const projectDetail = (issue && issue.project_id && project.getProjectById(issue.project_id)) || undefined;
+  const projectId = issue?.project_id;
   const currentIssueStateDetail =
     (issue?.project_id && getProjectStates(issue?.project_id)?.find((state) => issue?.state_id == state.id)) ||
     undefined;
-  if (!issue) return <></>;
+  if (!issue || !projectId) return <></>;
   const issueLink = `/${workspaceSlug}/projects/${projectId}/${issue.is_epic ? "epics" : "issues"}/${issue.id}`;
 
   // handlers
   const handleIssuePeekOverview = (issue: TIssue) => {
-    if (issueServiceType === EIssueServiceType.ISSUES && issue.is_epic) {
+    if (issue.is_epic) {
       // open epics in new tab
       window.open(issueLink, "_blank");
       return;

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

@@ -11,7 +11,6 @@ import { TIssueRelationTypes } from "@/plane-web/types";
 
 type Props = {
   workspaceSlug: string;
-  projectId: string;
   issueId: string;
   issueIds: string[];
   relationKey: TIssueRelationTypes;
@@ -23,7 +22,6 @@ type Props = {
 export const RelationIssueList: FC<Props> = observer((props) => {
   const {
     workspaceSlug,
-    projectId,
     issueId,
     issueIds,
     relationKey,
@@ -40,7 +38,6 @@ export const RelationIssueList: FC<Props> = observer((props) => {
           <RelationIssueListItem
             key={relationIssueId}
             workspaceSlug={workspaceSlug}
-            projectId={projectId}
             issueId={issueId}
             relationKey={relationKey}
             relationIssueId={relationIssueId}