Fix embedded section controls and table word wrapping

.github/workflows/ci.yml

@@ -135,12 +135,8 @@ jobs:
           name: psd1
           path: .
 
-      - name: Install PowerShell
-        run: |
-          curl https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -
-          curl https://packages.microsoft.com/config/ubuntu/20.04/prod.list | sudo tee /etc/apt/sources.list.d/microsoft.list
-          sudo apt-get update
-          sudo apt-get install -y powershell
+      - name: Verify runner PowerShell
+        run: pwsh --version
 
       - name: Install PowerShell modules
         run: |

Build/Build-Module.ps1

@@ -93,7 +93,7 @@ Build-Module -ModuleName 'PSWriteHTML' {
         SignModule                        = $SignModule
         MergeModuleOnBuild                = $true
         MergeFunctionsFromApprovedModules = $true
-        CertificateThumbprint             = '483292C9E317AA13B07BB7A96AE9D1A5ED9E7703'
+        CertificateThumbprint             = '92E95FB58EFFA6A4A75E77A33CDD6BFE6DD30F1A'
         RefreshPSD1Only                   = $env:RefreshPSD1Only -eq 'true'
     }
 

CHANGELOG.MD

@@ -4,6 +4,11 @@
 Unfortunetly some code is very old, some code doesn't serve it's purpose anymore, and requires heavy changes that may have an impact on already deployed code.
 Please make sure to read changes before updating, as we're undergoing some breaking changes.
 
+## Unreleased
+
+- Keep section Show/Hide controls working in embedded reports with nonce-based script policies, for Online and offline reports.
+- Apply table word breaking through valid CSS and allow the first column to wrap when WordBreak is selected.
+
 ## 1.36.0
 ### What's new
 - Improvements to null handlings in New-HTMLTable

PSWriteHTML.psd1

@@ -22,8 +22,7 @@
     RequiredModules      = @(@{
             Guid            = 'ee272aa8-baaa-4edf-9f45-b6d6f7d844fe'
             ModuleName      = 'PSSharedGoods'
-            ModuleVersion   = '0.0.312'
+            ModuleVersion   = '0.0.313'
         })
     RootModule           = 'PSWriteHTML.psm1'
-    ScriptsToProcess     = @()
 }

Private/Parameters.Configuration.ps1

