fix: ExpressionField shows not configured for expressionless languages

Fixes: #965
KaotoIO · Apr 26, 2024 · 3a60f67 · 3a60f67
1 parent a3aeb55
commit 3a60f67
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 2 deletions.
diff --git a/packages/ui/src/components/Form/expression/ExpressionModalLauncher.test.tsx b/packages/ui/src/components/Form/expression/ExpressionModalLauncher.test.tsx
@@ -101,6 +101,52 @@ describe('ExpressionModalLauncher', () => {
     expect(mockOnChange.mock.calls).toHaveLength(1);
     expect(mockOnConfirm.mock.calls).toHaveLength(1);
   });
+
+  it('should render expression preview for bean method', () => {
+    const model = { ref: '#myBean', method: 'doSomething' };
+    const language = ExpressionService.getDefinitionFromModelName(
+      languageCatalog as unknown as Record<string, ICamelLanguageDefinition>,
+      'method',
+    );
+    const mockOnChange = jest.fn();
+    const mockOnConfirm = jest.fn();
+    const mockOnCancel = jest.fn();
+    render(
+      <ExpressionModalLauncher
+        name="expression"
+        language={language}
+        model={model}
+        onCancel={mockOnCancel}
+        onChange={mockOnChange}
+        onConfirm={mockOnConfirm}
+      ></ExpressionModalLauncher>,
+    );
+    const previewInput = screen.getByTestId('expression-preview-input');
+    expect(previewInput.getAttribute('value')).toEqual('Bean Method: #myBean.doSomething()');
+  });
+
+  it('should render expression preview for tokenize', () => {
+    const model = { token: ',' };
+    const language = ExpressionService.getDefinitionFromModelName(
+      languageCatalog as unknown as Record<string, ICamelLanguageDefinition>,
+      'tokenize',
+    );
+    const mockOnChange = jest.fn();
+    const mockOnConfirm = jest.fn();
+    const mockOnCancel = jest.fn();
+    render(
+      <ExpressionModalLauncher
+        name="expression"
+        language={language}
+        model={model}
+        onCancel={mockOnCancel}
+        onChange={mockOnChange}
+        onConfirm={mockOnConfirm}
+      ></ExpressionModalLauncher>,
+    );
+    const previewInput = screen.getByTestId('expression-preview-input');
+    expect(previewInput.getAttribute('value')).toEqual('Tokenize: (token=[,])');
+  });
 });
 
 it('should close the modal when the close button is clicked', () => {

diff --git a/packages/ui/src/components/Form/expression/ExpressionModalLauncher.tsx b/packages/ui/src/components/Form/expression/ExpressionModalLauncher.tsx
@@ -1,6 +1,6 @@
 import { Button, InputGroup, InputGroupItem, Modal, TextInput, ModalVariant } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { ICamelLanguageDefinition } from '../../../models';
 import { ExpressionEditor } from './ExpressionEditor';
 import './ExpressionModalLauncher.scss';
@@ -40,13 +40,26 @@ export const ExpressionModalLauncher = ({
     onCancel();
   };
 
-  const expressionLabel = language && model?.expression ? language.model.name + ': ' + model.expression : '';
+  const expressionLabel = useMemo(() => {
+    if (!language) return '';
+    if (language.model.name === 'method') {
+      let expression = model.ref || model.beanType || '';
+      if (expression) expression += '.';
+      if (model.method) expression += model.method + '()';
+      return 'Bean Method: ' + expression;
+    }
+    if (language.model.name === 'tokenize') {
+      return model.token ? `Tokenize: (token=[${model.token}])` : 'Tokenize';
+    }
+    return model?.expression ? language.model.name + ': ' + model.expression : language.model.name;
+  }, [language, model?.beanType, model?.expression, model?.method, model?.ref, model?.token]);
 
   return (
     <>
       <InputGroup>
         <InputGroupItem isFill>
           <TextInput
+            data-testid="expression-preview-input"
             id={'expression-preview-' + name}
             placeholder="Not configured"
             readOnlyVariant="default"