Fixing UX suggestions66613-artifacts-page-fe

- Fixed pagination to be up to spec
- Adjusted total size container height
- Removed the deleted branch filter because
it doesn't work
- Aligned table to search bar
- Fixed action icons and tooltips

6 files changed, 41 insertions, 57 deletions

diff --git a/app/assets/javascripts/filtered_search/project_artifacts_filtered_search_token_keys.js b/app/assets/javascripts/filtered_search/project_artifacts_filtered_search_token_keys.js
index f9c64182941..30c1cf89581 100644
--- a/app/assets/javascripts/filtered_search/project_artifacts_filtered_search_token_keys.js
+++ b/app/assets/javascripts/filtered_search/project_artifacts_filtered_search_token_keys.js
@@ -1,16 +1,8 @@
 import FilteredSearchTokenKeys from './filtered_search_token_keys';
 
 const tokenKeys = [
-  {
-    key: 'deleted-branches',
-    type: 'string',
-    param: 'deleted-branches',
-    symbol: '',
-    icon: 'tag',
-    tag: 'Yes or No', // eslint-disable-line @gitlab/i18n/no-non-i18n-strings
-    lowercaseValueOnSubmit: true,
-    capitalizeTokenValue: true,
-  },
+  // Currently, no filtering is implemented. This will be fixed in future iterations.
+  // See https://gitlab.com/gitlab-org/gitlab-ce/issues/48862 for more information.
 ];
 
 const ProjectArtifactsFilteredSearchTokenKeys = new FilteredSearchTokenKeys(tokenKeys);
diff --git a/app/views/projects/artifacts/_artifact.html.haml b/app/views/projects/artifacts/_artifact.html.haml
index 995ff5da668..f3f9b72bc1e 100644
--- a/app/views/projects/artifacts/_artifact.html.haml
+++ b/app/views/projects/artifacts/_artifact.html.haml
@@ -1,62 +1,63 @@
 - project = local_assigns.fetch(:project)
 
-.gl-responsive-table-row{ id: dom_id(job) }
-  .table-section.section-25.section-wrap
+.gl-responsive-table-row.px-md-3{ id: dom_id(artifact) }
+  .table-section.section-25.section-wrap.commit
     .table-mobile-header{ role: 'rowheader' }= _('Job')
     .table-mobile-content
-      .branch-commit
-        - if can?(current_user, :read_build, job)
-          = link_to project_job_path(project, job) do
-            %span.build-link= job.id
+      .branch-commit.cgray
+        - if can?(current_user, :read_build, project)
+          = link_to project_job_path(project, artifact.job) do
+            %span.build-link ##{artifact.job_id}
         - else
-          %span.build-link= job.id
+          %span.build-link ##{artifact.job_id}
 
-        - if job.ref
+        - if artifact.job.ref
           .icon-container
-            = job.tag? ? icon('tag') : sprite_icon('fork', css_class: 'sprite')
-          = link_to job.ref, project_ref_path(project, job.ref), class: 'ref-name'
+            = artifact.job.tag? ? icon('tag') : sprite_icon('branch', css_class: 'sprite')
+          = link_to artifact.job.ref, project_ref_path(project, artifact.job.ref), class: 'ref-name'
         - else
-          .light= none
+          .light= _('none')
         .icon-container.commit-icon
           = custom_icon('icon_commit')
 
-        = link_to job.short_sha, project_commit_path(project, job.sha), class: 'commit-sha'
+        - if artifact.job.sha
+          = link_to artifact.job.short_sha, project_commit_path(project, artifact.job.sha), class: 'commit-sha mr-0'
 
   .table-section.section-15.section-wrap
     .table-mobile-header{ role: 'rowheader' }= _('Name')
     .table-mobile-content
-      = job.name
+      = artifact.job.name
 
   .table-section.section-20
     .table-mobile-header{ role: 'rowheader' }= _('Creation date')
     .table-mobile-content
       %p.finished-at
         = icon("calendar")
