fix(frontend): fix test specs snippets (#2461)

kubeshop · May 1, 2023 · 5c7c041 · 5c7c041
1 parent d12c7e1
commit 5c7c041
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 57 deletions.
diff --git 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<HTMLElement>(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(
     () => (
       <Menu
@@ -60,7 +59,7 @@ const AddTestSpecButton = ({selectedSpan, visibleByDefault = false}: IProps) =>
           },
           {type: 'divider'},
           {
-            label: 'Empty Test Spec',
+            label: 'Add empty Test Spec',
             key: 'empty-test-spec',
             onClick: handleEmptyTestSpec,
           },
@@ -72,14 +71,15 @@ const AddTestSpecButton = ({selectedSpan, visibleByDefault = false}: IProps) =>
 
   return (
     <Dropdown.Button
+      disabled={!isRunStateSucceeded(state)}
       overlay={menu}
       trigger={['click']}
       placement="bottomRight"
       onClick={handleEmptyTestSpec}
       type="primary"
       buttonsRender={([leftButton]) => [
         React.cloneElement(leftButton as React.ReactElement<any, string>, {'data-cy': 'add-test-spec-button'}),
-        <S.CaretDropdownButton ref={caretRef} type="primary" data-cy="create-button">
+        <S.CaretDropdownButton type="primary" data-cy="create-button">
           <CaretDownOutlined />
         </S.CaretDropdownButton>,
       ]}

diff --git 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) => (
+  <S.HeaderContainer>
+    <S.Row>
+      <div>
+        {Boolean(totalPassedSpecs) && (
+          <S.HeaderDetail>
+            <S.HeaderDot $passed />
+            {`${totalPassedSpecs} ${singularOrPlural('spec', totalPassedSpecs)} passed`}
+          </S.HeaderDetail>
+        )}
 
-  return (
-    <S.HeaderContainer>
-      <S.Row>
-        <div>
-          {Boolean(totalPassedSpecs) && (
-            <S.HeaderDetail>
-              <S.HeaderDot $passed />
-              {`${totalPassedSpecs} ${singularOrPlural('spec', totalPassedSpecs)} passed`}
-            </S.HeaderDetail>
-          )}
+        {Boolean(totalFailedSpecs) && (
+          <S.HeaderDetail>
+            <S.HeaderDot $passed={false} />
+            {`${totalFailedSpecs} ${singularOrPlural('spec', totalFailedSpecs)} failed`}
+          </S.HeaderDetail>
+        )}
+      </div>
+    </S.Row>
 
-          {Boolean(totalFailedSpecs) && (
-            <S.HeaderDetail>
-              <S.HeaderDot $passed={false} />
-              {`${totalFailedSpecs} ${singularOrPlural('spec', totalFailedSpecs)} failed`}
-            </S.HeaderDetail>
-          )}
-        </div>
-      </S.Row>
-
-      <AddTestSpecButton selectedSpan={selectedSpan} visibleByDefault={!hasSpecs} />
-    </S.HeaderContainer>
-  );
-};
+    <AddTestSpecButton selectedSpan={selectedSpan} />
+  </S.HeaderContainer>
+);
 
 export default Header;
diff --git 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 = () => (
-  <S.EmptyContainer data-cy="empty-test-specs">
-    <S.EmptyIcon />
-    <S.EmptyTitle>There are no specs for this test</S.EmptyTitle>
-    <S.EmptyText>Add a Test Spec to validate your trace.</S.EmptyText>
-    <S.EmptyText>
-      Learn more about writing specs{' '}
-      <a href={ADD_TEST_SPECS_DOCUMENTATION_URL} target="_blank">
-        here
-      </a>
-    </S.EmptyText>
-  </S.EmptyContainer>
-);
+const Empty = () => {
+  const {
+    run: {state},
+  } = useTestRun();
+  const {open} = useTestSpecForm();
+
+  const onSnippetClick = useCallback(
+    (snippet: TSnippet) => {
+      open({
+        isEditing: false,
+        selector: snippet.selector,
+        defaultValues: snippet,
+      });
+    },
+    [open]
+  );
+
+  return (
+    <S.EmptyContainer data-cy="empty-test-specs">
+      <S.EmptyIcon />
+      <S.EmptyTitle>There are no test specs for this test</S.EmptyTitle>
+      <S.EmptyText>Add a test spec, or choose from our predefined test specs:</S.EmptyText>
+      <S.SnippetsContainer>
+        {TEST_SPEC_SNIPPETS.map(snippet => (
+          <div>
+            <Button
+              disabled={!isRunStateSucceeded(state)}
+              icon={<AimOutlined />}
+              onClick={() => onSnippetClick(snippet)}
+              type="link"
+            >
+              {snippet.name}
+            </Button>
+          </div>
+        ))}
+      </S.SnippetsContainer>
+    </S.EmptyContainer>
+  );
+};
 
 export default Empty;
diff --git 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
@@ -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
@@ -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{' '}
-                  <a href={ADD_TEST_SPECS_DOCUMENTATION_URL} target="_blank">
+                  <a href={ADD_TEST_URL} target="_blank">
                     here.
                   </a>
                 </>