Fix: Always display persisted image in the edit view (#3015)

* Check if file is persisted before rendering it in view

* Remove dash

* Always display persisted image in the edit view

* Write tests

* Refactor: mutate value in file_field instead of base_field

* Always display persisted attachment in edit view

* Change file name

* Remove conditional

---------

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

app/components/avo/fields/common/files/view_type/grid_item_component.html.erb

@@ -1,27 +1,23 @@
 <div id="<%= dom_id file %>" class="relative min-h-full max-w-full flex-1 flex flex-col justify-between space-y-2">
-  <% if file.present? %>
-    <div class="flex flex-col h-full">
-      <% if file.representable? && is_image? %>
-        <%= image_tag helpers.main_app.url_for(file), class: "rounded-lg max-w-full self-start #{@extra_classes}", loading: :lazy, width: file.metadata["width"], height: file.metadata["height"] %>
-      <% elsif is_audio? %>
-        <%= audio_tag(helpers.main_app.url_for(file), controls: true, preload: false, class: 'w-full') %>
-      <% elsif is_video? %>
-        <%= video_tag(helpers.main_app.url_for(file), controls: true, preload: false, class: 'w-full') %>
-      <% else %>
-        <div class="relative flex flex-col justify-evenly items-center px-2 rounded-lg border bg-white border-gray-500 min-h-24">
-          <div class="flex flex-col justify-center items-center w-full">
-            <%= helpers.svg "heroicons/outline/document-text", class: 'h-10 text-gray-600 mb-2' %>
-          </div>
+  <div class="flex flex-col h-full">
+    <% if file.representable? && is_image? %>
+      <%= image_tag helpers.main_app.url_for(file), class: "rounded-lg max-w-full self-start #{@extra_classes}", loading: :lazy, width: file.metadata["width"], height: file.metadata["height"] %>
+    <% elsif is_audio? %>
+      <%= audio_tag(helpers.main_app.url_for(file), controls: true, preload: false, class: 'w-full') %>
+    <% elsif is_video? %>
+      <%= video_tag(helpers.main_app.url_for(file), controls: true, preload: false, class: 'w-full') %>
+    <% else %>
+      <div class="relative flex flex-col justify-evenly items-center px-2 rounded-lg border bg-white border-gray-500 min-h-24">
+        <div class="flex flex-col justify-center items-center w-full">
+          <%= helpers.svg "heroicons/outline/document-text", class: 'h-10 text-gray-600 mb-2' %>
         </div>
-      <% end %>
-      <% if field.display_filename %>
-        <span class="text-gray-500 mt-1 text-sm truncate" title="<%= file.filename %>"><%= file.filename %></span>
-      <% end %>
-    </div>
-    <div class="flex space-x-2">
-      <%= render Avo::Fields::Common::Files::ControlsComponent.new(field: field, file: file, resource: resource) %>
-    </div>
-  <% else %>
-    –
-  <% end %>
+      </div>
+    <% end %>
+    <% if field.display_filename %>
+      <span class="text-gray-500 mt-1 text-sm truncate" title="<%= file.filename %>"><%= file.filename %></span>
+    <% end %>
+  </div>
+  <div class="flex space-x-2">
+    <%= render Avo::Fields::Common::Files::ControlsComponent.new(field: field, file: file, resource: resource) %>
+  </div>
 </div>

lib/avo/fields/file_field.rb

@@ -24,6 +24,16 @@ def initialize(id, **args, &block)
       def path
         rails_blob_url value
       end
+
+      def value
+        final_value = super
+        # On edit view always show the persisted image. Related: issue#3008
+        if final_value.instance_of?(ActiveStorage::Attached::One) && view == "edit"
+          persisted_record = record.class.find_by(id: record.id)
+          final_value = persisted_record.send(@for_attribute || id)
+        end
+        final_value
+      end
     end
   end
 end

spec/system/avo/display_persisted_attachment_spec.rb

@@ -0,0 +1,49 @@
+require "rails_helper"
+
+RSpec.describe "DisplayPersistedAttachment", type: :system do
+  describe "display persisted image on edit view" do
+    let(:post) do
+      create(:post) do |p|
+        p.cover_photo.attach(
+          io: File.open(Rails.root.join("db", "seed_files", "iphone.jpg")),
+          filename: "iphone.jpg",
+          content_type: "image/jpeg"
+        )
+      end
+    end
+
+    it "displays persisted image on edit view" do
+      visit "/admin/resources/posts/#{post.to_param}/edit"
+      fill_in "Name", with: ""
+      attach_file Rails.root.join("db", "seed_files", "dummy-image.jpg"), id: "post_cover_photo"
+
+      click_button "Save"
+      wait_for_loaded
+
+      expect(page).to have_selector 'div[data-field-id="cover_photo"] img'
+    end
+  end
+
+  describe "display persisted audio on edit view" do
+    let(:post) do
+      create(:post) do |p|
+        p.audio.attach(
+          io: File.open(Rails.root.join("db", "seed_files", "dummy-music.mp3")),
+          filename: "dummy-music.mp3",
+          content_type: "audio/mp3"
+        )
+      end
+    end
+
+    it "displays persisted audio on edit view" do
+      visit "/admin/resources/posts/#{post.to_param}/edit"
+      fill_in "Name", with: ""
+      attach_file Rails.root.join("db", "seed_files", "dummy-music-two.mp3"), id: "post_audio"
+
+      click_button "Save"
+      wait_for_loaded
+
+      expect(page).to have_selector "audio"
+    end
+  end
+end