e2e: add basic bean ref tests

packages/ui-tests/cypress/e2e/designer/routeBeanConf.cy.ts

@@ -0,0 +1,88 @@
+describe('Test for node bean reference and configuration support', () => {
+  beforeEach(() => {
+    cy.openHomePage();
+  });
+
+  it('Beans - create a new bean in route using bean editor', () => {
+    cy.uploadFixture('flows/SqlBeansCR.yaml');
+    cy.openDesignPage();
+
+    cy.openStepConfigurationTab('sql');
+    cy.configureNewBeanReference('parameters.dataSource');
+    cy.get(`input[name="name"]`).clear().type('test');
+    cy.get(`input[name="type"]`).clear().type('org.acme');
+
+    cy.expandWrappedSection('properties');
+    cy.get('[data-testid="properties-add-string-property--btn"]').not(':hidden').first().click({ force: true });
+    cy.get('[data-testid="properties--placeholder-name-input"]').should('not.be.disabled');
+    cy.get('[data-testid="properties--placeholder-name-input"]').click({ force: true });
+    cy.get('[data-testid="properties--placeholder-name-input"]').clear().type('test');
+
+    cy.get('[data-testid="properties--placeholder-value-input"]').should('not.be.disabled');
+    cy.get('[data-testid="properties--placeholder-value-input"]').click({ force: true });
+    cy.get('[data-testid="properties--placeholder-value-input"]').clear().type('value');
+
+    cy.get('[data-testid="properties--placeholder-property-edit-confirm--btn"]').click({ force: true });
+
+    cy.get('[data-testid="create-bean-btn"').click();
+    cy.closeStepConfigurationTab();
+    cy.openSourceCode();
+
+    // CHECK the bean was created in the code editor
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('- beans:');
+    cy.checkCodeSpanLine('- name: test');
+    cy.checkCodeSpanLine('type: org.acme');
+    cy.checkCodeSpanLine('properties:');
+    cy.checkCodeSpanLine('test: value');
+    // CHECK the bean is referenced in the code editor
+    cy.checkCodeSpanLine('dataSource: "#test"');
+  });
+
+  it('Beans - select existing bean in node form config', () => {
+    cy.openSourceCode();
+    cy.uploadFixture('flows/SqlBeansCR.yaml');
+
+    cy.openDesignPage();
+    cy.openStepConfigurationTab('sql');
+    cy.configureBeanReference('parameters.dataSource', 'mysqlPostgreSqlSource');
+    cy.openSourceCode();
+
+    // CHECK the bean update was reflected in the code editor
+    cy.checkCodeSpanLine('dataSource: "#mysqlPostgreSqlSource"');
+  });
+
+  // blocked by https://github.com/KaotoIO/kaoto-next/issues/559
+  it.skip('Beans - unselect selected bean', () => {
+    cy.openSourceCode();
+    cy.uploadFixture('flows/SqlBeansCR.yaml');
+
+    cy.openDesignPage();
+    cy.openStepConfigurationTab('sql');
+    cy.configureBeanReference('parameters.dataSource', 'mysqlPostgreSqlSource');
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('dataSource: "#mysqlPostgreSqlSource"');
+
+    cy.openDesignPage();
+    cy.openStepConfigurationTab('sql');
+    cy.deselectNodeBean('parameters.dataSource');
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('dataSource: "#mysqlPostgreSqlSource"', 0);
+  });
+
+  // blocked by https://github.com/KaotoIO/kaoto-next/issues/558
+  it.skip('Beans - delete bean using the bean editor', () => {
+    cy.uploadFixture('flows/SqlBeansCR.yaml');
+    cy.openDesignPage();
+    cy.openStepConfigurationTab('sql');
+    cy.configureBeanReference('parameters.dataSource', 'mysqlPostgreSqlSource');
+
+    cy.openBeans();
+    // Remove the bean
+    cy.get('[data-testid="metadata-delete-1-btn"]').click();
+    cy.get('[data-testid="metadata-row-1"]').should('not.exist');
+    cy.openDesignPage();
+    cy.openStepConfigurationTab('sql');
+    cy.get(`div[data-fieldname="parameters.dataSource"] input[value="#mysqlPostgreSqlSource"]`).should('not.exist');
+  });
+});

