From 830d1c0b5aed7568f179552c27ff22a904f5ef59 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 15 Jul 2024 13:13:20 +0530
Subject: [PATCH] fix: issue label activity truncate fix and chip component
 added (#5120)

---
 .../issue-activity/activity/actions/index.ts  |  1 +
 .../activity/actions/label-activity-chip.tsx  | 22 +++++++++++++
 .../issue-activity/activity/actions/label.tsx | 33 +++++--------------
 3 files changed, 32 insertions(+), 24 deletions(-)
 create mode 100644 web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx

diff --git a/web/core/components/issues/issue-detail/issue-activity/activity/actions/index.ts b/web/core/components/issues/issue-detail/issue-activity/activity/actions/index.ts
index 7b326aaf9..ea6916308 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity/actions/index.ts
+++ b/web/core/components/issues/issue-detail/issue-activity/activity/actions/index.ts
@@ -16,6 +16,7 @@ export * from "./link";
 export * from "./attachment";
 export * from "./archived-at";
 export * from "./inbox";
+export * from "./label-activity-chip";
 
 // helpers
 export * from "./helpers/activity-block";
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx b/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx
new file mode 100644
index 000000000..e7cf63f83
--- /dev/null
+++ b/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx
@@ -0,0 +1,22 @@
+import { FC } from "react";
+import { Tooltip } from "@plane/ui";
+
+type TIssueLabelPill = { name?: string; color?: string };
+
+export const LabelActivityChip: FC<TIssueLabelPill> = (props) => {
+  const { name, color } = props;
+  return (
+    <Tooltip tooltipContent={name}>
+      <span className="inline-flex w-min max-w-32 cursor-default flex-shrink-0 items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+        <span
+          className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: color ?? "#000000",
+          }}
+          aria-hidden="true"
+        />
+        <span className="flex-shrink truncate font-medium text-custom-text-100">{name}</span>
+      </span>
+    </Tooltip>
+  );
+};
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx b/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
index a88f634c4..023171ce0 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
@@ -4,7 +4,7 @@ import { Tag } from "lucide-react";
 // hooks
 import { useIssueDetail, useLabel } from "@/hooks/store";
 // components
-import { IssueActivityBlockComponent, IssueLink } from "./";
+import { IssueActivityBlockComponent, IssueLink, LabelActivityChip } from "./";
 
 type TIssueLabelActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
@@ -27,29 +27,14 @@ export const IssueLabelActivity: FC<TIssueLabelActivity> = observer((props) => {
     >
       <>
         {activity.old_value === "" ? `added a new label ` : `removed the label `}
-        {activity.old_value === "" ? (
-          <span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
-            <span
-              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-              style={{
-                backgroundColor: projectLabels?.find((l) => l.id === activity.new_identifier)?.color ?? "#000000",
-              }}
-              aria-hidden="true"
-            />
-            <span className="flex-shrink truncate font-medium text-custom-text-100">{activity.new_value}</span>
-          </span>
-        ) : (
-          <span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
-            <span
-              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-              style={{
-                backgroundColor: projectLabels?.find((l) => l.id === activity.old_identifier)?.color ?? "#000000",
-              }}
-              aria-hidden="true"
-            />
-            <span className="flex-shrink truncate font-medium text-custom-text-100">{activity.old_value}</span>
-          </span>
-        )}
+        <LabelActivityChip
+          name={activity.old_value === "" ? activity.new_value : activity.old_value}
+          color={
+            activity.old_value === ""
+              ? projectLabels?.find((l) => l.id === activity.new_identifier)?.color
+              : projectLabels?.find((l) => l.id === activity.old_identifier)?.color
+          }
+        />
         {showIssue && (activity.old_value === "" ? ` to ` : ` from `)}
         {showIssue && <IssueLink activityId={activityId} />}
       </>