thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[WEB-1117] chore: add tool tip for Snooze under Notification Panel. (#4377)

Browse Source
This commit is contained in:
Prateek Shourya 2024-05-07 14:08:02 +05:30 committed by GitHub
parent 780b239ecb
commit a46eccf300
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 41 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
web/components/notifications/notification-card.tsx
View File

@ -7,7 +7,7 @@ import { Menu } from "@headlessui/react";
// type // type
import type { IUserNotification, NotificationType } from "@plane/types"; import type { IUserNotification, NotificationType } from "@plane/types";
// ui // ui
import { ArchiveIcon, CustomMenu, Tooltip, TOAST_TYPE, setToast } from "@plane/ui"; import { ArchiveIcon, CustomMenu, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
// constants // constants
import { import {
ISSUE_OPENED, ISSUE_OPENED,
@ -23,7 +23,6 @@ import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from
import { useEventTracker } from "@/hooks/store"; import { useEventTracker } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os"; import { usePlatformOS } from "@/hooks/use-platform-os";
type NotificationCardProps = { type NotificationCardProps = {
selectedTab: NotificationType; selectedTab: NotificationType;
notification: IUserNotification; notification: IUserNotification;
@ -184,12 +183,12 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
{notificationField === "comment" {notificationField === "comment"
? "commented" ? "commented"
: notificationField === "archived_at" : notificationField === "archived_at"
? notification.data.issue_activity.new_value === "restore" ? notification.data.issue_activity.new_value === "restore"
? "restored the issue" ? "restored the issue"
: "archived the issue" : "archived the issue"
: notificationField === "None" : notificationField === "None"
? null ? null
: replaceUnderscoreIfSnakeCase(notificationField)}{" "} : replaceUnderscoreIfSnakeCase(notificationField)}{" "}
{!["comment", "archived_at", "None"].includes(notificationField) ? "to" : ""} {!["comment", "archived_at", "None"].includes(notificationField) ? "to" : ""}
<span className="font-semibold"> <span className="font-semibold">
{" "} {" "}
@ -381,46 +380,46 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
</button> </button>
</Tooltip> </Tooltip>
))} ))}
<Tooltip tooltipContent="Snooze" isMobile={isMobile}> <CustomMenu
<CustomMenu className="flex items-center"
className="flex items-center" customButton={
customButton={ <Tooltip tooltipContent="Snooze" isMobile={isMobile}>
<div className="flex w-full items-center gap-x-2 rounded bg-custom-background-80 p-0.5 text-sm hover:bg-custom-background-100"> <div className="flex w-full items-center gap-x-2 rounded bg-custom-background-80 p-0.5 text-sm hover:bg-custom-background-100">
<Clock className="h-3.5 w-3.5 text-custom-text-300" /> <Clock className="h-3.5 w-3.5 text-custom-text-300" />
</div> </div>
} </Tooltip>
optionsClassName="!z-20" }
> optionsClassName="!z-20"
{snoozeOptions.map((item) => ( >
<CustomMenu.MenuItem {snoozeOptions.map((item) => (
key={item.label} <CustomMenu.MenuItem
onClick={(e) => { key={item.label}
e.stopPropagation(); onClick={(e) => {
e.preventDefault(); e.stopPropagation();
e.preventDefault();
if (!item.value) { if (!item.value) {
setSelectedNotificationForSnooze(notification.id); setSelectedNotificationForSnooze(notification.id);
return; return;
} }
markSnoozeNotification(notification.id, item.value).then(() => { markSnoozeNotification(notification.id, item.value).then(() => {
captureEvent(NOTIFICATION_SNOOZED, { captureEvent(NOTIFICATION_SNOOZED, {
issue_id: notification.data.issue.id, issue_id: notification.data.issue.id,
tab: selectedTab, tab: selectedTab,
state: "SUCCESS", state: "SUCCESS",
});
setToast({
title: `Notification snoozed till ${renderFormattedDate(item.value)}`,
type: TOAST_TYPE.SUCCESS,
});
}); });
}} setToast({
> title: `Notification snoozed till ${renderFormattedDate(item.value)}`,
{item.label} type: TOAST_TYPE.SUCCESS,
</CustomMenu.MenuItem> });
))} });
</CustomMenu> }}
</Tooltip> >
{item.label}
</CustomMenu.MenuItem>
))}
</CustomMenu>
</div> </div>
</Link> </Link>
); );