From fc92d7d1a01851a739daeeabe6ee170fecf6e615 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 18 Jul 2023 18:47:28 +0530
Subject: [PATCH] chore: hide issue properties if there are none (#1554)

---
 apps/app/components/core/board-view/single-issue.tsx | 12 ++++++------
 .../components/core/calendar-view/single-issue.tsx   | 12 ++++++------
 apps/app/components/core/list-view/single-issue.tsx  | 12 ++++++------
 apps/app/components/issues/my-issues-list-item.tsx   | 12 +++++-------
 apps/app/pages/[workspaceSlug]/me/my-issues.tsx      |  3 ++-
 5 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index e532a200e77..bd87dde6cbb 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -356,7 +356,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 selfPositioned
               />
             )}
-            {properties.due_date && (
+            {properties.due_date && issue.target_date && (
               <ViewDueDateSelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
@@ -364,7 +364,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 isNotAllowed={isNotAllowed}
               />
             )}
-            {properties.labels && (
+            {properties.labels && issue.labels.length > 0 && (
               <ViewLabelSelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
@@ -382,7 +382,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 selfPositioned
               />
             )}
-            {properties.estimate && (
+            {properties.estimate && issue.estimate_point !== null && (
               <ViewEstimateSelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
@@ -391,7 +391,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 selfPositioned
               />
             )}
-            {properties.sub_issue_count && (
+            {properties.sub_issue_count && issue.sub_issues_count > 0 && (
               <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
                   <div className="flex items-center gap-1 text-custom-text-200">
@@ -401,7 +401,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 </Tooltip>
               </div>
             )}
-            {properties.link && (
+            {properties.link && issue.link_count > 0 && (
               <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
                   <div className="flex items-center gap-1 text-custom-text-200">
@@ -411,7 +411,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 </Tooltip>
               </div>
             )}
-            {properties.attachment_count && (
+            {properties.attachment_count && issue.attachment_count > 0 && (
               <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
                   <div className="flex items-center gap-1 text-custom-text-200">
diff --git a/apps/app/components/core/calendar-view/single-issue.tsx b/apps/app/components/core/calendar-view/single-issue.tsx
index 258676411a5..9a22a9a595b 100644
--- a/apps/app/components/core/calendar-view/single-issue.tsx
+++ b/apps/app/components/core/calendar-view/single-issue.tsx
@@ -231,7 +231,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
               />
             )}
 
-            {properties.due_date && (
+            {properties.due_date && issue.target_date && (
               <ViewDueDateSelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
@@ -239,7 +239,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                 isNotAllowed={isNotAllowed}
               />
             )}
-            {properties.labels && (
+            {properties.labels && issue.labels.length > 0 && (
               <ViewLabelSelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
@@ -257,7 +257,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                 isNotAllowed={isNotAllowed}
               />
             )}
-            {properties.estimate && (
+            {properties.estimate && issue.estimate_point !== null && (
               <ViewEstimateSelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
@@ -266,7 +266,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                 isNotAllowed={isNotAllowed}
               />
             )}
-            {properties.sub_issue_count && (
+            {properties.sub_issue_count && issue.sub_issues_count > 0 && (
               <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
                   <div className="flex items-center gap-1 text-custom-text-200">
@@ -276,7 +276,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                 </Tooltip>
               </div>
             )}
-            {properties.link && (
+            {properties.link && issue.link_count > 0 && (
               <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
                   <div className="flex items-center gap-1 text-custom-text-200">
@@ -286,7 +286,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                 </Tooltip>
               </div>
             )}
-            {properties.attachment_count && (
+            {properties.attachment_count && issue.attachment_count > 0 && (
               <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
                   <div className="flex items-center gap-1 text-custom-text-200">
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index b810ac2a909..7e397fb7415 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -271,7 +271,7 @@ export const SingleListIssue: React.FC<Props> = ({
               isNotAllowed={isNotAllowed}
             />
           )}
-          {properties.due_date && (
+          {properties.due_date && issue.target_date && (
             <ViewDueDateSelect
               issue={issue}
               partialUpdateIssue={partialUpdateIssue}
@@ -279,7 +279,7 @@ export const SingleListIssue: React.FC<Props> = ({
               isNotAllowed={isNotAllowed}
             />
           )}
-          {properties.labels && (
+          {properties.labels && issue.labels.length > 0 && (
             <ViewLabelSelect
               issue={issue}
               partialUpdateIssue={partialUpdateIssue}
@@ -297,7 +297,7 @@ export const SingleListIssue: React.FC<Props> = ({
               isNotAllowed={isNotAllowed}
             />
           )}
-          {properties.estimate && (
+          {properties.estimate && issue.estimate_point !== null && (
             <ViewEstimateSelect
               issue={issue}
               partialUpdateIssue={partialUpdateIssue}
@@ -306,7 +306,7 @@ export const SingleListIssue: React.FC<Props> = ({
               isNotAllowed={isNotAllowed}
             />
           )}
-          {properties.sub_issue_count && (
+          {properties.sub_issue_count && issue.sub_issues_count > 0 && (
             <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
@@ -316,7 +316,7 @@ export const SingleListIssue: React.FC<Props> = ({
               </Tooltip>
             </div>
           )}
-          {properties.link && (
+          {properties.link && issue.link_count > 0 && (
             <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
@@ -326,7 +326,7 @@ export const SingleListIssue: React.FC<Props> = ({
               </Tooltip>
             </div>
           )}
-          {properties.attachment_count && (
+          {properties.attachment_count && issue.attachment_count > 0 && (
             <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
index 806cc7e1dc4..e4eb4f82a83 100644
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -126,7 +126,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               isNotAllowed={isNotAllowed}
             />
           )}
-          {properties.due_date && (
+          {properties.due_date && issue.target_date && (
             <ViewDueDateSelect
               issue={issue}
               partialUpdateIssue={partialUpdateIssue}
@@ -134,7 +134,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               isNotAllowed={isNotAllowed}
             />
           )}
-          {properties.labels && issue.label_details.length > 0 ? (
+          {properties.labels && issue.labels.length > 0 && (
             <div className="flex flex-wrap gap-1">
               {issue.label_details.map((label) => (
                 <span
@@ -151,8 +151,6 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
                 </span>
               ))}
             </div>
-          ) : (
-            ""
           )}
           {properties.assignee && (
             <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm">
@@ -175,7 +173,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               </Tooltip>
             </div>
           )}
-          {properties.sub_issue_count && (
+          {properties.sub_issue_count && issue.sub_issues_count > 0 && (
             <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
@@ -185,7 +183,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               </Tooltip>
             </div>
           )}
-          {properties.link && (
+          {properties.link && issue.link_count > 0 && (
             <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
@@ -195,7 +193,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               </Tooltip>
             </div>
           )}
-          {properties.attachment_count && (
+          {properties.attachment_count && issue.attachment_count > 0 && (
             <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
diff --git a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
index 1e79140896f..08e849d2e5f 100644
--- a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
@@ -72,7 +72,8 @@ const MyIssuesPage: NextPage = () => {
                         <h4 className="text-sm text-custom-text-200">Properties</h4>
                         <div className="flex flex-wrap items-center gap-2">
                           {Object.keys(properties).map((key) => {
-                            if (key === "estimate") return null;
+                            if (key === "estimate" || key === "created_on" || key === "updated_on")
+                              return null;
 
                             return (
                               <button