feat(ProfileShowcase): Assets panel navigation button

- Added new button to navigate to accounts tab form assets tab.
- Added needed support in storybook to cover the new use case.

Closes #13337

storybook/pages/ProfileShowcaseAssetsPanelPage.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Utils 0.1 as CoreUtils
@@ -70,17 +71,22 @@ SplitView {
     StatusScrollView { // wrapped in a ScrollView on purpose; to simulate SettingsContentBase.qml
         SplitView.fillWidth: true
         SplitView.preferredHeight: 500
+
         ProfileShowcaseAssetsPanel {
             id: showcasePanel
             width: 500
             baseModel: walletAssetStore.groupedAccountAssetsModel
             showcaseModel: inShowcaseAssetsModel
+            addAccountsButtonVisible: !hasAllAccountsChecker.checked
+
             formatCurrencyAmount: function (amount, symbol) {
                 return ({amount: amount,
                             symbol: symbol.toUpperCase(),
                             displayDecimals: 4,
                             stripTrailingZeroes: false})
             }
+
+            onNavigateToAccountsTab: logs.logEvent("ProfileShowcaseAccountsPanel::onNavigateToAccountsTab")
         }
     }
 
@@ -92,10 +98,20 @@ SplitView {
 
         logsView.logText: logs.logText
 
+        ColumnLayout {
             Button {
                 text: "Reset (clear settings)"
+
                 onClicked: showcasePanel.settings.reset()
             }
+
+            CheckBox {
+                id: hasAllAccountsChecker
+
+                text: "Has the user already shared all of their accounts"
+                checked: true
+            }
+        }
     }
 }
 
@@ -105,3 +121,4 @@ SplitView {
 // https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=14609-238808&t=RkXAEv3G6mp3EUvl-0
 // https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=14609-239912&t=RkXAEv3G6mp3EUvl-0
 // https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=14609-240991&t=RkXAEv3G6mp3EUvl-0
+// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?type=design&node-id=2460%3A30679&mode=design&t=6rs9xMrPv4sGZKe4-1

ui/app/AppLayouts/Profile/panels/ProfileShowcaseAssetsPanel.qml

@@ -1,14 +1,23 @@
 import QtQuick 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
 
 import utils 1.0
+import shared.panels 1.0
 
 import AppLayouts.Profile.controls 1.0
 
 ProfileShowcasePanel {
     id: root
 
+    required property bool addAccountsButtonVisible
+
     property var formatCurrencyAmount: function(amount, symbol){}
 
+    signal navigateToAccountsTab()
+
     keyRole: "symbol"
     roleNames: ["symbol", "name", "address", "communityId", "enabledNetworkBalance", "decimals"].concat(showcaseRoles)
     filterFunc: (modelData) => modelData.symbol !== "" && !showcaseModel.hasItemInShowcase(modelData.symbol)
@@ -43,4 +52,36 @@ ProfileShowcasePanel {
             root.showcaseEntryChanged()
         }
     }
+    additionalComponent: root.addAccountsButtonVisible ? addMoreAccountsComponent : null
+
+    Component {
+        id: addMoreAccountsComponent
+
+        ColumnLayout {
+            spacing: Style.current.halfPadding
+            visible: root.addAccountsButtonVisible
+
+            Separator {
+                Layout.fillWidth: true
+                Layout.topMargin: Style.current.padding
+                Layout.bottomMargin: Style.current.padding
+            }
+
+            StatusBaseText {
+                Layout.alignment: Qt.AlignHCenter
+
+                font.pixelSize: Style.current.additionalTextSize
+                text: qsTr("Don’t see some of your assets?")
+            }
+
+            StatusFlatButton {
+                Layout.alignment: Qt.AlignHCenter
+
+                font.pixelSize: Style.current.additionalTextSize
+                text: qsTr("Add accounts to showcase")
+
+                onClicked: root.navigateToAccountsTab()
+            }
+        }
+    }
 }

ui/app/AppLayouts/Profile/panels/ProfileShowcasePanel.qml

@@ -30,6 +30,7 @@ Control {
     property string showcasePlaceholderBanner
     property Component draggableDelegateComponent
     property Component showcaseDraggableDelegateComponent
+    property Component additionalComponent
 
     signal showcaseEntryChanged()
 
@@ -337,6 +338,13 @@ Control {
             }
         }
 
+        Loader {
+            id: additionalComponent
+
+            Layout.fillWidth: true
+            sourceComponent: root.additionalComponent
+        }
+
         Item { Layout.fillHeight: true }
     }
 }

ui/app/AppLayouts/Profile/views/MyProfileView.qml

@@ -219,12 +219,16 @@ SettingsContentBase {
             // assets
             ProfileShowcaseAssetsPanel {
                 id: profileShowcaseAssetsPanel
+
                 baseModel: root.walletAssetsStore.groupedAccountAssetsModel // TODO: instantiate an assets model in profile module
                 showcaseModel: root.profileStore.profileShowcaseAssetsModel
-                onShowcaseEntryChanged: priv.hasAnyProfileShowcaseChanges = true
+                addAccountsButtonVisible: root.profileStore.profileShowcaseAccountsModel.hiddenCount > 0
                 formatCurrencyAmount: function(amount, symbol) {
                     return root.currencyStore.formatCurrencyAmount(amount, symbol)
                 }
+
+                onShowcaseEntryChanged: priv.hasAnyProfileShowcaseChanges = true
+                onNavigateToAccountsTab: profileTabBar.currentIndex = 2
             }
 
             // web