feature: copyable field option (#3468)

* add new feature, copy field value

* make display changes

* fix bug in text_area field

* run rubocop, and make small changes

* Fix sugestion by Rubocop and include buttons text in test_helpers_spec

* Request changes

* Fix failing checks

* Fix specs

* fix failing check

* Self code review

* Fix copy firld content spec

* Fix spec

* Final fix spec

* Self check changes and fix what user can copy

* refactor

* re-organize imports

* revert dependencies downgrade

* revert schema

* rm unwanted styles

* lint

* fix test

* adjust position

* tippy

* bundle

---------

Co-authored-by: Paul Bob <[email protected]>
Co-authored-by: Paul Bob <[email protected]>

Author: Nevelito

Gemfile

@@ -114,6 +114,7 @@ gem "amazing_print"
 group :development, :test do
   gem "faker", require: false
   gem "i18n-tasks", "~> 1.0.12"
+  gem "ruby-openai"
   gem "erb-formatter", require: false
   # https://thoughtbot.com/blog/a-standard-way-to-lint-your-views
   gem "erb_lint", require: false

Gemfile.lock

@@ -267,19 +267,27 @@ GEM
       rubocop (>= 1)
       smart_properties
     erubi (1.13.0)
+    event_stream_parser (1.0.0)
     factory_bot (6.5.0)
       activesupport (>= 5.0.0)
     factory_bot_rails (6.4.4)
       factory_bot (~> 6.5)
       railties (>= 5.0.0)
     faker (3.5.1)
       i18n (>= 1.8.11, < 2)
+    faraday (2.12.2)
+      faraday-net_http (>= 2.0, < 3.5)
+      json
+      logger
+    faraday-multipart (1.1.0)
+      multipart-post (~> 2.0)
+    faraday-net_http (3.4.0)
+      net-http (>= 0.5.0)
     ferrum (0.15)
       addressable (~> 2.5)
       concurrent-ruby (~> 1.1)
       webrick (~> 1.7)
       websocket-driver (~> 0.7)
-    ffi (1.17.0)
     ffi (1.17.0-x86_64-linux-gnu)
     flay (2.13.3)
       erubi (~> 1.10)
@@ -379,7 +387,6 @@ GEM
     mini_histogram (0.3.1)
     mini_magick (4.13.2)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.8)
     minitest (5.25.4)
     monetize (1.13.0)
       money (~> 6.12)
@@ -391,6 +398,9 @@ GEM
       money (~> 6.13)
       railties (>= 3.0)
     msgpack (1.7.5)
+    multipart-post (2.4.1)
+    net-http (0.6.0)
+      uri
     net-imap (0.5.2)
       date
       net-protocol
@@ -401,9 +411,6 @@ GEM
     net-smtp (0.5.0)
       net-protocol
     nio4r (2.7.4)
-    nokogiri (1.17.2)
-      mini_portile2 (~> 2.8.2)
-      racc (~> 1.4)
     nokogiri (1.17.2-x86_64-linux)
       racc (~> 1.4)
     orm_adapter (0.5.0)
@@ -537,6 +544,10 @@ GEM
       rubocop-ast (>= 1.31.1, < 2.0)
     rubocop-shopify (2.15.1)
       rubocop (~> 1.51)
+    ruby-openai (7.3.1)
+      event_stream_parser (>= 0.3.0, < 2.0.0)
+      faraday (>= 1)
+      faraday-multipart (>= 1)
     ruby-progressbar (1.13.0)
     ruby-statistics (3.0.2)
     ruby-vips (2.2.2)
@@ -662,7 +673,6 @@ GEM
     zeitwerk (2.7.1)
 
 PLATFORMS
-  ruby
   x86_64-linux
 
 DEPENDENCIES
@@ -730,6 +740,7 @@ DEPENDENCIES
   rspec-retry (~> 0.6.2)
   rubocop
   rubocop-shopify
+  ruby-openai
   ruby-statistics (< 4)
   rubycritic
   simplecov

app/components/avo/clipboard_component.html.erb

