From 022a286eba75255c3cb4decb08eb29f6b91a2170 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 21 Feb 2024 18:19:49 +0530
Subject: [PATCH] [WEB-482] chore: issue sidebar improvement (#3733)

* chore: module-select dropdown improvement

* chore: issue sidebar subscription loader added

* chore: issue sidebar improvement

* fix: peek overview exception error
---
 web/components/dropdowns/module.tsx           |  4 +-
 .../issues/issue-detail/sidebar.tsx           | 32 ++++++------
 .../issues/issue-detail/subscription.tsx      | 50 +++++++++++--------
 .../issues/peek-overview/properties.tsx       |  2 +-
 4 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/web/components/dropdowns/module.tsx b/web/components/dropdowns/module.tsx
index 57b02ee56..63f4738a0 100644
--- a/web/components/dropdowns/module.tsx
+++ b/web/components/dropdowns/module.tsx
@@ -88,13 +88,13 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
             </div>
           </div>
         ) : value.length > 0 ? (
-          <div className="flex items-center gap-2 py-0.5 flex-wrap">
+          <div className="flex items-center gap-2 py-0.5 max-w-full flex-grow truncate flex-wrap">
             {value.map((moduleId) => {
               const moduleDetails = getModuleById(moduleId);
               return (
                 <div
                   key={moduleId}
-                  className="flex items-center gap-1 bg-custom-background-80 text-custom-text-200 rounded px-1.5 py-1"
+                  className="flex items-center gap-1 max-w-full bg-custom-background-80 text-custom-text-200 rounded px-1.5 py-1"
                 >
                   {!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />}
                   {!hideText && (
diff --git a/web/components/issues/issue-detail/sidebar.tsx b/web/components/issues/issue-detail/sidebar.tsx
index 1c93385c0..4a891fed2 100644
--- a/web/components/issues/issue-detail/sidebar.tsx
+++ b/web/components/issues/issue-detail/sidebar.tsx
@@ -133,7 +133,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
         <div className="h-full w-full overflow-y-auto px-5">
           <h5 className="text-sm font-medium mt-6">Properties</h5>
           {/* TODO: render properties using a common component */}
-          <div className={`mt-3 space-y-2 ${!is_editable ? "opacity-60" : ""}`}>
+          <div className={`mt-3 mb-2 space-y-2.5 ${!is_editable ? "opacity-60" : ""}`}>
             <div className="flex items-center gap-2 h-8">
               <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
                 <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
@@ -269,8 +269,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             )}
 
             {projectDetails?.module_view && (
-              <div className="flex items-center gap-2 min-h-8 h-full">
-                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex gap-2 min-h-8">
+                <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
                   <DiceIcon className="h-4 w-4 flex-shrink-0" />
                   <span>Module</span>
                 </div>
@@ -376,20 +376,20 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 disabled={!is_editable}
               />
             </div>
-          </div>
 
-          <div className="flex items-center gap-2 min-h-8 py-2">
-            <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
-              <Tag className="h-4 w-4 flex-shrink-0" />
-              <span>Labels</span>
-            </div>
-            <div className="w-3/5 flex-grow min-h-8 h-full">
-              <IssueLabel
-                workspaceSlug={workspaceSlug}
-                projectId={projectId}
-                issueId={issueId}
-                disabled={!is_editable}
-              />
+            <div className="flex gap-2 min-h-8">
+              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                <Tag className="h-4 w-4 flex-shrink-0" />
+                <span>Labels</span>
+              </div>
+              <div className="w-3/5 flex-grow min-h-8 h-full">
+                <IssueLabel
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  disabled={!is_editable}
+                />
+              </div>
             </div>
           </div>
 
diff --git a/web/components/issues/issue-detail/subscription.tsx b/web/components/issues/issue-detail/subscription.tsx
index 8d05140b3..ebd213dac 100644
--- a/web/components/issues/issue-detail/subscription.tsx
+++ b/web/components/issues/issue-detail/subscription.tsx
@@ -2,7 +2,7 @@ import { FC, useState } from "react";
 import { Bell, BellOff } from "lucide-react";
 import { observer } from "mobx-react-lite";
 // UI
-import { Button } from "@plane/ui";
+import { Button, Loader } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "hooks/store";
 import useToast from "hooks/use-toast";
@@ -49,24 +49,34 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
   };
 
   return (
-    <div>
-      <Button
-        size="sm"
-        prependIcon={subscription?.subscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
-        variant="outline-primary"
-        className="hover:!bg-custom-primary-100/20"
-        onClick={handleSubscription}
-      >
-        {loading ? (
-          <span>
-            <span className="hidden sm:block">Loading</span>...
-          </span>
-        ) : subscription?.subscribed ? (
-          <div className="hidden sm:block">Unsubscribe</div>
-        ) : (
-          <div className="hidden sm:block">Subscribe</div>
-        )}
-      </Button>
-    </div>
+    <>
+      {subscription ? (
+        <div>
+          <Button
+            size="sm"
+            prependIcon={subscription?.subscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
+            variant="outline-primary"
+            className="hover:!bg-custom-primary-100/20"
+            onClick={handleSubscription}
+          >
+            {loading ? (
+              <span>
+                <span className="hidden sm:block">Loading...</span>
+              </span>
+            ) : subscription?.subscribed ? (
+              <div className="hidden sm:block">Unsubscribe</div>
+            ) : (
+              <div className="hidden sm:block">Subscribe</div>
+            )}
+          </Button>
+        </div>
+      ) : (
+        <>
+          <Loader>
+            <Loader.Item height="28px" width="106px" />
+          </Loader>
+        </>
+      )}
+    </>
   );
 });
diff --git a/web/components/issues/peek-overview/properties.tsx b/web/components/issues/peek-overview/properties.tsx
index 7a241e070..10bba9f11 100644
--- a/web/components/issues/peek-overview/properties.tsx
+++ b/web/components/issues/peek-overview/properties.tsx
@@ -102,7 +102,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
             className="w-3/4 flex-grow group"
             buttonContainerClassName="w-full text-left"
-            buttonClassName={`text-sm justify-between ${issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"}`}
+            buttonClassName={`text-sm justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-custom-text-400"}`}
             hideIcon={issue.assignee_ids?.length === 0}
             dropdownArrow
             dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"