fix(1108): Provide common expression result types

KaotoIO · Jun 26, 2024 · 6256e2a · 6256e2a
1 parent 724bb94
commit 6256e2a
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 31 deletions.
diff --git a/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/onException.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialCamelRoutes/onException.cy.ts
@@ -63,18 +63,18 @@ describe('Test for root on exception container', () => {
     cy.get(`input[name="redeliveryPolicyRef"]`).clear().type('testRedeliveryPolicyRef');
     cy.openExpressionModal('retryWhile');
     cy.selectExpression('Constant');
-    cy.interactWithExpressinInputObject('expression', `retryWhile.constant`);
-    cy.interactWithExpressinInputObject('id', 'retryWhile.constantExpressionId');
+    cy.interactWithExpressionInputObject('expression', `retryWhile.constant`);
+    cy.interactWithExpressionInputObject('id', 'retryWhile.constantExpressionId');
     cy.confirmExpressionModal();
     cy.openExpressionModal('handled');
     cy.selectExpression('Constant');
-    cy.interactWithExpressinInputObject('expression', `handled.constant`);
-    cy.interactWithExpressinInputObject('id', 'handled.constantExpressionId');
+    cy.interactWithExpressionInputObject('expression', `handled.constant`);
+    cy.interactWithExpressionInputObject('id', 'handled.constantExpressionId');
     cy.confirmExpressionModal();
     cy.openExpressionModal('continued');
     cy.selectExpression('Constant');
-    cy.interactWithExpressinInputObject('expression', `continued.constant`);
-    cy.interactWithExpressinInputObject('id', 'continued.constantExpressionId');
+    cy.interactWithExpressionInputObject('expression', `continued.constant`);
+    cy.interactWithExpressionInputObject('id', 'continued.constantExpressionId');
     cy.confirmExpressionModal();
 
     cy.openSourceCode();

diff --git a/packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/expressionStepConfig.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/expressionStepConfig.cy.ts
@@ -10,11 +10,11 @@ describe('Tests for sidebar expression configuration', () => {
     cy.openStepConfigurationTab('setHeader');
     cy.openExpressionModalBtn();
     cy.selectExpression('Simple');
-    cy.interactWithExpressinInputObject('expression', `{{}{{}header.baz}}`);
-    cy.interactWithExpressinInputObject('id', 'simpleExpressionId');
-    cy.interactWithExpressinInputObject('resultType', 'java.lang.String');
+    cy.interactWithExpressionInputObject('expression', `{{}{{}header.baz}}`);
+    cy.interactWithExpressionInputObject('id', 'simpleExpressionId');
+    cy.interactWithExpressionInputObject('resultType', 'java.lang.String');
+    cy.addExpressionResultType('java.lang.String');
     cy.confirmExpressionModal();
-
     // CHECK they are reflected in the code editor
     cy.openSourceCode();
     cy.checkCodeSpanLine('expression: "{{header.baz}}"', 1);
@@ -31,7 +31,7 @@ describe('Tests for sidebar expression configuration', () => {
     cy.openExpressionModalBtn();
     cy.selectExpression('JQ');
     cy.interactWithConfigInputObject('expression', '.id');
-    cy.interactWithConfigInputObject('resultType', 'java.lang.String');
+    cy.addExpressionResultType('java.lang.String');
     cy.interactWithConfigInputObject('trim');
     cy.confirmExpressionModal();
 
@@ -44,7 +44,7 @@ describe('Tests for sidebar expression configuration', () => {
     cy.openExpressionModalBtn();
     cy.selectExpression('JQ');
     cy.interactWithConfigInputObject('expression', '.name');
-    cy.interactWithConfigInputObject('resultType', 'java.lang.String');
+    cy.addExpressionResultType('java.lang.String');
     cy.interactWithConfigInputObject('trim');
     cy.confirmExpressionModal();
 
@@ -53,15 +53,15 @@ describe('Tests for sidebar expression configuration', () => {
     // Check the configured fields didn't disappear from the first node
     cy.openExpressionModalBtn();
     cy.checkConfigCheckboxObject('trim', true);
-    cy.checkConfigInputObject('resultType', 'java.lang.String');
+    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.checkConfigInputObject('resultType', 'java.lang.String');
+    cy.addExpressionResultType('java.lang.String');
     cy.checkConfigInputObject('expression', '.name');
     cy.cancelExpressionModal();
 
@@ -79,7 +79,7 @@ describe('Tests for sidebar expression configuration', () => {
     cy.openStepConfigurationTab('setHeader');
     cy.openExpressionModalBtn();
     cy.selectExpression('Simple');
-    cy.interactWithExpressinInputObject('expression', `{{}{{}header.baz}}`);
+    cy.interactWithExpressionInputObject('expression', `{{}{{}header.baz}}`);
     cy.get('[data-ouia-component-id="ExpressionModal"]').within(() => {
       cy.get('textarea[name="expression"]').should('have.value', '{{header.baz}}');
     });
@@ -103,9 +103,9 @@ describe('Tests for sidebar expression configuration', () => {
     cy.openStepConfigurationTab('setBody');
     cy.openExpressionModalBtn();
     cy.selectExpression('Simple');
-    cy.interactWithExpressinInputObject('expression', `{{}{{}body.baz}}`);
-    cy.interactWithExpressinInputObject('id', 'simpleExpressionId');
-    cy.interactWithExpressinInputObject('resultType', 'java.lang.String');
+    cy.interactWithExpressionInputObject('expression', `{{}{{}body.baz}}`);
+    cy.interactWithExpressionInputObject('id', 'simpleExpressionId');
+    cy.addExpressionResultType('java.lang.String');
     cy.confirmExpressionModal();
 
     // CHECK they are reflected in the code editor

diff --git a/packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/setHeadersStepConfig.cy.ts b/packages/ui-tests/cypress/e2e/designer/specialStepConfiguration/setHeadersStepConfig.cy.ts
@@ -15,18 +15,18 @@ describe('Tests for sidebar setHeaders step configuration', () => {
     cy.get('[data-testid="launch-expression-modal-btn"]').should('be.visible').click();
 
     cy.selectExpression('Simple');
-    cy.interactWithExpressinInputObject('expression', `{{}random(1,100)}`);
-    cy.interactWithExpressinInputObject('id', 'simpleExpressionId');
-    cy.interactWithExpressinInputObject('resultType', 'java.lang.String');
+    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.interactWithExpressinInputObject('expression', `constant`);
-    cy.interactWithExpressinInputObject('id', 'constantExpressionId');
-    cy.interactWithExpressinInputObject('resultType', 'java.lang.String');
+    cy.interactWithExpressionInputObject('expression', `constant`);
+    cy.interactWithExpressionInputObject('id', 'constantExpressionId');
+    cy.addExpressionResultType('java.lang.String');
     cy.confirmExpressionModal();
 
     cy.openSourceCode();

diff --git a/packages/ui-tests/cypress/support/cypress.d.ts b/packages/ui-tests/cypress/support/cypress.d.ts
@@ -48,7 +48,9 @@ declare global {
       selectCamelRouteType(type: string, subType?: string): Chainable<JQuery<Element>>;
       chooseFromCatalog(nodeType: string, name: string): Chainable<JQuery<Element>>;
       // nodeConfiguration
-      interactWithExpressinInputObject(inputName: string, value?: string): Chainable<JQuery<Element>>;
+      interactWithExpressionInputObject(inputName: string, value?: string): Chainable<JQuery<Element>>;
+      addExpressionResultType(value: string): 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>>;

diff --git a/packages/ui-tests/cypress/support/next-commands/nodeConfiguration.ts b/packages/ui-tests/cypress/support/next-commands/nodeConfiguration.ts
@@ -1,9 +1,24 @@
-Cypress.Commands.add('interactWithExpressinInputObject', (inputName: string, value?: string) => {
+Cypress.Commands.add('interactWithExpressionInputObject', (inputName: string, value?: string) => {
   cy.get('[data-ouia-component-id="ExpressionModal"]').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('checkExpressionResultType', (value: string) => {
+  cy.get('[data-fieldname="resultType"]').within(() => {
+    cy.get(`input.pf-v5-c-text-input-group__text-input`).should('have.value', value);
+  });
+});
+
 Cypress.Commands.add('interactWithDataformatInputObject', (inputName: string, value?: string) => {
   cy.get('[data-testid="dataformat-config-card"]').within(() => {
     cy.interactWithConfigInputObject(inputName, value);
@@ -42,6 +57,7 @@ Cypress.Commands.add('openExpressionModal', (expression: string) => {
 
 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}$`);

diff --git a/packages/ui/src/components/Form/customField/TypeaheadField.tsx b/packages/ui/src/components/Form/customField/TypeaheadField.tsx
@@ -172,6 +172,7 @@ export const TypeaheadField = connectField((props: TypeaheadProps) => {
           onChange={onTextInputChange}
           onKeyDown={onInputKeyDown}
           id="create-typeahead-select-input"
+          data-testid="create-typeahead-select-input"
           autoComplete="off"
           innerRef={textInputRef}
           placeholder="Select an option"

diff --git a/packages/ui/src/components/Form/expression/ExpressionEditor.test.tsx b/packages/ui/src/components/Form/expression/ExpressionEditor.test.tsx
@@ -43,10 +43,9 @@ describe('ExpressionEditor', () => {
     const dropdown = screen.getAllByTestId('typeahead-select-input').filter((input) => input.innerHTML.includes('JQ'));
     expect(dropdown).toHaveLength(1);
     const resultTypeInput = screen
-      .getAllByRole('textbox')
-      .filter((textbox) => textbox.getAttribute('label') === 'Result Type');
+      .getAllByTestId('create-typeahead-select-input')
+      .filter((input) => input.innerHTML.includes('string'));
     expect(resultTypeInput).toHaveLength(1);
-    expect(resultTypeInput[0].getAttribute('value')).toEqual('string');
     const sourceInput = screen.getAllByRole('textbox').filter((textbox) => textbox.getAttribute('label') === 'Source');
     expect(sourceInput).toHaveLength(1);
     expect(sourceInput[0].getAttribute('value')).toEqual('');
@@ -70,7 +69,7 @@ describe('ExpressionEditor', () => {
         onChangeExpressionModel={onChangeMock}
       ></ExpressionEditor>,
     );
-    const inputElement = screen.getByRole('combobox');
+    const inputElement = screen.getAllByRole('combobox')[0];
     await act(async () => {
       fireEvent.change(inputElement, { target: { value: 'JQ' } });
     });

diff --git a/packages/ui/src/components/Form/expression/ExpressionEditor.tsx b/packages/ui/src/components/Form/expression/ExpressionEditor.tsx
@@ -37,7 +37,7 @@ export const ExpressionEditor: FunctionComponent<ExpressionEditorProps> = ({
   );
 
   const languageSchema = useMemo(() => {
-    return language && ExpressionService.getLanguageSchema(language);
+    return language && ExpressionService.getLanguageSchema(ExpressionService.setStepExpressionResultType(language));
   }, [language]);
 
   const handleOnChange = useCallback(

diff --git a/packages/ui/src/components/Form/expression/expression.service.ts b/packages/ui/src/components/Form/expression/expression.service.ts
@@ -144,6 +144,22 @@ export class ExpressionService {
     }
   }
 
+  /**
+   * Set the result type property to enum of common result types.
+   *
+   * @param language
+   * @returns
+   */
+  static setStepExpressionResultType(language: ICamelLanguageDefinition): ICamelLanguageDefinition {
+    if (language.propertiesSchema?.properties?.resultType) {
+      language.propertiesSchema.properties.resultType = {
+        ...language.propertiesSchema.properties.resultType,
+        enum: ['java.lang.String', 'java.lang.Boolean', 'java.lang.Integer', 'java.lang.Double', 'java.lang.Float'],
+      };
+    }
+    return language;
+  }
+
   /**
    * Parse the property expression model from the parent parameter model object.
    * @param languageCatalogMap The language catalog map to use as a dictionary.