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