feat(CommunityPermissions): Limit of 5 permissions for "Become member" permission type

Closes: #9536

storybook/pages/CommunityNewPermissionViewPage.qml

@@ -25,7 +25,8 @@ SplitView {
             isEditState: isEditStateCheckBox.checked
             isPrivate: isPrivateCheckBox.checked
             isOwner: isOwnerCheckBox.checked
-            duplicationWarningVisible: isDuplicationWarningVisibleCheckBox.checked
+            permissionDuplicated: isPermissionDuplicatedCheckBox.checked
+            permissionTypeLimitReached: isLimitReachedCheckBox.checked
 
             assetsModel: AssetsModel {}
             collectiblesModel: CollectiblesModel {}
@@ -78,9 +79,15 @@ SplitView {
                 }
 
                 CheckBox {
-                    id: isDuplicationWarningVisibleCheckBox
+                    id: isPermissionDuplicatedCheckBox
 
-                    text: "Is duplication warning visible"
+                    text: "Is permission duplicated"
+                }
+
+                CheckBox {
+                    id: isLimitReachedCheckBox
+
+                    text: "Is limit reached"
                 }
             }
 

ui/app/AppLayouts/Chat/controls/community/PermissionTypes.qml

@@ -69,4 +69,18 @@ QtObject {
         return permissionType === PermissionTypes.Type.Admin
                 || permissionType === PermissionTypes.Type.Member
     }
+
+    function getPermissionsCountLimit(permissionType) {
+        if (permissionType === PermissionTypes.Type.Member)
+            return 5
+
+        return -1
+    }
+
+    function getPermissionsLimitWarning(permissionType) {
+        if (permissionType !== PermissionTypes.Type.Member)
+            return ""
+
+        return qsTr("Max of 5 ‘become member’ permissions for this Community has been reached. You will need to delete an existing ‘become member’ permission before you can add a new one.")
+    }
 }

ui/app/AppLayouts/Chat/controls/community/qmldir

@@ -4,5 +4,6 @@ HoldingTypes 1.0 HoldingTypes.qml
 HoldingsDropdown 1.0 HoldingsDropdown.qml
 InDropdown 1.0 InDropdown.qml
 PermissionItem 1.0 PermissionItem.qml
+PermissionsDropdown 1.0 PermissionsDropdown.qml
 singleton PermissionTypes 1.0 PermissionTypes.qml
 singleton TokenCategories 1.0 TokenCategories.qml

ui/app/AppLayouts/Chat/panels/communities/CommunityPermissionsSettingsPanel.qml

