Adapt to size changes when displaying tooltips
What does this MR do and why?
Adapt to size changes when displaying tooltips
This change updates the "tooltip-on-truncate" component to respond to changes in the component size.
Previously the component was only detected as overflowing once and didn't respond to changes in its size.
Changelog: changed
Update specs
Most specs have been updated to use async/await
syntax.
How does it work?
We leverage the v-gl-resize-observer
directive to respond to changes in size that could lead to truncations in content. This detection is denounced to 500ms
, so the tooltip is not recalculated frequently.
As an additional improvement, the component is not re-rendered using v-if
when the tooltip toggles or text changes, instead the tooltip is disabled via the disabled
flag provided by the v-gl-tooltip
directive.
Screenshots or screen recordings
How to set up and validate locally
TooltipOnTruncate
:
An an example, we can take the runners' admin page, in which the IP and runner version use - Visit the runners' admin page e.g. http://gdk.test:3000/admin/runners
- Display a runner with a long version and/or IP
- Reducing the size of your screen my help
The following diff will allow you to test with mock values of any length:
diff --git a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
index 3edb658eaf5..afd707ce44d 100644
--- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
@@ -88,8 +88,18 @@ export default {
},
update(data) {
const { runners } = data;
+
+ const items =
+ runners?.nodes.map(({ ipAddress, version, ...runner }) => {
+ return {
+ ipAddress: '2a02:a210:2147:00:459d:3742:74c8:ca',
+ version: '14.5.0-nightly-beta-1.000.000.000',
+ ...runner,
+ };
+ }) || [];
+
return {
- items: runners?.nodes || [],
+ items,
pageInfo: runners?.pageInfo || {},
};
},
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #343977 (closed)