@@ -0,0 +1,21 @@
+<%= content_tag :div,
+  class: "opacity-0 group-hover:opacity-100 transition-opacity duration-200",
+  data: {
+    controller: "clipboard",
+    clipboard_success_duration_value: @duration_value,
+    clipboard_success_content_value: @content_value
+  } do %>
+  <div class="hidden" data-clipboard-target="source"><%= @value %></div>
+  <div class="text-xs xl:text-sm">
+    <%= content_tag :button,
+      type: "button",
+      data: {
+        action: "clipboard#copy",
+        clipboard_target: "button",
+        tippy: "tooltip",
+        tippy_content: I18n.t("avo.copy")
+      } do %>
+      <%= helpers.svg "heroicons/outline/clipboard", class: "h-4 inline" %>
+    <% end %>
+  </div>
+<% end %>

app/components/avo/clipboard_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class Avo::ClipboardComponent < Avo::BaseComponent
+  prop :value
+
+  def before_render
+    @duration_value = 2500
+    @content_value = helpers.svg("heroicons/outline/clipboard-document-check", class: "h-4 inline").tr('"', "'")
+  end
+
+  def render?
+    @value.present?
+  end
+end

app/components/avo/field_wrapper_component.html.erb

@@ -26,11 +26,16 @@
       }), data: {slot: "value"} do %>
     <div class="self-center w-full break-words <% unless full_width? || compact? || stacked? %> md:w-8/12 has-sidebar:w-full <% end %>">
       <% if on_show? %>
-        <% if render_dash? %>
-          —
-        <% else %>
-          <%= content %>
-        <% end %>
+        <div class="flex flex-row items-center group gap-x-1">
+          <% if render_dash? %>
+            —
+          <% else %>
+            <%= content %>
+          <% end %>
+          <% if @field.copyable %>
+            <%= render Avo::ClipboardComponent.new(value: @field.value) %>
+          <% end %>
+        </div>
       <% elsif on_edit? %>
         <%= content %>
         <% if record.present? and record.errors.include? @field.id %>

app/components/avo/index/field_wrapper_component.html.erb

@@ -9,13 +9,18 @@
   <% if render_dash? %>
     —
   <% else %>
-    <% if @center_content %>
-      <div class="flex items-center justify-center">
+    <div class="flex flex-row items-center gap-x-1 group">
+      <% if @center_content %>
+        <div class="flex items-center justify-center">
+          <%= content %>
+        </div>
+      <% else %>
         <%= content %>
-      </div>
-    <% else %>
-      <%= content %>
-    <% end %>
+      <% end %>
+      <% if @field.copyable %>
+        <%= render Avo::ClipboardComponent.new(value: @field.value) %>
+      <% end %>
+    </div>
   <% end %>
   <% if params[:avo_debug].present? %>
     <!-- Raw value: -->

app/javascript/js/application.js

@@ -1,14 +1,13 @@
 import { Alert, Popover } from 'tailwindcss-stimulus-components'
 import { Application } from '@hotwired/stimulus'
-import TextareaAutogrow from 'stimulus-textarea-autogrow'
+import Clipboard from '@stimulus-components/clipboard'
 import PasswordVisibility from '@stimulus-components/password-visibility'
+import TextareaAutogrow from 'stimulus-textarea-autogrow'
 import TurboPower from 'turbo_power'
 
 TurboPower.initialize(window.Turbo.StreamActions)
 
 const application = Application.start()
-application.register('textarea-autogrow', TextareaAutogrow)
-application.register('password-visibility', PasswordVisibility)
 
 // Configure Stimulus development experience
 application.debug = window?.localStorage.getItem('avo.debug')
@@ -17,5 +16,8 @@ window.Stimulus = application
 // Register stimulus-components controller
 application.register('alert', Alert)
 application.register('popover', Popover)
+application.register('clipboard', Clipboard)
+application.register('password-visibility', PasswordVisibility)
+application.register('textarea-autogrow', TextareaAutogrow)
 
 export { application }

lib/avo/fields/base_field.rb

@@ -48,6 +48,7 @@ class BaseField
       attr_reader :computable # if allowed to be computable
       attr_reader :computed # if block is present
       attr_reader :computed_value # the value after computation
