From 8a8cc8a9d0dc818c13574e1975db45e8b2e0ffd4 Mon Sep 17 00:00:00 2001 From: aaguirre-rdit Date: Tue, 6 Oct 2026 12:01:21 +0100 Subject: [PATCH] update class when icon --- .../CredentialsDropdown.test.ts | 17 +++++++++++++++-- .../CredentialPicker/CredentialsDropdown.vue | 13 +++++++++++-- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialsDropdown.test.ts b/packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialsDropdown.test.ts index 2d02d092c39..aa0b7391d2c 100644 --- a/packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialsDropdown.test.ts +++ b/packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialsDropdown.test.ts @@ -19,18 +19,25 @@ const CREDENTIAL_OPTION = { const managedTestId = `node-credentials-select-item-${MANAGED_OPTION.value}`; -function renderComponent() { +function renderComponent(selectedCredentialId: string | null = null) { return mount(CredentialsDropdown, { global: { plugins: [createTestingPinia()] }, props: { credentialOptions: [CREDENTIAL_OPTION], - selectedCredentialId: null, + selectedCredentialId, permissions: { create: true }, managedOption: MANAGED_OPTION, }, }); } +function selectHasIconClass(wrapper: ReturnType) { + return wrapper + .findComponent(N8nSelect) + .classes() + .some((className) => className.includes('selectWithIcon')); +} + describe('CredentialsDropdown', () => { it('resets the filter when the dropdown closes so the managed row shows on reopen', async () => { const wrapper = renderComponent(); @@ -50,4 +57,10 @@ describe('CredentialsDropdown', () => { await nextTick(); expect(wrapper.find(`[data-test-id="${managedTestId}"]`).exists()).toBe(true); }); + + it('adds the icon class only when a credential is selected', () => { + expect(selectHasIconClass(renderComponent())).toBe(false); + expect(selectHasIconClass(renderComponent(CREDENTIAL_OPTION.id))).toBe(true); + expect(selectHasIconClass(renderComponent(MANAGED_OPTION.value))).toBe(true); + }); }); diff --git a/packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialsDropdown.vue b/packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialsDropdown.vue index 12075267a04..60a046cd6c3 100644 --- a/packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialsDropdown.vue +++ b/packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialsDropdown.vue @@ -123,7 +123,10 @@ const onCreateNewCredential = async () => { :loading="props.loading" :disabled="props.disabled" :teleported="props.teleported ?? false" - :class="{ [$style.selectWithBalance]: isManagedSelected && managedOption?.pill }" + :class="{ + [$style.selectWithIcon]: !!selectedPrefixIcon, + [$style.selectWithBalance]: isManagedSelected && managedOption?.pill, + }" :popper-class="$style.selectPopper" @update:model-value="onCredentialSelected" @visible-change="onVisibleChange" @@ -256,7 +259,13 @@ const onCreateNewCredential = async () => { left: var(--credential-select-side-padding); } - :global(.el-select .el-input.el-input--prefix .el-input__inner) { + // Element Plus does not update `el-input--prefix` when the prefix slot + // appears or disappears after mount, so key the padding on our own class. + :global(.el-select .el-input .el-input__inner) { + padding-left: var(--credential-select-side-padding); + } + + .selectWithIcon :global(.el-select .el-input .el-input__inner) { padding-left: var(--credential-select-label-padding); } }