Add frontend code

js/src/admin/compat.js

@@ -34,6 +34,7 @@ import EditCustomCssModal from './components/EditCustomCssModal';
 import EditGroupModal from './components/EditGroupModal';
 import routes from './routes';
 import AdminApplication from './AdminApplication';
+import AdvancedPage from './components/AdvancedPage';
 
 export default Object.assign(compat, {
   'utils/saveSettings': saveSettings,
@@ -68,6 +69,7 @@ export default Object.assign(compat, {
   'components/AdminHeader': AdminHeader,
   'components/EditCustomCssModal': EditCustomCssModal,
   'components/EditGroupModal': EditGroupModal,
+  'components/AdvancedPage': AdvancedPage,
   routes: routes,
   AdminApplication: AdminApplication,
 });

js/src/admin/components/AdvancedPage.tsx

@@ -0,0 +1,152 @@
+import Mithril from 'mithril';
+import Link from '../../common/components/Link';
+import classList from '../../common/utils/classList';
+import ItemList from '../../common/utils/ItemList';
+import app from '../app';
+
+import AdminPage from './AdminPage';
+
+export interface IAdvancedPageAttrs extends Mithril.Attributes {}
+
+export interface ICreateDriverComponentOptions<Options extends string[]> {
+  /**
+   * The default driver value.
+   *
+   * This will appear selected if the driver is not specified.
+   */
+  defaultValue: Options[number];
+  /**
+   * Custom class to apply to the `<select>` component.
+   *
+   * This is applied in addition to the default `AdvancedPage-driverSelect` class.
+   */
+  className: string;
+}
+
+export default class AdvancedPage extends AdminPage {
+  oninit(vnode: Mithril.Vnode<IAdvancedPageAttrs, this>) {
+    super.oninit(vnode);
+  }
+
+  headerInfo() {
+    return {
+      className: 'AdvancedPage',
+      icon: 'fas fa-rocket',
+      title: app.translator.trans('core.admin.advanced.title'),
+      description: app.translator.trans('core.admin.advanced.description'),
+    };
+  }
+
+  content() {
+    return (
+      <>
+        <form class="Form">{this.items().toArray()}</form>
+      </>
+    );
+  }
+
+  items(): ItemList {
+    const items = new ItemList();
+
+    if (!app.data.settings.advanced_settings_pane_enabled) {
+      items.add(
+        'page_not_enabled',
+        // TODO: Add link to docs page
+        <p class="AdvancedPage-notEnabledWarning">
+          {app.translator.trans('core.admin.advanced.not_enabled_warning', { a: <Link external href="https://docs.flarum.org/" /> })}
+        </p>,
+        110
+      );
+    } else {
+      items.add(
+        'large_community_text',
+        // TODO: Add link to docs page
+        <p class="AdvancedPage-congratsText">
+          {app.translator.trans('core.admin.advanced.large_community_note', { a: <Link external href="https://docs.flarum.org/" /> })}
+        </p>,
+        110
+      );
+    }
+
+    items.add(
+      'drivers',
+      <fieldset class="Form-group AdvancedPage-category">
+        <legend>{app.translator.trans('core.admin.advanced.drivers.legend')}</legend>
+
+        {this.drivers().toArray()}
+      </fieldset>,
+      90
+    );
+
+    items.add('save', this.submitButton(), -10);
+
+    return items;
+  }
+
+  drivers(): ItemList {
+    const items = new ItemList();
+
+    items.add(
+      'queueDriver',
+      this.createDriverComponent('queue_driver', 'core.admin.advanced.drivers.queue', app.data.queueDrivers, {
+        className: 'AdvancedPage-queueDriver',
+        defaultValue: 'database',
+      }),
+      100
+    );
+
+    return items;
+  }
+
+  /**
+   * Build a form component for a given driver.
+   *
+   * Requires the follow translations under the given prefix:
+   * - `driver_heading` (shown as legend for the form group)
+   * - `driver_label` (shown as the label for the select box)
+   * - `names.{driver_id}` (shown as the options for the select box)
+   *
+   * @param settingKey The setting key for the driver.
+   * @param driverTranslatorPrefix The prefix used for translations.
+   * @param driverOptions An array of possible driver values.
+   * @param options Optional settings for the component.
+   *
+   * @example <caption>Queue driver</caption>
+   *          this.createDriverComponent(
+   *            'queue_driver',
+   *            'core.admin.advanced.drivers.queue',
+   *            [ 'database', 'sync' ],
+   *            },
+   *            {
+   *              defaultValue: 'database',
+   *            },
+   *          );
+   */
+  createDriverComponent<Options extends string[]>(
+    settingKey: string,
+    driverTranslatorPrefix: string,
+    driverOptions: Options,
+    options: Partial<ICreateDriverComponentOptions<Options>> = {}
+  ): JSX.Element {
+    return (
+      <fieldset class="Form-group">
+        <legend>{app.translator.trans(`${driverTranslatorPrefix}.driver_heading`)}</legend>
+
+        {this.buildSettingComponent({
+          type: 'select',
+          setting: settingKey,
+          options: driverOptions.reduce(
+            (acc, value) => ({
+              ...acc,
+              [value]: app.translator.trans(`${driverTranslatorPrefix}.names.${value}`),
+            }),
+            {} as Record<Options[number], ReturnType<typeof app.translator.trans>>
+          ),
+          default: options.defaultValue,
+          label: app.translator.trans(`${driverTranslatorPrefix}.driver_label`),
+          className: classList('AdvancedPage-driverSelect', options.className),
+        })}
+      </fieldset>
+    );
+  }
+}

js/src/admin/routes.js

@@ -9,9 +9,9 @@ import ExtensionPage from './components/ExtensionPage';
 import ExtensionPageResolver from './resolvers/ExtensionPageResolver';
 
 /**
- * The `routes` initializer defines the forum app's routes.
+ * The `routes` initializer defines the admin app's routes.
  *
- * @param {App} app
+ * @param {import('./app').default} app
  */
 export default function (app) {
   app.routes = {
@@ -20,6 +20,7 @@ export default function (app) {
     advanced: { path: '/advanced', component: AdvancedPage },
     permissions: { path: '/permissions', component: PermissionsPage },
     appearance: { path: '/appearance', component: AppearancePage },
+    advanced: { path: '/advanced', component: AdvancedPage },
     mail: { path: '/mail', component: MailPage },
     users: { path: '/users', component: UserListPage },
     extension: { path: '/extension/:id', component: ExtensionPage, resolverClass: ExtensionPageResolver },

less/admin.less

@@ -11,3 +11,4 @@
 @import "admin/AppearancePage";
 @import "admin/MailPage";
 @import "admin/UsersListPage.less";
+@import "admin/AdvancedPage.less";

less/admin/AdvancedPage.less

@@ -0,0 +1,33 @@
+.AdvancedPage {
+  &-notEnabledWarning,
+  &-congratsText {
+    padding: 8px 8px 8px 12px;
+    max-width: 600px;
+  }
+
+  &-notEnabledWarning {
+    border-left: 8px solid @error-color;
+    background: fade(@error-color, 5%);
+  }
+
+  &-congratsText {
+    border-left: 8px solid @control-color;
+  }
+
+  &-category {
+    &:first-of-type {
+      margin-top: 16px;
+    }
+
+    > legend {
+      font-size: 1.25rem;
+    }
+
+    fieldset {
+      > legend {
+        font-size: 1.1rem;
+        margin-bottom: 4px;
+      }
+    }
+  }
+}

locale/core.yml

@@ -6,6 +6,32 @@ core:
 
   # Translations in this namespace are used by the admin interface.
   admin:
+    advanced:
+      description: Settings relating to Flarum's scalability.
+
+      drivers:
+        legend: Drivers
+
+        queue:
+          driver_heading: Queue Driver
+          driver_label: Choose a Queue Driver
+
+          names:
+            database: Database
+            sync: Sync
+
+      # Shown on the page when it's meant to be enabled
+      large_community_note: |
+        ℹ️ This page is intended for very active communities, like yours! Great job! Modifying
+        some of these settings may require advanced setup or create extra load for your
+        installation. <a>Learn more about these settings.</a>
+      # Shown on the page when it's hidden and was directly navigated to
+      not_enabled_warning: |
+        ⚠️ This page is intended for very active communities. This page is hidden for your
+        forum because you don't meet the recommended criteria for modifying these settings.
+        Doing so may require advanced setup or create extra load for your installation.
+        <a>Learn more about these settings.</a>
+      title: Advanced settings
 
     # These translations are used in the Appearance page.
     appearance:
@@ -143,6 +169,8 @@ core:
 
     # These translations are used in the navigation bar.
     nav:
+      advanced_button: => core.admin.advanced.title
+      advanced_title: => core.admin.advanced.description
       appearance_button: => core.admin.appearance.title
       appearance_title: => core.admin.appearance.description
       basics_button: => core.admin.basics.title