fix(variables-dropdown): fixes/improvements search magic wand for variables #2202

jul-dan · 2025-12-04T16:48:35Z

Summary

Several fixes:

Fix the search field, today it is not clickable
Increase the dropdown to day it is too small
For helm raw yaml override, disable the built_in variables as it will fail in the deployment + add an indication to use an alias

Screenshots / Recordings

Before	After

Testing

Changes tested locally in the relevant Console's pages and Storybooks
yarn test or yarn test -u (if you need to regenerate snapshots)
yarn format
yarn lint

PR Checklist

I followed naming, styling, and TypeScript rules (see .cursor/rules)
I performed a self-review (diff inspected, dead code removed)
I titled the PR using Conventional Commits with a scope when possible (e.g. feat(service): add new Terraform service) - required for semantic-release
I only kept necessary comments, written in English (watch for useless AI comments)
I involved a designer to validate UI changes if I am not a designer
I covered new business logic with tests (unit)
I confirmed CI is green (Codecov red can be accepted)
I reviewed and executed locally any AI-assisted code

…fetch aliases

RemiBonnet · 2025-12-04T16:48:38Z

Qovery can create a Preview Environment for this PR.
To trigger its creation, please post a comment with one of the following command.

Command	Blueprint environment
/qovery preview 28c47145-c8e7-4b9d-8d9e-c65c95b48425	staging
/qovery preview cc1de7de-94e5-40f8-8e45-bc8986d9dfec	storybook
/qovery preview {all\|UUID1,UUID2,...}	To preview multiple environments

This comment has been generated from Qovery AI 🤖.
Below, a word from its wisdom :

There is no better time than now, better future does not exist

codecov · 2025-12-04T17:32:43Z

Codecov Report

❌ Patch coverage is 53.84615% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 49.25%. Comparing base (a635f0f) to head (d07776a).
⚠️ Report is 59 commits behind head on staging.

Files with missing lines	Patch %	Lines
...re/src/lib/dropdown-variable/dropdown-variable.tsx	50.00%	2 Missing and 3 partials ⚠️
.../lib/code-editor-variable/code-editor-variable.tsx	66.66%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           staging    #2202      +/-   ##
===========================================
- Coverage    49.33%   49.25%   -0.09%     
===========================================
  Files         1182      708     -474     
  Lines        20179    15309    -4870     
  Branches      5982     4555    -1427     
===========================================
- Hits          9955     7540    -2415     
+ Misses        8279     6353    -1926     
+ Partials      1945     1416     -529