-        %span= time_ago_with_tooltip(job.created_at)
+        %span= time_ago_with_tooltip(artifact.created_at)
 
   .table-section.section-20
     .table-mobile-header{ role: 'rowheader' }= _('Expiration date')
     .table-mobile-content
-      - if job.artifacts_expire_at
+      - if artifact.expire_at
         %p.finished-at
           = icon("calendar")
-          %span= time_ago_with_tooltip(job.artifacts_expire_at)
+          %span= time_ago_with_tooltip(artifact.expire_at)
 
   .table-section.section-10
     .table-mobile-header{ role: 'rowheader' }= _('Size')
     .table-mobile-content
-      = number_to_human_size(job.sum_artifacts_size, precision: 2)
+      = number_to_human_size(artifact.size, precision: 2)
 
   .table-section.table-button-footer.section-10
     .btn-group.table-action-buttons
       .btn-group
-        - if can?(current_user, :read_build, job)
-          = link_to download_project_job_artifacts_path(job.project, job), rel: 'nofollow', download: '', title: _('Download artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Download artifacts') }, class: 'btn btn-build has-tooltip' do
+        - if can?(current_user, :read_build, project)
+          = link_to download_project_job_artifacts_path(project, artifact.job), rel: 'nofollow', download: '', title: _('Download artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Download artifacts') }, class: 'btn btn-build has-tooltip' do
             = sprite_icon('download')
 
-          = link_to browse_project_job_artifacts_path(job.project, job), rel: 'nofollow', title: _('Browse artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Browse artifacts') }, class: 'btn btn-build has-tooltip' do
-            = sprite_icon('earth')
+          = link_to browse_project_job_artifacts_path(project, artifact.job), rel: 'nofollow', title: _('Browse artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Browse artifacts') }, class: 'btn btn-build has-tooltip' do
+            = sprite_icon('folder-open')
 
-        - if can?(current_user, :destroy_artifacts, job.project)
-          = link_to namespace_project_job_artifacts_path(job.project.namespace, job.project, job), data: { placement: 'top', container: 'body', confirm: _('Are you sure you want to delete these artifacts?') }, method: :delete, title: _('Delete artifacts'), ref: 'tooltip', aria: { label: _('Delete artifacts') }, class: 'btn btn-remove has-tooltip' do
+        - if can?(current_user, :destroy_artifacts, project)
+          = link_to namespace_project_job_artifacts_path(project.namespace, project, artifact.job), data: { placement: 'top', container: 'body', confirm: _('Are you sure you want to delete these artifacts?') }, method: :delete, title: _('Delete artifacts'), ref: 'tooltip', aria: { label: _('Delete artifacts') }, class: 'btn btn-remove has-tooltip' do
             = sprite_icon('remove')
diff --git a/app/views/projects/artifacts/_search_bar.html.haml b/app/views/projects/artifacts/_search_bar.html.haml
index 731b5b06bf9..bb6689d6811 100644
--- a/app/views/projects/artifacts/_search_bar.html.haml
+++ b/app/views/projects/artifacts/_search_bar.html.haml
@@ -37,15 +37,6 @@
                   %span.js-filter-tag.dropdown-light-content
                     {{tag}}
 
-          #js-dropdown-project-artifact-deleted-branches.filtered-search-input-dropdown-menu.dropdown-menu
-            %ul{ data: { dropdown: true } }
-              %li.filter-dropdown-item{ data: { value: 'true' } }
-                = button_tag class: %w[btn btn-link] do
-                  = _('Yes')
-              %li.filter-dropdown-item{ data: { value: 'false' } }
-                = button_tag class: %w[btn btn-link] do
-                  = _('No')
-
         = button_tag class: %w[clear-search hidden] do
           = icon('times')
       .filter-dropdown-container
diff --git a/app/views/projects/artifacts/_sort_dropdown.html.haml b/app/views/projects/artifacts/_sort_dropdown.html.haml
index 91243e85e54..7a999b053bd 100644
--- a/app/views/projects/artifacts/_sort_dropdown.html.haml
+++ b/app/views/projects/artifacts/_sort_dropdown.html.haml
@@ -1,6 +1,6 @@
 - project = local_assigns.fetch(:project)
