feat: add ManageShardingPopup

which can disable or launch editting of the shard index for a given
community

- integrate it into community settings
- add a dedicated storybook page and make it also available from
EditSettingsPanelPage

Needed for https://github.com/status-im/status-desktop/issues/12197

storybook/figma.json

@@ -91,6 +91,9 @@
     "EditSettingsPanel": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?node-id=3132%3A383870&mode=dev"
     ],
+    "EnableShardingPopup": [
+        "https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?node-id=37239%3A184324&mode=dev"
+    ],
     "ExportControlNodePopup": [
         "https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=36894-685070&mode=design&t=6k1ago8SSQ5Ip9J8-0",
         "https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37275-289960&mode=design&t=6k1ago8SSQ5Ip9J8-0",
@@ -138,6 +141,9 @@
     "LoginView": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=1080%3A313192"
     ],
+    "ManageShardingPopup": [
+        "https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37242-186255&mode=design&t=tn8u8VaIZDDrCXN4-0"
+    ],
     "MembersDropdown": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22647-498410",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22642-497015"
@@ -264,14 +270,14 @@
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416159",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416160"
     ],
+    "TransferOwnershipAlertPopup": [
+        "https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37206%3A86828&mode=design&t=coHVo1E6fHrKNNhQ-1",
+        "https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37206%3A86847&mode=design&t=coHVo1E6fHrKNNhQ-1"
+    ],
     "UserAgreementPopup": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?type=design&node-id=31450-560694&t=Q4MOViPCoHsTjhs6-0"
     ],
     "UserProfileCard": [
         "https://www.figma.com/file/Mr3rqxxgKJ2zMQ06UAKiWL/💬-Chat⎜Desktop?type=design&node-id=21961-655678&mode=design&t=JiMnPfMaLPWlrFK3-0"
-    ],
-    "TransferOwnershipAlertPopup": [
-        "https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37206%3A86828&mode=design&t=coHVo1E6fHrKNNhQ-1",
-        "https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37206%3A86847&mode=design&t=coHVo1E6fHrKNNhQ-1"
     ]
 }

storybook/pages/CommunityInfoEditor.qml

