[52127] project list truncate long text fields and disable expand act…

…ion (opf#14838)

* remove unnecessary code

* remove column for collapsing in table

* truncate project status description and add dialog to the end of it

* change dialog title for project status description

* change dialog title for custom fields of long text

* add dialog and truncation for project description

* add a test for it

* change element for long text and add divider for modal header

* show the expand link for the long text with table

* move styes from table sass file to projects list style sheet

* change class names

* Update _table.sass

* show expand button when there is a macro in a long text field

* change size of modal to large

* remove divider of modal header

* create a separate component to be used for attribute dialog

* create a new stimulus controller for cell changes

* create a new component for showing a long text in a cell

* remove unnecessary classes

* use attribute component to show long text value on list

* check if the attribute value is multi type then show a specific text for it

* delete project controller

* add more test cases

* remove margin from text element

* remove duplicated code

* remove gear icon from table header

* use targetConnected callback instead of connect

app/components/_index.sass

@@ -1,3 +1,4 @@
 @import "work_packages/share/modal_body_component"
 @import "work_packages/share/invite_user_form_component"
+@import "open_project/common/attribute_component"
 @import "filters_component"

app/components/open_project/common/attribute_component.html.erb

@@ -0,0 +1,17 @@
+<div
+  data-controller="attribute"
+  data-application-target="dynamic"
+  class="op-long-text-attribute">
+  <p 
+    data-attribute-target="descriptionText"
+    class="op-long-text-attribute--text">
+    <%= @attr_value %>
+  </p>
+
+  <%= render(Primer::Alpha::Dialog.new(id: @id, title: @name, size: :large)) do |component|
+    component.with_show_button(scheme: :link, display: (is_multi_type(@description) ? :block : :none), data: { 'attribute-target': 'expandButton' }) { I18n.t('js.label_expand') }
+    component.with_body(mt: 2) { helpers.format_text(@description) }
+    component.with_header
+    end
+  %>
+</div>

app/components/open_project/common/attribute_component.rb

@@ -0,0 +1,50 @@
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) 2012-2024 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 'nokogiri'
+
+module OpenProject
+  module Common
+    class AttributeComponent < Primer::Component
+
+      def initialize(id, name, description, **args)
+        super
+        @id = id
+        @name = name
+        @description = description
+        @attr_value = is_multi_type(description) ? I18n.t('js.label_preview_not_available') : Nokogiri::HTML(description).text
+        @system_arguments = args
+      end
+
+      private
+
+      def is_multi_type(text)
+        text.to_s.include?('figure') || text.to_s.include?('macro')
+      end
+    end
+  end
+end

app/components/open_project/common/attribute_component.sass

@@ -0,0 +1,6 @@
+.op-long-text-attribute
+  display: flex
+  align-items: center
+  &--text
+    @include text-shortener
+    margin: 0

app/components/projects/row_component.html.erb

@@ -30,8 +30,6 @@ See COPYRIGHT and LICENSE files for more details.
 <tr
   <%= "id=\"#{row_css_id}\"".html_safe if row_css_id %>
   <%= "class=\"#{row_css_class}\"".html_safe if row_css_class %>
-  data-project-target="projectRow"
-  data-project-id="<%= project.id %>"
 >
   <% columns.each do |column| %>
     <td class="<%= column_css_class(column) %>">
@@ -54,31 +52,5 @@ See COPYRIGHT and LICENSE files for more details.
         </li>
       </ul>
     <% end %>
-    <% unless project.description.blank? %>
-      <a class="icon collapse icon-arrow-up1 projects-table--description-toggle"
-         href
-         title="<%= t('label_project_hide_details') %>"
-         data-project-target="descriptionToggle"
-         data-action="click->project#toggleDescription"
-         data-project-project-id-param="<%= project.id %>"></a>
-      <a class="icon expand icon-arrow-down1 projects-table--description-toggle"
-         href
-         title="<%= t('label_project_show_details') %>"
-         data-project-target="descriptionToggle"
-         data-action="click->project#toggleDescription"
-         data-project-project-id-param="<%= project.id %>"></a>
-    <% end %>
   </td>
-</tr>
-<% if User.current.allowed_in_project?(:view_project, project) && project.description.present? %>
-  <tr class="project-description <%= project_css_classes %> <%= row_css_level_classes %> <%= params[:expand] == 'all' ? '-expanded' : '' %>"
-      data-project-target="descriptionRow"
-      data-project-id="<%= project.id %>">
-    <td></td>
-    <td colspan="<%= columns.length%>" class="project--hierarchy">
-      <div class="description-container wiki">
-        <%= helpers.format_text(helpers.short_project_description(project), project: project) %>
-      </div>
-    </td>
-  </tr>
-<% end %>
+</tr>

app/components/projects/row_component.rb

@@ -27,7 +27,6 @@
 #
 # See COPYRIGHT and LICENSE files for more details.
 #++
-
 module Projects
   class RowComponent < ::RowComponent
     def project
@@ -57,8 +56,8 @@ def custom_field_column(column)
       cf = custom_field(column)
       custom_value = project.formatted_custom_value_for(cf)
 
-      if cf.field_format == 'text'
-        custom_value.html_safe # rubocop:disable Rails/OutputSafety
+      if cf.field_format == 'text' && custom_value.present?
+        render OpenProject::Common::AttributeComponent.new("dialog-#{project.id}-cf-#{cf.id}", cf.name, custom_value.html_safe) # rubocop:disable Rails/OutputSafety
       elsif custom_value.is_a?(Array)
         safe_join(Array(custom_value).compact_blank, ', ')
       else
