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

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

View File

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