chore: added description in inbox issue

apiserver/plane/app/views/issue.py

@@ -1209,13 +1209,13 @@ class IssueArchiveViewSet(BaseViewSet):
         return Response(issues, status=status.HTTP_200_OK)
 
     def retrieve(self, request, slug, project_id, pk=None):
-        issue = self.get_queryset().filter(pk=pk).first()
-        return Response(
-            IssueDetailSerializer(
-                issue, fields=self.fields, expand=self.expand
-            ).data,
-            status=status.HTTP_200_OK,
+        issue = Issue.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            archived_at__isnull=False,
+            pk=pk,
         )
+        return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
 
     def unarchive(self, request, slug, project_id, pk=None):
         issue = Issue.objects.get(

web/components/dropdowns/cycle.tsx

@@ -61,7 +61,6 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
   const [isOpen, setIsOpen] = useState(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -112,15 +111,23 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
   const filteredOptions =
     query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
 
+  // fetch cycles of the project if not already present in the store
+  useEffect(() => {
+    if (!workspaceSlug) return;
+
+    if (!cycleIds) fetchAllCycles(workspaceSlug, projectId);
+  }, [cycleIds, fetchAllCycles, projectId, workspaceSlug]);
+
   const selectedCycle = value ? getCycleById(value) : null;
 
   const onOpen = () => {
-    if (workspaceSlug && !cycleIds) fetchAllCycles(workspaceSlug, projectId);
+    if (referenceElement) referenceElement.focus();
   };
 
   const handleClose = () => {
     if (!isOpen) return;
     setIsOpen(false);
+    if (referenceElement) referenceElement.blur();
     onClose && onClose();
   };
 
@@ -144,12 +151,6 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
 
   useOutsideClickDetector(dropdownRef, handleClose);
 
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Combobox
       as="div"
@@ -215,8 +216,6 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
             <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
               <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
               <Combobox.Input
-                as="input"
-                ref={inputRef}
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}

web/components/dropdowns/estimate.tsx

@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import { Fragment, ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
@@ -60,7 +60,6 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
   const [isOpen, setIsOpen] = useState(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -111,11 +110,13 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
 
   const onOpen = () => {
     if (!activeEstimate && workspaceSlug) fetchProjectEstimates(workspaceSlug, projectId);
+    if (referenceElement) referenceElement.focus();
   };
 
   const handleClose = () => {
     if (!isOpen) return;
     setIsOpen(false);
+    if (referenceElement) referenceElement.blur();
     onClose && onClose();
   };
 
@@ -139,12 +140,6 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
 
   useOutsideClickDetector(dropdownRef, handleClose);
 
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Combobox
       as="div"
@@ -210,8 +205,6 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
             <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
               <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
               <Combobox.Input
-                as="input"
-                ref={inputRef}
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}

web/components/dropdowns/member/project-member.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
@@ -50,7 +50,6 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
   const [isOpen, setIsOpen] = useState(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -104,11 +103,13 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
 
   const onOpen = () => {
     if (!projectMemberIds && workspaceSlug) fetchProjectMembers(workspaceSlug, projectId);
+    if (referenceElement) referenceElement.focus();
   };
 
   const handleClose = () => {
     if (!isOpen) return;
     setIsOpen(false);
+    if (referenceElement) referenceElement.blur();
     onClose && onClose();
   };
 
@@ -132,12 +133,6 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
 
   useOutsideClickDetector(dropdownRef, handleClose);
 
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Combobox
       as="div"
@@ -208,8 +203,6 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
             <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
               <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
               <Combobox.Input
-                as="input"
-                ref={inputRef}
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}

web/components/dropdowns/member/workspace-member.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
@@ -44,7 +44,6 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
   const [isOpen, setIsOpen] = useState<boolean>(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -92,13 +91,19 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
   };
   if (multiple) comboboxProps.multiple = true;
 
+  const onOpen = () => {
+    if (referenceElement) referenceElement.focus();
+  };
+
   const handleClose = () => {
     if (!isOpen) return;
     setIsOpen(false);
+    if (referenceElement) referenceElement.blur();
     onClose && onClose();
   };
 
   const toggleDropdown = () => {
+    if (!isOpen) onOpen();
     setIsOpen((prevIsOpen) => !prevIsOpen);
   };
 
@@ -117,12 +122,6 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
 
   useOutsideClickDetector(dropdownRef, handleClose);
 
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Combobox
       as="div"
@@ -193,8 +192,6 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
             <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
               <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
               <Combobox.Input
-                as="input"
-                ref={inputRef}
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}

web/components/dropdowns/module.tsx

@@ -166,7 +166,6 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
   const [isOpen, setIsOpen] = useState(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -217,13 +216,21 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
   const filteredOptions =
     query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
 
+  // fetch modules of the project if not already present in the store
+  useEffect(() => {
+    if (!workspaceSlug) return;
+
+    if (!moduleIds) fetchModules(workspaceSlug, projectId);
+  }, [moduleIds, fetchModules, projectId, workspaceSlug]);
+
   const onOpen = () => {
-    if (!moduleIds && workspaceSlug) fetchModules(workspaceSlug, projectId);
+    if (referenceElement) referenceElement.focus();
   };
 
   const handleClose = () => {
     if (!isOpen) return;
     setIsOpen(false);
+    if (referenceElement) referenceElement.blur();
     onClose && onClose();
   };
 
@@ -254,12 +261,6 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
   };
   if (multiple) comboboxProps.multiple = true;
 
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Combobox
       as="div"
@@ -330,8 +331,6 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
             <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
               <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
               <Combobox.Input
-                as="input"
-                ref={inputRef}
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}

