IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Convert badge-preview modal to component-based API (#22969)

Browse Source 
<img width="801" alt="Screenshot 2023-08-03 at 4 00 27 PM" src="https://github.com/discourse/discourse/assets/50783505/f4abc35d-4f3f-47b1-af8d-be36df69fe07">
<img width="486" alt="Screenshot 2023-08-03 at 4 00 15 PM" src="https://github.com/discourse/discourse/assets/50783505/65be7f67-ecfa-4c0c-a1d4-01dfd7452e06">
This commit is contained in:
Isaac Janzen
2023-08-14 12:33:45 -05:00
committed by GitHub
parent bd7a10d705
commit ba46b34581
6 changed files with 126 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
app/assets/javascripts/admin/addon/components/modal/badge-preview.hbs Normal file
View File

@@ -0,0 +1,53 @@
<DModal
@closeModal={{@closeModal}}
@title={{i18n "admin.badges.preview.modal_title"}}
class="badge-query-preview"
>
<:body>
{{#if @model.badge.errors}}
<p class="error-header">{{i18n
"admin.badges.preview.sql_error_header"
}}</p>
<pre class="badge-errors">{{@model.badge.errors}}</pre>
{{else}}
<p class="grant-count">
{{#if this.count}}
{{html-safe
(i18n "admin.badges.preview.grant_count" count=@model.badge.count)
}}
{{else}}
{{html-safe (i18n "admin.badges.preview.no_grant_count")}}
{{/if}}
</p>
{{#if this.countWarning}}
<div class="count-warning">
<p class="heading">
{{d-icon "exclamation-triangle"}}
{{i18n "admin.badges.preview.bad_count_warning.header"}}
</p>
<p class="body">
{{i18n "admin.badges.preview.bad_count_warning.text"}}
</p>
</div>
{{/if}}
{{#if this.sample}}
<p class="sample">
{{i18n "admin.badges.preview.sample"}}
</p>
<ul>
{{#each this.processedSample as |html|}}
<li>{{html-safe html}}</li>
{{/each}}
</ul>
{{/if}}
{{#if this.hasQueryPlan}}
<div class="badge-query-plan">
{{html-safe this.queryPlanHtml}}
</div>
{{/if}}
{{/if}}
</:body>
</DModal>

53
app/assets/javascripts/admin/addon/components/modal/badge-preview.js Normal file
View File

@@ -0,0 +1,53 @@
import Component from "@glimmer/component";
import I18n from "I18n";
import { escapeExpression } from "discourse/lib/utilities";
export default class BadgePreview extends Component {
get processedSample() {
return this.args.model.badge.sample.map((grant) => {
let i18nKey = "admin.badges.preview.grant.with";
const i18nParams = { username: escapeExpression(grant.username) };
if (grant.post_id) {
i18nKey += "_post";
i18nParams.link = `<a href="/p/${grant.post_id}" data-auto-route="true">
${escapeExpression(grant.title)}
</a>`;
}
if (grant.granted_at) {
i18nKey += "_time";
i18nParams.time = escapeExpression(
moment(grant.granted_at).format(I18n.t("dates.long_with_year"))
);
}
return I18n.t(i18nKey, i18nParams);
});
}
get countWarning() {
if (this.args.model.badge.grant_count <= 10) {
return (
this.args.model.badge.sample.length !==
this.args.model.badge.grant_count
);
} else {
return this.args.model.badge.sample.length !== 10;
}
}
get hasQueryPlan() {
return !!this.args.model.badge.query_plan;
}
get queryPlanHtml() {
let output = `<pre class="badge-query-plan">`;
this.args.model.badge.query_plan.forEach((linehash) => {
output += escapeExpression(linehash["QUERY PLAN"]);
output += "<br>";
});
output += "</pre>";
return output;
}
}

60
app/assets/javascripts/admin/addon/controllers/modals/admin-badge-preview.js
View File

@@ -1,60 +0,0 @@
import { alias, map } from "@ember/object/computed";
import Controller from "@ember/controller";
import I18n from "I18n";
import discourseComputed from "discourse-common/utils/decorators";
import { escapeExpression } from "discourse/lib/utilities";
export default class AdminBadgePreviewController extends Controller {
@alias("model.sample") sample;
@alias("model.errors") errors;
@alias("model.grant_count") count;
@map("model.sample", (grant) => {
let i18nKey = "admin.badges.preview.grant.with";
const i18nParams = { username: escapeExpression(grant.username) };
if (grant.post_id) {
i18nKey += "_post";
i18nParams.link = `<a href="/p/${grant.post_id}" data-auto-route="true">
${escapeExpression(grant.title)}
</a>`;
}
if (grant.granted_at) {
i18nKey += "_time";
i18nParams.time = escapeExpression(
moment(grant.granted_at).format(I18n.t("dates.long_with_year"))
);
}
return I18n.t(i18nKey, i18nParams);
})
processedSample;
@discourseComputed("count", "sample.length")
countWarning(count, sampleLength) {
if (count <= 10) {
return sampleLength !== count;
} else {
return sampleLength !== 10;
}
}
@discourseComputed("model.query_plan")
hasQueryPlan(queryPlan) {
return !!queryPlan;
}
@discourseComputed("model.query_plan")
queryPlanHtml(queryPlan) {
let output = `<pre class="badge-query-plan">`;
queryPlan.forEach((linehash) => {
output += escapeExpression(linehash["QUERY PLAN"]);
output += "<br>";
});
output += "</pre>";
return output;
}
}

41
app/assets/javascripts/admin/addon/routes/admin-badges/show.js
View File

@@ -3,9 +3,9 @@ import I18n from "I18n";
import Route from "@ember/routing/route";
import { ajax } from "discourse/lib/ajax";
import { action, get } from "@ember/object";
import showModal from "discourse/lib/show-modal";
import { inject as service } from "@ember/service";
import EditBadgeGroupingsModal from "../../components/modal/edit-badge-groupings";
import BadgePreviewModal from "../../components/modal/badge-preview";
export default class AdminBadgesShowRoute extends Route {
@service dialog;
@@ -53,26 +53,25 @@ export default class AdminBadgesShowRoute extends Route {
}
@action
preview(badge, explain) {
badge.set("preview_loading", true);
ajax("/admin/badges/preview.json", {
type: "POST",
data: {
sql: badge.get("query"),
target_posts: !!badge.get("target_posts"),
trigger: badge.get("trigger"),
explain,
},
})
.then(function (model) {
badge.set("preview_loading", false);
showModal("admin-badge-preview", { model, admin: true });
})
.catch(function (error) {
badge.set("preview_loading", false);
// eslint-disable-next-line no-console
console.error(error);
this.dialog.alert("Network error");
async preview(badge, explain) {
try {
badge.set("preview_loading", true);
const model = await ajax("/admin/badges/preview.json", {
type: "POST",
data: {
sql: badge.get("query"),
target_posts: !!badge.get("target_posts"),
trigger: badge.get("trigger"),
explain,
},
});
badge.set("preview_loading", false);
this.modal.show(BadgePreviewModal, { model: { badge: model } });
} catch (e) {
badge.set("preview_loading", false);
// eslint-disable-next-line no-console
console.error(e);
this.dialog.alert("Network error");
}
}
}

58
app/assets/javascripts/admin/addon/templates/modal/admin-badge-preview.hbs
View File

@@ -1,58 +0,0 @@
<DModalBody
@title="admin.badges.preview.modal_title"
@class="badge-query-preview"
>
{{#if this.errors}}
<p class="error-header">{{i18n "admin.badges.preview.sql_error_header"}}</p>
<pre class="badge-errors">{{this.errors}}</pre>
{{!--
TODO we want some help pages for this, link to those instead
<p>
{{i18n "admin.badges.preview.error_help"}}
</p>
<ul>
<li><a href="https://meta.discourse.org/t/triggered-custom-badge-queries/19336">https://meta.discourse.org/t/triggered-custom-badge-queries/19336</a></li>
</ul>
--}}
{{else}}
<p class="grant-count">
{{#if this.count}}
{{html-safe (i18n "admin.badges.preview.grant_count" count=this.count)}}
{{else}}
{{html-safe (i18n "admin.badges.preview.no_grant_count")}}
{{/if}}
</p>
{{#if this.countWarning}}
<div class="count-warning">
<p class="heading">
{{d-icon "exclamation-triangle"}}
{{i18n "admin.badges.preview.bad_count_warning.header"}}
</p>
<p class="body">
{{i18n "admin.badges.preview.bad_count_warning.text"}}
</p>
</div>
{{/if}}
{{#if this.sample}}
<p class="sample">
{{i18n "admin.badges.preview.sample"}}
</p>
<ul>
{{#each this.processedSample as |html|}}
<li>{{html-safe html}}</li>
{{/each}}
</ul>
{{/if}}
{{#if this.hasQueryPlan}}
<div class="badge-query-plan">
{{html-safe this.queryPlanHtml}}
</div>
{{/if}}
{{/if}}
</DModalBody>

1
app/assets/javascripts/discourse/app/services/modal.js
View File

@@ -46,7 +46,6 @@ const KNOWN_LEGACY_MODALS = [
"topic-summary",
"user-status",
"admin-penalize-user",
"admin-badge-preview",
"admin-reseed",
"admin-theme-item",
"admin-color-scheme-select-base",