chore: issue update status in detail page

web/components/issues/description-form.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useReloadConfirmations from "hooks/use-reload-confirmation";
 import debounce from "lodash/debounce";
@@ -33,11 +34,14 @@ const fileService = new FileService();
 export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
   const { issue, handleFormSubmit, workspaceSlug, isAllowed } = props;
   // states
-  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   const [characterLimit, setCharacterLimit] = useState(false);
 
-  const { setShowAlert } = useReloadConfirmations();
+  // mobx store
+  const {
+    projectIssues: { setIsSubmitting },
+  } = useMobxStore();
 
+  const { setShowAlert } = useReloadConfirmations();
   const editorSuggestion = useEditorSuggestions();
 
   const {
@@ -73,17 +77,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
     [handleFormSubmit]
   );
 
-  useEffect(() => {
-    if (isSubmitting === "submitted") {
-      setShowAlert(false);
-      setTimeout(async () => {
-        setIsSubmitting("saved");
-      }, 2000);
-    } else if (isSubmitting === "submitting") {
-      setShowAlert(true);
-    }
-  }, [isSubmitting, setShowAlert]);
-
   // reset form values
   useEffect(() => {
     if (!issue) return;
@@ -166,13 +159,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
             />
           )}
         />
-        <div
-          className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${
-            isSubmitting === "saved" ? "fadeOut" : "fadeIn"
-          }`}
-        >
-          {isSubmitting === "submitting" ? "Saving..." : "Saved"}
-        </div>
       </div>
     </div>
   );

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

@@ -25,20 +25,10 @@ interface IPeekOverviewIssueDetails {
   issueUpdate: (issue: Partial<IIssue>) => void;
   issueReactionCreate: (reaction: string) => void;
   issueReactionRemove: (reaction: string) => void;
-  setShowAlert: (value: boolean) => void;
 }
 
 export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) => {
-  const {
+  const { workspaceSlug, issue, issueReactions, user, issueUpdate, issueReactionCreate, issueReactionRemove } = props;
-    workspaceSlug,
-    issue,
-    issueReactions,
-    user,
-    issueUpdate,
-    issueReactionCreate,
-    issueReactionRemove,
-    setShowAlert,
-  } = props;
   // store
   const {
     user: userStore,
@@ -47,10 +37,10 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
   const { currentProjectRole } = userStore;
   const isAllowed = [15, 20].includes(currentProjectRole || 0);
   // states
-
   const [characterLimit, setCharacterLimit] = useState(false);
-  // hooks
 
+  // hooks
+  const { setShowAlert } = useReloadConfirmations();
   const editorSuggestions = useEditorSuggestions();
 
   const {

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

@@ -287,7 +287,6 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                           <div className="absolute top-0 left-0 h-full min-h-full w-full z-[9] flex items-center justify-center bg-custom-background-100 opacity-60" />
                         )}
                         <PeekOverviewIssueDetails
-                          setShowAlert={setShowAlert}
                           workspaceSlug={workspaceSlug}
                           issue={issue}
                           issueUpdate={issueUpdate}
@@ -322,7 +321,6 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                         <div className="relative w-full h-full space-y-6 p-4 py-5 overflow-auto">
                           <div className={isArchived ? "pointer-events-none" : ""}>
                             <PeekOverviewIssueDetails
-                              setShowAlert={setShowAlert}
                               workspaceSlug={workspaceSlug}
                               issue={issue}
                               issueReactions={issueReactions}

web/components/issues/main-content.tsx

@@ -19,9 +19,9 @@ import {
 } from "components/issues";
 import { SubIssuesRoot } from "./sub-issues";
 // ui
-import { CustomMenu, LayersIcon } from "@plane/ui";
+import { CustomMenu, LayersIcon, StateGroupIcon } from "@plane/ui";
 // icons
-import { MinusCircle } from "lucide-react";
+import { MinusCircle, RefreshCw } from "lucide-react";
 // types
 import { IIssue, IIssueComment } from "types";
 // fetch-keys
@@ -45,11 +45,20 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
 
   const { setToastAlert } = useToast();
 
-  const { user: userStore, project: projectStore } = useMobxStore();
+  const {
+    user: userStore,
+    project: projectStore,
+    projectState: { states },
+    projectIssues: { isSubmitting },
+  } = useMobxStore();
   const user = userStore.currentUser ?? undefined;
   const userRole = userStore.currentProjectRole;
   const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : undefined;
 
+  const currentIssueState = projectId
+    ? states[projectId.toString()]?.find((s) => s.id === issueDetails.state)
+    : undefined;
+
   const { data: siblingIssues } = useSWR(
     workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
     workspaceSlug && projectId && issueDetails?.parent
@@ -162,6 +171,29 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
             </CustomMenu>
           </div>
         ) : null}
+        <div className="flex items-center mb-5">
+          {currentIssueState && (
+            <StateGroupIcon
+              className="h-4 w-4 mr-3"
+              stateGroup={currentIssueState.group}
+              color={currentIssueState.color}
+            />
+          )}
+          <h4 className="text-lg text-custom-text-300 font-medium mr-4">
+            {issueDetails?.project_detail?.identifier}-{issueDetails?.sequence_id}
+          </h4>
+          <div
+            className={`flex transition-all items-center gap-x-2 ${isSubmitting === "saved" ? "fadeOut" : "fadeIn"}`}
+          >
+            {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
+              <RefreshCw className="h-4 w-4 stroke-custom-text-300" />
+            )}
+            <span className="text-sm text-custom-text-300">
+              {isSubmitting === "submitting" ? "Saving..." : "Saved"}
+            </span>
+          </div>
+        </div>
+
         <IssueDescriptionForm
           workspaceSlug={workspaceSlug as string}
           issue={issueDetails}

web/components/issues/sidebar.tsx

@@ -33,7 +33,7 @@ import {
 import { CustomDatePicker } from "components/ui";
 // icons
 import { Bell, CalendarDays, LinkIcon, Plus, Signal, Tag, Trash2, Triangle, User2 } from "lucide-react";
-import { Button, ContrastIcon, DiceIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
+import { Button, ContrastIcon, DiceIcon, DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
@@ -79,7 +79,10 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   const [linkModal, setLinkModal] = useState(false);
   const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<linkDetails | null>(null);
 
-  const { user: userStore } = useMobxStore();
+  const {
+    user: userStore,
+    projectState: { states },
+  } = useMobxStore();
   const user = userStore.currentUser;
   const userRole = userStore.currentProjectRole;
 
@@ -247,6 +250,10 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
   const isNotAllowed = userRole === 5 || userRole === 10;
 
+  const currentIssueState = projectId
+    ? states[projectId.toString()]?.find((s) => s.id === issueDetail?.state)
+    : undefined;
+
   return (
     <>
       <LinkModal
@@ -265,9 +272,19 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
       )}
       <div className="h-full w-full flex flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
         <div className="flex items-center justify-between px-5 pb-3">
-          <h4 className="text-sm font-medium">
+          <div className="flex items-center gap-x-2">
-            {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
+            {currentIssueState && (
-          </h4>
+              <StateGroupIcon
+                className="h-4 w-4"
+                stateGroup={currentIssueState.group}
+                color={currentIssueState.color}
+              />
+            )}
+            <h4 className="text-lg text-custom-text-300 font-medium">
+              {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
+            </h4>
+          </div>
+
           <div className="flex flex-wrap items-center gap-2">
             {issueDetail?.created_by !== user?.id &&
               !issueDetail?.assignees.includes(user?.id ?? "") &&

web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, ReactElement } from "react";
 import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 import { useForm } from "react-hook-form";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite/dist/observer";
 // services
 import { IssueService } from "services/issue";
 // layouts
@@ -9,6 +11,8 @@ import { AppLayout } from "layouts/app-layout";
 // components
 import { ProjectIssueDetailsHeader } from "components/headers";
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
+// hooks
+import useReloadConfirmations from "hooks/use-reload-confirmation";
 // ui
 import { EmptyState } from "components/common";
 import { Loader } from "@plane/ui";
@@ -36,11 +40,18 @@ const defaultValues: Partial<IIssue> = {
 // services
 const issueService = new IssueService();
 
-const IssueDetailsPage: NextPageWithLayout = () => {
+const IssueDetailsPage: NextPageWithLayout = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
+  // mobx store
+  const {
+    projectIssues: { isSubmitting, setIsSubmitting },
+  } = useMobxStore();
+
+  const { setShowAlert } = useReloadConfirmations();
+
   const {
     data: issueDetails,
     mutate: mutateIssueDetails,
@@ -60,6 +71,7 @@ const IssueDetailsPage: NextPageWithLayout = () => {
     async (formData: Partial<IIssue>) => {
       if (!workspaceSlug || !projectId || !issueId) return;
 
+      setIsSubmitting("submitting");
       mutate<IIssue>(
         ISSUE_DETAILS(issueId as string),
         (prevData) => {
@@ -85,6 +97,7 @@ const IssueDetailsPage: NextPageWithLayout = () => {
         .then(() => {
           mutateIssueDetails();
           mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+          setIsSubmitting("submitted");
         })
         .catch((e) => {
           console.error(e);
@@ -102,6 +115,17 @@ const IssueDetailsPage: NextPageWithLayout = () => {
     });
   }, [issueDetails, reset, issueId]);
 
+  useEffect(() => {
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      setTimeout(async () => {
+        setIsSubmitting("saved");
+      }, 2000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+  }, [isSubmitting, setShowAlert]);
+
   return (
     <>
       {" "}
@@ -147,7 +171,7 @@ const IssueDetailsPage: NextPageWithLayout = () => {
       )}
     </>
   );
-};
+});
 
 IssueDetailsPage.getLayout = function getLayout(page: ReactElement) {
   return (