From d18765a613b45c2c6dc9956b4fbf23dbc3f71236 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 7 Mar 2023 19:32:29 +0530
Subject: [PATCH] style: truncate (#388)

* style: truncate

* fix: truncate text added to cycle and module card
---
 .../components/cycles/single-cycle-card.tsx   |  4 +-
 .../components/modules/single-module-card.tsx | 65 +++++++++----------
 2 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/apps/app/components/cycles/single-cycle-card.tsx b/apps/app/components/cycles/single-cycle-card.tsx
index f5591a737..967b0641e 100644
--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@@ -19,7 +19,7 @@ import { ChevronDownIcon, PencilIcon, StarIcon } from "@heroicons/react/24/outli
 // helpers
 import { getDateRangeStatus, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { groupBy } from "helpers/array.helper";
-import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
+import { capitalizeFirstLetter, copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import {
   CompletedCyclesResponse,
@@ -235,7 +235,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
           <div className="flex items-center justify-between gap-1">
             <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
               <a className="w-full">
-                <h3 className="text-xl font-semibold leading-5 ">{cycle.name}</h3>
+                <h3 className="text-xl font-semibold leading-5 ">{truncateText(cycle.name,75)}</h3>
               </a>
             </Link>
             {cycle.is_favorite ? (
diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index 3526321e8..c8b179ae5 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -10,7 +10,7 @@ import useToast from "hooks/use-toast";
 // components
 import { DeleteModuleModal } from "components/modules";
 // ui
-import { AssigneesList, Avatar, CustomMenu } from "components/ui";
+import { AssigneesList, Avatar, CustomMenu, Tooltip } from "components/ui";
 // icons
 import User from "public/user.png";
 import {
@@ -32,7 +32,7 @@ import { IModule } from "types";
 // fetch-key
 import { MODULE_LIST, STATE_LIST } from "constants/fetch-keys";
 // helper
-import { copyTextToClipboard } from "helpers/string.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import { getStatesList } from "helpers/state.helper";
 
 type Props = {
@@ -162,7 +162,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
         setIsOpen={setModuleDeleteModal}
         data={module}
       />
-      <div className="h-full w-full min-w-[380px]">
+      <div className="h-full w-full min-w-[360px]">
         <div className="flex h-full w-full flex-row rounded-[10px] bg-white text-xs shadow">
           <span
             className={`h-full w-2.5 rounded-l-[10px] `}
@@ -173,12 +173,16 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
             }}
           />
           <div className="flex h-full w-full flex-col items-start justify-between gap-6 p-5">
-            <div className="flex flex-col w-full gap-5">
-              <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-                <a className="w-full">
-                  <span className="text-xl font-semibold text-black">{module.name}</span>
-                </a>
-              </Link>
+            <div className="flex w-full flex-col gap-5">
+              <Tooltip tooltipContent={module.name} position="top-left">
+                <span
+                  className="break-all text-xl font-semibold text-black"
+                >
+                  <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+                    <a className="w-full">{truncateText(module.name, 75)}</a>
+                  </Link>
+                </span>
+              </Tooltip>
               <div className="flex items-center gap-4">
                 <div className="flex items-start gap-1 ">
                   <CalendarDaysIcon className="h-4 w-4 text-gray-900" />
@@ -242,30 +246,25 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
                 <span className="capitalize">{module?.status?.replace("-", " ")}</span>
               </div>
               <div className="flex items-center gap-1">
-                <span>
-                  {module.is_favorite ? (
-                    <button onClick={handleRemoveFromFavorites}>
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                    </button>
-                  ) : (
-                    <button onClick={handleAddToFavorites}>
-                      <StarIcon className="h-4 w-4 " color="#858E96" />
-                    </button>
-                  )}
-                </span>
-                <span>
-                  <CustomMenu width="auto" verticalEllipsis>
-                    <CustomMenu.MenuItem onClick={handleEditModule}>
-                      Edit module
-                    </CustomMenu.MenuItem>
-                    <CustomMenu.MenuItem onClick={handleDeleteModule}>
-                      Delete module
-                    </CustomMenu.MenuItem>
-                    <CustomMenu.MenuItem onClick={handleCopyText}>
-                      Copy module link
-                    </CustomMenu.MenuItem>
-                  </CustomMenu>
-                </span>
+                {module.is_favorite ? (
+                  <button onClick={handleRemoveFromFavorites}>
+                    <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                  </button>
+                ) : (
+                  <button onClick={handleAddToFavorites}>
+                    <StarIcon className="h-4 w-4 " color="#858E96" />
+                  </button>
+                )}
+
+                <CustomMenu width="auto" verticalEllipsis>
+                  <CustomMenu.MenuItem onClick={handleEditModule}>Edit module</CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleDeleteModule}>
+                    Delete module
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    Copy module link
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
               </div>
             </div>
           </div>