From 0b02b57b8eedfc86c9137ef09be72789a7fcbf38 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Tue, 21 Feb 2023 13:13:43 +0530 Subject: [PATCH 1/4] fix: ellipsis added to issue title --- apps/app/components/core/list-view/single-issue.tsx | 4 +++- apps/app/components/issues/my-issues-list-item.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx index b2b74a94d70..0a050e6dee2 100644 --- a/apps/app/components/core/list-view/single-issue.tsx +++ b/apps/app/components/core/list-view/single-issue.tsx @@ -155,7 +155,9 @@ export const SingleListIssue: React.FC = ({ {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 130c777affe..7de7f82a213 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} + From 6927eae16e8da43810e394c97d3d5d2cdd06aa6e Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Tue, 21 Feb 2023 18:11:23 +0530 Subject: [PATCH 2/4] feat: toolttip added --- .../core/list-view/single-issue.tsx | 23 ++++-- .../issues/view-select/due-date.tsx | 46 ++++++----- .../issues/view-select/priority.tsx | 16 ++-- .../components/issues/view-select/state.tsx | 13 ++- apps/app/components/ui/tooltip.tsx | 81 ++++++------------- apps/app/package.json | 4 +- 6 files changed, 89 insertions(+), 94 deletions(-) diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx index 0a050e6dee2..1ee648cd9f4 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,13 +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/view-select/due-date.tsx b/apps/app/components/issues/view-select/due-date.tsx index 9033e95e3f2..b36ca6db085 100644 --- a/apps/app/components/issues/view-select/due-date.tsx +++ b/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,25 +12,27 @@ type Props = { }; export const ViewDueDateSelect: React.FC = ({ 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 096d6e93f09..5e4dae007fc 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 b6bac7a0b81..0f516f2c93a 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/ui/tooltip.tsx b/apps/app/components/ui/tooltip.tsx index 5c91b7f0d96..8c2558d32ed 100644 --- a/apps/app/components/ui/tooltip.tsx +++ b/apps/app/components/ui/tooltip.tsx @@ -1,66 +1,37 @@ -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; - disabled?: boolean; + tooltipHeading?: string; + tooltipContent: string; + position?: "top" | "right" | "bottom" | "left"; + children: JSX.Element; }; export const Tooltip: React.FC = ({ - 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 21026735e28..634e69e4bba 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", From 6176893c24df5f7d48b15832e8d1b53f62dcaa37 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Wed, 22 Feb 2023 11:13:22 +0530 Subject: [PATCH 3/4] feat: assignees tooltip added --- .../issues/view-select/assignee.tsx | 27 ++++++++++++++----- apps/app/components/ui/avatar.tsx | 2 +- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx index 54d66784196..daae990b85d 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" + } > - -
+
+ +
+ = ({ user, index }) => ( -
+
{user && user.avatar && user.avatar !== "" ? (
Date: Wed, 22 Feb 2023 11:35:14 +0530 Subject: [PATCH 4/4] fix: build fix --- apps/app/components/states/single-state.tsx | 20 +++++++++++--------- apps/app/components/ui/tooltip.tsx | 3 +++ 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/apps/app/components/states/single-state.tsx b/apps/app/components/states/single-state.tsx index d5168427589..e6ddce350fe 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/tooltip.tsx b/apps/app/components/ui/tooltip.tsx index 8c2558d32ed..796a01ed8ca 100644 --- a/apps/app/components/ui/tooltip.tsx +++ b/apps/app/components/ui/tooltip.tsx @@ -6,6 +6,7 @@ export type Props = { tooltipContent: string; position?: "top" | "right" | "bottom" | "left"; children: JSX.Element; + disabled?: boolean; }; export const Tooltip: React.FC = ({ @@ -13,9 +14,11 @@ export const Tooltip: React.FC = ({ tooltipContent, position = "top", children, + disabled = false, }) => { return ( {tooltipHeading ? (