diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx index 7f5741037..80ad522a6 100644 --- a/apps/app/components/core/list-view/single-issue.tsx +++ b/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 = ({ {properties.key && ( - - {issue.project_detail?.identifier}-{issue.sequence_id} - + + + {issue.project_detail?.identifier}-{issue.sequence_id} + + )} - {issue.name} + + + {issue.name} + + diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx index 130c777af..7de7f82a2 100644 --- a/apps/app/components/issues/my-issues-list-item.tsx +++ b/apps/app/components/issues/my-issues-list-item.tsx @@ -82,7 +82,9 @@ export const MyIssuesListItem: React.FC = ({ {issue.project_detail?.identifier}-{issue.sequence_id} )} - {issue.name} + + {issue.name} + diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx index 54d667841..daae990b8 100644 --- a/apps/app/components/issues/view-select/assignee.tsx +++ b/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,13 +56,26 @@ export const ViewAssigneeSelect: React.FC = ({ {({ open }) => (
-
0 + ? issue.assignee_details + .map((assingee) => + assingee.first_name !== "" ? assingee.first_name : assingee.email + ) + .toString() + : "No Assignee" + } > - -
+
+ +
+
= ({ issue, partialUpdateIssue, isNotAllowed }) => ( -
- - partialUpdateIssue({ - target_date: val, - }) - } - className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"} - disabled={isNotAllowed} - /> -
+ +
+ + partialUpdateIssue({ + target_date: val, + }) + } + className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"} + disabled={isNotAllowed} + /> +
+
); diff --git a/apps/app/components/issues/view-select/priority.tsx b/apps/app/components/issues/view-select/priority.tsx index 096d6e93f..5e4dae007 100644 --- a/apps/app/components/issues/view-select/priority.tsx +++ b/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 = ({ }) => ( - {getPriorityIcon( - issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None", - "text-sm" - )} - + + + {getPriorityIcon( + issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None", + "text-sm" + )} + + } value={issue.state} onChange={(data: string) => { diff --git a/apps/app/components/issues/view-select/state.tsx b/apps/app/components/issues/view-select/state.tsx index b6bac7a0b..0f516f2c9 100644 --- a/apps/app/components/issues/view-select/state.tsx +++ b/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 = ({ backgroundColor: states?.find((s) => s.id === issue.state)?.color, }} /> - {addSpaceIfCamelCase(states?.find((s) => s.id === issue.state)?.name ?? "")} + s.id === issue.state)?.name ?? "" + )} + > + + {addSpaceIfCamelCase(states?.find((s) => s.id === issue.state)?.name ?? "")} + + } value={issue.state} diff --git a/apps/app/components/states/single-state.tsx b/apps/app/components/states/single-state.tsx index d51684275..e6ddce350 100644 --- a/apps/app/components/states/single-state.tsx +++ b/apps/app/components/states/single-state.tsx @@ -184,16 +184,18 @@ export const SingleState: React.FC = ({ Set as default )} - - - + + + diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx index 9d7e83700..4726ca835 100644 --- a/apps/app/components/ui/avatar.tsx +++ b/apps/app/components/ui/avatar.tsx @@ -18,7 +18,7 @@ type AvatarProps = { }; export const Avatar: React.FC = ({ user, index }) => ( -
+
{user && user.avatar && user.avatar !== "" ? (
= ({ - 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 ( -
- {children} - {active && ( -
- {content} + + {tooltipHeading ? ( + <> +
{tooltipHeading}
+

{tooltipContent}

+ + ) : ( +

{tooltipContent}

+ )}
- )} -
+ } + position={position} + renderTarget={({ isOpen: isTooltipOpen, ref: eleRefernce, ...tooltipProps }) => + React.cloneElement(children, { ref: eleRefernce, ...tooltipProps, ...children.props }) + } + /> ); }; diff --git a/apps/app/package.json b/apps/app/package.json index 21026735e..634e69e4b 100644 --- a/apps/app/package.json +++ b/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",