web/components/dropdowns/priority.tsx

@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import { Fragment, ReactNode, useRef, useState } from "react";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search } from "lucide-react";
@@ -272,7 +272,6 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -306,13 +305,19 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
   const filteredOptions =
     query === "" ? options : options.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
 
+  const onOpen = () => {
+    if (referenceElement) referenceElement.focus();
+  };
+
   const handleClose = () => {
     if (!isOpen) return;
     setIsOpen(false);
+    if (referenceElement) referenceElement.blur();
     onClose && onClose();
   };
 
   const toggleDropdown = () => {
+    if (!isOpen) onOpen();
     setIsOpen((prevIsOpen) => !prevIsOpen);
   };
 
@@ -337,12 +342,6 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
     ? BackgroundButton
     : TransparentButton;
 
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Combobox
       as="div"
@@ -410,8 +409,6 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
             <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
               <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
               <Combobox.Input
-                as="input"
-                ref={inputRef}
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}

web/components/dropdowns/project.tsx

@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import { Fragment, ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
@@ -50,7 +50,6 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
   const [isOpen, setIsOpen] = useState(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -95,13 +94,19 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
 
   const selectedProject = value ? getProjectById(value) : null;
 
+  const onOpen = () => {
+    if (referenceElement) referenceElement.focus();
+  };
+
   const handleClose = () => {
     if (!isOpen) return;
     setIsOpen(false);
     onClose && onClose();
+    if (referenceElement) referenceElement.blur();
   };
 
   const toggleDropdown = () => {
+    if (!isOpen) onOpen();
     setIsOpen((prevIsOpen) => !prevIsOpen);
   };
 
@@ -120,12 +125,6 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
 
   useOutsideClickDetector(dropdownRef, handleClose);
 
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Combobox
       as="div"
@@ -199,8 +198,6 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
             <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
               <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
               <Combobox.Input
-                as="input"
-                ref={inputRef}
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}

web/components/dropdowns/state.tsx

@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import { Fragment, ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
@@ -52,7 +52,6 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   const [isOpen, setIsOpen] = useState(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -93,12 +92,14 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
 
   const onOpen = () => {
     if (!statesList && workspaceSlug) fetchProjectStates(workspaceSlug, projectId);
+    if (referenceElement) referenceElement.focus();
   };
 
   const handleClose = () => {
     if (!isOpen) return;
     setIsOpen(false);
     onClose && onClose();
+    if (referenceElement) referenceElement.blur();
   };
 
   const toggleDropdown = () => {
@@ -121,12 +122,6 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
 
   useOutsideClickDetector(dropdownRef, handleClose);
 
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Combobox
       as="div"
@@ -198,8 +193,6 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
             <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
               <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
               <Combobox.Input
-                as="input"
-                ref={inputRef}
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}

web/components/inbox/inbox-issue-status.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { observer } from "mobx-react";
 // hooks
 import { useInboxIssues } from "hooks/store";
 // constants
@@ -14,7 +13,7 @@ type Props = {
   showDescription?: boolean;
 };
 
-export const InboxIssueStatus: React.FC<Props> = observer((props) => {
+export const InboxIssueStatus: React.FC<Props> = (props) => {
   const { workspaceSlug, projectId, inboxId, issueId, iconSize = 18, showDescription = false } = props;
   // hooks
   const {
@@ -53,4 +52,4 @@ export const InboxIssueStatus: React.FC<Props> = observer((props) => {
       )}
     </div>
   );
-});
+};

web/components/issues/description-form.tsx

@@ -108,7 +108,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = observer((props) => {
       description_html: issue.description_html === "" ? "<p></p>" : issue.description_html,
     });
     setLocalTitleValue(issue.name);
-  }, [issue, issue.description_html, reset]);
+  }, [issue, reset]);
 
   // ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS
   // TODO: Verify the exhaustive-deps warning

