avo 2.9.1.pre5 → 2.10.0

data/app/components/avo/views/resource_edit_component.html.erb

@@ -1,77 +1,55 @@
 <%= content_tag :div,
-  class: "space-y-12",
   data: {
     'model-id': @resource.model.id,
     selected_resources_name: @resource.model_key,
     selected_resources: [@resource.model.id],
     **@resource.stimulus_data_attributes
   } do %>
-  <% @resource.panels.each_with_index do |resource_panel, index| %>
-    <%= form_with model: @resource.model,
-        scope: @resource.form_scope,
-        url: form_url,
-        local: true,
-        multipart: true do |form| %>
-      <%= render Avo::ReferrerParamsComponent.new back_path: back_path %>
-      <%= render Avo::PanelComponent.new(title: resource_panel[:name], description: @resource.resource_description, display_breadcrumbs: true, index: index) do |c| %>
-        <% c.tools do %>
-          <%= a_link back_path,
-            style: :text,
-            icon: 'arrow-left' do %>
-            <%= t('avo.cancel').capitalize %>
-          <% end %>
-          <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource, view: @view %>
-          <% if can_see_the_save_button? %>
-            <%= a_button color: :primary,
+  <%= form_with model: @resource.model,
+    scope: @resource.form_scope,
+    url: form_url,
+    method: form_method,
+    local: true,
+    html: {
+      novalidate: true
+    },
+    multipart: true do |form| %>
+    <%= render Avo::ReferrerParamsComponent.new back_path: back_path %>
+    <%= render Avo::PanelComponent.new(title: title, description: @resource.resource_description, display_breadcrumbs: @reflection.blank?, index: 0, data: { panel_id: "main" }) do |c| %>
+      <% c.tools do %>
+        <%= a_link back_path,
+        style: :text,
+        icon: 'arrow-left' do %>
+          <%= t('avo.cancel').capitalize %>
+        <% end %>
+        <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource, view: @view %>
+        <% if can_see_the_save_button? %>
+          <%= a_button color: :primary,
               style: :primary,
               loading: true,
               type: :submit,
               icon: 'save' do %>
-              <%= t('avo.save').capitalize %>
-            <% end %>
+            <%= t('avo.save').capitalize %>
           <% end %>
         <% end %>
-        <% if Avo.configuration.buttons_on_form_footers %>
-          <% c.footer_tools do %>
-            <%= a_link back_path, icon: 'arrow-left' do %>
-              <%= t('avo.cancel').capitalize %>
-            <% end %>
-            <% if can_see_the_save_button? %>
-              <%= a_button color: :green, loading: true, type: :submit, icon: 'save' do %>
-                <%= t('avo.save').capitalize %>
-              <% end %>
-            <% end %>
+      <% end %>
+      <% if Avo.configuration.buttons_on_form_footers %>
+        <% c.footer_tools do %>
+          <%= a_link back_path, icon: 'arrow-left' do %>
+            <%= t('avo.cancel').capitalize %>
           <% end %>
-        <% end %>
-        <% c.body do %>
-          <div class="divide-y">
-            <% @resource.get_fields.each_with_index do |field, index| %>
-              <%= render field.component_for_view(:edit).new(field: field, resource: @resource, index: index, form: form) unless field.computed %>
+          <% if can_see_the_save_button? %>
+            <%= a_button color: :green, loading: true, type: :submit, icon: 'save' do %>
+              <%= t('avo.save').capitalize %>
             <% end %>
-          </div>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>
-  <% end %>
-  <% if @reflection.blank? %>
-    <% if has_one_panels.present? %>
-      <% has_one_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-    <% if has_many_panels.present? %>
-      <% has_many_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-    <% if has_as_belongs_to_many_panels.present? %>
-      <% has_as_belongs_to_many_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-    <% if resource_tools.present? %>
-      <% resource_tools.each do |tool, index| %>
-        <%= render tool.partial, tool: tool %>
+    <%= content_tag :div, class: 'space-y-12' do %>
+      <% @resource.get_items.each_with_index do |item, index| %>
+        <% next if item.nil? %>
+        <%= render Avo::ItemSwitcherComponent.new resource: @resource, item: item, index: index + 1, view: @view, form: form %>
       <% end %>
     <% end %>
   <% end %>

