[WEB-3207] chore: add state_id, priority and assignee_ids to create issue relation response (#6448)

apiserver/plane/app/serializers/issue.py

@@ -283,10 +283,26 @@ class IssueRelationSerializer(BaseSerializer):
     )
     name = serializers.CharField(source="related_issue.name", read_only=True)
     relation_type = serializers.CharField(read_only=True)
+    state_id = serializers.UUIDField(source="related_issue.state.id", read_only=True)
+    priority = serializers.CharField(source="related_issue.priority", read_only=True)
+    assignee_ids = serializers.ListField(
+        child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
+        write_only=True,
+        required=False,
+    )
 
     class Meta:
         model = IssueRelation
-        fields = ["id", "project_id", "sequence_id", "relation_type", "name"]
+        fields = [
+            "id",
+            "project_id",
+            "sequence_id",
+            "relation_type",
+            "name",
+            "state_id",
+            "priority",
+            "assignee_ids",
+        ]
         read_only_fields = ["workspace", "project"]
 
 
@@ -298,10 +314,26 @@ class RelatedIssueSerializer(BaseSerializer):
     sequence_id = serializers.IntegerField(source="issue.sequence_id", read_only=True)
     name = serializers.CharField(source="issue.name", read_only=True)
     relation_type = serializers.CharField(read_only=True)
+    state_id = serializers.UUIDField(source="issue.state.id", read_only=True)
+    priority = serializers.CharField(source="issue.priority", read_only=True)
+    assignee_ids = serializers.ListField(
+        child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
+        write_only=True,
+        required=False,
+    )
 
     class Meta:
         model = IssueRelation
-        fields = ["id", "project_id", "sequence_id", "relation_type", "name"]
+        fields = [
+            "id",
+            "project_id",
+            "sequence_id",
+            "relation_type",
+            "name",
+            "state_id",
+            "priority",
+            "assignee_ids",
+        ]
         read_only_fields = ["workspace", "project"]
 
 

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

@@ -1,8 +1,9 @@
 "use client";
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
+// plane imports
 import { EIssueServiceType } from "@plane/constants";
-import { TIssue, TIssueRelationIdMap, TIssueServiceType } from "@plane/types";
+import { TIssue, TIssueServiceType } from "@plane/types";
 import { Collapsible } from "@plane/ui";
 // components
 import { RelationIssueList } from "@/components/issues";
@@ -11,6 +12,7 @@ import { CreateUpdateIssueModal } from "@/components/issues/issue-modal";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
 // Plane-web
+import { CreateUpdateEpicModal } from "@/plane-web/components/epics";
 import { useTimeLineRelationOptions } from "@/plane-web/components/relations";
 import { TIssueRelationTypes } from "@/plane-web/types";
 // helper
@@ -62,6 +64,7 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
 
   // helper
   const issueOperations = useRelationOperations();
+  const epicOperations = useRelationOperations(EIssueServiceType.EPICS);
 
   // derived values
   const relations = getRelationsByIssueId(issueId);
@@ -129,7 +132,6 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
                 relationKey={relation.relationKey}
                 issueIds={relation.issueIds}
                 disabled={disabled}
-                issueOperations={issueOperations}
                 handleIssueCrudState={handleIssueCrudState}
                 issueServiceType={issueServiceType}
               />
@@ -146,13 +148,31 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
             toggleDeleteIssueModal(null);
           }}
           data={issueCrudState?.delete?.issue as TIssue}
-          onSubmit={async () =>
+          onSubmit={async () => {
-            await issueOperations.remove(workspaceSlug, projectId, issueCrudState?.delete?.issue?.id as string)
+            const deleteOperation = !!issueCrudState.delete.issue?.is_epic
-          }
+              ? epicOperations.remove
+              : issueOperations.remove;
+            await deleteOperation(workspaceSlug, projectId, issueCrudState?.delete?.issue?.id as string);
+          }}
+          isEpic={!!issueCrudState.delete.issue?.is_epic}
         />
       )}
 
       {shouldRenderIssueUpdateModal && (
+        <>
+          {!!issueCrudState?.update?.issue?.is_epic ? (
+            <CreateUpdateEpicModal
+              isOpen={issueCrudState?.update?.toggle}
+              onClose={() => {
+                handleIssueCrudState("update", null, null);
+                toggleCreateIssueModal(false);
+              }}
+              data={issueCrudState?.update?.issue ?? undefined}
+              onSubmit={async (_issue: TIssue) => {
+                await epicOperations.update(workspaceSlug, projectId, _issue.id, _issue);
+              }}
+            />
+          ) : (
             <CreateUpdateIssueModal
               isOpen={issueCrudState?.update?.toggle}
               onClose={() => {
@@ -166,5 +186,7 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
             />
           )}
         </>
+      )}
+    </>
   );
 });

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

