feat(frontend): pre fill selector when adding an output

web/cypress/e2e/TestRunDetail/Outputs.spec.ts

@@ -20,7 +20,9 @@ describe('Outputs', () => {
     cy.get('[data-cy=output-add-button]').click();
     cy.get('form#testOutput').within(() => {
       cy.get('#testOutput_name').type('status_code');
-      cy.get('[data-cy=selector-editor] [contenteditable=true]').type('span[tracetest.span.type = "http"]:first');
+      cy.get('[data-cy=selector-editor] [contenteditable=true]')
+        .clear()
+        .type('span[tracetest.span.type = "http"]:first');
       cy.get('[data-cy=expression-editor] [contenteditable=true]').type('attr:http.status_code');
     });
     cy.wait('@getSelect');
@@ -56,7 +58,9 @@ describe('Outputs', () => {
     cy.get('[data-cy=output-add-button]').click();
     cy.get('form#testOutput').within(() => {
       cy.get('#testOutput_name').type('status_code');
-      cy.get('[data-cy=selector-editor] [contenteditable=true]').type('span[tracetest.span.type = "http"]:first');
+      cy.get('[data-cy=selector-editor] [contenteditable=true]')
+        .clear()
+        .type('span[tracetest.span.type = "http"]:first');
       cy.get('[data-cy=expression-editor] [contenteditable=true]').type('attr:http.status_code');
     });
     cy.wait('@getSelect');

web/src/components/TestOutputForm/SelectorInput.tsx

@@ -28,8 +28,11 @@ const SelectorInput = ({form, runId, spanIdList, testId}: IProps) => {
         {required: true, message: 'Please enter a valid selector'},
         {
           message: 'Please select a single span',
-          validator: async () => {
-            if (spanIdList.length !== 1 && !isLoading) throw new Error('Please select a single span');
+          validator: () => {
+            if (spanIdList.length !== 1 && !isLoading) {
+              return Promise.reject(new Error('Please select a single span'));
+            }
+            return Promise.resolve();
           },
           validateTrigger: 'onSubmit',
         },

web/src/components/TestOutputForm/TestOutputForm.tsx

@@ -2,7 +2,7 @@ import {Button, Form, Input, Tag} from 'antd';
 import {useEffect} from 'react';
 
 import Editor from 'components/Editor';
-import {SELECTOR_LANGUAGE_CHEAT_SHEET_URL} from 'constants/Common.constants';
+import {EXPRESSIONS_DOCUMENTATION_URL, SELECTOR_LANGUAGE_CHEAT_SHEET_URL} from 'constants/Common.constants';
 import {SupportedEditors} from 'constants/Editor.constants';
 import {useAppSelector} from 'redux/hooks';
 import SpanSelectors from 'selectors/Span.selectors';
@@ -29,7 +29,7 @@ const TestOutputForm = ({isEditing = false, isLoading = false, onCancel, onSubmi
   const selector = Form.useWatch('selector', form) || '';
 
   useEffect(() => {
-    if (form.getFieldValue('selector')) {
+    if (form.getFieldValue('selector') && form.getFieldValue('value') && form.getFieldValue('name')) {
       onValidate(null, form.getFieldsValue());
       form.validateFields();
     }
@@ -67,7 +67,10 @@ const TestOutputForm = ({isEditing = false, isLoading = false, onCancel, onSubmi
         <S.FormSection>
           <S.FormSectionTitle>2. Select the attribute</S.FormSectionTitle>
           <S.FormSectionRow>
-            <S.FormSectionText>Choose one attribute from the selected span or use an expression</S.FormSectionText>
+            <S.FormSectionText>Choose one attribute from the selected span or use an </S.FormSectionText>
+            <a href={EXPRESSIONS_DOCUMENTATION_URL} target="_blank">
+              expression
+            </a>
           </S.FormSectionRow>
           <Form.Item name="value" rules={[{required: true, message: 'Please enter an attribute or expression'}]}>
             <Editor

web/src/components/TestOutputs/TestOutputs.tsx

@@ -1,22 +1,31 @@
 import {Button} from 'antd';
 
 import TestOutput from 'components/TestOutput';
+import TestOutputModel from 'models/TestOutput.model';
+import {useSpan} from 'providers/Span/Span.provider';
 import {useTestOutput} from 'providers/TestOutput/TestOutput.provider';
+import SpanService from 'services/Span.service';
+import {TTestOutput} from 'types/TestOutput.types';
 import Empty from './Empty';
 import * as S from './TestOutputs.styled';
-import {TTestOutput} from '../../types/TestOutput.types';
 
 interface IProps {
   outputs: TTestOutput[];
 }
 
 const TestOutputs = ({outputs}: IProps) => {
   const {onDelete, onOpen} = useTestOutput();
+  const {selectedSpan} = useSpan();
+
+  const handleOnAddTestOutput = () => {
+    const query = selectedSpan ? SpanService.getSelectorInformation(selectedSpan) : '';
+    onOpen(TestOutputModel({selector: {query}}));
+  };
 
   return (
     <S.Container>
       <S.HeaderContainer>
-        <Button data-cy="output-add-button" onClick={() => onOpen()} type="primary">
+        <Button data-cy="output-add-button" onClick={handleOnAddTestOutput} type="primary">
           Add Test Output
         </Button>
       </S.HeaderContainer>

web/src/constants/Common.constants.ts

@@ -17,6 +17,7 @@ export const TRACE_DOCUMENTATION_URL =
 
 export const ADD_TEST_SPECS_DOCUMENTATION_URL = 'https://docs.tracetest.io/web-ui/creating-test-specifications';
 export const ADD_TEST_OUTPUTS_DOCUMENTATION_URL = 'https://docs.tracetest.io/web-ui/creating-test-outputs';
+export const EXPRESSIONS_DOCUMENTATION_URL = 'https://docs.tracetest.io/concepts/expressions';
 export const ENVIRONMENTS_DOCUMENTATION_URL = 'https://docs.tracetest.io/concepts/environments';
 
 export const SELECTOR_LANGUAGE_CHEAT_SHEET_URL = `${process.env.PUBLIC_URL}/SL_cheat_sheet.pdf`;