Flag	Coverage Δ
unittests	`49.25% <53.84%> (-0.09%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

libs/domains/variables/feature/src/lib/dropdown-variable/dropdown-variable.tsx

rmnbrd · 2025-12-05T13:59:33Z

libs/domains/variables/feature/src/lib/dropdown-variable/dropdown-variable.tsx

-          <Popover.Content className="flex max-h-60 w-[248px] min-w-[248px] flex-col p-2">
-            {/* 
+          <Popover.Content
+            container={container}


Not sure to understand why you need to pass down the container here?
Same goes for the other props

@jul-dan Please answer to the comment in your PR 🙏

I asked Claude for explanation:

The container prop is used when DropdownVariable is rendered inside modals (see create-update-variable-modal.tsx:403 and values-override-yaml-modal.tsx:81). Without it, the popover renders to document.body which causes z-index issues where the dropdown appears behind the modal overlay.

The other props like side, align, etc. aren't passed from parents - they're positioning configuration defined within this component.

- Increase dropdown size to 400px width and 240px max-height for better visibility - Fix search field clickability by adding modal container setup with useState/useEffect - Use capture phase event handlers to prevent DropdownMenu interference - Disable built-in variables in Helm value override with informative tooltip - Position info icon 8px from variable name, horizontally aligned - Add proper text truncation to prevent horizontal scrolling - Enable mouse wheel scrolling with onWheel handler 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

- Remove projectId/serviceId props from values-override-yaml-setting - Remove orphaned aliases/overrides handling from sort-variables - These features should be handled on the backend per PR feedback 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

- Reduce event handlers from 10 to 3 essential ones (onKeyDown, onPointerDown, onClick) - Remove unnecessary capture phase and touch event handlers - Maintain same functionality with cleaner code 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

RemiBonnet · 2026-01-06T16:47:40Z

What's the status of this PR ? @jul-dan @rmnbrd
If not necessary we can close it

jul-dan · 2026-01-07T08:22:48Z

What's the status of this PR ? @jul-dan @rmnbrd If not necessary we can close it

I am still waiting for the review. It is necessary because the search is not working today.

RemiBonnet

Thanks @jul-dan !
Please take ownership of your PR, make sure to follow up if it's been waiting for too long, and reply directly on the PR so we keep a clear trace of the discussions 🙏

Here's my feedback:

I've found a simpler way to fix the scroll bug without using useEffect and adding too much code, available here

https://www.loom.com/share/683e0c27e7a64c6293268ff535a17583

Missing full variable name on hover:
Your version

Current version

libs/domains/variables/feature/src/lib/dropdown-variable/dropdown-variable.tsx

RemiBonnet · 2026-01-07T08:30:42Z

libs/domains/variables/feature/src/lib/dropdown-variable/dropdown-variable.tsx

-          <Popover.Content className="flex max-h-60 w-[248px] min-w-[248px] flex-col p-2">
-            {/* 
+          <Popover.Content
+            container={container}


@jul-dan Please answer to the comment in your PR 🙏

...ains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx

- Remove unused projectId prop from DropdownVariable and CodeEditorVariable - Add tooltip to show full variable name on hover when truncated - Replace useEffect pattern with fakeModal option to prevent scroll lock issues - Remove container prop now that fakeModal handles portal positioning - Add fakeModal: true to all variable modal calls for better UX This fixes PR review feedback about AI-generated useEffect patterns and improves the dropdown behavior when used inside modals. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

jul-dan · 2026-01-07T14:04:50Z

Thanks @RemiBonnet I have reviewed all your comments :)

RemiBonnet · 2026-01-07T14:35:10Z

libs/domains/variables/feature/src/lib/dropdown-variable/dropdown-variable.tsx

-            </div>
-            <div className="overflow-y-auto">
+            <DropdownMenu.Label asChild>
+              <div


I don't think it’s necessary to change it, we can keep what we had before it already works
The issue was caused by the missing fakeModal

Keep only your logic with isBuiltIn etc not the DOM changes

RemiBonnet · 2026-01-07T14:37:07Z

libs/domains/variables/feature/src/lib/dropdown-variable/dropdown-variable.tsx

-                            <Truncate text={variable.service_name} truncateLimit={30} />
+                      <div className="flex w-full min-w-0 items-center gap-2">
+                        <Tooltip content={variable.key} side="bottom">
+                          <span className="min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium">


Missing the <Truncate /> composant, this is what I've say in the review before

I did not see any comment on this file 🤔 Or your mean the previous comment? Anyway I have updated it !

I have added the full variable name on hover

- Revert unnecessary DOM positioning props (side, align, sideOffset, etc.) - Use Truncate component instead of CSS truncation + Tooltip for variable name - Keep simple Popover.Content structure with 400px width (user requested) - Retain isBuiltIn logic and disableBuiltInVariables functionality - Keep fakeModal option for proper modal behavior This addresses PR review comments requesting simpler DOM structure and Truncate component usage while maintaining the new isBuiltIn feature functionality and improved dropdown width. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

RemiBonnet

We've some space at the right I think you can increase the truncateLimit

libs/domains/variables/feature/src/lib/dropdown-variable/dropdown-variable.tsx

- Revert unnecessary DOM positioning props (side, align, sideOffset, etc.) - Use Truncate component instead of CSS truncation + Tooltip for variable name - Keep simple Popover.Content structure with 400px width (user requested) - Retain isBuiltIn logic and disableBuiltInVariables functionality - Keep fakeModal option for proper modal behavior This addresses PR review comments requesting simpler DOM structure and Truncate component usage while maintaining the new isBuiltIn feature functionality and improved dropdown width. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

RemiBonnet

Last one, after it should be good !

libs/domains/variables/feature/src/lib/dropdown-variable/dropdown-variable.tsx

…ad of custom class Remove redundant 'cursor-not-allowed opacity-50' class as it's already handled by dropdownMenuItemVariants when passing disabled: isDisabled

RemiBonnet · 2026-01-08T14:37:38Z

🎉 This PR is included in version 1.264.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Julien Dan added 2 commits December 4, 2025 17:45

fix(variablesDropdown): fix search input, disable built_in for helm, …

d426023

…fetch aliases

fix(variablesDropdown): Increase the dropdown size

b45ef55

jul-dan changed the title ~~Fixes/Improvements search magic wand for variables~~ fix(variablesDropdown): Fixes/Improvements search magic wand for variables Dec 4, 2025

Julien Dan added 4 commits December 4, 2025 17:55

fix(variablesDropdown): Fix unit tests

31f7a89

fix(variablesDropdown): truncate text and align information icon

3deb482

fix(variablesDropdown): fix information icon alignment

3d7e14f

fix(variablesDropdown): fix unit tests

98bc4db

jul-dan marked this pull request as ready for review December 5, 2025 07:51

rmnbrd requested changes Dec 5, 2025

View reviewed changes

Julien Dan and others added 4 commits December 8, 2025 15:02

jul-dan requested a review from rmnbrd December 17, 2025 17:30

RemiBonnet requested changes Jan 7, 2026

View reviewed changes

Julien Dan and others added 2 commits January 7, 2026 14:21

jul-dan requested a review from RemiBonnet January 7, 2026 14:04

RemiBonnet requested changes Jan 7, 2026

View reviewed changes

jul-dan requested a review from RemiBonnet January 7, 2026 16:38

RemiBonnet requested changes Jan 7, 2026

View reviewed changes

libs/domains/variables/feature/src/lib/dropdown-variable/dropdown-variable.tsx Outdated Show resolved Hide resolved

jul-dan force-pushed the fix/search_magic_wand_for_variables branch from f853901 to 6642d7b Compare January 8, 2026 09:37

jul-dan requested a review from RemiBonnet January 8, 2026 09:40

RemiBonnet requested changes Jan 8, 2026

View reviewed changes

libs/domains/variables/feature/src/lib/dropdown-variable/dropdown-variable.tsx Outdated Show resolved Hide resolved

refactor(variables): use dropdownMenuItemVariants disabled prop inste…

d07776a

…ad of custom class Remove redundant 'cursor-not-allowed opacity-50' class as it's already handled by dropdownMenuItemVariants when passing disabled: isDisabled

jul-dan requested a review from RemiBonnet January 8, 2026 13:28

RemiBonnet approved these changes Jan 8, 2026

View reviewed changes

RemiBonnet changed the title ~~fix(variablesDropdown): Fixes/Improvements search magic wand for variables~~ fix(variables-dropdown): fixes/improvements search magic wand for variables Jan 8, 2026

RemiBonnet enabled auto-merge (squash) January 8, 2026 13:49

rmnbrd approved these changes Jan 8, 2026

View reviewed changes

RemiBonnet merged commit 7e821c2 into staging Jan 8, 2026
10 checks passed

RemiBonnet deleted the fix/search_magic_wand_for_variables branch January 8, 2026 14:33

RemiBonnet added the released label Jan 8, 2026

fix(variables-dropdown): fixes/improvements search magic wand for variables #2202

fix(variables-dropdown): fixes/improvements search magic wand for variables #2202

Uh oh!

Conversation

jul-dan commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots / Recordings

Testing

PR Checklist

Uh oh!

RemiBonnet commented Dec 4, 2025

Uh oh!

codecov bot commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RemiBonnet commented Jan 6, 2026

Uh oh!

jul-dan commented Jan 7, 2026

Uh oh!

RemiBonnet left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jul-dan commented Jan 7, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jul-dan Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RemiBonnet left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

RemiBonnet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

RemiBonnet commented Jan 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jul-dan commented Dec 4, 2025 •

edited

Loading

codecov bot commented Dec 4, 2025 •

edited

Loading

RemiBonnet left a comment •

edited

Loading

jul-dan Jan 7, 2026 •

edited

Loading

RemiBonnet left a comment •

edited

Loading