From fc43191ae332b641456572d26b3e00295cbae73d Mon Sep 17 00:00:00 2001
From: Alexander Skvortsov <sasha.skvortsov109@gmail.com>
Date: Mon, 13 Dec 2021 01:39:59 -0500
Subject: [PATCH] PermissionGrid fixes

Fixes https://github.com/flarum/core/issues/3169#issuecomment-979470794

- Restore wrapping `scope.render` results in a table cell tag. This was accidentially introduced in 5a26dd8c4bce8539af66c4dd3b71f7d7366f8c30, and caused the issue linked above
- Rename the `SettingDropdown` attr `key` to `setting` in order to avoid naming clashes with Mithril vnode keys. `key` still works, but is deprecated.
---
 .../core/js/src/admin/components/PermissionGrid.tsx   |  6 ++++--
 .../core/js/src/admin/components/SettingDropdown.js   | 11 ++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/framework/core/js/src/admin/components/PermissionGrid.tsx b/framework/core/js/src/admin/components/PermissionGrid.tsx
index 6044576b0..ef2a71c0c 100644
--- a/framework/core/js/src/admin/components/PermissionGrid.tsx
+++ b/framework/core/js/src/admin/components/PermissionGrid.tsx
@@ -38,11 +38,13 @@ export default class PermissionGrid<CustomAttrs extends IPermissionGridAttrs = I
 
     const permissionCells = (permission: PermissionGridEntry | { children: PermissionGridEntry[] }) => {
       return scopes.map((scope) => {
+        // This indicates the "permission" is a permission category,
+        // in which case we return an empty table cell.
         if ('children' in permission) {
           return <td></td>;
         }
 
-        return scope.render(permission);
+        return <td>{scope.render(permission)}</td>;
       });
     };
 
@@ -416,7 +418,7 @@ export default class PermissionGrid<CustomAttrs extends IPermissionGridAttrs = I
             });
           }
 
-          return '';
+          return undefined;
         },
       },
       100
diff --git a/framework/core/js/src/admin/components/SettingDropdown.js b/framework/core/js/src/admin/components/SettingDropdown.js
index b800215b4..91953d67e 100644
--- a/framework/core/js/src/admin/components/SettingDropdown.js
+++ b/framework/core/js/src/admin/components/SettingDropdown.js
@@ -1,4 +1,4 @@
-import app from '../../admin/app';
+import app from '../app';
 import SelectDropdown from '../../common/components/SelectDropdown';
 import Button from '../../common/components/Button';
 import saveSettings from '../utils/saveSettings';
@@ -11,18 +11,23 @@ export default class SettingDropdown extends SelectDropdown {
     attrs.buttonClassName = 'Button Button--text';
     attrs.caretIcon = 'fas fa-caret-down';
     attrs.defaultLabel = 'Custom';
+
+    if ('key' in attrs) {
+      attrs.setting = attrs.key;
+      delete attrs.key;
+    }
   }
 
   view(vnode) {
     return super.view({
       ...vnode,
       children: this.attrs.options.map(({ value, label }) => {
-        const active = app.data.settings[this.attrs.key] === value;
+        const active = app.data.settings[this.attrs.setting] === value;
 
         return Button.component(
           {
             icon: active ? 'fas fa-check' : true,
-            onclick: saveSettings.bind(this, { [this.attrs.key]: value }),
+            onclick: saveSettings.bind(this, { [this.attrs.setting]: value }),
             active,
           },
           label