[WEB-2580] chore: improvements for custom search select. (#5744)

* [WEB-2580] chore: improvements for custom search select.

* chore: update optionTooltip prop.

* chore: update option tooltip prop.

* chore: minor updates.

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,8 +97,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                 <button
                   ref={setReferenceElement}
                   type="button"
-                  className={`flex w-full items-center justify-between gap-1 text-xs ${
-                    disabled
+                  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}`}
@@ -170,17 +171,32 @@ 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.tooltip && (
+                                    <>
+                                      {
+                                        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.tooltip
+                                        )
+                                      }
+                                    </>
+                                  )}
                                 </>
                               )}
                             </Combobox.Option>

packages/ui/src/dropdowns/helper.tsx

@@ -48,6 +48,8 @@ interface CustomSearchSelectProps {
     value: any;
     query: string;
     content: React.ReactNode;
+    disabled?: boolean;
+    tooltip?: string | React.ReactNode;
   }[]
   | undefined;
 }

web/ce/components/issues/issue-modal/issue-type-select.tsx

@@ -1,12 +1,23 @@
 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;
+  showMandatoryFieldInfo?: boolean; // Show info about mandatory fields
+  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>) => <></>;

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>