@@ -181,7 +181,7 @@ SettingsPageLayout {
             permissionType: d.permissionTypeToEdit
             isPrivate: d.isPrivateToEditValue
 
-            duplicationWarningVisible: {
+            permissionDuplicated: {
                 // dependencies
                 holdingsTracker.revision
                 channelsTracker.revision
@@ -212,6 +212,24 @@ SettingsPageLayout {
                 return false
             }
 
+            permissionTypeLimitReached: {
+                const type = dirtyValues.permissionType
+                const limit = PermissionTypes.getPermissionsCountLimit(type)
+
+                if (limit === -1)
+                    return false
+
+                const model = root.permissionsModel
+                const count = model.rowCount()
+                let sameTypeCount = 0
+
+                for (let i = 0; i < count; i++)
+                    if (type === ModelUtils.get(model, i, "permissionType"))
+                        sameTypeCount++
+
+                return limit <= sameTypeCount
+            }
+
             onCreatePermissionClicked: {
                 const holdings = ModelUtils.modelToArray(
                                    dirtyValues.selectedHoldingsModel,
@@ -269,7 +287,8 @@ SettingsPageLayout {
             Binding {
                 target: root
                 property: "saveChangesButtonEnabled"
-                value: !communityNewPermissionView.duplicationWarningVisible
+                value: !communityNewPermissionView.permissionDuplicated
+                       && !communityNewPermissionView.permissionTypeLimitReached
                        && communityNewPermissionView.isFullyFilled
             }
         }

ui/app/AppLayouts/Chat/panels/communities/PermissionWarningPanel.qml

@@ -10,12 +10,14 @@ import utils 1.0
 Control {
     id: root
 
+    property alias text: warningText.text
+
     spacing: Style.current.halfPadding
 
     QtObject {
         id: d
 
-        property int iconSize: 20
+        readonly property int iconSize: 20
     }
 
     contentItem: RowLayout {
@@ -29,12 +31,14 @@ Control {
             color: Theme.palette.dangerColor1
             icon: "warning"
         }
+
         StatusBaseText {
+            id: warningText
+
             Layout.fillWidth: true
             wrapMode: Text.Wrap
             font.pixelSize: Style.current.primaryTextFontSize
             color: Theme.palette.dangerColor1
-            text: qsTr("Permission with same properties is already active, edit properties to create a new permission.")
         }
     }
 }

ui/app/AppLayouts/Chat/panels/communities/qmldir

@@ -8,6 +8,6 @@ HidePermissionPanel 1.0 HidePermissionPanel.qml
 JoinPermissionsOverlayPanel 1.0 JoinPermissionsOverlayPanel.qml
 MintTokensFooterPanel 1.0 MintTokensFooterPanel.qml
 PermissionConflictWarningPanel 1.0 PermissionConflictWarningPanel.qml
-PermissionDuplicationWarningPanel 1.0 PermissionDuplicationWarningPanel.qml
+PermissionWarningPanel 1.0 PermissionWarningPanel.qml
 PermissionQualificationPanel 1.0 PermissionQualificationPanel.qml
 TokenHoldersPanel 1.0 TokenHoldersPanel.qml

ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml

@@ -1,5 +1,4 @@
 import QtQuick 2.14
-import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
 import StatusQ.Core 0.1
@@ -12,9 +11,9 @@ import utils 1.0
 import shared.panels 1.0
 
 import AppLayouts.Chat.helpers 1.0
+import AppLayouts.Chat.controls.community 1.0
 import AppLayouts.Chat.panels.communities 1.0
 
-import "../../../Chat/controls/community"
 
 StatusScrollView {
     id: root
@@ -53,7 +52,8 @@ StatusScrollView {
     // roles: itemId, text, icon, emoji, color, colorId
     property var selectedChannelsModel: ListModel {}
 
-    property alias duplicationWarningVisible: duplicationPanel.visible
+    property bool permissionDuplicated: false
+    property bool permissionTypeLimitReached: false
 
     signal createPermissionClicked
 
@@ -359,10 +359,24 @@ StatusScrollView {
                 asset.name: PermissionTypes.getIcon(key)
                 asset.bgColor: "transparent"
                 closeButtonVisible: false
-                titleText.color: Theme.palette.primaryColor1
                 titleText.font.pixelSize: Theme.primaryTextFontSize
                 leftPadding: 6
 
+                Binding on bgColor {
+                    when: root.permissionTypeLimitReached
+                    value: Theme.palette.dangerColor3
+                }
+
+                Binding on titleText.color {
+                    when: root.permissionTypeLimitReached
+                    value: Theme.palette.dangerColor1
+                }
+
+                Binding on asset.color {
+                    when: root.permissionTypeLimitReached
+                    value: Theme.palette.dangerColor1
+                }
+
                 MouseArea {
                     anchors.fill: parent
                     cursorShape: Qt.PointingHandCursor
@@ -529,13 +543,24 @@ StatusScrollView {
             onToggled: d.dirtyValues.isPrivate = checked
         }
 
-        PermissionDuplicationWarningPanel {
+        PermissionWarningPanel {
             id: duplicationPanel
 
             Layout.fillWidth: true
             Layout.topMargin: 50 // by desing
 
-            visible: false
+            text: {
+                if (root.permissionTypeLimitReached)
+                    return PermissionTypes.getPermissionsLimitWarning(
+                                d.dirtyValues.permissionType)
+
+                if (root.permissionDuplicated)
+                    return qsTr("Permission with same properties is already active, edit properties to create a new permission.")
+
+                return ""
+            }
+
+            visible: root.permissionDuplicated || root.permissionTypeLimitReached
         }
 
         StatusButton {
@@ -546,7 +571,9 @@ StatusScrollView {
 
             visible: !root.isEditState
             text: qsTr("Create permission")
-            enabled: root.isFullyFilled && !root.duplicationWarningVisible
+            enabled: root.isFullyFilled
+                     && !root.permissionDuplicated
+                     && !root.permissionTypeLimitReached
 
             onClicked: root.createPermissionClicked()
         }