spree_admin 5.0.0.rc1

data/app/views/spree/admin/digital_assets/_digital_asset.html.erb

@@ -0,0 +1,30 @@
+<tr id="<%= dom_id(digital_asset) %>">
+  <% unless digital_asset.variant.is_master? %>
+    <td><%= digital_asset.variant.options_text %></td>
+  <% end %>
+  <td><%= digital_asset.attachment.filename %></td>
+  <td><%= number_to_human_size(digital_asset.attachment.byte_size) %></td>
+  <td class="actions">
+    <% if can? :edit, digital_asset %>
+      <span data-toggle="modal" data-target="#modal">
+        <%= link_to_edit(
+          digital_asset,
+          no_text: true,
+          url: spree.edit_admin_product_digital_asset_path(digital_asset.product, digital_asset),
+          data: {
+            turbo_frame: "dialog_modal",
+          },
+        ) %>
+      </span>
+    <% end %>
+    <% if can? :destroy, digital_asset %>
+      <%= link_to_delete(
+        digital_asset,
+        {
+          url: spree.admin_product_digital_asset_path(digital_asset.product, digital_asset),
+          no_text: true,
+        },
+      ) %>
+    <% end %>
+  </td>
+</tr>

data/app/views/spree/admin/digital_assets/_form.html.erb

@@ -0,0 +1,18 @@
+<div class="form-group mb-3">
+  <%= f.label :attachment, Spree.t(:filename) %>
+  <%= f.file_field :attachment, required: true, class: "form-control w-100" %>
+</div>
+<%= f.error_message_on :attachment %>
+
+<% if @product.has_variants? %>
+  <div class="form-group">
+    <%= f.label :variant_id, Spree.t(:variant) %>
+    <%= f.select :variant_id,
+             @product.variants.map { |variant| [variant.options_text, variant.id] },
+             {},
+             required: true,
+             class: "custom-select" %>
+  </div>
+<% else %>
+  <%= hidden_field_tag "digital_asset[variant_id]", @product.master.id %>
+<% end %>

data/app/views/spree/admin/digital_assets/_table.html.erb

@@ -0,0 +1,40 @@
+<table class="table">
+  <thead class="text-muted">
+    <tr>
+      <% if @product.has_variants? %>
+        <th><%= Spree.t(:variant) %></th>
+      <% end %>
+      <th><%= Spree.t(:name) %></th>
+      <th><%= Spree.t(:size) %></th>
+      <th class="actions"></th>
+    </tr>
+  </thead>
+  <tbody>
+    <%= render partial: "spree/admin/digital_assets/digital_asset",
+    collection: @product.digitals.includes(:variant, attachment_attachment: [:blob]), cached: spree_base_cache_scope %>
+    <% if @product.digitals.empty? %>
+      <tr>
+        <td colspan="4">
+          <div
+            class="
+              text-muted p-5 d-flex align-items-center w-100 justify-content-center
+            "
+          >
+            <%= Spree.t(:no_resource_found, resource: Spree.t(:digital_assets)) %>
+            <% if can?(:create, Spree::Digital.new(variant: @product.default_variant)) %>
+              <span data-toggle="modal" data-target="#modal">
+                <%= link_to_with_icon "plus",
+                Spree.t(:add_one),
+                spree.new_admin_product_digital_asset_path(@product),
+                class: "btn btn-light ml-3",
+                data: {
+                  turbo_frame: "dialog_modal",
+                } %>
+              </span>
+            <% end %>
+          </div>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/spree/admin/digital_assets/create.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_render_alerts %>
+<%= turbo_close_modal %>

data/app/views/spree/admin/digital_assets/edit.html.erb

