feat: Admin debug mode warning (#3590)

* feat: Admin debug mode warning

* prettier

* Wrap in Alert component

* feat: add `title` and `icon` attributes to the `Alert` component

Signed-off-by: Sami Mazouz <ilyasmazouz@gmail.com>

* Update framework/core/js/src/admin/components/DebugWarningWidget.js

Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>

* Update framework/core/locale/core.yml

Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>

* prettier

* chore: convert to TS

Signed-off-by: Sami Mazouz <ilyasmazouz@gmail.com>

* Update framework/core/js/src/common/components/Alert.tsx

Co-authored-by: David Wheatley <hi@davwheat.dev>

* chore: add docs link

Signed-off-by: Sami Mazouz <ilyasmazouz@gmail.com>
Co-authored-by: Sami Mazouz <ilyasmazouz@gmail.com>
Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
Co-authored-by: David Wheatley <hi@davwheat.dev>

framework/core/js/src/admin/components/DashboardPage.tsx

@@ -4,6 +4,7 @@ import ExtensionsWidget from './ExtensionsWidget';
 import ItemList from '../../common/utils/ItemList';
 import AdminPage from './AdminPage';
 import type { Children } from 'mithril';
+import DebugWarningWidget from './DebugWarningWidget';
 
 export default class DashboardPage extends AdminPage {
   headerInfo() {
@@ -22,6 +23,10 @@ export default class DashboardPage extends AdminPage {
   availableWidgets(): ItemList<Children> {
     const items = new ItemList<Children>();
 
+    if (app.data.debugEnabled) {
+      items.add('debug-warning', <DebugWarningWidget />, 100);
+    }
+
     items.add('status', <StatusWidget />, 30);
 
     items.add('extensions', <ExtensionsWidget />, 10);

framework/core/js/src/admin/components/DebugWarningWidget.tsx

@@ -0,0 +1,20 @@
+import app from '../../admin/app';
+import Alert from '../../common/components/Alert';
+import Link from '../../common/components/Link';
+import DashboardWidget from './DashboardWidget';
+
+export default class DebugWarningWidget extends DashboardWidget {
+  className() {
+    return 'DebugWarningWidget';
+  }
+
+  content() {
+    return (
+      <Alert type="warning" dismissible={false} title={app.translator.trans('core.admin.debug-warning.label')} icon="fas fa-exclamation-triangle">
+        {app.translator.trans('core.admin.debug-warning.detail', {
+          link: <Link href="https://docs.flarum.org/troubleshoot/#step-0-activate-debug-mode" external={true} target="_blank" />,
+        })}
+      </Alert>
+    );
+  }
+}

framework/core/js/src/common/components/Alert.tsx

@@ -5,10 +5,15 @@ import extract from '../utils/extract';
 import type Mithril from 'mithril';
 import classList from '../utils/classList';
 import app from '../app';
+import iconHelper from '../helpers/icon';
 
 export interface AlertAttrs extends ComponentAttrs {
   /** The type of alert this is. Will be used to give the alert a class name of `Alert--{type}`. */
   type?: string;
+  /** Title of the alert. Optional. */
+  title?: Mithril.Children;
+  /** Icon used next to the title. Optional. */
+  icon?: string;
   /** An array of controls to show in the alert. */
   controls?: Mithril.Children;
   /** Whether or not the alert can be dismissed. */
@@ -28,6 +33,8 @@ export default class Alert<T extends AlertAttrs = AlertAttrs> extends Component<
     const type = extract(attrs, 'type');
     attrs.className = classList('Alert', `Alert--${type}`, attrs.className);
 
+    const title = extract(attrs, 'title');
+    const icon = extract(attrs, 'icon');
     const content = extract(attrs, 'content') || vnode.children;
     const controls = (extract(attrs, 'controls') || []) as Mithril.Vnode[];
 
@@ -51,6 +58,12 @@ export default class Alert<T extends AlertAttrs = AlertAttrs> extends Component<
 
     return (
       <div {...attrs}>
+        {!!title && (
+          <div class="Alert-title">
+            {!!icon && <span class="Alert-title-icon">{iconHelper(icon)}</span>}
+            <span class="Alert-title-text">{title}</span>
+          </div>
+        )}
         <span class="Alert-body">{content}</span>
         <ul class="Alert-controls">{listItems(controls.concat(dismissControl))}</ul>
       </div>

framework/core/less/admin.less

@@ -3,6 +3,7 @@
 @import "admin/AdminHeader";
 @import "admin/AdminNav";
 @import "admin/DashboardPage";
+@import "admin/DebugWarningWidget";
 @import "admin/BasicsPage";
 @import "admin/PermissionsPage";
 @import "admin/EditGroupModal";

framework/core/less/admin/DebugWarningWidget.less

@@ -0,0 +1,3 @@
+.DebugWarningWidget {
+  padding: 0;
+}

framework/core/less/common/Alert.less

@@ -61,4 +61,15 @@
       vertical-align: 0;
     }
   }
+
+  &:empty {
+    display: none;
+  }
+}
+.Alert-title {
+  margin-bottom: 8px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }

framework/core/locale/core.yml

@@ -59,6 +59,14 @@ core:
       title: Dashboard
       tools_button: Tools
 
+    # These translations are usin in the debug warning widget.
+    debug-warning:
+      detail: |
+        When <code>debug</code> mode is active, Flarum will rebuild its <code>JavaScript</code> and <code>CSS</code> assets on every request, and could also potentially leak other information, such as database secrets, environment variables, etc.
+
+        It is highly recommended to disable <code>debug</code> in your <code>config.php</code> file in production. See <link>Flarum docs</link> for more information.
+      label: Debug mode active
+
     # These translations are used in the Edit Custom CSS modal dialog.
     edit_css:
       customize_text: "Customize your forum's appearance by adding your own Less/CSS code to be applied on top of Flarum's <a>default styles</a>."

framework/core/src/Admin/Content/AdminPayload.php

@@ -10,6 +10,7 @@
 namespace Flarum\Admin\Content;
 
 use Flarum\Extension\ExtensionManager;
+use Flarum\Foundation\Config;
 use Flarum\Frontend\Document;
 use Flarum\Group\Permission;
 use Flarum\Settings\Event\Deserializing;
@@ -18,6 +19,7 @@ use Flarum\User\User;
 use Illuminate\Contracts\Container\Container;
 use Illuminate\Contracts\Events\Dispatcher;
 use Illuminate\Database\ConnectionInterface;
+use Illuminate\Support\Arr;
 use Psr\Http\Message\ServerRequestInterface as Request;
 
 class AdminPayload
@@ -42,25 +44,33 @@ class AdminPayload
      */
     protected $db;
 
+    /**
+     * @var Config
+     */
+    protected $config;
+
     /**
      * @param Container $container
      * @param SettingsRepositoryInterface $settings
      * @param ExtensionManager $extensions
      * @param ConnectionInterface $db
      * @param Dispatcher $events
+     * @param Config $config
      */
     public function __construct(
         Container $container,
         SettingsRepositoryInterface $settings,
         ExtensionManager $extensions,
         ConnectionInterface $db,
-        Dispatcher $events
+        Dispatcher $events,
+        Config $config
     ) {
         $this->container = $container;
         $this->settings = $settings;
         $this->extensions = $extensions;
         $this->db = $db;
         $this->events = $events;
+        $this->config = $config;
     }
 
     public function __invoke(Document $document, Request $request)
@@ -82,6 +92,7 @@ class AdminPayload
 
         $document->payload['phpVersion'] = PHP_VERSION;
         $document->payload['mysqlVersion'] = $this->db->selectOne('select version() as version')->version;
+        $document->payload['debugEnabled'] = Arr::get($this->config, 'debug');
 
         /**
          * Used in the admin user list. Implemented as this as it matches the API in flarum/statistics.