From 0bf8530459b87ad420dd73117238bc3800917ec7 Mon Sep 17 00:00:00 2001
From: Ghayoor ul Haq <ghayoor10th@gmail.com>
Date: Thu, 30 May 2024 12:10:11 +0500
Subject: [PATCH] Ticket Label UI issues (#319)

* Fix ticket status label in Edit label Dropdown + optimise code for dropdown

* fix width for ticket status/label container so width dont change on changing label
---
 apps/client/pages/ticket/[id].tsx | 242 +++++++-----------------------
 1 file changed, 52 insertions(+), 190 deletions(-)

diff --git a/apps/client/pages/ticket/[id].tsx b/apps/client/pages/ticket/[id].tsx
index b61c53672..999888531 100644
--- a/apps/client/pages/ticket/[id].tsx
+++ b/apps/client/pages/ticket/[id].tsx
@@ -30,6 +30,13 @@ function classNames(...classes: any) {
   return classes.filter(Boolean).join(" ");
 }
 
+const ticketStatusMapping = {
+  needs_support: "Needs Support",
+  in_progress: "In Progress",
+  in_review: "In Review",
+  done: "Done",
+};
+
 export default function Ticket() {
   const router = useRouter();
   const { t } = useTranslation("peppermint");
@@ -456,18 +463,7 @@ export default function Ticket() {
                                 />
                               </div>
                               <div className="ml-3 text-xs font-semibold text-gray-900">
-                                {data.ticket.status === "needs_support" && (
-                                  <span>Needs Support</span>
-                                )}
-                                {data.ticket.status === "in_progress" && (
-                                  <span>In Progress</span>
-                                )}
-                                {data.ticket.status === "in_review" && (
-                                  <span>In Review</span>
-                                )}
-                                {data.ticket.status === "done" && (
-                                  <span>Done</span>
-                                )}
+                                {ticketStatusMapping[data.ticket.status]}
                               </div>
                             </div>
                           </li>
@@ -928,25 +924,14 @@ export default function Ticket() {
                               />
                             </div>
                             <div className="ml-3 text-xs font-semibold text-gray-900 dark:text-white">
-                              {data.ticket.status === "needs_support" && (
-                                <span>Needs Support</span>
-                              )}
-                              {data.ticket.status === "in_progress" && (
-                                <span>In Progress</span>
-                              )}
-                              {data.ticket.status === "in_review" && (
-                                <span>In Review</span>
-                              )}
-                              {data.ticket.status === "done" && (
-                                <span>Done</span>
-                              )}
+                              {ticketStatusMapping[data.ticket.status]}
                             </div>
                           </div>
                         </li>
                       )}
                     </ul>
                   ) : (
-                    <>
+                    <div className={'w-[150px]'}>
                       <Listbox value={priority} onChange={setPriority}>
                         {({ open }) => (
                           <>
@@ -1110,8 +1095,8 @@ export default function Ticket() {
                               <Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                 <div className="block truncate">
                                   {ticketStatus
-                                    ? ticketStatus
-                                    : data.ticket.status}
+                                    ? ticketStatusMapping[ticketStatus]
+                                    : ticketStatusMapping[data.ticket.status]}
                                 </div>
                                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                                   <ChevronUpDownIcon
@@ -1129,181 +1114,58 @@ export default function Ticket() {
                                 leaveTo="opacity-0"
                               >
                                 <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                                  <Listbox.Option
-                                    className={({ active }) =>
-                                      classNames(
-                                        active
-                                          ? "bg-indigo-600 text-white"
-                                          : "text-gray-900",
-                                        "relative cursor-default select-none py-2 pl-3 pr-9"
-                                      )
-                                    }
-                                    value="needs_support"
-                                  >
-                                    {({ selected, active }) => (
-                                      <>
-                                        <span
-                                          className={classNames(
-                                            selected
-                                              ? "font-semibold"
-                                              : "font-normal",
-                                            "block truncate"
-                                          )}
-                                        >
-                                          Needs Support
-                                        </span>
-
-                                        {selected ? (
-                                          <span
-                                            className={classNames(
-                                              active
-                                                ? "text-white"
-                                                : "text-indigo-600",
-                                              "absolute inset-y-0 right-0 flex items-center pr-4"
-                                            )}
-                                          >
-                                            <CheckIcon
-                                              className="h-5 w-5"
-                                              aria-hidden="true"
-                                            />
-                                          </span>
-                                        ) : null}
-                                      </>
-                                    )}
-                                  </Listbox.Option>
-                                  <Listbox.Option
-                                    className={({ active }) =>
-                                      classNames(
-                                        active
-                                          ? "bg-indigo-600 text-white"
-                                          : "text-gray-900",
-                                        "relative cursor-default select-none py-2 pl-3 pr-9"
-                                      )
-                                    }
-                                    value="in_progress"
-                                  >
-                                    {({ selected, active }) => (
-                                      <>
-                                        <span
-                                          className={classNames(
-                                            selected
-                                              ? "font-semibold"
-                                              : "font-normal",
-                                            "block truncate"
-                                          )}
-                                        >
-                                          In Progress
-                                        </span>
-
-                                        {selected ? (
-                                          <span
-                                            className={classNames(
-                                              active
-                                                ? "text-white"
-                                                : "text-indigo-600",
-                                              "absolute inset-y-0 right-0 flex items-center pr-4"
-                                            )}
-                                          >
-                                            <CheckIcon
-                                              className="h-5 w-5"
-                                              aria-hidden="true"
-                                            />
-                                          </span>
-                                        ) : null}
-                                      </>
-                                    )}
-                                  </Listbox.Option>
-                                  <Listbox.Option
-                                    className={({ active }) =>
-                                      classNames(
-                                        active
-                                          ? "bg-indigo-600 text-white"
-                                          : "text-gray-900",
-                                        "relative cursor-default select-none py-2 pl-3 pr-9"
-                                      )
-                                    }
-                                    value="in_review"
-                                  >
-                                    {({ selected, active }) => (
-                                      <>
-                                        <span
-                                          className={classNames(
-                                            selected
-                                              ? "font-semibold"
-                                              : "font-normal",
-                                            "block truncate"
-                                          )}
-                                        >
-                                          In Review
-                                        </span>
-
-                                        {selected ? (
+                                  {Object.keys(ticketStatusMapping).map((status) => (
+                                    <Listbox.Option
+                                      key={status}
+                                      className={({ active }) =>
+                                        classNames(
+                                          active
+                                            ? "bg-indigo-600 text-white"
+                                            : "text-gray-900",
+                                          "relative cursor-default select-none py-2 pl-3 pr-9"
+                                        )
+                                      }
+                                      value={status}
+                                    >
+                                      {({ selected, active }) => (
+                                        <>
                                           <span
                                             className={classNames(
-                                              active
-                                                ? "text-white"
-                                                : "text-indigo-600",
-                                              "absolute inset-y-0 right-0 flex items-center pr-4"
+                                              selected
+                                                ? "font-semibold"
+                                                : "font-normal",
+                                              "block truncate"
                                             )}
                                           >
-                                            <CheckIcon
-                                              className="h-5 w-5"
-                                              aria-hidden="true"
-                                            />
+                                            {ticketStatusMapping[status]}
                                           </span>
-                                        ) : null}
-                                      </>
-                                    )}
-                                  </Listbox.Option>
-                                  <Listbox.Option
-                                    className={({ active }) =>
-                                      classNames(
-                                        active
-                                          ? "bg-indigo-600 text-white"
-                                          : "text-gray-900",
-                                        "relative cursor-default select-none py-2 pl-3 pr-9"
-                                      )
-                                    }
-                                    value="done"
-                                  >
-                                    {({ selected, active }) => (
-                                      <>
-                                        <span
-                                          className={classNames(
-                                            selected
-                                              ? "font-semibold"
-                                              : "font-normal",
-                                            "block truncate"
-                                          )}
-                                        >
-                                          Done
-                                        </span>
 
-                                        {selected ? (
-                                          <span
-                                            className={classNames(
-                                              active
-                                                ? "text-white"
-                                                : "text-indigo-600",
-                                              "absolute inset-y-0 right-0 flex items-center pr-4"
-                                            )}
-                                          >
-                                            <CheckIcon
-                                              className="h-5 w-5"
-                                              aria-hidden="true"
-                                            />
-                                          </span>
-                                        ) : null}
-                                      </>
-                                    )}
-                                  </Listbox.Option>
+                                          {selected ? (
+                                            <span
+                                              className={classNames(
+                                                active
+                                                  ? "text-white"
+                                                  : "text-indigo-600",
+                                                "absolute inset-y-0 right-0 flex items-center pr-4"
+                                              )}
+                                            >
+                                              <CheckIcon
+                                                className="h-5 w-5"
+                                                aria-hidden="true"
+                                              />
+                                            </span>
+                                          ) : null}
+                                        </>
+                                      )}
+                                    </Listbox.Option>
+                                  ))}
                                 </Listbox.Options>
                               </Transition>
                             </div>
                           </>
                         )}
                       </Listbox>
-                    </>
+                    </div>
                   )}
                 </div>
                 <div className="border-t border-gray-200">