Skip to content

Commit

Permalink
Data exports table empty fix (#779)
Browse files Browse the repository at this point in the history 
* applying full component to data exports table

* applying same css to data export table and sample table

* passing has_data_exports to table

* adding a test

* fixing rubocop error
  • Loading branch information
@ksierks
ksierks authored Sep 24, 2024
1 parent dfef760 commit 8fe7b8f
Show file tree
Hide file tree
Showing 6 changed files with 130 additions and 112 deletions.
215 changes: 109 additions & 106 deletions app/components/data_exports/table_component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,142 +1,145 @@
<%= render Viral::BaseComponent.new(**wrapper_arguments) do %>
<%= render Viral::BaseComponent.new(**system_arguments) do %>
<table
class="
w-full text-sm text-left rtl:text-right text-slate-500 dark:text-slate-400
dark:divide-slate-600 whitespace-nowrap
"
>
<thead
<% if @has_data_exports %>
<%= render Viral::BaseComponent.new(**wrapper_arguments) do %>
<%= render Viral::BaseComponent.new(**system_arguments) do %>
<table
class="
text-xs text-slate-700 uppercase bg-slate-50 dark:bg-slate-700
dark:text-slate-400
w-full text-sm text-left rtl:text-right text-slate-500 dark:text-slate-400
whitespace-nowrap
"
>
<tr>
<% @columns.each_with_index do |column, index| %>
<%= render_cell(
<thead
class="
sticky top-0 z-10 text-xs uppercase text-slate-700 bg-slate-50 dark:bg-slate-700
dark:text-slate-300
"
>
<tr>
<% @columns.each_with_index do |column, index| %>
<%= render_cell(
tag: 'th',
scope: 'col',
classes: class_names('px-3 py-3')
) do %>
<%= render Ransack::SortComponent.new(
ransack_obj: @q,
label: t("data_exports.index.table_header.#{column}"),
url: helpers.sorting_url(@q, column),
field: column,
data: {
turbo_action: "replace",
},
) %>
<%= render Ransack::SortComponent.new(
ransack_obj: @q,
label: t("data_exports.index.table_header.#{column}"),
url: helpers.sorting_url(@q, column),
field: column,
data: {
turbo_action: "replace",
},
) %>
<% end %>
<% end %>
<% end %>
<%= render_cell(
<%= render_cell(
tag: 'th',
scope: 'col',
classes: class_names('px-3 py-3')
) do %>
<%= t("data_exports.index.table_header.action") %>
<% end %>
</tr>
</thead>
<tbody class="divide-y divide-slate-200 dark:divide-slate-700">
<% @data_exports.each do |data_export| %>
<%= render Viral::BaseComponent.new(**row_arguments(data_export)) do %>
<td class="px-3 py-3">
<%= link_to data_export.id,
data_export_path(data_export),
data: {
turbo: false,
},
class: "text-slate-900 dark:text-slate-100 font-semibold hover:underline" %>
</td>
<td class="px-3 py-3">
<% unless data_export.name.nil? %>
<%= link_to data_export.name,
<%= t("data_exports.index.table_header.action") %>
<% end %>
</tr>
</thead>
<tbody
class="
overflow-y-auto bg-white divide-y divide-slate-200 dark:bg-slate-800
dark:divide-slate-700
"
>
<% @data_exports.each do |data_export| %>
<%= render Viral::BaseComponent.new(**row_arguments(data_export)) do %>
<td class="px-3 py-3">
<%= link_to data_export.id,
data_export_path(data_export),
data: {
turbo: false,
},
class: "text-slate-900 dark:text-slate-100 font-semibold hover:underline" %>
<% end %>
</td>
<td class="px-3 py-3">
<%= t(:"data_exports.types.#{data_export.export_type}") %>
</td>
<td class="px-3 py-3">
<% if data_export.status == 'ready' %>
<%= viral_pill(text: t(:"data_exports.status.#{data_export.status}"), color: :green) %>
<% else %>
<%= viral_pill(text: t(:"data_exports.status.#{data_export.status}"), color: :slate) %>
<% end %>
</td>
<td class="px-3 py-3">
<%= helpers.local_time(data_export.created_at, :full_date) %>
</td>
<td class="px-3 py-3">
<% unless data_export.expires_at.nil? %>
<%= helpers.local_time(data_export.expires_at, :full_date) %>
<% end %>
</td>
<td class="px-3 py-3 space-x-2">
<% if data_export.status == 'ready' %>
<%= link_to(
t(:"data_exports.index.actions.download"),
rails_blob_path(data_export.file),
</td>
<td class="px-3 py-3">
<% unless data_export.name.nil? %>
<%= link_to data_export.name,
data_export_path(data_export),
data: {
turbo: false,
},
class: "text-slate-900 dark:text-slate-100 font-semibold hover:underline" %>
<% end %>
</td>
<td class="px-3 py-3">
<%= t(:"data_exports.types.#{data_export.export_type}") %>
</td>
<td class="px-3 py-3">
<% if data_export.status == 'ready' %>
<%= viral_pill(text: t(:"data_exports.status.#{data_export.status}"), color: :green) %>
<% else %>
<%= viral_pill(text: t(:"data_exports.status.#{data_export.status}"), color: :slate) %>
<% end %>
</td>
<td class="px-3 py-3">
<%= helpers.local_time(data_export.created_at, :full_date) %>
</td>
<td class="px-3 py-3">
<% unless data_export.expires_at.nil? %>
<%= helpers.local_time(data_export.expires_at, :full_date) %>
<% end %>
</td>
<td class="px-3 py-3 space-x-2">
<% if data_export.status == 'ready' %>
<%= link_to(
t(:"data_exports.index.actions.download"),
rails_blob_path(data_export.file),
data: {
turbo: false,
},
aria: {
label:
(
t(
:"data_exports.index.actions.download_aria_label",
name: data_export.name || data_export.id,
)
),
},
class:
"font-medium text-blue-600 underline dark:text-blue-500 hover:no-underline cursor-pointer",
) %>
<% end %>
<%= link_to(
t(:"data_exports.index.actions.delete"),
data_export_path(data_export),
data: {
turbo_method: :delete,
turbo_confirm:
t(
:"data_exports.index.delete_confirmation",
name: data_export.name || data_export.id,
),
},
aria: {
label:
(
t(
:"data_exports.index.actions.download_aria_label",
:"data_exports.index.actions.delete_aria_label",
name: data_export.name || data_export.id,
)
),
},
class:
"font-medium text-blue-600 underline dark:text-blue-500 hover:no-underline cursor-pointer",
) %>
<% end %>
<%= link_to(
t(:"data_exports.index.actions.delete"),
data_export_path(data_export),
data: {
turbo_method: :delete,
turbo_confirm:
t(
:"data_exports.index.delete_confirmation",
name: data_export.name || data_export.id,
),
},
aria: {
label:
(
t(
:"data_exports.index.actions.delete_aria_label",
name: data_export.name || data_export.id,
)
),
},
class:
"font-medium text-blue-600 underline dark:text-blue-500 hover:no-underline cursor-pointer",
) %>
</td>
</td>
<% end %>
<% end %>
<% end %>
</tbody>
</table>
<% end %>
<% if @data_exports.any? %>
<div class="flex items-center justify-between">
<%= render Viral::Pagy::LimitComponent.new(
@pagy,
item: t("data_exports.index.limit.item"),
) %>
<%= render Viral::Pagy::PaginationComponent.new(@pagy) %>
</div>
</tbody>
</table>
<% end %>
<%= render Viral::Pagy::FullComponent.new(
@pagy,
item: t("data_exports.index.limit.item"),
) %>
<% end %>
<% else %>
<div class="empty_state_message">
<%= viral_empty(
title: @empty[:title],
Expand Down
6 changes: 4 additions & 2 deletions app/components/data_exports/table_component.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@ module DataExports
class TableComponent < Component
include Ransack::Helpers::FormHelper

# rubocop:disable Naming/MethodParameterName
# rubocop:disable Naming/MethodParameterName, Metrics/ParameterLists
def initialize(
has_data_exports,
data_exports,
pagy,
q,
empty: {},
**system_arguments
)
@has_data_exports = has_data_exports
@data_exports = data_exports
@pagy = pagy
@q = q
Expand All @@ -23,7 +25,7 @@ def initialize(

@columns = columns
end
# rubocop:enable Naming/MethodParameterName
# rubocop:enable Naming/MethodParameterName, Metrics/ParameterLists

def system_arguments
{ tag: 'div' }.deep_merge(@system_arguments).tap do |args|
Expand Down
4 changes: 3 additions & 1 deletion app/controllers/data_exports_controller.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ class DataExportsController < ApplicationController # rubocop:disable Metrics/Cl
TABS = %w[summary preview].freeze

def index
@q = load_data_exports.ransack(params[:q])
all_data_exports = load_data_exports
@has_data_exports = all_data_exports.count.positive?
@q = all_data_exports.ransack(params[:q])
set_default_sort
@pagy, @data_exports = pagy(@q.result)
end
Expand Down
3 changes: 2 additions & 1 deletion app/views/data_exports/_table.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<%# locals: (data_exports:, pagy:, q:) -%>
<%# locals: (has_data_exports:, data_exports:, pagy:, q:) -%>
<%= render DataExports::TableComponent.new(
has_data_exports,
data_exports,
pagy,
q,
Expand Down
1 change: 1 addition & 0 deletions app/views/data_exports/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@

<%= render partial: "table",
locals: {
has_data_exports: @has_data_exports,
data_exports: @data_exports,
pagy: @pagy,
q: @q,
Expand Down
13 changes: 11 additions & 2 deletions test/system/data_exports_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,10 @@ def setup # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
end

assert_no_selector 'table'
assert_text I18n.t('data_exports.index.no_data_exports')
assert_text I18n.t('data_exports.index.no_data_exports_message')
within 'div[role="alert"]' do
assert_text I18n.t('data_exports.index.no_data_exports')
assert_text I18n.t('data_exports.index.no_data_exports_message')
end
end

test 'can navigate to individual data export page from data exports page' do
Expand Down Expand Up @@ -1108,5 +1110,12 @@ def setup # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
assert_text @data_export10.id
assert_text @data_export10.name
end

fill_in placeholder: I18n.t(:'data_exports.index.search.placeholder'),
with: 'something that does not exist'
within 'div[role="alert"]' do
assert_text I18n.t('components.viral.pagy.empty_state.title')
assert_text I18n.t('components.viral.pagy.empty_state.description')
end
end
end

0 comments on commit 8fe7b8f

Please sign in to comment.