From 0a56a30ab2d76b2abdcfcd02e61d93db4328c1a2 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 17 Jul 2023 15:37:50 +0530
Subject: [PATCH] fix: issue sidebar create label form (#1527)

* fix: issue sidebar create label form

* fix: issue details page overflow
---
 .../app/components/core/modals/link-modal.tsx |   4 +-
 .../components/core/sidebar/links-list.tsx    |   2 +-
 .../components/issues/sidebar-select/index.ts |   3 +-
 .../issues/sidebar-select/label.tsx           | 349 +++++++++
 apps/app/components/issues/sidebar.tsx        | 699 +++++-------------
 .../projects/[projectId]/issues/[issueId].tsx |   6 +-
 6 files changed, 557 insertions(+), 506 deletions(-)
 create mode 100644 apps/app/components/issues/sidebar-select/label.tsx

diff --git a/apps/app/components/core/modals/link-modal.tsx b/apps/app/components/core/modals/link-modal.tsx
index 543e733d6..b8d512a85 100644
--- a/apps/app/components/core/modals/link-modal.tsx
+++ b/apps/app/components/core/modals/link-modal.tsx
@@ -56,7 +56,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -70,7 +70,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-200 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
                     <div className="space-y-5">
diff --git a/apps/app/components/core/sidebar/links-list.tsx b/apps/app/components/core/sidebar/links-list.tsx
index 7094b9b86..a0619b924 100644
--- a/apps/app/components/core/sidebar/links-list.tsx
+++ b/apps/app/components/core/sidebar/links-list.tsx
@@ -49,7 +49,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
           )}
           <Link href={link.url}>
             <a
-              className="relative flex gap-2 rounded-md bg-custom-background-100 p-2"
+              className="relative flex gap-2 rounded-md bg-custom-background-90 p-2"
               target="_blank"
             >
               <div className="mt-0.5">
diff --git a/apps/app/components/issues/sidebar-select/index.ts b/apps/app/components/issues/sidebar-select/index.ts
index 1ec2c6ee0..5035325fd 100644
--- a/apps/app/components/issues/sidebar-select/index.ts
+++ b/apps/app/components/issues/sidebar-select/index.ts
@@ -2,8 +2,9 @@ export * from "./assignee";
 export * from "./blocked";
 export * from "./blocker";
 export * from "./cycle";
+export * from "./estimate";
+export * from "./label";
 export * from "./module";
 export * from "./parent";
 export * from "./priority";
 export * from "./state";
