From bc076e69f792dd85f4798f773c6a2ebc17bdea74 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 25 Jul 2023 12:07:16 +0530
Subject: [PATCH] style: issue label ui updated (#1653)

* style: issue label ui updated

* chore: code refactor
---
 .../core/board-view/single-issue.tsx          | 10 +---
 .../core/list-view/single-issue.tsx           | 14 +----
 .../core/spreadsheet-view/single-issue.tsx    | 12 +---
 apps/app/components/issues/index.ts           |  1 +
 apps/app/components/issues/label.tsx          | 55 +++++++++++++++++++
 5 files changed, 63 insertions(+), 29 deletions(-)
 create mode 100644 apps/app/components/issues/label.tsx

diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index bd87dde6c..bab90c537 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -23,7 +23,7 @@ import {
   ViewAssigneeSelect,
   ViewDueDateSelect,
   ViewEstimateSelect,
-  ViewLabelSelect,
+  ViewIssueLabel,
   ViewPrioritySelect,
   ViewStateSelect,
 } from "components/issues";
@@ -365,13 +365,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               />
             )}
             {properties.labels && issue.labels.length > 0 && (
-              <ViewLabelSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                isNotAllowed={isNotAllowed}
-                user={user}
-                selfPositioned
-              />
+              <ViewIssueLabel issue={issue} maxRender={2} />
             )}
             {properties.assignee && (
               <ViewAssigneeSelect
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index 7e397fb74..77b67945d 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -14,10 +14,10 @@ import {
   ViewAssigneeSelect,
   ViewDueDateSelect,
   ViewEstimateSelect,
-  ViewLabelSelect,
+  ViewIssueLabel,
   ViewPrioritySelect,
   ViewStateSelect,
-} from "components/issues/view-select";
+} from "components/issues";
 // hooks
 import useIssueView from "hooks/use-issues-view";
 // ui
@@ -279,15 +279,7 @@ export const SingleListIssue: React.FC<Props> = ({
               isNotAllowed={isNotAllowed}
             />
           )}
-          {properties.labels && issue.labels.length > 0 && (
-            <ViewLabelSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              position="right"
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
+          {properties.labels && <ViewIssueLabel issue={issue} maxRender={3} />}
           {properties.assignee && (
             <ViewAssigneeSelect
               issue={issue}
diff --git a/apps/app/components/core/spreadsheet-view/single-issue.tsx b/apps/app/components/core/spreadsheet-view/single-issue.tsx
index e85814ea7..bd2d5d101 100644
--- a/apps/app/components/core/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/spreadsheet-view/single-issue.tsx
@@ -10,7 +10,7 @@ import {
   ViewAssigneeSelect,
   ViewDueDateSelect,
   ViewEstimateSelect,
-  ViewLabelSelect,
+  ViewIssueLabel,
   ViewPrioritySelect,
   ViewStateSelect,
 } from "components/issues";
@@ -311,15 +311,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
       )}
       {properties.labels && (
         <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewLabelSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            position="left"
-            tooltipPosition={tooltipPosition}
-            customButton
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
+          <ViewIssueLabel issue={issue} maxRender={1} />
         </div>
       )}
 
diff --git a/apps/app/components/issues/index.ts b/apps/app/components/issues/index.ts
index 0ac13c992..7e9bff175 100644
--- a/apps/app/components/issues/index.ts
+++ b/apps/app/components/issues/index.ts
@@ -13,3 +13,4 @@ export * from "./my-issues-list-item";
 export * from "./parent-issues-list-modal";
 export * from "./sidebar";
 export * from "./sub-issues-list";
+export * from "./label";
diff --git a/apps/app/components/issues/label.tsx b/apps/app/components/issues/label.tsx
new file mode 100644
index 000000000..f3a7be9dd
--- /dev/null
+++ b/apps/app/components/issues/label.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+
+// components
+import { Tooltip } from "components/ui";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  maxRender?: number;
+};
+
+export const ViewIssueLabel: React.FC<Props> = ({ issue, maxRender = 1 }) => (
+  <>
+    {issue.label_details.length > 0 ? (
+      issue.label_details.length <= maxRender ? (
+        <>
+          {issue.label_details.map((label, index) => (
+            <div
+              key={label.id}
+              className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
+            >
+              <Tooltip position="top" tooltipHeading="Label" tooltipContent={label.name}>
+                <div className="flex items-center gap-1.5 text-custom-text-200">
+                  <span
+                    className="h-2 w-2 flex-shrink-0 rounded-full"
+                    style={{
+                      backgroundColor: label?.color ?? "#000000",
+                    }}
+                  />
+                  {label.name}
+                </div>
+              </Tooltip>
+            </div>
+          ))}
+        </>
+      ) : (
+        <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
+          <Tooltip
+            position="top"
+            tooltipHeading="Labels"
+            tooltipContent={issue.label_details.map((l) => l.name).join(", ")}
+          >
+            <div className="flex items-center gap-1.5 text-custom-text-200">
+              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+              {`${issue.label_details.length} Labels`}
+            </div>
+          </Tooltip>
+        </div>
+      )
+    ) : (
+      ""
+    )}
+  </>
+);