1405 [Transactions] Display parsed value when hovering over Interpola…

…tions#1405 (#1447)

* 1427 adding expression parse endpoint

* 1427 fixing unit tests

* 1427 improving validation checks and adding unit tests

* Integrate environments

* 1427 updating context request info and adding some validation checks

* 1405 wiring up the parse expression service

* 1405 minor fixes and cleanup

* remove wildcard from parser rule

* 1427 improving naming

* 1405 accomoading naming changes

* 1405 adding several minor ux improvements

* 1405 adding context to output attribute editor

Co-authored-by: Jorge Padilla <jorge.esteban.padilla@gmail.com>
Co-authored-by: Matheus Nogueira <matheus.nogueira2008@gmail.com>

server/expression/executor.go

@@ -98,7 +98,7 @@ func (e Executor) ResolveStatement(statement string) (string, error) {
 			return "", fmt.Errorf("could not parse left side expression: %w", err)
 		}
 
-		parsed = parsed + parsedStatement.Comparator + rightValue.String()
+		parsed = fmt.Sprintf("%s %s %s", parsed, parsedStatement.Comparator, rightValue.String())
 	}
 
 	return parsed, nil

web/package.json

@@ -8,6 +8,7 @@
     "@codemirror/autocomplete": "6.0.3",
     "@codemirror/language": "6.2.0",
     "@codemirror/lint": "6.0.0",
+    "@codemirror/view": "6.4.0",
     "@dnd-kit/core": "6.0.5",
     "@dnd-kit/sortable": "7.0.1",
     "@emotion/react": "11.9.0",

web/src/components/Editor/Editor.tsx

@@ -3,7 +3,8 @@ import {EditorView} from '@codemirror/view';
 import {BasicSetupOptions} from '@uiw/react-codemirror';
 import {Extension} from '@codemirror/state';
 import {SupportedEditors} from 'constants/Editor.constants';
