From 443c187cdee7fed0aed13a200db6ed6b839ca2c8 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 23 Feb 2023 19:54:28 +0530
Subject: [PATCH] feat: sidebar select option truncate (#334)

---
 .../issues/sidebar-select/cycle.tsx           | 26 ++++++++++++++-----
 .../issues/sidebar-select/module.tsx          | 26 ++++++++++++++-----
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/apps/app/components/issues/sidebar-select/cycle.tsx b/apps/app/components/issues/sidebar-select/cycle.tsx
index b1243fe98ca..127c78ebac2 100644
--- a/apps/app/components/issues/sidebar-select/cycle.tsx
+++ b/apps/app/components/issues/sidebar-select/cycle.tsx
@@ -8,7 +8,7 @@ import useSWR, { mutate } from "swr";
 import issuesService from "services/issues.service";
 import cyclesService from "services/cycles.service";
 // ui
-import { Spinner, CustomSelect } from "components/ui";
+import { Spinner, CustomSelect, Tooltip } from "components/ui";
 // icons
 import { CyclesIcon } from "components/icons";
 // types
@@ -65,11 +65,19 @@ export const SidebarCycleSelect: React.FC<Props> = ({
       <div className="space-y-1 sm:basis-1/2">
         <CustomSelect
           label={
-            <span
-              className={`hidden truncate text-left sm:block ${issueCycle ? "" : "text-gray-900"}`}
+            <Tooltip
+              position="top-right"
+              tooltipHeading="Cycle"
+              tooltipContent={issueCycle ? issueCycle.cycle_detail.name : "None"}
             >
-              {issueCycle ? issueCycle.cycle_detail.name : "None"}
-            </span>
+              <span
+                className={` w-full max-w-[125px] truncate text-left sm:block ${
+                  issueCycle ? "" : "text-gray-900"
+                }`}
+              >
+                {issueCycle ? issueCycle.cycle_detail.name : "None"}
+              </span>
+            </Tooltip>
           }
           value={issueCycle?.cycle_detail.id}
           onChange={(value: any) => {
@@ -84,11 +92,15 @@ export const SidebarCycleSelect: React.FC<Props> = ({
               <>
                 {cycles.map((option) => (
                   <CustomSelect.Option key={option.id} value={option.id}>
-                    {option.name}
+                    <Tooltip position="left-bottom" tooltipContent={option.name}>
+                      <span className="w-full max-w-[125px] truncate ">{option.name}</span>
+                    </Tooltip>
                   </CustomSelect.Option>
                 ))}
                 <CustomSelect.Option value={null} className="capitalize">
-                  None
+                  <Tooltip position="left-bottom" tooltipContent="None">
+                    <span className="w-full max-w-[125px] truncate">None</span>
+                  </Tooltip>
                 </CustomSelect.Option>
               </>
             ) : (
diff --git a/apps/app/components/issues/sidebar-select/module.tsx b/apps/app/components/issues/sidebar-select/module.tsx
index 44bef4d62e0..90661a0df08 100644
--- a/apps/app/components/issues/sidebar-select/module.tsx
+++ b/apps/app/components/issues/sidebar-select/module.tsx
@@ -7,7 +7,7 @@ import useSWR, { mutate } from "swr";
 // services
 import modulesService from "services/modules.service";
 // ui
-import { Spinner, CustomSelect } from "components/ui";
+import { Spinner, CustomSelect, Tooltip } from "components/ui";
 // icons
 import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 // types
@@ -64,11 +64,19 @@ export const SidebarModuleSelect: React.FC<Props> = ({
       <div className="space-y-1 sm:basis-1/2">
         <CustomSelect
           label={
-            <span
-              className={`hidden truncate text-left sm:block ${issueModule ? "" : "text-gray-900"}`}
+            <Tooltip
+              position="top-right"
+              tooltipHeading="Module"
+              tooltipContent={modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
             >
-              {modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
-            </span>
+              <span
+                className={`w-full max-w-[125px] truncate text-left sm:block ${
+                  issueModule ? "" : "text-gray-900"
+                }`}
+              >
+                {modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
+              </span>
+            </Tooltip>
           }
           value={issueModule?.module_detail?.id}
           onChange={(value: any) => {
@@ -83,11 +91,15 @@ export const SidebarModuleSelect: React.FC<Props> = ({
               <>
                 {modules.map((option) => (
                   <CustomSelect.Option key={option.id} value={option.id}>
-                    {option.name}
+                    <Tooltip position="left-bottom" tooltipContent={option.name}>
+                      <span className="w-full max-w-[125px] truncate">{option.name}</span>
+                    </Tooltip>
                   </CustomSelect.Option>
                 ))}
                 <CustomSelect.Option value={null} className="capitalize">
-                  None
+                  <Tooltip position="left-bottom" tooltipContent="None">
+                    <span className="w-full max-w-[125px] truncate"> None </span>
+                  </Tooltip>
                 </CustomSelect.Option>
               </>
             ) : (