Merge pull request #14937 from opf/feature/53203-optimize-column-trun…

…cation-for-text-that-is-not-previewable Feature/53203 optimize column truncation for text that is not previewable
opf · Mar 6, 2024 · ff50b27 · ff50b27
2 parents 29b1cc0 + 4bdba9a
commit ff50b27
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 17 deletions.
diff --git a/app/components/open_project/common/attribute_component.html.erb b/app/components/open_project/common/attribute_component.html.erb
@@ -2,16 +2,25 @@
   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
+  <%= render(
+        Primer::Beta::Text.new(tag: :div,
+                               classes: ['op-long-text-attribute--text', PARAGRAPH_CSS_CLASS],
+                               color: text_color,
+                               data: {
+                                 'attribute-target': "descriptionText"
+                               })) { short_text } %>
+
+  <%= render(
+        Primer::Alpha::Dialog.new(id: id,
+                                  title: name,
+                                  size: :large)) do |component|
+      component.with_show_button(scheme: :link,
+                                 display: display_expand_button_value,
+                                 ml: 1,
+                                 data: { 'attribute-target': 'expandButton' }) { I18n.t('js.label_expand') }
+      component.with_body(mt: 2) { full_text }
+      component.with_header(variant: :large)
     end
   %>
-</div>
+</div>
diff --git a/app/components/open_project/common/attribute_component.rb b/app/components/open_project/common/attribute_component.rb
@@ -30,19 +30,57 @@
 module OpenProject
   module Common
     class AttributeComponent < Primer::Component
+      attr_reader :id,
+                  :name,
+                  :description
+
+      PARAGRAPH_CSS_CLASS = 'op-uc-p'.freeze
+
       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
 
+      def short_text
+        if multi_type?
+          I18n.t(:label_preview_not_available)
+        else
+          first_paragraph
+        end
+      end
+
+      def full_text
+        @full_text ||= helpers.format_text(description)
+      end
+
+      def display_expand_button_value
+        multi_type? || text_ast.xpath('html/body').children.length > 1 ? :block : :none
+      end
+
+      def text_color
+        :muted if multi_type?
+      end
+
       private
 
-      def is_multi_type(text)
-        text.to_s.include?('figure') || text.to_s.include?('macro')
+      def first_paragraph
+        @first_paragraph ||= text_ast
+                             .xpath('html/body')
+                             .children
+                             .first
+                             .inner_html
+                             .html_safe # rubocop:disable Rails/OutputSafety
+      end
+
+      def text_ast
+        @text_ast ||= Nokogiri::HTML(full_text)
+      end
+
+      def multi_type?
+        first_paragraph.include?('figure') || first_paragraph.include?('macro')
       end
     end
   end

diff --git a/app/components/open_project/common/attribute_component.sass b/app/components/open_project/common/attribute_component.sass
@@ -4,3 +4,4 @@
   &--text
     @include text-shortener
     margin: 0
+    flex-grow: 1
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -2142,6 +2142,7 @@ en:
   label_precedes: "precedes"
   label_preferences: "Preferences"
   label_preview: "Preview"
+  label_preview_not_available: "(Preview not available)"
   label_previous: "Previous"
   label_previous_week: "Previous week"
   label_principal_invite_via_email: " or invite new users via email"

diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml
@@ -459,7 +459,6 @@ 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"

diff --git a/lookbook/previews/open_project/common/attribute_component_preview.rb b/lookbook/previews/open_project/common/attribute_component_preview.rb
@@ -4,9 +4,11 @@ module Common
     class AttributeComponentPreview < Lookbook::Preview
       # @param id
       # @param name
-      # @param description
-      def default(id: 'attribute_modal', name: 'Description', description: '<figure>This button is only visible when the description is truncated or it includes a figure or macro</figure>')
-        render OpenProject::Common::AttributeComponent.new(id, name, description)
+      # @param text
+      def default(id: 'attribute_modal',
+                  name: 'Description',
+                  text: '<figure>This button is only visible when the text is truncated or includes a figure or macro.</figure>')
+        render OpenProject::Common::AttributeComponent.new(id, name, text)
       end
     end
   end