From 95d2b6f1c147395fd96603770483a9c769fe3f2f Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Fri, 22 Mar 2024 18:39:06 +0530
Subject: [PATCH] style: hide cycle and module dropdown placeholder from list
 and kanban view. (#4044)

---
 web/components/dropdowns/cycle/index.tsx   |  4 ++--
 web/components/dropdowns/module/index.tsx  | 20 +++++++++++---------
 web/components/issues/issue-modal/form.tsx |  2 ++
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/web/components/dropdowns/cycle/index.tsx b/web/components/dropdowns/cycle/index.tsx
index d59cb8b83..ce721e0a1 100644
--- a/web/components/dropdowns/cycle/index.tsx
+++ b/web/components/dropdowns/cycle/index.tsx
@@ -41,7 +41,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
     hideIcon = false,
     onChange,
     onClose,
-    placeholder = "Cycle",
+    placeholder = "",
     placement,
     projectId,
     showTooltip = false,
@@ -132,7 +132,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
               variant={buttonVariant}
             >
               {!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
-              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (!!selectedName || !!placeholder) && (
                 <span className="flex-grow truncate max-w-40">{selectedName ?? placeholder}</span>
               )}
               {dropdownArrow && (
diff --git a/web/components/dropdowns/module/index.tsx b/web/components/dropdowns/module/index.tsx
index 5b7df2f23..1d843db8a 100644
--- a/web/components/dropdowns/module/index.tsx
+++ b/web/components/dropdowns/module/index.tsx
@@ -46,7 +46,7 @@ type ButtonContentProps = {
   hideIcon: boolean;
   hideText: boolean;
   onChange: (moduleIds: string[]) => void;
-  placeholder: string;
+  placeholder?: string;
   showCount: boolean;
   showTooltip?: boolean;
   value: string | string[] | null;
@@ -75,13 +75,15 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
         {showCount ? (
           <div className="relative flex items-center gap-1 max-w-full">
             {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
-            <div className="max-w-40 flex-grow truncate">
-              {value.length > 0
-                ? value.length === 1
-                  ? `${getModuleById(value[0])?.name || "module"}`
-                  : `${value.length} Module${value.length === 1 ? "" : "s"}`
-                : placeholder}
-            </div>
+            {(value.length > 0 || !!placeholder) && (
+              <div className="max-w-40 flex-grow truncate">
+                {value.length > 0
+                  ? value.length === 1
+                    ? `${getModuleById(value[0])?.name || "module"}`
+                    : `${value.length} Module${value.length === 1 ? "" : "s"}`
+                  : placeholder}
+              </div>
+            )}
           </div>
         ) : value.length > 0 ? (
           <div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5">
@@ -158,7 +160,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
     multiple,
     onChange,
     onClose,
-    placeholder = "Module",
+    placeholder = "",
     placement,
     projectId,
     showCount = false,
diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
index dcc1a3b7d..6c9872369 100644
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@@ -601,6 +601,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                             onChange(cycleId);
                             handleFormChange();
                           }}
+                          placeholder="Cycle"
                           value={value}
                           buttonVariant="border-with-text"
                           tabIndex={getTabIndex("cycle_id")}
@@ -622,6 +623,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                             onChange(moduleIds);
                             handleFormChange();
                           }}
+                          placeholder="Modules"
                           buttonVariant="border-with-text"
                           tabIndex={getTabIndex("module_ids")}
                           multiple