packages/ui-tests/cypress/fixtures/flows/SqlBeansCR.yaml

@@ -0,0 +1,26 @@
+- route:
+    id: SqlBeansRoute
+    from:
+      uri: timer
+      steps:
+        - to:
+            uri: sql
+        - to:
+            uri: log:test
+- beans:
+    - name: mysqlDataSource
+      type: io.kaoto.MysqlDataSource
+      properties:
+        port: "3306"
+        url: jdbc:mysql://localhost/test
+        username: dbuser
+        password: dbpass
+        driver-class-name: com.mysql.jdbc.Driver
+    - name: mysqlPostgreSqlSource
+      type: io.kaoto.MysqlPostgreSqlSource
+      properties:
+        port: "5432"
+        url: jdbc:postgresql://localhost/test
+        username: dbuser
+        password: dbpass
+        driver-class-name: org.postgresql.Driver

packages/ui-tests/cypress/support/cypress.d.ts

@@ -47,6 +47,9 @@ declare global {
       deleteBranch(branchIndex: number): Chainable<JQuery<Element>>;
       selectDataformat(dataformat: string): Chainable<JQuery<Element>>;
       selectExpression(expression: string): Chainable<JQuery<Element>>;
+      configureNewBeanReference(inputName: string): Chainable<JQuery<Element>>;
+      configureBeanReference(inputName: string, value: string): Chainable<JQuery<Element>>;
+      deselectNodeBean(inputName: string): Chainable<JQuery<Element>>;
       selectCustomMetadataEditor(type: string, expression: string): Chainable<JQuery<Element>>;
       // metadata
       expandWrappedSection(sectionName: string): Chainable<JQuery<Element>>;

packages/ui-tests/cypress/support/next-commands/design.ts

@@ -111,3 +111,19 @@ Cypress.Commands.add('selectCustomMetadataEditor', (type: string, format: string
   const regex = new RegExp(`^${format}$`);
   cy.get('span.pf-v5-c-menu__item-text').contains(regex).should('exist').scrollIntoView().click();
 });
+
+Cypress.Commands.add('configureNewBeanReference', (inputName: string) => {
+  cy.get(`[data-fieldname="${inputName}"]`).scrollIntoView().click();
+  cy.get('#select-typeahead-kaoto-create-new').click();
+});
+
+Cypress.Commands.add('configureBeanReference', (inputName: string, value?: string) => {
+  cy.get(`[data-fieldname="${inputName}"]`).scrollIntoView();
+  cy.get(`[data-fieldname="${inputName}"]`).click();
+  cy.get(`[id$="${value}"]`).click();
+  cy.get(`div[data-fieldname="${inputName}"] input[value="#${value}"]`).should('exist');
+});
+
+Cypress.Commands.add('deselectNodeBean', (inputName: string) => {
+  cy.get(`div[data-fieldname="${inputName}"] button[aria-label="Clear input value"]`).click();
+});

packages/ui/src/components/Form/bean/NewBeanModal.tsx

@@ -56,10 +56,10 @@ export const NewBeanModal: FunctionComponent<NewBeanModalProps> = (props: NewBea
         isOpen={props.isOpen}
         onClose={handleCancel}
         actions={[
-          <Button key="confirm" variant="primary" onClick={handleConfirm}>
+          <Button key="confirm" variant="primary" onClick={handleConfirm} data-testid="create-bean-btn">
             Create
           </Button>,
-          <Button key="cancel" variant="link" onClick={handleCancel}>
+          <Button key="cancel" variant="link" onClick={handleCancel} data-testid="cancel-bean-btn">
             Cancel
           </Button>,
         ]}