feat(Permissions): Adding, duplicating, editing and deleting permissions when control node is offline

- It adds info panel when control node is offline.
- It modifies UI texts when control node is offline.
- It updates storybook updating permissions model and allowing permission state changes.

NOTE: Only UI, no backend. There is 1 expected integration point: permissions model item `permissionState` role.

Closes #11769

storybook/pages/CommunityPermissionsSettingsPanelEditor.qml

@@ -6,6 +6,8 @@ import StatusQ.Core.Utils 0.1
 
 import AppLayouts.Communities.controls 1.0
 
+import Models 1.0
+
 Flickable {
     id: root
 
@@ -49,6 +51,36 @@ Flickable {
                     spacing: 20
                     anchors.fill: parent
 
+                    Label {
+                        Layout.leftMargin: 5
+
+                        text: "Permission State:"
+                    }
+                    ColumnLayout {
+                        Layout.leftMargin: 5
+
+                        RadioButton {
+                            text: "Active state"
+                            checked: true
+                            onCheckedChanged: if(checked) PermissionsModel.changePermissionState(root.model, model.index, PermissionTypes.State.Active)
+                        }
+
+                        RadioButton {
+                            text: "Creating state"
+                            onCheckedChanged: if(checked) PermissionsModel.changePermissionState(root.model, model.index, PermissionTypes.State.Creating)
+                        }
+
+                        RadioButton {
+                            text: "Editing state"
+                            onCheckedChanged: if(checked) PermissionsModel.changePermissionState(root.model, model.index, PermissionTypes.State.Editing)
+                        }
+
+                        RadioButton {
+                            text: "Deleting state"
+                            onCheckedChanged: if(checked) PermissionsModel.changePermissionState(root.model, model.index, PermissionTypes.State.Deleting)
+                        }
+                    }
+
                     Repeater {
                         model: holdingsListModel
 

storybook/pages/PermissionsSettingsPanelPage.qml

@@ -112,16 +112,10 @@ SplitView {
 
         logsView.logText: logs.logText
 
-        ColumnLayout {
+        CheckBox {
-            anchors.top: parent.top
+            id: isOwnerCheckBox
-            anchors.left: parent.left
-            anchors.right: parent.right
 
-            CheckBox {
+            text: "Is owner"
-                id: isOwnerCheckBox
-
-                text: "Is owner"
-            }
         }
     }
 }

storybook/src/Models/PermissionsModel.qml

@@ -14,6 +14,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true,
             tokenCriteriaMet: false
         },
@@ -21,6 +22,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: true
         }
@@ -31,6 +33,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel4(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true
         }
     ]
@@ -40,24 +43,28 @@ QtObject {
             holdingsListModel: root.createHoldingsModel4(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true
         },
         {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         },
         {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         },
         {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         }
     ]
@@ -67,12 +74,14 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true
         },
         {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         }
     ]
@@ -82,12 +91,14 @@ QtObject {
             holdingsListModel: root.createHoldingsModel5(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true
         },
         {
             holdingsListModel: root.createHoldingsModel4(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         }
     ]
@@ -97,18 +108,21 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true
         },
         {
             holdingsListModel: root.createHoldingsModel1b(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         },
         {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         }
     ]
@@ -118,24 +132,28 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true
         },
         {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         },
         {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         },
         {
             holdingsListModel: root.createHoldingsModel5(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         }
     ]
@@ -146,6 +164,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel2b(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: true
         },
@@ -154,6 +173,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -162,6 +182,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: true
         },
@@ -170,6 +191,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         }
@@ -181,6 +203,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1b(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Read,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: true
         },
@@ -189,6 +212,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Read,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -197,6 +221,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Read,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -205,6 +230,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel3(),
             permissionType: PermissionTypes.Type.Read,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: true
         },
@@ -213,6 +239,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel5(),
             channelsListModel: root.createChannelsModel3(),
             permissionType: PermissionTypes.Type.Read,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -221,6 +248,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.ViewAndPost,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -229,6 +257,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel2b(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.ViewAndPost,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: true
         },
@@ -237,6 +266,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel3(),
             permissionType: PermissionTypes.Type.ViewAndPost,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -245,6 +275,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel5(),
             channelsListModel: root.createChannelsModel3(),
             permissionType: PermissionTypes.Type.ViewAndPost,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -253,6 +284,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel3(),
             permissionType: PermissionTypes.Type.ViewAndPost,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         }