@@ -18,7 +18,7 @@ ColumnLayout {
     property bool colorVisible: false
     property url banner: ctrlCommunityBanner.checked ? Style.png("settings/communities@2x") : ""
     readonly property bool shardingEnabled: ctrlShardingEnabled.checked
-    readonly property int shardIndex: ctrlShardIndex.value
+    property alias shardIndex: ctrlShardIndex.value
 
     spacing: 24
 

storybook/pages/EditSettingsPanelPage.qml

@@ -27,6 +27,7 @@ SplitView {
         communityId: "0xdeadbeef"
         communityShardingEnabled: communityEditor.shardingEnabled
         communityShardIndex: communityEditor.shardIndex
+        onCommunityShardIndexChanged: communityEditor.shardIndex = communityShardIndex
     }
 
     ScrollView {

storybook/pages/ManageShardingPopupPage.qml

@@ -0,0 +1,55 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import Storybook 1.0
+
+import AppLayouts.Communities.popups 1.0
+
+SplitView {
+    orientation: Qt.Vertical
+
+    Logs { id: logs }
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        PopupBackground {
+            anchors.fill: parent
+        }
+
+        Button {
+            anchors.centerIn: parent
+            text: "Reopen"
+
+            onClicked: dialog.open()
+        }
+
+        ManageShardingPopup {
+            id: dialog
+
+            anchors.centerIn: parent
+            visible: true
+            modal: false
+            closePolicy: Popup.NoAutoClose
+
+            communityName: "Foobar"
+
+            shardIndex: 33
+            pubSubTopic: '{"pubsubTopic":"/waku/2/rs/16/%1", "publicKey":"%2"}'.arg(shardIndex).arg("0xdeadbeef")
+
+            onDisableShardingRequested: logs.logEvent("ManageShardingPopup::disableShardingRequested")
+            onEditShardIndexRequested: logs.logEvent("ManageShardingPopup::editShardIndexRequested")
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.minimumHeight: 100
+        SplitView.preferredHeight: 200
+
+        logsView.logText: logs.logText
+    }
+}
+
+// category: Popups

ui/app/AppLayouts/Communities/panels/EditSettingsPanel.qml

@@ -97,7 +97,7 @@ StatusScrollView {
             StatusButton {
                 size: StatusBaseButton.Size.Small
                 text: parent.shardingActive ? qsTr("Manage") : qsTr("Make %1 a sharded community").arg(root.name)
-                onClicked: Global.openPopup(enableShardingPopupCmp) // TODO manage popup
+                onClicked: parent.shardingActive ? Global.openPopup(manageShardingPopupCmp) : Global.openPopup(enableShardingPopupCmp)
             }
         }
 
@@ -111,11 +111,30 @@ StatusScrollView {
         Component {
             id: enableShardingPopupCmp
             EnableShardingPopup {
+                destroyOnClose: true
                 communityName: root.name
                 publicKey: root.communityId
-                shardingInProgress: false // TODO community sharding backend: set to "true" when generating the pubSub topic
+                shardingInProgress: false // TODO community sharding backend: set to "true" when generating the pubSub topic, or migrating
-                onEnableSharding: (shardIndex) => console.warn("TODO: enable community sharding for shardIndex:", shardIndex) // TODO community sharding backend
+                onEnableSharding: {
-                onClosed: destroy()
+                    console.warn("TODO: enable community sharding for shardIndex:", shardIndex) // TODO community sharding backend
+                    root.communityShardIndex = shardIndex
+                }
+            }
+        }
+
+        Component {
+            id: manageShardingPopupCmp
+            ManageShardingPopup {
+                destroyOnClose: true
+                communityName: root.name
+                shardIndex: root.communityShardIndex
+                pubSubTopic: '{"pubsubTopic":"/waku/2/rs/16/%1", "publicKey":"%2"}'.arg(shardIndex).arg(root.communityId) // TODO community sharding backend
+                onDisableShardingRequested: {
+                    root.communityShardIndex = -1 // TODO community sharding backend
+                }
+                onEditShardIndexRequested: {
+                    Global.openPopup(enableShardingPopupCmp, {initialShardIndex: root.communityShardIndex})
+                }
             }
         }
     }

ui/app/AppLayouts/Communities/popups/ManageShardingPopup.qml

@@ -0,0 +1,90 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import QtQml.Models 2.15
+import QtQml 2.15
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups.Dialog 0.1
+
+import shared.controls 1.0
+import shared.popups 1.0
+import utils 1.0
+
+StatusDialog {
+    id: root
+
+    required property string communityName
+    required property int shardIndex
+    required property string pubSubTopic
+
+    signal disableShardingRequested()
+    signal editShardIndexRequested()
+
+    title: qsTr("Manage community sharding for %1").arg(communityName)
+    width: 640
+
+    footer: StatusDialogFooter {
+        rightButtons: ObjectModel {
+            StatusFlatButton {
+                type: StatusBaseButton.Type.Danger
+                text: qsTr("Disable community sharding")
+                onClicked: confirmationPopup.open()
+            }
+            StatusButton {
+                text: qsTr("Edit shard number")
+                onClicked: {
+                    root.editShardIndexRequested()
+                    root.close()
+                }
+            }
+        }
+    }
+
+    contentItem: ColumnLayout {
+        spacing: Style.current.halfPadding
+        StatusInput {
+            Layout.fillWidth: true
+            label: qsTr("Shard number")
+            input.edit.readOnly: true
+            text: root.shardIndex
+        }
+
+        StatusInput {
+            Layout.fillWidth: true
+            minimumHeight: 88
+            maximumHeight: 88
+            multiline: true
+            input.edit.readOnly: true
+            label: qsTr("Pub/Sub topic")
+            text: root.pubSubTopic
+
+            CopyButton {
+                anchors.right: parent.right
+                anchors.top: parent.top
+                anchors.rightMargin: 12
+                anchors.topMargin: (parent.height - parent.input.height) + 12
+                textToCopy: parent.text
+            }
+        }
+    }
+
+    ConfirmationDialog {
+        id: confirmationPopup
+        anchors.centerIn: parent
+        headerSettings.title: qsTr("Are you sure you want to disable sharding?")
+        showCancelButton: true
+        cancelBtnType: ""
+        confirmationText: qsTr("Are you sure you want to disable community sharding? Your community will automatically revert to using the general shared Waku network.")
+        confirmButtonLabel: qsTr("Disable community sharding")
+        onCancelButtonClicked: close()
+        onConfirmButtonClicked: {
+            close()
+            root.disableShardingRequested()
+            root.close()
+        }
+    }
+}

ui/app/AppLayouts/Communities/popups/qmldir

@@ -12,6 +12,7 @@ ImportControlNodePopup 1.0 ImportControlNodePopup.qml
 InDropdown 1.0 InDropdown.qml
 InviteFriendsToCommunityPopup 1.0 InviteFriendsToCommunityPopup.qml
 KickBanPopup 1.0 KickBanPopup.qml
+ManageShardingPopup 1.0 ManageShardingPopup.qml
 MembersDropdown 1.0 MembersDropdown.qml
 PermissionsDropdown 1.0 PermissionsDropdown.qml
 RecipientTypeSelectionDropdown 1.0 RecipientTypeSelectionDropdown.qml