Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(editor): Make node credential select searchable #12497

Merged
merged 8 commits into from
Jan 10, 2025
Merged

feat(editor): Make node credential select searchable #12497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0a3d189
Make node credential select searchable
elsmr Jan 8, 2025
eae3f1f
Merge branch 'master' into node-2215-make-credential-select-searchable
elsmr Jan 8, 2025
bc398ef
Blur select when "create new credential" is clicked
elsmr Jan 8, 2025
fe71269
Improve add credential hover state, make colors consistent
elsmr Jan 9, 2025
09c9136
Adapt e2e tests to new credential select
elsmr Jan 9, 2025
ff64ab5
Merge branch 'master' into node-2215-make-credential-select-searchable
elsmr Jan 9, 2025
4bd2c23
Fix community nodes e2e tests
elsmr Jan 9, 2025
741eb63
Improve styling when empty
elsmr Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions cypress/e2e/16-webhook-node.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ describe('Webhook Trigger node', () => {
});
// add credentials
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').last().click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.getters.credentialsEditModal().should('be.visible');
credentialsModal.actions.fillCredentialsForm();

Expand Down Expand Up @@ -293,7 +293,7 @@ describe('Webhook Trigger node', () => {
});
// add credentials
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').last().click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.getters.credentialsEditModal().should('be.visible');
credentialsModal.actions.fillCredentialsForm();

Expand Down
22 changes: 9 additions & 13 deletions cypress/e2e/17-sharing.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,10 +297,9 @@ describe('Credential Usage in Cross Shared Workflows', () => {
workflowsPage.actions.createWorkflowFromCard();
workflowPage.actions.addNodeToCanvas(NOTION_NODE_NAME, true, true);

// Only the credential in this project (+ the 'Create new' option) should
// be in the dropdown
// Only the credential in this project should be in the dropdown
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').should('have.length', 2);
getVisibleSelect().find('li').should('have.length', 1);
});

