Merge #427: Introduce Signal Based Navigation Model to have Self-Contained Pages

3f94240 qml: rename backClicked signal to back (jarolrod)
7b5f9c1 qml: Use signal based navigation in NodeSettings, don't alias nav elems (jarolrod)
a77c7f1 qml: use signal based navigation in CreateWallet pages, introduce wizard (jarolrod)
02a3b25 qml: use signal based navigation in settings with subpages (jarolrod)
fad9bd7 qml: signal based navigation in onboarding (jarolrod)

Pull request description:

  Here we introduce a Signal Based navigation model, so that we can have self-contained pages. Self-contained pages include everything they need where they are declared, and do not have more than one definition. This makes pages modular, easier to reason about, but also easier to maintain by eliminating dependencies on hard-coded IDs, direct calls to parent views, and interlinked properties between pages.

  When we want to reason about `PageA.qml`, we only have to look in there and the child components it uses, and not have to use a search function to ensure we have the entire scope of `PageA.qml`.

  To Achieve this, this PR implements the following main ideas:

  1. Ensure that pages are not hardcoding and reaching into an outside view.
  2. Ensure we don't alias down any components into pages, and instead have pages define all their components, but react to state events
  3. Ensure we don't have interlinked properties between pages
  4. Move navigation and page linking logic from the pages themselves and into the declaration of the view itself.

  Additionally, while here we structure the CreateWallet flow into a Wizard.

  **Follow-Ups:**

  Consider moving onboarding and walletName into more appropriate backend objects.

  [![Build Artifacts](https://img.shields.io/badge/Build%20Artifacts-green
  )]()

ACKs for top commit:
  johnny9:
    ACK 3f94240
  MarnixCroes:
    ACK 3f94240

Tree-SHA512: 134ba2ee3a1b4aec77601ca065cfc690098e6b3695a9bcf8c65498a80e41857fa6f2cf218e9269e9b31c51babb3faa70fd1db35e148dd3dbd261c9359c3212b4

Author: hebasto

src/Makefile.qt.include

@@ -428,12 +428,12 @@ QML_RES_QML = \
   qml/pages/settings/SettingsProxy.qml \
   qml/pages/settings/SettingsStorage.qml \
   qml/pages/settings/SettingsTheme.qml \
-  qml/pages/wallet/AddWallet.qml \
   qml/pages/wallet/CreateBackup.qml \
   qml/pages/wallet/CreateConfirm.qml \
   qml/pages/wallet/CreateIntro.qml \
   qml/pages/wallet/CreateName.qml \
   qml/pages/wallet/CreatePassword.qml \
+  qml/pages/wallet/CreateWalletWizard.qml \
   qml/pages/wallet/DesktopWallets.qml \
   qml/pages/wallet/WalletBadge.qml \
   qml/pages/wallet/WalletSelect.qml

src/qml/bitcoin_qml.qrc

@@ -68,12 +68,12 @@
         <file>pages/settings/SettingsProxy.qml</file>
         <file>pages/settings/SettingsStorage.qml</file>
         <file>pages/settings/SettingsTheme.qml</file>
-        <file>pages/wallet/AddWallet.qml</file>
         <file>pages/wallet/CreateBackup.qml</file>
         <file>pages/wallet/CreateConfirm.qml</file>
         <file>pages/wallet/CreateIntro.qml</file>
         <file>pages/wallet/CreateName.qml</file>
         <file>pages/wallet/CreatePassword.qml</file>
+        <file>pages/wallet/CreateWalletWizard.qml</file>
         <file>pages/wallet/DesktopWallets.qml</file>
         <file>pages/wallet/WalletBadge.qml</file>
         <file>pages/wallet/WalletSelect.qml</file>

src/qml/components/AboutOptions.qml