@@ -526,4 +558,13 @@ QtObject {
                     }
                 ]
     }
+
+    function changePermissionState(model, index, permissionState) {
+        model.get(index).permissionState = permissionState
+    }
+
+    function changeAllPermissionStates(model, permissionState) {
+        for(let i = 0; i < model.count; i++)
+            changePermissionState(model, i, permissionState)
+    }
 }

ui/app/AppLayouts/Communities/controls/PermissionItem.qml

@@ -15,6 +15,7 @@ Control{
     property var channelsListModel
 
     property int permissionType: PermissionTypes.Type.None
+    property int permissionState: PermissionTypes.State.Active
     property bool isPrivate: false
     property bool showButtons: true
 
@@ -32,6 +33,23 @@ Control{
         readonly property int buttonTextPixelSize: 12
         readonly property int buttonDiameter: 36
         readonly property int buttonTextSpacing: 6
+        readonly property int headerIconleftMargin: 20
+        readonly property bool isActiveState: root.permissionState === PermissionTypes.State.Active
+        readonly property bool isDeletingState: root.permissionState === PermissionTypes.State.Deleting
+
+        function getStateText(state) {
+            if(state === PermissionTypes.State.Active)
+                return qsTr("Active")
+
+            if(state === PermissionTypes.State.Creating)
+                return qsTr("Pending, will become active once owner node comes online")
+
+            if(state === PermissionTypes.State.Deleting)
+                return qsTr("Deletion pending, will be deleted once owner node comes online")
+
+            if(state === PermissionTypes.State.Editing)
+                return qsTr("Pending updates will be applied when owner node comes online")
+        }
     }
     background: Rectangle {
         color: "transparent"
@@ -55,16 +73,24 @@ Control{
                 spacing: 8
 
                 StatusIcon {
-                    Layout.leftMargin: 19
+                    Layout.leftMargin: d.headerIconleftMargin
+
+                    visible: d.isActiveState
                     icon: "checkmark"
                     Layout.preferredWidth: 11
                     Layout.preferredHeight: 8
                     color: Theme.palette.directColor1
                 }
 
+                StatusDotsLoadingIndicator {
+                    Layout.leftMargin: d.headerIconleftMargin
+
+                    visible: !d.isActiveState
+                }
+
                 StatusBaseText {
                     Layout.fillWidth: true
-                    text: qsTr("Active")
+                    text: d.getStateText(root.permissionState)
                     font.pixelSize: d.tagTextPixelSize
                 }
 
@@ -229,7 +255,7 @@ Control{
                 }
                 StatusBaseText {
                     Layout.alignment: Qt.AlignHCenter
-                    text: qsTr("Delete")
+                    text: d.isDeletingState ? qsTr("Undo delete") : qsTr("Delete")
                     color: Theme.palette.dangerColor1
                     font.pixelSize: d.buttonTextPixelSize
                 }

ui/app/AppLayouts/Communities/controls/PermissionTypes.qml

@@ -9,6 +9,10 @@ QtObject {
         None, Admin, Member, Read, ViewAndPost, Moderator
     }
 
+    enum State {
+        Active, Creating, Deleting, Editing
+    }
+
     function getName(type) {
         switch (type) {
             case PermissionTypes.Type.Admin:

ui/app/AppLayouts/Communities/views/EditPermissionView.qml

@@ -595,6 +595,16 @@ StatusScrollView {
             visible: root.permissionDuplicated || root.permissionTypeLimitReached
         }
 
+        StatusWarningBox {
+            Layout.fillWidth: true
+            Layout.topMargin: Style.current.padding
+
+            icon: "desktop"
+            text: qsTr("Any changes to community permissions will take effect after the control node receives and processes them")
+            borderColor: Theme.palette.baseColor1
+            iconColor: textColor
+        }
+
         StatusButton {
             Layout.preferredHeight: 44
             Layout.alignment: Qt.AlignHCenter

ui/app/AppLayouts/Communities/views/PermissionsView.qml

@@ -85,6 +85,7 @@ StatusScrollView {
                 }
 
                 permissionType: model.permissionType
+                permissionState: model.permissionState // TODO: Backend!
 
                 ChannelsSelectionModel {
                     id: channelsSelectionModel