chore(Storybook): LogsView added

Closes: #7818

storybook/CMakeLists.txt

@@ -15,7 +15,7 @@ find_package(
   COMPONENTS Core Quick QuickControls2
   REQUIRED)
 
-file(GLOB_RECURSE QML_FILES "stubs/*.qml" "../ui/StatusQ/*.qml" "../ui/app/*.qml")
+file(GLOB_RECURSE QML_FILES "stubs/*.qml" "Storybook/*.qml" "../ui/StatusQ/*.qml" "../ui/app/*.qml")
 file(GLOB_RECURSE JS_FILES "../ui/StatusQ/*.js" "../ui/app/*.js")
 file(GLOB_RECURSE HEADERS *.h)
 if(APPLE)
@@ -39,6 +39,8 @@ target_link_libraries(
   ${PROJECT_NAME} PRIVATE Qt5::Core Qt5::Quick Qt5::QuickControls2
                           SortFilterProxyModel)
 
+set(QML_IMPORT_PATH ${CMAKE_SOURCE_DIR} CACHE STRING "" FORCE)
+
 if (APPLE)
   find_library(AppKit AppKit)
   find_library(Foundation Foundation)

storybook/Storybook/Logs.qml

@@ -0,0 +1,35 @@
+import QtQuick 2.14
+
+QtObject {
+    readonly property alias logText: d.logText
+
+    function logEvent(name, argumentNames, args) {
+        d.logText += d.createLog(name, argumentNames, args) + "\n"
+    }
+
+    readonly property QtObject _d: QtObject {
+        id: d
+
+        property string logText: ""
+
+        function createLog(name, argumentNames, args) {
+            let log = (new Date()).toLocaleTimeString(Qt.locale(), "h:mm:ss") + ": " + name
+
+            if (args.length === 0)
+                return log
+
+            log += ": ["
+
+            for (let i = 0; i < args.length; i++) {
+                log += argumentNames[i] + ": " + JSON.stringify(args[i])
+
+                if (i !== args.length - 1)
+                    log += ", "
+            }
+
+            log += "]"
+
+            return log
+        }
+    }
+}

storybook/Storybook/LogsAndControlsPanel.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+ColumnLayout {
+    readonly property alias logsView: logsView
+    default property alias controls: controlsPane.contentData
+
+    spacing: 0
+
+    TabBar {
+        id: tabs
+
+        Layout.fillWidth: true
+        contentHeight: 30
+
+        TabButton {
+            text: "Events"
+            width: implicitWidth
+        }
+        TabButton {
+            text: "Controls"
+            width: implicitWidth
+        }
+    }
+
+    StackLayout {
+        currentIndex: tabs.currentIndex
+
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        LogsView {
+            id: logsView
+
+            clip: true
+        }
+
+        Pane {
+            id: controlsPane
+        }
+    }
+}

storybook/Storybook/LogsView.qml

@@ -0,0 +1,25 @@
+import QtQuick 2.14
+
+import StatusQ.Core.Theme 0.1
+
+Flickable {
+    id: root
+
+    contentWidth: logTextEdit.implicitWidth
+    contentHeight: logTextEdit.implicitHeight
+
+    property alias logText: logTextEdit.text
+
+    onLogTextChanged: {
+        if(logTextEdit.implicitHeight > root.height)
+            root.contentY = logTextEdit.implicitHeight - root.height
+    }
+
+    TextEdit {
+        id: logTextEdit
+        font.family: Theme.palette.monoFont.name
+        font.letterSpacing: 1.2
+        readOnly: true
+        selectByMouse: true
+    }
+}

storybook/Storybook/StorybookUtils.qml

