Add Selector Language cheat sheet (#1392)

web/src/components/TestHeader/__tests__/TestHeader.test.tsx

@@ -3,6 +3,9 @@ import TestMock from '../../../models/__mocks__/Test.mock';
 import TestHeader from '../TestHeader';
 
 test('SpanAttributesTable', () => {
-  const {getByTestId} = render(<TestHeader onBack={jest.fn()} test={TestMock.model()} />);
+  const test = TestMock.model();
+  const {getByTestId} = render(
+    <TestHeader description={test.description} id={test.id} onBack={jest.fn()} onDelete={jest.fn} title={test.name} />
+  );
   expect(getByTestId('test-details-name')).toBeInTheDocument();
 });

web/src/components/TestSpecForm/TestSpecForm.styled.ts

@@ -1,4 +1,4 @@
-import {DeleteOutlined} from '@ant-design/icons';
+import {DeleteOutlined, ReadOutlined} from '@ant-design/icons';
 import {Button, Select as AntSelect, Typography} from 'antd';
 import styled from 'styled-components';
 
@@ -88,6 +88,12 @@ export const FormSectionRow1 = styled.div`
   gap: 12px;
 `;
 
+export const FormSectionHeaderSelector = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+`;
+
 export const FormSectionTitle = styled(Typography.Title).attrs({level: 3})<{$noMargin?: boolean}>`
   && {
     margin-bottom: ${({$noMargin}) => ($noMargin ? '0' : '4px')};
@@ -98,6 +104,10 @@ export const FormSectionText = styled(Typography.Text)`
   color: ${({theme}) => theme.color.textSecondary};
 `;
 
+export const ReadIcon = styled(ReadOutlined)`
+  margin-top: 4px;
+`;
+
 export const ExpectedInputContainer = styled.div`
   width: 0;
   flex-basis: 50%;
@@ -112,7 +122,7 @@ export const ExpectedInputContainer = styled.div`
       outline: 1px solid grey;
       height: 32px;
       font-family: SFPro, serif;
-      outline: 1px solid #CDD1DB;
+      outline: 1px solid #cdd1db;
     }
 
     .cm-content {

web/src/components/TestSpecForm/TestSpecForm.tsx

@@ -1,18 +1,19 @@
 import {Button, Form, Tag} from 'antd';
 import {useState} from 'react';
-import {ADVANCE_SELECTORS_DOCUMENTATION_URL} from 'constants/Common.constants';
+
+import {SELECTOR_LANGUAGE_CHEAT_SHEET_URL} from 'constants/Common.constants';
+import {CompareOperator} from 'constants/Operator.constants';
 import {useAppSelector} from 'redux/hooks';
 import AssertionSelectors from 'selectors/Assertion.selectors';
 import SpanSelectors from 'selectors/Span.selectors';
+import OperatorService from 'services/Operator.service';
 import {TStructuredAssertion} from 'types/Assertion.types';
 import {singularOrPlural} from 'utils/Common';
 import AssertionCheckList from './AssertionCheckList';
 import useAssertionFormValues from './hooks/useAssertionFormValues';
 import useOnFieldsChange from './hooks/useOnFieldsChange';
 import SelectorInput from './SelectorInput';
 import * as S from './TestSpecForm.styled';
-import {CompareOperator} from '../../constants/Operator.constants';
-import OperatorService from '../../services/Operator.service';
 
 export interface IValues {
   assertions?: TStructuredAssertion[];
@@ -77,15 +78,17 @@ const TestSpecForm = ({
         onFieldsChange={onFieldsChange}
       >
         <S.FormSection>
-          <S.FormSectionRow1>
-            <S.FormSectionTitle $noMargin>1. Select Spans</S.FormSectionTitle>
-            <Tag color="blue">{`${spanIdList.length} ${singularOrPlural('span', spanIdList.length)} selected`}</Tag>
-          </S.FormSectionRow1>
-          <S.FormSectionRow>
-            <S.FormSectionText>Specify which spans to assert using the </S.FormSectionText>
-            <a href={ADVANCE_SELECTORS_DOCUMENTATION_URL} target="_blank">
-              Selector Language
+          <S.FormSectionHeaderSelector>
+            <S.FormSectionRow1>
+              <S.FormSectionTitle $noMargin>1. Select Spans</S.FormSectionTitle>
+              <Tag color="blue">{`${spanIdList.length} ${singularOrPlural('span', spanIdList.length)} selected`}</Tag>
+            </S.FormSectionRow1>
+            <a href={SELECTOR_LANGUAGE_CHEAT_SHEET_URL} target="_blank">
+              <S.ReadIcon /> SL cheat sheet
             </a>
+          </S.FormSectionHeaderSelector>
+          <S.FormSectionRow>
+            <S.FormSectionText>Select the spans to which a set of assertions will be applied</S.FormSectionText>
           </S.FormSectionRow>
           <SelectorInput form={form} testId={testId} runId={runId} onValidSelector={setIsValid} />
         </S.FormSection>

web/src/components/TestSpecs/Empty.tsx

@@ -1,4 +1,4 @@
-import {ADVANCE_SELECTORS_DOCUMENTATION_URL} from 'constants/Common.constants';
+import {ADD_TEST_SPECS_DOCUMENTATION_URL} from 'constants/Common.constants';
 import * as S from './TestSpecs.styled';
 
 const Empty = () => (
@@ -8,7 +8,7 @@ const Empty = () => (
     <S.EmptyText>Add a Test Spec to validate your trace.</S.EmptyText>
     <S.EmptyText>
       Learn more about writing specs{' '}
-      <a href={ADVANCE_SELECTORS_DOCUMENTATION_URL} target="_blank">
+      <a href={ADD_TEST_SPECS_DOCUMENTATION_URL} target="_blank">
         here
       </a>
     </S.EmptyText>

web/src/components/TransactionHeader/TransactionHeader.tsx

@@ -1,6 +1,6 @@
 import TestCardActions from 'components/TestCard/TestCardActions';
 import {noop} from 'lodash';
-import {useTransaction} from '../../providers/TransactionRunDetail/TransactionRunDetailProvider';
+import {useTransaction} from 'providers/TransactionRunDetail/TransactionRunDetailProvider';
 import * as S from './TransactionHeader.styled';
 
 interface IProps {
@@ -9,6 +9,7 @@ interface IProps {
 
 const TransactionHeader = ({onBack}: IProps) => {
   const {transaction} = useTransaction();
+
   return (
     <S.Container>
       <S.Section>

web/src/components/TransactionHeader/__tests__/TestHeader.test.tsx → web/src/components/TransactionHeader/__tests__/TransactionHeader.test.tsx

@@ -1,8 +1,7 @@
 import {render} from 'test-utils';
-import TransactionMock from '../../../models/__mocks__/Transaction.mock';
 import TransactionHeader from '../TransactionHeader';
 
 test('TransactionHeader', () => {
-  const {getByTestId} = render(<TransactionHeader onBack={jest.fn()} transaction={TransactionMock.model()} />);
+  const {getByTestId} = render(<TransactionHeader onBack={jest.fn()} />);
   expect(getByTestId('transaction-details-name')).toBeInTheDocument();
 });

web/src/constants/Common.constants.ts

@@ -1,4 +1,3 @@
-export const BASE_URL = 'http://localhost:11633';
 export const SENTRY_DNS = 'https://8411cbb3b7d84c879f711f0e642a28e3@o1229268.ingest.sentry.io/6375361';
 
 export const SENTRY_ALLOWED_URLS = [/.*?localhost:3000/, /.*?tracetest.io/];
@@ -15,7 +14,9 @@ export const RESOURCE_SEMANTIC_CONVENTIONS_URL =
 export const TRACE_DOCUMENTATION_URL =
   'https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/trace/api.md';
 
-export const ADVANCE_SELECTORS_DOCUMENTATION_URL = 'https://kubeshop.github.io/tracetest/advanced-selectors/';
+export const ADD_TEST_SPECS_DOCUMENTATION_URL = 'https://docs.tracetest.io/adding-assertions/';
+
+export const SELECTOR_LANGUAGE_CHEAT_SHEET_URL = `${process.env.PUBLIC_URL}/SL_cheat_sheet.pdf`;
 
 export enum HTTP_METHOD {
   GET = 'GET',