Add as_badge and :id type to Discreet Information

Author: rctneil

app/components/avo/discreet_information_component.html.erb

@@ -1,6 +1,6 @@
-<div class="flex gap-2 ml-2 mt-1">
+<div class="flex gap-2 ml-2 mt-1 items-center">
   <% items.each do |item| %>
-    <%= content_tag element_tag(item), **element_attributes(item), class: "flex gap-1 text-xs font-normal text-gray-600 hover:text-gray-900", title: item.tooltip, data: {tippy: :tooltip, **data(item)} do %>
+    <%= content_tag element_tag(item), **element_attributes(item), class: element_classes(item), title: item.tooltip, data: {tippy: :tooltip, **data(item)} do %>
       <%= item.label if item.label.present? %> <%= helpers.svg item.icon, class: "text-2xl h-4" %>
     <% end %>
   <% end %>

app/components/avo/discreet_information_component.rb

@@ -23,5 +23,13 @@ def element_attributes(item)
     end
   end
 
+  def element_classes(item)
+    if item.as_badge
+      %w(whitespace-nowrap rounded-md uppercase px-2 py-1 text-xs font-bold block text-center truncate bg-gray-500 text-white)
+    else
+      %w(flex gap-1 text-xs font-normal text-gray-600 hover:text-gray-900)
+    end
+  end
+
   def data(item) = item.data || {}
 end

lib/avo/discreet_information.rb

@@ -10,6 +10,8 @@ def items
     Array.wrap(resource.class.discreet_information).map do |item|
       if item == :timestamps
         timestamp_item(item)
+      elsif item == :id
+        id(item)
       else
         parse_payload(item)
       end
@@ -18,6 +20,13 @@ def items
 
   private
 
+  def id(item)
+    DiscreetInformationItem.new(
+      label: "ID: #{record.id}",
+      as_badge: true
+    )
+  end
+
   def timestamp_item(item)
     return if record.created_at.blank? && record.updated_at.blank?
 
@@ -35,7 +44,7 @@ def timestamp_item(item)
 
     DiscreetInformationItem.new(
       tooltip: tag.div([created_at_tag, updated_at_tag].compact.join(tag.br), style: "text-align: right;"),
-      icon: "heroicons/outline/clock"
+      icon: "heroicons/outline/clock",
     )
   end
 
@@ -54,9 +63,9 @@ def parse_payload(item)
       url: Avo::ExecutionContext.new(target: item[:url], **args).handle,
       url_target: Avo::ExecutionContext.new(target: item[:url_target], **args).handle,
       data: Avo::ExecutionContext.new(target: item[:data], **args).handle,
-      label: Avo::ExecutionContext.new(target: item[:label], **args).handle
+      label: Avo::ExecutionContext.new(target: item[:label], **args).handle,
     )
   end
 
-  DiscreetInformationItem = Struct.new(:tooltip, :icon, :url, :url_target, :data, :label, keyword_init: true) unless defined?(DiscreetInformationItem)
+  DiscreetInformationItem = Struct.new(:tooltip, :icon, :url, :url_target, :data, :label, :as_badge, keyword_init: true) unless defined?(DiscreetInformationItem)
 end

spec/dummy/app/avo/resources/project.rb

@@ -12,6 +12,17 @@ class Avo::Resources::Project < Avo::BaseResource
     query.unscoped
   }
 
+  self.discreet_information = [
+    :timestamps,
+    :id,
+    {
+      tooltip: -> { sanitize("View <strong>#{record.name}</strong> on site", tags: %w[strong]) },
+      icon: -> { "heroicons/outline/arrow-top-right-on-square" },
+      url: -> { main_app.root_url },
+      url_target: :_blank
+    }
+  ]
+
   def fields
     field :id, as: :id, link_to_record: true
     field :status,