Introduce a ManageButton

The state and styling of this coupled with the available options.
Discussed with UX that primary state: Install, Enable, Update while
secondary states are: Uninstall, Disable

Each primary/secondary state also has a busy state, with the verb
and spinner.

Contributes to: CURA-8587

plugins/Marketplace/PackageModel.py

@@ -99,34 +99,45 @@ class PackageModel(QObject):
     def sectionTitle(self) -> Optional[str]:
         return self._section_title
 
-    enableManageButtonChanged = pyqtSignal()
+    isInstalledChanged = pyqtSignal()
 
-    @pyqtProperty(str, notify = enableManageButtonChanged)
+    @pyqtProperty(bool, notify = isInstalledChanged)
-    def enableManageButtonText(self):
+    def isInstalled(self):
-        if self._is_active:
-            return catalog.i18nc("@button", "Disable")
-        else:
-            return catalog.i18nc("@button", "Enable")
-
-    @pyqtProperty(bool, notify = enableManageButtonChanged)
-    def enableManageButtonVisible(self):
         return self._is_installed
 
-    installManageButtonChanged = pyqtSignal()
+    isEnabledChanged = pyqtSignal()
 
-    @pyqtProperty(str, notify = installManageButtonChanged)
+    @pyqtProperty(bool, notify = isEnabledChanged)
-    def installManageButtonText(self):
+    def isEnabled(self):
+        return self._is_active
+
+    manageEnableStateChanged = pyqtSignal()
+
+    @pyqtProperty(str, notify = manageEnableStateChanged)
+    def manageEnableState(self):
+        # TODO: Handle manual installed packages
         if self._is_installed:
-            return catalog.i18nc("@button", "Uninstall")
+            if self._is_active:
+                return "secondary"
+            else:
+                return "primary"
         else:
-            return catalog.i18nc("@button", "Install")
+            return "hidden"
 
-    @pyqtProperty(bool, notify = installManageButtonChanged)
+    manageInstallStateChanged = pyqtSignal()
-    def installManageButtonVisible(self):
-        return not self._is_bundled
 
-    updateManageButtonChanged = pyqtSignal()
+    @pyqtProperty(str, notify = manageInstallStateChanged)
+    def manageInstallState(self):
+        if self._is_installed:
+            if self._is_bundled:
+                return "hidden"
+            else:
+                return "secondary"
+        else:
+            return "primary"
 
-    @pyqtProperty(bool, notify = updateManageButtonChanged)
+    manageUpdateStateChanged = pyqtSignal()
-    def updateManageButtonVisible(self):
+
-        return False  #  Todo: implement
+    @pyqtProperty(str, notify = manageUpdateStateChanged)
+    def manageUpdateState(self):
+        return "hidden"  # TODO: implement

plugins/Marketplace/resources/qml/ManageButton.qml

@@ -0,0 +1,154 @@
+// Copyright (c) 2021 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.1
+
+import UM 1.6 as UM
+import Cura 1.6 as Cura
+
+RowLayout
+{
+    id: manageButton
+    property alias primaryText: primaryButton.text
+    property alias secondaryText: secondaryButton.text
+    property string busyPrimaryText: busyMessageText.text
+    property string busySecondaryText: busyMessageText.text
+    property string mainState: "primary"
+
+    state: mainState
+
+    Cura.PrimaryButton
+    {
+        id: primaryButton
+        visible: false
+
+        onClicked:
+        {
+            manageButton.state = "busy"
+        }
+    }
+
+    Cura.SecondaryButton
+    {
+        id: secondaryButton
+        visible: false
+
+        onClicked:
+        {
+            manageButton.state = "busy"
+        }
+    }
+
+    Item
+    {
+        id: busyMessage
+        visible: false
+        height: UM.Theme.getSize("action_button").height
+        width: childrenRect.width
+
+        BusyIndicator
+        {
+            id: busyIndicator
+            visible: parent.visible
+            width: height
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+
+            palette.dark: UM.Theme.getColor("text")
+
+            RotationAnimator
+            {
+                target: busyIndicator.contentItem
+                running: busyIndicator.visible && busyIndicator.running
+                from: 0
+                to: 360
+                loops: Animation.Infinite
+                duration: 2500
+            }
+        }
+        Label
+        {
+            id: busyMessageText
+            visible: parent.visible
+            text: manageButton.mainState == "primary" ? manageButton.busyPrimaryText : manageButton.busySecondaryText
+            anchors.left: busyIndicator.right
+            anchors.verticalCenter: parent.verticalCenter
+
+            font: UM.Theme.getFont("default")
+            color: UM.Theme.getColor("text")
+        }
+    }
+
+    states:
+    [
+        State
+        {
+            name: "primary"
+            PropertyChanges
+            {
+                target: primaryButton
+                visible: true
+            }
+            PropertyChanges
+            {
+                target: secondaryButton
+                visible: false
+            }
+            PropertyChanges
+            {
+                target: busyMessage
+                visible: false
+            }
+        },
+        State
+        {
+            name: "secondary"
+            PropertyChanges
+            {
+                target: primaryButton
+                visible: false
+            }
+            PropertyChanges
+            {
+                target: secondaryButton
+                visible: true
+            }
+            PropertyChanges
+            {
+                target: busyMessage
+                visible: false
+            }
+        },
+        State
+        {
+            name: "hidden"
+            PropertyChanges
+            {
+                target: manageButton
+                visible: false
+            }
+        },
+        State
+        {
+            name: "busy"
+            PropertyChanges
+            {
+                target: primaryButton
+                visible: false
+            }
+            PropertyChanges
+            {
+                target: secondaryButton
+                visible: false
+            }
+            PropertyChanges
+            {
+                target: busyMessage
+                visible: true
+            }
+        }
+    ]
+}