web/components/issues/description-input.tsx

@@ -1,95 +0,0 @@
-import { FC, useState, useEffect } from "react";
-import { observer } from "mobx-react";
-// components
-import { Loader } from "@plane/ui";
-import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor";
-// store hooks
-import { useMention, useWorkspace } from "hooks/store";
-// services
-import { FileService } from "services/file.service";
-const fileService = new FileService();
-// types
-import { TIssueOperations } from "./issue-detail";
-// hooks
-import useDebounce from "hooks/use-debounce";
-import useReloadConfirmations from "hooks/use-reload-confirmation";
-
-export type IssueDescriptionInputProps = {
-  disabled?: boolean;
-  value: string | undefined | null;
-  workspaceSlug: string;
-  setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
-  issueOperations: TIssueOperations;
-  projectId: string;
-  issueId: string;
-};
-
-export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((props) => {
-  const { disabled, value, workspaceSlug, setIsSubmitting, issueId, issueOperations, projectId } = props;
-  // states
-  const [descriptionHTML, setDescriptionHTML] = useState(value);
-  // store hooks
-  const { mentionHighlights, mentionSuggestions } = useMention();
-  const workspaceStore = useWorkspace();
-  // hooks
-  const { setShowAlert } = useReloadConfirmations();
-  const debouncedValue = useDebounce(descriptionHTML, 1500);
-  // computed values
-  const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug)?.id as string;
-
-  useEffect(() => {
-    setDescriptionHTML(value);
-  }, [value]);
-
-  useEffect(() => {
-    if (debouncedValue || debouncedValue === "") {
-      issueOperations
-        .update(workspaceSlug, projectId, issueId, { description_html: debouncedValue }, false)
-        .finally(() => {
-          setIsSubmitting("saved");
-        });
-    }
-    // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue]);
-
-  if (!descriptionHTML && descriptionHTML !== "") {
-    return (
-      <Loader>
-        <Loader.Item height="150px" />
-      </Loader>
-    );
-  }
-
-  if (disabled) {
-    return (
-      <RichReadOnlyEditor
-        value={descriptionHTML}
-        customClassName="!p-0 !pt-2 text-custom-text-200"
-        noBorder={disabled}
-        mentionHighlights={mentionHighlights}
-      />
-    );
-  }
-
-  return (
-    <RichTextEditor
-      cancelUploadImage={fileService.cancelUpload}
-      uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
-      deleteFile={fileService.getDeleteImageFunction(workspaceId)}
-      restoreFile={fileService.getRestoreImageFunction(workspaceId)}
-      value={descriptionHTML}
-      setShouldShowAlert={setShowAlert}
-      setIsSubmitting={setIsSubmitting}
-      dragDropEnabled
-      customClassName="min-h-[150px] shadow-sm"
-      onChange={(description: Object, description_html: string) => {
-        setShowAlert(true);
-        setIsSubmitting("submitting");
-        setDescriptionHTML(description_html);
-      }}
-      mentionSuggestions={mentionSuggestions}
-      mentionHighlights={mentionHighlights}
-    />
-  );
-});

web/components/issues/issue-detail/inbox/main-content.tsx

@@ -3,9 +3,7 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { useIssueDetail, useProjectState, useUser } from "hooks/store";
 // components
-import { IssueUpdateStatus, TIssueOperations } from "components/issues";
-import { IssueTitleInput } from "../../title-input";
-import { IssueDescriptionInput } from "../../description-input";
+import { IssueDescriptionForm, IssueUpdateStatus, TIssueOperations } from "components/issues";
 import { IssueReaction } from "../reactions";
 import { IssueActivity } from "../issue-activity";
 import { InboxIssueStatus } from "../../../inbox/inbox-issue-status";
@@ -59,24 +57,15 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           <IssueUpdateStatus isSubmitting={isSubmitting} issueDetail={issue} />
         </div>
 
-        <IssueTitleInput
+        <IssueDescriptionForm
           workspaceSlug={workspaceSlug}
-          projectId={issue.project_id}
-          issueId={issue.id}
+          projectId={projectId}
+          issueId={issueId}
           setIsSubmitting={(value) => setIsSubmitting(value)}
+          isSubmitting={isSubmitting}
+          issue={issue}
           issueOperations={issueOperations}
           disabled={!is_editable}
-          value={issue.name}
-        />
-
-        <IssueDescriptionInput
-          workspaceSlug={workspaceSlug}
-          projectId={issue.project_id}
-          issueId={issue.id}
-          setIsSubmitting={(value) => setIsSubmitting(value)}
-          issueOperations={issueOperations}
-          disabled={!is_editable}
-          value={issue.description_html}
         />
 
         {currentUser && (

web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx

@@ -81,6 +81,7 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
             render={({ field: { value, onChange } }) => (
               <LiteTextEditorWithRef
                 onEnterKeyPress={(e) => {
+                  console.log("yo");
                   handleSubmit(onSubmit)(e);
                 }}
                 cancelUploadImage={fileService.cancelUpload}

web/components/issues/issue-detail/main-content.tsx

@@ -3,9 +3,7 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { useIssueDetail, useProjectState, useUser } from "hooks/store";
 // components
-import { IssueAttachmentRoot, IssueUpdateStatus } from "components/issues";
-import { IssueTitleInput } from "../title-input";
-import { IssueDescriptionInput } from "../description-input";
+import { IssueDescriptionForm, IssueAttachmentRoot, IssueUpdateStatus } from "components/issues";
 import { IssueParentDetail } from "./parent";
 import { IssueReaction } from "./reactions";
 import { SubIssuesRoot } from "../sub-issues";
@@ -63,24 +61,15 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
           <IssueUpdateStatus isSubmitting={isSubmitting} issueDetail={issue} />
         </div>
 
-        <IssueTitleInput
+        <IssueDescriptionForm
           workspaceSlug={workspaceSlug}
-          projectId={issue.project_id}
-          issueId={issue.id}
+          projectId={projectId}
+          issueId={issueId}
           setIsSubmitting={(value) => setIsSubmitting(value)}
+          isSubmitting={isSubmitting}
+          issue={issue}
           issueOperations={issueOperations}
           disabled={!is_editable}
-          value={issue.name}
-        />
-
-        <IssueDescriptionInput
-          workspaceSlug={workspaceSlug}
-          projectId={issue.project_id}
-          issueId={issue.id}
-          setIsSubmitting={(value) => setIsSubmitting(value)}
-          issueOperations={issueOperations}
-          disabled={!is_editable}
-          value={issue.description_html}
         />
 
         {currentUser && (

web/components/issues/issue-layouts/empty-states/draft-issues.tsx

@@ -42,7 +42,7 @@ export const ProjectDraftEmptyState: React.FC = observer(() => {
 
   const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
   const currentLayoutEmptyStateImagePath = getEmptyStateImagePath("empty-filters", activeLayout ?? "list", isLightMode);
-  const EmptyStateImagePath = getEmptyStateImagePath("draft", "draft-issues-empty", isLightMode);
+  const EmptyStateImagePath = getEmptyStateImagePath("draft", "empty-issues", isLightMode);
 
   const issueFilterCount = size(
     Object.fromEntries(

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

@@ -50,8 +50,9 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
   return (
     <div
       className={cn("min-h-12 relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm", {
-        "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
-        "last:border-b-transparent": peekIssue?.issueId !== issue.id,
+        "border border-custom-primary-70 hover:border-custom-primary-70":
+              peekIssue && peekIssue.issueId === issue.id,
+            "last:border-b-transparent": peekIssue?.issueId !== issue.id
       })}
     >
       {displayProperties && displayProperties?.key && (

web/components/issues/issue-layouts/list/list-view-types.d.ts

@@ -1,5 +1,3 @@
-import { TIssue } from "@plane/types";
-
 export interface IQuickActionProps {
   issue: TIssue;
   handleDelete: () => Promise<void>;

web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2 } from "lucide-react";
-import omit from "lodash/omit";
 // hooks
 import useToast from "hooks/use-toast";
 import { useEventTracker } from "hooks/store";
@@ -31,7 +30,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { setToastAlert } = useToast();
 
   const handleCopyIssueLink = () => {
-    copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`).then(() =>
+    copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
       setToastAlert({
         type: "success",
         title: "Link copied",
@@ -40,13 +39,11 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
     );
   };
 
-  const duplicateIssuePayload = omit(
-    {
-      ...issue,
-      name: `${issue.name} (copy)`,
-    },
-    ["id"]
-  );
+  const duplicateIssuePayload = {
+    ...issue,
+    name: `${issue.name} (copy)`,
+  };
+  delete duplicateIssuePayload.id;
 
   return (
     <>
@@ -90,7 +87,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             <CustomMenu.MenuItem
               onClick={() => {
                 setTrackElement("Global issues");
-                setIssueToEdit(issue);
+            setIssueToEdit(issue);
                 setCreateUpdateIssueModal(true);
               }}
             >
@@ -102,7 +99,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             <CustomMenu.MenuItem
               onClick={() => {
                 setTrackElement("Global issues");
-                setCreateUpdateIssueModal(true);
+            setCreateUpdateIssueModal(true);
               }}
             >
               <div className="flex items-center gap-2">
@@ -113,7 +110,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             <CustomMenu.MenuItem
               onClick={() => {
                 setTrackElement("Global issues");
-                setDeleteIssueModal(true);
+            setDeleteIssueModal(true);
               }}
             >
               <div className="flex items-center gap-2">

web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx

@@ -4,7 +4,7 @@ import { CustomMenu } from "@plane/ui";
 import { Link, Trash2 } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
-import { useEventTracker, useIssues, useUser } from "hooks/store";
+import { useEventTracker, useIssues ,useUser} from "hooks/store";
 // components
 import { DeleteArchivedIssueModal } from "components/issues";
 // helpers
@@ -37,7 +37,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
   const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
 
   const handleCopyIssueLink = () => {
-    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project_id}/archived-issues/${issue.id}`).then(() =>
+    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/archived-issues/${issue.id}`).then(() =>
       setToastAlert({
         type: "success",
         title: "Link copied",
@@ -75,7 +75,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
           <CustomMenu.MenuItem
             onClick={() => {
               setTrackElement(activeLayout);
-              setDeleteIssueModal(true);
+            setDeleteIssueModal(true);
             }}
           >
             <div className="flex items-center gap-2">

web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx

@@ -2,10 +2,9 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
-import omit from "lodash/omit";
 // hooks
 import useToast from "hooks/use-toast";
-import { useEventTracker, useIssues, useUser } from "hooks/store";
+import { useEventTracker, useIssues,useUser } from "hooks/store";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
@@ -50,7 +49,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
 
   const handleCopyIssueLink = () => {
-    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`).then(() =>
+    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
       setToastAlert({
         type: "success",
         title: "Link copied",
@@ -59,13 +58,11 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
     );
   };
 
-  const duplicateIssuePayload = omit(
-    {
-      ...issue,
-      name: `${issue.name} (copy)`,
-    },
-    ["id"]
-  );
+  const duplicateIssuePayload = {
+    ...issue,
+    name: `${issue.name} (copy)`,
+  };
+  delete duplicateIssuePayload.id;
 
   return (
     <>
@@ -110,10 +107,10 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
               onClick={() => {
                 setIssueToEdit({
                   ...issue,
-                  cycle_id: cycleId?.toString() ?? null,
+                  cycle: cycleId?.toString() ?? null,
                 });
                 setTrackElement(activeLayout);
-                setCreateUpdateIssueModal(true);
+            setCreateUpdateIssueModal(true);
               }}
             >
               <div className="flex items-center gap-2">
@@ -134,7 +131,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             <CustomMenu.MenuItem
               onClick={() => {
                 setTrackElement(activeLayout);
-                setCreateUpdateIssueModal(true);
+            setCreateUpdateIssueModal(true);
               }}
             >
               <div className="flex items-center gap-2">
@@ -145,7 +142,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             <CustomMenu.MenuItem
               onClick={() => {
                 setTrackElement(activeLayout);
-                setDeleteIssueModal(true);
+            setDeleteIssueModal(true);
               }}
             >
               <div className="flex items-center gap-2">

web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx

@@ -2,10 +2,9 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
-import omit from "lodash/omit";
 // hooks
 import useToast from "hooks/use-toast";
-import { useIssues, useEventTracker, useUser } from "hooks/store";
+import { useIssues, useEventTracker ,useUser } from "hooks/store";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
@@ -50,7 +49,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
 
   const handleCopyIssueLink = () => {
-    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`).then(() =>
+    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
       setToastAlert({
         type: "success",
         title: "Link copied",
@@ -59,13 +58,11 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
     );
   };
 
-  const duplicateIssuePayload = omit(
-    {
-      ...issue,
-      name: `${issue.name} (copy)`,
-    },
-    ["id"]
-  );
+  const duplicateIssuePayload = {
+    ...issue,
+    name: `${issue.name} (copy)`,
+  };
+  delete duplicateIssuePayload.id;
 
   return (
     <>
@@ -108,9 +105,9 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
           <>
             <CustomMenu.MenuItem
               onClick={() => {
-                setIssueToEdit({ ...issue, module_ids: moduleId ? [moduleId.toString()] : [] });
+                setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
                 setTrackElement(activeLayout);
-                setCreateUpdateIssueModal(true);
+            setCreateUpdateIssueModal(true);
               }}
             >
               <div className="flex items-center gap-2">
@@ -131,7 +128,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             <CustomMenu.MenuItem
               onClick={() => {
                 setTrackElement(activeLayout);
-                setCreateUpdateIssueModal(true);
+            setCreateUpdateIssueModal(true);
               }}
             >
               <div className="flex items-center gap-2">
@@ -144,7 +141,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
                 e.preventDefault();
                 e.stopPropagation();
                 setTrackElement(activeLayout);
-                setDeleteIssueModal(true);
+            setDeleteIssueModal(true);
               }}
             >
               <div className="flex items-center gap-2">

web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2 } from "lucide-react";
-import omit from "lodash/omit";
 // hooks
 import { useEventTracker, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
@@ -40,7 +39,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
   const { setToastAlert } = useToast();
 
   const handleCopyIssueLink = () => {
-    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`).then(() =>
+    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
       setToastAlert({
         type: "success",
         title: "Link copied",
@@ -49,13 +48,11 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
     );
   };
 
-  const duplicateIssuePayload = omit(
-    {
-      ...issue,
-      name: `${issue.name} (copy)`,
-    },
-    ["id"]
-  );
+  const duplicateIssuePayload = {
+    ...issue,
+    name: `${issue.name} (copy)`,
+  };
+  delete duplicateIssuePayload.id;
 
   const isDraftIssue = router?.asPath?.includes("draft-issues") || false;
 

web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx

@@ -159,7 +159,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
         globalViewId.toString()
       );
     },
-    [updateFilters, workspaceSlug, globalViewId]
+    [updateFilters, workspaceSlug]
   );
 
   const renderQuickActions = useCallback(

web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx

@@ -54,7 +54,7 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
           <div className="relative h-full w-full overflow-auto">
             <ArchivedIssueListLayout />
           </div>
-          <IssuePeekOverview is_archived={true} />
+          <IssuePeekOverview is_archived />
         </Fragment>
       )}
     </div>

web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx

@@ -88,7 +88,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
         viewId
       );
     },
-    [issueFiltersStore?.updateFilters, projectId, workspaceSlug, viewId]
+    [issueFiltersStore, projectId, workspaceSlug, viewId]
   );
 
   const renderQuickActions = useCallback(

web/components/issues/issue-layouts/spreadsheet/issue-column.tsx

@@ -38,7 +38,7 @@ export const IssueColumn = observer((props: Props) => {
     >
       <td
         tabIndex={0}
-        className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100"
+        className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100 focus:border-custom-primary-70"
         ref={tableCellRef}
       >
         <Column

web/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx

@@ -28,7 +28,7 @@ export const SpreadsheetHeaderColumn = observer((props: Props) => {
       shouldRenderProperty={shouldRenderProperty}
     >
       <th
-        className="h-11 w-full min-w-[8rem] items-center bg-custom-background-90 text-sm font-medium px-4 py-1 border border-b-0 border-t-0 border-custom-border-100"
+        className="h-11 w-full min-w-[8rem] items-center bg-custom-background-90 text-sm font-medium px-4 py-1 border border-b-0 border-t-0 border-custom-border-100 focus:border-custom-primary-70"
         ref={tableHeaderCellRef}
         tabIndex={0}
       >

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

@@ -1,15 +1,10 @@
-import { FC, useCallback, useEffect, useState } from "react";
-import { observer } from "mobx-react";
-// store hooks
-import { useIssueDetail, useProject, useUser } from "hooks/store";
+import { FC } from "react";
 // hooks
-import useReloadConfirmations from "hooks/use-reload-confirmation";
+import { useIssueDetail, useProject, useUser } from "hooks/store";
 // components
-import { TIssueOperations } from "components/issues";
+import { IssueDescriptionForm, TIssueOperations } from "components/issues";
 import { IssueReaction } from "../issue-detail/reactions";
-import { IssueTitleInput } from "../title-input";
-import { IssueDescriptionInput } from "../description-input";
-import { debounce } from "lodash";
+import { observer } from "mobx-react";
 
 interface IPeekOverviewIssueDetails {
   workspaceSlug: string;
@@ -22,18 +17,17 @@ interface IPeekOverviewIssueDetails {
 }
 
 export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer((props) => {
-  const { workspaceSlug, issueId, issueOperations, disabled, setIsSubmitting } = props;
+  const { workspaceSlug, projectId, issueId, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
   // store hooks
   const { getProjectById } = useProject();
   const { currentUser } = useUser();
   const {
     issue: { getIssueById },
   } = useIssueDetail();
+
   // derived values
   const issue = getIssueById(issueId);
-
   if (!issue) return <></>;
-
   const projectDetails = getProjectById(issue?.project_id);
 
   return (
@@ -41,28 +35,20 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
       <span className="text-base font-medium text-custom-text-400">
         {projectDetails?.identifier}-{issue?.sequence_id}
       </span>
-      <IssueTitleInput
+      <IssueDescriptionForm
         workspaceSlug={workspaceSlug}
-        projectId={issue.project_id}
-        issueId={issue.id}
+        projectId={projectId}
+        issueId={issueId}
         setIsSubmitting={(value) => setIsSubmitting(value)}
+        isSubmitting={isSubmitting}
+        issue={issue}
         issueOperations={issueOperations}
         disabled={disabled}
-        value={issue.name}
-      />
-      <IssueDescriptionInput
-        workspaceSlug={workspaceSlug}
-        projectId={issue.project_id}
-        issueId={issue.id}
-        setIsSubmitting={(value) => setIsSubmitting(value)}
-        issueOperations={issueOperations}
-        disabled={disabled}
-        value={issue.description_html}
       />
       {currentUser && (
         <IssueReaction
           workspaceSlug={workspaceSlug}
-          projectId={issue.project_id}
+          projectId={projectId}
           issueId={issueId}
           currentUser={currentUser}
         />

web/components/issues/peek-overview/root.tsx

@@ -69,11 +69,20 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
   // state
   const [loader, setLoader] = useState(false);
 
+  useEffect(() => {
+    if (peekIssue) {
+      setLoader(true);
+      fetchIssue(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId).finally(() => {
+        setLoader(false);
+      });
+    }
+  }, [peekIssue, fetchIssue]);
+
   const issueOperations: TIssuePeekOperations = useMemo(
     () => ({
       fetch: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
-          await fetchIssue(workspaceSlug, projectId, issueId, is_archived);
+          await fetchIssue(workspaceSlug, projectId, issueId);
         } catch (error) {
           console.error("Error fetching the parent issue");
         }
@@ -315,20 +324,9 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
       removeModulesFromIssue,
       setToastAlert,
       onIssueUpdate,
-      captureIssueEvent,
-      router.asPath,
     ]
   );
 
-  useEffect(() => {
-    if (peekIssue) {
-      setLoader(true);
-      issueOperations.fetch(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId).finally(() => {
-        setLoader(false);
-      });
-    }
-  }, [peekIssue, issueOperations]);
-
   if (!peekIssue?.workspaceSlug || !peekIssue?.projectId || !peekIssue?.issueId) return <></>;
 
   const issue = getIssueById(peekIssue.issueId) || undefined;

web/components/issues/peek-overview/view.tsx

@@ -126,7 +126,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
         />
       )}
 
-      <div className="w-full !text-base">
+      <div className="w-full truncate !text-base">
         {issueId && (
           <div
             ref={issuePeekOverviewRef}
@@ -230,7 +230,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                           disabled={disabled}
                         />
 
-                        <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
+                        <IssueActivity
+                          workspaceSlug={workspaceSlug}
+                          projectId={projectId}
+                          issueId={issueId}
+                        />
                       </div>
                     ) : (
                       <div className={`flex h-full w-full overflow-auto`}>
@@ -246,7 +250,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                               setIsSubmitting={(value) => setIsSubmitting(value)}
                             />
 
-                            <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
+                            <IssueActivity
+                              workspaceSlug={workspaceSlug}
+                              projectId={projectId}
+                              issueId={issueId}
+                            />
                           </div>
                         </div>
                         <div

web/components/issues/select/label.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useRef, useState } from "react";
+import React, { Fragment, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
@@ -36,7 +36,6 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
   // popper
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: "bottom-start",
@@ -77,12 +76,6 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
 
   useOutsideClickDetector(dropdownRef, handleClose);
 
-  useEffect(() => {
-    if (isDropdownOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isDropdownOpen]);
-
   return (
     <Combobox
       as="div"
@@ -132,8 +125,6 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
             <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
               <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
               <Combobox.Input
-                as="input"
-                ref={inputRef}
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                 onChange={(event) => setQuery(event.target.value)}
                 placeholder="Search"

web/components/issues/title-input.tsx

@@ -1,70 +0,0 @@
-import { FC, useState, useEffect, useCallback } from "react";
-import { observer } from "mobx-react";
-// components
-import { TextArea } from "@plane/ui";
-// types
-import { TIssueOperations } from "./issue-detail";
-// hooks
-import useDebounce from "hooks/use-debounce";
-import useReloadConfirmations from "hooks/use-reload-confirmation";
-
-export type IssueTitleInputProps = {
-  disabled?: boolean;
-  value: string | undefined | null;
-  workspaceSlug: string;
-  setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
-  issueOperations: TIssueOperations;
-  projectId: string;
-  issueId: string;
-};
-
-export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
-  const { disabled, value, workspaceSlug, setIsSubmitting, issueId, issueOperations, projectId } = props;
-  // states
-  const [title, setTitle] = useState("");
-  // hooks
-  const { setShowAlert } = useReloadConfirmations();
-  const debouncedValue = useDebounce(title, 1500);
-
-  useEffect(() => {
-    if (value) setTitle(value);
-  }, [value]);
-
-  useEffect(() => {
-    if (debouncedValue) {
-      issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }, false).finally(() => {
-        setIsSubmitting("saved");
-      });
-    }
-    // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue]);
-
-  const handleTitleChange = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      setShowAlert(true);
-      setIsSubmitting("submitting");
-      setTitle(e.target.value);
-    },
-    [setIsSubmitting, setShowAlert]
-  );
-
-  return (
-    <div className="relative">
-      <TextArea
-        className={`min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary ${
-          title?.length === 0 ? "!ring-red-400" : ""
-        }`}
-        disabled={disabled}
-        value={title}
-        onChange={handleTitleChange}
-        maxLength={255}
-        placeholder="Issue title"
-      />
-      <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200">
-        <span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
-        /255
-      </div>
-    </div>
-  );
-});

web/components/pages/create-update-page-modal.tsx

@@ -68,6 +68,7 @@ export const CreateUpdatePageModal: FC<Props> = (props) => {
             state: "SUCCESS",
           },
         });
+        console.log("Page updated successfully", pageStore);
       } else {
         await createProjectPage(formData);
       }

web/components/project/form.tsx

@@ -79,7 +79,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
     return updateProject(workspaceSlug.toString(), project.id, payload)
       .then((res) => {
         const changed_properties = Object.keys(dirtyFields);
-
+        console.log(dirtyFields);
         captureProjectEvent({
           eventName: PROJECT_UPDATED,
           payload: {

web/layouts/settings-layout/profile/preferences/layout.tsx

@@ -20,55 +20,54 @@ export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayou
   const { theme: themeStore } = useApplication();
 
   const showMenuItem = () => {
-    const item = router.asPath.split("/");
+    const item = router.asPath.split('/');
     let splittedItem = item[item.length - 1];
     splittedItem = splittedItem.replace(splittedItem[0], splittedItem[0].toUpperCase());
+    console.log(splittedItem);
     return splittedItem;
-  };
+  }
 
   const profilePreferenceLinks: Array<{
     label: string;
     href: string;
   }> = [
-    {
-      label: "Theme",
-      href: `/profile/preferences/theme`,
-    },
-    {
-      label: "Email",
-      href: `/profile/preferences/email`,
-    },
-  ];
+      {
+        label: "Theme",
+        href: `/profile/preferences/theme`,
+      },
+      {
+        label: "Email",
+        href: `/profile/preferences/email`,
+      },
+    ];
 
   return (
-    <ProfileSettingsLayout
-      header={
-        <div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
-          <SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
-          <CustomMenu
-            maxHeight={"md"}
-            className="flex flex-grow justify-center text-custom-text-200 text-sm"
-            placement="bottom-start"
-            customButton={
-              <div className="flex gap-2 items-center px-2 py-1.5 border rounded-md border-custom-border-400">
-                <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{showMenuItem()}</span>
-                <ChevronDown className="w-4 h-4 text-custom-text-400" />
-              </div>
-            }
-            customButtonClassName="flex flex-grow justify-start text-custom-text-200 text-sm"
-          >
-            <></>
-            {profilePreferenceLinks.map((link) => (
-              <CustomMenu.MenuItem className="flex items-center gap-2">
-                <Link key={link.href} href={link.href} className="text-custom-text-300 w-full">
-                  {link.label}
-                </Link>
-              </CustomMenu.MenuItem>
-            ))}
-          </CustomMenu>
-        </div>
-      }
-    >
+    <ProfileSettingsLayout header={
+      <div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
+        <SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
+        <CustomMenu
+          maxHeight={"md"}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          placement="bottom-start"
+          customButton={
+            <div className="flex gap-2 items-center px-2 py-1.5 border rounded-md border-custom-border-400">
+              <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{showMenuItem()}</span>
+              <ChevronDown className="w-4 h-4 text-custom-text-400" />
+            </div>
+          }
+          customButtonClassName="flex flex-grow justify-start text-custom-text-200 text-sm"
+        >
+          <></>
+          {profilePreferenceLinks.map((link) => (
+            <CustomMenu.MenuItem
+              className="flex items-center gap-2"
+            >
+              <Link key={link.href} href={link.href} className="text-custom-text-300 w-full">{link.label}</Link>
+            </CustomMenu.MenuItem>
+          ))}
+        </CustomMenu>
+      </div>
+    }>
       <div className="relative flex h-screen w-full overflow-hidden">
         <ProfilePreferenceSettingsSidebar />
         <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">

web/store/issue/helpers/issue-helper.store.ts

@@ -202,7 +202,7 @@ export class IssueHelperStore implements TIssueHelperStore {
         if (!memberMap) break;
         for (const dataId of dataIdsArray) {
           const member = memberMap[dataId];
-          if (member && member.first_name) dataValues.push(member.first_name.toLocaleLowerCase());
+          if (memberMap && member.first_name) dataValues.push(member.first_name.toLocaleLowerCase());
         }
         break;
     }