-export * from "./estimate";
diff --git a/apps/app/components/issues/sidebar-select/label.tsx b/apps/app/components/issues/sidebar-select/label.tsx
new file mode 100644
index 000000000..30ea71b04
--- /dev/null
+++ b/apps/app/components/issues/sidebar-select/label.tsx
@@ -0,0 +1,349 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// react-hook-form
+import { Controller, UseFormWatch, useForm } from "react-hook-form";
+// react-color
+import { TwitterPicker } from "react-color";
+// headless ui
+import { Listbox, Popover, Transition } from "@headlessui/react";
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useUser from "hooks/use-user";
+// ui
+import { Input, Spinner } from "components/ui";
+// icons
+import {
+  ChevronDownIcon,
+  PlusIcon,
+  RectangleGroupIcon,
+  TagIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+// types
+import { IIssue, IIssueLabels } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+type Props = {
+  issueDetails: IIssue | undefined;
+  issueControl: any;
+  watchIssue: UseFormWatch<IIssue>;
+  submitChanges: (formData: any) => void;
+  isNotAllowed: boolean;
+  uneditable: boolean;
+};
+
+const defaultValues: Partial<IIssueLabels> = {
+  name: "",
+  color: "#ff0000",
+};
+
+export const SidebarLabelSelect: React.FC<Props> = ({
+  issueDetails,
+  issueControl,
+  watchIssue,
+  submitChanges,
+  isNotAllowed,
+  uneditable,
+}) => {
+  const [createLabelForm, setCreateLabelForm] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting },
+    reset,
+    watch,
+    control: labelControl,
+    setFocus,
+  } = useForm<Partial<IIssueLabels>>({
+    defaultValues,
+  });
+
+  const { user } = useUser();
+
+  const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const handleNewLabel = async (formData: Partial<IIssueLabels>) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
+
+    await issuesService
+      .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
+      .then((res) => {
+        reset(defaultValues);
+
+        issueLabelMutate((prevData) => [...(prevData ?? []), res], false);
+
+        submitChanges({ labels_list: [...(issueDetails?.labels ?? []), res.id] });
+
+        setCreateLabelForm(false);
+      });
+  };
+
+  useEffect(() => {
+    if (!createLabelForm) return;
+
+    setFocus("name");
+    reset();
+  }, [createLabelForm, reset, setFocus]);
+
+  return (
+    <div className={`space-y-3 py-3 ${uneditable ? "opacity-60" : ""}`}>
+      <div className="flex items-start justify-between">
+        <div className="flex basis-1/2 items-center gap-x-2 text-sm text-custom-text-200">
+          <TagIcon className="h-4 w-4" />
+          <p>Label</p>
+        </div>
+        <div className="basis-1/2">
+          <div className="flex flex-wrap gap-1">
+            {watchIssue("labels_list")?.map((labelId) => {
+              const label = issueLabels?.find((l) => l.id === labelId);
+
+              if (label)
+                return (
+                  <span
+                    key={label.id}
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
+                    onClick={() => {
+                      const updatedLabels = watchIssue("labels_list")?.filter((l) => l !== labelId);
+                      submitChanges({
+                        labels_list: updatedLabels,
+                      });
+                    }}
+                  >
+                    <span
+                      className="h-2 w-2 flex-shrink-0 rounded-full"
+                      style={{
+                        backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
+                      }}
+                    />
+                    {label.name}
+                    <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
+                  </span>
+                );
+            })}
+            <Controller
+              control={issueControl}
+              name="labels_list"
+              render={({ field: { value } }) => (
+                <Listbox
+                  as="div"
+                  value={value}
+                  onChange={(val: any) => submitChanges({ labels_list: val })}
+                  className="flex-shrink-0"
+                  multiple
+                  disabled={isNotAllowed || uneditable}
+                >
+                  {({ open }) => (
+                    <div className="relative">
+                      <Listbox.Button
+                        className={`flex ${
+                          isNotAllowed || uneditable
+                            ? "cursor-not-allowed"
+                            : "cursor-pointer hover:bg-custom-background-90"
+                        } items-center gap-2 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200`}
+                      >
+                        Select Label
+                      </Listbox.Button>
+
+                      <Transition
+                        show={open}
+                        as={React.Fragment}
+                        leave="transition ease-in duration-100"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                      >
+                        <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-100 focus:outline-none">
+                          <div className="py-1">
+                            {issueLabels ? (
+                              issueLabels.length > 0 ? (
+                                issueLabels.map((label: IIssueLabels) => {
+                                  const children = issueLabels?.filter(
+                                    (l) => l.parent === label.id
+                                  );
+
+                                  if (children.length === 0) {
+                                    if (!label.parent)
+                                      return (
+                                        <Listbox.Option
+                                          key={label.id}
+                                          className={({ active, selected }) =>
+                                            `${
+                                              active || selected ? "bg-custom-background-90" : ""
+                                            } ${
+                                              selected ? "" : "text-custom-text-200"
+                                            } flex cursor-pointer select-none items-center gap-2 truncate p-2`
+                                          }
+                                          value={label.id}
+                                        >
+                                          <span
+                                            className="h-2 w-2 flex-shrink-0 rounded-full"
+                                            style={{
+                                              backgroundColor:
+                                                label.color && label.color !== ""
+                                                  ? label.color
+                                                  : "#000",
+                                            }}
+                                          />
+                                          {label.name}
+                                        </Listbox.Option>
+                                      );
+                                  } else
+                                    return (
+                                      <div className="border-y border-custom-border-100 bg-custom-background-90">
+                                        <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-custom-text-100">
+                                          <RectangleGroupIcon className="h-3 w-3" />
+                                          {label.name}
+                                        </div>
+                                        <div>
+                                          {children.map((child) => (
+                                            <Listbox.Option
+                                              key={child.id}
+                                              className={({ active, selected }) =>
+                                                `${
+                                                  active || selected
+                                                    ? "bg-custom-background-100"
+                                                    : ""
+                                                } ${
+                                                  selected ? "" : "text-custom-text-200"
+                                                } flex cursor-pointer select-none items-center gap-2 truncate p-2`
+                                              }
+                                              value={child.id}
+                                            >
+                                              <span
+                                                className="h-2 w-2 flex-shrink-0 rounded-full"
+                                                style={{
+                                                  backgroundColor: child?.color ?? "black",
+                                                }}
+                                              />
+                                              {child.name}
+                                            </Listbox.Option>
+                                          ))}
+                                        </div>
+                                      </div>
+                                    );
+                                })
+                              ) : (
+                                <div className="text-center">No labels found</div>
+                              )
+                            ) : (
+                              <Spinner />
+                            )}
+                          </div>
+                        </Listbox.Options>
+                      </Transition>
+                    </div>
+                  )}
+                </Listbox>
+              )}
+            />
+            {!isNotAllowed && (
+              <button
+                type="button"
+                className={`flex ${
+                  isNotAllowed || uneditable
+                    ? "cursor-not-allowed"
+                    : "cursor-pointer hover:bg-custom-background-90"
+                } items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200`}
+                onClick={() => setCreateLabelForm((prevData) => !prevData)}
+                disabled={uneditable}
+              >
+                {createLabelForm ? (
+                  <>
+                    <XMarkIcon className="h-3 w-3" /> Cancel
+                  </>
+                ) : (
+                  <>
+                    <PlusIcon className="h-3 w-3" /> New
+                  </>
+                )}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+      {createLabelForm && (
+        <form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
+          <div>
+            <Popover className="relative">
+              {({ open }) => (
+                <>
+                  <Popover.Button
+                    className={`flex items-center gap-1 rounded-md bg-custom-background-80 p-1 outline-none focus:ring-2 focus:ring-custom-primary`}
+                  >
+                    {watch("color") && watch("color") !== "" && (
+                      <span
+                        className="h-5 w-5 rounded"
+                        style={{
+                          backgroundColor: watch("color") ?? "black",
+                        }}
+                      />
+                    )}
+                    <ChevronDownIcon className="h-3 w-3" />
+                  </Popover.Button>
+
+                  <Transition
+                    as={React.Fragment}
+                    enter="transition ease-out duration-200"
+                    enterFrom="opacity-0 translate-y-1"
+                    enterTo="opacity-100 translate-y-0"
+                    leave="transition ease-in duration-150"
+                    leaveFrom="opacity-100 translate-y-0"
+                    leaveTo="opacity-0 translate-y-1"
+                  >
+                    <Popover.Panel className="absolute right-0 bottom-8 z-10 mt-1 max-w-xs transform px-2 sm:px-0">
+                      <Controller
+                        name="color"
+                        control={labelControl}
+                        render={({ field: { value, onChange } }) => (
+                          <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
+                        )}
+                      />
+                    </Popover.Panel>
+                  </Transition>
+                </>
+              )}
+            </Popover>
+          </div>
+          <Input
+            id="name"
+            name="name"
+            placeholder="Title"
+            register={register}
+            validations={{
+              required: "This is required",
+            }}
+            autoComplete="off"
+          />
+          <button
+            type="button"
+            className="grid place-items-center rounded bg-red-500 p-2.5"
+            onClick={() => setCreateLabelForm(false)}
+          >
+            <XMarkIcon className="h-4 w-4 text-white" />
+          </button>
+          <button
+            type="submit"
+            className="grid place-items-center rounded bg-green-500 p-2.5"
+            disabled={isSubmitting}
+          >
+            <PlusIcon className="h-4 w-4 text-white" />
+          </button>
+        </form>
+      )}
+    </div>
+  );
+};
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index c798e0759..24f66e803 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -1,15 +1,11 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useState } from "react";
 
 import { useRouter } from "next/router";
 