-- sort_value = @sort
-- sorted_title = sort_options_hash[sort_value]
+- sort_key = params[:sort_key] || sort_value_created_date
+- sorted_title = sort_options_hash[sort_key]
 
 .dropdown.inline.prepend-left-10
   .btn-group{ role: 'group' }
@@ -10,9 +10,9 @@
         = icon('chevron-down')
       %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
         %li
-          = sortable_item(sort_title_created_date, page_filter_path(sort: sort_value_created_date, label: true), sorted_title)
-          = sortable_item(sort_title_expire_date,  page_filter_path(sort: sort_value_expire_date,  label: true), sorted_title)
-          = sortable_item(sort_title_size,         page_filter_path(sort: sort_value_size,         label: true), sorted_title)
-    - reverse_sort = issuable_reverse_sort_order_hash[sort_value]
-    - reverse_url = page_filter_path(sort: reverse_sort)
-    = sort_direction_button(reverse_url, reverse_sort,  sort_value)
+          = sortable_item(sort_title_created_date, page_filter_path(sort_key: sort_value_created_date, label: true), sorted_title)
+          = sortable_item(sort_title_expire_date,  page_filter_path(sort_key: sort_value_expire_date,  label: true), sorted_title)
+          = sortable_item(sort_title_size,         page_filter_path(sort_key: sort_value_size,         label: true), sorted_title)
+    - reverse_sort = issuable_reverse_sort_order_hash[sort_key]
+    - reverse_url = page_filter_path(sort_key: reverse_sort)
+    = sort_direction_button(reverse_url, reverse_sort,  sort_key)
diff --git a/app/views/projects/artifacts/_table.html.haml b/app/views/projects/artifacts/_table.html.haml
index 91db0779cc3..1ce03f6a748 100644
--- a/app/views/projects/artifacts/_table.html.haml
+++ b/app/views/projects/artifacts/_table.html.haml
@@ -1,10 +1,10 @@
-- if jobs.blank?
+- if artifacts.blank?
   %div
     .nothing-here-block No jobs to show
 - else
   .table-holder
     .ci-table
-      .gl-responsive-table-row.table-row-header{ role: 'row' }
+      .gl-responsive-table-row.table-row-header.px-md-3{ role: 'row' }
         .table-section.section-25{ role: 'rowheader' }= _('Job')
         .table-section.section-15{ role: 'rowheader' }= _('Name')
         .table-section.section-20{ role: 'rowheader' }= _('Creation date')
@@ -12,6 +12,6 @@
         .table-section.section-10{ role: 'rowheader' }= _('Size')
         .table-section.section-10{ role: 'rowheader' }
 
-      = render partial: 'artifact', collection: jobs, as: :job, locals: { project: project }
+      = render partial: 'artifact', collection: artifacts, as: :artifact, locals: { project: project }
 
-  = paginate_collection(jobs)
+  = paginate artifacts, theme: "gitlab", total_pages: @total_pages
diff --git a/app/views/projects/artifacts/index.html.haml b/app/views/projects/artifacts/index.html.haml
index aead3331938..9cb07d09b02 100644
--- a/app/views/projects/artifacts/index.html.haml
+++ b/app/views/projects/artifacts/index.html.haml
@@ -2,9 +2,9 @@
 - page_title _('Artifacts')
 
 %div{ class: container_class }
-  .my-2.d-flex
-    .artifacts-size
+  .top-area.py-3
+    .artifacts-size.align-self-center
       = _('Total artifacts size: %{total_size}') % { total_size: number_to_human_size(@total_size, precicion: 2) }
   = render 'search_bar', project: @project
   .content-list.builds-content-list
-    = render "table", jobs: @jobs_with_artifacts, project: @project
+    = render "table", artifacts: @artifacts, project: @project