Add troubleshooting link to footer

It's moving there now. However if there are any errors syncing with the printers, the troubleshooting link has to disappear from there.

This makes the layout quite complex, since the icon on the left and the button on the right are no longer vertically centred. The text used to be vertically centred too, but can't do that any more since the text is not the determiner of the height any more, with there being a horizontally aligned button below it. It's all a bit complex now.

Contributes to issue CURA-8609.

resources/qml/Preferences/Materials/MaterialsSyncDialog.qml

@@ -381,7 +381,18 @@ Window
                         footer: Item
                         {
                             width: printerListScrollView.width
-                            height: visible ? UM.Theme.getSize("card").height + UM.Theme.getSize("default_margin").height : 0
+                            height: {
+                                if(!visible)
+                                {
+                                    return 0;
+                                }
+                                let h = UM.Theme.getSize("card").height + UM.Theme.getSize("default_margin").height; //1 margin between content and footer.
+                                if(printerListTroubleshooting.visible)
+                                {
+                                    h += printerListTroubleshooting.height + UM.Theme.getSize("default_margin").height; //Height increases if there's a troubleshooting link.
+                                }
+                                return h;
+                            }
                             visible: includeOfflinePrinterList.count - cloudPrinterList.count > 0
                             Rectangle
                             {
@@ -392,13 +403,12 @@ Window
                                 border.width: UM.Theme.getSize("default_lining").width
                                 color: "transparent"
 
-                                RowLayout
+                                Row
                                 {
                                     anchors
                                     {
                                         fill: parent
-                                        leftMargin: (parent.height - infoIcon.height) / 2 //Same margin on the left as top and bottom.
+                                        margins: Math.round(UM.Theme.getSize("card").height - UM.Theme.getSize("machine_selector_icon").width) / 2 //Same margin as in other cards.
-                                        rightMargin: (parent.height - infoIcon.height) / 2
                                     }
                                     spacing: UM.Theme.getSize("default_margin").width
 
@@ -407,33 +417,50 @@ Window
                                         id: infoIcon
                                         width: UM.Theme.getSize("section_icon").width
                                         height: width
-                                        Layout.alignment: Qt.AlignVCenter
+                                        //Fake anchor.verticalCenter: printersMissingText.verticalCenter, since we can't anchor to things that aren't siblings.
+                                        anchors.top: parent.top
+                                        anchors.topMargin: Math.round(printersMissingText.height / 2 - height / 2)
 
                                         status: UM.StatusIcon.Status.WARNING
                                     }
 
-                                    Label
+                                    Column
                                     {
-                                        text: catalog.i18nc("@text Asking the user whether printers are missing in a list.", "Printers missing?")
+                                        //Fill the total width. Can't use layouts because we need the anchors for vertical alignment.
-                                          + "\n"
+                                        width: parent.width - infoIcon.width - refreshListButton.width - parent.spacing * 2
-                                          + catalog.i18nc("@text", "Make sure all your printers are turned ON and connected to Digital Factory.")
-                                        font: UM.Theme.getFont("medium")
-                                        color: UM.Theme.getColor("text")
-                                        elide: Text.ElideRight
 
-                                        Layout.alignment: Qt.AlignVCenter
+                                        spacing: UM.Theme.getSize("default_margin").height
-                                        Layout.fillWidth: true
+
+                                        Label
+                                        {
+                                            id: printersMissingText
+                                            text: catalog.i18nc("@text Asking the user whether printers are missing in a list.", "Printers missing?")
+                                              + "\n"
+                                              + catalog.i18nc("@text", "Make sure all your printers are turned ON and connected to Digital Factory.")
+                                            font: UM.Theme.getFont("medium")
+                                            color: UM.Theme.getColor("text")
+                                            elide: Text.ElideRight
+                                        }
+                                        Cura.TertiaryButton
+                                        {
+                                            id: printerListTroubleshooting
+
+                                            text: catalog.i18nc("@button", "Troubleshooting")
+                                            visible: typeof syncModel !== "undefined" && syncModel.exportUploadStatus !== "error"
+                                            iconSource: UM.Theme.getIcon("LinkExternal")
+                                            onClicked: Qt.openUrlExternally("https://support.ultimaker.com/hc/en-us/articles/360012019239?utm_source=cura&utm_medium=software&utm_campaign=sync-material-wizard-troubleshoot-cloud-printer")
+                                        }
                                     }
 
                                     Cura.SecondaryButton
                                     {
                                         id: refreshListButton
+                                        //Fake anchor.verticalCenter: printersMissingText.verticalCenter, since we can't anchor to things that aren't siblings.
+                                        anchors.top: parent.top
+                                        anchors.topMargin: Math.round(printersMissingText.height / 2 - height / 2)
+
                                         text: catalog.i18nc("@button", "Refresh List")
                                         iconSource: UM.Theme.getIcon("ArrowDoubleCircleRight")
-
-                                        Layout.alignment: Qt.AlignVCenter
-                                        Layout.preferredWidth: width
-
                                         onClicked: Cura.API.account.sync(true)
                                     }
                                 }