+      attr_reader :copyable # if allowed to be copyable
 
       # Hydrated payload
       attr_accessor :record
@@ -87,6 +88,7 @@ def initialize(id, **args, &block)
         @components = args[:components] || {}
         @for_attribute = args[:for_attribute]
         @meta = args[:meta]
+        @copyable = args[:copyable] || false
 
         @args = args
 

lib/generators/avo/templates/locales/avo.ar.yml

@@ -30,6 +30,7 @@ ar:
     click_to_reveal_filters: انقر لإظهار المرشحات
     close_modal: أغلق النافذة
     confirm: تأكيد
+    copy: نسخ
     create_new_item: إنشاء %{item} جديد
     dashboard: لوحة القيادة
     dashboards: لوحات القيادة

lib/generators/avo/templates/locales/avo.de.yml

@@ -24,6 +24,7 @@ de:
     click_to_reveal_filters: Klicken, um Filter anzuzeigen
     close_modal: Modal schließen
     confirm: Bestätigen
+    copy: Kopieren
     create_new_item: Neues %{item} erstellen
     dashboard: Dashboard
     dashboards: Dashboards

lib/generators/avo/templates/locales/avo.en.yml

@@ -24,6 +24,7 @@ en:
     click_to_reveal_filters: Click to reveal filters
     close_modal: Close modal
     confirm: Confirm
+    copy: Copy
     create_new_item: Create new %{item}
     dashboard: Dashboard
     dashboards: Dashboards

lib/generators/avo/templates/locales/avo.es.yml

@@ -26,6 +26,7 @@ es:
     click_to_reveal_filters: Pulsa para mostrar los filtros
     close_modal: Cerrar modal
     confirm: Confirmar
+    copy: Copiar
     create_new_item: Crear nuevo/a %{item}
     dashboard: Panel
     dashboards: Paneles

lib/generators/avo/templates/locales/avo.fr.yml

@@ -26,6 +26,7 @@ fr:
     click_to_reveal_filters: Cliquez pour révéler les filtres
     close_modal: Fermer la fenêtre modale
     confirm: Confirmer
+    copy: Copier
     create_new_item: Créer un nouveau %{item}
     dashboard: Tableau de bord
     dashboards: Tableaux de bord

lib/generators/avo/templates/locales/avo.it.yml

@@ -24,6 +24,7 @@ it:
     click_to_reveal_filters: Clicca per mostrare i filtri
     close_modal: Chiudi modale
     confirm: Conferma
+    copy: Copia
     create_new_item: Crea nuovo %{item}
     dashboard: Cruscotto
     dashboards: Cruscotti

lib/generators/avo/templates/locales/avo.ja.yml

@@ -26,6 +26,7 @@ ja:
     click_to_reveal_filters: フィルターを表示するにはクリック
     close_modal: モーダルを閉じる
     confirm: 確認
+    copy: コピー
     create_new_item: 新しい%{item}を作成
     dashboard: ダッシュボード
     dashboards: ダッシュボード

lib/generators/avo/templates/locales/avo.nb.yml

@@ -26,6 +26,7 @@ nb:
     click_to_reveal_filters: Vis filter
     close_modal: Lukk modal
     confirm: Bekreft
+    copy: Kopier
     create_new_item: Lag ny %{item}
     dashboard: Dashboard
     dashboards: Dashboards

lib/generators/avo/templates/locales/avo.nl.yml

@@ -24,6 +24,7 @@ nl:
     click_to_reveal_filters: Klik om filters te tonen
     close_modal: Modaal sluiten
     confirm: Bevestigen
+    copy: Kopie
     create_new_item: Nieuw %{item} aanmaken
     dashboard: Dashboard
     dashboards: Dashboards

lib/generators/avo/templates/locales/avo.nn.yml

@@ -26,6 +26,7 @@ nn:
     click_to_reveal_filters: Vis filter
     close_modal: Lukk modal
     confirm: Stadfest
+    copy: Kopier
     create_new_item: Lag ny %{item}
     dashboard: Dashboard
     dashboards: Dashboards

lib/generators/avo/templates/locales/avo.pl.yml

