UX: Text customization for different languages. (#11729)

Admins can now edit translations in different languages without having to change their locale. We display a warning when there's a fallback language set.

app/assets/javascripts/admin/addon/controllers/admin-site-text-edit.js

@@ -7,6 +7,7 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 
 export default Controller.extend(bufferedProperty("siteText"), {
   saved: false,
+  queryParams: ["locale"],
 
   @discourseComputed("buffered.value")
   saveDisabled(value) {
@@ -15,9 +16,11 @@ export default Controller.extend(bufferedProperty("siteText"), {
 
   actions: {
     saveChanges() {
-      const buffered = this.buffered;
+      const attrs = this.buffered.getProperties("value");
+      attrs.locale = this.locale;
+
       this.siteText
-        .save(buffered.getProperties("value"))
+        .save(attrs)
         .then(() => {
           this.commitBuffer();
           this.set("saved", true);
@@ -27,10 +30,11 @@ export default Controller.extend(bufferedProperty("siteText"), {
 
     revertChanges() {
       this.set("saved", false);
+
       bootbox.confirm(I18n.t("admin.site_text.revert_confirm"), (result) => {
         if (result) {
           this.siteText
-            .revert()
+            .revert(this.locale)
             .then((props) => {
               const buffered = this.buffered;
               buffered.setProperties(props);

app/assets/javascripts/admin/addon/controllers/admin-site-text-index.js

@@ -1,4 +1,5 @@
 import Controller from "@ember/controller";
+import discourseComputed from "discourse-common/utils/decorators";
 import discourseDebounce from "discourse-common/lib/debounce";
 let lastSearch;
 
@@ -6,23 +7,49 @@ export default Controller.extend({
   searching: false,
   siteTexts: null,
   preferred: false,
-  queryParams: ["q", "overridden"],
+  queryParams: ["q", "overridden", "locale"],
+  locale: null,
 
   q: null,
   overridden: false,
 
+  init() {
+    this._super(...arguments);
+
+    this.set("locale", this.siteSettings.default_locale);
+  },
+
   _performSearch() {
     this.store
-      .find("site-text", this.getProperties("q", "overridden"))
+      .find("site-text", this.getProperties("q", "overridden", "locale"))
       .then((results) => {
         this.set("siteTexts", results);
       })
       .finally(() => this.set("searching", false));
   },
 
+  @discourseComputed()
+  availableLocales() {
+    return JSON.parse(this.siteSettings.available_locales);
+  },
+
+  @discourseComputed("locale")
+  fallbackLocaleFullName() {
+    if (this.siteTexts.extras.fallback_locale) {
+      return this.availableLocales.find((l) => {
+        return l.value === this.siteTexts.extras.fallback_locale;
+      }).name;
+    }
+  },
+
   actions: {
     edit(siteText) {
-      this.transitionToRoute("adminSiteText.edit", siteText.get("id"));
+      this.transitionToRoute("adminSiteText.edit", siteText.get("id"), {
+        queryParams: {
+          locale: this.locale,
+          localeFullName: this.availableLocales[this.locale],
+        },
+      });
     },
 
     toggleOverridden() {
@@ -39,5 +66,14 @@ export default Controller.extend({
         lastSearch = q;
       }
     },
+
+    updateLocale(value) {
+      this.setProperties({
+        searching: true,
+        locale: value,
+      });
+
+      discourseDebounce(this, this._performSearch, 400);
+    },
   },
 });