From 549247da719d86f2196c29363abba03116027bf0 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Thu, 3 Oct 2024 18:09:55 +0530
Subject: [PATCH 1/4] [WEB-2580] chore: improvements for custom search select.

---
 .../ui/src/dropdowns/custom-search-select.tsx | 20 ++++++++++++-----
 packages/ui/src/dropdowns/helper.tsx          | 14 +++++++-----
 .../issues/issue-modal/issue-type-select.tsx  | 22 ++++++++++++++-----
 .../components/issues/issue-modal/form.tsx    |  1 +
 4 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
index 81d33df6eaa..e89a3ea44c1 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, useState } from "react";
 import { usePopper } from "react-popper";
 import { Combobox } from "@headlessui/react";
-import { Check, ChevronDown, Search } from "lucide-react";
+import { Check, ChevronDown, Info, Search } from "lucide-react";
 import { createPortal } from "react-dom";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/helpers";
@@ -11,6 +11,8 @@ import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import { cn } from "../../helpers";
 // types
 import { ICustomSearchSelectProps } from "./helper";
+// local components
+import { Tooltip } from "../tooltip";
 
 export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
   const {
@@ -95,11 +97,10 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                 <button
                   ref={setReferenceElement}
                   type="button"
-                  className={`flex w-full items-center justify-between gap-1 text-xs ${
-                    disabled
-                      ? "cursor-not-allowed text-custom-text-200"
-                      : "cursor-pointer hover:bg-custom-background-80"
-                  }  ${customButtonClassName}`}
+                  className={`flex w-full items-center justify-between gap-1 text-xs ${disabled
+                    ? "cursor-not-allowed text-custom-text-200"
+                    : "cursor-pointer hover:bg-custom-background-80"
+                    }  ${customButtonClassName}`}
                   onClick={toggleDropdown}
                 >
                   {customButton}
@@ -170,17 +171,24 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                                   "w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none",
                                   {
                                     "bg-custom-background-80": active,
+                                    "text-custom-text-400 opacity-60 cursor-not-allowed": option.disabled,
                                   }
                                 )
                               }
                               onClick={() => {
                                 if (!multiple) closeDropdown();
                               }}