@@ -112,8 +111,15 @@ def project_status
     def status_explanation
       return nil unless user_can_view_project?
 
-      if project.status_explanation
-        content_tag :div, helpers.format_text(project.status_explanation), class: 'wiki'
+      if project.status_explanation.present? && project.status_explanation
+        render OpenProject::Common::AttributeComponent.new("dialog-#{project.id}-status-explanation", I18n.t('activerecord.attributes.project.status_explanation'), project.status_explanation)
+      end
+    end
+
+    def description
+      return nil unless user_can_view_project?
+      if project.description.present?
+        render OpenProject::Common::AttributeComponent.new("dialog-#{project.id}-description", I18n.t('activerecord.attributes.project.description'), project.description)
       end
     end
 
@@ -126,10 +132,6 @@ def row_css_class
       classes << project_css_classes
       classes << row_css_level_classes
 
-      if params[:expand] == 'all' && project.description.present?
-        classes << ' -no-highlighting -expanded'
-      end
-
       classes.join(" ")
     end
 
@@ -163,11 +165,11 @@ def additional_css_class(column)
       case column
       when :name
         "project--hierarchy #{project.archived? ? 'archived' : ''}"
-      when :status_explanation
-        "-no-ellipsis"
+      when :status_explanation, :description
+        "project-long-text-container"
       when /\Acf_/
         cf = custom_field(column)
-        formattable = cf.field_format == 'text' ? ' -no-ellipsis' : ''
+        formattable = cf.field_format == 'text' ? ' project-long-text-container' : ''
         "format-#{cf.field_format}#{formattable}"
       end
     end

app/components/projects/table_component.html.erb

@@ -76,17 +76,6 @@ See COPYRIGHT and LICENSE files for more details.
           <% end %>
           <th class="-right">
             <div class="generic-table--header-outer">
-              <div class="generic-table--header"
-                   data-controller="params-from-query"
-                   data-application-target="dynamic"
-                   data-params-from-query-all-anchors-value="true"
-                   data-params-from-query-allowed-value='["query_id", "per_page", "page", "sortBy", "filters"]'>
-                <% if params[:expand] == 'all' %>
-                  <%= link_to t(:button_collapse_all) %>
-                <% else %>
-                  <%= link_to t(:button_expand_all), { params: { expand: 'all' } } %>
-                <% end %>
-              </div>
             </div>
           </th>
         </tr>

app/components/projects/table_component.rb

@@ -97,6 +97,7 @@ def all_columns
         [:project_status, { caption: Project.human_attribute_name(:status) }],
         [:status_explanation, { caption: Project.human_attribute_name(:status_explanation) }],
         [:public, { caption: Project.human_attribute_name(:public) }],
+        [:description, { caption: Project.human_attribute_name(:description) }],
         *custom_field_columns,
         *admin_columns
       ]

app/views/projects/index.html.erb

@@ -54,13 +54,10 @@ See COPYRIGHT and LICENSE files for more details.
   end
 %>
 
-<div data-controller="project"
-     data-application-target="dynamic">
-  <%= render Projects::TableComponent.new(
-    query:,
-    current_user: current_user,
-    params:) %>
-</div>
+<%= render Projects::TableComponent.new(
+  query:,
+  current_user: current_user,
+  params:) %>
 
 <%= render Projects::StorageInformationComponent.new(
   current_user: current_user) %>

config/locales/en.yml

@@ -637,6 +637,7 @@ en:
           false: "private"
         queries: "Queries"
         status_code: "Project status"
+        description: "Description"
         status_explanation: "Project status description"
         status_codes:
           not_started: "Not started"

config/locales/js-en.yml

@@ -460,6 +460,7 @@ en:
     label_email: "Email"
     label_equals: "is"
     label_expand: "Expand"
+    label_preview_not_available: "Preview not available"
     label_expanded: "expanded"
     label_expand_all: "Expand all"
     label_expand_project_menu: "Expand project menu"

frontend/src/global_styles/content/_projects_list.sass

@@ -79,21 +79,7 @@ $project-table--description-indention: 9px
       span.archived-label
         text-transform: uppercase
 
-  .project-description
-    display: none
-    td
-      padding-top: 0
-      padding-bottom: 1rem
-      p
-        font-size: inherit
-        padding-left: 0
-        max-width: 800px // improve readability
-      // Hide everything else than text for now to avoid a too large table
-      pre
-        display: none !important
-
-  .project-description.-expanded
-    display: table-row
+
 
   td.name
     @include text-shortener

frontend/src/stimulus/controllers/dynamic/attribute.controller.ts

@@ -0,0 +1,52 @@
+/*
+ * -- copyright
+ * OpenProject is an open source project management software.
+ * Copyright (C) 2023 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.
+ * ++
+ *
+ */
+
+import { Controller } from '@hotwired/stimulus';
+
+export default class AttributeController extends Controller {
+  static targets = [
+    'descriptionText',
+    'expandButton',
+  ];
+
+  declare readonly descriptionTextTarget:HTMLParagraphElement;
+  declare readonly expandButtonTarget:HTMLButtonElement;
+
+  descriptionTextTargetConnected(element:HTMLParagraphElement) {
+    if (this.isEllipssed(element)) {
+      this.expandButtonTarget.classList.remove('d-none');
+    }
+  }
+
+  isEllipssed(e:HTMLElement) {
+    return (e.offsetWidth < e.scrollWidth);
+  }
+}