feature(web): make the product selection more appealing and accessible (

#1550)

* Fixes #1415
* Supply icon for all products and copy them to _dist/assets/logos_ in
final web build.
* Add icon to structures, pass it to dbus, etc (please do not mix
product icon with pattern icon) fallback to default.svg in case that no
icon is set

|Before | After|
|-|-|
|![Screenshot of the previous product selection
page](https://github.com/user-attachments/assets/7f2903c5-cbda-471b-bda1-f2b6c3be1f56)|![Screenshot
of the new product selection
page](https://github.com/user-attachments/assets/a5204d21-640f-4777-8808-373ecb955937)|

---

For more details please read
#1550 (review)
(and maybe
#1550 (review))

products.d/agama-products.changes

@@ -1,3 +1,8 @@
+-------------------------------------------------------------------
+Thu Sep  5 16:25:00 UTC 2024 - Lubos Kocman <[email protected]>
+
+- Show product logo in product selector (gh#openSUSE/agama#1415).
+
 -------------------------------------------------------------------
 Tue Sep  3 10:24:30 UTC 2024 - Lubos Kocman <[email protected]>
 

products.d/leap_160.yaml

@@ -5,9 +5,10 @@ name: Leap 16.0 Alpha
 # at the at translations/description key below to avoid using obsolete
 # translations!!
 # ------------------------------------------------------------------------------
-description: 'Leap 16.0 is the latest version of a community distribution based
+description: 'The latest version of a community distribution based
   on the latest SUSE Linux Enterprise Server.'
 # Do not manually change any translations! See README.md for more details.
+icon: Leap16.svg
 translations:
   description:
     ca: El Leap 16.0 és la darrera versió d'una distribució comunitària basada en

products.d/microos.yaml

@@ -9,6 +9,7 @@ description: 'A quick, small distribution designed to host container workloads
   with automated administration & patching. openSUSE MicroOS provides
   transactional (atomic) updates upon a read-only btrfs root file system. As
   rolling release distribution the software is always up-to-date.'
+icon: MicroOS.svg
 # Do not manually change any translations! See README.md for more details.
 translations:
   description:

products.d/sles_160.yaml

@@ -5,11 +5,12 @@ name: SUSE Linux Enteprise Server 16.0 Alpha
 # at the at translations/description key below to avoid using obsolete
 # translations!!
 # ------------------------------------------------------------------------------
-description: "SUSE Linux Enterprise Server is the open, reliable, compliant, and
+description: "An open, reliable, compliant, and
   future-proof Linux Server choice that ensures the enterprise's business
   continuity. It is the secure and adaptable OS for long-term supported,
   innovation-ready infrastructure running business-critical workloads
   on-premises, in the cloud, and at the edge."
+icon: SUSE.svg
 # Do not manually change any translations! See README.md for more details.
 translations:
   description:

products.d/tumbleweed.yaml

@@ -5,10 +5,11 @@ name: openSUSE Tumbleweed
 # at the at translations/description key below to avoid using obsolete
 # translations!!
 # ------------------------------------------------------------------------------
-description: 'The Tumbleweed distribution is a pure rolling release version of
+description: 'A pure rolling release version of
   openSUSE containing the latest "stable" versions of all software instead of
   relying on rigid periodic release cycles. The project does this for users that
   want the newest stable software.'
+icon: Tumbleweed.svg
 # Do not manually change any translations! See README.md for more details.
 translations:
   description:

rust/agama-lib/share/profile.schema.json

@@ -30,6 +30,7 @@
         "id": {
           "title": "Product identifier",
           "description": "The id field from a products.d/foo.yaml file",
+          "icon": "Product Icon path specified in products.d/foo.yaml file",
           "type": "string"
         },
         "registrationCode": {

rust/agama-lib/src/product/client.rs

@@ -16,6 +16,8 @@ pub struct Product {
     pub name: String,
     /// Product description
     pub description: String,
+    /// Product icon (e.g., "default.svg")
+    pub icon: String,
 }
 
 #[derive(Clone, Debug, Serialize, Deserialize, utoipa::ToSchema)]
@@ -74,10 +76,15 @@ impl<'a> ProductClient<'a> {
                     Some(value) => value.try_into().unwrap(),
                     None => "",
                 };
+                let icon = match data.get("icon") {
+                    Some(value) => value.try_into().unwrap(),
+                    None => "default.svg",
+                };
                 Product {
                     id,
                     name,
                     description: description.to_string(),
+                    icon: icon.to_string(),
                 }
             })
             .collect();

rust/package/agama.changes

@@ -1,3 +1,8 @@
+-------------------------------------------------------------------
+Thu Sep  5 16:25:00 UTC 2024 - Lubos Kocman <[email protected]>
+
+- Show product logo in product selector (gh#openSUSE/agama#1415).
+
 -------------------------------------------------------------------
 Wed Aug 28 12:37:34 UTC 2024 - Imobach Gonzalez Sosa <[email protected]>
 

service/lib/agama/dbus/software/product.rb

@@ -54,7 +54,14 @@ def issues
 
         def available_products
           backend.products.map do |product|
-            [product.id, product.display_name, { "description" => product.localized_description }]
+            [
+              product.id,
+              product.display_name,
+              {
+                "description" => product.localized_description,
+                "icon"        => product.icon
+              }
+            ]
           end
         end
 

service/lib/agama/software/product.rb

@@ -48,6 +48,13 @@ class Product
       # @return [String, nil] E.g., "1.0".
       attr_accessor :version
 
+      # Product icon. Please use specify filename with svg suffix and ensure referenced
+      # file exists inside agama/web/src/assets/product.
+      # `default.svg` will be used unless specified otherwise.
+      #
+      # @return [String] E.g. "leap.svg"
+      attr_accessor :icon
+
       # List of repositories.
       #
       # @return [Array<String>] Empty if the product requires registration.
@@ -99,6 +106,7 @@ class Product
       # @param id [string] Product id.
       def initialize(id)
         @id = id
+        @icon = "default.svg"
         @repositories = []
         @labels = []
         @mandatory_packages = []

service/lib/agama/software/product_builder.rb

@@ -64,6 +64,7 @@ def initialize_product(id, data, attrs)
           product.description = attrs["description"]
           product.name = data[:name]
           product.version = data[:version]
+          product.icon = attrs["icon"] if attrs["icon"]
         end
       end
 
@@ -98,6 +99,7 @@ def product_data_from_config(id)
         {
           name:               config.products.dig(id, "software", "base_product"),
           version:            config.products.dig(id, "software", "version"),
+          icon:               config.products.dig(id, "software", "icon"),
           labels:             config.arch_elements_from(
             id, "software", "installation_labels", property: :label
           ),

service/package/rubygem-agama-yast.changes

@@ -1,3 +1,8 @@
+-------------------------------------------------------------------
+Thu Sep  5 16:25:00 UTC 2024 - Lubos Kocman <[email protected]>
+
+- Show product logo in product selector (gh#openSUSE/agama#1415).
+
 -------------------------------------------------------------------
 Wed Sep  4 08:55:29 UTC 2024 - José Iván López González <[email protected]>
 

web/package/agama-web-ui.changes

@@ -1,3 +1,8 @@
+-------------------------------------------------------------------
+Thu Sep  5 16:25:00 UTC 2024 - Lubos Kocman <[email protected]>
+
+- Show product logo in product selector (gh#openSUSE/agama#1415).
+
 -------------------------------------------------------------------
 Wed Sep  4 21:00:34 UTC 2024 - Knut Anderssen <[email protected]>