From 93abff5a4b2434dfaef51411ab428bd311169eba Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 14 Nov 2023 18:29:39 +0530
Subject: [PATCH] chore: no lead option added in lead select dropdown (#2774)

---
 web/components/modules/select/lead.tsx     | 11 ++++++
 web/components/workspace/member-select.tsx | 46 +++++++++++++---------
 2 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/web/components/modules/select/lead.tsx b/web/components/modules/select/lead.tsx
index 84da54748..ccff72a37 100644
--- a/web/components/modules/select/lead.tsx
+++ b/web/components/modules/select/lead.tsx
@@ -6,6 +6,7 @@ import { ProjectMemberService } from "services/project";
 // ui
 import { Avatar, CustomSearchSelect } from "@plane/ui";
 // icons
+import { Combobox } from "@headlessui/react";
 import { UserCircle } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
@@ -59,6 +60,16 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
           )}
         </div>
       }
+      footerOption={
+        <Combobox.Option
+          value=""
+          className="flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5  text-custom-text-200"
+        >
+          <span className="flex items-center justify-start gap-1 text-custom-text-200">
+            <span>No Lead</span>
+          </span>
+        </Combobox.Option>
+      }
       onChange={onChange}
       noChevron
     />
diff --git a/web/components/workspace/member-select.tsx b/web/components/workspace/member-select.tsx
index bae16de01..26b76845d 100644
--- a/web/components/workspace/member-select.tsx
+++ b/web/components/workspace/member-select.tsx
@@ -95,27 +95,37 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
           <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
             {filteredOptions ? (
               filteredOptions.length > 0 ? (
-                filteredOptions.map((workspaceMember: IWorkspaceMember) => (
+                <>
+                  {filteredOptions.map((workspaceMember: IWorkspaceMember) => (
+                    <Listbox.Option
+                      key={workspaceMember.id}
+                      value={workspaceMember}
+                      className={({ active, selected }) =>
+                        `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          active && !selected ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <>
+                          <div className="flex items-center gap-2">
+                            <Avatar name={workspaceMember?.member.display_name} src={workspaceMember?.member.avatar} />
+                            {workspaceMember.member.display_name}
+                          </div>
+                          {selected && <Check className="h-3.5 w-3.5" />}
+                        </>
+                      )}
+                    </Listbox.Option>
+                  ))}
                   <Listbox.Option
-                    key={workspaceMember.id}
-                    value={workspaceMember}
-                    className={({ active, selected }) =>
-                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                        active && !selected ? "bg-custom-background-80" : ""
-                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                    }
+                    value=""
+                    className="flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200"
                   >
-                    {({ selected }) => (
-                      <>
-                        <div className="flex items-center gap-2">
-                          <Avatar name={workspaceMember?.member.display_name} src={workspaceMember?.member.avatar} />
-                          {workspaceMember.member.display_name}
-                        </div>
-                        {selected && <Check className="h-3.5 w-3.5" />}
-                      </>
-                    )}
+                    <span className="flex items-center justify-start gap-1 text-custom-text-200">
+                      <span>No Lead</span>
+                    </span>
                   </Listbox.Option>
-                ))
+                </>
               ) : (
                 <span className="flex items-center gap-2 p-1">
                   <p className="text-left text-custom-text-200 ">No matching results</p>