AB#135187: ABC - Improve readability of long values in history

[Joselgc1]

Description

Improves record history readability for long values. History values now wrap instead of rendering as single unreadable lines, HTML markup is stripped from displayed values, and changed segments are highlighted for long modified values.

Removed text is highlighted in red with strikethrough, and added text is highlighted in green. This applies to both regular long text values and rich-text/editor values that may be stored as HTML or escaped HTML.

Useful links

• https://dev.azure.com/WHOHQ/EMSSAFE/_workitems/edit/135187/

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Improvement (refactor or addition to existing functionality)

How Has This Been Tested?

• Ran targeted unit tests:
  npx nx test shared --testFile=libs/shared/src/lib/components/record-history/record-history.component.spec.ts

• Ran targeted lint:
  npx nx lint shared --files="libs/shared/src/lib/components/record-history/record-history.component.ts,libs/shared/src/lib/components/record-history/record-history.component.spec.ts"

Manual testing steps:

1. Open Back Office and go to a form records page: /dashboard/forms/:formId/records.
2. Open the history of a record with long text or Editor field changes.
3. Confirm long values wrap correctly in table mode.
4. Confirm raw HTML tags are not shown for HTML or escaped HTML values.
5. Confirm added text is highlighted green.
6. Confirm removed text is highlighted red with strikethrough.

Screenshots

Checklist:

• * I have set myself as assignee of the pull request
• * My code follows the style guidelines of this project
• * Linting does not generate new warnings
• * I have performed a self-review of my own code
• * I have put the ticket for review, adding the oort-frontend team to the list of reviewers
• * I have commented my code, particularly in hard-to-understand areas
• * I have put JSDoc comment in all required places
• * My changes generate no new warnings
• * I have included screenshots describing my changes if relevant
• * I have selected labels in the Pull Request, according to the changes with code brings
• I have made corresponding changes to the documentation ( if required )
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[AntoineRelief]

@Joselgc1
Works better, but a few things to improve:

• if the HTML is quite long, the table becomes unreadable because the height of the row is too big. Maybe find a better way with expand / collapse button?

[Joselgc1]

@AntoineRelief
Improvements added

[AntoineRelief]

@Joselgc1
Nice!
Love the new display indeed