[DREAM-688] Use BorderBoxList for document types

Migrate the document types admin index to BorderBoxListComponent,
mirroring the enumerations migration. The old two-column header
(Type / Documents) is replaced by the list header with a type count;
each row renders its document count as a Counter using the same
options as the list header counter, minus the primary scheme.
Adds spec coverage.

https://community.openproject.org/wp/DREAM-688

Author: myabc

modules/documents/app/components/documents/admin/document_types/index_component.html.erb

@@ -48,28 +48,27 @@
       end
 
       flex.with_row do
-        render(border_box_container(data: drop_target_config)) do |component|
-          component.with_header(font_weight: :bold) do
-            grid_layout("op-documents-types-list--header", tag: :div, align_items: :center) do |grid|
-              grid.with_area(:name, tag: :div, mr: 3) do
-                render(Primer::Beta::Text.new(font_weight: :semibold)) { I18n.t("documents.index_page.type") }
-              end
+        render(
+          OpenProject::Common::BorderBoxListComponent.new(
+            container: "#{wrapper_key}-list",
+            position: :relative,
+            data: drop_target_config
+          )
+        ) do |list|
+          list.with_header(
+            title: DocumentType.model_name.human(count: :other),
+            title_tag: :h3,
+            count: document_types.size
+          )
 
-              grid.with_area(:"documents-count", tag: :div, hide: :sm) do
-                render(Primer::Beta::Text.new(font_weight: :semibold)) { I18n.t("label_documents") }
-              end
-            end
-          end
+          list.with_empty_state(
+            title: t(:no_results_title_text),
+            spacious: true
+          )
 
-          if document_types.empty?
-            component.with_row do
-              render(Primer::Beta::Text.new(color: :subtle)) { t(:no_results_title_text) }
-            end
-          else
-            document_types.each do |document_type|
-              component.with_row(test_selector: "document-type-row-#{document_type.id}", data: draggable_item_config(document_type)) do
-                render(item_component_class.new(enumeration: document_type, max_position: max_position))
-              end
+          document_types.each do |document_type|
+            list.with_item(test_selector: "document-type-row-#{document_type.id}", data: draggable_item_config(document_type)) do
+              render(item_component_class.new(enumeration: document_type, max_position: max_position))
             end
           end
         end

modules/documents/app/components/documents/admin/document_types/index_component.sass

@@ -1,15 +1,16 @@
-.op-documents-types-list--header,
 .op-documents-types-list--item
   display: grid
-  grid-template-columns: 20px 2fr 1fr 1fr
+  grid-template-columns: auto auto 1fr auto
   grid-template-areas: "drag-handle name documents-count actions"
+  column-gap: var(--stack-gap-condensed)
 
-  &--actions
-    justify-self: end
+  &--drag-handle
+    align-self: center
+    padding-right: var(--stack-gap-condensed)
+    cursor: grab
+    color: var(--fgColor-muted)
 
 @media screen and (max-width: $breakpoint-sm)
-  .op-documents-types-list--header,
   .op-documents-types-list--item
-    grid-template-columns: 20px 1fr 1fr
+    grid-template-columns: auto 1fr auto
     grid-template-areas: "drag-handle name actions"
-    column-gap: 5px

modules/documents/app/components/documents/admin/document_types/item_component.html.erb

@@ -67,9 +67,15 @@
         end
 
         grid.with_area(:"documents-count", tag: :div, hide: :sm) do
-          render(Primer::Beta::Text.new(color: :subtle, test_selector: "documents-count")) do
-            document_type.documents_count.to_s
-          end
+          render(
+            Primer::Beta::Counter.new(
+              count: document_type.documents_count,
+              round: true,
+              limit: 1_000,
+              hide_if_zero: true,
+              test_selector: "documents-count"
+            )
+          )
         end
 
         grid.with_area(:actions, tag: :div, classes: "hide-when-print") do

modules/documents/config/locales/en.yml

@@ -41,6 +41,9 @@ en:
         document_type:
           one_or_more_required: "Cannot delete the last document type"
     models:
+      document_type:
+        one: "Type"
+        other: "Types"
       document: "Document"
       documents: "Documents"
     attributes:

modules/documents/spec/components/documents/admin/document_types/index_component_spec.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+require "rails_helper"
+
+RSpec.describe Documents::Admin::DocumentTypes::IndexComponent, type: :component do
+  subject(:rendered_component) do
+    with_controller_class(Documents::Admin::Settings::DocumentTypesController) do
+      with_request_url("/admin/settings/document_types") do
+        render_inline(described_class.new(enumerations: document_types))
+      end
+    end
+  end
+
+  let(:document_types) { DocumentType.order(:position) }
+
+  context "with document types" do
+    let!(:note_type) { create(:document_type, name: "Note", position: 1) }
+    let!(:report_type) { create(:document_type, name: "Report", position: 2) }
+
+    let(:draggable_records) { [note_type, report_type] }
+    let(:row_test_selector_prefix) { "document-type-row-" }
+    let(:move_path_base) { "/admin/settings/document_types" }
+
+    it "renders the add action and the list heading with a count", :aggregate_failures do
+      expect(rendered_component).to have_css("[data-test-selector='admin-document-types-subheader']")
+      expect(rendered_component).to have_link(I18n.t("documents.button_add_type"))
+      expect(rendered_component).to have_css("h3", text: DocumentType.model_name.human(count: :other))
+      expect(rendered_component).to have_css(".Counter", text: "2")
+    end
+
+    it_behaves_like "rendering Box", row_count: 2
+    it_behaves_like "a reorderable Border Box List"
+  end
+
+  context "without document types" do
+    it "renders the existing empty result text" do
+      expect(rendered_component).to have_text(I18n.t(:no_results_title_text))
+    end
+
+    it_behaves_like "rendering Box", row_count: 1
+    it_behaves_like "rendering Blank Slate", heading: I18n.t(:no_results_title_text)
+  end
+end