DEV: Convert DashboardProblems component to GJS (#28917)

Working on some new functionality around admin notices. This is a preparatory refactoring that converts the DashboardProblems component to GJS.
This commit is contained in:
Ted Johansson 2024-09-15 17:16:01 +08:00 committed by GitHub
parent 0c019b2e45
commit edd221fbf9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 71 additions and 61 deletions

View File

@ -0,0 +1,71 @@
import Component from "@glimmer/component";
import { htmlSafe } from "@ember/template";
import ConditionalLoadingSection from "discourse/components/conditional-loading-section";
import DButton from "discourse/components/d-button";
import concatClass from "discourse/helpers/concat-class";
import icon from "discourse-common/helpers/d-icon";
import i18n from "discourse-common/helpers/i18n";
// eslint-disable-next-line ember/no-empty-glimmer-component-classes
export default class DashboardProblems extends Component {
<template>
{{#if @foundProblems}}
<div class="section dashboard-problems">
<div class="section-title">
<h2>
{{icon "heart"}}
{{i18n "admin.dashboard.problems_found"}}
</h2>
</div>
<div class="section-body">
<ConditionalLoadingSection @isLoading={{@loadingProblems}}>
{{#if @highPriorityProblems.length}}
<div class="problem-messages priority-high">
<ul>
{{#each @highPriorityProblems as |problem|}}
<li
class={{concatClass
"dashboard-problem "
"priority-"
problem.priority
}}
>
{{icon "triangle-exclamation"}}
{{htmlSafe problem.message}}
</li>
{{/each}}
</ul>
</div>
{{/if}}
<div class="problem-messages priority-low">
<ul>
{{#each @lowPriorityProblems as |problem|}}
<li
class={{concatClass
"dashboard-problem "
"priority-"
problem.priority
}}
>{{htmlSafe problem.message}}</li>
{{/each}}
</ul>
</div>
<p class="actions">
<DButton
@action={{@refreshProblems}}
@icon="arrows-rotate"
@label="admin.dashboard.refresh_problems"
class="btn-default"
/>
{{i18n "admin.dashboard.last_checked"}}:
{{@problemsTimestamp}}
</p>
</ConditionalLoadingSection>
</div>
</div>
{{/if}}
</template>
}

View File

@ -1,58 +0,0 @@
{{#if this.foundProblems}}
<div class="section dashboard-problems">
<div class="section-title">
<h2>
{{d-icon "heart"}}
{{i18n "admin.dashboard.problems_found"}}
</h2>
</div>
<div class="section-body">
<ConditionalLoadingSection @isLoading={{this.loadingProblems}}>
{{#if this.highPriorityProblems.length}}
<div class="problem-messages priority-high">
<ul>
{{#each this.highPriorityProblems as |problem|}}
<li
class={{concat
"dashboard-problem "
"priority-"
problem.priority
}}
>
{{d-icon "triangle-exclamation"}}
{{html-safe problem.message}}
</li>
{{/each}}
</ul>
</div>
{{/if}}
<div class="problem-messages priority-low">
<ul>
{{#each this.lowPriorityProblems as |problem|}}
<li
class={{concat
"dashboard-problem "
"priority-"
problem.priority
}}
>{{html-safe problem.message}}</li>
{{/each}}
</ul>
</div>
<p class="actions">
<DButton
@action={{this.refreshProblems}}
@icon="arrows-rotate"
@label="admin.dashboard.refresh_problems"
class="btn-default"
/>
{{i18n "admin.dashboard.last_checked"}}:
{{this.problemsTimestamp}}
</p>
</ConditionalLoadingSection>
</div>
</div>
{{/if}}

View File

@ -1,3 +0,0 @@
import Component from "@ember/component";
export default class DashboardProblems extends Component {}