[WEB-1412]fix: split labels in kanban board (#6253)

* fix: split labels in kanban board

* chore: incresaed labels max render and moved labels to end of properties
chore: refactored label render component

web/core/components/issues/issue-layouts/properties/all-properties.tsx

@@ -96,7 +96,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   );
 
   const handleState = (stateId: string) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { state_id: stateId }).then(() => {
         captureIssueEvent({
           eventName: ISSUE_UPDATED,
@@ -111,7 +111,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   };
 
   const handlePriority = (value: TIssuePriorities) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { priority: value }).then(() => {
         captureIssueEvent({
           eventName: ISSUE_UPDATED,
@@ -126,7 +126,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   };
 
   const handleLabel = (ids: string[]) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { label_ids: ids }).then(() => {
         captureIssueEvent({
           eventName: ISSUE_UPDATED,
@@ -141,7 +141,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   };
 
   const handleAssignee = (ids: string[]) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { assignee_ids: ids }).then(() => {
         captureIssueEvent({
           eventName: ISSUE_UPDATED,
@@ -195,7 +195,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   );
 
   const handleStartDate = (date: Date | null) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { start_date: date ? renderFormattedPayloadDate(date) : null }).then(
         () => {
           captureIssueEvent({
@@ -212,7 +212,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   };
 
   const handleTargetDate = (date: Date | null) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { target_date: date ? renderFormattedPayloadDate(date) : null }).then(
         () => {
           captureIssueEvent({
@@ -229,7 +229,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   };
 
   const handleEstimate = (value: string | undefined) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { estimate_point: value }).then(() => {
         captureIssueEvent({
           eventName: ISSUE_UPDATED,
@@ -304,21 +304,6 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         </div>
       </WithDisplayPropertiesHOC>
 
-      {/* label */}
-      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="labels">
-        <div className="h-5" onClick={handleEventPropagation}>
-          <IssuePropertyLabels
-            projectId={issue?.project_id || null}
-            value={issue?.label_ids || null}
-            defaultOptions={defaultLabelOptions}
-            onChange={handleLabel}
-            disabled={isReadOnly}
-            renderByDefault={isMobile}
-            hideDropdownArrow
-          />
-        </div>
-      </WithDisplayPropertiesHOC>
-
       {/* start date */}
       <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="start_date">
         <div className="h-5" onClick={handleEventPropagation}>
@@ -511,6 +496,20 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
           </div>
         </Tooltip>
       </WithDisplayPropertiesHOC>
+
+      {/* label */}
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="labels">
+        <IssuePropertyLabels
+          projectId={issue?.project_id || null}
+          value={issue?.label_ids || null}
+          defaultOptions={defaultLabelOptions}
+          onChange={handleLabel}
+          disabled={isReadOnly}
+          renderByDefault={isMobile}
+          hideDropdownArrow
+          maxRender={3}
+        />
+      </WithDisplayPropertiesHOC>
     </div>
   );
 });

web/core/components/issues/issue-layouts/properties/index.ts

@@ -1,2 +1,3 @@
 export * from "./labels";
 export * from "./all-properties";
+export * from "./label-dropdown";

web/core/components/issues/issue-layouts/properties/label-dropdown.tsx

@@ -0,0 +1,305 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Placement } from "@popperjs/core";
+import { useParams } from "next/navigation";
+import { usePopper } from "react-popper";
+import { Check, ChevronDown, Loader, Search } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+// plane helper
+import { useOutsideClickDetector } from "@plane/hooks";
+// types
+import { IIssueLabel } from "@plane/types";
+// components
+import { ComboDropDown } from "@plane/ui";
+// constants
+import { getRandomLabelColor } from "@/constants/label";
+// hooks
+import { useLabel, useUserPermissions } from "@/hooks/store";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants";
+
+export interface ILabelDropdownProps {
+  projectId: string | null;
+  value: string[];
+  onChange: (data: string[]) => void;
+  onClose?: () => void;
+  disabled?: boolean;
+  defaultOptions?: any;
+  hideDropdownArrow?: boolean;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+  maxRender?: number;
+  renderByDefault?: boolean;
+  fullWidth?: boolean;
+  fullHeight?: boolean;
+  label: React.ReactNode;
+}
+
+export const LabelDropdown = (props: ILabelDropdownProps) => {
+  const {
+    projectId,
+    value,
+    onChange,
+    onClose,
+    disabled,
+    defaultOptions = [],
+    hideDropdownArrow = false,
+    className,
+    buttonClassName = "",
+    optionsClassName = "",
+    placement,
+    maxRender = 2,
+    renderByDefault = true,
+    fullWidth = false,
+    fullHeight = false,
+    label,
+  } = props;
+
+  //router
+  const { workspaceSlug: routerWorkspaceSlug } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+
+  //states
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [query, setQuery] = useState<string>("");
+  const [submitting, setSubmitting] = useState<boolean>(false);
+
+  //refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  //hooks
+  const { fetchProjectLabels, getProjectLabels, createLabel } = useLabel();
+  const { isMobile } = usePlatformOS();
+  const storeLabels = getProjectLabels(projectId);
+  const { allowPermissions } = useUserPermissions();
+
+  const canCreateLabel = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
+  let projectLabels: IIssueLabel[] = defaultOptions;
+  if (storeLabels && storeLabels.length > 0) projectLabels = storeLabels;
+
+  const options = useMemo(
+    () =>
+      projectLabels.map((label) => ({
+        value: label?.id,
+        query: label?.name,
+        content: (
+          <div className="flex items-center justify-start gap-2 overflow-hidden">
+            <span
+              className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+              style={{
+                backgroundColor: label?.color,
+              }}
+            />
+            <div className="line-clamp-1 inline-block truncate">{label?.name}</div>
+          </div>
+        ),
+      })),
+    [projectLabels]
+  );
+
+  const filteredOptions = useMemo(
+    () =>
+      query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())),
+    [options, query]
+  );
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const onOpen = useCallback(() => {
+    if (!storeLabels && workspaceSlug && projectId)
+      fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
+  }, [storeLabels, workspaceSlug, projectId, fetchProjectLabels]);
+
+  const toggleDropdown = useCallback(() => {
+    if (!isOpen) onOpen();
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen && onClose) onClose();
+  }, [onOpen, onClose, isOpen]);
+
+  const handleClose = () => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    setQuery("");
+    if (onClose) onClose();
+  };
+
+  const handleAddLabel = async (labelName: string) => {
+    if (!projectId) return;
+    setSubmitting(true);
+    const label = await createLabel(workspaceSlug, projectId, { name: labelName, color: getRandomLabelColor() });
+    onChange([...value, label.id]);
+    setQuery("");
+    setSubmitting(false);
+  };
+
+  const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    if (query !== "" && e.key === "Escape") {
+      setQuery("");
+    }
+
+    if (query !== "" && e.key === "Enter") {
+      e.preventDefault();
+      await handleAddLabel(query);
+    }
+  };
+  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
+
+  const handleOnClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      e.stopPropagation();
+      e.preventDefault();
+      toggleDropdown();
+    },
+    [toggleDropdown]
+  );
+
+  useEffect(() => {
+    if (isOpen && inputRef.current && !isMobile) {
+      inputRef.current.focus();
+    }
+  }, [isOpen, isMobile]);
+
+  useOutsideClickDetector(dropdownRef, handleClose);
+
+  const comboButton = useMemo(
+    () => (
+      <button
+        ref={setReferenceElement}
+        type="button"
+        className={`clickable flex w-full h-full items-center justify-center gap-1 text-xs ${fullWidth && "hover:bg-custom-background-80"} ${
+          disabled
+            ? "cursor-not-allowed text-custom-text-200"
+            : value.length <= maxRender
+              ? "cursor-pointer"
+              : "cursor-pointer hover:bg-custom-background-80"
+        }  ${buttonClassName}`}
+        onClick={handleOnClick}
+        disabled={disabled}
+      >
+        {label}
+        {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+      </button>
+    ),
+    [buttonClassName, disabled, fullWidth, handleOnClick, hideDropdownArrow, label, maxRender, value.length]
+  );
+
+  const preventPropagation = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  return (
+    <div className={`${fullHeight ? "h-full" : "h-5"}`} onClick={preventPropagation}>
+      <ComboDropDown
+        as="div"
+        ref={dropdownRef}
+        className={`w-auto max-w-full h-full flex-shrink-0 text-left ${className}`}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        onKeyDown={handleKeyDown}
+        button={comboButton}
+        renderByDefault={renderByDefault}
+        multiple
+      >
+        {isOpen && (
+          <Combobox.Options className="fixed z-10" static>
+            <div
+              className={`z-10 my-1 w-48 h-auto whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+                <Search className="h-3.5 w-3.5 text-custom-text-300" />
+                <Combobox.Input
+                  ref={inputRef}
+                  className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Search"
+                  displayValue={(assigned: any) => assigned?.name || ""}
+                  onKeyDown={searchInputKeyDown}
+                />
+              </div>
+              <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
+                {isLoading ? (
+                  <p className="text-center text-custom-text-200">Loading...</p>
+                ) : filteredOptions.length > 0 ? (
+                  filteredOptions.map((option) => (
+                    <Combobox.Option
+                      key={option.value}
+                      value={option.value}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          e.stopPropagation();
+                        }
+                      }}
+                      className={({ active, selected }) =>
+                        `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
+                          active ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <>
+                          {option.content}
+                          {selected && (
+                            <div className="flex-shrink-0">
+                              <Check className={`h-3.5 w-3.5`} />
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  ))
+                ) : submitting ? (
+                  <Loader className="spin  h-3.5 w-3.5" />
+                ) : canCreateLabel ? (
+                  <p
+                    onClick={() => {
+                      if (!query.length) return;
+                      handleAddLabel(query);
+                    }}
+                    className={`text-left text-custom-text-200 ${query.length ? "cursor-pointer" : "cursor-default"}`}
+                  >
+                    {query.length ? (
+                      <>
+                        + Add <span className="text-custom-text-100">&quot;{query}&quot;</span> to labels
+                      </>
+                    ) : (
+                      "Type to add a new label"
+                    )}
+                  </p>
+                ) : (
+                  <p className="text-left text-custom-text-200 ">No matching results.</p>
+                )}
+              </div>
+            </div>
+          </Combobox.Options>
+        )}
+      </ComboDropDown>
+    </div>
+  );
+};

web/core/components/issues/issue-layouts/properties/labels.tsx

@@ -1,30 +1,25 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
+import { Tags } from "lucide-react";
-import { usePopper } from "react-popper";
-import { Check, ChevronDown, Loader, Search, Tags } from "lucide-react";
-import { Combobox } from "@headlessui/react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { IIssueLabel } from "@plane/types";
 // ui
-import { ComboDropDown, Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/ui";
 // hooks
-import { getRandomLabelColor } from "@/constants/label";
+import { cn } from "@plane/utils";
-import { useLabel, useUserPermissions } from "@/hooks/store";
+import { useLabel } from "@/hooks/store";
-import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import { EUserPermissions, EUserPermissionsLevel } from "ee/constants/user-permissions";
+import { LabelDropdown } from "./label-dropdown";
-// constants
 
 export interface IIssuePropertyLabels {
   projectId: string | null;
   value: string[];
-  defaultOptions?: any;
+  defaultOptions?: unknown;
   onChange: (data: string[]) => void;
   disabled?: boolean;
   hideDropdownArrow?: boolean;
@@ -38,6 +33,7 @@ export interface IIssuePropertyLabels {
   onClose?: () => void;
   renderByDefault?: boolean;
   fullWidth?: boolean;
+  fullHeight?: boolean;
 }
 
 export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
@@ -49,318 +45,172 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     onClose,
     disabled,
     hideDropdownArrow = false,
-    className,
     buttonClassName = "",
-    optionsClassName = "",
     placement,
     maxRender = 2,
     noLabelBorder = false,
     placeholderText,
     renderByDefault = true,
     fullWidth = false,
+    fullHeight = false,
   } = props;
-  // router
-  const { workspaceSlug: routerWorkspaceSlug } = useParams();
-  const workspaceSlug = routerWorkspaceSlug?.toString();
   // states
-  const [query, setQuery] = useState("");
   const [isOpen, setIsOpen] = useState(false);
-  const [submitting, setSubmitting] = useState<boolean>(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
-  // popper-js refs
-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
   // store hooks
-  const { fetchProjectLabels, getProjectLabels, createLabel } = useLabel();
+  const { getProjectLabels } = useLabel();
   const { isMobile } = usePlatformOS();
   const storeLabels = getProjectLabels(projectId);
-  const { allowPermissions } = useUserPermissions();
-
-  const canCreateLabel = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
-
-  const onOpen = () => {
-    if (!storeLabels && workspaceSlug && projectId)
-      fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
-  };
 
   const handleClose = () => {
     if (!isOpen) return;
     setIsOpen(false);
-    setQuery("");
+    if (onClose) onClose();
-    onClose && onClose();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-    if (isOpen) onClose && onClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
 
-  const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (query !== "" && e.key === "Escape") {
-      e.stopPropagation();
-      setQuery("");
-    }
-
-    if (query !== "" && e.key === "Enter") {
-      e.stopPropagation();
-      e.preventDefault();
-      await handleAddLabel(query);
-    }
-  };
-
   useEffect(() => {
     if (isOpen && inputRef.current && !isMobile) {
       inputRef.current.focus();
     }
   }, [isOpen, isMobile]);
 
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: placement ?? "bottom-start",
-    modifiers: [
-      {
-        name: "preventOverflow",
-        options: {
-          padding: 12,
-        },
-      },
-    ],
-  });
-
   if (!value) return null;
 
-  let projectLabels: IIssueLabel[] = defaultOptions;
+  let projectLabels: IIssueLabel[] = defaultOptions as IIssueLabel[];
   if (storeLabels && storeLabels.length > 0) projectLabels = storeLabels;
 
-  const options = projectLabels.map((label) => ({
+  const NoLabel = useMemo(
-    value: label?.id,
+    () => (
-    query: label?.name,
+      <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None" isMobile={isMobile} renderByDefault={false}>
-    content: (
+        <div
-      <div className="flex items-center justify-start gap-2 overflow-hidden">
+          className={cn(
-        <span
+            "flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80",
-          className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+            noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300",
-          style={{
+            fullWidth && "w-full"
-            backgroundColor: label?.color,
+          )}
-          }}
+        >
-        />
+          <Tags className="h-3.5 w-3.5" strokeWidth={2} />
-        <div className="line-clamp-1 inline-block truncate">{label?.name}</div>
+          {placeholderText}
-      </div>
+        </div>
+      </Tooltip>
     ),
-  }));
+    [placeholderText, fullWidth, noLabelBorder, isMobile]
+  );
 
-  const filteredOptions =
+  const LabelSummary = useMemo(
-    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+    () => (
-
+      <div
-  const label = (
+        className={cn(
-    <div className="flex h-full w-full flex-wrap items-center gap-2 overflow-hidden">
+          "flex h-5 flex-shrink-0 items-center justify-center rounded px-2.5 text-xs",
-      {value.length > 0 ? (
+          fullWidth && "w-full",
-        value.length <= maxRender ? (
+          noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300",
-          <>
+          disabled ? "cursor-not-allowed" : "cursor-pointer"
-            {projectLabels
+        )}
-              ?.filter((l) => value.includes(l?.id))
+      >
-              .map((label) => (
-                <Tooltip
-                  key={label.id}
-                  position="top"
-                  tooltipHeading="Labels"
-                  tooltipContent={label?.name ?? ""}
-                  isMobile={isMobile}
-                  renderByDefault={renderByDefault}
-                >
-                  <div
-                    key={label?.id}
-                    className={`flex overflow-hidden hover:bg-custom-background-80 ${
-                      !disabled && "cursor-pointer"
-                    } h-full ${fullWidth && "w-full"} max-w-full flex-shrink-0 items-center rounded px-2.5 text-xs ${noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300"}`}
-                  >
-                    <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-custom-text-200">
-                      <span
-                        className="h-2 w-2 flex-shrink-0 rounded-full"
-                        style={{
-                          backgroundColor: label?.color ?? "#000000",
-                        }}
-                      />
-                      <div className="line-clamp-1 inline-block w-auto max-w-[100px] truncate">{label?.name}</div>
-                    </div>
-                  </div>
-                </Tooltip>
-              ))}
-          </>
-        ) : (
-          <div
-            className={`flex h-full ${fullWidth && "w-full"} flex-shrink-0 items-center rounded px-2.5 text-xs ${
-              disabled ? "cursor-not-allowed" : "cursor-pointer"
-            } ${noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300"}`}
-          >
-            <Tooltip
-              isMobile={isMobile}
-              position="top"
-              tooltipHeading="Labels"
-              tooltipContent={projectLabels
-                ?.filter((l) => value.includes(l?.id))
-                .map((l) => l?.name)
-                .join(", ")}
-              renderByDefault={false}
-            >
-              <div className="flex h-full items-center gap-1.5 text-custom-text-200">
-                <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
-                {`${value.length} Labels`}
-              </div>
-            </Tooltip>
-          </div>
-        )
-      ) : (
         <Tooltip
+          isMobile={isMobile}
           position="top"
           tooltipHeading="Labels"
-          tooltipContent="None"
+          tooltipContent={projectLabels
-          isMobile={isMobile}
+            ?.filter((l) => value.includes(l?.id))
+            .map((l) => l?.name)
+            .join(", ")}
           renderByDefault={false}
         >
-          <div
+          <div className="flex h-full items-center gap-1.5 text-custom-text-200">
-            className={`flex h-full ${fullWidth && "w-full"} items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
+            <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
-              noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300"
+            {`${value.length} Labels`}
-            }`}
-          >
-            <Tags className="h-3.5 w-3.5" strokeWidth={2} />
-            {placeholderText}
           </div>
         </Tooltip>
-      )}
+      </div>
-    </div>
+    ),
+    [fullWidth, disabled, noLabelBorder, isMobile, projectLabels, value]
   );
 
-  const comboButton = (
+  const LabelItem = useCallback(
-    <button
+    ({ label }: { label: IIssueLabel }) => (
-      ref={setReferenceElement}
+      <Tooltip
-      type="button"
+        key={label.id}
-      className={`clickable flex w-full h-full items-center justify-between gap-1 text-xs ${fullWidth && "hover:bg-custom-background-80"} ${
+        position="top"
-        disabled
+        tooltipHeading="Labels"
-          ? "cursor-not-allowed text-custom-text-200"
+        tooltipContent={label?.name ?? ""}
-          : value.length <= maxRender
+        isMobile={isMobile}
-            ? "cursor-pointer"
+        renderByDefault={renderByDefault}
-            : "cursor-pointer hover:bg-custom-background-80"
+      >
-      }  ${buttonClassName}`}
+        <div
-      onClick={handleOnClick}
+          key={label?.id}
-      disabled={disabled}
+          className={cn(
-    >
+            "flex overflow-hidden justify-center hover:bg-custom-background-80 max-w-full h-full flex-shrink-0 items-center rounded px-2.5 text-xs",
-      {label}
+            !disabled && "cursor-pointer",
-      {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+            fullWidth && "w-full",
-    </button>
+            noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300"
+          )}
+        >
+          <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-custom-text-200">
+            <span
+              className="h-2 w-2 flex-shrink-0 rounded-full"
+              style={{
+                backgroundColor: label?.color ?? "#000000",
+              }}
+            />
+            <div className="line-clamp-1 inline-block w-auto max-w-[200px] truncate">{label?.name}</div>
+          </div>
+        </div>
+      </Tooltip>
+    ),
+    [disabled, fullWidth, isMobile, noLabelBorder, renderByDefault]
   );
 
-  const handleAddLabel = async (labelName: string) => {
-    if (!projectId) return;
-    setSubmitting(true);
-    const label = await createLabel(workspaceSlug, projectId, { name: labelName, color: getRandomLabelColor() });
-    onChange([...value, label.id]);
-    setQuery("");
-    setSubmitting(false);
-  };
-
   return (
-    <ComboDropDown
+    <>
-      as="div"
+      {value.length > 0 ? (
-      ref={dropdownRef}
+        value.length <= maxRender ? (
-      className={`w-auto max-w-full h-full flex-shrink-0 text-left ${className}`}
+          projectLabels
-      value={value}
+            ?.filter((l) => value.includes(l?.id))
-      onChange={onChange}
+            .map((label) => (
-      disabled={disabled}
+              <LabelDropdown
-      onKeyDown={handleKeyDown}
+                key={label.id}
-      button={comboButton}
+                projectId={projectId}
-      renderByDefault={renderByDefault}
+                value={value}
-      multiple
+                onChange={onChange}
-    >
+                buttonClassName={buttonClassName}
-      {isOpen && (
+                placement={placement}
-        <Combobox.Options className="fixed z-10" static>
+                hideDropdownArrow={hideDropdownArrow}
-          <div
+                fullWidth={fullWidth}
-            className={`z-10 my-1 w-48 h-auto whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
+                fullHeight={fullHeight}
-            ref={setPopperElement}
+                label={<LabelItem label={label} />}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-300" />
-              <Combobox.Input
-                ref={inputRef}
-                className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name || ""}
-                onKeyDown={searchInputKeyDown}
               />
-            </div>
+            ))
-            <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
+        ) : (
-              {isLoading ? (
+          <LabelDropdown
-                <p className="text-center text-custom-text-200">Loading...</p>
+            projectId={projectId}
-              ) : filteredOptions.length > 0 ? (
+            value={value}
-                filteredOptions.map((option) => (
+            onChange={onChange}
-                  <Combobox.Option
+            hideDropdownArrow={hideDropdownArrow}
-                    key={option.value}
+            buttonClassName={buttonClassName}
-                    value={option.value}
+            placement={placement}
-                    onKeyDown={(e) => {
+            fullWidth={fullWidth}
-                      if (e.key === "Enter") {
+            fullHeight={fullHeight}
-                        e.preventDefault();
+            label={LabelSummary}
-                        e.stopPropagation();
+          />
-                      }
+        )
-                    }}
+      ) : (
-                    className={({ active, selected }) =>
+        <LabelDropdown
-                      `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
+          projectId={projectId}
-                        active ? "bg-custom-background-80" : ""
+          value={value}
-                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+          onChange={onChange}
-                    }
+          hideDropdownArrow={hideDropdownArrow}
-                  >
+          buttonClassName={buttonClassName}
-                    {({ selected }) => (
+          placement={placement}
-                      <>
+          fullWidth={fullWidth}
-                        {option.content}
+          fullHeight={fullHeight}
-                        {selected && (
+          label={NoLabel}
-                          <div className="flex-shrink-0">
+        />
-                            <Check className={`h-3.5 w-3.5`} />
-                          </div>
-                        )}
-                      </>
-                    )}
-                  </Combobox.Option>
-                ))
-              ) : submitting ? (
-                <Loader className="spin  h-3.5 w-3.5" />
-              ) : canCreateLabel ? (
-                <p
-                  onClick={() => {
-                    if (!query.length) return;
-                    handleAddLabel(query);
-                  }}
-                  className={`text-left text-custom-text-200 ${query.length ? "cursor-pointer" : "cursor-default"}`}
-                >
-                  {query.length ? (
-                    <>
-                      + Add <span className="text-custom-text-100">&quot;{query}&quot;</span> to labels
-                    </>
-                  ) : (
-                    "Type to add a new label"
-                  )}
-                </p>
-              ) : (
-                <p className="text-left text-custom-text-200 ">No matching results.</p>
-              )}
-            </div>
-          </div>
-        </Combobox.Options>
       )}
-    </ComboDropDown>
+    </>
   );
 });

web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx

@@ -37,6 +37,7 @@ export const SpreadsheetLabelColumn: React.FC<Props> = observer((props: Props) =
         onClose={onClose}
         noLabelBorder
         fullWidth
+        fullHeight
       />
     </div>
   );

web/core/components/issues/workspace-draft/draft-issue-properties.tsx

@@ -160,16 +160,14 @@ export const DraftIssueProperties: React.FC<IIssueProperties> = observer((props)
 
       {/* label */}
 
-      <div className="h-5" onClick={handleEventPropagation}>
+      <IssuePropertyLabels
-        <IssuePropertyLabels
+        projectId={issue?.project_id || null}
-          projectId={issue?.project_id || null}
+        value={issue?.label_ids || null}
-          value={issue?.label_ids || null}
+        defaultOptions={defaultLabelOptions}
-          defaultOptions={defaultLabelOptions}
+        onChange={handleLabel}
-          onChange={handleLabel}
+        renderByDefault={isMobile}
-          renderByDefault={isMobile}
+        hideDropdownArrow
-          hideDropdownArrow
+      />
-        />
-      </div>
 
       {/* start date */}
       <div className="h-5" onClick={handleEventPropagation}>