feat: issues tooltip , fix: ui improvement (#317)

* fix: ellipsis added to issue title

* feat: toolttip added

* feat: assignees tooltip added

* fix: build fix

apps/app/components/core/list-view/single-issue.tsx

@@ -16,8 +16,10 @@ import {
   ViewPrioritySelect,
   ViewStateSelect,
 } from "components/issues/view-select";
+import { Tooltip2 } from "@blueprintjs/popover2";
+
 // ui
-import { CustomMenu } from "components/ui";
+import { Tooltip, CustomMenu } from "components/ui";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
@@ -151,11 +153,20 @@ export const SingleListIssue: React.FC<Props> = ({
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
           <a className="group relative flex items-center gap-2">
             {properties.key && (
+              <Tooltip
+                tooltipHeading="ID"
+                tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
+              >
                 <span className="flex-shrink-0 text-xs text-gray-500">
                   {issue.project_detail?.identifier}-{issue.sequence_id}
                 </span>
+              </Tooltip>
             )}
-            <span>{issue.name}</span>
+            <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+              <span className="w-auto max-w-lg text-ellipsis overflow-hidden whitespace-nowrap">
+                {issue.name}
+              </span>
+            </Tooltip>
           </a>
         </Link>
       </div>

apps/app/components/issues/my-issues-list-item.tsx

@@ -82,7 +82,9 @@ export const MyIssuesListItem: React.FC<Props> = ({
                 {issue.project_detail?.identifier}-{issue.sequence_id}
               </span>
             )}
-            <span>{issue.name}</span>
+            <span className="w-[275px] md:w-[450px] lg:w-[600px] text-ellipsis overflow-hidden whitespace-nowrap">
+              {issue.name}
+            </span>
           </a>
         </Link>
       </div>

apps/app/components/issues/view-select/assignee.tsx

@@ -9,7 +9,7 @@ import { Listbox, Transition } from "@headlessui/react";
 // services
 import projectService from "services/project.service";
 // ui
-import { AssigneesList, Avatar } from "components/ui";
+import { AssigneesList, Avatar, Tooltip } from "components/ui";
 // types
 import { IIssue } from "types";
 // fetch-keys
@@ -56,6 +56,18 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
       {({ open }) => (
         <div>
           <Listbox.Button>
+            <Tooltip
+              tooltipHeading="Assignee"
+              tooltipContent={
+                issue.assignee_details.length > 0
+                  ? issue.assignee_details
+                      .map((assingee) =>
+                        assingee.first_name !== "" ? assingee.first_name : assingee.email
+                      )
+                      .toString()
+                  : "No Assignee"
+              }
+            >
               <div
                 className={`flex ${
                   isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
@@ -63,6 +75,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
               >
                 <AssigneesList userIds={issue.assignees ?? []} />
               </div>
+            </Tooltip>
           </Listbox.Button>
 
           <Transition

apps/app/components/issues/view-select/due-date.tsx

@@ -1,5 +1,5 @@
 // ui
-import { CustomDatePicker } from "components/ui";
+import { CustomDatePicker, Tooltip } from "components/ui";
 // helpers
 import { findHowManyDaysLeft } from "helpers/date-time.helper";
 // types
@@ -12,6 +12,7 @@ type Props = {
 };
 
 export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue, isNotAllowed }) => (
+  <Tooltip tooltipHeading="Due Date" tooltipContent={issue.target_date ?? "N/A"}>
     <div
       className={`group relative ${
         issue.target_date === null
@@ -33,4 +34,5 @@ export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue,
         disabled={isNotAllowed}
       />
     </div>
+  </Tooltip>
 );

apps/app/components/issues/view-select/priority.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect, Tooltip } from "components/ui";
 // icons
 import { getPriorityIcon } from "components/icons/priority-icon";
 // types
@@ -24,12 +24,14 @@ export const ViewPrioritySelect: React.FC<Props> = ({
 }) => (
   <CustomSelect
     label={
+      <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
         <span>
           {getPriorityIcon(
             issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
             "text-sm"
           )}
         </span>
+      </Tooltip>
     }
     value={issue.state}
     onChange={(data: string) => {

apps/app/components/issues/view-select/state.tsx

@@ -5,7 +5,7 @@ import useSWR from "swr";
 // services
 import stateService from "services/state.service";
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect, Tooltip } from "components/ui";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 import { getStatesList } from "helpers/state.helper";
@@ -48,7 +48,16 @@ export const ViewStateSelect: React.FC<Props> = ({
               backgroundColor: states?.find((s) => s.id === issue.state)?.color,
             }}
           />
+          <Tooltip
+            tooltipHeading="State"
+            tooltipContent={addSpaceIfCamelCase(
+              states?.find((s) => s.id === issue.state)?.name ?? ""
+            )}
+          >
+            <span>
               {addSpaceIfCamelCase(states?.find((s) => s.id === issue.state)?.name ?? "")}
+            </span>
+          </Tooltip>
         </>
       }
       value={issue.state}

apps/app/components/states/single-state.tsx

@@ -184,16 +184,18 @@ export const SingleState: React.FC<Props> = ({
             Set as default
           </button>
         )}
-        <Tooltip content="Cannot delete the default state." disabled={!state.default}>
+
         <button
           type="button"
           className={`${state.default ? "cursor-not-allowed" : ""} grid place-items-center`}
           onClick={handleDeleteState}
           disabled={state.default}
         >
+          <Tooltip tooltipContent="Cannot delete the default state." disabled={!state.default}>
             <TrashIcon className="h-4 w-4 text-red-400" />
-          </button>
           </Tooltip>
+        </button>
+
         <button type="button" className="grid place-items-center" onClick={handleEditState}>
           <PencilSquareIcon className="h-4 w-4 text-gray-400" />
         </button>

apps/app/components/ui/avatar.tsx

@@ -18,7 +18,7 @@ type AvatarProps = {
 };
 
 export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
-  <div className={`relative z-[1] h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-2.5" : ""}`}>
+  <div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-2.5" : ""}`}>
     {user && user.avatar && user.avatar !== "" ? (
       <div
         className={`h-5 w-5 rounded-full border-2 ${

apps/app/components/ui/tooltip.tsx

@@ -1,66 +1,40 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
+import { Tooltip2 } from "@blueprintjs/popover2";
 
 export type Props = {
-  direction?: "top" | "right" | "bottom" | "left";
-  content: string | React.ReactNode;
-  margin?: string;
-  children: React.ReactNode;
-  className?: string;
+  tooltipHeading?: string;
+  tooltipContent: string;
+  position?: "top" | "right" | "bottom" | "left";
+  children: JSX.Element;
   disabled?: boolean;
 };
 
 export const Tooltip: React.FC<Props> = ({
-  content,
-  direction = "top",
+  tooltipHeading,
+  tooltipContent,
+  position = "top",
   children,
-  margin = "24px",
-  className = "",
   disabled = false,
 }) => {
-  const [active, setActive] = useState(false);
-  const [styleConfig, setStyleConfig] = useState(`top-[calc(-100%-${margin})]`);
-  let timeout: any;
-
-  const showToolTip = () => {
-    timeout = setTimeout(() => {
-      setActive(true);
-    }, 300);
-  };
-
-  const hideToolTip = () => {
-    clearInterval(timeout);
-    setActive(false);
-  };
-
-  const tooltipStyles = {
-    top: "left-[50%] translate-x-[-50%] before:contents-[''] before:border-solid before:border-transparent before:h-0 before:w-0 before:absolute before:pointer-events-none before:border-[6px] before:left-[50%] before:ml-[calc(6px*-1)] before:top-full before:border-t-black",
-
-    right: "right-[-100%] top-[50%] translate-x-0 translate-y-[-50%]",
-
-    bottom:
-      "left-[50%] translate-x-[-50%] before:contents-[''] before:border-solid before:border-transparent before:h-0 before:w-0 before:absolute before:pointer-events-none before:border-[6px] before:left-[50%] before:ml-[calc(6px*-1)] before:bottom-full before:border-b-black",
-
-    left: "left-[-100%] top-[50%] translate-x-0 translate-y-[-50%]",
-  };
-
-  useEffect(() => {
-    const styleConfig = `${direction}-[calc(-100%-${margin})]`;
-    setStyleConfig(styleConfig);
-  }, [margin, direction]);
-
   return (
-    <div className="relative inline-block" onMouseEnter={showToolTip} onMouseLeave={hideToolTip}>
-      {children}
-      {active && (
-        <div
-          className={`${className} ${
-            disabled ? "hidden" : ""
-          } absolute p-[6px] text-xs z-20 rounded leading-1 text-white bg-black text-center w-max max-w-[300px] 
-          ${tooltipStyles[direction]} ${styleConfig}`}
-        >
-          {content}
-        </div>
+    <Tooltip2
+      disabled={disabled}
+      content={
+        <div className="flex flex-col justify-center items-start gap-1 max-w-[600px] text-xs rounded-md bg-white p-2 shadow-md capitalize text-left">
+          {tooltipHeading ? (
+            <>
+              <h5 className="font-medium">{tooltipHeading}</h5>
+              <p className="text-gray-700">{tooltipContent}</p>
+            </>
+          ) : (
+            <p className="text-gray-700">{tooltipContent}</p>
           )}
         </div>
+      }
+      position={position}
+      renderTarget={({ isOpen: isTooltipOpen, ref: eleRefernce, ...tooltipProps }) =>
+        React.cloneElement(children, { ref: eleRefernce, ...tooltipProps, ...children.props })
+      }
+    />
   );
 };

apps/app/package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@blueprintjs/core": "^4.16.3",
+    "@blueprintjs/popover2": "^1.13.3",
     "@headlessui/react": "^1.7.3",
     "@heroicons/react": "^2.0.12",
     "@remirror/core": "^2.0.11",
@@ -46,8 +48,8 @@
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
     "autoprefixer": "^10.4.7",
-    "eslint-config-custom": "*",
     "eslint": "^8.31.0",
+    "eslint-config-custom": "*",
     "eslint-config-next": "12.2.2",
     "postcss": "^8.4.14",
     "tailwindcss": "^3.1.6",