Merge pull request #265 from opf/fix/console-erro

Safeguard JS targets for CollapsibleHeaders

Author: mrmir

.changeset/lazy-needles-float.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Safeguard CollapsibleHeader class toggling

app/components/primer/open_project/border_box/collapsible_header.rb

@@ -3,9 +3,8 @@
 module Primer
   module OpenProject
     module BorderBox
-      # Add a general description of component here
-      # Add additional usage considerations or best practices that may aid the user to use the component correctly.
-      # @accessibility Add any accessibility considerations
+      # A component to be used inside Primer::Beta::BorderBox.
+      # It will toggle the visibility of the complete Box body
       class CollapsibleHeader < Primer::Component
         status :open_project
 

app/components/primer/open_project/border_box/collapsible_header.ts

@@ -4,7 +4,7 @@ import {attr, controller, target} from '@github/catalyst'
 class CollapsibleHeaderElement extends HTMLElement {
   @target arrowDown: HTMLElement
   @target arrowUp: HTMLElement
-  @target description: HTMLElement
+  @target description: HTMLElement | undefined
 
   @attr collapsed: string
   private _collapsed: boolean
@@ -33,23 +33,19 @@ class CollapsibleHeaderElement extends HTMLElement {
   }
 
   private hideAll() {
-    this.arrowDown.classList.remove('d-none')
-    this.arrowUp.classList.add('d-none')
+    this.arrowDown?.classList.remove('d-none')
+    this.arrowUp?.classList.add('d-none')
 
-    if (this.description !== undefined) {
-      this.description.classList.add('d-none')
-    }
+    this.description?.classList.add('d-none')
 
     this.classList.add('CollapsibleHeader--collapsed')
   }
 
   private expandAll() {
-    this.arrowDown.classList.add('d-none')
-    this.arrowUp.classList.remove('d-none')
+    this.arrowDown?.classList.add('d-none')
+    this.arrowUp?.classList.remove('d-none')
 
-    if (this.description !== undefined) {
-      this.description.classList.remove('d-none')
-    }
+    this.description?.classList.remove('d-none')
 
     this.classList.remove('CollapsibleHeader--collapsed')
   }

test/components/primer/open_project/border_box/collapsible_header_test.rb

@@ -23,31 +23,31 @@ def test_does_not_render_without_title_and_box
 
   def test_does_not_render_with_empty_title
     err = assert_raises ArgumentError do
-      render_inline(render_inline(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "", box: "Some component")))
+      render_inline(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "", box: "Some component"))
     end
 
     assert_equal "Title must be present", err.message
   end
 
   def test_does_not_render_without_valid_box
     err = assert_raises ArgumentError do
-      render_inline(render_inline(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "Test title", box: "Some component")))
+      render_inline(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "Test title", box: "Some component"))
     end
 
     assert_equal "This component must be called inside the header of a `Primer::Beta::BorderBox`", err.message
   end
 
   def test_does_not_render_with_empty_description
     err = assert_raises ArgumentError do
-      render_inline(render_inline(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "Test title", box: "Some component", description: "")))
+      render_inline(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "Test title", box: "Some component", description: ""))
     end
 
     assert_equal "Description cannot be a blank string", err.message
   end
 
   def test_does_not_render_with_empty_count
     err = assert_raises ArgumentError do
-      render_inline(render_inline(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "Test title", box: "Some component", count: "")))
+      render_inline(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "Test title", box: "Some component", count: ""))
     end
 
     assert_equal "Count cannot be a blank string", err.message