@@ -1384,12 +1384,8 @@
             HideSection                 = [ordered] @{
                 Comment      = 'Hide Section Code'
                 Internal     = $true
-                Header       = @{
-                    JSLink = "$($ConfigurationURL)/JS/hideSection.min.js"
-                    JS     = "$PSScriptRoot\..\Resources\JS\hideSection.js"
-                }
                 HeaderAlways = [ordered] @{
-                    #JS        = "$PSScriptRoot\..\Resources\JS\hideSection.js"
+                    JS        = "$PSScriptRoot\..\Resources\JS\HideSection.js"
                     CssInline = [ordered] @{
                         '.sectionHide' = @{ # fixes problem with hiding section that are collapsing left/right
                             'width'     = 'auto'

Public/New-HTMLSection.ps1

@@ -29,6 +29,7 @@ function New-HTMLSection {
 
     .PARAMETER CanCollapse
     Indicates whether the section can be collapsed.
+    Show and Hide controls use script event listeners so they work in nonce-based embedded reports.
 
     .PARAMETER IsHidden
     Indicates whether the section is initially hidden.
@@ -316,8 +317,8 @@ function New-HTMLSection {
                 New-HTMLTag -Tag 'div' -Attributes @{ class = $StyleSheetsConfiguration.SectionText } {
                     New-HTMLAnchor -Name $HeaderText -Text "$HeaderText " -Style $HeaderStyle
                     " " # this adds hard space
-                    New-HTMLAnchor -Id "show_$AnchorName" -Href 'javascript:void(0)' -OnClick "show('$AnchorName'); " -Style $ShowStyle -Text '(Show)'
-                    New-HTMLAnchor -Id "hide_$AnchorName" -Href 'javascript:void(0)' -OnClick "hide('$AnchorName'); " -Style $HideStyle -Text '(Hide)'
+                    New-HTMLTag -Tag 'a' -Attributes @{ id = "show_$AnchorName"; href = 'javascript:void(0)'; 'data-pswritehtml-section' = $AnchorName; 'data-pswritehtml-section-action' = 'show'; 'aria-controls' = $AnchorName; style = $ShowStyle } { '(Show)' }
+                    New-HTMLTag -Tag 'a' -Attributes @{ id = "hide_$AnchorName"; href = 'javascript:void(0)'; 'data-pswritehtml-section' = $AnchorName; 'data-pswritehtml-section-action' = 'hide'; 'aria-controls' = $AnchorName; style = $HideStyle } { '(Hide)' }
                 }
             }
             New-HTMLTag -Tag 'div' -Attributes @{ name = $AnchorName; class = $ClassName; id = $AnchorName; style = $HiddenDivStyle } -Value {
@@ -334,4 +335,4 @@ function New-HTMLSection {
 
 Register-ArgumentCompleter -CommandName New-HTMLSection -ParameterName HeaderTextColor -ScriptBlock $Script:ScriptBlockColors
 Register-ArgumentCompleter -CommandName New-HTMLSection -ParameterName HeaderBackGroundColor -ScriptBlock $Script:ScriptBlockColors
-Register-ArgumentCompleter -CommandName New-HTMLSection -ParameterName BackgroundColor -ScriptBlock $Script:ScriptBlockColors
+Register-ArgumentCompleter -CommandName New-HTMLSection -ParameterName BackgroundColor -ScriptBlock $Script:ScriptBlockColors

Public/New-HTMLTable.ps1

@@ -193,7 +193,7 @@
     Enables regular expression search.
 
     .PARAMETER WordBreak
-    Enables word breaking in the table.
+    Wraps cell text using the selected word-breaking style, including the first column.
 
     .PARAMETER AutoSize
     Automatically sizes the table.
@@ -1527,7 +1527,10 @@
 
         if ($WordBreak -ne 'normal') {
             New-HTMLTag -Tag 'style' {
-                ConvertTo-LimitedCSS -ClassName 'td' -ID $TableAttributes.id -Attributes @{ 'word-break' = $WordBreak } -Group
+                ConvertTo-LimitedCSS -ClassName 'td' -ID $TableAttributes.id -Attributes @{
+                    'word-break' = $WordBreak
+                    'white-space' = 'normal'
+                }
             }
         }
 

Resources/JS/HideSection.js

@@ -1,3 +1,22 @@
+(function () {
+    // Inline event attributes are blocked when a report is hosted with a script nonce.
+    // Delegate events so controls also work when sections are added after this script loads.
+    if (document.pswritehtmlSectionTogglesBound) return;
+    document.pswritehtmlSectionTogglesBound = true;
+    document.addEventListener('click', function (event) {
+        var target = event.target;
+        if (target && target.nodeType !== 1) target = target.parentElement;
+        var control = target && target.closest ? target.closest('[data-pswritehtml-section-action]') : null;
+        if (!control) return;
+        var section = control.getAttribute('data-pswritehtml-section');
+        var action = control.getAttribute('data-pswritehtml-section-action');
+        if (!section || !document.getElementById(section) || (action !== 'show' && action !== 'hide')) return;
+        event.preventDefault();
+        if (action === 'show') show(section);
+        else hide(section);
+    });
+})();
+
 function show(obj) {
     document.getElementById(obj).style.display = 'block';
     document.getElementById("hide_" + obj).style.display = '';

Tests/New-HTMLIssueFixes.Tests.ps1

@@ -3,6 +3,35 @@ BeforeAll {
 }
 
 Describe 'Issue-oriented HTML fixes' {
+    It 'emits usable wrapping CSS for long values in the first table column' {
+        $filePath = Join-Path $TestDrive 'word-break.html'
+        New-HTML -FilePath $filePath -Online {
+            New-HTMLTable -DataTable @([pscustomobject] @{ Device = 'LongDeviceNameWithoutSpaces'; State = 'Review' }) -DataTableID 'wrapTable' -WordBreak break-word
+        }
+        $content = Get-Content -LiteralPath $filePath -Raw
+        $content | Should -Not -Match '<style>\s*<style>'
+        $rule = [regex]::Match($content, '(?s)#wrapTable td\s*\{([^}]+)\}').Groups[1].Value
+        $rule | Should -Match 'word-break:\s*break-word'
+        $rule | Should -Match 'white-space:\s*normal'
+    }
+
+    It 'renders section controls without inline event handlers for nonce-based viewers (Online=<Online>)' -TestCases @(@{ Online = $false }, @{ Online = $true }) {
+        param($Online)
+        $FilePath = Join-Path $TestDrive 'section-events.html'
+        New-HTML -FilePath $FilePath -Online:$Online {
+            New-HTMLSection -HeaderText 'Closed section' -CanCollapse -Collapsed { New-HTMLText -Text 'Closed content' }
+            New-HTMLSection -HeaderText 'Open section' -CanCollapse { New-HTMLText -Text 'Open content' }
+        }
+        $content = Get-Content -LiteralPath $FilePath -Raw
+        $content | Should -Match 'data-pswritehtml-section-action="show"'
+        $content | Should -Match 'data-pswritehtml-section-action="hide"'
+        $content | Should -Not -Match 'onclick="(?:show|hide)\('
+        $content | Should -Match 'document.addEventListener\(''click'''
+        $content | Should -Not -Match 'src="[^"]*/hideSection.min.js'
+        $content | Should -Match 'Closed content'
+        $content | Should -Match 'Open content'
+    }
+
     It 'renders table cell alignment, header borders, custom footer, column widths, row grouping hide, and SearchBuilder button language' {
         $FilePath = Join-Path $TestDrive 'table-issue-fixes.html'
         $Data = @(