UX: Hide inner site settings sidebar if admin sidebar enabled (#31047)

This experiment hides the list of categories in the inner
sidebar for the main site settings page if the admin sidebar
is enabled. It also defaults the list of settings to "All"
instead of a specific category.

Our theory here is that people who use this page are using
it to find an exact setting, not to go through the categories
one by one. Our admin sidebar also has several groups of important
settings already too, so that can be used for browsing.

Finally, the input on the page focuses when you load it, so
filtering is faster.

app/assets/javascripts/admin/addon/components/admin-site-settings-filter-controls.gjs

@@ -6,6 +6,7 @@ import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import didUpdate from "@ember/render-modifiers/modifiers/did-update";
 import DButton from "discourse/components/d-button";
+import autoFocus from "discourse/modifiers/auto-focus";
 import { i18n } from "discourse-i18n";
 
 export default class AdminSiteSettingsFilterControls extends Component {
@@ -71,6 +72,7 @@ export default class AdminSiteSettingsFilterControls extends Component {
           {{/if}}
           <input
             {{on "input" this.onChangeFilterInput}}
+            {{autoFocus}}
             id="setting-filter"
             class="no-blur admin-site-settings-filter-controls__input"
             placeholder={{i18n "type_to_filter"}}

app/assets/javascripts/admin/addon/controllers/admin-site-settings.js

@@ -9,12 +9,14 @@ import SiteSettingFilter from "discourse/lib/site-setting-filter";
 
 export default class AdminSiteSettingsController extends Controller {
   @service router;
+  @service currentUser;
 
   @alias("model") allSiteSettings;
 
   filter = "";
   visibleSiteSettings = null;
   siteSettingFilter = null;
+  showSettingCategorySidebar = !this.currentUser.use_admin_sidebar;
 
   filterContentNow(filterData, category) {
     this.siteSettingFilter ??= new SiteSettingFilter(this.allSiteSettings);
@@ -23,12 +25,16 @@ export default class AdminSiteSettingsController extends Controller {
       return;
     }
 
-    if (isEmpty(filterData.filter) && !filterData.onlyOverridden) {
-      this.set("visibleSiteSettings", this.allSiteSettings);
-      if (this.categoryNameKey === "all_results") {
-        this.router.transitionTo("adminSiteSettings");
+    // We want to land on All by default if admin sidebar is shown, in this
+    // case we are hiding the inner site setting category sidebar.
+    if (this.showSettingCategorySidebar) {
+      if (isEmpty(filterData.filter) && !filterData.onlyOverridden) {
+        this.set("visibleSiteSettings", this.allSiteSettings);
+        if (this.categoryNameKey === "all_results") {
+          this.router.transitionTo("adminSiteSettings");
+        }
+        return;
       }
-      return;
     }
 
     this.set("filter", filterData.filter);

app/assets/javascripts/admin/addon/routes/admin-site-settings-index.js

@@ -7,12 +7,15 @@ import DiscourseRoute from "discourse/routes/discourse";
 
 export default class AdminSiteSettingsIndexRoute extends DiscourseRoute {
   @service router;
+  @service currentUser;
 
   beforeModel() {
-    this.router.replaceWith(
-      "adminSiteSettingsCategory",
-      this.controllerFor("adminSiteSettings").get("visibleSiteSettings")[0]
-        .nameKey
-    );
+    if (!this.currentUser.use_admin_sidebar) {
+      this.router.replaceWith(
+        "adminSiteSettingsCategory",
+        this.controllerFor("adminSiteSettings").get("visibleSiteSettings")[0]
+          .nameKey
+      );
+    }
   }
 }

app/assets/javascripts/admin/addon/templates/site-settings-category.hbs

@@ -7,10 +7,17 @@
       />
     {{/each}}
     {{#if this.category.hasMore}}
-      <p class="warning">{{i18n
-          "admin.site_settings.more_site_setting_results"
-          count=this.category.maxResults
-        }}</p>
+      {{#if this.currentUser.use_admin_sidebar}}
+        <p class="warning">{{i18n
+            "admin.site_settings.more_site_setting_results_no_category_sidebar"
+            count=this.category.maxResults
+          }}</p>
+      {{else}}
+        <p class="warning">{{i18n
+            "admin.site_settings.more_site_setting_results"
+            count=this.category.maxResults
+          }}</p>
+      {{/if}}
     {{/if}}
   </section>
 {{else}}

app/assets/javascripts/admin/addon/templates/site-settings.hbs

@@ -19,32 +19,39 @@
   @onToggleMenu={{this.toggleMenu}}
 />
 
-<div class="admin-nav admin-site-settings-category-nav pull-left">
-  <ul class="nav nav-stacked">
-    {{#each this.visibleSiteSettings as |category|}}
-      <li
-        class={{concat-class
-          "admin-site-settings-category-nav__item"
-          category.nameKey
-        }}
-      >
-        <LinkTo
-          @route="adminSiteSettingsCategory"
-          @model={{category.nameKey}}
-          class={{category.nameKey}}
-          title={{category.name}}
+{{#if this.showSettingCategorySidebar}}
+  <div class="admin-nav admin-site-settings-category-nav pull-left">
+    <ul class="nav nav-stacked">
+      {{#each this.visibleSiteSettings as |category|}}
+        <li
+          class={{concat-class
+            "admin-site-settings-category-nav__item"
+            category.nameKey
+          }}
         >
-          {{category.name}}
-          {{#if category.count}}
-            <span class="count">({{category.count}})</span>
-          {{/if}}
-        </LinkTo>
-      </li>
-    {{/each}}
-  </ul>
-</div>
+          <LinkTo
+            @route="adminSiteSettingsCategory"
+            @model={{category.nameKey}}
+            class={{category.nameKey}}
+            title={{category.name}}
+          >
+            {{category.name}}
+            {{#if category.count}}
+              <span class="count">({{category.count}})</span>
+            {{/if}}
+          </LinkTo>
+        </li>
+      {{/each}}
+    </ul>
+  </div>
+{{/if}}
 
-<div class="admin-detail pull-left mobile-closed">
+<div
+  class={{concat-class
+    "admin-detail pull-left mobile-closed"
+    (unless this.showSettingCategorySidebar "-without-inner-sidebar")
+  }}
+>
   {{outlet}}
 </div>
 

app/assets/stylesheets/common/admin/site-settings.scss

@@ -19,3 +19,10 @@
     }
   }
 }
+
+.admin-site-settings {
+  .admin-detail.-without-inner-sidebar {
+    border-left: 0;
+    width: 100%;
+  }
+}

config/locales/client.en.yml

@@ -7228,6 +7228,9 @@ en:
         more_site_setting_results:
           one: "There is more than %{count} result. Please refine your search or select a category."
           other: "There are more than %{count} results. Please refine your search or select a category."
+        more_site_setting_results_no_category_sidebar:
+          one: "There is more than %{count} result. Please refine your search."
+          other: "There are more than %{count} results. Please refine your search."
         clear_filter: "Clear"
         add_url: "add URL"
         add_host: "add host"