feat(inquirer-gui): 37088 output tab link - #1
Open
korotkovao wants to merge 14 commits into
Open
Conversation
Add 'View Details in the Output Tab' link below error text when it overflows two lines. The link is driven by guiOptions.showOutputTabLink.command and uses a ResizeObserver to show/hide based on actual DOM overflow (scrollHeight vs clientHeight). Inverted underline: underlined at rest, no underline on hover. #37088
…ab link feature (#37088)
Revert changes not related to the output tab link feature: - Restore original img tag for validation link icons (was changed to v-html/span) - Remove decodeSvgIcon() method - Remove shouldShowValidationLink() extraction (back to inline v-if) - Restore original CSS for .question-hint, .question-link, .validation-link-icon Only output tab link additions remain in Form.vue.
…upport - Move showOutputTabLink check from guiOptions to top-level question property - Support 'validationMessageOverflow' mode and function binding mode - Add updateShowOutputTabLink method for RPC-based function evaluation - Make OutputTabLink and additionalMessages render independently - Add ResizeObserver mock for jsdom test environment
Reorder the OutputTabLink component to render after the additional messages section instead of before it, ensuring the 'View details in the output tab' link always appears at the end of all messages.
- Form.vue: only trigger error-text overflow recalculation when container width changes, not on height changes (which occur when dropdown opens) - QuestionList.vue: use requestAnimationFrame instead of setTimeout for the Vuetify dialog menu position fix (vuetifyjs/vuetify#17126)
…k via linkMessage prop
…^3.4.9 not published)
- Fix shouldShowOutputTabLink for validationMessageOverflow mode to respect the same shouldShowValidationMessage parity (hint + not-dirty guard), so the link is never rendered without a visible error message - Initialize _showOutputTabLink and _outputTabLinkMessage in questions watcher 1st pass to prevent stale values on splice-based reactivity updates - Add tests for OutputTabLink.vue, shouldShowOutputTabLink(), _updateErrorTextOverflow(), and updateShowOutputTabLink()
Point 2 - CSS side effect: add explicit -webkit-line-clamp: 2 to .error-validation-text inside .validation-messages so the overflow detection in validationMessageOverflow mode is self-contained and does not silently rely on the clamp inherited via @extend .messages-text. Point 3 - ordering comment: document in created() that _errorTextRefs is initialized before mounted() but remains empty until Vue function refs fire post-render, so any early call to _updateErrorTextOverflow() exits harmlessly with an empty map.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
Adds an
OutputTabLinkcomponent toForm.vuethat renders a clickable link below aquestion's validation error message when the error text is truncated to 2 lines. The error message is CSS-clamped to 2 lines, and whether it overflows depends on the container width — the link appears or disappears dynamically as the wizard panel is resized. This allows users to open the output tab to see the full error message.
Closes
tool-suiteissue #37088Changes
New component:
OutputTabLink.vueshow-output-tab-linkwhen clickedlinkMessageprop for a customizable label (falls back to"View details in the output tab.")Form.vueOutputTabLinkafter the additional messages sectionquestion.showOutputTabLink:'validationMessageOverflow'— link appears automatically when the error text is clamped to 2 lines and overflowsfunction— consumer-controlled viaupdateShowOutputTabLink()RPC callback, returningboolean | { show: boolean; linkMessage?: string }ResizeObserveron the form container, re-evaluating on width changes only (avoids false triggers from dropdown open/close)_registerErrorTextReftracks error text<span>DOM refs; temporarily removes-webkit-line-clampto compare full scroll height vs clamped heightsetInvalid/setLinkMsgand when answers changeQuestionList.vuesetTimeout(..., 0)withrequestAnimationFrame(...)for the Vuetify dropdown resize workaroundTest setup
ResizeObserverpolyfill for jsdom (__tests__/setup.js)Testing