it('should only show credentials in their personal project for members', () => {
Expand All @@ -325,10 +324,9 @@ describe('Credential Usage in Cross Shared Workflows', () => {
workflowsPage.actions.createWorkflowFromCard();
workflowPage.actions.addNodeToCanvas(NOTION_NODE_NAME, true, true);

// Only the own credential the shared one (+ the 'Create new' option)
// should be in the dropdown
// Only the own credential the shared one should be in the dropdown
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').should('have.length', 3);
getVisibleSelect().find('li').should('have.length', 2);
});

it('should only show credentials in their personal project for members if the workflow was shared with them', () => {
Expand All @@ -355,10 +353,9 @@ describe('Credential Usage in Cross Shared Workflows', () => {
workflowsPage.getters.workflowCardContent(workflowName).click();
workflowPage.actions.addNodeToCanvas(NOTION_NODE_NAME, true, true);

// Only the own credential the shared one (+ the 'Create new' option)
// should be in the dropdown
// Only the own credential the shared one should be in the dropdown
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').should('have.length', 2);
getVisibleSelect().find('li').should('have.length', 1);
});

it("should show all credentials from all personal projects the workflow's been shared into for the global owner", () => {
Expand Down Expand Up @@ -400,10 +397,9 @@ describe('Credential Usage in Cross Shared Workflows', () => {
workflowsPage.getters.workflowCardContent(workflowName).click();
workflowPage.actions.addNodeToCanvas(NOTION_NODE_NAME, true, true);

// Only the personal credentials of the workflow owner and the global owner
// should show up.
// Only the personal credentials of the workflow owner and the global owner should show up.
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').should('have.length', 4);
getVisibleSelect().find('li').should('have.length', 3);
});

it('should show all personal credentials if the global owner owns the workflow', () => {
Expand All @@ -421,6 +417,6 @@ describe('Credential Usage in Cross Shared Workflows', () => {

// Show all personal credentials
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').should('have.have.length', 2);
getVisibleSelect().find('li').should('have.have.length', 1);
});
});
27 changes: 13 additions & 14 deletions cypress/e2e/2-credentials.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function createNotionCredential() {
workflowPage.actions.addNodeToCanvas(NOTION_NODE_NAME);
workflowPage.actions.openNode(NOTION_NODE_NAME);
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').last().click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.actions.fillCredentialsForm();
cy.get('body').type('{esc}');
workflowPage.actions.deleteNode(NOTION_NODE_NAME);
Expand Down Expand Up @@ -79,7 +79,7 @@ describe('Credentials', () => {
workflowPage.getters.canvasNodes().last().click();
cy.get('body').type('{enter}');
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').last().click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.getters.credentialsEditModal().should('be.visible');
credentialsModal.getters.credentialAuthTypeRadioButtons().should('have.length', 2);
credentialsModal.getters.credentialAuthTypeRadioButtons().first().click();
Expand All @@ -99,22 +99,21 @@ describe('Credentials', () => {
cy.get('body').type('{enter}');
workflowPage.getters.nodeCredentialsSelect().click();
// Add oAuth credentials
getVisibleSelect().find('li').last().click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.getters.credentialsEditModal().should('be.visible');
credentialsModal.getters.credentialAuthTypeRadioButtons().should('have.length', 2);
credentialsModal.getters.credentialAuthTypeRadioButtons().first().click();
credentialsModal.actions.fillCredentialsForm();
cy.get('.el-message-box').find('button').contains('Close').click();
workflowPage.getters.nodeCredentialsSelect().click();
// Add Service account credentials
getVisibleSelect().find('li').last().click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.getters.credentialsEditModal().should('be.visible');
credentialsModal.getters.credentialAuthTypeRadioButtons().should('have.length', 2);
credentialsModal.getters.credentialAuthTypeRadioButtons().last().click();
credentialsModal.actions.fillCredentialsForm();
// Both (+ the 'Create new' option) should be in the dropdown
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').should('have.length.greaterThan', 2);
getVisibleSelect().find('li').should('have.length', 3);
});

it('should correctly render required and optional credentials', () => {
Expand All @@ -130,13 +129,13 @@ describe('Credentials', () => {
workflowPage.getters.nodeCredentialsSelect().should('have.length', 2);

workflowPage.getters.nodeCredentialsSelect().first().click();
getVisibleSelect().find('li').contains('Create New Credential').click();
workflowPage.getters.nodeCredentialsCreateOption().first().click();
// This one should show auth type selector
credentialsModal.getters.credentialAuthTypeRadioButtons().should('have.length', 2);
cy.get('body').type('{esc}');

workflowPage.getters.nodeCredentialsSelect().last().click();
getVisibleSelect().find('li').contains('Create New Credential').click();
workflowPage.getters.nodeCredentialsCreateOption().last().click();
// This one should not show auth type selector
credentialsModal.getters.credentialsAuthTypeSelector().should('not.exist');
});
Expand All @@ -148,7 +147,7 @@ describe('Credentials', () => {
workflowPage.getters.canvasNodes().last().click();
cy.get('body').type('{enter}');
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').last().click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.getters.credentialsAuthTypeSelector().should('not.exist');
credentialsModal.actions.fillCredentialsForm();
workflowPage.getters
Expand All @@ -164,7 +163,7 @@ describe('Credentials', () => {
workflowPage.getters.canvasNodes().last().click();
cy.get('body').type('{enter}');
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').last().click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.actions.fillCredentialsForm();
workflowPage.getters
.nodeCredentialsSelect()
Expand All @@ -189,7 +188,7 @@ describe('Credentials', () => {
workflowPage.getters.canvasNodes().last().click();
cy.get('body').type('{enter}');
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').last().click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.actions.fillCredentialsForm();
workflowPage.getters.nodeCredentialsEditButton().click();
credentialsModal.getters.credentialsEditModal().should('be.visible');
Expand Down Expand Up @@ -232,7 +231,7 @@ describe('Credentials', () => {
cy.getByTestId('credential-select').click();
cy.contains('Adalo API').click();
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').last().click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.actions.fillCredentialsForm();
workflowPage.getters.nodeCredentialsEditButton().click();
credentialsModal.getters.credentialsEditModal().should('be.visible');
Expand Down Expand Up @@ -296,7 +295,7 @@ describe('Credentials', () => {

workflowPage.getters.nodeCredentialsSelect().should('exist');
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').last().click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.actions.fillCredentialsForm();
workflowPage.getters
.nodeCredentialsSelect()
Expand Down Expand Up @@ -325,7 +324,7 @@ describe('Credentials', () => {
workflowPage.actions.addNodeToCanvas('Slack', true, true, 'Get a channel');
workflowPage.getters.nodeCredentialsSelect().should('exist');
workflowPage.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').last().click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.getters.credentialAuthTypeRadioButtons().first().click();
nodeDetailsView.getters.copyInput().should('not.exist');
});
Expand Down
4 changes: 2 additions & 2 deletions cypress/e2e/21-community-nodes.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ describe('Community and custom nodes in canvas', () => {
workflowPage.actions.addNodeToCanvas('Manual');
workflowPage.actions.addNodeToCanvas('E2E Node with native n8n credential', true, true);
workflowPage.getters.nodeCredentialsLabel().click();
cy.contains('Create New Credential').click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.getters.editCredentialModal().should('be.visible');
credentialsModal.getters.editCredentialModal().should('contain.text', 'Notion API');
});
Expand All @@ -98,7 +98,7 @@ describe('Community and custom nodes in canvas', () => {
workflowPage.actions.addNodeToCanvas('Manual');
workflowPage.actions.addNodeToCanvas('E2E Node with custom credential', true, true);
workflowPage.getters.nodeCredentialsLabel().click();
cy.contains('Create New Credential').click();
workflowPage.getters.nodeCredentialsCreateOption().click();
credentialsModal.getters.editCredentialModal().should('be.visible');
credentialsModal.getters.editCredentialModal().should('contain.text', 'Custom E2E Credential');
});
Expand Down
12 changes: 6 additions & 6 deletions cypress/e2e/39-projects.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
workflowPage.getters.nodeCredentialsSelect().first().click();
getVisibleSelect()
.find('li')
.should('have.length', 2)
.should('have.length', 1)
.first()
.should('contain.text', 'Notion account project 1');
ndv.getters.backToCanvas().click();
Expand All @@ -382,7 +382,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
workflowPage.getters.nodeCredentialsSelect().first().click();
getVisibleSelect()
.find('li')
.should('have.length', 2)
.should('have.length', 1)
.first()
.should('contain.text', 'Notion account project 1');
ndv.getters.backToCanvas().click();
Expand All @@ -396,7 +396,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
workflowPage.getters.nodeCredentialsSelect().first().click();
getVisibleSelect()
.find('li')
.should('have.length', 2)
.should('have.length', 1)
.first()
.should('contain.text', 'Notion account project 2');
ndv.getters.backToCanvas().click();
Expand All @@ -407,7 +407,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
workflowPage.getters.nodeCredentialsSelect().first().click();
getVisibleSelect()
.find('li')
.should('have.length', 2)
.should('have.length', 1)
.first()
.should('contain.text', 'Notion account project 2');
ndv.getters.backToCanvas().click();
Expand All @@ -425,7 +425,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
workflowPage.getters.nodeCredentialsSelect().first().click();
getVisibleSelect()
.find('li')
.should('have.length', 2)
.should('have.length', 1)
.first()
.should('contain.text', 'Notion account personal project');
ndv.getters.backToCanvas().click();
Expand All @@ -436,7 +436,7 @@ describe('Projects', { disableAutoLogin: true }, () => {
workflowPage.getters.nodeCredentialsSelect().first().click();
getVisibleSelect()
.find('li')
.should('have.length', 2)
.should('have.length', 1)
.first()
.should('contain.text', 'Notion account personal project');
});
Expand Down
5 changes: 2 additions & 3 deletions cypress/e2e/45-ai-assistant.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { GMAIL_NODE_NAME, SCHEDULE_TRIGGER_NODE_NAME } from '../constants';
import { CredentialsModal, CredentialsPage, NDV, WorkflowPage } from '../pages';
import { AIAssistant } from '../pages/features/ai-assistant';
import { NodeCreator } from '../pages/features/node-creator';
import { getVisibleSelect } from '../utils';

const wf = new WorkflowPage();
const ndv = new NDV();
Expand Down Expand Up @@ -434,7 +433,7 @@ describe('AI Assistant Credential Help', () => {
wf.actions.addNodeToCanvas('Slack', true, true, 'Get a channel');
wf.getters.nodeCredentialsSelect().should('exist');
wf.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').last().click();
wf.getters.nodeCredentialsCreateOption().click();
credentialsModal.getters.credentialAuthTypeRadioButtons().first().click();
ndv.getters.copyInput().should('not.exist');
credentialsModal.getters.oauthConnectButton().should('have.length', 1);
Expand Down Expand Up @@ -467,7 +466,7 @@ describe('AI Assistant Credential Help', () => {
wf.actions.addNodeToCanvas('Microsoft Outlook', true, true, 'Get a calendar');
wf.getters.nodeCredentialsSelect().should('exist');
wf.getters.nodeCredentialsSelect().click();
getVisibleSelect().find('li').last().click();
wf.getters.nodeCredentialsCreateOption().click();
ndv.getters.copyInput().should('not.exist');
credentialsModal.getters.oauthConnectButton().should('have.length', 1);
credentialsModal.getters.credentialInputs().should('have.length', 1);
Expand Down
6 changes: 6 additions & 0 deletions packages/design-system/src/components/N8nSelect/Select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,12 @@ defineExpose({
<template v-if="$slots.suffix" #suffix>
<slot name="suffix" />
</template>
<template v-if="$slots.footer" #footer>
<slot name="footer" />
</template>
<template v-if="$slots.empty" #empty>
<slot name="empty" />
</template>
<slot></slot>
</ElSelect>
</div>
Expand Down
2 changes: 2 additions & 0 deletions packages/design-system/src/css/_tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@
// Danger
--color-danger-shade-1: var(--prim-color-alt-c-shade-100);
--color-danger: var(--prim-color-alt-c);
--color-danger-light: var(--prim-color-alt-c-tint-150);
--color-danger-light-2: var(--prim-color-alt-c-tint-250);
--color-danger-tint-1: var(--prim-color-alt-c-tint-400);
--color-danger-tint-2: var(--prim-color-alt-c-tint-450);

Expand Down
Loading
Loading