@@ -0,0 +1,22 @@
+<%= turbo_frame_tag :dialog_modal do %>
+  <%= form_for :digital_asset, url: spree.admin_product_digital_asset_path(@product, @digital_asset), method: :put do |f| %>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel"><%= @digital_asset.attachment.filename %></h5>
+        <button
+          type="button"
+          class="btn-close"
+          data-dismiss="modal"
+          aria-label="<%= Spree.t(:close) %>"
+        />
+      </div>
+      <div class="modal-body">
+        <%= render "spree/admin/digital_assets/form", f: f %>
+      </div>
+      <div class="modal-footer d-flex justify-content-between">
+        <button type="button" class="btn btn-light" data-dismiss="modal"><%= Spree.t("actions.discard") %></button>
+        <%= turbo_save_button_tag Spree.t("actions.save"), data: { turbo_frame: :_top } %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/spree/admin/digital_assets/index.html.erb

@@ -0,0 +1,27 @@
+<% content_for :page_title do %>
+  <%= page_header_back_button spree.admin_product_path(@product) %>
+  <span class="mr-3"><%= @product.name %></span>
+  <span><%= Spree.t("digital_assets") %></span>
+<% end %>
+
+<% content_for :page_actions do %>
+  <% if can?(:create, Spree::Digital.new(variant: @product.default_variant)) %>
+    <span data-toggle="modal" data-target="#modal">
+      <%= link_to_with_icon "plus",
+      Spree.t(:new_digital_asset),
+      spree.new_admin_product_digital_asset_path(@product),
+      class: "btn btn-primary",
+      data: {
+        turbo_frame: "dialog_modal",
+      } %>
+    </span>
+  <% end %>
+<% end %>
+
+<div class="card p-0">
+  <div class="card-body p-0">
+    <div class="table-responsive" id="<%= dom_id(@product, :digital_assets) %>">
+      <%= render "spree/admin/digital_assets/table" %>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/digital_assets/new.html.erb

@@ -0,0 +1,22 @@
+<%= turbo_frame_tag :dialog_modal do %>
+  <%= form_for :digital_asset, url: spree.admin_product_digital_assets_path(@product) do |f| %>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel"><%= Spree.t(:new_digital_asset) %></h5>
+        <button
+          type="button"
+          class="btn-close"
+          data-dismiss="modal"
+          aria-label="<%= Spree.t(:close) %>"
+        />
+      </div>
+      <div class="modal-body">
+        <%= render "spree/admin/digital_assets/form", f: f %>
+      </div>
+      <div class="modal-footer d-flex justify-content-between">
+        <button type="button" class="btn btn-light" data-dismiss="modal"><%= Spree.t("actions.discard") %></button>
+        <%= turbo_save_button_tag Spree.t("actions.save"), data: { turbo_frame: :_top } %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/spree/admin/digital_assets/update.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_render_alerts %>
+<%= turbo_close_modal %>

data/app/views/spree/admin/exports/_export.html.erb

@@ -0,0 +1,42 @@
+<tr>
+  <td class="w-10"><%= export.number %></td>
+  <td class="text-center w-10">
+    <span class="badge badge-light border">
+      <%= Spree.t(export.type.demodulize) %>
+    </span>
+  </td>
+  <td class="text-center w-10">
+    <% if export.done? %>
+      <span class="badge badge-success">
+        <%= icon('check') %>
+        <%= Spree.t(:done) %>
+      </span>
+    <% else %>
+      <span class="badge badge-warning">
+        <%= icon('progress') %>
+        <%= Spree.t(:pending) %>
+      </span>
+    <% end %>
+  </td>
+
+  <td class="w-25">
+    <% if export.user %>
+      <span>
+        <%= export.user.name %>
+      </span>
+    <% end %>
+  </td>
+  <td>
+    <%= export.attachment.filename if export.done? %>
+  </td>
+  <td class="w-15"><%= local_time_ago(export.created_at, class: 'with-tip') %></td>
+  <td>
+    <%= number_to_human_size(export.attachment.byte_size) if export.done? %>
+  </td>
+  <td class="w-15 text-center">
+    <%= link_to spree.admin_export_path(export), class: 'btn btn-sm btn-light mx-auto', target: '_blank' do %>
+      <%= icon 'download', class: 'mr-1' %>
+      <%= Spree.t(:download) %>
+    <% end if export.done? %>
+  </td>
+</tr>