data/app/components/avo/views/resource_edit_component.rb

@@ -15,6 +15,10 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
     split_panel_fields
   end
 
+  def title
+    @resource.default_panel_name
+  end
+
   def back_path
     if via_resource?
       helpers.resource_path(model: params[:via_resource_class].safe_constantize, resource: relation_resource, resource_id: params[:via_resource_id])
@@ -45,6 +49,12 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
     view == :edit
   end
 
+  def form_method
+    return :put if is_edit?
+
+    :post
+  end
+
   def form_url
     if is_edit?
       helpers.resource_path(

data/app/components/avo/views/resource_index_component.html.erb

@@ -37,7 +37,7 @@
             <%= render partial: 'avo/partials/resource_search', locals: {resource: @resource.model_name.collection} %>
           </div>
         <% else %>
-          <%# Offset for the space-y-2 property when the serach is missing %>
+          <%# Offset for the space-y-2 property when the search is missing %>
           <div class="-mb-2"></div>
         <% end %>
         <% if @filters.present? || available_view_types.count > 1 %>

data/app/components/avo/views/resource_index_component.rb

@@ -113,11 +113,11 @@ class Avo::Views::ResourceIndexComponent < Avo::ResourceComponent
       end
     end
 
-    helpers.new_resource_path(model: @resource.model_class, resource: @resource, **args)
+    helpers.new_resource_path(resource: @resource, **args)
   end
 
   def attach_path
-    "#{Avo::App.root_path}#{request.env["PATH_INFO"]}/new"
+    Avo::App.root_path(paths: [request.env["PATH_INFO"], "new"])
   end
 
   def singular_resource_name
@@ -145,7 +145,7 @@ class Avo::Views::ResourceIndexComponent < Avo::ResourceComponent
     @reflection.active_record.to_s
   end
 
-  def name 
+  def name
     field.custom_name? ? field.name : field.plural_name
   end
 

data/app/components/avo/views/resource_show_component.html.erb

@@ -1,105 +1,74 @@
 <%= content_tag :div,
-  class: "space-y-12",
   data: {
     'model-id': @resource.model.id,
     selected_resources_name: @resource.model_key,
     selected_resources: [@resource.model.id],
     **@resource.stimulus_data_attributes
   } do %>
-  <% @resource.panels.each_with_index do |resource_panel, index| %>
-    <%= render Avo::PanelComponent.new(title: title, description: @resource.resource_description, display_breadcrumbs: @reflection.blank?, index: index) do |c| %>
-      <% c.tools do %>
-        <% if resource_panel[:name] == @resource.default_panel_name %>
-          <% if @reflection.present? && @resource.model.present? %>
-            <% if can_detach? %>
-              <%= a_button url: detach_path,
-                icon: 'detach',
-                method: :delete,
-                form_class: 'flex flex-col sm:flex-row sm:inline-flex',
-                style: :text,
-                data: {
-                  confirm: "Are you sure you want to detach this #{title}."
-                } do %>
-                <%= t('avo.detach_item', item: title).capitalize %>
-              <% end %>
-              <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource, view: @view %>
-            <% end %>
-            <% if can_see_the_edit_button? %>
-              <%= a_link edit_path,
-                color: :primary,
-                style: :primary,
-                icon: 'edit' do %>
-                <%= t('avo.edit').capitalize %>
-              <% end %>
-            <% end %>
-          <% else %>
-            <%= a_link back_path,
-              style: :text,
-              icon: 'arrow-left' do %>
-              <%= t('avo.go_back') %>
-            <% end %>
-            <% if can_see_the_destroy_button? %>
-              <%= a_button url: helpers.resource_path(model: @resource.model, resource: @resource),
-                method: :delete,
-                local: true,
-                style: :text,
-                title: t('avo.delete_item', item: @resource.model.model_name.name.downcase).capitalize,
-                loading: true,
-                confirm: t('avo.are_you_sure', item: @resource.model.model_name.name.downcase),
-                color: :red,
-                icon: 'trash',
-                form_class: 'flex flex-col sm:flex-row sm:inline-flex',
-                data: {
-                  control: :destroy,
-                  'resource-id': @resource.model.id,
-                  'tippy': 'tooltip',
-                } do %>
-                <%= t('avo.delete').capitalize %>
-              <% end %>
-            <% end %>
-            <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource, view: @view %>
-            <% if @resource.authorization.authorize_action(:edit, raise_exception: false) %>
-              <%= a_link edit_path,
-                color: :primary,
-                style: :primary,
-                icon: 'edit' do %>
-                <%= t('avo.edit').capitalize %>
-              <% end %>
-            <% end %>
+  <%= render Avo::PanelComponent.new(title: title, description: @resource.resource_description, display_breadcrumbs: @reflection.blank?, index: 0, data: { panel_id: "main" }) do |c| %>
+    <% c.tools do %>
+      <% if @reflection.present? && @resource.model.present? %>
+        <% if can_detach? %>
+          <%= a_button url: detach_path,
+            icon: 'detach',
+            method: :delete,
+            form_class: 'flex flex-col sm:flex-row sm:inline-flex',
+            style: :text,
+            data: {
+              confirm: "Are you sure you want to detach this #{title}."
+            } do %>
+            <%= t('avo.detach_item', item: title).capitalize %>
           <% end %>
+          <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource, view: @view %>
         <% end %>
-      <% end %>
-      <% c.body do %>
-        <% if fields_by_panel[resource_panel[:name]].present? %>
-          <div class="divide-y">
-            <% fields_by_panel[resource_panel[:name]].each_with_index do |field, index| %>
-              <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-            <% end %>
-          </div>
+        <% if can_see_the_edit_button? %>
+          <%= a_link edit_path,
+            color: :primary,
+            style: :primary,
+            icon: 'edit' do %>
+            <%= t('avo.edit').capitalize %>
+          <% end %>
+        <% end %>
+      <% else %>
+        <%= a_link back_path,
+          style: :text,
+          icon: 'arrow-left' do %>
+          <%= t('avo.go_back') %>
+        <% end %>
+        <% if can_see_the_destroy_button? %>
+          <%= a_button url: helpers.resource_path(model: @resource.model, resource: @resource),
+            method: :delete,
+            local: true,
+            style: :text,
+            loading: true,
+            confirm: t('avo.are_you_sure', item: @resource.model.model_name.name.downcase),
+            color: :red,
+            icon: 'trash',
+            form_class: 'flex flex-col sm:flex-row sm:inline-flex',
+            data: {
+              control: :destroy,
+              'resource-id': @resource.model.id,
+              'tippy': 'tooltip',
+            } do %>
+            <%= t('avo.delete').capitalize %>
+          <% end %>
+        <% end %>
+        <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource, view: @view %>
+        <% if @resource.authorization.authorize_action(:edit, raise_exception: false) %>
+          <%= a_link edit_path,
+            color: :primary,
+            style: :primary,
+            icon: 'edit' do %>
+            <%= t('avo.edit').capitalize %>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>
   <% end %>
-  <% if @reflection.blank? %>
-    <% if has_one_panels.present? %>
-      <% has_one_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-    <% if has_many_panels.present? %>
-      <% has_many_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-    <% if has_as_belongs_to_many_panels.present? %>
-      <% has_as_belongs_to_many_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-    <% if resource_tools.present? %>
-      <% resource_tools.each do |tool, index| %>
-        <%= render tool.partial, tool: tool %>
-      <% end %>
+  <%= content_tag :div, class: 'space-y-12' do %>
+    <% @resource.get_items.each_with_index do |item, index| %>
+      <% next if item.nil? %>
+      <%= render Avo::ItemSwitcherComponent.new resource: @resource, reflection: @reflection, item: item, index: index + 1, view: @view %>
     <% end %>
   <% end %>
   <% if should_display_invalid_fields_errors? %>

data/app/components/avo/views/resource_show_component.rb

@@ -19,7 +19,7 @@ class Avo::Views::ResourceShowComponent < Avo::ResourceComponent
       return field.name if has_one_field?
       reflection_resource.name
     else
-      @resource.panels.first[:name]
+      @resource.default_panel_name
     end
   end
 
@@ -52,6 +52,6 @@ class Avo::Views::ResourceShowComponent < Avo::ResourceComponent
   end
 
   def has_one_field?
-    field.present? and field.class == Avo::Fields::HasOneField
+    field.present? and field.instance_of? Avo::Fields::HasOneField
   end
 end

data/app/controllers/avo/actions_controller.rb

@@ -42,7 +42,7 @@ module Avo
         model = @resource.class.find_scope.find params[:id]
       end
 
-      @action = action_class.new(model: model, resource: resource, user: _current_user)
+      @action = action_class.new(model: model, resource: resource, user: _current_user, view: :edit)
     end
 
     def respond(response)

data/app/controllers/avo/application_controller.rb

@@ -13,7 +13,8 @@ module Avo
     protect_from_forgery with: :exception
     before_action :init_app
     before_action :check_avo_license
-    before_action :set_locale
+    before_action :set_default_locale
+    around_action :set_force_locale, if: -> { params[:force_locale].present? }
     before_action :set_authorization
     before_action :_authenticate!
     before_action :set_container_classes
@@ -27,7 +28,7 @@ module Avo
     add_flash_types :info, :warning, :success, :error
 
     def init_app
-      Avo::App.init request: request, context: context, root_path: avo.root_path.delete_suffix("/"), current_user: _current_user, view_context: view_context, params: params
+      Avo::App.init request: request, context: context, current_user: _current_user, view_context: view_context, params: params
 
       @license = Avo::App.license
     end
@@ -287,10 +288,26 @@ module Avo
       @resource.form_scope
     end
 
-    def set_locale
+    def set_default_locale
       I18n.locale = params[:set_locale] || I18n.default_locale
 
       I18n.default_locale = I18n.locale
     end
+
+    # Temporary set the locale and reverting at the end of the request.
+    def set_force_locale
+      initial_locale = I18n.locale.to_s.dup
+      I18n.locale = params[:force_locale]
+      yield
+      I18n.locale = initial_locale
+    end
+
+    def default_url_options
+      if params[:force_locale].present?
+        { **super, force_locale: params[:force_locale] }
+      else
+        super
+      end
+    end
   end
 end

data/app/helpers/avo/application_helper.rb

@@ -20,12 +20,6 @@ module Avo
       render Avo::EmptyStateComponent.new **args
     end
 
-    def turbo_frame_wrap(name, &block)
-      render Avo::TurboFrameWrapperComponent.new name do
-        capture(&block)
-      end
-    end
-
     def a_button(**args, &block)
       render Avo::ButtonComponent.new(is_link: false, **args) do
         capture(&block) if block_given?

data/app/helpers/avo/url_helpers.rb

@@ -35,7 +35,7 @@ module Avo
       avo.send :"resources_#{resource.singular_route_key}_path", id, **args
     end
 
-    def new_resource_path(model:, resource:, **args)
+    def new_resource_path(resource:, **args)
       avo.send :"new_resources_#{resource.singular_route_key}_path", **args
     end
 

data/app/javascript/avo.js

@@ -74,7 +74,11 @@ document.addEventListener('turbo:frame-load', () => {
 document.addEventListener('turbo:before-fetch-response', async (e) => {
   if (e.detail.fetchResponse.response.status === 500) {
     const { id, src } = e.target
-    e.target.src = `${window.Avo.configuration.root_path}/failed_to_load?turbo_frame=${id}&src=${src}`
+    // Don't try to redirect to failed to load if this is alread a redirection to failed to load and crashed somewhere.
+    // You'll end up with a request loop.
+    if (!e.detail.fetchResponse?.response?.url?.includes('/failed_to_load')) {
+      e.target.src = `${window.Avo.configuration.root_path}/failed_to_load?turbo_frame=${id}&src=${src}`
+    }
   }
 })
 

data/app/javascript/js/controllers/loading_button_controller.js

@@ -7,33 +7,37 @@ export default class extends Controller {
   <div class="double-bounce2"></div>
 </div>`;
 
-  confirmed = false
-
-  connect() {
-    this.context.scope.element.addEventListener('click', (e) => {
-      // If the user has to confirm the action
-      if (this.confirmationMessage) {
-        // Intervene only if not confirmed
-        if (!this.confirmed) {
-          e.preventDefault()
-          if (window.confirm(this.confirmationMessage)) {
-            this.applyLoader()
-          }
-        }
-      } else {
+  static values = {
+    confirmationMessage: String,
+    confirmed: Boolean,
+  }
+
+  attemptSubmit(e) {
+    // If the user has to confirm the action
+    if (this.confirmationMessageValue) {
+      this.confirmAndApply(e)
+    } else {
+      this.applyLoader()
+    }
+
+    return null
+  }
+
+  confirmAndApply(e) {
+    // Intervene only if not confirmed
+    if (!this.confirmedValue) {
+      e.preventDefault()
+
+      if (window.confirm(this.confirmationMessageValue)) {
         this.applyLoader()
       }
-    })
+    }
   }
 
   get button() {
     return this.context.scope.element
   }
 
-  get confirmationMessage() {
-    return this.context.scope.element.getAttribute('data-avo-confirm')
-  }
-
   applyLoader() {
     const { button } = this
 
@@ -50,10 +54,10 @@ export default class extends Controller {
   }
 
   markConfirmed() {
-    this.confirmed = true
+    this.confirmedValue = true
   }
 
   markUnconfirmed() {
-    this.confirmed = false
+    this.confirmedValue = false
   }
 }

data/app/javascript/js/controllers/tabs_controller.js

@@ -0,0 +1,86 @@
+import { AttributeObserver } from '@stimulus/mutation-observers'
+import { Controller } from '@hotwired/stimulus'
+import { castBoolean } from '../helpers/cast_boolean'
+
+export default class extends Controller {
+  static targets = ['tab'];
+
+  static values = {
+    view: String,
+    activeTab: String,
+  };
+
+  get currentTab() {
+    return this.tabTargets.find(
+      (element) => element.dataset.tabId === this.activeTabValue,
+    )
+  }
+
+  targetTab(id) {
+    return this.tabTargets.find((element) => element.dataset.tabId === id)
+  }
+
+  changeTab(e) {
+    e.preventDefault()
+
+    const { params } = e
+    const { id } = params
+
+    this.setTheTargetPanelHeight(id)
+
+    this.hideTabs()
+    this.showTab(id)
+    this.markTabLoaded(id)
+
+    this.activeTabValue = id
+  }
+
+  /**
+   * Sets the target container height to the previous panel height so we don't get jerky tab changes.
+   */
+  setTheTargetPanelHeight(id) {
+    // Ignore this on edit.
+    // All tabs are loaded beforehand, they have their own height, and the page won't jiggle when the user toggles between them.
+    if (this.viewValue === 'edit' || this.viewValue === 'new') {
+      return
+    }
+
+    // We don't need to add a height to this panel because it was loaded before
+    if (castBoolean(this.targetTab(id).dataset.loaded)) {
+      return
+    }
+
+    // Get the height of the active panel
+    const { height } = this.currentTab.getBoundingClientRect()
+    // Set it to the target panel
+    this.targetTab(id).style.height = `${height}px`
+
+    // Wait until the panel loaded it's content and then remove the forced height
+    const observer = new AttributeObserver(this.targetTab(id), 'busy', {
+      elementUnmatchedAttribute: () => {
+        // The content is not available in an instant so delay the height reset a bit.
+        setTimeout(() => {
+          this.targetTab(id).style.height = ''
+        }, 300)
+        if (observer) observer.stop()
+      },
+    })
+    observer.start()
+  }
+
+  markTabLoaded(id) {
+    this.targetTab(id).dataset.loaded = true
+  }
+
+  showTab(id) {
+    this.tabTargets.forEach((element) => {
+      if (element.dataset.tabId === id) {
+        element.classList.remove('hidden')
+      }
+    })
+  }
+
+  hideTabs() {
+    this.tabTargets.map((element) => element.classList.add('hidden'))
+  }
+}

data/app/javascript/js/controllers.js

@@ -27,6 +27,7 @@ import SearchController from './controllers/search_controller'
 import SelectController from './controllers/select_controller'
 import SelectFilterController from './controllers/select_filter_controller'
 import SimpleMdeController from './controllers/fields/simple_mde_controller'
+import TabsController from './controllers/tabs_controller'
 import TagsFieldController from './controllers/fields/tags_field_controller'
 import TextFilterController from './controllers/text_filter_controller'
 import TippyController from './controllers/tippy_controller'
@@ -55,6 +56,7 @@ application.register('resource-show', ResourceShowController)
 application.register('search', SearchController)
 application.register('select', SelectController)
 application.register('select-filter', SelectFilterController)
+application.register('tabs', TabsController)
 application.register('tags-field', TagsFieldController)
 application.register('text-filter', TextFilterController)
 application.register('tippy', TippyController)

data/app/views/avo/base/index.html.erb

@@ -1,4 +1,4 @@
-<%= turbo_frame_wrap(params[:turbo_frame]) do %>
+<%= render Avo::TurboFrameWrapperComponent.new(params[:turbo_frame]) do %>
   <%= render Avo::Views::ResourceIndexComponent.new(
       resource: @resource,
       resources: @resources,

data/app/views/avo/base/show.html.erb

@@ -1,3 +1,3 @@
-<%= turbo_frame_wrap(params[:turbo_frame]) do %>
+<%= render Avo::TurboFrameWrapperComponent.new(params[:turbo_frame]) do %>
   <%= render Avo::Views::ResourceShowComponent.new(resource: @resource, reflection: @reflection, actions: @actions) %>
 <% end %>

data/app/views/avo/cards/show.html.erb

@@ -1,3 +1,3 @@
-<%= turbo_frame_wrap(params[:turbo_frame]) do %>
+<%= render Avo::TurboFrameWrapperComponent.new(params[:turbo_frame]) do %>
   <%= render Avo::CardComponent.new card: @card %>
 <% end %>

data/app/views/avo/debug/index.html.erb

@@ -14,7 +14,7 @@
   hq_payload = Avo::Licensing::HQ.new(request).payload
 %>
 <div class="flex flex-col">
-  <%= render Avo::PanelComponent.new title: 'Debug Avo', description: 'Use this page to debug the Avo license.' do |c| %>
+  <%= render Avo::PanelComponent.new(title: 'Debug Avo', description: 'Use this page to debug the Avo license.') do |c| %>
     <% c.tools do %>
     <% end %>
     <% c.bare_content do %>

data/app/views/avo/home/_actions.html.erb

@@ -11,6 +11,6 @@
       </div>
     </div>
 
-    <a href="https://docs.avohq.io/1.0/actions.html" target="_blank" title="Avo Actions documentation" class="text-bold cursor-pointer block mt-2">Actions in the docs 👉</a>
+    <a href="https://docs.avohq.io/2.0/actions.html" target="_blank" title="Avo Actions documentation" class="text-bold cursor-pointer block mt-2">Actions in the docs 👉</a>
   </div>
 </div>