@@ -0,0 +1,21 @@
+pragma Singleton
+import QtQml 2.14
+
+QtObject {
+    function singleShotConnection(prop, handler) {
+        const internalHandler = (...args) => {
+            handler(...args)
+            prop.disconnect(internalHandler)
+        }
+        prop.connect(internalHandler)
+    }
+
+    function getUniqueValuesFromModel(model, prop) {
+        const values = []
+        for (let i = 0; i < model.count; i++)
+            values.push(model.get(i)[prop])
+
+        const onlyUnique = (value, index, self) => self.indexOf(value) === index
+        return values.filter(onlyUnique)
+    }
+}

storybook/Storybook/qmldir

@@ -0,0 +1,5 @@
+ImageSelectPopup 1.0 ImageSelectPopup.qml
+Logs 1.0 Logs.qml
+LogsAndControlsPanel 1.0 LogsAndControlsPanel.qml
+LogsView 1.0 LogsView.qml
+singleton StorybookUtils 1.0 StorybookUtils.qml

storybook/main.qml

@@ -19,7 +19,6 @@ ApplicationWindow {
         id: mainPageView
 
         anchors.fill: parent
-
         showHeader: false
 
         function page(name, fillPage) {

storybook/pages/CommunitiesPortalLayoutPage.qml

@@ -1,5 +1,4 @@
 import QtQuick 2.14
-
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
@@ -10,38 +9,70 @@ import AppLayouts.CommunitiesPortal.stores 1.0
 
 import SortFilterProxyModel 0.2
 
-SplitView {
-    anchors.fill: parent
+import Storybook 1.0
 
-    ColumnLayout {
+import utils 1.0
+
+SplitView {
+    Logs { id: logs }
+
+    SplitView {
+        orientation: Qt.Vertical
         SplitView.fillWidth: true
 
-        CommunitiesPortalLayout {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
+        ColumnLayout {
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
 
-            communitiesStore: CommunitiesStore {
-                readonly property string locale: ""
-                readonly property int unreadNotificationsCount: 42
-                readonly property string communityTags:
-                    JSON.stringify({"Activism":"✊","Art":"🎨","Blockchain":"🔗","Books & blogs":"📚","Career":"💼"})
-                readonly property var curatedCommunitiesModel: SortFilterProxyModel {
+            CommunitiesPortalLayout {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
 
-                    sourceModel: CommunitiesPortalDummyModel { id: mockedModel }
+                communitiesStore: CommunitiesStore {
+                    readonly property string locale: ""
+                    readonly property int unreadNotificationsCount: 42
+                    readonly property string communityTags:
+                        JSON.stringify({"Activism":"✊","Art":"🎨","Blockchain":"🔗","Books & blogs":"📚","Career":"💼"})
+                    readonly property var curatedCommunitiesModel: SortFilterProxyModel {
 
-                    filters: IndexFilter {
-                        inverted: true
-                        minimumIndex: Math.floor(slider.value)
+                        sourceModel: CommunitiesPortalDummyModel { id: mockedModel }
+
+                        filters: IndexFilter {
+                            inverted: true
+                            minimumIndex: Math.floor(slider.value)
+                        }
                     }
+
+                    function setActiveCommunity() {
+                        logs.logEvent("CommunitiesStore::setActiveCommunity", ["communityId"], arguments)
+                    }
+                }
+
+                // TODO: onCompleted handler and localAccountSensitiveSettings are here to allow opening
+                // "Import Community" and "Create New Community" popups. However those popups shouldn't
+                // be tightly coupled with `CommunitiesPortalLayout` so it should be refactored in the next step.
+                // Pressing buttons "Import using key" and "Create new community" should only request for opening
+                // dialogs, and in Storybook it should be logged in the same way as calls to stores.
+                // Mentioned popups should have their own pages in the Storybook.
+                Component.onCompleted: {
+                    Global.appMain = this
+                }
+
+                QtObject {
+                    id: localAccountSensitiveSettings
+                    readonly property bool isDiscordImportToolEnabled: false
                 }
             }
         }
 
-        StatusDialogDivider {
-            Layout.fillWidth: true
-        }
+        LogsAndControlsPanel {
+            id: logsAndControlsPanel
+
+            SplitView.minimumHeight: 100
+            SplitView.preferredHeight: 200
+
+            logsView.logText: logs.logText
 
-        Pane {
             Row {
                 Text {
                     anchors.verticalCenter: parent.verticalCenter

storybook/pages/CommunitiesPortalModelEditor.qml

@@ -2,20 +2,14 @@ import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
+import Storybook 1.0
+
 ListView {
     id: root
 
     spacing: 25
     ScrollBar.vertical: ScrollBar { }
 
-    function singleShotConnection(prop, handler) {
-        const internalHandler = (...args) => {
-            handler(...args)
-            prop.disconnect(internalHandler)
-        }
-        prop.connect(internalHandler)
-    }
-
     ImageSelectPopup {
         id: iconSelector
 
@@ -29,14 +23,7 @@ ListView {
         }
 
         Component.onCompleted: {
-            const model = root.model
-            const icons = []
-            for (let i = 0; i < model.count; i++) {
-                icons.push(model.get(i).icon)
-            }
-
-            const onlyUnique = (value, index, self) => self.indexOf(value) === index
-            const uniqueIcons = icons.filter(onlyUnique)
+            const uniqueIcons = StorybookUtils.getUniqueValuesFromModel(root.model, "icon")
             uniqueIcons.map(image => iconsModel.append( { image }))
         }
     }
@@ -54,14 +41,7 @@ ListView {
         }
 
         Component.onCompleted: {
-            const model = root.model
-            const banners = []
-            for (let i = 0; i < model.count; i++) {
-                banners.push(model.get(i).banner)
-            }
-
-            const onlyUnique = (value, index, self) => self.indexOf(value) === index
-            const uniqueBanners = banners.filter(onlyUnique)
+            const uniqueBanners = StorybookUtils.getUniqueValuesFromModel(root.model, "banner")
             uniqueBanners.map(image => bannersModel.append( { image }))
         }
     }
@@ -99,17 +79,17 @@ ListView {
                 CheckBox {
                     text: "featured"
                     checked: model.featured
-                    onCheckedChanged: model.featured = checked
+                    onToggled: model.featured = checked
                 }
                 CheckBox {
                     text: "available"
                     checked: model.available
-                    onCheckedChanged: model.available = checked
+                    onToggled: model.available = checked
                 }
                 CheckBox {
                     text: "loaded"
                     checked: model.loaded
-                    onCheckedChanged: model.loaded = checked
+                    onToggled: model.loaded = checked
                 }
             }
 
@@ -133,7 +113,7 @@ ListView {
                         anchors.fill: parent
                         onClicked: {
                             iconSelector.open()
-                            singleShotConnection(iconSelector.selected, icon => {
+                            StorybookUtils.singleShotConnection(iconSelector.selected, icon => {
                                 model.icon = icon
                                 iconSelector.close()
                             })
@@ -157,7 +137,7 @@ ListView {
                         anchors.fill: parent
                         onClicked: {
                             bannerSelector.open()
-                            singleShotConnection(bannerSelector.selected, banner => {
+                            StorybookUtils.singleShotConnection(bannerSelector.selected, banner => {
                                 model.banner = banner
                                 bannerSelector.close()
                             })

storybook/qml.qrc

@@ -4,6 +4,11 @@
         <file>pages/CommunitiesPortalLayoutPage.qml</file>
         <file>pages/CommunitiesPortalDummyModel.qml</file>
         <file>pages/CommunitiesPortalModelEditor.qml</file>
-        <file>pages/ImageSelectPopup.qml</file>
+        <file>Storybook/LogsView.qml</file>
+        <file>Storybook/qmldir</file>
+        <file>Storybook/LogsAndControlsPanel.qml</file>
+        <file>Storybook/ImageSelectPopup.qml</file>
+        <file>Storybook/StorybookUtils.qml</file>
+        <file>Storybook/Logs.qml</file>
     </qresource>
 </RCC>