refactor(editor): Reka UI inline text edit component (#15752)

cypress/composables/credentialsComposables.ts

@@ -68,8 +68,7 @@ export function getCredentialSaveButton() {
  */
 
 export function setCredentialName(name: string) {
-	cy.getByTestId('credential-name').click();
-	cy.getByTestId('credential-name').find('input').clear();
+	cy.getByTestId('credential-name').find('span[data-test-id=inline-edit-preview]').click();
 	cy.getByTestId('credential-name').type(name);
 }
 export function saveCredential() {

cypress/composables/folders.ts

@@ -325,7 +325,7 @@ export function renameFolderFromListActions(folderName: string, newName: string)
 	getListActionsToggle().click();
 	getListActionItem('rename').click();
 	getInlineEditInput().should('be.visible');
-	getInlineEditInput().type(newName, { delay: 50 });
+	getInlineEditInput().type(`${newName}{enter}`, { delay: 50 });
 	successToast().should('exist');
 }
 

cypress/e2e/10-settings-log-streaming.cy.ts

@@ -57,9 +57,9 @@ describe('Log Streaming Settings', () => {
 
 		settingsLogStreamingPage.getters
 			.getDestinationNameInput()
-			.find('input')
-			.clear()
-			.type('Destination 0');
+			.find('span[data-test-id=inline-edit-preview]')
+			.click();
+		cy.getByTestId('inline-edit-input').type('Destination 0');
 		settingsLogStreamingPage.getters.getDestinationSaveButton().click();
 		cy.wait(100);
 		getVisibleModalOverlay().click(1, 1);
@@ -84,9 +84,9 @@ describe('Log Streaming Settings', () => {
 		settingsLogStreamingPage.getters.getDestinationNameInput().click();
 		settingsLogStreamingPage.getters
 			.getDestinationNameInput()
-			.find('input')
-			.clear()
-			.type('Destination 1');
+			.find('span[data-test-id=inline-edit-preview]')
+			.click();
+		cy.getByTestId('inline-edit-input').type('Destination 1');
 		settingsLogStreamingPage.getters.getDestinationSaveButton().should('not.have.attr', 'disabled');
 		settingsLogStreamingPage.getters.getDestinationSaveButton().click();
 		cy.wait(100);

cypress/pages/modals/credentials-modal.ts

@@ -21,6 +21,8 @@ export class CredentialsModal extends BasePage {
 		connectionParameter: (fieldName: string) =>
 			this.getters.credentialInputs().find(`:contains('${fieldName}') .n8n-input input`),
 		name: () => cy.getByTestId('credential-name'),
+		namePreview: () =>
+			cy.getByTestId('credential-name').find('span[data-test-id=inline-edit-preview]'),
 		nameInput: () => cy.getByTestId('credential-name').find('input'),
 		deleteButton: () => cy.getByTestId('credential-delete-button'),
 		closeButton: () => this.getters.editCredentialModal().find('.el-dialog__close').first(),
@@ -43,7 +45,7 @@ export class CredentialsModal extends BasePage {
 			getVisibleSelect().contains(email.toLowerCase()).click();
 		},
 		setName: (name: string) => {
-			this.getters.name().click();
+			this.getters.name().getByTestId('inline-edit-preview').click();
 			this.getters.nameInput().clear().type(name);
 		},
 		save: (test = false) => {
@@ -93,7 +95,7 @@ export class CredentialsModal extends BasePage {
 			this.actions.fillCredentialsForm(closeModal);
 		},
 		renameCredential: (newName: string) => {
-			this.getters.nameInput().type('{selectall}');
+			this.getters.namePreview().click();
 			this.getters.nameInput().type(newName);
 			this.getters.nameInput().type('{enter}');
 		},

cypress/pages/template-credential-setup.ts

@@ -9,6 +9,10 @@ export const getters = {
 	skipLink: () => cy.get('a:contains("Skip")'),
 	title: (title: string) => cy.get(`h1:contains(${title})`),
 	infoCallout: () => cy.getByTestId('info-callout'),
+
+	namePreview: () =>
+		cy.getByTestId('credential-name').find('span[data-test-id=inline-edit-preview]'),
+	nameInput: () => cy.getByTestId('credential-name').find('input'),
 };
 
 export const visitTemplateCredentialSetupPage = (templateId: number) => {
@@ -22,7 +26,8 @@ export const visitTemplateCredentialSetupPage = (templateId: number) => {
  */
 export const fillInDummyCredentialsForApp = (appName: string) => {
 	formStep.getCreateAppCredentialsButton(appName).click();
-	credentialsModal.getters.editCredentialModal().find('input:first()').type('test');
+	credentialsModal.getters.namePreview().click();
+	credentialsModal.getters.nameInput().type('test');
 	credentialsModal.actions.save(false);
 	credentialsModal.actions.close();
 };

cypress/pages/workflow.ts

@@ -319,7 +319,6 @@ export class WorkflowPage extends BasePage {
 			cy.get('body').type('{del}');
 		},
 		setWorkflowName: (name: string) => {
-			this.getters.workflowNameInput().should('be.disabled');
 			this.getters.workflowNameInput().parent().click();
 			this.getters.workflowNameInput().should('be.enabled');
 			this.getters.workflowNameInput().clear().type(name).type('{enter}');