From f2733ab4df6b7545a93fbc2f967235ca0b1d848d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 16 Jul 2024 15:57:14 +0530
Subject: [PATCH] fix: issue detail widget user role permission added (#5131)

---
 .../issue-detail-widgets/action-buttons.tsx     | 17 ++++++++++++-----
 .../issue-detail-widgets/attachments/title.tsx  | 14 ++++++++------
 .../issues/issue-detail-widgets/links/title.tsx |  2 +-
 .../issue-detail-widgets/relations/title.tsx    |  2 +-
 .../issue-detail-widgets/sub-issues/title.tsx   |  2 +-
 .../issue-detail-widgets/widget-button.tsx      | 17 ++++++++++++++---
 6 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/web/core/components/issues/issue-detail-widgets/action-buttons.tsx b/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
index e69aecae3..b5f1515ec 100644
--- a/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
+++ b/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
@@ -23,30 +23,35 @@ export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
     <div className="flex items-center flex-wrap gap-2">
       <SubIssuesActionButton
         issueId={issueId}
-        disabled={disabled}
         customButton={
           <IssueDetailWidgetButton
             title="Add sub-issues"
-            icon={<Layers className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-300" strokeWidth={2} />}
+            icon={<Layers className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
+            disabled={disabled}
           />
         }
+        disabled={disabled}
       />
       <RelationActionButton
         issueId={issueId}
         customButton={
           <IssueDetailWidgetButton
             title="Add Relation"
-            icon={<Waypoints className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-300" strokeWidth={2} />}
+            icon={<Waypoints className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
+            disabled={disabled}
           />
         }
+        disabled={disabled}
       />
       <IssueLinksActionButton
         customButton={
           <IssueDetailWidgetButton
             title="Add Links"
-            icon={<Link className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-300" strokeWidth={2} />}
+            icon={<Link className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
+            disabled={disabled}
           />
         }
+        disabled={disabled}
       />
       <IssueAttachmentActionButton
         workspaceSlug={workspaceSlug}
@@ -55,9 +60,11 @@ export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
         customButton={
           <IssueDetailWidgetButton
             title="Attach"
-            icon={<Paperclip className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-300" strokeWidth={2} />}
+            icon={<Paperclip className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
+            disabled={disabled}
           />
         }
+        disabled={disabled}
       />
     </div>
   );
diff --git a/web/core/components/issues/issue-detail-widgets/attachments/title.tsx b/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
index 077ed6131..ce83f6826 100644
--- a/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
+++ b/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
@@ -42,12 +42,14 @@ export const IssueAttachmentsCollapsibleTitle: FC<Props> = observer((props) => {
       title="Attachments"
       indicatorElement={indicatorElement}
       actionItemElement={
-        <IssueAttachmentActionButton
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          issueId={issueId}
-          disabled={disabled}
-        />
+        !disabled && (
+          <IssueAttachmentActionButton
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            issueId={issueId}
+            disabled={disabled}
+          />
+        )
       }
     />
   );
diff --git a/web/core/components/issues/issue-detail-widgets/links/title.tsx b/web/core/components/issues/issue-detail-widgets/links/title.tsx
index a15406020..1e01ee198 100644
--- a/web/core/components/issues/issue-detail-widgets/links/title.tsx
+++ b/web/core/components/issues/issue-detail-widgets/links/title.tsx
@@ -40,7 +40,7 @@ export const IssueLinksCollapsibleTitle: FC<Props> = observer((props) => {
       isOpen={isOpen}
       title="Links"
       indicatorElement={indicatorElement}
-      actionItemElement={<IssueLinksActionButton disabled={disabled} />}
+      actionItemElement={!disabled && <IssueLinksActionButton disabled={disabled} />}
     />
   );
 });
diff --git a/web/core/components/issues/issue-detail-widgets/relations/title.tsx b/web/core/components/issues/issue-detail-widgets/relations/title.tsx
index f4bcbd0e6..8c6de6df8 100644
--- a/web/core/components/issues/issue-detail-widgets/relations/title.tsx
+++ b/web/core/components/issues/issue-detail-widgets/relations/title.tsx
@@ -39,7 +39,7 @@ export const RelationsCollapsibleTitle: FC<Props> = observer((props) => {
       isOpen={isOpen}
       title="Relations"
       indicatorElement={indicatorElement}
-      actionItemElement={<RelationActionButton issueId={issueId} disabled={disabled} />}
+      actionItemElement={!disabled && <RelationActionButton issueId={issueId} disabled={disabled} />}
     />
   );
 });
diff --git a/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx b/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
index 4e40a7b61..b3d9bf1fc 100644
--- a/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
+++ b/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
@@ -50,7 +50,7 @@ export const SubIssuesCollapsibleTitle: FC<Props> = observer((props) => {
       isOpen={isOpen}
       title="Sub-issues"
       indicatorElement={indicatorElement}
-      actionItemElement={<SubIssuesActionButton issueId={parentIssueId} disabled={disabled} />}
+      actionItemElement={!disabled && <SubIssuesActionButton issueId={parentIssueId} disabled={disabled} />}
     />
   );
 });
diff --git a/web/core/components/issues/issue-detail-widgets/widget-button.tsx b/web/core/components/issues/issue-detail-widgets/widget-button.tsx
index 8c36140f0..a683920e9 100644
--- a/web/core/components/issues/issue-detail-widgets/widget-button.tsx
+++ b/web/core/components/issues/issue-detail-widgets/widget-button.tsx
@@ -1,17 +1,28 @@
 "use client";
 import React, { FC } from "react";
+// helpers
+import { cn } from "@/helpers/common.helper";
 
 type Props = {
   icon: JSX.Element;
   title: string;
+  disabled?: boolean;
 };
 
 export const IssueDetailWidgetButton: FC<Props> = (props) => {
-  const { icon, title } = props;
+  const { icon, title, disabled = false } = props;
   return (
-    <div className="h-full w-min whitespace-nowrap flex items-center gap-2 border border-custom-border-200 hover:bg-custom-background-80 rounded px-3 py-1.5">
+    <div
+      className={cn(
+        "h-full w-min whitespace-nowrap flex items-center gap-2 border border-custom-border-200 rounded px-3 py-1.5",
+        {
+          "cursor-not-allowed text-custom-text-400 bg-custom-background-90": disabled,
+          "cursor-pointer text-custom-text-300 hover:bg-custom-background-80": !disabled,
+        }
+      )}
+    >
       {icon && icon}
-      <span className="text-sm font-medium text-custom-text-300">{title}</span>
+      <span className="text-sm font-medium">{title}</span>
     </div>
   );
 };