chore: add tooltips to issue properties with no value (#3169)

* chore: add tolltips to properties with no value

* chore: update property types

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

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

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;
+  value: string | null;
-  onChange: (date: any) => void;
+  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 ${
+              className="border-none outline-none"
-                disabled
-                  ? "pointer-events-none cursor-not-allowed text-custom-text-200"
-                  : "cursor-pointer hover:bg-custom-background-80"
-              }`}
               onClick={(e) => e.stopPropagation()}
             >
-              <div className="flex items-center justify-center gap-2 overflow-hidden">
+              <Tooltip
-                <dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
+                tooltipHeading={dateOptionDetails.placeholder}
-                {value && (
+                tooltipContent={value ? renderFormattedDate(value) : "None"}
-                  <>
+              >
-                    <Tooltip tooltipHeading={dateOptionDetails.placeholder} tooltipContent={value ?? "None"}>
+                <div
-                      <div className="text-xs">{value}</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 ${
-                    </Tooltip>
+                    disabled
-
+                      ? "pointer-events-none cursor-not-allowed text-custom-text-200"
-                    <div
+                      : "cursor-pointer hover:bg-custom-background-80"
-                      className="flex flex-shrink-0 items-center justify-center"
+                  }`}
-                      onClick={() => {
+                >
-                        if (onChange) onChange(null);
+                  <div className="flex items-center justify-center gap-2 overflow-hidden">
-                      }}
+                    <dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
-                    >
+                    {value && (
-                      <X className="h-2.5 w-2.5" strokeWidth={2} />
+                      <>
-                    </div>
+                        <div className="text-xs">{value}</div>
-                  </>
+                        <div
-                )}
+                          className="flex flex-shrink-0 items-center justify-center"
-              </div>
+                          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));

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
+        <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
-          className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
+          <div
-            noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
+            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}
+            <Tags className="h-3.5 w-3.5" strokeWidth={2} />
-        </div>
+            {placeholderText}
+          </div>
+        </Tooltip>
       )}
     </div>
   );