-import { Completion } from '@codemirror/autocomplete';
+import {Completion} from '@codemirror/autocomplete';
+import {TResolveExpressionContext} from 'types/Expression.types';
 
 const EditorMap = {
   [SupportedEditors.Expression]: lazy(() => import('./Expression')),
@@ -23,6 +24,7 @@ export interface IEditorProps {
   indentWithTab?: boolean;
   autoFocus?: boolean;
   onSelectAutocompleteOption?(option: Completion): void;
+  context?: TResolveExpressionContext;
 }
 
 interface IProps extends IEditorProps {

web/src/components/Editor/Expression/Expression.tsx

@@ -1,12 +1,14 @@
 import {noop} from 'lodash';
-import {EditorView, hoverTooltip} from '@codemirror/view';
+import {Tooltip} from 'antd';
+import {EditorView} from '@codemirror/view';
 import {Extension} from '@codemirror/state';
 import {autocompletion} from '@codemirror/autocomplete';
 import CodeMirror, {ReactCodeMirrorRef} from '@uiw/react-codemirror';
-import {useMemo, useRef} from 'react';
+import {useCallback, useMemo, useRef} from 'react';
+import {useEnvironment} from 'providers/Environment/Environment.provider';
+import EditorService from 'services/Editor.service';
+import {SupportedEditors} from 'constants/Editor.constants';
 
-import {useTest} from 'providers/Test/Test.provider';
-import {useTestRun} from 'providers/TestRun/TestRun.provider';
 import {expressionQL} from './grammar';
 import useEditorTheme from '../hooks/useEditorTheme';
 import {IEditorProps} from '../Editor';
@@ -25,48 +27,47 @@ const Expression = ({
   onFocus = noop,
   indentWithTab = false,
   onSelectAutocompleteOption = noop,
+  context = {},
 }: IEditorProps) => {
-  const {
-    test: {id: testId},
-  } = useTest();
-  const {
-    run: {id: runId},
-  } = useTestRun();
+  const {testId = '', runId = ''} = context;
+  const {selectedEnvironment} = useEnvironment();
   const editorTheme = useEditorTheme();
   const completionFn = useAutoComplete({testId, runId, onSelect: onSelectAutocompleteOption});
-  const tooltipFn = useTooltip({testId, runId});
+  const {onHover, expression} = useTooltip({environmentId: selectedEnvironment?.id, ...context});
+
   const ref = useRef<ReactCodeMirrorRef>(null);
 
   const extensionList: Extension[] = useMemo(
-    () => [
-      autocompletion({override: [completionFn]}),
-      expressionQL(),
-      hoverTooltip(tooltipFn),
-      EditorView.lineWrapping,
-      ...extensions,
-    ],
-    [completionFn, extensions, tooltipFn]
+    () => [autocompletion({override: [completionFn]}), expressionQL(), EditorView.lineWrapping, ...extensions],
+    [completionFn, extensions]
   );
 
+  const handleHover = useCallback(() => {
+    if (EditorService.getIsQueryValid(SupportedEditors.Expression, value)) onHover(value);
+  }, [onHover, value]);
+
   return (
     <S.ExpressionEditorContainer $isEditable={editable}>
-      <CodeMirror
-        ref={ref}
-        onFocus={() => onFocus(ref.current?.view!)}
-        id="expression-editor"
-        basicSetup={{...basicSetup, lineNumbers}}
-        data-cy="expression-editor"
-        value={value}
-        maxHeight="120px"
-        extensions={extensionList}
-        onChange={onChange}
-        spellCheck={false}
-        theme={editorTheme}
-        editable={editable}
-        autoFocus={autoFocus}
-        placeholder={placeholder}
-        indentWithTab={indentWithTab}
-      />
+      <Tooltip placement="topLeft" title={expression}>
+        <CodeMirror
+          ref={ref}
+          onFocus={() => onFocus(ref.current?.view!)}
+          id="expression-editor"
+          basicSetup={{...basicSetup, lineNumbers}}
+          data-cy="expression-editor"
+          value={value}
+          maxHeight="120px"
+          extensions={extensionList}
+          onChange={onChange}
+          spellCheck={false}
+          theme={editorTheme}
+          editable={editable}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+          indentWithTab={indentWithTab}
+          onMouseOver={handleHover}
+        />
+      </Tooltip>
     </S.ExpressionEditorContainer>
   );
 };

web/src/components/Editor/Expression/grammar/__tests__/cases.txt

@@ -46,3 +46,11 @@ attr:http.message
 ==>
 
 Program(Expression(ComposedValue(OutsideInput(Source,Identifier))))
+
+# Duration
+
+120ms
+
+==>
+
+Program(Expression(ComposedValue(Duration)))

web/src/components/Editor/Expression/grammar/grammar.terms.js

@@ -9,12 +9,13 @@ export const
   Pipe = 7,
   SupportedParsers = 8,
   JsonPath = 9,
-  Number = 10,
-  Quotes = 11,
-  ComposedString = 12,
-  CloseInterpolation = 13,
-  OpenInterpolation = 14,
-  Interpolation = 15,
-  String = 16,
-  Operator = 17,
-  Comparator = 18
+  Duration = 10,
+  Number = 11,
+  Quotes = 12,
+  ComposedString = 13,
+  CloseInterpolation = 14,
+  OpenInterpolation = 15,
+  Interpolation = 16,
+  String = 17,
+  Operator = 18,
+  Comparator = 19

web/src/components/Editor/Expression/grammar/syntax.grammar

@@ -12,7 +12,7 @@
 expression {Expression (Comparator Expression)*}
 
 Expression {ComposedValue (Operator ComposedValue)*}
-ComposedValue {OutsideInput (Pipe SupportedParsers)* | Number | ComposedString}
+ComposedValue {OutsideInput (Pipe SupportedParsers)* | Duration | Number | ComposedString}
 OutsideInput {Source Identifier}
 Interpolation {OpenInterpolation OutsideInput CloseInterpolation}
 ComposedString {Quotes (Interpolation | String)+ Quotes}
@@ -24,6 +24,7 @@ JsonPath {"json_path '" Identifier "'"}
   Pipe {"|"}
   Number { @digit+ }
   Comparator {"=" | "contains" | "!=" | "<" | ">" | "<=" | ">=" | "not-contains" }
+  Duration { Number ("." Number)? ("ns" | "us" | "ms"| "s"| "m" | "h") }
   Operator {"+" | "-" | "*" | "/" | "%" | "^" }
   String {(![${}"])+}
   Quotes {'"'}
@@ -34,6 +35,7 @@ JsonPath {"json_path '" Identifier "'"}
 
   @precedence { OpenInterpolation, String }
   @precedence { String, space }
+  @precedence { Duration, Number }
 
   space { @whitespace+ }
 }