Add component to show submission review state #1071
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Different components show a submission review state. To do so, they use the
reviewStateIcon()
function of theuseReviewState()
composable along with thereviewState.*
messages in en.json5. However, one piece of functionality that isn't shared is the review state color: each component that shows a review state manages the color in its own way. This PR changes that by introducing a new component namedSubmissionReviewState
. It will show the icon and message associated with the review state, and it will also add the review state color.I'm making this change with getodk/central#670 in mind. The hover card for a submission will show the submission's review state, and I didn't want to copy the review state colors to yet another component.
What has been done to verify that this works as intended?
I updated tests. I also checked locally in the browser most of the components where I introduced
SubmissionReviewState
. If any issues are found during regression testing, we can patch those.Why is this the best possible solution? Were any other approaches considered?
I think a component is exactly the right thing for the job, and I'm not sure why I didn't add one sooner. I may have been avoiding adding a component with
SubmissionMetadataRow
in mind. I've been trying to make that component as fast as possible to render, since there can be many submission rows on the page, and I've observed in the past that child components carry a performance penalty. However, in v2025.1, we'll be adding pagination to the submissions table, which should alleviate performance concerns. I've noticed before that one surprising performance bottleneck in components is Vue I18n. However, the new component doesn't have its own i18n messages — it only uses global messages from en.json5 — which should help.Before submitting this PR, please make sure you have:
npm run test
andnpm run lint
and confirmed all checks still pass OR confirm CircleCI build passes