data/app/views/spree/admin/exports/create.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_render_alerts %>
+<%= turbo_close_modal %>

data/app/views/spree/admin/exports/index.html.erb

@@ -0,0 +1,30 @@
+<%= render 'spree/admin/shared/audit_nav' %>
+
+<% if @collection.present? %>
+  <div class="table-responsive card-lg p-0">
+    <table class="table">
+      <thead class="text-muted">
+        <tr>
+          <th><%= Spree.t(:number) %></th>
+          <th class="text-center"><%= Spree.t(:kind) %></th>
+          <th class="text-center"><%= Spree.t(:status) %></th>
+          <th><%= Spree.t(:user) %></th>
+          <th><%= Spree.t(:filename) %></th>
+          <th><%= Spree.t(:date) %></th>
+          <th><%= Spree.t(:size) %></th>
+          <th class="text-center"><%= Spree.t(:download) %></th>
+        </tr>
+      </thead>
+        <tbody>
+          <%= render partial: 'export', collection: @exports, cached: true %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+<% else %>
+  <div class="text-muted p-5 d-flex align-items-center w-100 justify-content-center">
+    <%= Spree.t(:no_resource_found, resource: plural_resource_name(model_class)) %>
+  </div>
+<% end %>
+
+<%= render 'spree/admin/shared/index_table_options', collection: @imports, simple: true if @imports.present? %>

data/app/views/spree/admin/exports/new.html.erb

@@ -0,0 +1,42 @@
+<%= turbo_frame_tag :dialog_modal do %>
+  <%= form_for @export, url: spree.admin_exports_path do |f| %>
+    <%= f.hidden_field :type %>
+    <%= f.hidden_field :search_params %>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">
+          <%= Spree.t(:export) %>
+          <%= plural_resource_name(@export.model_class) %>
+        </h5>
+        <button type="button" class="btn-close" data-dismiss="modal" aria-label="<%= Spree.t(:close) %>" />
+      </div>
+      <div class="modal-body">
+        <%= render 'spree/admin/shared/error_messages', target: @export %>
+        <div class="custom-control custom-radio">
+          <%= f.radio_button :record_selection, 'filtered', class: 'custom-control-input' %>
+          <%= f.label :record_selection, for: :export_record_selection_filtered, class: 'custom-control-label' do %>
+            <%= Spree.t(:filtered_records) %>
+            <br />
+            <span class="text-muted font-weight-normal mr-1">
+              <%= Spree.t('admin.export_only_filtered_records') %>
+            </span>
+          <% end %>
+        </div>
+        <div class="custom-control custom-radio mt-3">
+          <%= f.radio_button :record_selection, 'all', class: 'custom-control-input' %>
+          <%= f.label :record_selection, for: :export_record_selection_all, class: 'custom-control-label' do %>
+            <%= Spree.t(:all) %>
+            <br />
+            <span class="text-muted font-weight-normal mr-1">
+              <%= Spree.t('admin.export_all') %>
+            </span>
+          <% end %>
+        </div>
+      </div>
+      <div class="modal-footer d-flex justify-content-between">
+        <button type="button" class="btn btn-light" data-dismiss="modal"><%= Spree.t('actions.discard') %></button>
+        <%= turbo_save_button_tag Spree.t(:export), class: 'btn btn-primary' %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/spree/admin/line_items/edit.html.erb

