From 5c7c041a2b7a4233bde9e60f0a5371acf1eec3b9 Mon Sep 17 00:00:00 2001 From: Jorge Padilla Date: Mon, 1 May 2023 09:40:17 -0500 Subject: [PATCH] fix(frontend): fix test specs snippets (#2461) --- .../TestResults/AddTestSpecButton.tsx | 30 ++++----- web/src/components/TestResults/Header.tsx | 46 +++++++------- web/src/components/TestSpecs/Empty.tsx | 61 ++++++++++++++----- .../components/TestSpecs/TestSpecs.styled.ts | 4 ++ web/src/constants/Common.constants.ts | 2 +- web/src/pages/Home/Resources.tsx | 4 +- 6 files changed, 90 insertions(+), 57 deletions(-) diff --git a/web/src/components/TestResults/AddTestSpecButton.tsx b/web/src/components/TestResults/AddTestSpecButton.tsx index c2e2dbfe66..acffc0e5fa 100644 --- a/web/src/components/TestResults/AddTestSpecButton.tsx +++ b/web/src/components/TestResults/AddTestSpecButton.tsx @@ -1,20 +1,25 @@ -import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import {CaretDownOutlined} from '@ant-design/icons'; import {Dropdown, Menu} from 'antd'; -import SpanService from 'services/Span.service'; -import Span from 'models/Span.model'; +import React, {useCallback, useMemo} from 'react'; + +import {useTestSpecForm} from 'components/TestSpecForm/TestSpecForm.provider'; import {TEST_SPEC_SNIPPETS, TSnippet} from 'constants/TestSpecs.constants'; +import Span from 'models/Span.model'; +import {isRunStateSucceeded} from 'models/TestRun.model'; +import {useTestRun} from 'providers/TestRun/TestRun.provider'; +import SpanService from 'services/Span.service'; import * as S from './TestResults.styled'; -import {useTestSpecForm} from '../TestSpecForm/TestSpecForm.provider'; interface IProps { selectedSpan: Span; - visibleByDefault?: boolean; } -const AddTestSpecButton = ({selectedSpan, visibleByDefault = false}: IProps) => { +const AddTestSpecButton = ({selectedSpan}: IProps) => { + const { + run: {state}, + } = useTestRun(); const {open} = useTestSpecForm(); - const caretRef = useRef(null); + const handleEmptyTestSpec = useCallback(() => { const selector = SpanService.getSelectorInformation(selectedSpan); @@ -38,12 +43,6 @@ const AddTestSpecButton = ({selectedSpan, visibleByDefault = false}: IProps) => [open] ); - useEffect(() => { - if (visibleByDefault && caretRef.current) { - caretRef.current?.click(); - } - }, [visibleByDefault]); - const menu = useMemo( () => ( }, {type: 'divider'}, { - label: 'Empty Test Spec', + label: 'Add empty Test Spec', key: 'empty-test-spec', onClick: handleEmptyTestSpec, }, @@ -72,6 +71,7 @@ const AddTestSpecButton = ({selectedSpan, visibleByDefault = false}: IProps) => return ( type="primary" buttonsRender={([leftButton]) => [ React.cloneElement(leftButton as React.ReactElement, {'data-cy': 'add-test-spec-button'}), - + , ]} diff --git a/web/src/components/TestResults/Header.tsx b/web/src/components/TestResults/Header.tsx index 587859b9f8..edbe51fa47 100644 --- a/web/src/components/TestResults/Header.tsx +++ b/web/src/components/TestResults/Header.tsx @@ -9,32 +9,28 @@ interface IProps { totalPassedSpecs: number; } -const Header = ({selectedSpan, totalFailedSpecs, totalPassedSpecs}: IProps) => { - const hasSpecs = !!(totalFailedSpecs || totalPassedSpecs); +const Header = ({selectedSpan, totalFailedSpecs, totalPassedSpecs}: IProps) => ( + + +
+ {Boolean(totalPassedSpecs) && ( + + + {`${totalPassedSpecs} ${singularOrPlural('spec', totalPassedSpecs)} passed`} + + )} - return ( - - -
- {Boolean(totalPassedSpecs) && ( - - - {`${totalPassedSpecs} ${singularOrPlural('spec', totalPassedSpecs)} passed`} - - )} + {Boolean(totalFailedSpecs) && ( + + + {`${totalFailedSpecs} ${singularOrPlural('spec', totalFailedSpecs)} failed`} + + )} +
+ - {Boolean(totalFailedSpecs) && ( - - - {`${totalFailedSpecs} ${singularOrPlural('spec', totalFailedSpecs)} failed`} - - )} -
- - - - - ); -}; + + +); export default Header; diff --git a/web/src/components/TestSpecs/Empty.tsx b/web/src/components/TestSpecs/Empty.tsx index 82f56c6b11..bcc2f5cfe9 100644 --- a/web/src/components/TestSpecs/Empty.tsx +++ b/web/src/components/TestSpecs/Empty.tsx @@ -1,18 +1,51 @@ -import {ADD_TEST_SPECS_DOCUMENTATION_URL} from 'constants/Common.constants'; +import {AimOutlined} from '@ant-design/icons'; +import {Button} from 'antd'; +import {useCallback} from 'react'; + +import {useTestSpecForm} from 'components/TestSpecForm/TestSpecForm.provider'; +import {TEST_SPEC_SNIPPETS, TSnippet} from 'constants/TestSpecs.constants'; +import {isRunStateSucceeded} from 'models/TestRun.model'; +import {useTestRun} from 'providers/TestRun/TestRun.provider'; import * as S from './TestSpecs.styled'; -const Empty = () => ( - - - There are no specs for this test - Add a Test Spec to validate your trace. - - Learn more about writing specs{' '} - - here - - - -); +const Empty = () => { + const { + run: {state}, + } = useTestRun(); + const {open} = useTestSpecForm(); + + const onSnippetClick = useCallback( + (snippet: TSnippet) => { + open({ + isEditing: false, + selector: snippet.selector, + defaultValues: snippet, + }); + }, + [open] + ); + + return ( + + + There are no test specs for this test + Add a test spec, or choose from our predefined test specs: + + {TEST_SPEC_SNIPPETS.map(snippet => ( +
+ +
+ ))} + + + ); +}; export default Empty; diff --git a/web/src/components/TestSpecs/TestSpecs.styled.ts b/web/src/components/TestSpecs/TestSpecs.styled.ts index 1edbc6d291..17cebb4d5b 100644 --- a/web/src/components/TestSpecs/TestSpecs.styled.ts +++ b/web/src/components/TestSpecs/TestSpecs.styled.ts @@ -31,3 +31,7 @@ export const EmptyText = styled(Typography.Text)` `; export const EmptyTitle = styled(Typography.Title).attrs({level: 3})``; + +export const SnippetsContainer = styled.div` + margin: 16px 0; +`; diff --git a/web/src/constants/Common.constants.ts b/web/src/constants/Common.constants.ts index fe9f0d4926..17dc25388c 100644 --- a/web/src/constants/Common.constants.ts +++ b/web/src/constants/Common.constants.ts @@ -15,7 +15,7 @@ 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 ADD_TEST_SPECS_DOCUMENTATION_URL = 'https://docs.tracetest.io/web-ui/creating-test-specifications'; +export const ADD_TEST_URL = 'https://docs.tracetest.io/web-ui/creating-tests'; 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'; diff --git a/web/src/pages/Home/Resources.tsx b/web/src/pages/Home/Resources.tsx index cc25a8db6f..b440482bcb 100644 --- a/web/src/pages/Home/Resources.tsx +++ b/web/src/pages/Home/Resources.tsx @@ -11,7 +11,7 @@ import useTestCrud from 'providers/Test/hooks/useTestCrud'; import {useCallback, useState} from 'react'; import {useNavigate} from 'react-router-dom'; import {useGetResourcesQuery} from 'redux/apis/TraceTest.api'; -import {ADD_TEST_SPECS_DOCUMENTATION_URL} from 'constants/Common.constants'; +import {ADD_TEST_URL} from 'constants/Common.constants'; import HomeAnalyticsService from 'services/Analytics/HomeAnalytics.service'; import {ResourceType} from 'types/Resource.type'; import useTransactionCrud from 'providers/Transaction/hooks/useTransactionCrud'; @@ -84,7 +84,7 @@ const Resources = () => { message={ <> Use the Create button to create your first test. Learn more about test or transactions{' '} - + here.