DEV: Refactor `logs-notice`/`global-notice` (#15000)

app/assets/javascripts/discourse/app/components/global-notice.js

@@ -1,11 +1,11 @@
-import EmberObject, { computed } from "@ember/object";
+import EmberObject, { action } from "@ember/object";
 import cookie, { removeCookie } from "discourse/lib/cookie";
 import Component from "@ember/component";
 import I18n from "I18n";
-import LogsNotice from "discourse/services/logs-notice";
+import discourseComputed, { bind } from "discourse-common/utils/decorators";
-import { bind } from "discourse-common/utils/decorators";
 import getURL from "discourse-common/lib/get-url";
 import { htmlSafe } from "@ember/template";
+import { inject as service } from "@ember/service";
 
 const _pluginNotices = [];
 
@@ -48,186 +48,190 @@ const Notice = EmberObject.extend({
 });
 
 export default Component.extend({
+  logsNoticeService: service("logsNotice"),
   logNotice: null,
 
   init() {
     this._super(...arguments);
 
-    this._setupObservers();
+    this.logsNoticeService.addObserver("hidden", this._handleLogsNoticeUpdate);
+    this.logsNoticeService.addObserver("text", this._handleLogsNoticeUpdate);
   },
 
   willDestroyElement() {
     this._super(...arguments);
 
-    this._tearDownObservers();
+    this.logsNoticeService.removeObserver("text", this._handleLogsNoticeUpdate);
+    this.logsNoticeService.removeObserver(
+      "hidden",
+      this._handleLogsNoticeUpdate
+    );
   },
 
-  notices: computed(
+  @discourseComputed(
     "site.isReadOnly",
+    "site.wizard_required",
+    "siteSettings.login_required",
     "siteSettings.disable_emails",
-    "logNotice.{id,text,hidden}",
+    "siteSettings.global_notice",
-    function () {
+    "siteSettings.bootstrap_mode_enabled",
-      let notices = [];
+    "siteSettings.bootstrap_mode_min_users",
+    "session.safe_mode",
+    "logNotice.{id,text,hidden}"
+  )
+  notices(
+    isReadOnly,
+    wizardRequired,
+    loginRequired,
+    disableEmails,
+    globalNotice,
+    bootstrapModeEnabled,
+    bootstrapModeMinUsers,
+    safeMode,
+    logNotice
+  ) {
+    let notices = [];
 
-      if (cookie("dosp") === "1") {
+    if (cookie("dosp") === "1") {
-        removeCookie("dosp", { path: "/" });
+      removeCookie("dosp", { path: "/" });
+      notices.push(
+        Notice.create({
+          text: loginRequired
+            ? I18n.t("forced_anonymous_login_required")
+            : I18n.t("forced_anonymous"),
+          id: "forced-anonymous",
+        })
+      );
+    }
+
+    if (safeMode) {
+      notices.push(
+        Notice.create({ text: I18n.t("safe_mode.enabled"), id: "safe-mode" })
+      );
+    }
+
+    if (isReadOnly) {
+      notices.push(
+        Notice.create({
+          text: I18n.t("read_only_mode.enabled"),
+          id: "alert-read-only",
+        })
+      );
+    }
+
+    if (disableEmails === "yes" || disableEmails === "non-staff") {
+      notices.push(
+        Notice.create({
+          text: I18n.t("emails_are_disabled"),
+          id: "alert-emails-disabled",
+        })
+      );
+    }
+
+    if (wizardRequired) {
+      const requiredText = I18n.t("wizard_required", {
+        url: getURL("/wizard"),
+      });
+      notices.push(
+        Notice.create({ text: htmlSafe(requiredText), id: "alert-wizard" })
+      );
+    }
+
+    if (this.currentUser?.staff && bootstrapModeEnabled) {
+      if (bootstrapModeMinUsers > 0) {
         notices.push(
           Notice.create({
-            text: this.siteSettings.login_required
+            text: I18n.t("bootstrap_mode_enabled", {
-              ? I18n.t("forced_anonymous_login_required")
+              count: bootstrapModeMinUsers,
-              : I18n.t("forced_anonymous"),
+            }),
-            id: "forced-anonymous",
+            id: "alert-bootstrap-mode",
+          })
+        );
+      } else {
+        notices.push(
+          Notice.create({
+            text: I18n.t("bootstrap_mode_disabled"),
+            id: "alert-bootstrap-mode",
           })
         );
       }
+    }
 
-      if (this.session && this.session.safe_mode) {
+    if (globalNotice?.length > 0) {
-        notices.push(
+      notices.push(
-          Notice.create({ text: I18n.t("safe_mode.enabled"), id: "safe-mode" })
+        Notice.create({
-        );
+          text: globalNotice,
+          id: "alert-global-notice",
+        })
+      );
+    }
+
+    if (logNotice) {
+      notices.push(logNotice);
+    }
+
+    return notices.concat(_pluginNotices).filter((notice) => {
+      if (notice.options.visibility) {
+        return notice.options.visibility(notice);
       }
 
-      if (this.site.isReadOnly) {
+      const key = `${GLOBAL_NOTICE_DISMISSED_PROMPT_KEY}-${notice.id}`;
-        notices.push(
+      const value = this.keyValueStore.get(key);
-          Notice.create({
+
-            text: I18n.t("read_only_mode.enabled"),
+      // banner has never been dismissed
-            id: "alert-read-only",
+      if (!value) {
-          })
+        return true;
-        );
       }
 
-      if (
+      // banner has no persistent dismiss and should always show on load
-        this.siteSettings.disable_emails === "yes" ||
+      if (!notice.options.persistentDismiss) {
-        this.siteSettings.disable_emails === "non-staff"
+        return true;
-      ) {
-        notices.push(
-          Notice.create({
-            text: I18n.t("emails_are_disabled"),
-            id: "alert-emails-disabled",
-          })
-        );
       }
 
-      if (this.site.wizard_required) {
+      if (notice.options.dismissDuration) {
-        const requiredText = I18n.t("wizard_required", {
+        const resetAt = moment(value).add(notice.options.dismissDuration);
-          url: getURL("/wizard"),
+        return moment().isAfter(resetAt);
-        });
+      } else {
-        notices.push(
+        return false;
-          Notice.create({ text: htmlSafe(requiredText), id: "alert-wizard" })
-        );
       }
+    });
+  },
 
-      if (
+  @action
-        this.get("currentUser.staff") &&
+  dismissNotice(notice) {
-        this.siteSettings.bootstrap_mode_enabled
+    if (notice.options.onDismiss) {
-      ) {
+      notice.options.onDismiss(notice);
-        if (this.siteSettings.bootstrap_mode_min_users > 0) {
+    }
-          notices.push(
-            Notice.create({
-              text: I18n.t("bootstrap_mode_enabled", {
-                count: this.siteSettings.bootstrap_mode_min_users,
-              }),
-              id: "alert-bootstrap-mode",
-            })
-          );
-        } else {
-          notices.push(
-            Notice.create({
-              text: I18n.t("bootstrap_mode_disabled"),
-              id: "alert-bootstrap-mode",
-            })
-          );
-        }
-      }
 
-      if (
+    if (notice.options.persistentDismiss) {
-        this.siteSettings.global_notice &&
+      this.keyValueStore.set({
-        this.siteSettings.global_notice.length
+        key: `${GLOBAL_NOTICE_DISMISSED_PROMPT_KEY}-${notice.id}`,
-      ) {
+        value: moment().toISOString(true),
-        notices.push(
-          Notice.create({
-            text: this.siteSettings.global_notice,
-            id: "alert-global-notice",
-          })
-        );
-      }
-
-      if (this.logNotice) {
-        notices.push(this.logNotice);
-      }
-
-      return notices.concat(_pluginNotices).filter((notice) => {
-        if (notice.options.visibility) {
-          return notice.options.visibility(notice);
-        } else {
-          const key = `${GLOBAL_NOTICE_DISMISSED_PROMPT_KEY}-${notice.id}`;
-          const value = this.keyValueStore.get(key);
-
-          // banner has never been dismissed
-          if (!value) {
-            return true;
-          }
-
-          // banner has no persistent dismiss and should always show on load
-          if (!notice.options.persistentDismiss) {
-            return true;
-          }
-
-          if (notice.options.dismissDuration) {
-            const resetAt = moment(value).add(notice.options.dismissDuration);
-            return moment().isAfter(resetAt);
-          } else {
-            return false;
-          }
-        }
       });
     }
-  ),
 
-  actions: {
+    const alert = document.getElementById(`global-notice-${notice.id}`);
-    dismissNotice(notice) {
+    if (alert) {
-      if (notice.options.onDismiss) {
+      alert.style.display = "none";
-        notice.options.onDismiss(notice);
+    }
-      }
-
-      if (notice.options.persistentDismiss) {
-        this.keyValueStore.set({
-          key: `${GLOBAL_NOTICE_DISMISSED_PROMPT_KEY}-${notice.id}`,
-          value: moment().toISOString(true),
-        });
-      }
-
-      const alert = document.getElementById(`global-notice-${notice.id}`);
-      if (alert) {
-        alert.style.display = "none";
-      }
-    },
-  },
-
-  _setupObservers() {
-    LogsNotice.current().addObserver("hidden", this._handleLogsNoticeUpdate);
-    LogsNotice.current().addObserver("text", this._handleLogsNoticeUpdate);
-  },
-
-  _tearDownObservers() {
-    LogsNotice.current().removeObserver("text", this._handleLogsNoticeUpdate);
-    LogsNotice.current().removeObserver("hidden", this._handleLogsNoticeUpdate);
   },
 
   @bind
   _handleLogsNoticeUpdate() {
     const logNotice = Notice.create({
-      text: htmlSafe(LogsNotice.currentProp("message")),
+      text: htmlSafe(this.logsNoticeService.message),
       id: "alert-logs-notice",
       options: {
         dismissable: true,
         persistentDismiss: false,
         visibility() {
-          return !LogsNotice.currentProp("hidden");
+          return !this.logsNoticeService.hidden;
         },
         onDismiss() {
-          LogsNotice.currentProp("hidden", true);
+          this.logsNoticeService.setProperties({
-          LogsNotice.currentProp("text", "");
+            hidden: true,
+            text: "",
+          });
         },
       },
     });

app/assets/javascripts/discourse/app/pre-initializers/inject-discourse-objects.js

@@ -98,7 +98,6 @@ export default {
       app.inject(t, "store", "service:store");
       app.inject(t, "site", "site:main");
       app.inject(t, "searchService", "service:search");
-      app.inject(t, "keyValueStore", "key-value-store:main");
     });
 
     ALL_TARGETS.concat("service").forEach((t) => {
@@ -106,6 +105,7 @@ export default {
       app.inject(t, "messageBus", "message-bus:main");
       app.inject(t, "siteSettings", "site-settings:main");
       app.inject(t, "topicTrackingState", "topic-tracking-state:main");
+      app.inject(t, "keyValueStore", "key-value-store:main");
     });
 
     if (currentUser) {

app/assets/javascripts/discourse/app/services/logs-notice.js

@@ -1,22 +1,26 @@
-import discourseComputed, {
+import discourseComputed, { observes } from "discourse-common/utils/decorators";
-  observes,
+import Service from "@ember/service";
-  on,
-} from "discourse-common/utils/decorators";
-import EmberObject from "@ember/object";
 import I18n from "I18n";
 import { autoUpdatingRelativeAge } from "discourse/lib/formatter";
 import getURL from "discourse-common/lib/get-url";
 import { htmlSafe } from "@ember/template";
 import { isEmpty } from "@ember/utils";
+import { readOnly } from "@ember/object/computed";
 
 const LOGS_NOTICE_KEY = "logs-notice-text";
 
-const LogsNotice = EmberObject.extend({
+export default Service.extend({
   text: "",
 
-  @on("init")
+  isAdmin: readOnly("currentUser.admin"),
-  _setup() {
+
-    if (!this.isActivated) {
+  init() {
+    this._super(...arguments);
+
+    if (
+      this.siteSettings.alert_admins_if_errors_per_hour === 0 &&
+      this.siteSettings.alert_admins_if_errors_per_minute === 0
+    ) {
       return;
     }
 
@@ -63,11 +67,6 @@ const LogsNotice = EmberObject.extend({
     return htmlSafe(text);
   },
 
-  @discourseComputed("currentUser")
-  isAdmin(currentUser) {
-    return currentUser && currentUser.admin;
-  },
-
   @discourseComputed("isEmpty", "isAdmin")
   hidden(thisIsEmpty, isAdmin) {
     return !isAdmin || thisIsEmpty;
@@ -77,14 +76,4 @@ const LogsNotice = EmberObject.extend({
   _updateKeyValueStore() {
     this.keyValueStore.setItem(LOGS_NOTICE_KEY, this.text);
   },
-
-  @discourseComputed(
-    "siteSettings.alert_admins_if_errors_per_hour",
-    "siteSettings.alert_admins_if_errors_per_minute"
-  )
-  isActivated(errorsPerHour, errorsPerMinute) {
-    return errorsPerHour > 0 || errorsPerMinute > 0;
-  },
 });
-
-export default LogsNotice;