Implement hidden permission groups (#2129)

Only users that have the new `viewHiddenGroups` permissions will be able to see these groups.

You might want this when you want to give certain users special permissions, but don't want to make your authorization scheme public to regular users.

Co-authored-by: luceos <daniel+github@klabbers.email>

framework/core/js/src/admin/components/EditGroupModal.js

@@ -3,6 +3,7 @@ import Button from '../../common/components/Button';
 import Badge from '../../common/components/Badge';
 import Group from '../../common/models/Group';
 import ItemList from '../../common/utils/ItemList';
+import Switch from '../../common/components/Switch';
 
 /**
  * The `EditGroupModal` component shows a modal dialog which allows the user
@@ -16,6 +17,7 @@ export default class EditGroupModal extends Modal {
     this.namePlural = m.prop(this.group.namePlural() || '');
     this.icon = m.prop(this.group.icon() || '');
     this.color = m.prop(this.group.color() || '');
+    this.isHidden = m.prop(this.group.isHidden() || false);
   }
 
   className() {
@@ -89,6 +91,18 @@ export default class EditGroupModal extends Modal {
       10
     );
 
+    items.add(
+      'hidden',
+      <div className="Form-group">
+        {Switch.component({
+          state: !!Number(this.isHidden()),
+          children: app.translator.trans('core.admin.edit_group.hide_label'),
+          onchange: this.isHidden,
+        })}
+      </div>,
+      10
+    );
+
     items.add(
       'submit',
       <div className="Form-group">
@@ -118,6 +132,7 @@ export default class EditGroupModal extends Modal {
       namePlural: this.namePlural(),
       color: this.color(),
       icon: this.icon(),
+      isHidden: this.isHidden(),
     };
   }
 

framework/core/js/src/admin/components/PermissionGrid.js

@@ -112,6 +112,16 @@ export default class PermissionGrid extends Component {
       100
     );
 
+    items.add(
+      'viewHiddenGroups',
+      {
+        icon: 'fas fa-users',
+        label: app.translator.trans('core.admin.permissions.view_hidden_groups_label'),
+        permission: 'viewHiddenGroups',
+      },
+      100
+    );
+
     items.add(
       'viewUserList',
       {

framework/core/js/src/common/models/Group.js

@@ -7,6 +7,7 @@ Object.assign(Group.prototype, {
   namePlural: Model.attribute('namePlural'),
   color: Model.attribute('color'),
   icon: Model.attribute('icon'),
+  isHidden: Model.attribute('isHidden'),
 });
 
 Group.ADMINISTRATOR_ID = '1';