style: issue label ui updated (#1653)

* style: issue label ui updated

* chore: code refactor

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
+              <ViewIssueLabel issue={issue} maxRender={2} />
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                isNotAllowed={isNotAllowed}
-                user={user}
-                selfPositioned
-              />
             )}
             {properties.assignee && (
               <ViewAssigneeSelect

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 && (
+          {properties.labels && <ViewIssueLabel issue={issue} maxRender={3} />}
-            <ViewLabelSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              position="right"
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
           {properties.assignee && (
             <ViewAssigneeSelect
               issue={issue}

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
+          <ViewIssueLabel issue={issue} maxRender={1} />
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            position="left"
-            tooltipPosition={tooltipPosition}
-            customButton
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
         </div>
       )}
 

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";

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>
+      )
+    ) : (
+      ""
+    )}
+  </>
+);