feat(storybook): add Profile Popup

This adds the ProfileDialogView to storybook pages

For now, there's just one control to switch between own profile and
another profile; more to come in later PRs.

The mocked global objects (mainModuleInst and globalUtilsInst) are
injected via QML

Fixes: #7820

storybook/main.cpp

@@ -10,9 +10,11 @@ int main(int argc, char *argv[])
     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
 #endif
     QGuiApplication app(argc, argv);
-    QGuiApplication::setOrganizationName("Status");
-    QGuiApplication::setOrganizationDomain("status.im");
-    QGuiApplication::setApplicationName("Status Desktop Storybook");
+    QGuiApplication::setOrganizationName(QStringLiteral("Status"));
+    QGuiApplication::setOrganizationDomain(QStringLiteral("status.im"));
+    QGuiApplication::setApplicationName(QStringLiteral("Status Desktop Storybook"));
+
+    qputenv("QT_QUICK_CONTROLS_HOVER_ENABLED", QByteArrayLiteral("1"));
 
     QQmlApplicationEngine engine;
 
@@ -26,7 +28,7 @@ int main(int argc, char *argv[])
         SRC_DIR + QStringLiteral("/mocks"),
     };
 
-    for (auto& path : additionalImportPaths)
+    for (const auto& path : additionalImportPaths)
         engine.addImportPath(path);
 
     auto watcherFactory = [additionalImportPaths](QQmlEngine*, QJSEngine*) {

storybook/main.qml

@@ -29,6 +29,9 @@ ApplicationWindow {
     ListModel {
         id: pagesModel
 
+        ListElement {
+            title: "ProfileDialogView"
+        }
         ListElement {
              title: "CommunitiesPortalLayout"
         }

storybook/pages/ProfileDialogViewPage.qml

@@ -0,0 +1,158 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import Storybook 1.0
+
+import utils 1.0
+import shared.views 1.0
+
+SplitView {
+    id: root
+
+    // globalUtilsInst and mainModuleInst injection/replacement
+    QtObject {
+        Component.onCompleted: {
+            Utils.globalUtilsInst = {
+                getEmojiHashAsJson: function(publicKey) {
+                    return JSON.stringify(["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"])
+                },
+                getColorId: function(publicKey) { return 0 }, // TODO
+                getCompressedPk: function(publicKey) { return publicKey }
+            }
+            Utils.mainModuleInst = {
+                getContactDetailsAsJson: function(publicKey, getVerificationRequest) // TODO make an editor for this
+                {
+                    return JSON.stringify({ displayName: "Mock User Name",
+                                              optionalName: "OriginalMockUser",
+                                              displayIcon: "", // TODO
+                                              publicKey: publicKey,
+                                              name: "mock-ens-name",
+                                              ensVerified: true,
+                                              alias: "Mock User Triplet",
+                                              lastUpdated: Date.now(),
+                                              lastUpdatedLocally: Date.now(),
+                                              localNickname: "MockNickname",
+                                              thumbnailImage: "", // TODO
+                                              largeImage: "", // TODO
+                                              isContact: true,
+                                              isAdded: true,
+                                              isBlocked: false,
+                                              removed: false,
+                                              requestReceived: true,
+                                              hasAddedUs: true, // same as above
+                                              isSyncing: false,
+                                              removed: false,
+                                              trustStatus: Constants.trustStatus.unknown,
+                                              verificationStatus: Constants.verificationStatus.unverified,
+                                              incomingVerificationStatus: Constants.verificationStatus.unverified,
+                                              socialLinks: "", // TODO
+                                              bio: "Hello from MockMainModule, I am a mock user and this is my bio."
+                                          })
+                }
+            }
+        }
+
+        Component.onDestruction: {
+            Qt.callLater(function () {
+                Utils.globalUtilsInst = {}
+                Utils.mainModuleInst = {}
+            })
+        }
+    }
+
+    Logs { id: logs }
+
+    SplitView {
+        orientation: Qt.Vertical
+        SplitView.fillWidth: true
+
+        Item {
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+
+            ScrollView {
+                width: parent.width
+                height: parent.height
+                clip: true
+
+                ProfileDialogView {
+                    implicitWidth: 640
+
+                    publicKey: switchOwnProfile.checked ? "0xdeadbeef" : "0xrandomguy"
+
+                    Component.onCompleted: {
+                        Global.appMain = root // FIXME this is here for the popups to work
+                    }
+
+                    profileStore: QtObject {
+                        readonly property string pubkey: "0xdeadbeef"
+                        property string ensName: "mock-ens-name" // TODO match "myPublicKey" from contactsStore/MockMainModule
+
+                        function getQrCodeSource() {
+                            return ""
+                        }
+                        function copyToClipboard(text) {
+                            logs.logEvent("profileStore::copyToClipboard", ["text"], arguments)
+                        }
+                    }
+
+                    contactsStore: QtObject {
+                        readonly property string myPublicKey: "0xdeadbeef"
+
+                        function hasReceivedVerificationRequestFrom(publicKey) {
+                            return false
+                        }
+
+                        function joinPrivateChat(publicKey) {
+                            logs.logEvent("contactsStore::joinPrivateChat", ["publicKey"], arguments)
+                        }
+
+                        function markUntrustworthy(publicKey) {
+                            logs.logEvent("contactsStore::markUntrustworthy", ["publicKey"], arguments)
+                        }
+
+                        function removeContact(publicKey) {
+                            logs.logEvent("contactsStore::removeContact", ["publicKey"], arguments)
+                        }
+
+                        function acceptContactRequest(publicKey) {
+                            logs.logEvent("contactsStore::acceptContactRequest", ["publicKey"], arguments)
+                        }
+
+                        function dismissContactRequest(publicKey) {
+                            logs.logEvent("contactsStore::dismissContactRequest", ["publicKey"], arguments)
+                        }
+
+                        function removeTrustStatus(publicKey) {
+                            logs.logEvent("contactsStore::removeTrustStatus", ["publicKey"], arguments)
+                        }
+
+                        function removeContactRequestRejection(publicKey) {
+                            logs.logEvent("contactsStore::removeContactRequestRejection", ["publicKey"], arguments)
+                        }
+
+                        function verifiedUntrustworthy(publicKey) {
+                            logs.logEvent("contactsStore::verifiedUntrustworthy", ["publicKey"], arguments)
+                        }
+                    }
+                }
+            }
+        }
+
+        LogsAndControlsPanel {
+            SplitView.minimumHeight: 100
+            SplitView.preferredHeight: 200
+
+            logsView.logText: logs.logText
+
+            Row {
+                Switch {
+                    id: switchOwnProfile
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: "Own profile"
+                    checked: false
+                }
+            }
+        }
+    }
+}

storybook/src/Storybook/Logs.qml

@@ -13,7 +13,7 @@ QtObject {
         property string logText: ""
 
         function createLog(name, argumentNames, args) {
-            let log = (new Date()).toLocaleTimeString(Qt.locale(), "h:mm:ss") + ": " + name
+            let log = (new Date()).toLocaleTimeString(Qt.locale(), "hh:mm:ss") + ": " + name
 
             if (!args || args.length === 0)
                 return log

ui/imports/shared/views/ProfileDialogView.qml

@@ -9,7 +9,6 @@ import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Popups.Dialog 0.1
-import StatusQ.Core.Utils 0.1 as SQUtils
 
 import utils 1.0
 import shared.controls 1.0

ui/imports/utils/Global.qml

@@ -1,6 +1,6 @@
 pragma Singleton
 
-import QtQuick 2.13
+import QtQuick 2.14
 import AppLayouts.Chat.popups 1.0
 
 import shared.popups 1.0
@@ -14,6 +14,7 @@ Item {
     property bool popupOpened: false
     property int settingsSubsection: Constants.settingsSubsection.profile
 
+    property var globalUtilsInst: typeof globalUtils !== "undefined" ? globalUtils : null
     property var mainModuleInst
     property var privacyModuleInst
     property var toastMessage
@@ -161,7 +162,7 @@ Item {
 
     function openLink(link) {
         // Qt sometimes inserts random HTML tags; and this will break on invalid URL inside QDesktopServices::openUrl(link)
-        link = globalUtils.plainText(link);
+        link = globalUtilsInst.plainText(link);
         if (localAccountSensitiveSettings.showBrowserSelector) {
             openChooseBrowserPopup(link);
         } else {

ui/imports/utils/Utils.qml

@@ -7,6 +7,7 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1 as StatusQUtils
 
 QtObject {
+    property var mainModuleInst: mainModule
     property var globalUtilsInst: globalUtils
 
     function isDigit(value) {
@@ -545,14 +546,14 @@ QtObject {
     }
 
     function getContactDetailsAsJson(publicKey, getVerificationRequest=true) {
-        let jsonObj = mainModule.getContactDetailsAsJson(publicKey, getVerificationRequest)
+        let jsonObj = mainModuleInst.getContactDetailsAsJson(publicKey, getVerificationRequest)
         try {
             let obj = JSON.parse(jsonObj)
             return obj
         }
         catch (e) {
             // This log is available only in debug mode, if it's annoying we can remove it
-            console.debug("error parsing contact details for public key: ", publicKey, " error: ", e.message)
+            console.warn("error parsing contact details for public key: ", publicKey, " error: ", e.message)
 
             return {
                 displayName: "",
@@ -588,7 +589,7 @@ QtObject {
         if (publicKey === "") {
             return ""
         }
-        let jsonObj = globalUtils.getEmojiHashAsJson(publicKey)
+        let jsonObj = globalUtilsInst.getEmojiHashAsJson(publicKey)
         return JSON.parse(jsonObj)
     }
 
@@ -597,7 +598,7 @@ QtObject {
             return
         if (!force && isEnsVerified(publicKey, getVerificationRequest))
             return
-        let jsonObj = globalUtils.getColorHashAsJson(publicKey)
+        let jsonObj = globalUtilsInst.getColorHashAsJson(publicKey)
         return JSON.parse(jsonObj)
     }
 
@@ -605,7 +606,7 @@ QtObject {
         if (publicKey === "") {
             return 0
         }
-        return globalUtils.getColorId(publicKey)
+        return globalUtilsInst.getColorId(publicKey)
     }
 
     function colorForColorId(colorId)  {
@@ -625,7 +626,7 @@ QtObject {
         if (publicKey === "") {
             return ""
         }
-        return globalUtils.getCompressedPk(publicKey)
+        return globalUtilsInst.getCompressedPk(publicKey)
     }
 
     function getElidedPk(publicKey) {