From 961390da465108c78ba5c646e291f97af587a17a Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Wed, 11 Aug 2021 21:42:25 +0200
Subject: [PATCH] Add frontend code

---
 js/src/admin/compat.js                   |   2 +
 js/src/admin/components/AdvancedPage.tsx | 152 +++++++++++++++++++++++
 js/src/admin/routes.js                   |   5 +-
 less/admin.less                          |   1 +
 less/admin/AdvancedPage.less             |  33 +++++
 locale/core.yml                          |  28 +++++
 6 files changed, 219 insertions(+), 2 deletions(-)
 create mode 100644 js/src/admin/components/AdvancedPage.tsx
 create mode 100644 less/admin/AdvancedPage.less

diff --git a/js/src/admin/compat.js b/js/src/admin/compat.js
index 96b13bc5a..87fcaf929 100644
--- a/js/src/admin/compat.js
+++ b/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,
 });
diff --git a/js/src/admin/components/AdvancedPage.tsx b/js/src/admin/components/AdvancedPage.tsx
new file mode 100644
index 000000000..b2b7e118f
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/js/src/admin/routes.js b/js/src/admin/routes.js
index bc9034185..c2cc60191 100644
--- a/js/src/admin/routes.js
+++ b/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 },
diff --git a/less/admin.less b/less/admin.less
index 772207002..84725cfaf 100644
--- a/less/admin.less
+++ b/less/admin.less
@@ -11,3 +11,4 @@
 @import "admin/AppearancePage";
 @import "admin/MailPage";
 @import "admin/UsersListPage.less";
+@import "admin/AdvancedPage.less";
diff --git a/less/admin/AdvancedPage.less b/less/admin/AdvancedPage.less
new file mode 100644
index 000000000..b0eb330b8
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
diff --git a/locale/core.yml b/locale/core.yml
index cc6c527a0..520280eae 100644
--- a/locale/core.yml
+++ b/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