fix: bugs related to issues (#2995)

* hide properties in list and kanban with 0 or nil values

* module and cycle mutation from peek overlay

* fix peek over view title change while switching

* fix create issue fetching

* fix build errors by mutating the values as well

web/components/issues/issue-layouts/kanban/properties.tsx

@@ -164,7 +164,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
 
       {/* extra render properties */}
       {/* sub-issues */}
-      {displayProperties && displayProperties?.sub_issue_count && (
+      {displayProperties && displayProperties?.sub_issue_count && !!issue?.sub_issues_count && (
         <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
           <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
             <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
@@ -174,7 +174,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       )}
 
       {/* attachments */}
-      {displayProperties && displayProperties?.attachment_count && (
+      {displayProperties && displayProperties?.attachment_count && !!issue?.attachment_count && (
         <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
           <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
             <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
@@ -184,7 +184,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       )}
 
       {/* link */}
-      {displayProperties && displayProperties?.link && (
+      {displayProperties && displayProperties?.link && !!issue?.link_count && (
         <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
           <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
             <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />

web/components/issues/issue-layouts/list/properties.tsx

@@ -135,7 +135,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
 
       {/* extra render properties */}
       {/* sub-issues */}
-      {displayProperties && displayProperties?.sub_issue_count && (
+      {displayProperties && displayProperties?.sub_issue_count && !!issue?.sub_issues_count && (
         <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
           <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
             <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
@@ -145,7 +145,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
       )}
 
       {/* attachments */}
-      {displayProperties && displayProperties?.attachment_count && (
+      {displayProperties && displayProperties?.attachment_count && !!issue?.attachment_count && (
         <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
           <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
             <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
@@ -155,7 +155,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
       )}
 
       {/* link */}
-      {displayProperties && displayProperties?.link && (
+      {displayProperties && displayProperties?.link && !!issue?.link_count && (
         <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
           <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
             <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />

web/components/issues/issue-peek-overview/issue-detail.tsx

@@ -60,8 +60,8 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
     formState: { errors },
   } = useForm<IIssue>({
     defaultValues: {
-      name: "",
+      name: issue.name,
-      description_html: "",
+      description_html: issue.description_html,
     },
   });
 
@@ -78,7 +78,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
     [issue, issueUpdate]
   );
 
-  const [localTitleValue, setLocalTitleValue] = useState("");
+  const [localTitleValue, setLocalTitleValue] = useState(issue.name);
   const issueTitleCurrentValue = watch("name");
   useEffect(() => {
     if (localTitleValue === "" && issueTitleCurrentValue !== "") {
@@ -86,6 +86,10 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
     }
   }, [issueTitleCurrentValue, localTitleValue]);
 
+  useEffect(() => {
+    setLocalTitleValue(issue.name);
+  }, [issue.name]);
+
   const debouncedFormSave = debounce(async () => {
     handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
   }, 1500);

web/components/issues/issue-peek-overview/properties.tsx

@@ -47,12 +47,13 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
   const {
     user: { currentProjectRole },
-    cycleIssues: { addIssueToCycle },
+    cycleIssues: cycleIssueStore,
     moduleIssues: { addIssueToModule },
+    issueDetail: { fetchPeekIssueDetails },
   } = useMobxStore();
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
 
   const { setToastAlert } = useToast();
 
@@ -77,17 +78,6 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
   const handleParent = (_parent: string) => {
     issueUpdate({ ...issue, parent: _parent });
   };
-  const handleAddIssueToCycle = async (cycleId: string) => {
-    if (!workspaceSlug || !issue || !cycleId) return;
-
-    addIssueToCycle(workspaceSlug.toString(), cycleId, [issue.id]);
-  };
-
-  const handleAddIssueToModule = async (moduleId: string) => {
-    if (!workspaceSlug || !issue || !moduleId) return;
-
-    addIssueToModule(workspaceSlug.toString(), moduleId, [issue.id]);
-  };
   const handleLabels = (formData: Partial<IIssue>) => {
     issueUpdate({ ...issue, ...formData });
   };
@@ -147,6 +137,12 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
       });
   };
 
+  const handleCycleOrModuleChange = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    await fetchPeekIssueDetails(workspaceSlug, projectId, issue.id);
+  };
+
   const handleEditLink = (link: ILinkDetails) => {
     setSelectedLinkToUpdate(link);
     setLinkModal(true);
@@ -309,8 +305,8 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             <div>
               <SidebarCycleSelect
                 issueDetail={issue}
-                handleCycleChange={handleAddIssueToCycle}
                 disabled={disableUserActions}
+                handleIssueUpdate={handleCycleOrModuleChange}
               />
             </div>
           </div>
@@ -323,8 +319,8 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             <div>
               <SidebarModuleSelect
                 issueDetail={issue}
-                handleModuleChange={handleAddIssueToModule}
                 disabled={disableUserActions}
+                handleIssueUpdate={handleCycleOrModuleChange}
               />
             </div>
           </div>

web/components/issues/modal.tsx

@@ -240,7 +240,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         if (handleSubmit) {
           await handleSubmit(res);
         } else {
-          if (viewId) currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
+          currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
 
           if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res, payload.cycle);
           if (payload.module && payload.module !== "") await addIssueToModule(res, payload.module);

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 // mobx store
@@ -6,7 +6,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // services
 import { CycleService } from "services/cycle.service";
 // ui
-import { ContrastIcon, CustomSearchSelect, Tooltip } from "@plane/ui";
+import { ContrastIcon, CustomSearchSelect, Spinner, Tooltip } from "@plane/ui";
 // types
 import { IIssue } from "types";
 // fetch-keys
@@ -14,23 +14,26 @@ import { CYCLE_ISSUES, INCOMPLETE_CYCLES_LIST, ISSUE_DETAILS } from "constants/f
 
 type Props = {
   issueDetail: IIssue | undefined;
-  handleCycleChange: (cycleId: string) => void;
+  handleCycleChange?: (cycleId: string) => void;
   disabled?: boolean;
+  handleIssueUpdate?: () => void;
 };
 
 // services
 const cycleService = new CycleService();
 
 export const SidebarCycleSelect: React.FC<Props> = (props) => {
-  const { issueDetail, handleCycleChange, disabled = false } = props;
+  const { issueDetail, disabled = false, handleIssueUpdate, handleCycleChange } = props;
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // mobx store
   const {
-    cycleIssues: { removeIssueFromCycle },
+    cycleIssues: { removeIssueFromCycle, addIssueToCycle },
   } = useMobxStore();
 
+  const [isUpdating, setIsUpdating] = useState(false);
+
   const { data: incompleteCycles } = useSWR(
     workspaceSlug && projectId ? INCOMPLETE_CYCLES_LIST(projectId as string) : null,
     workspaceSlug && projectId
@@ -38,17 +41,35 @@ export const SidebarCycleSelect: React.FC<Props> = (props) => {
       : null
   );
 
+  const handleCycleStoreChange = async (cycleId: string) => {
+    if (!workspaceSlug || !issueDetail || !cycleId) return;
+
+    setIsUpdating(true);
+    await addIssueToCycle(workspaceSlug.toString(), cycleId, [issueDetail.id], false, projectId?.toString())
+      .then(async () => {
+        handleIssueUpdate && (await handleIssueUpdate());
+      })
+      .finally(() => {
+        setIsUpdating(false);
+      });
+  };
+
   const handleRemoveIssueFromCycle = (bridgeId: string, cycleId: string) => {
     if (!workspaceSlug || !projectId || !issueDetail) return;
 
+    setIsUpdating(true);
     removeIssueFromCycle(workspaceSlug.toString(), projectId.toString(), cycleId, issueDetail.id, bridgeId)
-      .then(() => {
+      .then(async () => {
+        handleIssueUpdate && (await handleIssueUpdate());
         mutate(ISSUE_DETAILS(issueDetail.id));
 
         mutate(CYCLE_ISSUES(cycleId));
       })
       .catch((e) => {
         console.log(e);
+      })
+      .finally(() => {
+        setIsUpdating(false);
       });
   };
 
@@ -67,13 +88,18 @@ export const SidebarCycleSelect: React.FC<Props> = (props) => {
 
   const issueCycle = issueDetail?.issue_cycle;
 
+  const disableSelect = disabled || isUpdating;
+
   return (
+    <div className="flex items-center gap-1">
       <CustomSearchSelect
         value={issueCycle?.cycle_detail.id}
         onChange={(value: any) => {
           value === issueCycle?.cycle_detail.id
             ? handleRemoveIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
-          : handleCycleChange(value);
+            : handleCycleChange
+            ? handleCycleChange(value)
+            : handleCycleStoreChange(value);
         }}
         options={options}
         customButton={
@@ -82,7 +108,7 @@ export const SidebarCycleSelect: React.FC<Props> = (props) => {
               <button
                 type="button"
                 className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
-                disabled ? "cursor-not-allowed" : ""
+                  disableSelect ? "cursor-not-allowed" : ""
                 } max-w-[10rem]`}
               >
                 <span
@@ -99,7 +125,9 @@ export const SidebarCycleSelect: React.FC<Props> = (props) => {
         }
         width="max-w-[10rem]"
         noChevron
-      disabled={disabled}
+        disabled={disableSelect}
       />
+      {isUpdating && <Spinner className="w-4 h-4" />}
+    </div>
   );
 };

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

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { mutate } from "swr";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { CustomSearchSelect, DiceIcon, Tooltip } from "@plane/ui";
+import { CustomSearchSelect, DiceIcon, Spinner, Tooltip } from "@plane/ui";
 // types
 import { IIssue } from "types";
 // fetch-keys
@@ -13,32 +13,53 @@ import { ISSUE_DETAILS, MODULE_ISSUES } from "constants/fetch-keys";
 
 type Props = {
   issueDetail: IIssue | undefined;
-  handleModuleChange: (moduleId: string) => void;
+  handleModuleChange?: (moduleId: string) => void;
   disabled?: boolean;
+  handleIssueUpdate?: () => void;
 };
 
 export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
-  const { issueDetail, handleModuleChange, disabled = false } = props;
+  const { issueDetail, disabled = false, handleIssueUpdate, handleModuleChange } = props;
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // mobx store
   const {
     module: { projectModules },
-    moduleIssues: { removeIssueFromModule },
+    moduleIssues: { removeIssueFromModule, addIssueToModule },
   } = useMobxStore();
 
+  const [isUpdating, setIsUpdating] = useState(false);
+
+  const handleModuleStoreChange = async (moduleId: string) => {
+    if (!workspaceSlug || !issueDetail || !moduleId) return;
+
+    setIsUpdating(true);
+    await addIssueToModule(workspaceSlug.toString(), moduleId, [issueDetail.id], false, projectId?.toString())
+      .then(async () => {
+        handleIssueUpdate && (await handleIssueUpdate());
+      })
+      .finally(() => {
+        setIsUpdating(false);
+      });
+  };
+
   const handleRemoveIssueFromModule = (bridgeId: string, moduleId: string) => {
     if (!workspaceSlug || !projectId || !issueDetail) return;
 
+    setIsUpdating(true);
     removeIssueFromModule(workspaceSlug.toString(), projectId.toString(), moduleId, issueDetail.id, bridgeId)
-      .then(() => {
+      .then(async () => {
+        handleIssueUpdate && (await handleIssueUpdate());
         mutate(ISSUE_DETAILS(issueDetail.id));
 
         mutate(MODULE_ISSUES(moduleId));
       })
       .catch((e) => {
         console.log(e);
+      })
+      .finally(() => {
+        setIsUpdating(false);
       });
   };
 
@@ -57,13 +78,18 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
 
   const issueModule = issueDetail?.issue_module;
 
+  const disableSelect = disabled || isUpdating;
+
   return (
+    <div className="flex items-center gap-1">
       <CustomSearchSelect
         value={issueModule?.module_detail.id}
         onChange={(value: any) => {
           value === issueModule?.module_detail.id
             ? handleRemoveIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
-          : handleModuleChange(value);
+            : handleModuleChange
+            ? handleModuleChange(value)
+            : handleModuleStoreChange(value);
         }}
         options={options}
         customButton={
@@ -75,7 +101,7 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
               <button
                 type="button"
                 className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
-                disabled ? "cursor-not-allowed" : ""
+                  disableSelect ? "cursor-not-allowed" : ""
                 } max-w-[10rem]`}
               >
                 <span
@@ -94,7 +120,9 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
         }
         width="max-w-[10rem]"
         noChevron
-      disabled={disabled}
+        disabled={disableSelect}
       />
+      {isUpdating && <Spinner className="w-4 h-4" />}
+    </div>
   );
 });

web/components/profile/profile-issues.tsx

@@ -34,7 +34,7 @@ export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
     async () => {
       if (workspaceSlug && userId) {
         await fetchFilters(workspaceSlug);
-        await fetchIssues(workspaceSlug, userId, getIssues ? "mutation" : "init-loader", type);
+        await fetchIssues(workspaceSlug, userId, getIssues ? "mutation" : "init-loader", undefined, type);
       }
     }
   );

web/store/issues/profile/issue.store.ts

@@ -28,6 +28,7 @@ export interface IProfileIssuesStore {
     workspaceSlug: string,
     userId: string,
     loadType: TLoader,
+    id?: string | undefined,
     type?: "assigned" | "created" | "subscribed"
   ) => Promise<IIssueResponse>;
   createIssue: (workspaceSlug: string, userId: string, data: Partial<IIssue>) => Promise<IIssue | undefined>;
@@ -150,6 +151,7 @@ export class ProfileIssuesStore extends IssueBaseStore implements IProfileIssues
     workspaceSlug: string,
     userId: string,
     loadType: TLoader = "init-loader",
+    id?: string | undefined,
     type?: "assigned" | "created" | "subscribed"
   ) => {
     try {

web/store/issues/project-issues/cycle/issue.store.ts

@@ -53,7 +53,8 @@ export interface ICycleIssuesStore {
     workspaceSlug: string,
     cycleId: string,
     issueIds: string[],
-    fetchAfterAddition?: boolean
+    fetchAfterAddition?: boolean,
+    projectId?: string
   ) => Promise<IIssue>;
   removeIssueFromCycle: (
     workspaceSlug: string,
@@ -314,19 +315,27 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
     }
   };
 
-  addIssueToCycle = async (workspaceSlug: string, cycleId: string, issueIds: string[], fetchAfterAddition = true) => {
+  addIssueToCycle = async (
-    if (!this.currentProjectId) return;
+    workspaceSlug: string,
+    cycleId: string,
+    issueIds: string[],
+    fetchAfterAddition = true,
+    projectId?: string
+  ) => {
+    if (!this.currentProjectId && !projectId) return;
+
+    const projectIdToUpdate: string = this.currentProjectId || projectId || "";
 
     try {
-      const issueToCycle = await this.issueService.addIssueToCycle(workspaceSlug, this.currentProjectId, cycleId, {
+      const issueToCycle = await this.issueService.addIssueToCycle(workspaceSlug, projectIdToUpdate, cycleId, {
         issues: issueIds,
       });
 
-      if (fetchAfterAddition) this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", cycleId);
+      if (fetchAfterAddition) this.fetchIssues(workspaceSlug, projectIdToUpdate, "mutation", cycleId);
 
       return issueToCycle;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", cycleId);
+      this.fetchIssues(workspaceSlug, projectIdToUpdate, "mutation", cycleId);
       throw error;
     }
   };

web/store/issues/project-issues/module/issue.store.ts

@@ -53,7 +53,8 @@ export interface IModuleIssuesStore {
     workspaceSlug: string,
     moduleId: string,
     issueIds: string[],
-    fetchAfterAddition?: boolean
+    fetchAfterAddition?: boolean,
+    projectId?: string
   ) => Promise<any>;
   removeIssueFromModule: (
     workspaceSlug: string,
@@ -306,19 +307,27 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
     }
   };
 
-  addIssueToModule = async (workspaceSlug: string, moduleId: string, issueIds: string[], fetchAfterAddition = true) => {
+  addIssueToModule = async (
-    if (!this.currentProjectId) return;
+    workspaceSlug: string,
+    moduleId: string,
+    issueIds: string[],
+    fetchAfterAddition = true,
+    projectId?: string
+  ) => {
+    if (!this.currentProjectId && !projectId) return;
+
+    const projectIdToUpdate: string = this.currentProjectId || projectId || "";
 
     try {
-      const issueToModule = await this.moduleService.addIssuesToModule(workspaceSlug, this.currentProjectId, moduleId, {
+      const issueToModule = await this.moduleService.addIssuesToModule(workspaceSlug, projectIdToUpdate, moduleId, {
         issues: issueIds,
       });
 
-      if (fetchAfterAddition) this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", moduleId);
+      if (fetchAfterAddition) this.fetchIssues(workspaceSlug, projectIdToUpdate, "mutation", moduleId);
 
       return issueToModule;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", moduleId);
+      this.fetchIssues(workspaceSlug, projectIdToUpdate, "mutation", moduleId);
       throw error;
     }
   };