@@ -0,0 +1,20 @@
+<%= turbo_frame_tag dom_id(@line_item) do %>
+  <div class="order-line-items__form d-flex align-items-center">
+    <div class="w-35">
+      <%= render 'spree/admin/variants/variant', variant: @line_item.variant %>
+    </div>
+    <div class="w-10">
+      <%= @line_item.single_money.to_html %>
+    </div>
+
+    <div class="w-40 border rounded p-2 bg-white shadow-xs mx-auto">
+      <%= form_with model: @line_item, url: spree.admin_order_line_item_path(@order, @line_item), class: "d-flex align-items-center gap-2 justify-content-between" do |f| %>
+        <%= f.label :quantity, Spree.t('quantity'), class: 'm-0' %>
+        <%= f.number_field :quantity, class: 'form-control form-control-sm', required: true, max: @line_item.variant.should_track_inventory? && !@line_item.variant.backorderable? ? @line_item.variant.total_on_hand + @line_item.quantity : nil, min: 1, autofocus: true %>
+
+        <%= turbo_save_button_tag Spree.t('actions.save'), data: { turbo_frame: '_top' }, type: :submit, class: 'btn btn-primary text-center btn-sm' %>
+        <%= link_to Spree.t('actions.discard'),  spree.edit_admin_order_path(@order), class: "btn btn-light btn-sm" %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/spree/admin/line_items/new.html.erb

@@ -0,0 +1,32 @@
+<%= turbo_frame_tag :dialog_modal do %>
+  <div class="modal-content" data-controller="search-picker">
+    <div class="modal-header">
+      <h5 class="modal-title" id="exampleModalLabel"><%= Spree.t(:add_variant) %></h5>
+      <button type="button" class="btn-close" data-dismiss="modal" aria-label="<%= Spree.t(:close) %>" />
+    </div>
+    <div class="modal-body border-bottom">
+      <%= form_with url: spree.admin_variants_search_path, method: :post, data: { controller: 'auto-submit', turbo_frame: '_top' } do |form| %>
+        <%= form.hidden_field :omit_ids, value: @order.variant_ids.join(',') %>
+        <%= form.hidden_field :param_name, value: 'line_item' %>
+        <%= form.search_field :q, value: params[:q], class: 'form-control', data: { search_picker_target: :search, action: 'auto-submit#submit' }, autofocus: true %>
+        <%= form.hidden_field :currency, value: @order.currency %>
+      <% end %>
+    </div>
+    <%= form_with model: @line_item, url: spree.admin_order_line_items_path(@order), data: {turbo_frame: '_top'} do |form| %>
+      <div class="modal-body p-0">
+        <div id="variants_search_results" class="search-results">
+          <p class="text-muted text-center py-5">
+            <%= Spree.t(:start_typing_to_search_for_variants) %>
+          </p>
+        </div>
+      </div>
+      <div class="modal-footer d-flex justify-content-between border-top">
+        <div class="d-flex gap-2 m-0 align-items-center">
+          <%= form.label :quantity, Spree.t(:quantity), class: "mb-0" %>
+          <%= form.number_field :quantity, class: "form-control", min: 1 %>
+        </div>
+        <%= turbo_save_button_tag Spree.t(:add_selected_variant), disabled: true, data: { search_picker_target: :submit } %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/spree/admin/oauth_applications/_form.html.erb

@@ -0,0 +1,11 @@
+<div class="form-group">
+  <%= f.label :name, raw(Spree.t(:name) + required_span_tag) %>
+  <%= f.text_field :name, class: 'form-control', required: true, autofocus: f.object.new_record? %>
+  <%= f.error_message_on :name %>
+</div>
+
+<div class="form-group">
+  <%= f.label :scopes, raw(Spree.t(:scopes) + required_span_tag) %>
+  <%= f.select :scopes, [['Read Only', 'admin read'], ['Read & Write', 'admin write']], { selected: @oauth_application.scopes.to_s }, { class: 'custom-select' } %>
+  <%= f.error_message_on :scopes %>
+</div>

data/app/views/spree/admin/oauth_applications/create.turbo_stream.erb

