Feat/credential key suggestions - #317
Conversation
Every credential-reference field in the Add/Edit Service sheet now
offers the vault's stored credential keys instead of requiring the
key name to be typed from memory:
- bearer/basic/api-key credential fields and the URL-substitution
key use the existing Combobox (all keys on focus, filter as you
type, free text still allowed)
- custom header values get a new TemplateInput that opens a
credential picker when the caret is inside an unclosed {{ ... }}
placeholder and inserts "{{ KEY }}" on selection
- both popovers are position:fixed portals, so they now track their
input on ancestor scroll/resize instead of staying stranded when
the sheet body scrolls
Suggestions come from GET /v1/credentials for the vault and degrade
silently to plain inputs when the list is unavailable.
The suggestion popovers only styled their scrollbar via the Firefox-only scrollbar-width/scrollbar-color properties, so on Chromium/WebKit the list was scrollable past its max-h-64 cap but showed no visible scrollbar until dragged. Adds a shared .thin-scrollbar utility with ::-webkit-scrollbar rules and applies it to Combobox, TemplateInput, and CreatableSelect. Also caps the URL-substitution key popover at a shorter max-height since it sits low in the sheet and was overflowing past the bottom of the screen at the default height.
|
| Filename | Overview |
|---|---|
| web/src/components/Combobox.tsx | Adds scroll/resize repositioning for the fixed popover and two new props (inputClassName, menuMaxHeightClassName). Missing onBlur means the dropdown stays open when the user tabs away. |
| web/src/components/TemplateInput.tsx | New component for template-string header values; correctly tracks caret position, opens a credential picker on {{, inserts {{ KEY }}, and closes the popover on blur. Logic is sound. |
| web/src/pages/vault/ServicesTab.tsx | Wires credential-key suggestions into all auth fields. fetchCredentialKeys uses a dual-shape response fallback and the removed onKeyDown Enter handlers break keyboard submission from the affected fields. |
| web/src/components/CreatableSelect.tsx | Scrollbar styles migrated from inline style props to the shared thin-scrollbar CSS class — cosmetic only, no functional change. |
| web/src/styles/theme.css | Adds .thin-scrollbar utility class covering both Firefox (scrollbar-width/scrollbar-color) and WebKit (::-webkit-scrollbar-*) — correct and complete. |
Comments Outside Diff (1)
-
web/src/components/Combobox.tsx, line 120-121 (link)Dropdown stays open when tabbing away
The
Comboboxinput has noonBlurhandler, so if a user focuses the field (which opens the popover) and then tabs to the next field with the keyboard, theposition:fixeddropdown remains visible over the rest of the form.TemplateInputcorrectly closes its popover inonBlur; the same pattern is needed here. AddingonBlur={() => setOpen(false)}to the<input>element would close the popover when focus leaves the field.
Reviews (1): Last reviewed commit: "fix(web): themed scrollbar for credentia..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
…redential parsing Addresses Greptile review on Infisical#317: the popover stranded open when tabbing away, Enter no longer submitted the form from converted auth fields, and fetchCredentialKeys guessed at two response shapes when the API only ever returns `keys`.
|
@jakehulberg |
📝 Contributor License Agreement requiredBefore this PR can merge, every contributor must sign the Infisical CLA. Still needs to sign: Once everyone has signed, the check updates automatically — no need to close and reopen the PR. |
1 participant
Fixes #316
Every credential-reference field in the Add/Edit Service sheet now offers the vault's stored credential keys instead of requiring the key name to be typed from memory:
Summary
Screenshots-