DEV: Replace AdminWrapper with body-class/html-class (#24683)

AdminWrapper isn't used (directly) in all-the*

Co-authored-by: David Taylor <david@taylorhq.com>

app/assets/javascripts/admin/addon/components/admin-wrapper.js

@@ -1,15 +0,0 @@
-import Component from "@ember/component";
-
-export default class AdminWrapper extends Component {
-  didInsertElement() {
-    super.didInsertElement(...arguments);
-    document.querySelector("html").classList.add("admin-area");
-    document.querySelector("body").classList.add("admin-interface");
-  }
-
-  willDestroyElement() {
-    super.willDestroyElement(...arguments);
-    document.querySelector("html").classList.remove("admin-area");
-    document.querySelector("body").classList.remove("admin-interface");
-  }
-}

app/assets/javascripts/admin/addon/templates/admin-revamp.hbs

@@ -1,12 +1,13 @@
 {{hide-application-footer}}
-<AdminWrapper @class="container">
-  <div class="row">
-    <div class="full-width">
-      <div class="boxed white admin-content">
-        <div class="admin-contents {{this.adminContentsClassName}}">
-          {{outlet}}
-        </div>
+{{html-class "admin-area"}}
+{{body-class "admin-interface"}}
+
+<div class="row">
+  <div class="full-width">
+    <div class="boxed white admin-content">
+      <div class="admin-contents {{this.adminContentsClassName}}">
+        {{outlet}}
       </div>
     </div>
   </div>
-</AdminWrapper>
+</div>

app/assets/javascripts/admin/addon/templates/admin.hbs

@@ -1,44 +1,45 @@
 {{hide-application-footer}}
-<AdminWrapper @class="container">
-  <div class="row">
-    <div class="full-width">
-      <div class="admin-main-nav">
-        <ul class="nav nav-pills">
-          <NavItem @route="admin.dashboard" @label="admin.dashboard.title" />
-          {{#if this.currentUser.admin}}
-            <NavItem
-              @route="adminSiteSettings"
-              @label="admin.site_settings.title"
-            />
-          {{/if}}
-          <NavItem @route="adminUsers" @label="admin.users.title" />
-          {{#if this.showGroups}}
-            <NavItem @route="groups" @label="admin.groups.title" />
-          {{/if}}
-          {{#if this.showBadges}}
-            <NavItem @route="adminBadges" @label="admin.badges.title" />
-          {{/if}}
-          {{#if this.currentUser.admin}}
-            <NavItem @route="adminEmail" @label="admin.email.title" />
-          {{/if}}
-          <NavItem @route="adminLogs" @label="admin.logs.title" />
-          <NavItem @route="adminCustomize" @label="admin.customize.title" />
-          {{#if this.currentUser.admin}}
-            <NavItem @route="adminApi" @label="admin.api.title" />
-            {{#if this.siteSettings.enable_backups}}
-              <NavItem @route="admin.backups" @label="admin.backups.title" />
-            {{/if}}
-            <NavItem @route="adminPlugins" @label="admin.plugins.title" />
-          {{/if}}
-          <PluginOutlet @name="admin-menu" />
-        </ul>
-      </div>
+{{html-class "admin-area"}}
+{{body-class "admin-interface"}}
 
-      <div class="boxed white admin-content">
-        <div class="admin-contents {{this.adminContentsClassName}}">
-          {{outlet}}
-        </div>
+<div class="row">
+  <div class="full-width">
+    <div class="admin-main-nav">
+      <ul class="nav nav-pills">
+        <NavItem @route="admin.dashboard" @label="admin.dashboard.title" />
+        {{#if this.currentUser.admin}}
+          <NavItem
+            @route="adminSiteSettings"
+            @label="admin.site_settings.title"
+          />
+        {{/if}}
+        <NavItem @route="adminUsers" @label="admin.users.title" />
+        {{#if this.showGroups}}
+          <NavItem @route="groups" @label="admin.groups.title" />
+        {{/if}}
+        {{#if this.showBadges}}
+          <NavItem @route="adminBadges" @label="admin.badges.title" />
+        {{/if}}
+        {{#if this.currentUser.admin}}
+          <NavItem @route="adminEmail" @label="admin.email.title" />
+        {{/if}}
+        <NavItem @route="adminLogs" @label="admin.logs.title" />
+        <NavItem @route="adminCustomize" @label="admin.customize.title" />
+        {{#if this.currentUser.admin}}
+          <NavItem @route="adminApi" @label="admin.api.title" />
+          {{#if this.siteSettings.enable_backups}}
+            <NavItem @route="admin.backups" @label="admin.backups.title" />
+          {{/if}}
+          <NavItem @route="adminPlugins" @label="admin.plugins.title" />
+        {{/if}}
+        <PluginOutlet @name="admin-menu" />
+      </ul>
+    </div>
+
+    <div class="boxed white admin-content">
+      <div class="admin-contents {{this.adminContentsClassName}}">
+        {{outlet}}
       </div>
     </div>
   </div>
-</AdminWrapper>
+</div>

app/assets/javascripts/discourse/app/helpers/body-class.js

@@ -2,11 +2,12 @@ import Helper from "@ember/component/helper";
 import { inject as service } from "@ember/service";
 
 export default class BodyClass extends Helper {
-  @service bodyClasses;
+  @service elementClasses;
 
   compute([...classes]) {
-    this.bodyClasses.registerClasses(
+    this.elementClasses.registerClasses(
       this,
+      document.body,
       classes.flatMap((c) => c?.split(" ")).filter(Boolean)
     );
   }

app/assets/javascripts/discourse/app/helpers/html-class.js

@@ -0,0 +1,14 @@
+import Helper from "@ember/component/helper";
+import { inject as service } from "@ember/service";
+
+export default class HtmlClass extends Helper {
+  @service elementClasses;
+
+  compute([...classes]) {
+    this.elementClasses.registerClasses(
+      this,
+      document.documentElement,
+      classes.flatMap((c) => c?.split(" ")).filter(Boolean)
+    );
+  }
+}

app/assets/javascripts/discourse/app/services/element-classes.js

@@ -3,36 +3,37 @@ import Service from "@ember/service";
 import { disableImplicitInjections } from "discourse/lib/implicit-injections";
 
 @disableImplicitInjections
-export default class BodyClassesService extends Service {
+export default class ElementClassesService extends Service {
+  /** @type Map<Helper, string[]> */
   #helpers = new Map();
 
-  registerClasses(helper, classes) {
+  registerClasses(helper, element, classes) {
     if (this.#helpers.has(helper)) {
       const previousClasses = this.#helpers.get(helper);
 
       this.#helpers.set(helper, classes);
-      this.removeUnusedClasses(previousClasses);
+      this.removeUnusedClasses(element, previousClasses);
     } else {
       this.#helpers.set(helper, classes);
 
       registerDestructor(helper, () => {
         const previousClasses = this.#helpers.get(helper);
         this.#helpers.delete(helper);
-        this.removeUnusedClasses(previousClasses);
+        this.removeUnusedClasses(element, previousClasses);
       });
     }
 
-    for (const bodyClass of classes) {
-      document.body.classList.add(bodyClass);
+    for (const elementClass of classes) {
+      element.classList.add(elementClass);
     }
   }
 
-  removeUnusedClasses(classes) {
+  removeUnusedClasses(element, classes) {
     const remainingClasses = new Set([...this.#helpers.values()].flat());
 
-    for (const bodyClass of classes) {
-      if (!remainingClasses.has(bodyClass)) {
-        document.body.classList.remove(bodyClass);
+    for (const elementClass of classes) {
+      if (!remainingClasses.has(elementClass)) {
+        element.classList.remove(elementClass);
       }
     }
   }