@@ -0,0 +1,41 @@
+<%= turbo_stream.replace "new_oauth_application" do %>
+  <div class="card">
+    <div class="card-body">
+      <div data-controller="clipboard" class="mb-3">
+        <div class="form-group">
+          <%= label_tag :client_id, 'Client ID' %>
+          <div class="input-group">
+            <%= text_area_tag :client_id, @object.uid, class: 'form-control', rows: 1, data: { clipboard_target: 'source', action: 'clipboard#copy' }, readonly: true %>
+            <div class="input-append">
+              <button data-action="clipboard#copy" class="btn btn-light">
+                <%= icon 'clone.svg', class: 'mr-2' %>
+                <%= Spree.t('admin.copy_to_clipboard') %>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div data-controller="clipboard" class="mb-3">
+        <div class="form-group">
+          <%= label_tag :client_secret, 'Client Secret' %>
+          <div class="input-group">
+            <%= text_area_tag :client_secret, @object.plaintext_secret, class: 'form-control', rows: 1, data: { clipboard_target: 'source', action: 'clipboard#copy' }, readonly: true %>
+            <div class="input-append">
+              <button data-action="clipboard#copy" class="btn btn-light">
+                <%= icon 'clone.svg', class: 'mr-2' %>
+                <%= Spree.t('admin.copy_to_clipboard') %>
+              </button>
+            </div>
+          </div>
+          <div class="alert alert-warning mt-3">
+            This is your application's secret token, copy it now and keep it safe. It won't be shown again.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-footer">
+      <%= link_to 'Back to list', spree.admin_oauth_applications_url, class: 'btn btn-light' %>
+    </div>
+  </div>
+<% end %>

data/app/views/spree/admin/oauth_applications/edit.html.erb

@@ -0,0 +1,19 @@
+<% content_for :page_title do %>
+  <%= page_header_back_button spree.admin_oauth_applications_url %>
+  <%= @oauth_application.name.capitalize %>
+<% end %>
+
+<%= render partial: 'spree/admin/shared/error_messages', locals: { target: @oauth_application } %>
+
+<div class="row">
+  <div class="col-lg-6">
+    <%= form_for [:admin, @oauth_application] do |f| %>
+      <div class="card mb-4">
+        <div class="card-body">
+          <%= render 'form', f: f %>
+        </div>
+      </div>
+      <%= render 'spree/admin/shared/edit_resource_links', f: f %>
+    <% end %>
+  </div>
+</div>

data/app/views/spree/admin/oauth_applications/index.html.erb

