[WEB-2568] chore: minor improvements related to issue identifier and issue modal.

Author: prateekshourya29

web/ce/components/issues/issue-details/index.ts

@@ -1,2 +1,3 @@
 export * from "./issue-identifier";
 export * from "./issue-properties-activity";
+export * from "./issue-type-switcher";

web/ce/components/issues/issue-details/issue-type-switcher.tsx

@@ -0,0 +1,24 @@
+import { observer } from "mobx-react";
+// store hooks
+import { useIssueDetail } from "@/hooks/store";
+// plane web components
+import { IssueIdentifier } from "@/plane-web/components/issues";
+
+export type TIssueTypeSwitcherProps = {
+  issueId: string;
+  disabled: boolean;
+};
+
+export const IssueTypeSwitcher: React.FC<TIssueTypeSwitcherProps> = observer((props) => {
+  const { issueId } = props;
+  // store hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  // derived values
+  const issue = getIssueById(issueId);
+
+  if (!issue || !issue.project_id) return <></>;
+
+  return <IssueIdentifier issueId={issueId} projectId={issue.project_id} size="md" />;
+});

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

@@ -2,8 +2,6 @@
 
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-// types
-import { TIssue } from "@plane/types";
 // components
 import {
   IssueActivity,
@@ -20,7 +18,7 @@ import { useIssueDetail, useUser } from "@/hooks/store";
 import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 import useSize from "@/hooks/use-window-size";
 // plane web components
-import { IssueIdentifier } from "@/plane-web/components/issues";
+import { IssueTypeSwitcher } from "@/plane-web/components/issues";
 // types
 import { TIssueOperations } from "./root";
 
@@ -68,8 +66,8 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
           />
         )}
 
-        <div className="mb-2.5 flex items-center gap-4">
-          <IssueIdentifier issueId={issueId} projectId={issue.project_id} size="md" />
+        <div className="mb-2.5 flex items-center justify-between gap-4">
+          <IssueTypeSwitcher issueId={issueId} disabled={isArchived || !isEditable} />
           <IssueUpdateStatus isSubmitting={isSubmitting} />
         </div>
 

web/core/components/issues/issue-modal/base.tsx

@@ -30,6 +30,7 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
     withDraftIssueWrapper = true,
     storeType: issueStoreFromProps,
     isDraft = false,
+    fetchIssueDetails = true,
   } = props;
   const issueStoreType = useIssueStoreType();
 
@@ -68,7 +69,8 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
     setDescription(undefined);
     if (!workspaceSlug) return;
 
-    if (!projectId || issueId === undefined) {
+    if (!projectId || issueId === undefined || !fetchIssueDetails) {
+    // Set description to the issue description from the props if available
       setDescription(data?.description_html || "<p></p>");
       return;
     }

web/core/components/issues/issue-modal/form.tsx

@@ -146,12 +146,6 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   useEffect(() => {
     const issueTypeId = watch("type_id");
 
-    // if data is present, set active type id to the type id of the issue
-    if (data && data.type_id) {
-      setValue("type_id", data.type_id, { shouldValidate: true });
-      return;
-    }
-
     // if issue type id is present or project not available, return
     if (issueTypeId || !projectId) return;
 
@@ -284,7 +278,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
               <IssueTypeSelect
                 control={control}
                 projectId={projectId}
-                disabled={!!data?.id || !!data?.sourceIssueId}
+                disabled={!!data?.sourceIssueId}
                 handleFormChange={handleFormChange}
               />
             )}

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

@@ -19,10 +19,14 @@ export interface IssuesModalProps {
   withDraftIssueWrapper?: boolean;
   storeType?: EIssuesStoreType;
   isDraft?: boolean;
+  fetchIssueDetails?: boolean;
 }
 
-export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => (
-  <IssueModalProvider>
-    <CreateUpdateIssueModalBase {...props} />
-  </IssueModalProvider>
-));
+export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer(
+  (props) =>
+    props.isOpen && (
+      <IssueModalProvider>
+        <CreateUpdateIssueModalBase {...props} />
+      </IssueModalProvider>
+    )
+);

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

@@ -1,13 +1,14 @@
 import { FC, useEffect } from "react";
 import { observer } from "mobx-react";
-// store hooks
+// components
 import { TIssueOperations } from "@/components/issues";
+// store hooks
 import { useIssueDetail, useUser } from "@/hooks/store";
 // hooks
 import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 // plane web components
-import { IssueIdentifier } from "@/plane-web/components/issues";
-// components
+import { IssueTypeSwitcher } from "@/plane-web/components/issues";
+// local components
 import { IssueDescriptionInput } from "../description-input";
 import { IssueReaction } from "../issue-detail/reactions";
 import { IssueTitleInput } from "../title-input";
@@ -56,7 +57,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
 
   return (
     <div className="space-y-2">
-      <IssueIdentifier issueId={issueId} projectId={issue.project_id} size="md" />
+      <IssueTypeSwitcher issueId={issueId} disabled={isArchived || disabled} />
       <IssueTitleInput
         workspaceSlug={workspaceSlug}
         projectId={issue.project_id}

web/ee/components/issues/issue-details/index.ts

@@ -1,2 +1,3 @@
 export * from "./issue-identifier";
 export * from "./issue-properties-activity";
+export * from "./issue-type-switcher";

web/ee/components/issues/issue-details/issue-type-switcher.tsx

@@ -0,0 +1 @@
+export * from "ce/components/issues/issue-details/issue-type-switcher";