DEV: Convert flag modal to component-based API (#23279)

# Topic Flag
<img width="587" alt="Screenshot 2023-08-28 at 10 53 12 AM" src="https://github.com/discourse/discourse/assets/50783505/6ffe4e47-05a6-406c-9d1b-899ff4d5c2c9">

# Post Flag
<img width="620" alt="Screenshot 2023-08-28 at 10 52 44 AM" src="https://github.com/discourse/discourse/assets/50783505/1f893916-b62f-4825-a337-4c0e0e4ce3af">

# Chat Flag
<img width="648" alt="Screenshot 2023-08-28 at 10 52 31 AM" src="https://github.com/discourse/discourse/assets/50783505/e79444e8-a8b1-4f05-9b47-03d425bc9085">
This commit is contained in:
Isaac Janzen
2023-08-28 16:51:58 -05:00
committed by GitHub
parent cf71f8358e
commit 026cd3e532
15 changed files with 379 additions and 430 deletions

View File

@ -24,6 +24,10 @@ export default class ChatMessageFlag {
return false;
}
includeSeparator() {
return true;
}
_rewriteFlagDescriptions(flags) {
return flags.map((flag) => {
flag.set(
@ -34,11 +38,13 @@ export default class ChatMessageFlag {
});
}
flagsAvailable(_controller, site, model) {
let flagsAvailable = site.flagTypes;
flagsAvailable(flagModal) {
let flagsAvailable = flagModal.site.flagTypes;
flagsAvailable = flagsAvailable.filter((flag) => {
return model.availableFlags.includes(flag.name_key);
return flagModal.args.model.flagModel.availableFlags.includes(
flag.name_key
);
});
// "message user" option should be at the top
@ -55,37 +61,19 @@ export default class ChatMessageFlag {
return this._rewriteFlagDescriptions(flagsAvailable);
}
create(controller, opts) {
controller.send("hideModal");
create(flagModal, opts) {
flagModal.args.closeModal();
return ajax("/chat/flag", {
method: "PUT",
data: {
chat_message_id: controller.get("model.id"),
flag_type_id: controller.get("selected.id"),
chat_message_id: flagModal.args.model.flagModel.id,
flag_type_id: flagModal.selected.id,
message: opts.message,
is_warning: opts.isWarning,
take_action: opts.takeAction,
queue_for_review: opts.queue_for_review,
},
})
.then(() => {
if (controller.isDestroying || controller.isDestroyed) {
return;
}
if (!opts.skipClose) {
controller.send("closeModal");
}
if (opts.message) {
controller.set("message", "");
}
})
.catch((error) => {
if (!controller.isDestroying && !controller.isDestroyed) {
controller.send("closeModal");
}
popupAjaxError(error);
});
}).catch((error) => popupAjaxError(error));
}
}

View File

@ -1,6 +1,5 @@
import getURL from "discourse-common/lib/get-url";
import { bind } from "discourse-common/utils/decorators";
import showModal from "discourse/lib/show-modal";
import ChatMessageFlag from "discourse/plugins/chat/discourse/lib/chat-message-flag";
import Bookmark from "discourse/models/bookmark";
import BookmarkModal from "discourse/components/modal/bookmark";
@ -18,6 +17,7 @@ import { tracked } from "@glimmer/tracking";
import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message";
import { MESSAGE_CONTEXT_THREAD } from "discourse/plugins/chat/discourse/components/chat-message";
import I18n from "I18n";
import FlagModal from "discourse/components/modal/flag";
const removedSecondaryActions = new Set();
@ -338,8 +338,13 @@ export default class ChatMessageInteractor {
const model = new ChatMessage(this.message.channel, this.message);
model.username = this.message.user?.username;
model.user_id = this.message.user?.id;
const controller = showModal("flag", { model });
controller.set("flagTarget", new ChatMessageFlag());
this.modal.show(FlagModal, {
model: {
flagTarget: new ChatMessageFlag(),
flagModel: model,
setHidden: () => model.set("hidden", true),
},
});
}
@action