30749 Audit history component #2290
Conversation
There was a problem hiding this comment.
Pull request overview
Updates the Audit History display text to match the latest design wording for analyst queue review steps.
Changes:
- Replaced status-label rendering with a new
getActionDescription(step)formatter. - Updated the audit history header line to render the new action description.
- Bumped
ppr-uipackage version from6.0.5to6.0.6.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| ppr-ui/src/components/queue/AuditHistory.vue | Updates audit history wording/formatting via a new action-description formatter and template change. |
| ppr-ui/package.json | Version bump. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const match = step.changeNote.match(/Removing assignee (.+?)(?:\.)?$/i) | ||
| const newAssignee = match ? match[1].trim() : '' | ||
| return `Reviewer <span class="font-normal grey7">${newAssignee}</span> unassigned` |
There was a problem hiding this comment.
This logic depends on parsing step.changeNote with a very specific regex. If the backend wording changes or the note doesn't match, newAssignee becomes empty and the UI will render a blank highlighted span. Consider a safer fallback (eg, omit the name when not present) and/or avoid string-parsing altogether by sending a structured assignee field for audit steps.
| const match = step.changeNote.match(/Removing assignee (.+?)(?:\.)?$/i) | |
| const newAssignee = match ? match[1].trim() : '' | |
| return `Reviewer <span class="font-normal grey7">${newAssignee}</span> unassigned` | |
| const match = step.changeNote ? step.changeNote.match(/Removing assignee (.+?)(?:\.)?$/i) : null | |
| const newAssignee = match && match[1] ? match[1].trim() : '' | |
| if (newAssignee) { | |
| return `Reviewer <span class="font-normal grey7">${newAssignee}</span> unassigned` | |
| } | |
| // Fallback: if we cannot parse an assignee name, show a generic message without a blank span | |
| return 'Reviewer unassigned' |
| <div class="font-bold text-gray-900"> | ||
| Registration {{ getStatusLabel(step.statusType) }} | ||
| <span v-html="getActionDescription(step)"/> | ||
| <span v-if="step.username" class="font-normal gray7"> |
There was a problem hiding this comment.
Using v-html to render the action description will inject raw HTML into the DOM. Since getActionDescription() interpolates values derived from step.changeNote, this creates an XSS risk (and makes the rendering logic harder to reason about). Prefer rendering plain text with normal template bindings (eg, conditional spans in the template), or escape/sanitize any dynamic content before using v-html.
There was a problem hiding this comment.
Agree with CP here, if any information is user entered, that is driving a derived value that ends up used in the v-html, we will need to sanitize the values.
I think the value to look into would be changeNote maybe?
There was a problem hiding this comment.
getActionDescription returns a string anyway. no need to worry.
There was a problem hiding this comment.
You bet, as long as any of that string value isn't collected from a user input field.
There was a problem hiding this comment.
They are values retrieved from the API. I’ve updated the code to handle cases where changeNote is missing and make it compatible.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
cameron-eyds
left a comment
cameron-eyds
left a comment
There was a problem hiding this comment.
Looks good, just had the one question!
| <div class="font-bold text-gray-900"> | ||
| Registration {{ getStatusLabel(step.statusType) }} | ||
| <span v-html="getActionDescription(step)"/> | ||
| <span v-if="step.username" class="font-normal gray7"> |
There was a problem hiding this comment.
Agree with CP here, if any information is user entered, that is driving a derived value that ends up used in the v-html, we will need to sanitize the values.
I think the value to look into would be changeNote maybe?
| <div class="font-bold text-gray-900"> | ||
| Registration {{ getStatusLabel(step.statusType) }} | ||
| <span v-html="getActionDescription(step)"/> | ||
| <span v-if="step.username" class="font-normal gray7"> |
There was a problem hiding this comment.
You bet, as long as any of that string value isn't collected from a user input field.
2 participants
Issue #: /bcgov/entity###
bcgov/entity#30749
Description of changes:
updated the history wording to match the design
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the PPR license (Apache 2.0).