DEV: Remove DefaultNotificationItem widget (#24906)
These are no longer used anymore because we use glimmer notification items everywhere 🎉
This commit is contained in:
Mark VanLandingham
GitHub
parent
7aeb5d6012
commit
25d9927785
|
|
@ -1,199 +0,0 @@
|
|||
import { isEmpty } from "@ember/utils";
|
||||
import { h } from "virtual-dom";
|
||||
import { ajax, setTransientHeader } from "discourse/lib/ajax";
|
||||
import cookie from "discourse/lib/cookie";
|
||||
import { wantsNewWindow } from "discourse/lib/intercept-click";
|
||||
import { emojiUnescape } from "discourse/lib/text";
|
||||
import DiscourseURL, { userPath } from "discourse/lib/url";
|
||||
import {
|
||||
escapeExpression,
|
||||
formatUsername,
|
||||
postUrl,
|
||||
} from "discourse/lib/utilities";
|
||||
import RawHtml from "discourse/widgets/raw-html";
|
||||
import { createWidget } from "discourse/widgets/widget";
|
||||
import getURL from "discourse-common/lib/get-url";
|
||||
import { iconNode } from "discourse-common/lib/icon-library";
|
||||
import I18n from "discourse-i18n";
|
||||
|
||||
export const DefaultNotificationItem = createWidget(
|
||||
"default-notification-item",
|
||||
{
|
||||
tagName: "li",
|
||||
|
||||
buildClasses(attrs) {
|
||||
const classNames = [];
|
||||
if (attrs.get("read")) {
|
||||
classNames.push("read");
|
||||
}
|
||||
if (attrs.is_warning) {
|
||||
classNames.push("is-warning");
|
||||
}
|
||||
const notificationName = this.lookupNotificationName(
|
||||
attrs.notification_type
|
||||
);
|
||||
if (notificationName) {
|
||||
classNames.push(notificationName.replace(/_/g, "-"));
|
||||
}
|
||||
return classNames;
|
||||
},
|
||||
|
||||
url(data) {
|
||||
const attrs = this.attrs;
|
||||
|
||||
const badgeId = data.badge_id;
|
||||
if (badgeId) {
|
||||
let badgeSlug = data.badge_slug;
|
||||
|
||||
if (!badgeSlug) {
|
||||
const badgeName = data.badge_name;
|
||||
badgeSlug = badgeName.replace(/[^A-Za-z0-9_]+/g, "-").toLowerCase();
|
||||
}
|
||||
|
||||
let username = data.username;
|
||||
username = username ? "?username=" + username.toLowerCase() : "";
|
||||
return getURL("/badges/" + badgeId + "/" + badgeSlug + username);
|
||||
}
|
||||
|
||||
const topicId = attrs.topic_id;
|
||||
|
||||
if (topicId) {
|
||||
return postUrl(attrs.slug, topicId, attrs.post_number);
|
||||
}
|
||||
|
||||
if (data.group_id) {
|
||||
return userPath(data.username + "/messages/group/" + data.group_name);
|
||||
}
|
||||
|
||||
if (data.bookmarkable_url) {
|
||||
return getURL(data.bookmarkable_url);
|
||||
}
|
||||
},
|
||||
|
||||
description(data) {
|
||||
const badgeName = data.badge_name;
|
||||
if (badgeName) {
|
||||
return escapeExpression(badgeName);
|
||||
}
|
||||
|
||||
const groupName = data.group_name;
|
||||
|
||||
if (groupName) {
|
||||
if (this.attrs.fancy_title) {
|
||||
if (this.attrs.topic_id) {
|
||||
return `<span class="mention-group notify">@${groupName}</span><span data-topic-id="${this.attrs.topic_id}"> ${this.attrs.fancy_title}</span>`;
|
||||
}
|
||||
return `<span class="mention-group notify">@${groupName}</span> ${this.attrs.fancy_title}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.attrs.fancy_title) {
|
||||
if (this.attrs.topic_id) {
|
||||
return `<span data-topic-id="${this.attrs.topic_id}">${this.attrs.fancy_title}</span>`;
|
||||
}
|
||||
return this.attrs.fancy_title;
|
||||
}
|
||||
|
||||
const description = data.topic_title || data.title;
|
||||
|
||||
return isEmpty(description) ? "" : escapeExpression(description);
|
||||
},
|
||||
|
||||
text(notificationName, data) {
|
||||
const username = formatUsername(data.display_username);
|
||||
const description = this.description(data, notificationName);
|
||||
|
||||
return I18n.t(`notifications.${notificationName}`, {
|
||||
description,
|
||||
username,
|
||||
});
|
||||
},
|
||||
|
||||
icon(notificationName) {
|
||||
return iconNode(`notification.${notificationName}`);
|
||||
},
|
||||
|
||||
_addA11yAttrsTo(icon, notificationName) {
|
||||
icon.properties.attributes["aria-label"] = I18n.t(
|
||||
`notifications.titles.${notificationName}`
|
||||
);
|
||||
icon.properties.attributes["aria-hidden"] = false;
|
||||
icon.properties.attributes["role"] = "img";
|
||||
return icon;
|
||||
},
|
||||
|
||||
notificationTitle(notificationName) {
|
||||
if (notificationName) {
|
||||
return I18n.t(`notifications.titles.${notificationName}`);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
|
||||
lookupNotificationName(notificationType) {
|
||||
const lookup = this.site.get("notificationLookup");
|
||||
return lookup[notificationType];
|
||||
},
|
||||
|
||||
html(attrs) {
|
||||
const notificationName = this.lookupNotificationName(
|
||||
attrs.notification_type
|
||||
);
|
||||
let { data } = attrs;
|
||||
let text = emojiUnescape(this.text(notificationName, data));
|
||||
let icon = this.icon(notificationName, data);
|
||||
this._addA11yAttrsTo(icon, notificationName);
|
||||
|
||||
const title = this.notificationTitle(notificationName, data);
|
||||
|
||||
// We can use a `<p>` tag here once other languages have fixed their HTML
|
||||
// translations.
|
||||
let html = new RawHtml({ html: `<div>${text}</div>` });
|
||||
|
||||
let contents = [icon, html];
|
||||
|
||||
const href = this.url(data);
|
||||
return href
|
||||
? h(
|
||||
"a",
|
||||
{ attributes: { href, title, "data-auto-route": true } },
|
||||
contents
|
||||
)
|
||||
: contents;
|
||||
},
|
||||
|
||||
click(e) {
|
||||
this.attrs.set("read", true);
|
||||
const id = this.attrs.id;
|
||||
setTransientHeader("Discourse-Clear-Notifications", id);
|
||||
cookie("cn", id, { path: getURL("/") });
|
||||
|
||||
if (wantsNewWindow(e)) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
|
||||
this.sendWidgetEvent("linkClicked");
|
||||
if (this.attrs.data.revision_number) {
|
||||
this.appEvents.trigger("edit-notification:clicked", {
|
||||
topicId: this.attrs.topic_id,
|
||||
postNumber: this.attrs.post_number,
|
||||
revisionNumber: this.attrs.data.revision_number,
|
||||
});
|
||||
}
|
||||
DiscourseURL.routeTo(this.url(this.attrs.data));
|
||||
},
|
||||
|
||||
mouseUp(event) {
|
||||
// dismiss notification on middle click
|
||||
if (event.which === 2 && !this.attrs.read) {
|
||||
this.attrs.set("read", true);
|
||||
ajax("/notifications/mark-read", {
|
||||
method: "PUT",
|
||||
data: { id: this.attrs.id },
|
||||
});
|
||||
this.scheduleRerender();
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
import EmberObject from "@ember/object";
|
||||
import { render, triggerEvent } from "@ember/test-helpers";
|
||||
import { hbs } from "ember-cli-htmlbars";
|
||||
import { module, test } from "qunit";
|
||||
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
||||
import pretender, { response } from "discourse/tests/helpers/create-pretender";
|
||||
import { count, exists } from "discourse/tests/helpers/qunit-helpers";
|
||||
|
||||
module(
|
||||
"Integration | Component | Widget | default-notification-item",
|
||||
function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test("sets notification as read on middle click", async function (assert) {
|
||||
this.set(
|
||||
"args",
|
||||
EmberObject.create({
|
||||
id: 3,
|
||||
user_id: 1,
|
||||
notification_type: 6,
|
||||
read: false,
|
||||
created_at: "2020-01-01T12:00:00.000Z",
|
||||
post_number: 1,
|
||||
topic_id: 10,
|
||||
fancy_title: "Greetings!",
|
||||
slug: "greetings",
|
||||
data: {
|
||||
topic_title: "Greetings!",
|
||||
original_post_id: 14,
|
||||
original_post_type: 1,
|
||||
original_username: "discobot",
|
||||
revision_number: null,
|
||||
display_username: "discobot",
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
await render(
|
||||
hbs`<MountWidget @widget="default-notification-item" @args={{this.args}} />`
|
||||
);
|
||||
|
||||
let requests = 0;
|
||||
pretender.put("/notifications/mark-read", (request) => {
|
||||
++requests;
|
||||
|
||||
assert.strictEqual(
|
||||
request.requestBody,
|
||||
`id=${this.args.id}`,
|
||||
"it sets correct request parameters"
|
||||
);
|
||||
|
||||
return response({ success: true });
|
||||
});
|
||||
|
||||
assert.ok(!exists("li.read"));
|
||||
|
||||
await triggerEvent("li", "mouseup", { button: 1, which: 2 });
|
||||
assert.strictEqual(
|
||||
count("li.read"),
|
||||
1,
|
||||
"only one item is marked as read"
|
||||
);
|
||||
assert.strictEqual(requests, 1);
|
||||
});
|
||||
}
|
||||
);
|
||||
Loading…
Reference in New Issue