From 67b28214d00affadbce94edb95c5783695ada542 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Wed, 11 Oct 2023 20:06:46 +0530 Subject: [PATCH] chore: ui component revamp (#2415) * chore: swap tooltip component with plane ui package * chore: swap linear progress component with plane ui package * fix: login button fix --- packages/ui/package.json | 5 +- packages/ui/src/button/button.tsx | 9 +- packages/ui/src/button/helper.tsx | 14 ++- packages/ui/src/index.tsx | 1 + packages/ui/src/progress/index.tsx | 1 + .../progress/linear-progress-indicator.tsx | 44 ++++++++++ packages/ui/src/tooltip/index.tsx | 1 + packages/ui/src/tooltip/tooltip.tsx | 86 +++++++++++++++++++ web/components/account/email-code-form.tsx | 2 +- web/components/command-palette/command-k.tsx | 4 +- web/components/core/activity.tsx | 3 +- .../core/filters/issues-view-filter.tsx | 4 +- .../modals/existing-issues-list-modal.tsx | 3 +- .../core/views/board-view/single-issue.tsx | 3 +- .../core/views/calendar-view/single-issue.tsx | 3 +- .../core/views/list-view/single-issue.tsx | 3 +- .../cycles/active-cycle-details.tsx | 3 +- web/components/cycles/cycles-board-card.tsx | 4 +- web/components/cycles/cycles-list-item.tsx | 4 +- web/components/cycles/gantt-chart/blocks.tsx | 6 +- web/components/cycles/single-cycle-card.tsx | 51 +++-------- web/components/cycles/single-cycle-list.tsx | 51 +++-------- web/components/headers/global-issues.tsx | 3 +- web/components/inbox/inbox-issue-card.tsx | 10 +-- web/components/issue-layouts/list/item.tsx | 3 +- web/components/issues/activity.tsx | 4 +- .../issues/attachment/attachments.tsx | 2 +- web/components/issues/comment/add-comment.tsx | 4 +- .../filters/header/layout-selection.tsx | 2 +- .../issues/issue-layouts/gantt/blocks.tsx | 14 +-- .../issue-layouts/kanban/properties.tsx | 2 +- .../issues/issue-layouts/list/properties.tsx | 2 +- .../issue-layouts/properties/assignee.tsx | 2 +- .../issues/issue-layouts/properties/date.tsx | 2 +- .../issue-layouts/properties/estimates.tsx | 2 +- .../issue-layouts/properties/labels.tsx | 2 +- .../issue-layouts/properties/priority.tsx | 2 +- .../issues/issue-layouts/properties/state.tsx | 2 +- web/components/issues/label.tsx | 8 +- .../my-issues/my-issues-view-options.tsx | 2 +- .../issues/parent-issues-list-modal.tsx | 3 +- .../issues/sidebar-select/cycle.tsx | 4 +- .../issues/sidebar-select/module.tsx | 4 +- web/components/issues/sub-issues/issue.tsx | 3 +- .../issues/view-select/assignee.tsx | 3 +- .../issues/view-select/due-date.tsx | 3 +- .../issues/view-select/estimate.tsx | 3 +- web/components/issues/view-select/label.tsx | 3 +- .../issues/view-select/priority.tsx | 3 +- .../issues/view-select/start-date.tsx | 3 +- web/components/modules/gantt-chart/blocks.tsx | 9 +- web/components/modules/single-module-card.tsx | 42 +++------ .../notifications/notification-card.tsx | 27 ++---- .../notifications/notification-header.tsx | 3 +- .../notifications/notification-popover.tsx | 4 +- .../pages/single-page-detailed-item.tsx | 43 +++------- .../pages/single-page-list-item.tsx | 31 +++---- .../profile/profile-issues-view-options.tsx | 4 +- web/components/profile/sidebar.tsx | 4 +- web/components/project/card.tsx | 3 +- web/components/project/label-select.tsx | 2 +- web/components/project/members-select.tsx | 3 +- web/components/project/priority-select.tsx | 18 ++-- web/components/project/sidebar-list-item.tsx | 3 +- .../states/create-update-state-inline.tsx | 4 +- web/components/states/single-state.tsx | 2 +- web/components/states/state-select.tsx | 2 +- web/components/tiptap/table-menu/index.tsx | 2 +- web/components/ui/labels-list.tsx | 14 +-- .../ui/linear-progress-indicator.tsx | 2 +- web/components/web-view/activity-message.tsx | 64 +++----------- web/components/web-view/add-comment.tsx | 4 +- web/components/workspace/activity-graph.tsx | 15 +--- web/components/workspace/issues-stats.tsx | 3 +- web/components/workspace/sidebar-menu.tsx | 2 +- web/layouts/app-layout-legacy/app-header.tsx | 17 ++-- .../projects/[projectId]/modules/index.tsx | 4 +- .../projects/[projectId]/pages/[pageId].tsx | 4 +- 78 files changed, 348 insertions(+), 392 deletions(-) create mode 100644 packages/ui/src/progress/linear-progress-indicator.tsx create mode 100644 packages/ui/src/tooltip/index.tsx create mode 100644 packages/ui/src/tooltip/tooltip.tsx diff --git a/packages/ui/package.json b/packages/ui/package.json index 9385a26c7..603d0e250 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -31,7 +31,10 @@ "access": "public" }, "dependencies": { + "@blueprintjs/core": "^4.16.3", + "@blueprintjs/popover2": "^1.13.3", "@headlessui/react": "^1.7.17", - "clsx": "^2.0.0" + "clsx": "^2.0.0", + "next-themes": "^0.2.1" } } diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx index a11ce9e8b..706b0ae6c 100644 --- a/packages/ui/src/button/button.tsx +++ b/packages/ui/src/button/button.tsx @@ -1,11 +1,16 @@ import * as React from "react"; -import { getIconStyling, getButtonStyling, TButtonVariant } from "./helper"; +import { + getIconStyling, + getButtonStyling, + TButtonVariant, + TButtonSizes, +} from "./helper"; export interface ButtonProps extends React.ButtonHTMLAttributes { variant?: TButtonVariant; - size?: "sm" | "md" | "lg"; + size?: TButtonSizes; className?: string; loading?: boolean; disabled?: boolean; diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx index 1eaee5134..82489c3e8 100644 --- a/packages/ui/src/button/helper.tsx +++ b/packages/ui/src/button/helper.tsx @@ -10,7 +10,7 @@ export type TButtonVariant = | "link-danger" | "tertiary-danger"; -export type TButtonSizes = "sm" | "md" | "lg"; +export type TButtonSizes = "sm" | "md" | "lg" | "xl"; export interface IButtonStyling { [key: string]: { @@ -24,13 +24,15 @@ export interface IButtonStyling { enum buttonSizeStyling { sm = `px-3 py-1.5 font-medium text-xs rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`, md = `px-4 py-1.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`, - lg = `px-5 py-2 font-medium text-base rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`, + lg = `px-5 py-2 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`, + xl = `px-5 py-3.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`, } enum buttonIconStyling { sm = "h-3 w-3 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0", md = "h-3.5 w-3.5 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0", lg = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0", + xl = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0", } export const buttonStyling: IButtonStyling = { @@ -110,16 +112,12 @@ export const getButtonStyling = ( } ${currentVariant.pressed}`; let _size: string = ``; - if (size === "sm") _size = buttonSizeStyling["sm"]; - if (size === "md") _size = buttonSizeStyling["md"]; - if (size === "lg") _size = buttonSizeStyling["lg"]; + if (size) _size = buttonSizeStyling[size]; return `${_variant} ${_size}`; }; export const getIconStyling = (size: TButtonSizes): string => { let icon: string = ``; - if (size === "sm") icon = buttonIconStyling["sm"]; - if (size === "md") icon = buttonIconStyling["md"]; - if (size === "lg") icon = buttonIconStyling["lg"]; + if (size) icon = buttonIconStyling[size]; return icon; }; diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx index 36eb08ef4..1cff8eeac 100644 --- a/packages/ui/src/index.tsx +++ b/packages/ui/src/index.tsx @@ -3,3 +3,4 @@ export * from "./form-fields"; export * from "./progress"; export * from "./spinners"; export * from "./loader"; +export * from "./tooltip"; diff --git a/packages/ui/src/progress/index.tsx b/packages/ui/src/progress/index.tsx index 288a0c1fc..ad5a371c1 100644 --- a/packages/ui/src/progress/index.tsx +++ b/packages/ui/src/progress/index.tsx @@ -1,2 +1,3 @@ export * from "./radial-progress"; export * from "./progress-bar"; +export * from "./linear-progress-indicator"; diff --git a/packages/ui/src/progress/linear-progress-indicator.tsx b/packages/ui/src/progress/linear-progress-indicator.tsx new file mode 100644 index 000000000..9fc115f9f --- /dev/null +++ b/packages/ui/src/progress/linear-progress-indicator.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { Tooltip } from "../tooltip"; + +type Props = { + data: any; + noTooltip?: boolean; +}; + +export const LinearProgressIndicator: React.FC = ({ + data, + noTooltip = false, +}) => { + const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0); + let progress = 0; + + const bars = data.map((item: any) => { + const width = `${(item.value / total) * 100}%`; + const style = { + width, + backgroundColor: item.color, + }; + progress += item.value; + if (noTooltip) return
; + else + return ( + +
+ + ); + }); + + return ( +
+ {total === 0 ? ( +
{bars}
+ ) : ( +
{bars}
+ )} +
+ ); +}; diff --git a/packages/ui/src/tooltip/index.tsx b/packages/ui/src/tooltip/index.tsx new file mode 100644 index 000000000..3c61782ae --- /dev/null +++ b/packages/ui/src/tooltip/index.tsx @@ -0,0 +1 @@ +export * from "./tooltip"; diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx new file mode 100644 index 000000000..ca25cd3e1 --- /dev/null +++ b/packages/ui/src/tooltip/tooltip.tsx @@ -0,0 +1,86 @@ +import React from "react"; + +// next-themes +import { useTheme } from "next-themes"; +import { Tooltip2 } from "@blueprintjs/popover2"; + +export type TPosition = + | "top" + | "right" + | "bottom" + | "left" + | "auto" + | "auto-end" + | "auto-start" + | "bottom-left" + | "bottom-right" + | "left-bottom" + | "left-top" + | "right-bottom" + | "right-top" + | "top-left" + | "top-right"; + +interface ITooltipProps { + tooltipHeading?: string; + tooltipContent: string | React.ReactNode; + position?: TPosition; + children: JSX.Element; + disabled?: boolean; + className?: string; + openDelay?: number; + closeDelay?: number; +} + +export const Tooltip: React.FC = ({ + tooltipHeading, + tooltipContent, + position = "top", + children, + disabled = false, + className = "", + openDelay = 200, + closeDelay, +}) => { + const { theme } = useTheme(); + + return ( + + {tooltipHeading && ( +
+ {tooltipHeading} +
+ )} + {tooltipContent} +
+ } + position={position} + renderTarget={({ + isOpen: isTooltipOpen, + ref: eleReference, + ...tooltipProps + }) => + React.cloneElement(children, { + ref: eleReference, + ...tooltipProps, + ...children.props, + }) + } + /> + ); +}; diff --git a/web/components/account/email-code-form.tsx b/web/components/account/email-code-form.tsx index 1a4b1208d..6562dd5bf 100644 --- a/web/components/account/email-code-form.tsx +++ b/web/components/account/email-code-form.tsx @@ -212,7 +212,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
); diff --git a/web/components/cycles/single-cycle-card.tsx b/web/components/cycles/single-cycle-card.tsx index 0822ba26a..95f065056 100644 --- a/web/components/cycles/single-cycle-card.tsx +++ b/web/components/cycles/single-cycle-card.tsx @@ -10,7 +10,8 @@ import useToast from "hooks/use-toast"; // components import { SingleProgressStats } from "components/core"; // ui -import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui"; +import { Tooltip, LinearProgressIndicator } from "@plane/ui"; +import { CustomMenu } from "components/ui"; import { AssigneesList } from "components/ui/avatar"; // icons import { CalendarDaysIcon } from "@heroicons/react/20/solid"; @@ -22,19 +23,9 @@ import { TriangleExclamationIcon, AlarmClockIcon, } from "components/icons"; -import { - ChevronDownIcon, - LinkIcon, - PencilIcon, - StarIcon, - TrashIcon, -} from "@heroicons/react/24/outline"; +import { ChevronDownIcon, LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline"; // helpers -import { - getDateRangeStatus, - renderShortDateWithYearFormat, - findHowManyDaysLeft, -} from "helpers/date-time.helper"; +import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; import { copyTextToClipboard, truncateText } from "helpers/string.helper"; // types import { ICycle } from "types"; @@ -93,12 +84,9 @@ export const SingleCycleCard: React.FC = ({ const startDate = new Date(cycle.start_date ?? ""); const handleCopyText = () => { - const originURL = - typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; + const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; - copyTextToClipboard( - `${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}` - ).then(() => { + copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", @@ -110,10 +98,7 @@ export const SingleCycleCard: React.FC = ({ const progressIndicatorData = stateGroups.map((group, index) => ({ id: index, name: group.title, - value: - cycle.total_issues > 0 - ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 - : 0, + value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0, color: group.color, })); @@ -150,9 +135,7 @@ export const SingleCycleCard: React.FC = ({ /> -

