github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-10-17 13:39:44 +02:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity Graph

update class when icon

Browse Source
This commit is contained in:
aaguirre-rdit 2026-10-06 12:01:21 +01:00
parent 674fb57941
commit 8a8cc8a9d0
No known key found for this signature in database
2 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialsDropdown.test.ts
View File

@ -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<typeof renderComponent>) {
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);
});
});

13
packages/frontend/editor-ui/src/features/credentials/components/CredentialPicker/CredentialsDropdown.vue
View File

@ -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);
}
}