feat: add EnableShardingPopup

which can configure and enable 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/pages/CommunityInfoEditor.qml

@@ -8,7 +8,7 @@ ColumnLayout {
     id: root
 
     property string name: "Socks"
-    property string description: "We like the sock! A community of Unisocks wearers we like the sock a community of Unisocks we like the sock a community of Unisocks wearers we like the sock."
+    property string description: "We like the sock. A community of Unisocks wearers we like the sock. Unisocks wearers we like the sock."
 
     property int membersCount: 184
     property bool amISectionAdmin: true

storybook/pages/EditSettingsPanelPage.qml

@@ -2,6 +2,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 
+import mainui 1.0
 import AppLayouts.Communities.panels 1.0
 
 import Storybook 1.0
@@ -10,6 +11,11 @@ SplitView {
     id: root
     SplitView.fillWidth: true
 
+    Popups {
+        popupParent: root
+        rootStore: QtObject {}
+    }
+
     EditSettingsPanel {
         SplitView.fillWidth: true
         SplitView.fillHeight: true
@@ -18,6 +24,7 @@ SplitView {
         logoImageData: communityEditor.image
         description: communityEditor.description
         bannerImageData: communityEditor.banner
+        communityId: "0xdeadbeef"
         communityShardingEnabled: communityEditor.shardingEnabled
         communityShardIndex: communityEditor.shardIndex
     }

storybook/pages/EnableShardingPopupPage.qml

@@ -0,0 +1,59 @@
+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()
+        }
+
+        EnableShardingPopup {
+            id: dialog
+
+            anchors.centerIn: parent
+            visible: true
+            modal: false
+            closePolicy: Popup.NoAutoClose
+
+            communityName: "Foobar"
+            publicKey: "0xdeadbeef"
+            shardingInProgress: ctrlShardingInProgress.checked
+            onEnableSharding: logs.logEvent("enableSharding", ["shardIndex"], arguments)
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.minimumHeight: 100
+        SplitView.preferredHeight: 200
+
+        logsView.logText: logs.logText
+
+        ColumnLayout {
+            Switch {
+                id: ctrlShardingInProgress
+                text: "Sharding in progress"
+            }
+        }
+    }
+}
+
+// category: Popups

storybook/stubs/shared/stores/RootStore.qml

@@ -28,4 +28,8 @@ QtObject {
     property var getChainShortNamesForSavedWalletAddress
     property var getGasEthValue
     property var getNetworkLayer
+
+    function copyToClipboard(text) {
+        console.warn("STUB: copyToClipboard:", text)
+    }
 }

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

@@ -7,6 +7,7 @@ import StatusQ.Popups 0.1
 import StatusQ.Core.Theme 0.1
 
 import AppLayouts.Communities.controls 1.0
+import AppLayouts.Communities.popups 1.0
 
 import utils 1.0
 
@@ -22,6 +23,7 @@ StatusScrollView {
     property alias tags: baseLayout.tags
     property alias selectedTags: baseLayout.selectedTags
     property alias options: baseLayout.options
+    property string communityId
     property bool communityShardingEnabled
     property int communityShardIndex: -1
 
@@ -79,6 +81,9 @@ StatusScrollView {
         RowLayout {
             spacing: Style.current.halfPadding
             visible: root.communityShardingEnabled
+
+            readonly property bool shardingActive: root.communityShardIndex !== -1
+
             StatusBaseText {
                 Layout.fillWidth: true
                 text: qsTr("Community sharding")
@@ -86,12 +91,13 @@ StatusScrollView {
             Item { Layout.fillWidth: true }
             StatusBaseText {
                 color: Theme.palette.baseColor1
-                visible: root.communityShardIndex !== -1
+                visible: parent.shardingActive
                 text: qsTr("Active: on shard #%1").arg(root.communityShardIndex)
             }
             StatusButton {
                 size: StatusBaseButton.Size.Small
-                text: root.communityShardIndex === -1 ? qsTr("Make %1 a sharded community").arg(root.name) : qsTr("Manage")
+                text: parent.shardingActive ? qsTr("Manage") : qsTr("Make %1 a sharded community").arg(root.name)
+                onClicked: Global.openPopup(enableShardingPopupCmp) // TODO manage popup
             }
         }
 
@@ -101,6 +107,16 @@ StatusScrollView {
             implicitWidth: root.bottomReservedSpace.width
             implicitHeight: root.bottomReservedSpace.height
         }
+
+        Component {
+            id: enableShardingPopupCmp
+            EnableShardingPopup {
+                communityName: root.name
+                publicKey: root.communityId
+                shardingInProgress: false // TODO community sharding backend: set to "true" when generating the pubSub topic
+                onEnableSharding: (shardIndex) => console.warn("TODO: enable community sharding for shardIndex:", shardIndex) // TODO community sharding backend
+                onClosed: destroy()
+            }
+        }
     }
 }
-

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

@@ -280,6 +280,7 @@ StackLayout {
                     pinMessagesEnabled: root.pinMessagesEnabled
                 }
 
+                communityId: root.communityId
                 communityShardingEnabled: root.communityShardingEnabled
                 communityShardIndex: root.communityShardIndex
 

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

@@ -0,0 +1,126 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Controls.Validators 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+import shared.controls 1.0
+import utils 1.0
+
+StatusStackModal {
+    id: root
+
+    required property string communityName
+    required property string publicKey
+    property int initialShardIndex: -1
+    property bool shardingInProgress
+
+    signal enableSharding(int shardIndex)
+
+    stackTitle: qsTr("Enable community sharding for %1").arg(communityName)
+    width: 640
+
+    readonly property var cancelButton: StatusFlatButton {
+        text: qsTr("Cancel")
+        onClicked: root.close()
+    }
+
+    nextButton: StatusButton {
+        text: qsTr("Next")
+        enabled: typeof(currentItem.canGoNext) == "undefined" || currentItem.canGoNext
+        loading: root.shardingInProgress
+        onClicked: {
+            let nextAction = currentItem.nextAction
+            if (typeof(nextAction) == "function") {
+                return nextAction()
+            }
+            root.currentIndex++
+        }
+    }
+
+    finishButton: StatusButton {
+        text: qsTr("Enable community sharding")
+        enabled: typeof(currentItem.canGoNext) == "undefined" || currentItem.canGoNext
+        onClicked: {
+            root.enableSharding(d.shardIndex)
+            root.close()
+        }
+    }
+
+    rightButtons: [cancelButton, nextButton, finishButton]
+
+    QtObject {
+        id: d
+        readonly property string pubSubTopic: '{"pubsubTopic":"/waku/2/rs/16/%1", "publicKey":"%2"}'.arg(shardIndex).arg(root.publicKey) // FIXME backend
+        property int shardIndex: root.initialShardIndex
+    }
+
+    onAboutToShow: shardIndexEdit.focus = true
+
+    stackItems: [
+        ColumnLayout {
+            id: firstPage
+            spacing: Style.current.halfPadding
+
+            readonly property bool canGoNext: shardIndexEdit.valid
+            readonly property var nextAction: function () {
+                d.shardIndex = parseInt(shardIndexEdit.text)
+                root.currentIndex++
+            }
+
+            StatusInput {
+                id: shardIndexEdit
+                Layout.fillWidth: true
+                label: qsTr("Enter shard number")
+                placeholderText: qsTr("Enter a number between 0 and 1023")
+                text: d.shardIndex !== -1 ? d.shardIndex : ""
+                validators: [
+                    StatusIntValidator {
+                        bottom: 0
+                        top: 1023
+                        errorMessage: qsTr("Invalid shard number. Number must be 0 — 1023.")
+                    }
+                ]
+                Keys.onPressed: {
+                    if (!shardIndexEdit.valid)
+                        return
+                    if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
+                        event.accepted = true
+                        firstPage.nextAction()
+                    }
+                }
+            }
+        },
+        ColumnLayout {
+            readonly property bool canGoNext: agreement.checked
+
+            StatusInput {
+                Layout.fillWidth: true
+                minimumHeight: 88
+                maximumHeight: 88
+                multiline: true
+                input.edit.readOnly: true
+                label: qsTr("Pub/Sub topic")
+                text: d.pubSubTopic
+
+                CopyButton {
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                    anchors.rightMargin: 12
+                    anchors.topMargin: (parent.height - parent.input.height) + 12
+                    textToCopy: parent.text
+                }
+            }
+
+            StatusCheckBox {
+                id: agreement
+                text: qsTr("I have made a copy of the Pub/Sub topic and public key string")
+            }
+        }
+    ]
+}

ui/app/AppLayouts/Communities/popups/qmldir

@@ -5,6 +5,7 @@ CreateCategoryPopup 1.0 CreateCategoryPopup.qml
 CreateChannelPopup 1.0 CreateChannelPopup.qml
 CreateCommunityPopup 1.0 CreateCommunityPopup.qml
 DiscordImportProgressDialog 1.0 DiscordImportProgressDialog.qml
+EnableShardingPopup 1.0 EnableShardingPopup.qml
 ExportControlNodePopup 1.0 ExportControlNodePopup.qml
 HoldingsDropdown 1.0 HoldingsDropdown.qml
 ImportControlNodePopup 1.0 ImportControlNodePopup.qml