-import useSWR, { mutate } from "swr";
+import { mutate } from "swr";
 
 // react-hook-form
-import { useForm, Controller, UseFormWatch, Control } from "react-hook-form";
-// react-color
-import { TwitterPicker } from "react-color";
-// headless ui
-import { Popover, Listbox, Transition } from "@headlessui/react";
+import { Controller, UseFormWatch } from "react-hook-form";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
@@ -31,26 +27,24 @@ import {
   SidebarPrioritySelect,
   SidebarStateSelect,
   SidebarEstimateSelect,
+  SidebarLabelSelect,
 } from "components/issues";
 // ui
-import { Input, Spinner, CustomDatePicker } from "components/ui";
+import { CustomDatePicker } from "components/ui";
 // icons
 import {
-  TagIcon,
-  ChevronDownIcon,
   LinkIcon,
   CalendarDaysIcon,
   TrashIcon,
   PlusIcon,
   XMarkIcon,
-  RectangleGroupIcon,
 } from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import type { ICycle, IIssue, IIssueLabels, IIssueLink, IModule } from "types";
+import type { ICycle, IIssue, IIssueLink, IModule } from "types";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
+import { ISSUE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   control: any;
@@ -76,11 +70,6 @@ type Props = {
   uneditable?: boolean;
 };
 
-const defaultValues: Partial<IIssueLabels> = {
-  name: "",
-  color: "#ff0000",
-};
-
 export const IssueDetailsSidebar: React.FC<Props> = ({
   control,
   submitChanges,
@@ -89,7 +78,6 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
   fieldsToShow = ["all"],
   uneditable = false,
 }) => {
-  const [createLabelForm, setCreateLabelForm] = useState(false);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
   const [linkModal, setLinkModal] = useState(false);
 
@@ -102,45 +90,6 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
 
   const { setToastAlert } = useToast();
 
-  const { data: issues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
-      : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const {
-    register,
-    handleSubmit,
-    formState: { isSubmitting },
-    reset,
-    watch,
-    control: controlLabel,
-  } = useForm({
-    defaultValues,
-  });
-
-  const handleNewLabel = (formData: any) => {
-    if (!workspaceSlug || !projectId || isSubmitting) return;
-    issuesService
-      .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
-      .then((res) => {
-        reset(defaultValues);
-        issueLabelMutate((prevData) => [...(prevData ?? []), res], false);
-        submitChanges({ labels_list: [...(issueDetail?.labels ?? []), res.id] });
-        setCreateLabelForm(false);
-      });
-  };
-
   const handleCycleChange = useCallback(
     (cycleDetails: ICycle) => {
       if (!workspaceSlug || !projectId || !issueDetail) return;
@@ -243,12 +192,6 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
     });
   };
 
-  useEffect(() => {
-    if (!createLabelForm) return;
-
-    reset();
-  }, [createLabelForm, reset]);
-
   const showFirstSection =
     fieldsToShow.includes("all") ||
     fieldsToShow.includes("state") ||
@@ -283,7 +226,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
         data={issueDetail ?? null}
         user={user}
       />
-      <div className="sticky top-5 w-full divide-y-2 divide-custom-border-300">
+      <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 pb-3">
           <h4 className="text-sm font-medium">
             {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
@@ -310,445 +253,203 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
           </div>
         </div>
 
-        <div className={`divide-y-2 divide-custom-border-300 ${uneditable ? "opacity-60" : ""}`}>
-          {showFirstSection && (
-            <div className="py-1">
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
-                <Controller
-                  control={control}
-                  name="state"
-                  render={({ field: { value } }) => (
-                    <SidebarStateSelect
-                      value={value}
-                      onChange={(val: string) => submitChanges({ state: val })}
-                      userAuth={memberRole}
-                      disabled={uneditable}
-                    />
-                  )}
-                />
-              )}
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
-                <Controller
-                  control={control}
-                  name="assignees_list"
-                  render={({ field: { value } }) => (
-                    <SidebarAssigneeSelect
-                      value={value}
-                      onChange={(val: string[]) => submitChanges({ assignees_list: val })}
-                      userAuth={memberRole}
-                      disabled={uneditable}
-                    />
-                  )}
-                />
-              )}
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
-                <Controller
-                  control={control}
-                  name="priority"
-                  render={({ field: { value } }) => (
-                    <SidebarPrioritySelect
-                      value={value}
-                      onChange={(val: string) => submitChanges({ priority: val })}
-                      userAuth={memberRole}
-                      disabled={uneditable}
-                    />
-                  )}
-                />
-              )}
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
-                <Controller
-                  control={control}
-                  name="estimate_point"
-                  render={({ field: { value } }) => (
-                    <SidebarEstimateSelect
-                      value={value}
-                      onChange={(val: number | null) => submitChanges({ estimate_point: val })}
-                      userAuth={memberRole}
-                      disabled={uneditable}
-                    />
-                  )}
-                />
-              )}
-            </div>
-          )}
-          {showSecondSection && (
-            <div className="py-1">
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
-                <SidebarParentSelect
-                  control={control}
-                  submitChanges={submitChanges}
-                  customDisplay={
-                    issueDetail?.parent_detail ? (
-                      <button
-                        type="button"
-                        className="flex items-center gap-2 rounded bg-custom-background-80 px-3 py-2 text-xs"
-                        onClick={() => submitChanges({ parent: null })}
-                      >
-                        <span className="text-custom-text-200">Selected:</span>{" "}
-                        {issueDetail.parent_detail?.name}
-                        <XMarkIcon className="h-3 w-3" />
-                      </button>
-                    ) : (
-                      <div className="inline-block rounded bg-custom-background-90 px-3 py-2 text-xs text-custom-text-200">
-                        No parent selected
-                      </div>
-                    )
-                  }
-                  watch={watchIssue}
-                  userAuth={memberRole}
-                  disabled={uneditable}
-                />
-              )}
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
-                <SidebarBlockerSelect
-                  issueId={issueId as string}
-                  submitChanges={submitChanges}
-                  watch={watchIssue}
-                  userAuth={memberRole}
-                  disabled={uneditable}
-                />
-              )}
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
-                <SidebarBlockedSelect
-                  issueId={issueId as string}
-                  submitChanges={submitChanges}
-                  watch={watchIssue}
-                  userAuth={memberRole}
-                  disabled={uneditable}
-                />
-              )}
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
-                <div className="flex flex-wrap items-center py-2">
-                  <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                    <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
-                    <p>Due date</p>
+        <div className="h-full w-full overflow-y-auto">
+          <div className={`divide-y-2 divide-custom-border-200 ${uneditable ? "opacity-60" : ""}`}>
+            {showFirstSection && (
+              <div className="py-1">
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
+                  <Controller
+                    control={control}
+                    name="state"
+                    render={({ field: { value } }) => (
+                      <SidebarStateSelect
+                        value={value}
+                        onChange={(val: string) => submitChanges({ state: val })}
+                        userAuth={memberRole}
+                        disabled={uneditable}
+                      />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
+                  <Controller
+                    control={control}
+                    name="assignees_list"
+                    render={({ field: { value } }) => (
+                      <SidebarAssigneeSelect
+                        value={value}
+                        onChange={(val: string[]) => submitChanges({ assignees_list: val })}
+                        userAuth={memberRole}
+                        disabled={uneditable}
+                      />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
+                  <Controller
+                    control={control}
+                    name="priority"
+                    render={({ field: { value } }) => (
+                      <SidebarPrioritySelect
+                        value={value}
+                        onChange={(val: string) => submitChanges({ priority: val })}
+                        userAuth={memberRole}
+                        disabled={uneditable}
+                      />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
+                  <Controller
+                    control={control}
+                    name="estimate_point"
+                    render={({ field: { value } }) => (
+                      <SidebarEstimateSelect
+                        value={value}
+                        onChange={(val: number | null) => submitChanges({ estimate_point: val })}
+                        userAuth={memberRole}
+                        disabled={uneditable}
+                      />
+                    )}
+                  />
+                )}
+              </div>
+            )}
+            {showSecondSection && (
+              <div className="py-1">
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
+                  <SidebarParentSelect
+                    control={control}
+                    submitChanges={submitChanges}
+                    customDisplay={
+                      issueDetail?.parent_detail ? (
+                        <button
+                          type="button"
+                          className="flex items-center gap-2 rounded bg-custom-background-80 px-3 py-2 text-xs"
+                          onClick={() => submitChanges({ parent: null })}
+                        >
+                          <span className="text-custom-text-200">Selected:</span>{" "}
+                          {issueDetail.parent_detail?.name}
+                          <XMarkIcon className="h-3 w-3" />
+                        </button>
+                      ) : (
+                        <div className="inline-block rounded bg-custom-background-90 px-3 py-2 text-xs text-custom-text-200">
+                          No parent selected
+                        </div>
+                      )
+                    }
+                    watch={watchIssue}
+                    userAuth={memberRole}
+                    disabled={uneditable}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
+                  <SidebarBlockerSelect
+                    issueId={issueId as string}
+                    submitChanges={submitChanges}
+                    watch={watchIssue}
+                    userAuth={memberRole}
+                    disabled={uneditable}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
+                  <SidebarBlockedSelect
+                    issueId={issueId as string}
+                    submitChanges={submitChanges}
+                    watch={watchIssue}
+                    userAuth={memberRole}
+                    disabled={uneditable}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
+                      <p>Due date</p>
+                    </div>
+                    <div className="sm:basis-1/2">
+                      <Controller
+                        control={control}
+                        name="target_date"
+                        render={({ field: { value } }) => (
+                          <CustomDatePicker
+                            placeholder="Due date"
+                            value={value}
+                            onChange={(val) =>
+                              submitChanges({
+                                target_date: val,
+                              })
+                            }
+                            className="bg-custom-background-90"
+                            disabled={isNotAllowed || uneditable}
+                          />
+                        )}
+                      />
+                    </div>
                   </div>
-                  <div className="sm:basis-1/2">
-                    <Controller
-                      control={control}
-                      name="target_date"
-                      render={({ field: { value } }) => (
-                        <CustomDatePicker
-                          placeholder="Due date"
-                          value={value}
-                          onChange={(val) =>
-                            submitChanges({
-                              target_date: val,
-                            })
-                          }
-                          className="bg-custom-background-90"
-                          disabled={isNotAllowed || uneditable}
-                        />
-                      )}
-                    />
-                  </div>
-                </div>
-              )}
-            </div>
+                )}
+              </div>
+            )}
+            {showThirdSection && (
+              <div className="py-1">
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && (
+                  <SidebarCycleSelect
+                    issueDetail={issueDetail}
+                    handleCycleChange={handleCycleChange}
+                    userAuth={memberRole}
+                    disabled={uneditable}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && (
+                  <SidebarModuleSelect
+                    issueDetail={issueDetail}
+                    handleModuleChange={handleModuleChange}
+                    userAuth={memberRole}
+                    disabled={uneditable}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+          {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
+            <SidebarLabelSelect
+              issueDetails={issueDetail}
+              issueControl={control}
+              watchIssue={watchIssue}
+              submitChanges={submitChanges}
+              isNotAllowed={isNotAllowed}
+              uneditable={uneditable ?? false}
+            />
           )}
-          {showThirdSection && (
-            <div className="py-1">
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && (
-                <SidebarCycleSelect
-                  issueDetail={issueDetail}
-                  handleCycleChange={handleCycleChange}
-                  userAuth={memberRole}
-                  disabled={uneditable}
-                />
-              )}
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && (
-                <SidebarModuleSelect
-                  issueDetail={issueDetail}
-                  handleModuleChange={handleModuleChange}
-                  userAuth={memberRole}
-                  disabled={uneditable}
-                />
-              )}
+          {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
+            <div className={`min-h-[116px] py-1 text-xs ${uneditable ? "opacity-60" : ""}`}>
+              <div className="flex items-center justify-between gap-2">
+                <h4>Links</h4>
+                {!isNotAllowed && (
+                  <button
+                    type="button"
+                    className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
+                      uneditable ? "cursor-not-allowed" : "cursor-pointer"
+                    }`}
+                    onClick={() => setLinkModal(true)}
+                    disabled={uneditable}
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+              <div className="mt-2 space-y-2">
+                {issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
+                  <LinksList
+                    links={issueDetail.issue_link}
+                    handleDeleteLink={handleDeleteLink}
+                    userAuth={memberRole}
+                  />
+                ) : null}
+              </div>
             </div>
           )}
         </div>
-        {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
-          <div className={`space-y-3 py-3 ${uneditable ? "opacity-60" : ""}`}>
-            <div className="flex items-start justify-between">
-              <div className="flex basis-1/2 items-center gap-x-2 text-sm text-custom-text-200">
-                <TagIcon className="h-4 w-4" />
-                <p>Label</p>
-              </div>
-              <div className="basis-1/2">
-                <div className="flex flex-wrap gap-1">
-                  {watchIssue("labels_list")?.map((labelId) => {
-                    const label = issueLabels?.find((l) => l.id === labelId);
-
-                    if (label)
-                      return (
-                        <span
-                          key={label.id}
-                          className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-300 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
-                          onClick={() => {
-                            const updatedLabels = watchIssue("labels_list")?.filter(
-                              (l) => l !== labelId
-                            );
-                            submitChanges({
-                              labels_list: updatedLabels,
-                            });
-                          }}
-                        >
-                          <span
-                            className="h-2 w-2 flex-shrink-0 rounded-full"
-                            style={{
-                              backgroundColor:
-                                label?.color && label.color !== "" ? label.color : "#000",
-                            }}
-                          />
-                          {label.name}
-                          <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
-                        </span>
-                      );
-                  })}
-                  <Controller
-                    control={control}
-                    name="labels_list"
-                    render={({ field: { value } }) => (
-                      <Listbox
-                        as="div"
-                        value={value}
-                        onChange={(val: any) => submitChanges({ labels_list: val })}
-                        className="flex-shrink-0"
-                        multiple
-                        disabled={isNotAllowed || uneditable}
-                      >
-                        {({ open }) => (
-                          <div className="relative">
-                            <Listbox.Button
-                              className={`flex ${
-                                isNotAllowed || uneditable
-                                  ? "cursor-not-allowed"
-                                  : "cursor-pointer hover:bg-custom-background-90"
-                              } items-center gap-2 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs text-custom-text-200`}
-                            >
-                              Select Label
-                            </Listbox.Button>
-
-                            <Transition
-                              show={open}
-                              as={React.Fragment}
-                              leave="transition ease-in duration-100"
-                              leaveFrom="opacity-100"
-                              leaveTo="opacity-0"
-                            >
-                              <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-300 focus:outline-none">
-                                <div className="py-1">
-                                  {issueLabels ? (
-                                    issueLabels.length > 0 ? (
-                                      issueLabels.map((label: IIssueLabels) => {
-                                        const children = issueLabels?.filter(
-                                          (l) => l.parent === label.id
-                                        );
-
-                                        if (children.length === 0) {
-                                          if (!label.parent)
-                                            return (
-                                              <Listbox.Option
-                                                key={label.id}
-                                                className={({ active, selected }) =>
-                                                  `${
-                                                    active || selected
-                                                      ? "bg-custom-background-90"
-                                                      : ""
-                                                  } ${
-                                                    selected ? "" : "text-custom-text-200"
-                                                  } flex cursor-pointer select-none items-center gap-2 truncate p-2`
-                                                }
-                                                value={label.id}
-                                              >
-                                                <span
-                                                  className="h-2 w-2 flex-shrink-0 rounded-full"
-                                                  style={{
-                                                    backgroundColor:
-                                                      label.color && label.color !== ""
-                                                        ? label.color
-                                                        : "#000",
-                                                  }}
-                                                />
-                                                {label.name}
-                                              </Listbox.Option>
-                                            );
-                                        } else
-                                          return (
-                                            <div className="border-y border-custom-border-300 bg-custom-background-90">
-                                              <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-custom-text-100">
-                                                <RectangleGroupIcon className="h-3 w-3" />
-                                                {label.name}
-                                              </div>
-                                              <div>
-                                                {children.map((child) => (
-                                                  <Listbox.Option
-                                                    key={child.id}
-                                                    className={({ active, selected }) =>
-                                                      `${
-                                                        active || selected
-                                                          ? "bg-custom-background-100"
-                                                          : ""
-                                                      } ${
-                                                        selected ? "" : "text-custom-text-200"
-                                                      } flex cursor-pointer select-none items-center gap-2 truncate p-2`
-                                                    }
-                                                    value={child.id}
-                                                  >
-                                                    <span
-                                                      className="h-2 w-2 flex-shrink-0 rounded-full"
-                                                      style={{
-                                                        backgroundColor: child?.color ?? "black",
-                                                      }}
-                                                    />
-                                                    {child.name}
-                                                  </Listbox.Option>
-                                                ))}
-                                              </div>
-                                            </div>
-                                          );
-                                      })
-                                    ) : (
-                                      <div className="text-center">No labels found</div>
-                                    )
-                                  ) : (
-                                    <Spinner />
-                                  )}
-                                </div>
-                              </Listbox.Options>
-                            </Transition>
-                          </div>
-                        )}
-                      </Listbox>
-                    )}
-                  />
-                  {!isNotAllowed && (
-                    <button
-                      type="button"
-                      className={`flex ${
-                        isNotAllowed || uneditable
-                          ? "cursor-not-allowed"
-                          : "cursor-pointer hover:bg-custom-background-90"
-                      } items-center gap-1 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs text-custom-text-200`}
-                      onClick={() => setCreateLabelForm((prevData) => !prevData)}
-                      disabled={uneditable}
-                    >
-                      {createLabelForm ? (
-                        <>
-                          <XMarkIcon className="h-3 w-3" /> Cancel
-                        </>
-                      ) : (
-                        <>
-                          <PlusIcon className="h-3 w-3" /> New
-                        </>
-                      )}
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
-            {createLabelForm && (
-              <form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
-                <div>
-                  <Popover className="relative">
-                    {({ open }) => (
-                      <>
-                        <Popover.Button
-                          className={`flex items-center gap-1 rounded-md bg-custom-background-80 p-1 outline-none focus:ring-2 focus:ring-custom-primary`}
-                        >
-                          {watch("color") && watch("color") !== "" && (
-                            <span
-                              className="h-5 w-5 rounded"
-                              style={{
-                                backgroundColor: watch("color") ?? "black",
-                              }}
-                            />
-                          )}
-                          <ChevronDownIcon className="h-3 w-3" />
-                        </Popover.Button>
-
-                        <Transition
-                          as={React.Fragment}
-                          enter="transition ease-out duration-200"
-                          enterFrom="opacity-0 translate-y-1"
-                          enterTo="opacity-100 translate-y-0"
-                          leave="transition ease-in duration-150"
-                          leaveFrom="opacity-100 translate-y-0"
-                          leaveTo="opacity-0 translate-y-1"
-                        >
-                          <Popover.Panel className="absolute right-0 bottom-8 z-10 mt-1 max-w-xs transform px-2 sm:px-0">
-                            <Controller
-                              name="color"
-                              control={controlLabel}
-                              render={({ field: { value, onChange } }) => (
-                                <TwitterPicker
-                                  color={value}
-                                  onChange={(value) => onChange(value.hex)}
-                                />
-                              )}
-                            />
-                          </Popover.Panel>
-                        </Transition>
-                      </>
-                    )}
-                  </Popover>
-                </div>
-                <Input
-                  id="name"
-                  name="name"
-                  placeholder="Title"
-                  register={register}
-                  validations={{
-                    required: "This is required",
-                  }}
-                  autoComplete="off"
-                />
-                <button
-                  type="submit"
-                  className="grid place-items-center rounded bg-red-500 p-2.5"
-                  onClick={() => setCreateLabelForm(false)}
-                >
-                  <XMarkIcon className="h-4 w-4 text-white" />
-                </button>
-                <button
-                  type="submit"
-                  className="grid place-items-center rounded bg-green-500 p-2.5"
-                  disabled={isSubmitting}
-                >
-                  <PlusIcon className="h-4 w-4 text-white" />
-                </button>
-              </form>
-            )}
-          </div>
-        )}
-        {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
-          <div className={`min-h-[116px] py-1 text-xs ${uneditable ? "opacity-60" : ""}`}>
-            <div className="flex items-center justify-between gap-2">
-              <h4>Links</h4>
-              {!isNotAllowed && (
-                <button
-                  type="button"
-                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
-                    uneditable ? "cursor-not-allowed" : "cursor-pointer"
-                  }`}
-                  onClick={() => setLinkModal(true)}
-                  disabled={uneditable}
-                >
-                  <PlusIcon className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-            <div className="mt-2 space-y-2">
-              {issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
-                <LinksList
-                  links={issueDetail.issue_link}
-                  handleDeleteLink={handleDeleteLink}
-                  userAuth={memberRole}
-                />
-              ) : null}
-            </div>
-          </div>
-        )}
       </div>
     </>
   );
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 267f185cb..9af7f7c7e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -119,11 +119,11 @@ const IssueDetailsPage: NextPage = () => {
       }
     >
       {issueDetails && projectId ? (
-        <div className="flex h-full">
-          <div className="w-2/3 space-y-5 divide-y-2 divide-custom-border-300 p-5">
+        <div className="flex h-full overflow-hidden">
+          <div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-300 p-5">
             <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
           </div>
-          <div className="w-1/3 space-y-5 border-l border-custom-border-300 p-5">
+          <div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 p-5 overflow-hidden">
             <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}