From 0ab03c963c28807722f00238f2be656167afecb4 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Wed, 3 Apr 2024 20:57:44 +0530
Subject: [PATCH] [WEB-869] chore: fix assignee and parent ui inconsistency in
 create issue modal. (#4113)

---
 web/components/issues/issue-modal/form.tsx | 63 ++++++++++------------
 1 file changed, 29 insertions(+), 34 deletions(-)

diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
index b581522e6..88d6c3877 100644
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@@ -541,7 +541,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           handleFormChange();
                         }}
                         buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
-                        buttonClassName={value?.length > 0 ? "hover:bg-transparent px-0" : ""}
+                        buttonClassName={value?.length > 0 ? "hover:bg-transparent" : ""}
                         placeholder="Assignees"
                         multiple
                         tabIndex={getTabIndex("assignee_ids")}
@@ -663,33 +663,23 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     )}
                   />
                 )}
-                <CustomMenu
-                  customButton={
-                    <button
-                      type="button"
-                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80"
-                    >
-                      {watch("parent_id") ? (
-                        <div className="flex items-center gap-1 text-custom-text-200">
-                          <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
-                          <span className="whitespace-nowrap">
-                            {selectedParentIssue &&
-                              `${selectedParentIssue.project__identifier}-
-                                  ${selectedParentIssue.sequence_id}`}
-                          </span>
-                        </div>
-                      ) : (
-                        <div className="flex items-center gap-1 text-custom-text-300">
-                          <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
-                          <span className="whitespace-nowrap">Add parent</span>
-                        </div>
-                      )}
-                    </button>
-                  }
-                  placement="bottom-start"
-                  tabIndex={getTabIndex("parent_id")}
-                >
-                  {watch("parent_id") ? (
+                {watch("parent_id") ? (
+                  <CustomMenu
+                    customButton={
+                      <button
+                        type="button"
+                        className="flex cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1.5 text-xs hover:bg-custom-background-80"
+                      >
+                        <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                        <span className="whitespace-nowrap">
+                          {selectedParentIssue &&
+                            `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`}
+                        </span>
+                      </button>
+                    }
+                    placement="bottom-start"
+                    tabIndex={getTabIndex("parent_id")}
+                  >
                     <>
                       <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
                         Change parent issue
@@ -704,12 +694,17 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         Remove parent issue
                       </CustomMenu.MenuItem>
                     </>
-                  ) : (
-                    <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
-                      Select parent Issue
-                    </CustomMenu.MenuItem>
-                  )}
-                </CustomMenu>
+                  </CustomMenu>
+                ) : (
+                  <button
+                    type="button"
+                    className="flex cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1.5 text-xs hover:bg-custom-background-80"
+                    onClick={() => setParentIssueListModalOpen(true)}
+                  >
+                    <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                    <span className="whitespace-nowrap">Add parent</span>
+                  </button>
+                )}
                 <Controller
                   control={control}
                   name="parent_id"