FEATURE: Make admin sidebar keywords translateable (#26657)

This commit ensures that additional keywords for admin
sidebar links (which are also stored in the admin sidebar state
manager) are translated with I18n, which was discussed
in https://meta.discourse.org/t/introducing-experimental-admin-sidebar-navigation/289281/58?u=martin

This also changes the admin sidebar state manager keywords to
not be a TrackedObject -- this is not necessary as keywords are
only set once, and it was causing rendering issues because
the keywords were being set at the same time they were read.

Finally this adds a "theme" keyword to the "Components" link
because we often refer to components as Theme Components

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

app/assets/javascripts/admin/addon/routes/admin.js

@@ -1,6 +1,5 @@
 import { tracked } from "@glimmer/tracking";
 import { service } from "@ember/service";
-import PreloadStore from "discourse/lib/preload-store";
 import { MAIN_PANEL } from "discourse/lib/sidebar/panels";
 import DiscourseRoute from "discourse/routes/discourse";
 import I18n from "discourse-i18n";
@@ -25,13 +24,6 @@ export default class AdminRoute extends DiscourseRoute {
     this.controllerFor("application").setProperties({
       showTop: false,
     });
-
-    const visiblePlugins = PreloadStore.get("visiblePlugins");
-    if (visiblePlugins) {
-      this.adminSidebarStateManager.keywords.admin_installed_plugins = {
-        navigation: visiblePlugins.mapBy("name"),
-      };
-    }
   }
 
   deactivate(transition) {

app/assets/javascripts/admin/addon/services/admin-sidebar-state-manager.js

@@ -1,18 +1,30 @@
-import { tracked } from "@glimmer/tracking";
 import Service, { service } from "@ember/service";
-import { TrackedObject } from "@ember-compat/tracked-built-ins";
 import KeyValueStore from "discourse/lib/key-value-store";
 import { ADMIN_PANEL } from "discourse/lib/sidebar/panels";
 
 export default class AdminSidebarStateManager extends Service {
   @service sidebarState;
   @service currentUser;
-  @tracked keywords = new TrackedObject();
+
+  keywords = {};
 
   STORE_NAMESPACE = "discourse_admin_sidebar_experiment_";
 
   store = new KeyValueStore(this.STORE_NAMESPACE);
 
+  setLinkKeywords(link_name, keywords) {
+    if (!this.keywords[link_name]) {
+      this.keywords[link_name] = {
+        navigation: keywords.map((keyword) => keyword.toLowerCase()),
+      };
+      return;
+    }
+
+    this.keywords[link_name].navigation = keywords.map((keyword) =>
+      keyword.toLowerCase()
+    );
+  }
+
   get navConfig() {
     return this.store.getObject("navConfig");
   }

app/assets/javascripts/discourse/app/lib/sidebar/admin-nav-map.js

@@ -14,8 +14,9 @@ export const ADMIN_NAV_MAP = [
       {
         name: "admin_whats_new",
         route: "admin.whatsNew",
-        label: "admin.account.sidebar_link.whats_new",
+        label: "admin.account.sidebar_link.whats_new.title",
         icon: "gift",
+        keywords: "admin.account.sidebar_link.whats_new.keywords",
       },
     ],
   },
@@ -159,8 +160,9 @@ export const ADMIN_NAV_MAP = [
         name: "admin_components",
         route: "adminCustomizeThemes",
         routeModels: ["components"],
-        label: "admin.appearance.sidebar_link.components",
+        label: "admin.appearance.sidebar_link.components.title",
         icon: "puzzle-piece",
+        keywords: "admin.appearance.sidebar_link.components.keywords",
       },
       {
         name: "admin_customize_site_texts",

app/assets/javascripts/discourse/app/lib/sidebar/admin-sidebar.js

@@ -239,6 +239,10 @@ function pluginAdminRouteLinks() {
     });
 }
 
+function installedPluginsLinkKeywords() {
+  return (PreloadStore.get("visiblePlugins") || []).mapBy("name");
+}
+
 export default class AdminSidebarPanel extends BaseCustomSidebarPanel {
   key = ADMIN_PANEL;
   hidden = true;
@@ -266,6 +270,10 @@ export default class AdminSidebarPanel extends BaseCustomSidebarPanel {
 
     if (!session.get("safe_mode")) {
       navMap.findBy("name", "plugins").links.push(...pluginAdminRouteLinks());
+      this.adminSidebarStateManager.setLinkKeywords(
+        "admin_installed_plugins",
+        installedPluginsLinkKeywords()
+      );
     }
 
     if (siteSettings.experimental_form_templates) {
@@ -280,7 +288,10 @@ export default class AdminSidebarPanel extends BaseCustomSidebarPanel {
     navMap.forEach((section) =>
       section.links.forEach((link) => {
         if (link.keywords) {
-          this.adminSidebarStateManager.keywords[link.name] = link.keywords;
+          this.adminSidebarStateManager.setLinkKeywords(
+            link.name,
+            I18n.t(link.keywords).split("|")
+          );
         }
       })
     );

config/locales/client.en.yml

@@ -5312,7 +5312,9 @@ en:
         title: "Account"
         sidebar_link:
           backups: "Backups"
-          whats_new: "What's New"
+          whats_new:
+            title: "What's New"
+            keywords: "changelog|feature|release"
 
       community:
         title: "Community"
@@ -5337,7 +5339,9 @@ en:
           emoji: "Emoji"
           navigation: "Navigation"
           themes: "Themes"
-          components: "Components"
+          components:
+            title: "Components"
+            keywords: "theme|extension"
           site_texts: "Site Texts"
 
       email_settings: