Refine the AddCloudPrinter page to display the new cloud printers

Added a scrollView to the page, which depends on the DiscoveredUltimakerCloudPrinters
model and displays the printer name, type, and firmware version. If the model is
empty, this page displays a busy indicator and a message instead.

In addition, whenever the "Add printer manually" or "Finish" button are pressed,
they also reset the DiscoveredUltimakerCloudPrintersModel.

CURA-7022

resources/qml/WelcomePages/AddCloudPrintersView.qml

@@ -6,11 +6,14 @@ import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.3
 
 import UM 1.3 as UM
-import Cura 1.5 as Cura
+import Cura 1.7 as Cura
 
 
 //
-// This component contains the content for the 'by IP' page of the "Add New Printer" flow of the on-boarding process.
+// This component gets activated when the user presses the "Add cloud printers" button from the "Add a Printer" page.
+// It contains a busy indicator that remains active until the user logs in and adds a cloud printer in his/her account.
+// Once a cloud printer is added in mycloud.ultimaker.com, Cura discovers it (in a time window of 30 sec) and displays
+// the newly added printers in this page.
 //
 Item
 {
@@ -19,21 +22,19 @@ Item
     id: addCloudPrinterScreen
 
     property bool searchingForCloudPrinters: true
-
+    property var discoveredCloudPrintersModel: CuraApplication.getDiscoveredUltimakerCloudPrintersModel()
-
 
     Rectangle
     {
         id: cloudPrintersContent
-        //color: "steelblue"
-        //opacity: 0.3
         width: parent.width
-        border.width: 1
+        height: parent.height
         anchors
         {
             top: parent.top
             bottom: finishButton.top
             left: parent.left
+            leftMargin: UM.Theme.getSize("default_margin").width
             right: parent.right
             bottomMargin: UM.Theme.getSize("default_margin").height
         }
@@ -50,12 +51,12 @@ Item
             renderType: Text.NativeRendering
         }
 
+        // Component that contains a busy indicator and a message, while it waits for Cura to discover a cloud printer
         Rectangle
         {
             id: waitingContent
             width: parent.width
             height: waitingIndicator.height + waitingLabel.height
-            border.width: 1
             anchors.verticalCenter: parent.verticalCenter
             anchors.horizontalCenter: parent.horizontalCenter
             BusyIndicator
@@ -71,13 +72,93 @@ Item
                 anchors.horizontalCenter: parent.horizontalCenter
                 horizontalAlignment: Text.AlignHCenter
                 text: catalog.i18nc("@label", "Waiting for Cloud response")
-                font: UM.Theme.getFont("medium")
+                font: UM.Theme.getFont("large")
                 renderType: Text.NativeRendering
             }
-            visible: false
+            visible: addCloudPrinterScreen.discoveredCloudPrintersModel.count == 0
         }
 
+        // Label displayed when a new cloud printer is discovered
+        Label
+        {
+            anchors.top: titleLabel.bottom
+            anchors.topMargin: 2 * UM.Theme.getSize("default_margin").height
+            id: cloudPrintersAddedTitle
+            font: UM.Theme.getFont("medium")
+            text: catalog.i18nc("@label", "The following printers in your account have been added in Cura:")
+            height: contentHeight + 2 * UM.Theme.getSize("default_margin").height
+            visible: addCloudPrinterScreen.discoveredCloudPrintersModel.count > 0
+        }
 
+        // The scrollView that contains the list of newly discovered Ultimaker Cloud printers. Visible only when
+        // there is at least a new cloud printer.
+        ScrollView
+        {
+            id: discoveredCloudPrintersScrollView
+            width: parent.width
+            clip : true
+            ScrollBar.horizontal.policy: ScrollBar.AsNeeded
+            ScrollBar.vertical.policy: ScrollBar.AsNeeded
+            visible: discoveredCloudPrintersModel.count > 0
+            anchors
+            {
+                top: cloudPrintersAddedTitle.bottom
+                topMargin: UM.Theme.getSize("default_margin").height
+                left: parent.left
+                leftMargin: UM.Theme.getSize("default_margin").width
+                right: parent.right
+            }
+
+            Column
+            {
+                id: discoveredPrintersColumn
+                spacing: 2 * UM.Theme.getSize("default_margin").height
+
+                Repeater
+                {
+                    id: discoveredCloudPrintersRepeater
+                    model: addCloudPrinterScreen.discoveredCloudPrintersModel
+                    delegate: Item
+                        {
+                            width: discoveredCloudPrintersScrollView.width
+                            height: contentColumn.height
+
+                            Column
+                            {
+                                id: contentColumn
+                                Label
+                                {
+                                    id: cloudPrinterNameLabel
+                                    leftPadding: UM.Theme.getSize("default_margin").width
+                                    text: model.name
+                                    font: UM.Theme.getFont("large_bold")
+                                    color: UM.Theme.getColor("text")
+                                    elide: Text.ElideRight
+                                }
+                                Label
+                                {
+                                    id: cloudPrinterTypeLabel
+                                    leftPadding: 2 * UM.Theme.getSize("default_margin").width
+                                    topPadding: UM.Theme.getSize("thin_margin").height
+                                    text: {"Type: " + model.machine_type}
+                                    font: UM.Theme.getFont("medium")
+                                    color: UM.Theme.getColor("text")
+                                    elide: Text.ElideRight
+                                }
+                                Label
+                                {
+                                    id: cloudPrinterFirmwareVersionLabel
+                                    leftPadding: 2 * UM.Theme.getSize("default_margin").width
+                                    text: {"Firmware version: " + model.firmware_version}
+                                    font: UM.Theme.getFont("medium")
+                                    color: UM.Theme.getColor("text")
+                                    elide: Text.ElideRight
+                                }
+                            }
+                        }
+                }
+            }
+        }
     }
 
     Cura.SecondaryButton
@@ -88,7 +169,7 @@ Item
         text: catalog.i18nc("@button", "Add printer manually")
         onClicked:
         {
-            Cura.API.account.test("Back button pressed in AddCloudPrintersView.qml")
+            discoveredCloudPrintersModel.clearDiscoveredUltimakerCloudPrinters()
             base.showPreviousPage()
         }
     }
@@ -101,10 +182,10 @@ Item
         text: catalog.i18nc("@button", "Finish")
         onClicked:
         {
-            Cura.API.account.test("Finish button pressed in AddCloudPrintersView.qml")
+            addCloudPrinterScreen.discoveredCloudPrintersModel.clearDiscoveredUltimakerCloudPrinters()
             base.showNextPage()
         }
 
-        // enabled: 1 === 1 addPrinterByIpScreen.canAddPrinter
+        enabled: !waitingContent.visible
     }
 }