@@ -0,0 +1,75 @@
+<%= render 'spree/admin/shared/developers_nav' %>
+
+<%= content_for(:title, Spree.t('admin.oauth_applications.list')) %>
+
+<% content_for :page_actions do %>
+  <%= button_link_to Spree.t('admin.oauth_applications.new'), new_object_url, class: "btn-primary", icon: 'plus' %>
+<% end if can? :create, Spree::OauthApplication %>
+
+<%= content_for :page_alerts do %>
+  <div class="alert alert-info mb-3">
+    <p>
+      Here you can manage API keys to access the <%= link_to 'Platform API', 'https://spreecommerce.org/docs/api-reference/platform/authentication', target: '_blank' %>.
+      For headless storefronts you don't need an API key, please use the <%= link_to 'Storefront API', 'https://spreecommerce.org/docs/api-reference/storefront/authentication', target: '_blank' %>.
+    </p>
+  </div>
+<% end %>
+
+<% if @oauth_applications.any? %>
+  <div class="table-responsive rounded border mt-4 bg-white">
+    <table class="table">
+      <thead class="text-muted">
+        <tr>
+          <th><%= Spree.t(:name) %></th>
+          <th>Client ID</th>
+          <th><%= Spree.t('admin.oauth_applications.scopes') %></th>
+          <th><%= Spree.t('admin.oauth_applications.last_used') %></th>
+          <th class="actions"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @oauth_applications.each do |application| %>
+          <tr id="<%= spree_dom_id application %>">
+            <td class="w-20"><code><%= application.name %></code></td>
+            <td class="w-40">
+              <div class="input-group" data-controller="password-toggle">
+                <%= button_tag class: 'btn hover-gray px-1', data: { action: 'click->password-toggle#password' } do %>
+                  <%= icon 'eye', class: 'mr-0' %>
+                <% end %>
+                <%= password_field_tag :password, application.uid, class: 'form-control-plaintext', data: { password_toggle_target: 'unhide' }, readonly: true %>
+              </div>
+            </td>
+            <td class="w-15">
+              <% if application.scopes.include?('write') %>
+                <span class="badge badge-warning">
+                  <%= icon('pencil', class: 'mr-1') %>
+                  <%= Spree.t('admin.oauth_applications.read_and_write') %>
+                </span>
+              <% else %>
+                <span class="badge badge-light">
+                  <%= icon('eye', class: 'mr-1') %>
+                  <%= Spree.t('admin.oauth_applications.read_only') %>
+                </span>
+              <% end %>
+            </td>
+            <td class="w-15">
+              <% if application.last_used_at %>
+                <%= local_time(application.last_used_at) %>
+              <% else %>
+                <span class="text-muted"><%= Spree.t('admin.oauth_applications.never') %></span>
+              <% end %>
+            </td>
+            <td class="actions w-10">
+              <%= link_to_edit(application, no_text: true) if can? :edit, application %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% else %>
+  <div class="text-muted p-5 d-flex align-items-center w-100 justify-content-center">
+    <%= Spree.t(:no_resource_found, resource: 'API keys') %>
+    <%= link_to_with_icon('plus', Spree.t(:add_one), new_object_url, class: 'btn btn-link ml-3') if can? :create, Spree::OauthApplication %>
+  </div>
+<% end %>

data/app/views/spree/admin/oauth_applications/new.html.erb

@@ -0,0 +1,25 @@
+<%= content_for :title do %>
+  <%= Spree.t('admin.oauth_applications.new') %>
+<% end %>
+
+<% content_for :page_title do %>
+  <%= page_header_back_button spree.admin_oauth_applications_url %>
+  <%= Spree.t('admin.oauth_applications.new') %>
+<% end %>
+
+<%= render partial: 'spree/admin/shared/error_messages', locals: { target: @oauth_application } %>
+
+<div class="row">
+  <div class="col-lg-6">
+    <%= turbo_frame_tag 'new_oauth_application' do %>
+      <%= form_for [:admin, @oauth_application] do |f| %>
+        <div class="card mb-4">
+          <div class="card-body">
+            <%= render 'form', f: f %>
+          </div>
+        </div>
+        <%= render 'spree/admin/shared/new_resource_links' %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/views/spree/admin/option_types/_filter.html.erb

@@ -0,0 +1,7 @@
+<%= search_form_for [:admin, @search], class: "filter-wrap border-bottom", data: {controller: "filters reveal", reveal_hidden_class: "d-none"} do |f| %>
+  <%= render 'spree/admin/shared/filters_search_bar', param: :name_cont, label: Spree.t(:name) %>
+
+  <%= render "spree/admin/shared/filter_badge_template" %>
+
+  <div data-filters-target="badgesContainer" class="filter-badges-container"></div>
+<% end %>

data/app/views/spree/admin/option_types/_form.html.erb

