feat(frontend): improve empty test and testsuite component (#3204)

kubeshop · Oct 3, 2023 · c712071 · c712071
1 parent 48e5aa6
commit c712071
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 36 deletions.
diff --git a/web/src/components/Empty/Empty.styled.ts b/web/src/components/Empty/Empty.styled.ts
@@ -1,16 +1,23 @@
 import {Row} from 'antd';
 import styled from 'styled-components';
 
+export const ActionContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`;
+
 export const Container = styled(Row)`
   height: calc(100% - 130px);
 `;
 
 export const Content = styled.div`
+  margin-bottom: 24px;
   text-align: center;
 `;
 
 export const Icon = styled.img`
   margin-bottom: 25px;
-  height: 115px;
-  width: 115px;
+  height: auto;
+  width: 140px;
 `;
diff --git a/web/src/components/Empty/Empty.tsx b/web/src/components/Empty/Empty.tsx
@@ -6,18 +6,20 @@ import * as S from './Empty.styled';
 interface IProps {
   message?: React.ReactNode;
   title?: string;
+  action?: React.ReactNode;
 }
 
-const Empty = ({message = '', title = ''}: IProps) => (
+const Empty = ({message = '', title = '', action}: IProps) => (
   <S.Container align="middle">
-    <Col span={12} offset={6}>
+    <Col lg={{span: 10, offset: 7}}>
       <S.Content>
         <div>
           <S.Icon alt="empty" src={icon} />
         </div>
         <Typography.Title>{title}</Typography.Title>
         <Typography.Text>{message}</Typography.Text>
       </S.Content>
+      <S.ActionContainer>{action}</S.ActionContainer>
     </Col>
   </S.Container>
 );

diff --git a/web/src/constants/Common.constants.ts b/web/src/constants/Common.constants.ts
@@ -20,6 +20,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 OPENING_TRACETEST_URL = 'https://docs.tracetest.io/getting-started/open/';
 export const ADD_TEST_URL = 'https://docs.tracetest.io/web-ui/creating-tests';
 export const ADD_TEST_SUITE_URL = 'https://docs.tracetest.io/web-ui/creating-test-suites';
 export const ADD_TEST_OUTPUTS_DOCUMENTATION_URL = 'https://docs.tracetest.io/web-ui/creating-test-outputs';

diff --git a/web/src/gateways/TestRun.gateway.ts b/web/src/gateways/TestRun.gateway.ts
@@ -1,7 +1,6 @@
 import TracetestAPI from 'redux/apis/Tracetest';
 import {TRawTestSpecs} from 'models/TestSpecs.model';
 
-
 const TestRunGateway = () => ({
   get(testId: string, take = 25, skip = 0) {
     return TracetestAPI.instance.endpoints.getRunList.initiate({testId, take, skip});

diff --git a/web/src/pages/Home/CreateButton.tsx b/web/src/pages/Home/CreateButton.tsx
@@ -3,16 +3,15 @@ import * as S from '../TestSuites/TestSuites.styled';
 
 interface IProps {
   onCreate(): void;
+  title?: string;
 }
 
-const CreateButton = ({onCreate}: IProps) => {
-  return (
-    <S.ActionContainer>
-      <S.CreateTestButton operation={Operation.Edit} type="primary" data-cy="create-button" onClick={onCreate}>
-        Create
-      </S.CreateTestButton>
-    </S.ActionContainer>
-  );
-};
+const CreateButton = ({onCreate, title}: IProps) => (
+  <S.ActionContainer>
+    <S.CreateTestButton operation={Operation.Edit} type="primary" data-cy="create-button" onClick={onCreate}>
+      {title || 'Create'}
+    </S.CreateTestButton>
+  </S.ActionContainer>
+);
 
 export default CreateButton;
diff --git a/web/src/pages/Home/Home.styled.tsx b/web/src/pages/Home/Home.styled.tsx
@@ -74,3 +74,8 @@ export const ConfigIcon = styled.img`
 export const ConfigFooter = styled.div`
   margin: 20px 0;
 `;
+
+export const Link = styled.a`
+  color: ${({theme}) => theme.color.primary};
+  font-weight: 600;
+`;
diff --git a/web/src/pages/Home/TestsList.tsx b/web/src/pages/Home/TestsList.tsx
@@ -7,7 +7,7 @@ import usePagination from 'hooks/usePagination';
 import useTestCrud from 'providers/Test/hooks/useTestCrud';
 import {useCallback, useState} from 'react';
 import TracetestAPI from 'redux/apis/Tracetest';
-import {ADD_TEST_URL} from 'constants/Common.constants';
+import {ADD_TEST_URL, OPENING_TRACETEST_URL} from 'constants/Common.constants';
 import HomeAnalyticsService from 'services/Analytics/HomeAnalytics.service';
 import useDeleteResource from 'hooks/useDeleteResource';
 import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
@@ -73,15 +73,22 @@ const Tests = () => {
         <Pagination<Test>
           emptyComponent={
             <Empty
-              title="You have not created any Tests yet"
+              title="Haven't Created a Test Yet"
               message={
                 <>
-                  Use the Create button to create your first test. Learn more about test{' '}
-                  <a href={ADD_TEST_URL} target="_blank">
-                    here.
-                  </a>
+                  Hit the &apos;Create&apos; button below to kickstart your testing adventure. Want to learn more about
+                  tests? Just click{' '}
+                  <S.Link href={ADD_TEST_URL} target="_blank">
+                    here
+                  </S.Link>
+                  . If you don’t have an app that’s generating OpenTelemetry traces we have a demo for you. Follow these{' '}
+                  <S.Link href={OPENING_TRACETEST_URL} target="_blank">
+                    instructions
+                  </S.Link>
+                  !
                 </>
               }
+              action={<CreateButton onCreate={() => setIsCreateTestOpen(true)} title="Create Your First Test" />}
             />
           }
           loadingComponent={<Loading />}

diff --git a/web/src/pages/TestSuites/TestSuites.styled.tsx b/web/src/pages/TestSuites/TestSuites.styled.tsx
@@ -1,7 +1,16 @@
-import {Dropdown, Row, Space, Typography} from 'antd';
+import {Button as AntdButton, Dropdown, Row, Space, Typography} from 'antd';
 import AllowButton from 'components/AllowButton';
 import styled from 'styled-components';
 
+export const Button = styled(AntdButton)`
+  font-weight: 600;
+`;
+
+export const Link = styled.a`
+  color: ${({theme}) => theme.color.primary};
+  font-weight: 600;
+`;
+
 export const CreateTestButton = styled(AllowButton)`
   font-weight: 600;
 `;

diff --git a/web/src/pages/TestSuites/TestSuitesList.tsx b/web/src/pages/TestSuites/TestSuitesList.tsx
@@ -18,7 +18,7 @@ import CreateButton from '../Home/CreateButton';
 import HomeFilters from '../Home/HomeFilters';
 import Loading from '../Home/Loading';
 
-const {useGetTestSuiteListQuery} = TracetestAPI.instance;
+const {useGetTestListQuery, useGetTestSuiteListQuery} = TracetestAPI.instance;
 
 const {onTestClick} = HomeAnalyticsService;
 type TParameters = {sortBy: SortBy; sortDirection: SortDirection};
@@ -28,6 +28,7 @@ const Resources = () => {
   const [isCreateTestSuiteOpen, setIsCreateTestSuiteOpen] = useState(false);
   const [parameters, setParameters] = useState<TParameters>(defaultSort);
 
+  const {data: testListData} = useGetTestListQuery({});
   const pagination = usePagination<TestSuite, TParameters>(useGetTestSuiteListQuery, parameters);
   const onDelete = useDeleteResource();
   const {runTestSuite} = useTestSuiteCrud();
@@ -70,17 +71,34 @@ const Resources = () => {
 
         <Pagination<TestSuite>
           emptyComponent={
-            <Empty
-              title="You have not created any Test Suites yet"
-              message={
-                <>
-                  Use the Create button to create your first test. Learn more about test suites{' '}
-                  <a href={ADD_TEST_SUITE_URL} target="_blank">
-                    here.
-                  </a>
-                </>
-              }
-            />
+            !testListData?.total ? (
+              <Empty
+                title="No Test Suites to Display... Yet!"
+                message="To set up your test suits and experience the interconnected testing magic, let's kickstart by creating your first test. Ready to boost your test coverage and efficiency? Let's dive in!"
+                action={
+                  <S.Button onClick={() => navigate('/')} type="primary">
+                    Go To Tests Page
+                  </S.Button>
+                }
+              />
+            ) : (
+              <Empty
+                title="No Test Suits in Sight!"
+                message={
+                  <>
+                    It looks a bit empty here, doesn&apos;t it? Let&apos;s start by adding your first test suites. If
+                    you want to learn more about test suits just click{' '}
+                    <S.Link href={ADD_TEST_SUITE_URL} target="_blank">
+                      here
+                    </S.Link>
+                    .
+                  </>
+                }
+                action={
+                  <CreateButton onCreate={() => setIsCreateTestSuiteOpen(true)} title="Create Your First Test Suite" />
+                }
+              />
+            )
           }
           loadingComponent={<Loading />}
           {...pagination}

diff --git a/web/src/pages/VariableSet/VariableSet.styled.tsx b/web/src/pages/VariableSet/VariableSet.styled.tsx
@@ -118,3 +118,8 @@ export const InfoIcon = styled(CheckCircleOutlined)`
   cursor: pointer;
   margin: 4px;
 `;
+
+export const Link = styled.a`
+  color: ${({theme}) => theme.color.primary};
+  font-weight: 600;
+`;
diff --git a/web/src/pages/VariableSet/VariableSetList.tsx b/web/src/pages/VariableSet/VariableSetList.tsx
@@ -23,11 +23,14 @@ const VariableSetList = ({onDelete, onEdit, query}: IProps) => {
     <Pagination
       emptyComponent={
         <Empty
-          title="You have not created any variable sets yet"
+          title="Haven't Created a VariableSet Yet"
           message={
             <>
-              Use the Create button to create your first variable set. Learn more about variable sets{' '}
-              <a href={VARIABLE_SET_DOCUMENTATION_URL}>here.</a>
+              Hit the &apos;Create&apos; button to create your first variable set. Want to learn more about
+              VariableSets? Just click{' '}
+              <S.Link href={VARIABLE_SET_DOCUMENTATION_URL} target="_blank">
+                here.
+              </S.Link>
             </>
           }
         />