+                              disabled={option.disabled}
                             >
                               {({ selected }) => (
                                 <>
                                   <span className="flex-grow truncate">{option.content}</span>
                                   {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                                  {option.infoTooltipContent && (
+                                    <Tooltip tooltipContent={option.infoTooltipContent}>
+                                      <Info className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-custom-text-200" />
+                                    </Tooltip>
+                                  )}
                                 </>
                               )}
                             </Combobox.Option>
diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx
index 56963cbf4bc..5922271a5e2 100644
--- a/packages/ui/src/dropdowns/helper.tsx
+++ b/packages/ui/src/dropdowns/helper.tsx
@@ -44,12 +44,14 @@ interface CustomSearchSelectProps {
   onChange: any;
   onClose?: () => void;
   options:
-    | {
-        value: any;
-        query: string;
-        content: React.ReactNode;
-      }[]
-    | undefined;
+  | {
+    value: any;
+    query: string;
+    content: React.ReactNode;
+    disabled?: boolean;
+    infoTooltipContent?: string;
+  }[]
+  | undefined;
 }
 
 interface SingleValueProps {
diff --git a/web/ce/components/issues/issue-modal/issue-type-select.tsx b/web/ce/components/issues/issue-modal/issue-type-select.tsx
index a4b60103d6a..9eb5d7c0b30 100644
--- a/web/ce/components/issues/issue-modal/issue-type-select.tsx
+++ b/web/ce/components/issues/issue-modal/issue-type-select.tsx
@@ -1,12 +1,24 @@
 import { Control } from "react-hook-form";
 // types
-import { TIssue } from "@plane/types";
+import { TBulkIssueProperties, TIssue } from "@plane/types";
 
-type TIssueTypeSelectProps = {
-  control: Control<TIssue>;
+export type TIssueFields = TIssue & TBulkIssueProperties;
+
+export type TIssueTypeDropdownVariant = "xs" | "sm";
+
+export type TIssueTypeSelectProps<T extends Partial<TIssueFields>> = {
+  control: Control<T>;
   projectId: string | null;
   disabled?: boolean;
-  handleFormChange: () => void;
+  variant?: TIssueTypeDropdownVariant;
+  placeholder?: string;
+  isRequired?: boolean;
+  renderChevron?: boolean;
+  dropDownContainerClassName?: string;
+  disableMandatoryTypes?: boolean; // Disable issue types with mandatory properties
+  reasonForDisabledType?: string; // Reason for disabling issue types
+  handleFormChange?: () => void;
 };
 
-export const IssueTypeSelect: React.FC<TIssueTypeSelectProps> = () => <></>;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const IssueTypeSelect = <T extends Partial<TIssueFields>>(props: TIssueTypeSelectProps<T>) => <></>;
diff --git a/web/core/components/issues/issue-modal/form.tsx b/web/core/components/issues/issue-modal/form.tsx
index ec6c4219278..35785d3487d 100644
--- a/web/core/components/issues/issue-modal/form.tsx
+++ b/web/core/components/issues/issue-modal/form.tsx
@@ -280,6 +280,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                 projectId={projectId}
                 disabled={!!data?.sourceIssueId}
                 handleFormChange={handleFormChange}
+                renderChevron
               />
             )}
           </div>

From 489157d3abe560e2291fd1eb0e9d9481deb3fd11 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Fri, 4 Oct 2024 15:26:04 +0530
Subject: [PATCH 2/4] chore: update optionTooltip prop.

---
 .../ui/src/dropdowns/custom-search-select.tsx    | 16 ++++++++++++----
 packages/ui/src/dropdowns/helper.tsx             |  2 +-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
index e89a3ea44c1..589b11946f4 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -184,10 +184,18 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                                 <>
                                   <span className="flex-grow truncate">{option.content}</span>
                                   {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-                                  {option.infoTooltipContent && (
-                                    <Tooltip tooltipContent={option.infoTooltipContent}>
-                                      <Info className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-custom-text-200" />
-                                    </Tooltip>
+                                  {option.optionTooltip && (
+                                    <>
+                                      {
+                                        typeof option.optionTooltip === "string" ? (
+                                          <Tooltip tooltipContent={option.optionTooltip}>
+                                            <Info className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-custom-text-200" />
+                                          </Tooltip>
+                                        ) : (
+                                          option.optionTooltip
+                                        )
+                                      }
+                                    </>
                                   )}
                                 </>
                               )}
diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx
index 5922271a5e2..4692a84bf1c 100644
--- a/packages/ui/src/dropdowns/helper.tsx
+++ b/packages/ui/src/dropdowns/helper.tsx
@@ -49,7 +49,7 @@ interface CustomSearchSelectProps {
     query: string;
     content: React.ReactNode;
     disabled?: boolean;
-    infoTooltipContent?: string;
+    optionTooltip?: string | React.ReactNode;
   }[]
   | undefined;
 }

From b285e45b5682158c3144ed1fb164d124ca65ab78 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Fri, 4 Oct 2024 16:48:39 +0530
Subject: [PATCH 3/4] chore: update option tooltip prop.

---
 packages/ui/src/dropdowns/custom-search-select.tsx | 8 ++++----
 packages/ui/src/dropdowns/helper.tsx               | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
index 589b11946f4..7842f1531de 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -184,15 +184,15 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                                 <>
                                   <span className="flex-grow truncate">{option.content}</span>
                                   {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-                                  {option.optionTooltip && (
+                                  {option.tooltip && (
                                     <>
                                       {
-                                        typeof option.optionTooltip === "string" ? (
-                                          <Tooltip tooltipContent={option.optionTooltip}>
+                                        typeof option.tooltip === "string" ? (
+                                          <Tooltip tooltipContent={option.tooltip}>
                                             <Info className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-custom-text-200" />
                                           </Tooltip>
                                         ) : (
-                                          option.optionTooltip
+                                            option.tooltip
                                         )
                                       }
                                     </>
diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx
index 4692a84bf1c..a7ef61c3de0 100644
--- a/packages/ui/src/dropdowns/helper.tsx
+++ b/packages/ui/src/dropdowns/helper.tsx
@@ -49,7 +49,7 @@ interface CustomSearchSelectProps {
     query: string;
     content: React.ReactNode;
     disabled?: boolean;
-    optionTooltip?: string | React.ReactNode;
+    tooltip?: string | React.ReactNode;
   }[]
   | undefined;
 }

From 655d6b8f93eae7ef4d0bde97f1ffca32eec9ae4f Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Fri, 4 Oct 2024 17:06:05 +0530
Subject: [PATCH 4/4] chore: minor updates.

---
 web/ce/components/issues/issue-modal/issue-type-select.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/ce/components/issues/issue-modal/issue-type-select.tsx b/web/ce/components/issues/issue-modal/issue-type-select.tsx
index 9eb5d7c0b30..9514cb78f5b 100644
--- a/web/ce/components/issues/issue-modal/issue-type-select.tsx
+++ b/web/ce/components/issues/issue-modal/issue-type-select.tsx
@@ -15,8 +15,7 @@ export type TIssueTypeSelectProps<T extends Partial<TIssueFields>> = {
   isRequired?: boolean;
   renderChevron?: boolean;
   dropDownContainerClassName?: string;
-  disableMandatoryTypes?: boolean; // Disable issue types with mandatory properties
-  reasonForDisabledType?: string; // Reason for disabling issue types
+  showMandatoryFieldInfo?: boolean; // Show info about mandatory fields
   handleFormChange?: () => void;
 };