lookbook-hq / lookbook

A UI development environment for Ruby on Rails apps ✨
https://lookbook.build
MIT License
912 stars 94 forks source link

Active storage attachments cant render #628

Open reeganviljoen opened 5 months ago

reeganviljoen commented 5 months ago

Describe the bug

Using active storage attachments inside a component rendered inside lookbook fails due to lookbook being its own isolated engine so a component(or partial) with url_for(user.avatar) will not be able to render the attachment used in lookbook but not normally

To Reproduce

Steps to reproduce the behavior:

  1. Create a component with an attachemnt, i.e:

    
    class AvatarComponent < ViewComponent::Base
    
    def initilize(user)
    @user = user
    end
    
    def avatar
    url_for(@user.avatar)
    end
    end

= image_tag avatar, class: 'c-avatar'

2. Create a preview, i.e:

class Components::AvatarComponentPreview < ApplicationPreview

def default(user: User.last) render(AvatarComponent.new(user: user)) end end


3. See error
 ![image](https://github.com/lookbook-hq/lookbook/assets/62689748/1249426a-ff0a-4d69-bc21-bcaabdafab85)
then when i open the image up(i.e `http://localhost:3000/lookbook/rails/active_storage/blobs/redirect/<secure_id>/my_image.jpeg`)
![image](https://github.com/lookbook-hq/lookbook/assets/62689748/632f7904-4dc3-4cf9-aea6-254767cbd761)

### Expected behavior

Lookbook should be able to render the attachment in the component like the default rails engine is able too

### Version numbers 

Please complete the following information:

* Lookbook: 2.2.0
* ViewComponent: 2.83.0
* Rails: 7.1.3.2
* Ruby: 3.3.0
allmarkedup commented 1 month ago

@reeganviljoen Thanks for the detailed bug report and many apologies for taking so long to get back to you on this.

I've just tried to reproduce the issue in one of my apps that is using ActiveStorage and I've so far not been able to replicate the issue - but I suspect that is because of a different controller/preview class setup somehow.

I've got a few questions that would help me figure out what is going on here, if you are still interested in this issue despite me taking so long to reply!

1) Are you using a custom preview controller class? If so could you share what this looks like? 2) The ApplicationPreview class that your preview class inherits from - is that just example pseudo-code or are you using a custom Preview class? What does that inherit from if so?

One thing you could also try (although I'm not sure it would make any difference in this situation) is to try calling the host application's url_for method within your component like so:

helpers.main_app.url_for(@user.avatar)

I realise that is not ideal but it would be interesting to know if that results in the correct URL being rendered or not.

Thank you!