From 81256d63732562ef1ad37b04f387b398e04a0ed0 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 18 Dec 2023 15:17:38 +0530
Subject: [PATCH] chore: add tooltips to issue properties with no value (#3169)

* chore: add tolltips to properties with no value

* chore: update property types
---
 .../issue-layouts/kanban/properties.tsx       |  8 +--
 .../issues/issue-layouts/list/properties.tsx  |  8 +--
 .../issues/issue-layouts/properties/date.tsx  | 63 ++++++++++---------
 .../issue-layouts/properties/labels.tsx       | 20 +++---
 4 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx
index 788607690..9590c9068 100644
--- a/web/components/issues/issue-layouts/kanban/properties.tsx
+++ b/web/components/issues/issue-layouts/kanban/properties.tsx
@@ -57,7 +57,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
     );
   };
 
-  const handleStartDate = (date: string) => {
+  const handleStartDate = (date: string | null) => {
     handleIssues(
       !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
       !group_id && group_id === "null" ? null : group_id,
@@ -65,7 +65,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
     );
   };
 
-  const handleTargetDate = (date: string) => {
+  const handleTargetDate = (date: string | null) => {
     handleIssues(
       !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
       !group_id && group_id === "null" ? null : group_id,
@@ -122,7 +122,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       {displayProperties && displayProperties?.start_date && (
         <IssuePropertyDate
           value={issue?.start_date || null}
-          onChange={(date: string) => handleStartDate(date)}
+          onChange={(date) => handleStartDate(date)}
           disabled={isReadOnly}
           type="start_date"
         />
@@ -132,7 +132,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       {displayProperties && displayProperties?.due_date && (
         <IssuePropertyDate
           value={issue?.target_date || null}
-          onChange={(date: string) => handleTargetDate(date)}
+          onChange={(date) => handleTargetDate(date)}
           disabled={isReadOnly}
           type="target_date"
         />
diff --git a/web/components/issues/issue-layouts/list/properties.tsx b/web/components/issues/issue-layouts/list/properties.tsx
index 8b6f54010..eeff3b273 100644
--- a/web/components/issues/issue-layouts/list/properties.tsx
+++ b/web/components/issues/issue-layouts/list/properties.tsx
@@ -40,11 +40,11 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
     handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
   };
 
-  const handleStartDate = (date: string) => {
+  const handleStartDate = (date: string | null) => {
     handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
   };
 
-  const handleTargetDate = (date: string) => {
+  const handleTargetDate = (date: string | null) => {
     handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
   };
 
@@ -106,7 +106,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
       {displayProperties && displayProperties?.start_date && (
         <IssuePropertyDate
           value={issue?.start_date || null}
-          onChange={(date: string) => handleStartDate(date)}
+          onChange={(date) => handleStartDate(date)}
           disabled={isReadonly}
           type="start_date"
         />
@@ -116,7 +116,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
       {displayProperties && displayProperties?.due_date && (
         <IssuePropertyDate
           value={issue?.target_date || null}
-          onChange={(date: string) => handleTargetDate(date)}
+          onChange={(date) => handleTargetDate(date)}
           disabled={isReadonly}
           type="target_date"
         />
diff --git a/web/components/issues/issue-layouts/properties/date.tsx b/web/components/issues/issue-layouts/properties/date.tsx
index 9077c68d8..cfe3481e3 100644
--- a/web/components/issues/issue-layouts/properties/date.tsx
+++ b/web/components/issues/issue-layouts/properties/date.tsx
@@ -12,11 +12,11 @@ import { Tooltip } from "@plane/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // helpers
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderDateFormat, renderFormattedDate } from "helpers/date-time.helper";
 
 export interface IIssuePropertyDate {
-  value: any;
-  onChange: (date: any) => void;
+  value: string | null;
+  onChange: (date: string | null) => void;
   disabled?: boolean;
   type: "start_date" | "target_date";
 }
@@ -57,33 +57,40 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
           <>
             <Popover.Button
               as="button"
+              type="button"
               ref={dropdownBtn}
-              className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${
-                disabled
-                  ? "pointer-events-none cursor-not-allowed text-custom-text-200"
-                  : "cursor-pointer hover:bg-custom-background-80"
-              }`}
+              className="border-none outline-none"
               onClick={(e) => e.stopPropagation()}
             >
-              <div className="flex items-center justify-center gap-2 overflow-hidden">
-                <dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
-                {value && (
-                  <>
-                    <Tooltip tooltipHeading={dateOptionDetails.placeholder} tooltipContent={value ?? "None"}>
-                      <div className="text-xs">{value}</div>
-                    </Tooltip>
-
-                    <div
-                      className="flex flex-shrink-0 items-center justify-center"
-                      onClick={() => {
-                        if (onChange) onChange(null);
-                      }}
-                    >
-                      <X className="h-2.5 w-2.5" strokeWidth={2} />
-                    </div>
-                  </>
-                )}
-              </div>
+              <Tooltip
+                tooltipHeading={dateOptionDetails.placeholder}
+                tooltipContent={value ? renderFormattedDate(value) : "None"}
+              >
+                <div
+                  className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${
+                    disabled
+                      ? "pointer-events-none cursor-not-allowed text-custom-text-200"
+                      : "cursor-pointer hover:bg-custom-background-80"
+                  }`}
+                >
+                  <div className="flex items-center justify-center gap-2 overflow-hidden">
+                    <dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
+                    {value && (
+                      <>
+                        <div className="text-xs">{value}</div>
+                        <div
+                          className="flex flex-shrink-0 items-center justify-center"
+                          onClick={() => {
+                            if (onChange) onChange(null);
+                          }}
+                        >
+                          <X className="h-2.5 w-2.5" strokeWidth={2} />
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </Tooltip>
             </Popover.Button>
 
             <div className={`${open ? "fixed left-0 top-0 z-20 h-full w-full cursor-auto" : ""}`}>
@@ -94,7 +101,7 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
                 {({ close }) => (
                   <DatePicker
                     selected={value ? new Date(value) : new Date()}
-                    onChange={(val: any, e) => {
+                    onChange={(val, e) => {
                       e?.stopPropagation();
                       if (onChange && val) {
                         onChange(renderDateFormat(val));
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index a4bd54338..282268d7b 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -107,7 +107,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
             {projectLabels
               ?.filter((l) => value.includes(l.id))
               .map((label) => (
-                <Tooltip position="top" tooltipHeading="Labels" tooltipContent={label.name ?? ""}>
+                <Tooltip position="top" tooltipHeading="Label" tooltipContent={label.name ?? ""}>
                   <div
                     key={label.id}
                     className={`flex overflow-hidden hover:bg-custom-background-80 ${
@@ -145,14 +145,16 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
           </div>
         )
       ) : (
-        <div
-          className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
-            noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
-          }`}
-        >
-          <Tags className="h-3.5 w-3.5" strokeWidth={2} />
-          {placeholderText}
-        </div>
+        <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
+          <div
+            className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
+              noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
+            }`}
+          >
+            <Tags className="h-3.5 w-3.5" strokeWidth={2} />
+            {placeholderText}
+          </div>
+        </Tooltip>
       )}
     </div>
   );