@@ -0,0 +1,87 @@
+<div class="card mb-4">
+    <div class="card-header">
+      <h5 class="card-title"><%= Spree.t(:general_information) %></h5>
+    </div>
+    <div class="card-body" data-controller="slug-form">
+      <div class="row mb-3">
+        <div class="col-md-6">
+          <div class="form-group">
+            <%= f.label :presentation, raw(Spree.t(:presentation) + required_span_tag) %>
+            <%= f.text_field :presentation, class: "form-control", required: true, autofocus: f.object.new_record?, data: { slug_form_target: :name, action: 'slug-form#updateUrlFromName' } %>
+            <%= f.error_message_on :presentation %>
+            <p class="text-muted form-text mt-2 mb-0">
+              This is used to display the option type on the storefront.
+            </p>
+          </div>
+        </div>
+
+        <div class="col-md-6">
+          <div class="form-group">
+            <%= f.label :name, Spree.t(:internal_name) %>
+            <%= f.text_field :name, class: "form-control", data: { slug_form_target: :url } %>
+            <%= f.error_message_on :name %>
+            <p class="text-muted form-text mt-2 mb-0">
+              This is used internally to identify the option type. <strong>It must be unique.</strong>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12 col-md-6">
+          <div class="form-group">
+            <div class="custom-control custom-checkbox mb-3">
+              <%= f.check_box :filterable, class: "custom-control-input", id: "option_type_filterable" %>
+              <%= f.label :filterable, Spree.t(:filterable), class: "custom-control-label", for: "option_type_filterable" %>
+            </div>
+            <small class="form-text text-muted">
+              <%= raw Spree.t('option_type_filterable_info') %>
+            </small>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <template data-nested-form-target="template">
+    <%= f.fields_for :option_values, Spree::OptionValue.new, child_index: 'NEW_RECORD' do |option_value_form| %>
+      <%= render "option_value_fields", f: option_value_form %>
+    <% end %>
+  </template>
+
+  <div class="card mb-4">
+    <div class="card-header d-flex justify-content-between align-items-center">
+      <h5 class="card-title"><%= Spree.t(:option_values) %></h5>
+    </div>
+    <div class="card-body p-0">
+      <div class="table-responsive">
+        <table class="table">
+          <thead>
+            <tr class="border-bottom">
+              <th></th>
+              <th><%= raw(Spree.t(:presentation) + required_span_tag) %></th>
+              <th><%= raw(Spree.t(:internal_name) + required_span_tag) %></th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody id="option_values" data-controller="sortable" data-sortable-handle-value=".move-handle" data-sortable-resource-name-value="option_value" data-sortable-response-kind-value="turbo-stream">
+            <% @option_type.option_values.build if @option_type.option_values.empty? %>
+            <%= f.fields_for :option_values do |option_value_form| %>
+              <%= render partial: 'option_value_fields', locals: { f: option_value_form, option_type: @option_type } %>
+            <% end %>
+
+            <!-- Inserted elements will be injected before that target. -->
+            <tr data-nested-form-target="target"></tr>
+
+            <tr class="hover-none">
+              <td colspan="4" class="text-center p-2">
+                <button type="button" data-action="nested-form#add" class="btn btn-link py-3 w-100" id="add_option_value_button">
+                  <%= icon('plus') %>
+                  <%= Spree.t(:add_one) %>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>

data/app/views/spree/admin/option_types/_option_type.html.erb

@@ -0,0 +1,19 @@
+<tr id="<%= spree_dom_id option_type %>" data-controller="row-link" data-sortable-update-url="<%= spree.admin_option_type_path(option_type) %>">
+  <td class="move-handle text-center w-5">
+    <%= icon('grip-vertical', class: 'rounded hover-gray p-2') %>
+  </td>
+  <td class="w-20 cursor-pointer" data-action="click->row-link#openLink"><code><%= option_type.name %></code></td>
+  <td class="w-35 cursor-pointer font-weight-bold" data-action="click->row-link#openLink"><%= option_type.presentation %></td>
+  <td class="w-10 cursor-pointer" data-action="click->row-link#openLink">
+    <%= active_badge(option_type.filterable) %>
+  </td>
+  <td class="w-10 cursor-pointer" data-action="click->row-link#openLink">
+    <%= option_type.option_values.count %>
+  </td>
+  <td class="w-10 cursor-pointer" data-action="click->row-link#openLink">
+    <%= option_type.products.count %>
+  </td>
+  <td class="w-10 actions cursor-pointer">
+    <%= link_to_edit option_type, data: { row_link_target: :link } %>
+  </td>
+</tr>