- {truncateText(cycle.name, 15)} -

+

{truncateText(cycle.name, 15)}

 @@ -184,9 +167,7 @@ export const SingleCycleCard: React.FC = ({ {cycle.total_issues - cycle.completed_issues > 0 && ( @@ -357,10 +338,7 @@ export const SingleCycleCard: React.FC = ({ - @@ -370,10 +348,7 @@ export const SingleCycleCard: React.FC = ({
{stateGroups.map((group) => ( -
+
= ({ -{" "} {cycle.total_issues > 0 ? `${Math.round( - ((cycle[group.key as keyof ICycle] as number) / - cycle.total_issues) * - 100 + ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 )}%` : "0%"} diff --git a/web/components/cycles/single-cycle-list.tsx b/web/components/cycles/single-cycle-list.tsx index a4c21128a..5f0aaca2d 100644 --- a/web/components/cycles/single-cycle-list.tsx +++ b/web/components/cycles/single-cycle-list.tsx @@ -6,7 +6,8 @@ import { useRouter } from "next/router"; // hooks import useToast from "hooks/use-toast"; // ui -import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui"; +import { CustomMenu } from "components/ui"; +import { Tooltip, LinearProgressIndicator } from "@plane/ui"; // icons import { CalendarDaysIcon } from "@heroicons/react/20/solid"; import { @@ -19,11 +20,7 @@ import { } from "components/icons"; import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline"; // helpers -import { - getDateRangeStatus, - renderShortDateWithYearFormat, - findHowManyDaysLeft, -} from "helpers/date-time.helper"; +import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; import { copyTextToClipboard, truncateText } from "helpers/string.helper"; // types import { ICycle } from "types"; @@ -125,12 +122,9 @@ export const SingleCycleList: React.FC = ({ const startDate = new Date(cycle.start_date ?? ""); const handleCopyText = () => { - const originURL = - typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; + const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; - copyTextToClipboard( - `${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}` - ).then(() => { + copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", @@ -142,10 +136,7 @@ export const SingleCycleList: React.FC = ({ const progressIndicatorData = stateGroups.map((group, index) => ({ id: index, name: group.title, - value: - cycle.total_issues > 0 - ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 - : 0, + value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0, color: group.color, })); @@ -176,18 +167,10 @@ export const SingleCycleList: React.FC = ({ }`} />
- -

- {truncateText(cycle.name, 60)} -

+ +

{truncateText(cycle.name, 60)}

 -

- {cycle.description} -

+

{cycle.description}

@@ -219,9 +202,7 @@ export const SingleCycleList: React.FC = ({ {cycle.total_issues - cycle.completed_issues > 0 && ( @@ -293,12 +274,8 @@ export const SingleCycleList: React.FC = ({ {cycle.total_issues > 0 ? ( <> - - - {Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} % - + + {Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} % ) : ( No issues present @@ -315,9 +292,7 @@ export const SingleCycleList: React.FC = ({ ) : ( - + {cycleStatus} )} diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx index 45601ef8a..29473122c 100644 --- a/web/components/headers/global-issues.tsx +++ b/web/components/headers/global-issues.tsx @@ -10,8 +10,7 @@ import { useMobxStore } from "lib/mobx/store-provider"; import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues"; import { CreateUpdateWorkspaceViewModal } from "components/workspace"; // ui -import { Tooltip } from "components/ui"; -import { Button } from "@plane/ui"; +import { Button, Tooltip } from "@plane/ui"; // icons import { List, PlusIcon, Sheet } from "lucide-react"; // types diff --git a/web/components/inbox/inbox-issue-card.tsx b/web/components/inbox/inbox-issue-card.tsx index f23a4ca6e..468eba908 100644 --- a/web/components/inbox/inbox-issue-card.tsx +++ b/web/components/inbox/inbox-issue-card.tsx @@ -2,7 +2,7 @@ import { useRouter } from "next/router"; import Link from "next/link"; // ui -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; // icons import { PriorityIcon } from "components/icons"; import { @@ -34,9 +34,7 @@ export const InboxIssueCard: React.FC = (props) => { const issueStatus = issue.issue_inbox[0].status; return ( - +
= (props) => { <> - {new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date() - ? "Snoozed date passed" - : "Snoozed"} + {new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date() ? "Snoozed date passed" : "Snoozed"} ) : issueStatus === 1 ? ( diff --git a/web/components/issue-layouts/list/item.tsx b/web/components/issue-layouts/list/item.tsx index c12eb95d7..30d4e730f 100644 --- a/web/components/issue-layouts/list/item.tsx +++ b/web/components/issue-layouts/list/item.tsx @@ -15,7 +15,8 @@ import { PaperClipIcon, } from "@heroicons/react/24/outline"; // components -import { Tooltip, CustomMenu, ContextMenu } from "components/ui"; +import { CustomMenu, ContextMenu } from "components/ui"; +import { Tooltip } from "@plane/ui"; import { LayerDiagonalIcon } from "components/icons"; import { ViewAssigneeSelect, diff --git a/web/components/issues/activity.tsx b/web/components/issues/activity.tsx index 5e5f5b4df..6e12435cc 100644 --- a/web/components/issues/activity.tsx +++ b/web/components/issues/activity.tsx @@ -7,8 +7,8 @@ import { useRouter } from "next/router"; import { ActivityIcon, ActivityMessage } from "components/core"; import { CommentCard } from "components/issues/comment"; // ui -import { Icon, Tooltip } from "components/ui"; -import { Loader } from "@plane/ui"; +import { Icon } from "components/ui"; +import { Loader, Tooltip } from "@plane/ui"; // helpers import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper"; // types diff --git a/web/components/issues/attachment/attachments.tsx b/web/components/issues/attachment/attachments.tsx index 7b1afdbbe..5b236d611 100644 --- a/web/components/issues/attachment/attachments.tsx +++ b/web/components/issues/attachment/attachments.tsx @@ -6,7 +6,7 @@ import { useRouter } from "next/router"; import useSWR from "swr"; // ui -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; import { DeleteAttachmentModal } from "./delete-attachment-modal"; // icons import { XMarkIcon } from "@heroicons/react/24/outline"; diff --git a/web/components/issues/comment/add-comment.tsx b/web/components/issues/comment/add-comment.tsx index 64198784d..85195ba0e 100644 --- a/web/components/issues/comment/add-comment.tsx +++ b/web/components/issues/comment/add-comment.tsx @@ -5,8 +5,8 @@ import { useForm, Controller } from "react-hook-form"; // components import { TipTapEditor } from "components/tiptap"; // ui -import { Icon, Tooltip } from "components/ui"; -import { Button } from "@plane/ui"; +import { Icon } from "components/ui"; +import { Button, Tooltip } from "@plane/ui"; // types import type { IIssueComment } from "types"; diff --git a/web/components/issues/issue-layouts/filters/header/layout-selection.tsx b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx index 881175f72..fab67fc5b 100644 --- a/web/components/issues/issue-layouts/filters/header/layout-selection.tsx +++ b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx @@ -1,7 +1,7 @@ import React from "react"; // ui -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; // types import { TIssueLayouts } from "types"; // constants diff --git a/web/components/issues/issue-layouts/gantt/blocks.tsx b/web/components/issues/issue-layouts/gantt/blocks.tsx index 3364565a3..ef3a0e7e2 100644 --- a/web/components/issues/issue-layouts/gantt/blocks.tsx +++ b/web/components/issues/issue-layouts/gantt/blocks.tsx @@ -1,7 +1,7 @@ import { useRouter } from "next/router"; // ui -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; // icons import { StateGroupIcon } from "components/icons"; // helpers @@ -33,16 +33,13 @@ export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
{data?.name}
- {renderShortDate(data?.start_date ?? "")} to{" "} - {renderShortDate(data?.target_date ?? "")} + {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.target_date ?? "")}
} position="top-left" > -
- {data?.name} -
+
{data?.name}
); @@ -62,10 +59,7 @@ export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => { }; return ( -
+
{data?.project_detail?.identifier} {data?.sequence_id} diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx index 4c58a8df7..cefde1798 100644 --- a/web/components/issues/issue-layouts/kanban/properties.tsx +++ b/web/components/issues/issue-layouts/kanban/properties.tsx @@ -9,7 +9,7 @@ import { IssuePropertyLabels } from "../properties/labels"; import { IssuePropertyAssignee } from "../properties/assignee"; import { IssuePropertyEstimates } from "../properties/estimates"; import { IssuePropertyStartDate } from "../properties/date"; -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; export interface IKanBanProperties { sub_group_id: string; diff --git a/web/components/issues/issue-layouts/list/properties.tsx b/web/components/issues/issue-layouts/list/properties.tsx index b43b50b89..6de888de1 100644 --- a/web/components/issues/issue-layouts/list/properties.tsx +++ b/web/components/issues/issue-layouts/list/properties.tsx @@ -9,7 +9,7 @@ import { IssuePropertyLabels } from "../properties/labels"; import { IssuePropertyAssignee } from "../properties/assignee"; import { IssuePropertyEstimates } from "../properties/estimates"; import { IssuePropertyStartDate } from "../properties/date"; -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; export interface IKanBanProperties { columnId: string; diff --git a/web/components/issues/issue-layouts/properties/assignee.tsx b/web/components/issues/issue-layouts/properties/assignee.tsx index 26ec6f204..6cd1f78d2 100644 --- a/web/components/issues/issue-layouts/properties/assignee.tsx +++ b/web/components/issues/issue-layouts/properties/assignee.tsx @@ -6,7 +6,7 @@ import { ChevronDown, Search, X, Check } from "lucide-react"; // mobx import { observer } from "mobx-react-lite"; // components -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; // hooks import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown"; // mobx diff --git a/web/components/issues/issue-layouts/properties/date.tsx b/web/components/issues/issue-layouts/properties/date.tsx index 37853ced1..2056e67ce 100644 --- a/web/components/issues/issue-layouts/properties/date.tsx +++ b/web/components/issues/issue-layouts/properties/date.tsx @@ -8,7 +8,7 @@ import DatePicker from "react-datepicker"; // mobx import { observer } from "mobx-react-lite"; // components -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; // hooks import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown"; // helpers diff --git a/web/components/issues/issue-layouts/properties/estimates.tsx b/web/components/issues/issue-layouts/properties/estimates.tsx index 1647d1a16..fc9ad5bc9 100644 --- a/web/components/issues/issue-layouts/properties/estimates.tsx +++ b/web/components/issues/issue-layouts/properties/estimates.tsx @@ -6,7 +6,7 @@ import { ChevronDown, Search, X, Check, Triangle } from "lucide-react"; // mobx import { observer } from "mobx-react-lite"; // components -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; // hooks import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown"; // mobx diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx index c1f60f909..189832615 100644 --- a/web/components/issues/issue-layouts/properties/labels.tsx +++ b/web/components/issues/issue-layouts/properties/labels.tsx @@ -6,7 +6,7 @@ import { ChevronDown, Search, X, Check } from "lucide-react"; // mobx import { observer } from "mobx-react-lite"; // components -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; // hooks import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown"; // mobx diff --git a/web/components/issues/issue-layouts/properties/priority.tsx b/web/components/issues/issue-layouts/properties/priority.tsx index a6776633a..44ed22237 100644 --- a/web/components/issues/issue-layouts/properties/priority.tsx +++ b/web/components/issues/issue-layouts/properties/priority.tsx @@ -6,7 +6,7 @@ import { ChevronDown, Search, X, Check, AlertCircle, SignalHigh, SignalMedium, S // mobx import { observer } from "mobx-react-lite"; // components -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; // hooks import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown"; // constants diff --git a/web/components/issues/issue-layouts/properties/state.tsx b/web/components/issues/issue-layouts/properties/state.tsx index 28ed1fe0e..8674a45ac 100644 --- a/web/components/issues/issue-layouts/properties/state.tsx +++ b/web/components/issues/issue-layouts/properties/state.tsx @@ -6,7 +6,7 @@ import { ChevronDown, Search, X, Check } from "lucide-react"; // mobx import { observer } from "mobx-react-lite"; // components -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; import { StateGroupIcon } from "components/icons"; // hooks import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown"; diff --git a/web/components/issues/label.tsx b/web/components/issues/label.tsx index 75a08ba0f..948a6269a 100644 --- a/web/components/issues/label.tsx +++ b/web/components/issues/label.tsx @@ -1,7 +1,7 @@ import React from "react"; // components -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; // types import { IIssue } from "types"; @@ -36,11 +36,7 @@ export const ViewIssueLabel: React.FC = ({ labelDetails, maxRender = 1 }) ) : (
- l.name).join(", ")} - > + l.name).join(", ")}>
{`${labelDetails.length} Labels`} diff --git a/web/components/issues/my-issues/my-issues-view-options.tsx b/web/components/issues/my-issues/my-issues-view-options.tsx index e251e61ac..f9314b775 100644 --- a/web/components/issues/my-issues/my-issues-view-options.tsx +++ b/web/components/issues/my-issues/my-issues-view-options.tsx @@ -7,7 +7,7 @@ import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter"; // components import { MyIssuesSelectFilters } from "components/issues"; // ui -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; // icons import { FormatListBulletedOutlined } from "@mui/icons-material"; import { CreditCard } from "lucide-react"; diff --git a/web/components/issues/parent-issues-list-modal.tsx b/web/components/issues/parent-issues-list-modal.tsx index 8c74439a6..44cfbc1cb 100644 --- a/web/components/issues/parent-issues-list-modal.tsx +++ b/web/components/issues/parent-issues-list-modal.tsx @@ -11,8 +11,7 @@ import useDebounce from "hooks/use-debounce"; // components import { LayerDiagonalIcon } from "components/icons"; // ui -import { Tooltip } from "components/ui"; -import { Loader, ToggleSwitch } from "@plane/ui"; +import { Loader, ToggleSwitch, Tooltip } from "@plane/ui"; // icons import { LaunchOutlined } from "@mui/icons-material"; import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; diff --git a/web/components/issues/sidebar-select/cycle.tsx b/web/components/issues/sidebar-select/cycle.tsx index 5e5672561..57b811ff3 100644 --- a/web/components/issues/sidebar-select/cycle.tsx +++ b/web/components/issues/sidebar-select/cycle.tsx @@ -8,8 +8,8 @@ import useSWR, { mutate } from "swr"; import issuesService from "services/issue.service"; import cyclesService from "services/cycles.service"; // ui -import { CustomSelect, Tooltip } from "components/ui"; -import { Spinner } from "@plane/ui"; +import { CustomSelect } from "components/ui"; +import { Spinner, Tooltip } from "@plane/ui"; // helper import { truncateText } from "helpers/string.helper"; // types diff --git a/web/components/issues/sidebar-select/module.tsx b/web/components/issues/sidebar-select/module.tsx index a2f0e708d..89e27cffa 100644 --- a/web/components/issues/sidebar-select/module.tsx +++ b/web/components/issues/sidebar-select/module.tsx @@ -7,8 +7,8 @@ import useSWR, { mutate } from "swr"; // services import modulesService from "services/modules.service"; // ui -import { CustomSelect, Tooltip } from "components/ui"; -import { Spinner } from "@plane/ui"; +import { CustomSelect } from "components/ui"; +import { Spinner, Tooltip } from "@plane/ui"; // helper import { truncateText } from "helpers/string.helper"; // types diff --git a/web/components/issues/sub-issues/issue.tsx b/web/components/issues/sub-issues/issue.tsx index 37431751a..5e6ccee0e 100644 --- a/web/components/issues/sub-issues/issue.tsx +++ b/web/components/issues/sub-issues/issue.tsx @@ -10,7 +10,8 @@ import { IssuePeekOverview } from "components/issues/peek-overview"; import { SubIssuesRootList } from "./issues-list"; import { IssueProperty } from "./properties"; // ui -import { Tooltip, CustomMenu } from "components/ui"; +import { CustomMenu } from "components/ui"; +import { Tooltip } from "@plane/ui"; // types import { ICurrentUserResponse, IIssue } from "types"; import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root"; diff --git a/web/components/issues/view-select/assignee.tsx b/web/components/issues/view-select/assignee.tsx index d9dfdd080..588e2caa3 100644 --- a/web/components/issues/view-select/assignee.tsx +++ b/web/components/issues/view-select/assignee.tsx @@ -8,7 +8,8 @@ import useSWR from "swr"; import projectService from "services/project.service"; import trackEventServices from "services/track_event.service"; // ui -import { AssigneesList, Avatar, CustomSearchSelect, Icon, Tooltip } from "components/ui"; +import { AssigneesList, Avatar, CustomSearchSelect, Icon } from "components/ui"; +import { Tooltip } from "@plane/ui"; // icons import { UserGroupIcon } from "@heroicons/react/24/outline"; // types diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx index 66705b332..446d85b5d 100644 --- a/web/components/issues/view-select/due-date.tsx +++ b/web/components/issues/view-select/due-date.tsx @@ -1,7 +1,8 @@ import { useRouter } from "next/router"; // ui -import { CustomDatePicker, Tooltip } from "components/ui"; +import { CustomDatePicker } from "components/ui"; +import { Tooltip } from "@plane/ui"; // helpers import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date-time.helper"; // services diff --git a/web/components/issues/view-select/estimate.tsx b/web/components/issues/view-select/estimate.tsx index 4e302426b..0ff7cff96 100644 --- a/web/components/issues/view-select/estimate.tsx +++ b/web/components/issues/view-select/estimate.tsx @@ -7,7 +7,8 @@ import trackEventServices from "services/track_event.service"; // hooks import useEstimateOption from "hooks/use-estimate-option"; // ui -import { CustomSelect, Tooltip } from "components/ui"; +import { CustomSelect } from "components/ui"; +import { Tooltip } from "@plane/ui"; // icons import { PlayIcon } from "@heroicons/react/24/outline"; // types diff --git a/web/components/issues/view-select/label.tsx b/web/components/issues/view-select/label.tsx index bd2396736..21ae1cd89 100644 --- a/web/components/issues/view-select/label.tsx +++ b/web/components/issues/view-select/label.tsx @@ -9,7 +9,8 @@ import issuesService from "services/issue.service"; // component import { CreateLabelModal } from "components/labels"; // ui -import { CustomSearchSelect, Tooltip } from "components/ui"; +import { CustomSearchSelect } from "components/ui"; +import { Tooltip } from "@plane/ui"; // icons import { PlusIcon, TagIcon } from "@heroicons/react/24/outline"; // types diff --git a/web/components/issues/view-select/priority.tsx b/web/components/issues/view-select/priority.tsx index 31e594a08..2c2bbe697 100644 --- a/web/components/issues/view-select/priority.tsx +++ b/web/components/issues/view-select/priority.tsx @@ -5,7 +5,8 @@ import { useRouter } from "next/router"; // services import trackEventServices from "services/track_event.service"; // ui -import { CustomSelect, Tooltip } from "components/ui"; +import { CustomSelect } from "components/ui"; +import { Tooltip } from "@plane/ui"; // icons import { PriorityIcon } from "components/icons/priority-icon"; // helpers diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx index 2dcabe550..47c666f29 100644 --- a/web/components/issues/view-select/start-date.tsx +++ b/web/components/issues/view-select/start-date.tsx @@ -1,7 +1,8 @@ import { useRouter } from "next/router"; // ui -import { CustomDatePicker, Tooltip } from "components/ui"; +import { CustomDatePicker } from "components/ui"; +import { Tooltip } from "@plane/ui"; // helpers import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date-time.helper"; // services diff --git a/web/components/modules/gantt-chart/blocks.tsx b/web/components/modules/gantt-chart/blocks.tsx index c6400ad82..f35d88e4c 100644 --- a/web/components/modules/gantt-chart/blocks.tsx +++ b/web/components/modules/gantt-chart/blocks.tsx @@ -1,7 +1,7 @@ import { useRouter } from "next/router"; // ui -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; // icons import { ModuleStatusIcon } from "components/icons"; // helpers @@ -27,16 +27,13 @@ export const ModuleGanttBlock = ({ data }: { data: IModule }) => {
{data?.name}
- {renderShortDate(data?.start_date ?? "")} to{" "} - {renderShortDate(data?.target_date ?? "")} + {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.target_date ?? "")}
} position="top-left" > -
- {data?.name} -
+
{data?.name}
); diff --git a/web/components/modules/single-module-card.tsx b/web/components/modules/single-module-card.tsx index 7f7d761b5..eb3b7b43c 100644 --- a/web/components/modules/single-module-card.tsx +++ b/web/components/modules/single-module-card.tsx @@ -12,15 +12,10 @@ import useToast from "hooks/use-toast"; // components import { DeleteModuleModal } from "components/modules"; // ui -import { AssigneesList, Avatar, CustomMenu, Tooltip } from "components/ui"; +import { AssigneesList, Avatar, CustomMenu } from "components/ui"; +import { Tooltip } from "@plane/ui"; // icons -import { - CalendarDaysIcon, - LinkIcon, - PencilIcon, - StarIcon, - TrashIcon, -} from "@heroicons/react/24/outline"; +import { CalendarDaysIcon, LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline"; import { CalendarMonthIcon, TargetIcon } from "components/icons"; // helpers @@ -45,8 +40,7 @@ export const SingleModuleCard: React.FC = ({ module, handleEditModule, us const { setToastAlert } = useToast(); - const completionPercentage = - ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100; + const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100; const handleDeleteModule = () => { if (!module) return; @@ -93,24 +87,19 @@ export const SingleModuleCard: React.FC = ({ module, handleEditModule, us false ); - modulesService - .removeModuleFromFavorites(workspaceSlug as string, projectId as string, module.id) - .catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "Couldn't remove the module from favorites. Please try again.", - }); + modulesService.removeModuleFromFavorites(workspaceSlug as string, projectId as string, module.id).catch(() => { + setToastAlert({ + type: "error", + title: "Error!", + message: "Couldn't remove the module from favorites. Please try again.", }); + }); }; const handleCopyText = () => { - const originURL = - typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; + const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; - copyTextToClipboard( - `${originURL}/${workspaceSlug}/projects/${projectId}/modules/${module.id}` - ).then(() => { + copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", @@ -125,12 +114,7 @@ export const SingleModuleCard: React.FC = ({ module, handleEditModule, us return ( <> - +
diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx index 29fe579a8..1f3b86a59 100644 --- a/web/components/notifications/notification-card.tsx +++ b/web/components/notifications/notification-card.tsx @@ -7,7 +7,8 @@ import { useRouter } from "next/router"; import useToast from "hooks/use-toast"; // icons -import { CustomMenu, Icon, Tooltip } from "components/ui"; +import { CustomMenu, Icon } from "components/ui"; +import { Tooltip } from "@plane/ui"; // helper import { stripHTML, replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper"; @@ -66,8 +67,7 @@ export const NotificationCard: React.FC = (props) => { )}
- {notification.triggered_by_details.avatar && - notification.triggered_by_details.avatar !== "" ? ( + {notification.triggered_by_details.avatar && notification.triggered_by_details.avatar !== "" ? (
= (props) => { ? notification.triggered_by_details.first_name : notification.triggered_by_details.display_name}{" "} - {notification.data.issue_activity.field !== "comment" && - notification.data.issue_activity.verb}{" "} + {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.verb}{" "} {notification.data.issue_activity.field === "comment" ? "commented" : notification.data.issue_activity.field === "None" ? null : replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "} - {notification.data.issue_activity.field !== "comment" && - notification.data.issue_activity.field !== "None" + {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.field !== "None" ? "to" : ""} @@ -148,14 +146,11 @@ export const NotificationCard: React.FC = (props) => {

- Till {renderShortDate(notification.snoozed_till)},{" "} - {render12HourFormatTime(notification.snoozed_till)} + Till {renderShortDate(notification.snoozed_till)}, {render12HourFormatTime(notification.snoozed_till)}

) : ( -

- {formatDateDistance(notification.created_at)} -

+

{formatDateDistance(notification.created_at)}

)}
@@ -168,9 +163,7 @@ export const NotificationCard: React.FC = (props) => { onClick: () => { markNotificationReadStatusToggle(notification.id).then(() => { setToastAlert({ - title: notification.read_at - ? "Notification marked as unread" - : "Notification marked as read", + title: notification.read_at ? "Notification marked as unread" : "Notification marked as read", type: "success", }); }); @@ -183,9 +176,7 @@ export const NotificationCard: React.FC = (props) => { onClick: () => { markNotificationArchivedStatus(notification.id).then(() => { setToastAlert({ - title: notification.archived_at - ? "Notification un-archived" - : "Notification archived", + title: notification.archived_at ? "Notification un-archived" : "Notification archived", type: "success", }); }); diff --git a/web/components/notifications/notification-header.tsx b/web/components/notifications/notification-header.tsx index 0d181da98..7bc390453 100644 --- a/web/components/notifications/notification-header.tsx +++ b/web/components/notifications/notification-header.tsx @@ -1,7 +1,8 @@ import React from "react"; // components -import { CustomMenu, Icon, Tooltip } from "components/ui"; +import { CustomMenu, Icon } from "components/ui"; +import { Tooltip } from "@plane/ui"; // helpers import { getNumberCount } from "helpers/string.helper"; diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx index d465d8c77..1c07127e9 100644 --- a/web/components/notifications/notification-popover.tsx +++ b/web/components/notifications/notification-popover.tsx @@ -9,9 +9,9 @@ import { Popover, Transition } from "@headlessui/react"; import useUserNotification from "hooks/use-user-notifications"; // components -import { EmptyState, Tooltip } from "components/ui"; +import { EmptyState } from "components/ui"; import { SnoozeNotificationModal, NotificationCard, NotificationHeader } from "components/notifications"; -import { Loader } from "@plane/ui"; +import { Loader, Tooltip } from "@plane/ui"; // icons import { NotificationsOutlined } from "@mui/icons-material"; // images diff --git a/web/components/pages/single-page-detailed-item.tsx b/web/components/pages/single-page-detailed-item.tsx index eca4df9f1..cbb094e29 100644 --- a/web/components/pages/single-page-detailed-item.tsx +++ b/web/components/pages/single-page-detailed-item.tsx @@ -7,24 +7,14 @@ import { useRouter } from "next/router"; import useUser from "hooks/use-user"; import useToast from "hooks/use-toast"; // ui -import { CustomMenu, Tooltip } from "components/ui"; +import { CustomMenu } from "components/ui"; +import { Tooltip } from "@plane/ui"; // icons -import { - LinkIcon, - LockClosedIcon, - LockOpenIcon, - PencilIcon, - StarIcon, - TrashIcon, -} from "@heroicons/react/24/outline"; +import { LinkIcon, LockClosedIcon, LockOpenIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline"; import { ExclamationIcon } from "components/icons"; // helpers import { copyTextToClipboard, truncateText } from "helpers/string.helper"; -import { - render24HourFormatTime, - renderShortDate, - renderLongDateFormat, -} from "helpers/date-time.helper"; +import { render24HourFormatTime, renderShortDate, renderLongDateFormat } from "helpers/date-time.helper"; // types import { IPage, IProjectMember } from "types"; @@ -55,11 +45,8 @@ export const SinglePageDetailedItem: React.FC = ({ const { setToastAlert } = useToast(); const handleCopyText = () => { - const originURL = - typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; - copyTextToClipboard( - `${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}` - ).then(() => { + const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; + copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", @@ -81,16 +68,13 @@ export const SinglePageDetailedItem: React.FC = ({ key={label.id} className="group flex items-center gap-1 rounded-2xl border border-custom-border-200 px-2 py-0.5 text-xs" style={{ - backgroundColor: `${ - label?.color && label.color !== "" ? label.color : "#000000" - }20`, + backgroundColor: `${label?.color && label.color !== "" ? label.color : "#000000"}20`, }} > {label.name} @@ -105,9 +89,7 @@ export const SinglePageDetailedItem: React.FC = ({ ` ${new Date(page.updated_at).getHours() < 12 ? "am" : "pm"}` } on ${renderShortDate(page.updated_at)}`} > -

- {render24HourFormatTime(page.updated_at)} -

+

{render24HourFormatTime(page.updated_at)}

{page.is_favorite ? (
- {page.blocks.length > 0 - ? page.blocks.slice(0, 3).map((block) =>

{block.name}

) - : null} + {page.blocks.length > 0 ? page.blocks.slice(0, 3).map((block) =>

{block.name}

) : null}
diff --git a/web/components/pages/single-page-list-item.tsx b/web/components/pages/single-page-list-item.tsx index 44a6ab6a9..1dd31c29a 100644 --- a/web/components/pages/single-page-list-item.tsx +++ b/web/components/pages/single-page-list-item.tsx @@ -7,7 +7,8 @@ import { useRouter } from "next/router"; import useUser from "hooks/use-user"; import useToast from "hooks/use-toast"; // ui -import { CustomMenu, Tooltip } from "components/ui"; +import { CustomMenu } from "components/ui"; +import { Tooltip } from "@plane/ui"; // icons import { DocumentTextIcon, @@ -21,11 +22,7 @@ import { import { ExclamationIcon } from "components/icons"; // helpers import { copyTextToClipboard, truncateText } from "helpers/string.helper"; -import { - renderLongDateFormat, - renderShortDate, - render24HourFormatTime, -} from "helpers/date-time.helper"; +import { renderLongDateFormat, renderShortDate, render24HourFormatTime } from "helpers/date-time.helper"; // types import { IPage, IProjectMember } from "types"; @@ -56,11 +53,8 @@ export const SinglePageListItem: React.FC = ({ const { setToastAlert } = useToast(); const handleCopyText = () => { - const originURL = - typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; - copyTextToClipboard( - `${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}` - ).then(() => { + const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; + copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", @@ -77,9 +71,7 @@ export const SinglePageListItem: React.FC = ({
-

- {truncateText(page.name, 75)} -

+

{truncateText(page.name, 75)}

{page.label_details.length > 0 && page.label_details.map((label) => (
= ({
-

- {render24HourFormatTime(page.updated_at)} -

+

{render24HourFormatTime(page.updated_at)}

 {page.is_favorite ? ( @@ -52,11 +47,7 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => ( const activityDetails: { [key: string]: { - message: ( - activity: IIssueActivity, - showIssue: boolean, - workspaceSlug: string - ) => React.ReactNode; + message: (activity: IIssueActivity, showIssue: boolean, workspaceSlug: string) => React.ReactNode; icon: React.ReactNode; }; } = { @@ -106,9 +97,7 @@ const activityDetails: { blocking: { message: (activity) => ( <> - {activity.old_value === "" - ? "marked this issue is blocking issue " - : "removed the blocking issue "} + {activity.old_value === "" ? "marked this issue is blocking issue " : "removed the blocking issue "} {activity.old_value === "" ? activity.new_value : activity.old_value} @@ -136,9 +125,7 @@ const activityDetails: { duplicate: { message: (activity) => ( <> - {activity.old_value === "" - ? "marked this issue as duplicate of " - : "removed this issue as a duplicate of "} + {activity.old_value === "" ? "marked this issue as duplicate of " : "removed this issue as a duplicate of "} {activity.verb === "created" ? activity.new_value : activity.old_value} @@ -151,9 +138,7 @@ const activityDetails: { relates_to: { message: (activity) => ( <> - {activity.old_value === "" - ? "marked that this issue relates to " - : "removed the relation from "} + {activity.old_value === "" ? "marked that this issue relates to " : "removed the relation from "} {activity.old_value === "" ? activity.new_value : activity.old_value} @@ -210,9 +195,7 @@ const activityDetails: { message: (activity, showIssue) => ( <> {activity.new_value ? "set the estimate point to " : "removed the estimate point "} - {activity.new_value && ( - {activity.new_value} - )} + {activity.new_value && {activity.new_value}} {showIssue && ( <> {" "} @@ -266,12 +249,7 @@ const activityDetails: { {activity.verb === "updated" && "updated this "} {activity.verb === "deleted" && "removed this "}