DEV: Add new experimental admin UI route and sidebar (#23952)

This commit adds a new admin UI under the route `/admin-revamp`, which is
only accessible if the user is in a group defined by the new `enable_experimental_admin_ui_groups` site setting. It
also adds a special `admin` sidebar panel that is shown instead of the `main`
forum one when the admin is in this area.

![image](https://github.com/discourse/discourse/assets/920448/fa0f25e1-e178-4d94-aa5f-472fd3efd787)

We also add an "Admin Revamp" sidebar link to the community section, which
will only appear if the user is in the setting group:

![image](https://github.com/discourse/discourse/assets/920448/ec05ca8b-5a54-442b-ba89-6af35695c104)

Within this there are subroutes defined like `/admin-revamp/config/:area`,
these areas could contain any UI imaginable, this is just laying down an
initial idea of the structure and how the sidebar will work. Sidebar links are
currently hardcoded.

Some other changes:

* Changed the `main` and `chat` panels sidebar panel keys to use exported const values for reuse
* Allowed custom sidebar sections to hide their headers with the `hideSectionHeader` option
* Add a `groupSettingArray` setting on `this.siteSettings` in JS, which accepts a group site setting name
  and splits it by `|` then converts the items in the array to integers, similar to the `_map` magic for ruby
  group site settings
* Adds a `hidden` option for sidebar panels which prevents them from showing in separated mode and prevents
  the switch button from being shown

---------

Co-authored-by: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>

plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js

@@ -11,7 +11,10 @@ import getURL from "discourse-common/lib/get-url";
 import { bind } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 import ChatModalNewMessage from "discourse/plugins/chat/discourse/components/chat/modal/new-message";
-import { initSidebarState } from "discourse/plugins/chat/discourse/lib/init-sidebar-state";
+import {
+  CHAT_PANEL,
+  initSidebarState,
+} from "discourse/plugins/chat/discourse/lib/init-sidebar-state";
 
 export default {
   name: "chat-sidebar",
@@ -28,7 +31,7 @@ export default {
       api.addSidebarPanel(
         (BaseCustomSidebarPanel) =>
           class ChatSidebarPanel extends BaseCustomSidebarPanel {
-            key = "chat";
+            key = CHAT_PANEL;
             switchButtonLabel = I18n.t("sidebar.panels.chat.label");
             switchButtonIcon = "d-chat";
             switchButtonDefaultUrl = getURL("/chat");
@@ -196,7 +199,7 @@ export default {
 
             return SidebarChatChannelsSection;
           },
-          "chat"
+          CHAT_PANEL
         );
       }
 

plugins/chat/assets/javascripts/discourse/lib/init-sidebar-state.js

@@ -1,7 +1,14 @@
+import { ADMIN_PANEL, MAIN_PANEL } from "discourse/services/sidebar-state";
 import { getUserChatSeparateSidebarMode } from "discourse/plugins/chat/discourse/lib/get-user-chat-separate-sidebar-mode";
 
+export const CHAT_PANEL = "chat";
+
 export function initSidebarState(api, user) {
-  api.setSidebarPanel("main");
+  if (api.getSidebarPanel()?.key === ADMIN_PANEL) {
+    return;
+  }
+
+  api.setSidebarPanel(MAIN_PANEL);
 
   const chatSeparateSidebarMode = getUserChatSeparateSidebarMode(user);
   if (chatSeparateSidebarMode.fullscreen) {

plugins/chat/assets/javascripts/discourse/routes/chat.js

@@ -6,7 +6,10 @@ import { scrollTop } from "discourse/mixins/scroll-top";
 import DiscourseRoute from "discourse/routes/discourse";
 import I18n from "discourse-i18n";
 import { getUserChatSeparateSidebarMode } from "discourse/plugins/chat/discourse/lib/get-user-chat-separate-sidebar-mode";
-import { initSidebarState } from "discourse/plugins/chat/discourse/lib/init-sidebar-state";
+import {
+  CHAT_PANEL,
+  initSidebarState,
+} from "discourse/plugins/chat/discourse/lib/init-sidebar-state";
 
 export default class ChatRoute extends DiscourseRoute {
   @service chat;
@@ -62,7 +65,7 @@ export default class ChatRoute extends DiscourseRoute {
 
   activate() {
     withPluginApi("1.8.0", (api) => {
-      api.setSidebarPanel("chat");
+      api.setSidebarPanel(CHAT_PANEL);
 
       const chatSeparateSidebarMode = getUserChatSeparateSidebarMode(
         this.currentUser

plugins/chat/assets/javascripts/discourse/services/chat-state-manager.js

@@ -4,6 +4,7 @@ import KeyValueStore from "discourse/lib/key-value-store";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { defaultHomepage } from "discourse/lib/utilities";
 import Site from "discourse/models/site";
+import { MAIN_PANEL } from "discourse/services/sidebar-state";
 import getURL from "discourse-common/lib/get-url";
 import { getUserChatSeparateSidebarMode } from "discourse/plugins/chat/discourse/lib/get-user-chat-separate-sidebar-mode";
 
@@ -60,7 +61,7 @@ export default class ChatStateManager extends Service {
   didOpenDrawer(url = null) {
     withPluginApi("1.8.0", (api) => {
       if (getUserChatSeparateSidebarMode(this.currentUser).always) {
-        api.setSidebarPanel("main");
+        api.setSidebarPanel(MAIN_PANEL);
         api.setSeparatedSidebarMode();
         api.hideSidebarSwitchPanelButtons();
       } else {
@@ -81,7 +82,7 @@ export default class ChatStateManager extends Service {
 
   didCloseDrawer() {
     withPluginApi("1.8.0", (api) => {
-      api.setSidebarPanel("main");
+      api.setSidebarPanel(MAIN_PANEL);
 
       const chatSeparateSidebarMode = getUserChatSeparateSidebarMode(
         this.currentUser

plugins/chat/assets/javascripts/discourse/services/chat.js

@@ -68,9 +68,7 @@ export default class Chat extends Service {
     return (
       this.currentUser.staff ||
       this.currentUser.isInAnyGroups(
-        (this.siteSettings.direct_message_enabled_groups || "11") // trust level 1 auto group
-          .split("|")
-          .map((groupId) => parseInt(groupId, 10))
+        this.siteSettings.groupSettingArray("direct_message_enabled_groups")
       )
     );
   }