fix(1216): Expressions should be shown similar to data formats in the…

… config panel

packages/ui-tests/cypress/e2e/designer/sidepanelConfig/propertiesFilter.cy.ts

@@ -16,11 +16,12 @@ describe('Tests for side panel step filtering', () => {
     cy.get(`textarea[name="description"]`).should('exist');
     cy.get(`input[name="name"]`).should('exist');
     cy.get(`input[name="disabled"]`).should('exist');
-    cy.get(`input[data-testid="expression-preview-input"]`).should('exist');
+    cy.get(`.expression-metadata-editor`).should('exist');
+    cy.get('.pf-v5-c-card__header-toggle').click();
 
     // filter fields
     cy.filterFields('name');
-    cy.get(`input[data-testid="expression-preview-input"]`).should('exist');
+    cy.get(`.expression-metadata-editor`).should('exist');
     cy.get(`input[name="name"]`).should('exist');
     cy.get(`input[name="id"]`).should('not.exist');
     cy.get(`textarea[name="description"]`).should('not.exist');
@@ -40,11 +41,12 @@ describe('Tests for side panel step filtering', () => {
     cy.get(`textarea[name="description"]`).should('exist');
     cy.get(`input[name="name"]`).should('exist');
     cy.get(`input[name="disabled"]`).should('exist');
-    cy.get(`input[data-testid="expression-preview-input"]`).should('exist');
+    cy.get(`.expression-metadata-editor`).should('exist');
+    cy.get('.pf-v5-c-card__header-toggle').click();
 
     // filter fields
     cy.filterFields('DISABLED');
-    cy.get(`input[data-testid="expression-preview-input"]`).should('exist');
+    cy.get(`.expression-metadata-editor`).should('exist');
     cy.get(`input[name="disabled"]`).should('exist');
     cy.get(`input[name="name"]`).should('not.exist');
     cy.get(`input[name="id"]`).should('not.exist');

packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/onException.cy.ts

@@ -61,22 +61,22 @@ describe('Test for root on exception container', () => {
     cy.get(`input[name="redeliveryPolicy.redeliveryDelay"]`).clear().type('2000');
     cy.get(`input[name="redeliveryPolicy.retryAttemptedLogInterval"]`).clear().type('2');
     cy.get(`input[name="redeliveryPolicyRef"]`).clear().type('testRedeliveryPolicyRef');
-    cy.openExpressionModal('retryWhile');
-    cy.selectExpression('Constant');
-    cy.interactWithExpressionInputObject('expression', `retryWhile.constant`);
-    cy.interactWithExpressionInputObject('id', 'retryWhile.constantExpressionId');
-    cy.confirmExpressionModal();
-    cy.openExpressionModal('handled');
-    cy.selectExpression('Constant');
-    cy.interactWithExpressionInputObject('expression', `handled.constant`);
-    cy.interactWithExpressionInputObject('id', 'handled.constantExpressionId');
-    cy.confirmExpressionModal();
-    cy.openExpressionModal('continued');
-    cy.selectExpression('Constant');
-    cy.interactWithExpressionInputObject('expression', `continued.constant`);
-    cy.interactWithExpressionInputObject('id', 'continued.constantExpressionId');
-    cy.confirmExpressionModal();
 
+    cy.get('[data-fieldname="retryWhile"]').within(() => {
+      cy.selectExpression('Constant');
+      cy.interactWithExpressionInputObject('expression', `retryWhile.constant`);
+      cy.interactWithExpressionInputObject('id', 'retryWhile.constantExpressionId');
+    });
+    cy.get('[data-fieldname="handled"]').within(() => {
+      cy.selectExpression('Constant');
+      cy.interactWithExpressionInputObject('expression', `handled.constant`);
+      cy.interactWithExpressionInputObject('id', 'handled.constantExpressionId');
+    });
+    cy.get('[data-fieldname="continued"]').within(() => {
+      cy.selectExpression('Constant');
+      cy.interactWithExpressionInputObject('expression', `continued.constant`);
+      cy.interactWithExpressionInputObject('id', 'continued.constantExpressionId');
+    });
     cy.openSourceCode();
 
     cy.checkCodeSpanLine('description: testDescription');

packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/expressionStepConfig.cy.ts

@@ -8,12 +8,10 @@ describe('Tests for sidebar expression configuration', () => {
     cy.openDesignPage();
     // Configure setHeader expression
     cy.openStepConfigurationTab('setHeader');
-    cy.openExpressionModalBtn();
     cy.selectExpression('Simple');
     cy.interactWithExpressionInputObject('expression', `{{}{{}header.baz}}`);
     cy.interactWithExpressionInputObject('id', 'simpleExpressionId');
     cy.addExpressionResultType('java.lang.String');
-    cy.confirmExpressionModal();
     // CHECK they are reflected in the code editor
     cy.openSourceCode();
     cy.checkCodeSpanLine('expression: "{{header.baz}}"', 1);
@@ -27,42 +25,34 @@ describe('Tests for sidebar expression configuration', () => {
     cy.openDesignPage();
 
     cy.openStepConfigurationTab('setHeader');
-    cy.openExpressionModalBtn();
     cy.selectExpression('JQ');
     cy.interactWithConfigInputObject('expression', '.id');
     cy.addExpressionResultType('java.lang.String');
     cy.interactWithConfigInputObject('trim');
-    cy.confirmExpressionModal();
 
     cy.selectAppendNode('setHeader');
     cy.chooseFromCatalog('processor', 'setHeader');
 
     cy.checkNodeExist('setHeader', 2);
 
     cy.openStepConfigurationTab('setHeader', 1);
-    cy.openExpressionModalBtn();
     cy.selectExpression('JQ');
     cy.interactWithConfigInputObject('expression', '.name');
     cy.addExpressionResultType('java.lang.String');
     cy.interactWithConfigInputObject('trim');
-    cy.confirmExpressionModal();
 
     cy.openStepConfigurationTab('setHeader', 0);
 
     // Check the configured fields didn't disappear from the first node
-    cy.openExpressionModalBtn();
     cy.checkConfigCheckboxObject('trim', true);
     cy.checkExpressionResultType('java.lang.String');
     cy.checkConfigInputObject('expression', '.id');
-    cy.cancelExpressionModal();
 
     // Check the configured fields didn't disappear from the second node
     cy.openStepConfigurationTab('setHeader', 0);
-    cy.openExpressionModalBtn();
     cy.checkConfigCheckboxObject('trim', true);
     cy.addExpressionResultType('java.lang.String');
     cy.checkConfigInputObject('expression', '.name');
-    cy.cancelExpressionModal();
 
     // CHECK they are reflected in the code editor
     cy.openSourceCode();
@@ -76,18 +66,11 @@ describe('Tests for sidebar expression configuration', () => {
     cy.openDesignPage();
     // Configure setHeader expression
     cy.openStepConfigurationTab('setHeader');
-    cy.openExpressionModalBtn();
     cy.selectExpression('Simple');
     cy.interactWithExpressionInputObject('expression', `{{}{{}header.baz}}`);
-    cy.get('[data-ouia-component-id="ExpressionModal"]').within(() => {
-      cy.get('textarea[name="expression"]').should('have.value', '{{header.baz}}');
-    });
+    cy.get('textarea[name="expression"]').should('have.value', '{{header.baz}}');
     cy.selectExpression('Constant');
-    cy.get('[data-ouia-component-id="ExpressionModal"]').within(() => {
-      cy.get('textarea[name="expression"]').should('not.have.value', '{{header.baz}}');
-    });
-
-    cy.confirmExpressionModal();
+    cy.get('textarea[name="expression"]').should('not.have.value', '{{header.baz}}');
 
     // CHECK they are reflected in the code editor
     cy.openSourceCode();
@@ -100,12 +83,10 @@ describe('Tests for sidebar expression configuration', () => {
     cy.openDesignPage();
     // Configure setBody expression
     cy.openStepConfigurationTab('setBody');
-    cy.openExpressionModalBtn();
     cy.selectExpression('Simple');
     cy.interactWithExpressionInputObject('expression', `{{}{{}body.baz}}`);
     cy.interactWithExpressionInputObject('id', 'simpleExpressionId');
     cy.addExpressionResultType('java.lang.String');
-    cy.confirmExpressionModal();
 
     // CHECK they are reflected in the code editor
     cy.openSourceCode();

packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/setHeadersStepConfig.cy.ts

@@ -12,22 +12,18 @@ describe('Tests for sidebar setHeaders step configuration', () => {
     cy.openStepConfigurationTab('setHeaders');
 
     cy.get('[data-testid="list-add-field"]').click();
-    cy.get('[data-testid="launch-expression-modal-btn"]').should('be.visible').click();
 
     cy.selectExpression('Simple');
     cy.interactWithExpressionInputObject('expression', `{{}random(1,100)}`);
     cy.interactWithExpressionInputObject('id', 'simpleExpressionId');
     cy.addExpressionResultType('java.lang.String');
-    cy.confirmExpressionModal();
 
     cy.get('[data-testid="list-add-field"]').click();
-    cy.get('[data-testid="launch-expression-modal-btn"]').eq(1).should('be.visible').click();
 
-    cy.selectExpression('Constant');
-    cy.interactWithExpressionInputObject('expression', `constant`);
-    cy.interactWithExpressionInputObject('id', 'constantExpressionId');
-    cy.addExpressionResultType('java.lang.String');
-    cy.confirmExpressionModal();
+    cy.selectExpression('Constant', 1);
+    cy.interactWithExpressionInputObject('expression', `constant`, 1);
+    cy.interactWithExpressionInputObject('id', 'constantExpressionId', 1);
+    cy.addExpressionResultType('java.lang.String', 1);
 
     cy.openSourceCode();
     const headers = [

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

@@ -1,3 +1,4 @@
+import { Index } from '@kaoto/camel-catalog/types';
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
 // Alternatively, can be defined in cypress/support/component.d.ts
@@ -53,18 +54,14 @@ declare global {
       checkCatalogVersion(version: string): Chainable<JQuery<Element>>;
       chooseFromCatalog(nodeType: string, name: string): Chainable<JQuery<Element>>;
       // nodeConfiguration
-      interactWithExpressionInputObject(inputName: string, value?: string): Chainable<JQuery<Element>>;
-      addExpressionResultType(value: string): Chainable<JQuery<Element>>;
+      interactWithExpressionInputObject(inputName: string, value?: string, index?: number): Chainable<JQuery<Element>>;
+      addExpressionResultType(value: string, index?: number): Chainable<JQuery<Element>>;
       checkExpressionResultType(value: string): Chainable<JQuery<Element>>;
       interactWithConfigInputObject(inputName: string, value?: string): Chainable<JQuery<Element>>;
       interactWithDataformatInputObject(inputName: string, value?: string): Chainable<JQuery<Element>>;
       checkConfigCheckboxObject(inputName: string, value: boolean): Chainable<JQuery<Element>>;
       checkConfigInputObject(inputName: string, value: string): Chainable<JQuery<Element>>;
-      openExpressionModalBtn(): Chainable<JQuery<Element>>;
-      openExpressionModal(expression: string): Chainable<JQuery<Element>>;
-      selectExpression(expression: string): Chainable<JQuery<Element>>;
-      confirmExpressionModal(): Chainable<JQuery<Element>>;
-      cancelExpressionModal(): Chainable<JQuery<Element>>;
+      selectExpression(expression: string, index?: number): Chainable<JQuery<Element>>;
       selectInTypeaheadField(inputGroup: string, value: string): Chainable<JQuery<Element>>;
       configureBeanReference(inputName: string, value: string): Chainable<JQuery<Element>>;
       configureNewBeanReference(inputName: string): Chainable<JQuery<Element>>;

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

@@ -1,16 +1,24 @@
-Cypress.Commands.add('interactWithExpressionInputObject', (inputName: string, value?: string) => {
-  cy.get('[data-ouia-component-id="ExpressionModal"]').within(() => {
-    cy.interactWithConfigInputObject(inputName, value);
-  });
+Cypress.Commands.add('interactWithExpressionInputObject', (inputName: string, value?: string, index?: number) => {
+  index = index ?? 0;
+  cy.get('.expression-metadata-editor-card')
+    .eq(index)
+    .parent()
+    .within(() => {
+      cy.interactWithConfigInputObject(inputName, value);
+    });
 });
 
-Cypress.Commands.add('addExpressionResultType', (value: string) => {
-  cy.get('[data-ouia-component-id="ExpressionModal"]').within(() => {
-    cy.get('[data-fieldname="resultType"]').within(() => {
-      cy.get(`input.pf-v5-c-text-input-group__text-input`).clear();
-      cy.get(`input.pf-v5-c-text-input-group__text-input`).type(value).type('{enter}');
+Cypress.Commands.add('addExpressionResultType', (value: string, index?: number) => {
+  index = index ?? 0;
+  cy.get('.expression-metadata-editor-card')
+    .eq(index)
+    .parent()
+    .within(() => {
+      cy.get('[data-fieldname="resultType"]').within(() => {
+        cy.get(`input.pf-v5-c-text-input-group__text-input`).clear();
+        cy.get(`input.pf-v5-c-text-input-group__text-input`).type(value).type('{enter}');
+      });
     });
-  });
 });
 
 Cypress.Commands.add('checkExpressionResultType', (value: string) => {
@@ -43,35 +51,24 @@ Cypress.Commands.add('checkConfigInputObject', (inputName: string, value: string
   cy.get(`input[name="${inputName}"], textarea[name="${inputName}"]`).should('have.value', value);
 });
 
-Cypress.Commands.add('openExpressionModalBtn', () => {
-  cy.get('[data-testid="launch-expression-modal-btn"]').scrollIntoView().should('be.visible').click();
-});
-
-Cypress.Commands.add('openExpressionModal', (expression: string) => {
-  cy.get(`[data-fieldname="${expression}"]`)
+Cypress.Commands.add('selectExpression', (expression: string, index?: number) => {
+  index = index ?? 0;
+  cy.get('[data-testid="expression-config-card"]')
+    .eq(index)
     .scrollIntoView()
+    .should('be.visible')
     .within(() => {
-      cy.openExpressionModalBtn();
+      cy.get('div.pf-m-typeahead')
+        .eq(0)
+        .should('be.visible')
+        .within(() => {
+          cy.get('button.pf-v5-c-menu-toggle__button').click();
+        });
     });
-});
-
-Cypress.Commands.add('selectExpression', (expression: string) => {
-  cy.get('div[data-ouia-component-id="ExpressionModal"] button.pf-v5-c-menu-toggle__button')
-    .eq(0)
-    .should('be.visible')
-    .click();
   const regex = new RegExp(`^${expression}$`);
   cy.get('span.pf-v5-c-menu__item-text').contains(regex).should('exist').scrollIntoView().click();
 });
 
-Cypress.Commands.add('confirmExpressionModal', () => {
-  cy.get('[data-testid="confirm-expression-modal-btn"]').should('be.visible').click();
-});
-
-Cypress.Commands.add('cancelExpressionModal', () => {
-  cy.get('[data-testid="cancel-expression-modal-btn"]').should('be.visible').click();
-});
-
 Cypress.Commands.add('selectInTypeaheadField', (inputGroup: string, value: string) => {
   cy.get(`[data-fieldname="${inputGroup}"]`).within(() => {
     cy.get('button.pf-v5-c-menu-toggle__button').click();

packages/ui/src/components/Form/expression/ExpressionAwareNestField.test.tsx

@@ -38,39 +38,29 @@ describe('ExpressionAwareNestField', () => {
     CamelCatalogService.setCatalogKey(CatalogKind.Language, catalogsMap.languageCatalog);
   });
 
-  it('should render with a modal closed, open by click, then close by cancel button', () => {
+  it('should render', async () => {
     render(
       <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
         <AutoForm schema={schemaBridge!} model={{ headers: [{ expression: {} }] }}>
           <ExpressionAwareNestField name={'headers.$'}></ExpressionAwareNestField>
         </AutoForm>
       </AutoField.componentDetectorContext.Provider>,
     );
-    const link = screen.getByRole('button', { name: 'Configure Expression' });
-    expect(link).toBeInTheDocument();
-    expect(screen.queryByRole('dialog')).toBeNull();
-    act(() => {
-      fireEvent.click(link);
-    });
-    expect(screen.queryByRole('dialog')).toBeInTheDocument();
-    const cancelBtn = screen.getAllByRole('button').filter((button) => button.textContent === 'Cancel');
-    expect(cancelBtn).toHaveLength(1);
-    act(() => {
-      fireEvent.click(cancelBtn[0]);
+    const buttons = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
+    await act(async () => {
+      fireEvent.click(buttons[0]);
     });
-    expect(screen.queryByRole('dialog')).toBeNull();
+    const json = screen.getByTestId('expression-dropdownitem-datasonnet');
+    fireEvent.click(json.getElementsByTagName('button')[0]);
+    const form = screen.getByTestId('metadata-editor-form-expression');
+    expect(form.innerHTML).toContain('Output Media Type');
   });
 
   it('should render with parameters filled with passed in model, emit onChange with apply button', () => {
     const mockOnChange = jest.fn();
     const fieldProperties = {
-      value: { simple: { expression: '${body}', resultType: 'string' } },
+      value: { expression: { simple: { expression: '${body}', resultType: 'string' } } },
       onChange: mockOnChange,
-      field: {
-        type: 'object',
-        title: 'expression field title',
-        $comment: 'expression',
-      },
     };
     render(
       <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
@@ -79,25 +69,12 @@ describe('ExpressionAwareNestField', () => {
         </AutoForm>
       </AutoField.componentDetectorContext.Provider>,
     );
-    const link = screen.getByRole('button', { name: 'Configure Expression' });
-    act(() => {
-      fireEvent.click(link);
-    });
-
-    const expressionInput = screen
-      .getAllByRole('textbox')
-      .filter((textbox) => textbox.getAttribute('name') === 'expression');
-    expect(expressionInput).toHaveLength(1);
-    expect(expressionInput[0].textContent).toEqual('${body}');
-    act(() => {
-      fireEvent.input(expressionInput[0], { target: { value: '${header.foo}' } });
-    });
-
-    const applyBtn = screen.getAllByRole('button').filter((button) => button.textContent === 'Apply');
-    expect(applyBtn).toHaveLength(1);
+    const idInput = screen.getAllByRole('textbox').filter((textbox) => textbox.getAttribute('label') === 'Id');
+    expect(idInput).toHaveLength(1);
+    expect(idInput[0].getAttribute('value')).toEqual('');
     expect(mockOnChange.mock.calls).toHaveLength(0);
     act(() => {
-      fireEvent.click(applyBtn[0]);
+      fireEvent.input(idInput[0], { target: { value: 'foo' } });
     });
     expect(mockOnChange.mock.calls).toHaveLength(1);
   });