@@ -24,6 +24,7 @@ pl:
     click_to_reveal_filters: Kliknij, aby pokazać filtry
     close_modal: Zamknij okno modalne
     confirm: Potwierdź
+    copy: Kopiuj
     create_new_item: Utwórz nowy %{item}
     dashboard: Pulpit nawigacyjny
     dashboards: Pulpity nawigacyjne

lib/generators/avo/templates/locales/avo.pt-BR.yml

@@ -26,6 +26,7 @@ pt-BR:
     click_to_reveal_filters: Clique para revelar os filtros
     close_modal: Fechar modal
     confirm: Confirmar
+    copy: Copiar
     create_new_item: Criar novo %{item}
     dashboard: Painel
     dashboards: Painéis

lib/generators/avo/templates/locales/avo.pt.yml

@@ -26,6 +26,7 @@ pt:
     click_to_reveal_filters: Clique para mostrar os filtros
     close_modal: Fechar modal
     confirm: Confirmar
+    copy: Copiar
     create_new_item: Criar novo %{item}
     dashboard: Painel
     dashboards: Painéis

lib/generators/avo/templates/locales/avo.ro.yml

@@ -27,6 +27,7 @@ ro:
     click_to_reveal_filters: Faceți clic pentru a afișa filtrele
     close_modal: Închide modalul
     confirm: Confirm
+    copy: Copiază
     create_new_item: Creează %{item}
     dashboard: Panou de control
     dashboards: Panouri de control

lib/generators/avo/templates/locales/avo.ru.yml

@@ -24,6 +24,7 @@ ru:
     click_to_reveal_filters: Нажмите, чтобы открыть фильтры
     close_modal: Закрыть модальное окно
     confirm: Подтвердить
+    copy: Копировать
     create_new_item: Создать новый %{item}
     dashboard: Панель управления
     dashboards: Панели управления

lib/generators/avo/templates/locales/avo.tr.yml

@@ -26,6 +26,7 @@ tr:
     click_to_reveal_filters: Filtreleri ortaya çıkarmak için tıklayın
     close_modal: Modali kapat
     confirm: Onayla
+    copy: Kopya
     create_new_item: Yeni bir %{item} oluşturun
     dashboard: Yönetim Paneli
     dashboards: Yönetim Panelleri

lib/generators/avo/templates/locales/avo.uk.yml

@@ -24,6 +24,7 @@ uk:
     click_to_reveal_filters: Натисніть, щоб показати фільтри
     close_modal: Закрити вікно
     confirm: Підтвердити
+    copy: Копіювати
     create_new_item: Створити новий %{item}
     dashboard: Панель керування
     dashboards: Панелі керування

lib/generators/avo/templates/locales/avo.zh.yml

@@ -24,6 +24,7 @@ zh:
     click_to_reveal_filters: 点击以显示筛选器
     close_modal: 关闭模态框
     confirm: 确认
+    copy: 复制
     create_new_item: 创建新的 %{item}
     dashboard: 仪表盘
     dashboards: 仪表盘

package.json

@@ -25,6 +25,7 @@
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo-rails": "^8.0.12",
     "@rails/activestorage": "^6.1.710",
+    "@stimulus-components/clipboard": "^5.0.0",
     "@stimulus-components/password-visibility": "^3.0.0",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",

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

@@ -74,7 +74,7 @@ def base_fields
   # This is because we want to be able to edit them using the tool.
   # When submitting the form, we need this fields declared on the resource in order to know how to process them and fill the record.
   def tool_fields
-    field :name, as: :text, hide_on: [:index, :forms]
+    field :name, as: :text, hide_on: [:index, :forms], copyable: true
     with_options hide_on: :forms do
       field :name, as: :text, filterable: true, name: "name (click to edit)", only_on: :index do
         path, data = Avo::Actions::City::Update.link_arguments(

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

@@ -12,7 +12,7 @@ class Avo::Resources::Comment < Avo::BaseResource
 
   def fields
     field :id, as: :id
-    field :body, as: :textarea
+    field :body, as: :textarea, copyable: true
     field :tiny_name, as: :text, only_on: :index
     field :posted_at,
       as: :date_time,