@@ -23,6 +23,8 @@ export const useRelationOperations = (
   const { updateIssue, removeIssue } = useIssueDetail(issueServiceType);
   const { captureIssueEvent } = useEventTracker();
   const pathname = usePathname();
+  // derived values
+  const entityName = issueServiceType === EIssueServiceType.ISSUES ? "Issue" : "Epic";
 
   const issueOperations: TRelationIssueOperations = useMemo(
     () => ({
@@ -32,7 +34,7 @@ export const useRelationOperations = (
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: "Link Copied!",
-            message: "Issue link copied to clipboard.",
+            message: `${entityName} link copied to clipboard.`,
           });
         });
       },
@@ -51,7 +53,7 @@ export const useRelationOperations = (
           setToast({
             title: "Success!",
             type: TOAST_TYPE.SUCCESS,
-            message: "Issue updated successfully",
+            message: `${entityName} updated successfully`,
           });
         } catch (error) {
           captureIssueEvent({
@@ -66,7 +68,7 @@ export const useRelationOperations = (
           setToast({
             title: "Error!",
             type: TOAST_TYPE.ERROR,
-            message: "Issue update failed",
+            message: `${entityName} update failed`,
           });
         }
       },

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

@@ -16,8 +16,8 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
 import { TIssueRelationTypes } from "@/plane-web/types";
-//
+// local imports
-import { TRelationIssueOperations } from "../issue-detail-widgets/relations/helper";
+import { useRelationOperations } from "../issue-detail-widgets/relations/helper";
 
 type Props = {
   workspaceSlug: string;
@@ -26,7 +26,6 @@ type Props = {
   relationKey: TIssueRelationTypes;
   relationIssueId: string;
   disabled: boolean;
-  issueOperations: TRelationIssueOperations;
   handleIssueCrudState: (key: "update" | "delete", issueId: string, issue?: TIssue | null) => void;
   issueServiceType?: TIssueServiceType;
 };
@@ -39,7 +38,6 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
     relationKey,
     relationIssueId,
     disabled = false,
-    issueOperations,
     handleIssueCrudState,
     issueServiceType = EIssueServiceType.ISSUES,
   } = props;
@@ -57,6 +55,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
   // derived values
   const issue = getIssueById(relationIssueId);
   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 currentIssueStateDetail =
     (issue?.project_id && getProjectStates(issue?.project_id)?.find((state) => issue?.state_id == state.id)) ||
@@ -134,8 +133,6 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
                 <span className="w-full truncate text-sm text-custom-text-100">{issue.name}</span>
               </Tooltip>
             </div>
-            {!issue.is_epic && (
-              <>
             <div
               className="flex-shrink-0 text-sm"
               onClick={(e) => {
@@ -157,7 +154,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
                   <CustomMenu.MenuItem onClick={handleEditIssue}>
                     <div className="flex items-center gap-2">
                       <Pencil className="h-3.5 w-3.5" strokeWidth={2} />
-                          <span>Edit issue</span>
+                      <span>Edit</span>
                     </div>
                   </CustomMenu.MenuItem>
                 )}
@@ -165,7 +162,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
                 <CustomMenu.MenuItem onClick={handleCopyIssueLink}>
                   <div className="flex items-center gap-2">
                     <LinkIcon className="h-3.5 w-3.5" strokeWidth={2} />
-                        <span>Copy issue link</span>
+                    <span>Copy link</span>
                   </div>
                 </CustomMenu.MenuItem>
 
@@ -182,14 +179,12 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
                   <CustomMenu.MenuItem onClick={handleDeleteIssue}>
                     <div className="flex items-center gap-2">
                       <Trash className="h-3.5 w-3.5" strokeWidth={2} />
-                          <span>Delete issue</span>
+                      <span>Delete</span>
                     </div>
                   </CustomMenu.MenuItem>
                 )}
               </CustomMenu>
             </div>
-              </>
-            )}
           </div>
         )}
       </ControlLink>

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

@@ -8,8 +8,6 @@ import { TIssue, TIssueServiceType } from "@plane/types";
 import { RelationIssueListItem } from "@/components/issues/relations";
 // Plane-web
 import { TIssueRelationTypes } from "@/plane-web/types";
-//
-import { TRelationIssueOperations } from "../issue-detail-widgets/relations/helper";
 
 type Props = {
   workspaceSlug: string;
@@ -17,7 +15,6 @@ type Props = {
   issueId: string;
   issueIds: string[];
   relationKey: TIssueRelationTypes;
-  issueOperations: TRelationIssueOperations;
   handleIssueCrudState: (key: "update" | "delete", issueId: string, issue?: TIssue | null) => void;
   disabled?: boolean;
   issueServiceType?: TIssueServiceType;
@@ -31,7 +28,6 @@ export const RelationIssueList: FC<Props> = observer((props) => {
     issueIds,
     relationKey,
     disabled = false,
-    issueOperations,
     handleIssueCrudState,
     issueServiceType = EIssueServiceType.ISSUES,
   } = props;
@@ -50,7 +46,6 @@ export const RelationIssueList: FC<Props> = observer((props) => {
             relationIssueId={relationIssueId}
             disabled={disabled}
             handleIssueCrudState={handleIssueCrudState}
-            issueOperations={issueOperations}
             issueServiceType={issueServiceType}
           />
         ))}