n8n/cypress/pages/modals/credentials-modal.ts
Milorad FIlipović b321c5e4ec
feat(editor): Simplify NDV by moving authentication details to credentials modal (#5067)
*  Removing authentication parameter from NDV
*  Added auth type selector to credentials modal
* 🔨 Extracting reusable logic to util functions
*  Updating credentials position, adding label for radio buttons
*  Using first node credentials for nodes with single auth options and hiding auth selector UI in that case
*  Fixing credentials modal when opened from credentials page
*  Showing all available credentials in NDV credentials dropdown
*  Updating node credentials dropdown component to show credentials description. Disabling `Credentials of type not found` error in node
*  Moving auth related fields from NDV to credentials modal. Added support for multiple auth fileds
*  Moving NDV fields that authentication depends on to credentials modal
*  Keeping old auth/credentials UI in NDV for HTTP Request and Webhook nodes. Pre-populating credential type for HTTP request node when selected from 'app action' menu
* 💄 Use old label and field position for nodes that use old credentials UI in NDV
*  Implementing more generic way to find node's auth fileds
* 📚 Adding comments on parameter hiding logic
*  Fixing node auth options logic for multiple auth fields
* 👕 Fixing lint errors
* 💄 Addressing design review comments
*  Not selecting first auth option when opening new credential dialog
*  Using default credentials name and icon if authentication type is not selected
*  Updating credential data when auth type is changed
*  Setting new credentials type for HTTP Request and Webhook nodes
*  Setting nodes with access when changing auth type
* 👕 Fixing lint error
*  Updating active node auth type from credentials modal
*  Syncronizing credentials modal and dropdown
* 👕 Fixing linter error
*  Handling credential dropdown UI for multiple credentials
* 👕 Removing unused imports
*  Handling auth selection when default auth type is the first option
*  Updating credentials change listening logic
*  Resetting credential data when deleting a credential, disabling 'Details' and 'Sharing' tabs if auth type is not selected
* 🐛 Skipping credentials type check when showing mixed credentials in the dropdown and switching credentials type
*  Showing credential modal tabs for saved credentials
*  Preventing renaming credentials when no auth type is selected
* 🐛 Fixing credentials modal when opened from credentials page
*  Keeping auth radio buttons selected when switching tabs
*  Adding initial batch of credentials NDV tests
*  Updating node auth filed value when new credential type is selected
*  Using all available credential types for current node to sync credential dropdown with modal
*  Sorting mixed credentials by date, simplifying credential dropdown option logic
* 🔨 Extracting some reusable logic to utils
*  Improving required vs optional credentials detection and using it to show auth radio buttons
* 👕 Fixing lint errors
*  Adding more credentials tests
*  Filtering credential options based on authentication type
* 🔨 Refactoring credentials and auth utils
*  Updated handling of auth options in credentials modal to work with new logic
* 🔨 Getting the terminology in line
* 📚 Removing leftover comment
*  Updating node auth filed detection logic to account for different edge-cases
*  Adding Wait node as an exception for new UI
*  Updating NDV display when auth type changes
*  Updating default credentials name when auth type changes
*  Hiding auth settings after credentials are saved
*  Always showing credentials modal menu tabs
*  Improving main auth field detection logic so it doesn't account for authentication fields which can have `none` value
*  Restoring accidentally deleted not existing credential issue logic
*  Updating other nodes when deleted credentials have been updated
*  Using filtered auth type list to show or hide radio buttons section in credentials modal
* 👕 Addressing lint error
* 👌 Addressing PR review feedback
* 👕 Fixing lint issues
*  Updating main auth filed detection logic so it checks full dependency path to determine if the field is required or optional
* 👌 Addressing the rest of PR feedback
*  Updating credential tests
*  Resetting credential data on authentication type change
*  Created AuthTypeSelector component
* 👌 Addressing PR comments
*  Not resetting overwritten credential properties when changing auth type
*  Hiding auth selector section if there are no options to show
2023-01-27 09:05:43 +01:00

65 lines
2.7 KiB
TypeScript

import { BasePage } from '../base';
export class CredentialsModal extends BasePage {
getters = {
newCredentialModal: () => cy.getByTestId('selectCredential-modal', { timeout: 5000 }),
editCredentialModal: () => cy.getByTestId('editCredential-modal', { timeout: 5000 }),
newCredentialTypeSelect: () => cy.getByTestId('new-credential-type-select'),
newCredentialTypeOption: (credentialType: string) =>
cy.getByTestId('new-credential-type-select-option').contains(credentialType),
newCredentialTypeButton: () => cy.getByTestId('new-credential-type-button'),
connectionParameters: () => cy.getByTestId('credential-connection-parameter'),
connectionParameter: (fieldName: string) =>
this.getters
.connectionParameters()
.contains(fieldName)
.parents('[data-test-id="credential-connection-parameter"]')
.find('.n8n-input input'),
name: () => cy.getByTestId('credential-name'),
nameInput: () => cy.getByTestId('credential-name').find('input'),
// Saving of the credentials takes a while on the CI so we need to increase the timeout
saveButton: () => cy.getByTestId('credential-save-button', { timeout: 5000 }),
deleteButton: () => cy.getByTestId('credential-delete-button'),
closeButton: () => this.getters.editCredentialModal().find('.el-dialog__close').first(),
credentialsEditModal: () => cy.getByTestId('credential-edit-dialog'),
credentialsAuthTypeSelector: () => cy.getByTestId('node-auth-type-selector'),
credentialAuthTypeRadioButtons: () => this.getters.credentialsAuthTypeSelector().find('label[role=radio]'),
credentialInputs: () => cy.getByTestId('credential-connection-parameter'),
};
actions = {
setName: (name: string) => {
this.getters.name().click();
this.getters.nameInput().clear().type(name);
},
save: (test = false) => {
cy.intercept('POST', '/rest/credentials').as('saveCredential');
if (test) {
cy.intercept('POST', '/rest/credentials/test').as('testCredential');
}
this.getters.saveButton().click();
cy.wait('@saveCredential');
if (test) cy.wait('@testCredential');
this.getters.saveButton().should('contain.text', 'Saved');
},
close: () => {
this.getters.closeButton().click();
},
fillCredentialsForm: () => {
this.getters.credentialsEditModal().should('be.visible');
this.getters.credentialInputs().should('have.length.greaterThan', 0);
this.getters.credentialInputs().find('input[type=text], input[type=password]').each(($el) => {
cy.wrap($el).type('test');
});
this.getters.saveButton().click();
this.getters.closeButton().click();
},
renameCredential: (newName: string) => {
this.getters.nameInput().type('{selectall}');
this.getters.nameInput().type(newName);
this.getters.nameInput().type('{enter}');
}
};
}