@@ -8,6 +8,8 @@ import QtQuick.Layouts 1.15
 import "../controls"
 
 ColumnLayout {
+    id: root
+    signal next
     spacing: 4
     Setting {
         id: websiteLink
@@ -69,7 +71,7 @@ ColumnLayout {
             color: gotoDeveloper.stateColor
         }
         onClicked: {
-            aboutSwipe.incrementCurrentIndex()
+            root.next()
         }
     }
     ExternalPopup {

src/qml/components/ConnectionSettings.qml

@@ -8,6 +8,8 @@ import QtQuick.Layouts 1.15
 import "../controls"
 
 ColumnLayout {
+    id: root
+    signal next
     spacing: 4
     Setting {
         Layout.fillWidth: true
@@ -69,6 +71,6 @@ ColumnLayout {
         actionItem: CaretRightIcon {
             color: gotoProxy.stateColor
         }
-        onClicked: connectionSwipe.incrementCurrentIndex()
+        onClicked: root.next()
     }
 }

src/qml/controls/InformationPage.qml

@@ -9,6 +9,8 @@ import org.bitcoincore.qt 1.0
 
 Page {
     id: root
+    signal back
+    signal next
     implicitHeight: information.height + continueButton.height + buttonMargin
     property alias bannerItem: banner_loader.sourceComponent
     property alias detailItem: detail_loader.sourceComponent
@@ -106,7 +108,7 @@ Page {
             anchors.rightMargin: 20
             anchors.horizontalCenter: parent.horizontalCenter
             text: root.buttonText
-            onClicked: root.lastPage ? swipeView.finished = true : swipeView.incrementCurrentIndex()
+            onClicked: root.next()
         }
     }
 

src/qml/pages/main.qml

@@ -70,18 +70,35 @@ ApplicationWindow {
             property bool finished: false
             interactive: false
 
-            OnboardingCover {}
-            OnboardingStrengthen {}
-            OnboardingBlockclock {}
-            OnboardingStorageLocation {}
-            OnboardingStorageAmount {}
-            OnboardingConnection {}
+            OnboardingCover {
+                onNext: swipeView.incrementCurrentIndex()
+            }
+            OnboardingStrengthen {
+                onBack: swipeView.decrementCurrentIndex()
+                onNext: swipeView.incrementCurrentIndex()
+            }
+            OnboardingBlockclock {
+                onBack: swipeView.decrementCurrentIndex()
+                onNext: swipeView.incrementCurrentIndex()
+            }
+            OnboardingStorageLocation {
+                onBack: swipeView.decrementCurrentIndex()
+                onNext: swipeView.incrementCurrentIndex()
+            }
+            OnboardingStorageAmount {
+                onBack: swipeView.decrementCurrentIndex()
+                onNext: swipeView.incrementCurrentIndex()
+            }
+            OnboardingConnection {
+                onBack: swipeView.decrementCurrentIndex()
+                onNext: swipeView.finished = true
+            }
 
             onFinishedChanged: {
                 optionsModel.onboard()
                 if (AppMode.walletEnabled && AppMode.isDesktop) {
                     main.push(desktopWallets)
-                    main.push(addWallet)
+                    main.push(createWalletWizard)
                 } else {
                     main.push(node)
                 }
@@ -95,8 +112,8 @@ ApplicationWindow {
     }
 
     Component {
-        id: addWallet
-        AddWallet {
+        id: createWalletWizard
+        CreateWalletWizard {
             onFinished: {
                 main.pop()
             }

src/qml/pages/node/NetworkTraffic.qml

@@ -19,7 +19,16 @@ InformationPage {
         id: settings
         property alias trafficGraphScale: root.trafficGraphScale
     }
-
+    navLeftDetail: NavButton {
+        iconSource: "image://images/caret-left"
+        text: qsTr("Back")
+        onClicked: root.back()
+    }
+    navMiddleDetail: Header {
+        headerBold: true
+        headerSize: 18
+        header: qsTr("Network traffic")
+    }
     bannerActive: false
     bold: true
     headerText: qsTr("Network Traffic")

src/qml/pages/node/NodeSettings.qml

@@ -122,74 +122,33 @@ Item {
     Component {
         id: about_page
         SettingsAbout {
-            showHeader: false
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    nodeSettingsView.pop()
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("About")
-            }
-            devMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Developer settings")
-            }
+            onBack: nodeSettingsView.pop()
         }
     }
     Component {
         id: display_page
         SettingsDisplay {
-            onBackClicked: {
+            onBack: {
                 nodeSettingsView.pop()
             }
         }
     }
     Component {
         id: storage_page
         SettingsStorage {
-            showHeader: false
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    nodeSettingsView.pop()
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Storage settings")
-            }
+            onBack: nodeSettingsView.pop()
         }
     }
     Component {
         id: connection_page
         SettingsConnection {
-            showHeader: false
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    nodeSettingsView.pop()
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Connection settings")
-            }
+            onBack: nodeSettingsView.pop()
         }
     }
     Component {
         id: peers_page
         Peers {
-            onBackClicked: {
+            onBack: {
                 nodeSettingsView.pop()
                 peerTableModel.stopAutoRefresh();
             }
@@ -201,7 +160,7 @@ Item {
     Component {
         id: peer_details
         PeerDetails {
-            onBackClicked: {
+            onBack: {
                 nodeSettingsView.pop()
             }
         }
@@ -210,18 +169,7 @@ Item {
         id: networktraffic_page
         NetworkTraffic {
             showHeader: false
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    nodeSettingsView.pop()
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Network traffic")
-            }
+            onBack: nodeSettingsView.pop()
         }
     }
 }

src/qml/pages/node/PeerDetails.qml

@@ -11,14 +11,14 @@ import "../../components"
 
 Page {
     id: root
-    signal backClicked()
+    signal back()
 
     property PeerDetailsModel details
 
     Connections {
         target: details
         function onDisconnected() {
-            root.backClicked()
+            root.back()
         }
     }
 
@@ -27,7 +27,7 @@ Page {
         leftItem: NavButton {
             iconSource: "image://images/caret-left"
             text: qsTr("Back")
-            onClicked: root.backClicked()
+            onClicked: root.back()
         }
         centerItem: Header {
             headerBold: true

src/qml/pages/node/Peers.qml

@@ -11,7 +11,7 @@ import "../../controls"
 import "../../components"
 
 Page {
-    signal backClicked
+    signal back
     signal peerSelected(PeerDetailsModel peerDetails)
 
     id: root
@@ -21,7 +21,7 @@ Page {
         leftItem: NavButton {
             iconSource: "image://images/caret-left"
             text: qsTr("Back")
-            onClicked: root.backClicked()
+            onClicked: root.back()
         }
         centerItem: Header {
             headerBold: true

src/qml/pages/onboarding/OnboardingBlockclock.qml

@@ -8,10 +8,11 @@ import QtQuick.Layouts 1.15
 import "../../controls"
 
 InformationPage {
+    id: root
     navLeftDetail: NavButton {
         iconSource: "image://images/caret-left"
         text: qsTr("Back")
-        onClicked: swipeView.decrementCurrentIndex()
+        onClicked: root.back()
     }
     bannerItem: Image {
         source: Theme.image.blocktime

src/qml/pages/onboarding/OnboardingConnection.qml

@@ -10,6 +10,9 @@ import "../../components"
 import "../settings"
 
 Page {
+    id: root
+    signal back
+    signal next
     background: null
     clip: true
     SwipeView {
@@ -21,7 +24,7 @@ Page {
             navLeftDetail: NavButton {
                 iconSource: "image://images/caret-left"
                 text: qsTr("Back")
-                onClicked: swipeView.decrementCurrentIndex()
+                onClicked: root.back()
             }
             bannerItem: Image {
                 Layout.topMargin: 20
@@ -47,14 +50,11 @@ Page {
             lastPage: true
             buttonText: qsTr("Next")
             buttonMargin: 20
+            onNext: root.next()
         }
         SettingsConnection {
-            navRightDetail: NavButton {
-                text: qsTr("Done")
-                onClicked: {
-                    connections.decrementCurrentIndex()
-                }
-            }
+            onboarding: true
+            onBack: connections.decrementCurrentIndex()
         }
     }
 }

src/qml/pages/onboarding/OnboardingCover.qml

@@ -10,6 +10,8 @@ import "../../components"
 import "../settings"
 
 Page {
+    id: root
+    signal next
     background: null
     clip: true
     SwipeView {
@@ -48,15 +50,11 @@ Page {
             descriptionSize: 24
             subtext: qsTr("100% open-source & open-design")
             buttonText: qsTr("Start")
+            onNext: root.next()
         }
         SettingsAbout {
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    introductions.decrementCurrentIndex()
-                }
-            }
+            onboarding: true
+            onBack: introductions.decrementCurrentIndex()
         }
     }
 }