fix: issue link edit modal and mutation fix (#5172)

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

@@ -25,6 +25,7 @@ export const IssueDetailWidgetModals: FC<Props> = observer((props) => {
   const {
     isIssueLinkModalOpen,
     toggleIssueLinkModal: toggleIssueLinkModalStore,
+    setIssueLinkData,
     isCreateIssueModalOpen,
     toggleCreateIssueModal,
     isSubIssuesModalOpen,
@@ -88,6 +89,7 @@ export const IssueDetailWidgetModals: FC<Props> = observer((props) => {
   const handleIssueLinkModalOnClose = () => {
     toggleIssueLinkModalStore(false);
     setLastWidgetAction("links");
+    setIssueLinkData(null);
   };
 
   const handleRelationOnClose = () => {

web/core/components/issues/issue-detail/links/create-update-link-modal.tsx

@@ -6,6 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import type { TIssueLinkEditableFields } from "@plane/types";
 // ui
 import { Button, Input } from "@plane/ui";
+import { useIssueDetail } from "@/hooks/store";
 // types
 import { TLinkOperations } from "./root";
 
@@ -19,7 +20,6 @@ export type TIssueLinkCreateEditModal = {
   isModalOpen: boolean;
   handleOnClose?: () => void;
   linkOperations: TLinkOperationsModal;
-  preloadedData?: TIssueLinkCreateFormFieldOptions | null;
 };
 
 const defaultValues: TIssueLinkCreateFormFieldOptions = {
@@ -29,7 +29,7 @@ const defaultValues: TIssueLinkCreateFormFieldOptions = {
 
 export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = (props) => {
   // props
-  const { isModalOpen, handleOnClose, linkOperations, preloadedData } = props;
+  const { isModalOpen, handleOnClose, linkOperations } = props;
 
   // react hook form
   const {
@@ -41,12 +41,11 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = (props)
     defaultValues,
   });
 
+  const { issueLinkData: preloadedData, setIssueLinkData } = useIssueDetail();
+
   const onClose = () => {
+    setIssueLinkData(null);
     if (handleOnClose) handleOnClose();
-    const timeout = setTimeout(() => {
-      reset(preloadedData ? preloadedData : defaultValues);
-      clearTimeout(timeout);
-    }, 500);
   };
 
   const handleFormSubmit = async (formData: TIssueLinkCreateFormFieldOptions) => {

web/core/components/issues/issue-detail/links/link-detail.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, useState } from "react";
+import { FC } from "react";
 // hooks
 // ui
 import { Pencil, Trash2, LinkIcon, ExternalLink } from "lucide-react";
@@ -12,7 +12,7 @@ import { calculateTimeAgo } from "@/helpers/date-time.helper";
 import { copyTextToClipboard } from "@/helpers/string.helper";
 import { useIssueDetail, useMember } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import { IssueLinkCreateUpdateModal, TLinkOperationsModal } from "./create-update-link-modal";
+import { TLinkOperationsModal } from "./create-update-link-modal";
 
 export type TIssueLinkDetail = {
   linkId: string;
@@ -27,34 +27,22 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
   const {
     toggleIssueLinkModal: toggleIssueLinkModalStore,
     link: { getLinkById },
+    setIssueLinkData,
   } = useIssueDetail();
   const { getUserDetails } = useMember();
-
-  // state
-  const [isIssueLinkModalOpen, setIsIssueLinkModalOpen] = useState(false);
-  const toggleIssueLinkModal = (modalToggle: boolean) => {
-    toggleIssueLinkModalStore(modalToggle);
-    setIsIssueLinkModalOpen(modalToggle);
-  };
   const { isMobile } = usePlatformOS();
   const linkDetail = getLinkById(linkId);
   if (!linkDetail) return <></>;
 
-  const createdByDetails = getUserDetails(linkDetail.created_by_id);
-
-  const handleOnClose = () => {
-    toggleIssueLinkModal(false);
+  const toggleIssueLinkModal = (modalToggle: boolean) => {
+    toggleIssueLinkModalStore(modalToggle);
+    setIssueLinkData(linkDetail);
   };
 
+  const createdByDetails = getUserDetails(linkDetail.created_by_id);
+
   return (
     <div key={linkId}>
-      <IssueLinkCreateUpdateModal
-        isModalOpen={isIssueLinkModalOpen}
-        handleOnClose={handleOnClose}
-        linkOperations={linkOperations}
-        preloadedData={linkDetail}
-      />
-
       <div className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
         <div
           className="flex w-full cursor-pointer items-start justify-between gap-2"

web/core/components/issues/issue-detail/links/link-item.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { FC, useState } from "react";
+import { FC } from "react";
+import { observer } from "mobx-react";
 import { Pencil, Trash2, LinkIcon, ExternalLink } from "lucide-react";
 // ui
 import { Tooltip, TOAST_TYPE, setToast, CustomMenu } from "@plane/ui";
@@ -10,7 +11,7 @@ import { copyTextToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import { IssueLinkCreateUpdateModal, TLinkOperationsModal } from "./create-update-link-modal";
+import { TLinkOperationsModal } from "./create-update-link-modal";
 
 type TIssueLinkItem = {
   linkId: string;
@@ -18,36 +19,25 @@ type TIssueLinkItem = {
   isNotAllowed: boolean;
 };
 
-export const IssueLinkItem: FC<TIssueLinkItem> = (props) => {
+export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
   // props
   const { linkId, linkOperations, isNotAllowed } = props;
   // hooks
   const {
     toggleIssueLinkModal: toggleIssueLinkModalStore,
+    setIssueLinkData,
     link: { getLinkById },
   } = useIssueDetail();
-
-  // state
-  const [isIssueLinkModalOpen, setIsIssueLinkModalOpen] = useState(false);
-  const toggleIssueLinkModal = (modalToggle: boolean) => {
-    toggleIssueLinkModalStore(modalToggle);
-    setIsIssueLinkModalOpen(modalToggle);
-  };
   const { isMobile } = usePlatformOS();
   const linkDetail = getLinkById(linkId);
   if (!linkDetail) return <></>;
 
-  const handleOnClose = () => {
-    toggleIssueLinkModal(false);
+  const toggleIssueLinkModal = (modalToggle: boolean) => {
+    toggleIssueLinkModalStore(modalToggle);
+    setIssueLinkData(linkDetail);
   };
   return (
     <>
-      <IssueLinkCreateUpdateModal
-        isModalOpen={isIssueLinkModalOpen}
-        handleOnClose={handleOnClose}
-        linkOperations={linkOperations}
-        preloadedData={linkDetail}
-      />
       <div
         key={linkId}
         className="col-span-12 lg:col-span-6 xl:col-span-4 2xl:col-span-3 3xl:col-span-2 flex items-center justify-between gap-3 h-8 flex-shrink-0 px-3 bg-custom-background-90 border-[0.5px] border-custom-border-200 rounded"
@@ -116,4 +106,4 @@ export const IssueLinkItem: FC<TIssueLinkItem> = (props) => {
       </div>
     </>
   );
-};
+});

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

@@ -59,6 +59,7 @@ export interface IIssueDetail
   // observables
   peekIssue: TPeekIssue | undefined;
   relationKey: TIssueRelationTypes | null;
+  issueLinkData: TIssueLink | null;
   issueCrudOperationState: TIssueCrudOperationState;
   openWidgets: TIssueDetailWidget[];
   lastWidgetAction: TIssueDetailWidget | null;
@@ -76,6 +77,7 @@ export interface IIssueDetail
   getIsIssuePeeked: (issueId: string) => boolean;
   // actions
   setPeekIssue: (peekIssue: TPeekIssue | undefined) => void;
+  setIssueLinkData: (issueLinkData: TIssueLink | null) => void;
   toggleCreateIssueModal: (value: boolean) => void;
   toggleIssueLinkModal: (value: boolean) => void;
   toggleParentIssueModal: (issueId: string | null) => void;
@@ -107,6 +109,7 @@ export class IssueDetail implements IIssueDetail {
   // observables
   peekIssue: TPeekIssue | undefined = undefined;
   relationKey: TIssueRelationTypes | null = null;
+  issueLinkData: TIssueLink | null = null;
   issueCrudOperationState: TIssueCrudOperationState = {
     create: {
       toggle: false,
@@ -147,6 +150,7 @@ export class IssueDetail implements IIssueDetail {
       // observables
       peekIssue: observable,
       relationKey: observable,
+      issueLinkData: observable,
       issueCrudOperationState: observable,
       isCreateIssueModalOpen: observable,
       isIssueLinkModalOpen: observable.ref,
@@ -162,6 +166,7 @@ export class IssueDetail implements IIssueDetail {
       isAnyModalOpen: computed,
       // action
       setPeekIssue: action,
+      setIssueLinkData: action,
       toggleCreateIssueModal: action,
       toggleIssueLinkModal: action,
       toggleParentIssueModal: action,
@@ -233,6 +238,7 @@ export class IssueDetail implements IIssueDetail {
       this.openWidgets = this.openWidgets.filter((s) => s !== state);
     else this.openWidgets = [state, ...this.openWidgets];
   };
+  setIssueLinkData = (issueLinkData: TIssueLink | null) => (this.issueLinkData = issueLinkData);
 
   // issue
   fetchIssue = async (