fix: issue relation mutation and draft issue (#2340)

* fix: issue relation mutation and draft issue

* fix: 'New Issue' in gantt view

fix: emoji select going under

* fix: profile page typo

web/components/core/views/board-view/single-board.tsx

@@ -6,6 +6,7 @@ import { useRouter } from "next/router";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { Draggable } from "react-beautiful-dnd";
 // components
+import { CreateUpdateDraftIssueModal } from "components/issues";
 import { BoardHeader, SingleBoardIssue, BoardInlineCreateIssueForm } from "components/core";
 // ui
 import { CustomMenu } from "components/ui";
@@ -57,6 +58,7 @@ export const SingleBoard: React.FC<Props> = (props) => {
   const [isCollapsed, setIsCollapsed] = useState(true);
 
   const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
+  const [isCreateDraftIssueModalOpen, setIsCreateDraftIssueModalOpen] = useState(false);
 
   const { displayFilters, groupedIssues } = viewProps;
 
@@ -96,10 +98,27 @@ export const SingleBoard: React.FC<Props> = (props) => {
     scrollToBottom();
   };
 
+  const handleAddIssueToGroup = () => {
+    if (isDraftIssuesPage) setIsCreateDraftIssueModalOpen(true);
+    else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
+    else onCreateClick();
+  };
+
   return (
     <div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
+      <CreateUpdateDraftIssueModal
+        isOpen={isCreateDraftIssueModalOpen}
+        handleClose={() => setIsCreateDraftIssueModalOpen(false)}
+        prePopulateData={{
+          ...(cycleId && { cycle: cycleId.toString() }),
+          ...(moduleId && { module: moduleId.toString() }),
+          [displayFilters?.group_by! === "labels" ? "labels_list" : displayFilters?.group_by!]:
+            displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
+        }}
+      />
+
       <BoardHeader
-        addIssueToGroup={addIssueToGroup}
+        addIssueToGroup={handleAddIssueToGroup}
         currentState={currentState}
         groupTitle={groupTitle}
         isCollapsed={isCollapsed}
@@ -218,21 +237,22 @@ export const SingleBoard: React.FC<Props> = (props) => {
               {displayFilters?.group_by !== "created_by" && (
                 <div>
                   {type === "issue"
-                    ? !disableAddIssueOption && (
+                    ? !disableAddIssueOption &&
+                      !isDraftIssuesPage && (
                         <button
                           type="button"
                           className="flex items-center gap-2 font-medium text-custom-primary outline-none p-1"
                           onClick={() => {
-                            if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
+                            if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
-                              addIssueToGroup();
+                            else onCreateClick();
-                            } else onCreateClick();
                           }}
                         >
                           <PlusIcon className="h-4 w-4" />
                           Add Issue
                         </button>
                       )
-                    : !disableUserActions && (
+                    : !disableUserActions &&
+                      !isDraftIssuesPage && (
                         <CustomMenu
                           customButton={
                             <button
@@ -246,7 +266,13 @@ export const SingleBoard: React.FC<Props> = (props) => {
                           position="left"
                           noBorder
                         >
-                          <CustomMenu.MenuItem onClick={() => onCreateClick()}>
+                          <CustomMenu.MenuItem
+                            onClick={() => {
+                              if (isDraftIssuesPage) setIsCreateDraftIssueModalOpen(true);
+                              else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
+                              else onCreateClick();
+                            }}
+                          >
                             Create new
                           </CustomMenu.MenuItem>
                           {openIssuesListModal && (

web/components/core/views/list-view/single-list.tsx

@@ -13,6 +13,7 @@ import projectService from "services/project.service";
 // hooks
 import useProjects from "hooks/use-projects";
 // components
+import { CreateUpdateDraftIssueModal } from "components/issues";
 import { SingleListIssue, ListInlineCreateIssueForm } from "components/core";
 // ui
 import { Avatar, CustomMenu } from "components/ui";
@@ -75,6 +76,7 @@ export const SingleList: React.FC<Props> = (props) => {
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
   const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
+  const [isDraftIssuesModalOpen, setIsDraftIssuesModalOpen] = useState(false);
 
   const isMyIssuesPage = router.pathname.split("/")[3] === "my-issues";
   const isProfileIssuesPage = router.pathname.split("/")[2] === "profile";
@@ -208,154 +210,169 @@ export const SingleList: React.FC<Props> = (props) => {
   if (!groupedIssues) return null;
 
   return (
-    <Disclosure as="div" defaultOpen>
+    <>
-      {({ open }) => (
+      <CreateUpdateDraftIssueModal
-        <div>
+        isOpen={isDraftIssuesModalOpen}
-          <div className="flex items-center justify-between px-4 py-2.5 bg-custom-background-90">
+        handleClose={() => setIsDraftIssuesModalOpen(false)}
-            <Disclosure.Button>
+        prePopulateData={{
-              <div className="flex items-center gap-x-3">
+          ...(cycleId && { cycle: cycleId.toString() }),
-                {displayFilters?.group_by !== null && (
+          ...(moduleId && { module: moduleId.toString() }),
-                  <div className="flex items-center">{getGroupIcon()}</div>
+          [displayFilters?.group_by! === "labels" ? "labels_list" : displayFilters?.group_by!]:
-                )}
+            displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
-                {displayFilters?.group_by !== null ? (
+        }}
-                  <h2
+      />
-                    className={`text-sm font-semibold leading-6 text-custom-text-100 ${
-                      displayFilters?.group_by === "created_by" ? "" : "capitalize"
-                    }`}
-                  >
-                    {getGroupTitle()}
-                  </h2>
-                ) : (
-                  <h2 className="font-medium leading-5">All Issues</h2>
-                )}
-                <span className="text-custom-text-200 min-w-[2.5rem] rounded-full bg-custom-background-80 py-1 text-center text-xs">
-                  {groupedIssues[groupTitle as keyof IIssue].length}
-                </span>
-              </div>
-            </Disclosure.Button>
-            {isArchivedIssues ? (
-              ""
-            ) : type === "issue" ? (
-              !disableAddIssueOption && (
-                <button
-                  type="button"
-                  className="p-1 text-custom-text-200 hover:bg-custom-background-80"
-                  onClick={() => {
-                    if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
-                      addIssueToGroup();
-                    } else setIsCreateIssueFormOpen(true);
-                  }}
-                >
-                  <PlusIcon className="h-4 w-4" />
-                </button>
-              )
-            ) : disableUserActions ? (
-              ""
-            ) : (
-              <CustomMenu
-                customButton={
-                  <div className="flex cursor-pointer items-center">
-                    <PlusIcon className="h-4 w-4" />
-                  </div>
-                }
-                position="right"
-                noBorder
-              >
-                <CustomMenu.MenuItem onClick={() => setIsCreateIssueFormOpen(true)}>
-                  Create new
-                </CustomMenu.MenuItem>
-                {openIssuesListModal && (
-                  <CustomMenu.MenuItem onClick={openIssuesListModal}>
-                    Add an existing issue
-                  </CustomMenu.MenuItem>
-                )}
-              </CustomMenu>
-            )}
-          </div>
-          <Transition
-            show={open}
-            enter="transition duration-100 ease-out"
-            enterFrom="transform opacity-0"
-            enterTo="transform opacity-100"
-            leave="transition duration-75 ease-out"
-            leaveFrom="transform opacity-100"
-            leaveTo="transform opacity-0"
-          >
-            <Disclosure.Panel>
-              {groupedIssues[groupTitle] ? (
-                groupedIssues[groupTitle].length > 0 ? (
-                  groupedIssues[groupTitle].map((issue, index) => (
-                    <SingleListIssue
-                      key={issue.id}
-                      type={type}
-                      issue={issue}
-                      projectId={issue.project_detail.id}
-                      groupTitle={groupTitle}
-                      index={index}
-                      editIssue={() => handleIssueAction(issue, "edit")}
-                      makeIssueCopy={() => handleIssueAction(issue, "copy")}
-                      handleDeleteIssue={() => handleIssueAction(issue, "delete")}
-                      handleDraftIssueSelect={
-                        handleDraftIssueAction
-                          ? () => handleDraftIssueAction(issue, "edit")
-                          : undefined
-                      }
-                      handleDraftIssueDelete={
-                        handleDraftIssueAction
-                          ? () => handleDraftIssueAction(issue, "delete")
-                          : undefined
-                      }
-                      handleMyIssueOpen={handleMyIssueOpen}
-                      removeIssue={() => {
-                        if (removeIssue !== null && issue.bridge_id)
-                          removeIssue(issue.bridge_id, issue.id);
-                      }}
-                      disableUserActions={disableUserActions}
-                      user={user}
-                      userAuth={userAuth}
-                      viewProps={viewProps}
-                    />
-                  ))
-                ) : (
-                  <p className="bg-custom-background-100 px-4 py-2.5 text-sm text-custom-text-200">
-                    No issues.
-                  </p>
-                )
-              ) : (
-                <div className="flex h-full w-full items-center justify-center">Loading...</div>
-              )}
 
-              <ListInlineCreateIssueForm
+      <Disclosure as="div" defaultOpen>
-                isOpen={isCreateIssueFormOpen && !disableAddIssueOption}
+        {({ open }) => (
-                handleClose={() => setIsCreateIssueFormOpen(false)}
+          <div>
-                prePopulatedData={{
+            <div className="flex items-center justify-between px-4 py-2.5 bg-custom-background-90">
-                  ...(cycleId && { cycle: cycleId.toString() }),
+              <Disclosure.Button>
-                  ...(moduleId && { module: moduleId.toString() }),
+                <div className="flex items-center gap-x-3">
-                  [displayFilters?.group_by!]: groupTitle,
+                  {displayFilters?.group_by !== null && (
-                }}
+                    <div className="flex items-center">{getGroupIcon()}</div>
-              />
+                  )}
-
+                  {displayFilters?.group_by !== null ? (
-              {!disableAddIssueOption && !isCreateIssueFormOpen && (
+                    <h2
-                // TODO: add border here
+                      className={`text-sm font-semibold leading-6 text-custom-text-100 ${
-                <div className="w-full bg-custom-background-100 px-6 py-3 border-b border-custom-border-100">
+                        displayFilters?.group_by === "created_by" ? "" : "capitalize"
+                      }`}
+                    >
+                      {getGroupTitle()}
+                    </h2>
+                  ) : (
+                    <h2 className="font-medium leading-5">All Issues</h2>
+                  )}
+                  <span className="text-custom-text-200 min-w-[2.5rem] rounded-full bg-custom-background-80 py-1 text-center text-xs">
+                    {groupedIssues[groupTitle as keyof IIssue].length}
+                  </span>
+                </div>
+              </Disclosure.Button>
+              {isArchivedIssues ? (
+                ""
+              ) : type === "issue" ? (
+                !disableAddIssueOption && (
                   <button
                     type="button"
+                    className="p-1 text-custom-text-200 hover:bg-custom-background-80"
                     onClick={() => {
-                      if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
+                      if (isDraftIssuesPage) setIsDraftIssuesModalOpen(true);
-                        addIssueToGroup();
+                      else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
-                      } else setIsCreateIssueFormOpen(true);
+                      else setIsCreateIssueFormOpen(true);
                     }}
-                    className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
                   >
                     <PlusIcon className="h-4 w-4" />
-                    <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
                   </button>
-                </div>
+                )
+              ) : disableUserActions ? (
+                ""
+              ) : (
+                <CustomMenu
+                  customButton={
+                    <div className="flex cursor-pointer items-center">
+                      <PlusIcon className="h-4 w-4" />
+                    </div>
+                  }
+                  position="right"
+                  noBorder
+                >
+                  <CustomMenu.MenuItem onClick={() => setIsCreateIssueFormOpen(true)}>
+                    Create new
+                  </CustomMenu.MenuItem>
+                  {openIssuesListModal && (
+                    <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                      Add an existing issue
+                    </CustomMenu.MenuItem>
+                  )}
+                </CustomMenu>
               )}
-            </Disclosure.Panel>
+            </div>
-          </Transition>
+            <Transition
-        </div>
+              show={open}
-      )}
+              enter="transition duration-100 ease-out"
-    </Disclosure>
+              enterFrom="transform opacity-0"
+              enterTo="transform opacity-100"
+              leave="transition duration-75 ease-out"
+              leaveFrom="transform opacity-100"
+              leaveTo="transform opacity-0"
+            >
+              <Disclosure.Panel>
+                {groupedIssues[groupTitle] ? (
+                  groupedIssues[groupTitle].length > 0 ? (
+                    groupedIssues[groupTitle].map((issue, index) => (
+                      <SingleListIssue
+                        key={issue.id}
+                        type={type}
+                        issue={issue}
+                        projectId={issue.project_detail.id}
+                        groupTitle={groupTitle}
+                        index={index}
+                        editIssue={() => handleIssueAction(issue, "edit")}
+                        makeIssueCopy={() => handleIssueAction(issue, "copy")}
+                        handleDeleteIssue={() => handleIssueAction(issue, "delete")}
+                        handleDraftIssueSelect={
+                          handleDraftIssueAction
+                            ? () => handleDraftIssueAction(issue, "edit")
+                            : undefined
+                        }
+                        handleDraftIssueDelete={
+                          handleDraftIssueAction
+                            ? () => handleDraftIssueAction(issue, "delete")
+                            : undefined
+                        }
+                        handleMyIssueOpen={handleMyIssueOpen}
+                        removeIssue={() => {
+                          if (removeIssue !== null && issue.bridge_id)
+                            removeIssue(issue.bridge_id, issue.id);
+                        }}
+                        disableUserActions={disableUserActions}
+                        user={user}
+                        userAuth={userAuth}
+                        viewProps={viewProps}
+                      />
+                    ))
+                  ) : (
+                    <p className="bg-custom-background-100 px-4 py-2.5 text-sm text-custom-text-200">
+                      No issues.
+                    </p>
+                  )
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center">Loading...</div>
+                )}
+
+                <ListInlineCreateIssueForm
+                  isOpen={isCreateIssueFormOpen && !disableAddIssueOption}
+                  handleClose={() => setIsCreateIssueFormOpen(false)}
+                  prePopulatedData={{
+                    ...(cycleId && { cycle: cycleId.toString() }),
+                    ...(moduleId && { module: moduleId.toString() }),
+                    [displayFilters?.group_by! === "labels"
+                      ? "labels_list"
+                      : displayFilters?.group_by!]:
+                      displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
+                  }}
+                />
+
+                {!disableAddIssueOption && !isCreateIssueFormOpen && !isDraftIssuesPage && (
+                  <div className="w-full bg-custom-background-100 px-6 py-3 border-b border-custom-border-100">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        if (isDraftIssuesPage) setIsDraftIssuesModalOpen(true);
+                        else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
+                        else setIsCreateIssueFormOpen(true);
+                      }}
+                      className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+                    >
+                      <PlusIcon className="h-4 w-4" />
+                      <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+                    </button>
+                  </div>
+                )}
+              </Disclosure.Panel>
+            </Transition>
+          </div>
+        )}
+      </Disclosure>
+    </>
   );
 };

web/components/emoji-icon-picker/index.tsx

@@ -4,6 +4,7 @@ import { Tab, Transition, Popover } from "@headlessui/react";
 // react colors
 import { TwitterPicker } from "react-color";
 // hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // types
 import { Props } from "./types";
@@ -38,6 +39,7 @@ const EmojiIconPicker: React.FC<Props> = ({
 
   const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
 
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const emojiPickerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -49,10 +51,12 @@ const EmojiIconPicker: React.FC<Props> = ({
   }, [value, onChange]);
 
   useOutsideClickDetector(emojiPickerRef, () => setIsOpen(false));
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), buttonRef, emojiPickerRef);
 
   return (
     <Popover className="relative z-[1]">
       <Popover.Button
+        ref={buttonRef}
         onClick={() => setIsOpen((prev) => !prev)}
         className="outline-none"
         disabled={disabled}
@@ -61,6 +65,8 @@ const EmojiIconPicker: React.FC<Props> = ({
       </Popover.Button>
       <Transition
         show={isOpen}
+        static
+        as={React.Fragment}
         enter="transition ease-out duration-100"
         enterFrom="transform opacity-0 scale-95"
         enterTo="transform opacity-100 scale-100"
@@ -68,11 +74,11 @@ const EmojiIconPicker: React.FC<Props> = ({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-200 bg-custom-background-80 shadow-lg">
+        <Popover.Panel
-          <div
+          ref={emojiPickerRef}
-            ref={emojiPickerRef}
+          className="fixed z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-200 bg-custom-background-80 shadow-lg"
-            className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl"
+        >
-          >
+          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl">
             <Tab.Group as="div" className="flex h-full w-full flex-col">
               <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
                 {tabOptions.map((tab) => (

web/components/gantt-chart/chart/index.tsx

@@ -80,6 +80,9 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   const router = useRouter();
   const { cycleId, moduleId } = router.query;
 
+  const isCyclePage = router.pathname.split("/")[4] === "cycles" && !cycleId;
+  const isModulePage = router.pathname.split("/")[4] === "modules" && !moduleId;
+
   const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
     blocks && blocks.length > 0
       ? blocks.map((block: any) => ({
@@ -317,7 +320,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             SidebarBlockRender={SidebarBlockRender}
             enableReorder={enableReorder}
           />
-          {chartBlocks && (
+          {chartBlocks && !(isCyclePage || isModulePage) && (
             <div className="pl-2.5 py-3">
               <GanttInlineCreateIssueForm
                 isOpen={isCreateIssueFormOpen}

web/components/issues/draft-issue-form.tsx

@@ -8,6 +8,7 @@ import { Controller, useForm } from "react-hook-form";
 import aiService from "services/ai.service";
 // hooks
 import useToast from "hooks/use-toast";
+import useLocalStorage from "hooks/use-local-storage";
 // components
 import { GptAssistantModal } from "components/core";
 import { ParentIssuesListModal } from "components/issues";
@@ -60,6 +61,7 @@ interface IssueFormProps {
     action?: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue"
   ) => Promise<void>;
   data?: Partial<IIssue> | null;
+  isOpen: boolean;
   prePopulatedData?: Partial<IIssue> | null;
   projectId: string;
   setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
@@ -89,6 +91,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
   const {
     handleFormSubmit,
     data,
+    isOpen,
     prePopulatedData,
     projectId,
     setActiveProject,
@@ -109,6 +112,8 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
 
+  const { setValue: setLocalStorageValue } = useLocalStorage("draftedIssue", {});
+
   const editorRef = useRef<any>(null);
 
   const router = useRouter();
@@ -133,6 +138,33 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
 
   const issueName = watch("name");
 
+  const payload: Partial<IIssue> = {
+    name: watch("name"),
+    description: watch("description"),
+    description_html: watch("description_html"),
+    state: watch("state"),
+    priority: watch("priority"),
+    assignees: watch("assignees"),
+    labels: watch("labels"),
+    start_date: watch("start_date"),
+    target_date: watch("target_date"),
+    project: watch("project"),
+    parent: watch("parent"),
+    cycle: watch("cycle"),
+    module: watch("module"),
+  };
+
+  useEffect(() => {
+    if (!isOpen || data) return;
+
+    setLocalStorageValue(
+      JSON.stringify({
+        ...payload,
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(payload), isOpen, data]);
+
   const onClose = () => {
     handleClose();
   };
@@ -273,7 +305,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
       )}
       <form
         onSubmit={handleSubmit((formData) =>
-          handleCreateUpdateIssue(formData, "convertToNewIssue")
+          handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createDraft")
         )}
       >
         <div className="space-y-5">

web/components/issues/draft-issue-modal.tsx

@@ -385,6 +385,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
               >
                 <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                   <DraftIssueForm
+                    isOpen={isOpen}
                     handleFormSubmit={handleFormSubmit}
                     prePopulatedData={prePopulateData}
                     data={data}

web/components/issues/form.tsx

@@ -129,18 +129,19 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
   const issueName = watch("name");
 
   const payload: Partial<IIssue> = {
-    name: getValues("name"),
+    name: watch("name"),
-    description: getValues("description"),
+    description: watch("description"),
-    state: getValues("state"),
+    description_html: watch("description_html"),
-    priority: getValues("priority"),
+    state: watch("state"),
-    assignees: getValues("assignees"),
+    priority: watch("priority"),
-    labels: getValues("labels"),
+    assignees: watch("assignees"),
-    start_date: getValues("start_date"),
+    labels: watch("labels"),
-    target_date: getValues("target_date"),
+    start_date: watch("start_date"),
-    project: getValues("project"),
+    target_date: watch("target_date"),
-    parent: getValues("parent"),
+    project: watch("project"),
-    cycle: getValues("cycle"),
+    parent: watch("parent"),
-    module: getValues("module"),
+    cycle: watch("cycle"),
+    module: watch("module"),
   };
 
   useEffect(() => {

web/components/issues/sidebar-select/blocked.tsx

@@ -14,7 +14,7 @@ import { ExistingIssuesListModal } from "components/core";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockedIcon } from "components/icons";
 // types
-import { BlockeIssueDetail, IIssue, ISearchIssueResponse, UserAuth } from "types";
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
 type Props = {
   issueId?: string;
@@ -41,6 +41,9 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
     setIsBlockedModalOpen(false);
   };
 
+  const blockedByIssue =
+    watch("related_issues")?.filter((i) => i.relation_type === "blocked_by") || [];
+
   const onSubmit = async (data: ISearchIssueResponse[]) => {
     if (data.length === 0) {
       setToastAlert({
@@ -80,18 +83,13 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
       })
       .then((response) => {
         submitChanges({
-          related_issues: [
+          related_issues: [...watch("related_issues"), ...response],
-            ...watch("related_issues")?.filter((i) => i.relation_type !== "blocked_by"),
-            ...response,
-          ],
         });
       });
 
     handleClose();
   };
 
-  const blockedByIssue = watch("related_issues")?.filter((i) => i.relation_type === "blocked_by");
-
   return (
     <>
       <ExistingIssuesListModal

web/components/issues/sidebar-select/blocker.tsx

@@ -15,7 +15,7 @@ import issuesService from "services/issues.service";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockerIcon } from "components/icons";
 // types
-import { BlockeIssueDetail, IIssue, ISearchIssueResponse, UserAuth } from "types";
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
 type Props = {
   issueId?: string;

web/components/issues/sidebar-select/duplicate.tsx

@@ -75,10 +75,8 @@ export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
           })),
         ],
       })
-      .then((response) => {
+      .then(() => {
-        submitChanges({
+        submitChanges();
-          related_issues: [...watch("related_issues"), ...(response ?? [])],
-        });
       });
 
     handleClose();

web/components/issues/sidebar-select/relates-to.tsx

@@ -75,10 +75,8 @@ export const SidebarRelatesSelect: React.FC<Props> = (props) => {
           })),
         ],
       })
-      .then((response) => {
+      .then(() => {
-        submitChanges({
+        submitChanges();
-          related_issues: [...watch("related_issues"), ...(response ?? [])],
-        });
       });
 
     handleClose();

web/components/issues/sidebar.tsx

@@ -53,7 +53,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import type { ICycle, IIssue, IIssueLink, linkDetails, IModule } from "types";
 // fetch-keys
-import { ISSUE_DETAILS } from "constants/fetch-keys";
+import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 import { ContrastIcon } from "components/icons";
 
 type Props = {
@@ -480,6 +480,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                         },
                         false
                       );
+                      mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
                     }}
                     watch={watchIssue}
                     disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
@@ -500,6 +501,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                         },
                         false
                       );
+                      mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
                     }}
                     watch={watchIssue}
                     disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
@@ -517,6 +519,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                           ...data,
                         };
                       });
+                      mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
                     }}
                     watch={watchIssue}
                     disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
@@ -534,6 +537,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                           ...data,
                         };
                       });
+                      mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
                     }}
                     watch={watchIssue}
                     disabled={memberRole.isGuest || memberRole.isViewer || uneditable}

web/pages/[workspaceSlug]/me/profile/index.tsx

@@ -375,7 +375,7 @@ const Profile: NextPage = () => {
 
                 <div className="flex items-center justify-between py-2">
                   <PrimaryButton type="submit" loading={isSubmitting}>
-                    {isSubmitting ? "Updating Project..." : "Update Project"}
+                    {isSubmitting ? "Updating Profile..." : "Update Profile"}
                   </PrimaryButton>
                 </div>
               </div>