From 0426df39235de3e091566f77ffbfd41265ab17c3 Mon Sep 17 00:00:00 2001 From: cescoferraro Date: Mon, 19 Sep 2022 12:49:30 -0300 Subject: [PATCH] new onboarding --- web/src/components/Drawer/Drawer.tsx | 3 + web/src/components/EditTest/EditTest.tsx | 4 +- web/src/components/GuidedTour/GuidedTour.tsx | 8 +- web/src/components/GuidedTour/NextButton.tsx | 40 +++++--- .../components/GuidedTour/PreviousButton.tsx | 16 +++- .../GuidedTour/StepContent.styled.tsx | 26 ++++-- web/src/components/GuidedTour/StepContent.tsx | 41 ++++---- web/src/components/GuidedTour/doArrow.tsx | 2 +- .../components/GuidedTour/homeStepList.tsx | 28 +++--- .../GuidedTour/testDetailsStepList.tsx | 16 ++-- .../components/GuidedTour/traceStepList.tsx | 93 +++++++++++++------ web/src/components/Header/HeaderMenu.tsx | 4 +- .../Header/ShowOnboardingContent.tsx | 2 + .../components/RunDetailLayout/HeaderLeft.tsx | 4 +- .../RunDetailLayout/HeaderRight.tsx | 14 ++- .../RunDetailLayout/RunDetailLayout.tsx | 12 ++- .../RunDetailTriggerResponse.tsx | 4 +- web/src/components/SpanDetail/Header.tsx | 5 +- web/src/components/TestResults/Header.tsx | 10 +- .../GuidedTour/GuidedTour.provider.tsx | 11 ++- 20 files changed, 220 insertions(+), 123 deletions(-) diff --git a/web/src/components/Drawer/Drawer.tsx b/web/src/components/Drawer/Drawer.tsx index b8a3d9de54..c9c4b2a777 100644 --- a/web/src/components/Drawer/Drawer.tsx +++ b/web/src/components/Drawer/Drawer.tsx @@ -2,7 +2,9 @@ import {DoubleLeftOutlined, DoubleRightOutlined} from '@ant-design/icons'; import {Button} from 'antd'; import {noop} from 'lodash'; import React, {createContext, ReactNode, useCallback, useContext, useMemo, useState} from 'react'; +import {Steps} from 'components/GuidedTour/traceStepList'; import {HandlerProps, ReflexContainer, ReflexElement, ReflexSplitter} from 'react-reflex'; +import GuidedTourService, {GuidedTours} from '../../services/GuidedTour.service'; import * as S from './Drawer.styled'; @@ -64,6 +66,7 @@ const Drawer = ({leftPanel, rightPanel}: IProps) => { + + ); }; diff --git a/web/src/components/GuidedTour/PreviousButton.tsx b/web/src/components/GuidedTour/PreviousButton.tsx index 2ae3593774..68336d0e70 100644 --- a/web/src/components/GuidedTour/PreviousButton.tsx +++ b/web/src/components/GuidedTour/PreviousButton.tsx @@ -1,8 +1,14 @@ import {BtnFnProps} from '@reactour/tour/dist/types'; -import {Typography} from 'antd'; +import {Button} from 'antd'; -export const PreviousButton: React.FC = ({currentStep, stepsLength}) => ( -
- {` ${currentStep + 1} of ${stepsLength}`} -
+export const PreviousButton: React.FC = ({setIsOpen, setCurrentStep}) => ( + ); diff --git a/web/src/components/GuidedTour/StepContent.styled.tsx b/web/src/components/GuidedTour/StepContent.styled.tsx index b1f1c30f7b..646f81760e 100644 --- a/web/src/components/GuidedTour/StepContent.styled.tsx +++ b/web/src/components/GuidedTour/StepContent.styled.tsx @@ -1,32 +1,42 @@ -import {Divider as AntdDivider, Typography} from 'antd'; +import {Typography, Divider as AntdDivider} from 'antd'; import styled from 'styled-components'; export const Container = styled.div` + min-height: 100px; + padding-top: 12px; padding-left: 16px; padding-right: 16px; `; export const TitleContainer = styled.div` display: flex; - justify-content: center; + justify-content: space-between; align-items: center; `; export const Header = styled.div` display: flex; justify-content: space-between; - padding-left: 16px; - padding-right: 16px; - padding-bottom: 0; - margin-top: 16px; - height: 24px; + padding: 16px; + height: 48px; + background: linear-gradient(180deg, #2f1e61 -11.46%, #bc334a 134.37%); + > div { + width: 100%; + } `; export const Divider = styled(AntdDivider)` margin-top: 12px; - margin-bottom: 12px; + margin-bottom: 0; `; +export const TitleText = styled(Typography.Text).attrs({level: 3})` + && { + color: white; + opacity: 0.6; + } +`; export const Title = styled(Typography.Title).attrs({level: 3})` && { + color: white; margin-bottom: 0; } `; diff --git a/web/src/components/GuidedTour/StepContent.tsx b/web/src/components/GuidedTour/StepContent.tsx index c793a814ae..2efcc204ee 100644 --- a/web/src/components/GuidedTour/StepContent.tsx +++ b/web/src/components/GuidedTour/StepContent.tsx @@ -1,28 +1,23 @@ -import {CloseOutlined} from '@ant-design/icons'; -import {Button} from 'antd'; -import React, {Dispatch} from 'react'; -import {Container, Divider, Header, Title, TitleContainer} from './StepContent.styled'; +import React from 'react'; +import {Container, Divider, Header, Title, TitleContainer, TitleText} from './StepContent.styled'; interface IProps { title: string; - setIsOpen?: Dispatch>; + stepsLength: number; + currentStep: number; } -export const StepContent: React.FC = ({setIsOpen, title, children}) => ( - <> -
- - {title} - -
- - {children} - - -); +export const StepContent: React.FC = ({title, children, stepsLength, currentStep}) => { + return ( + <> +
+ + {title} + {` ${currentStep + 1} of ${stepsLength}`} + +
+ {children} + + + ); +}; diff --git a/web/src/components/GuidedTour/doArrow.tsx b/web/src/components/GuidedTour/doArrow.tsx index 374891642d..33addce450 100644 --- a/web/src/components/GuidedTour/doArrow.tsx +++ b/web/src/components/GuidedTour/doArrow.tsx @@ -15,7 +15,7 @@ export function doArrow( const height = 12; const color = 'white'; const isVertical = position === 'top' || position === 'bottom'; - const spaceFromSide = 10; + const spaceFromSide = 4; return { '&::after': { diff --git a/web/src/components/GuidedTour/homeStepList.tsx b/web/src/components/GuidedTour/homeStepList.tsx index f8453ad90a..287fa8cdda 100644 --- a/web/src/components/GuidedTour/homeStepList.tsx +++ b/web/src/components/GuidedTour/homeStepList.tsx @@ -16,56 +16,56 @@ export enum Steps { const StepList: StepType[] = [ { selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.CreateTest), - content: ({setIsOpen}) => ( - + content: ({currentStep}) => ( + Create test ), }, { selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.Method), - content: ({setIsOpen}) => ( - + content: ({currentStep}) => ( + method ), }, { selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.Url), - content: ({setIsOpen}) => ( - + content: ({currentStep}) => ( + url ), }, { selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.Name), - content: ({setIsOpen}) => ( - + content: ({currentStep}) => ( + name ), }, { selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.Headers), - content: ({setIsOpen}) => ( - + content: ({currentStep}) => ( + headers ), }, { selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.Body), - content: ({setIsOpen}) => ( - + content: ({currentStep}) => ( + body ), }, { selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.Run), - content: ({setIsOpen}) => ( - + content: ({currentStep}) => ( + run ), diff --git a/web/src/components/GuidedTour/testDetailsStepList.tsx b/web/src/components/GuidedTour/testDetailsStepList.tsx index 40a1512ba0..1862aada1e 100644 --- a/web/src/components/GuidedTour/testDetailsStepList.tsx +++ b/web/src/components/GuidedTour/testDetailsStepList.tsx @@ -15,24 +15,24 @@ export enum Steps { const StepList: StepType[] = [ { selector: GuidedTourService.getSelectorStep(GuidedTours.TestDetails, Steps.ExecutionTime), - content: ({setIsOpen}) => ( - + content: ({currentStep}) => ( + execution time ), }, { selector: GuidedTourService.getSelectorStep(GuidedTours.TestDetails, Steps.Status), - content: ({setIsOpen}) => ( - + content: ({currentStep}) => ( + status ), }, { selector: GuidedTourService.getSelectorStep(GuidedTours.TestDetails, Steps.Assertions), - content: ({setIsOpen}) => ( - + content: ({currentStep}) => ( + assertions ), @@ -44,8 +44,8 @@ const StepList: StepType[] = [ }, { selector: GuidedTourService.getSelectorStep(GuidedTours.TestDetails, Steps.RunTest), - content: ({setIsOpen}) => ( - + content: ({currentStep}) => ( + assertions ), diff --git a/web/src/components/GuidedTour/traceStepList.tsx b/web/src/components/GuidedTour/traceStepList.tsx index 7f7e16c533..1ff6f65c0a 100644 --- a/web/src/components/GuidedTour/traceStepList.tsx +++ b/web/src/components/GuidedTour/traceStepList.tsx @@ -4,61 +4,102 @@ import GuidedTourService, {GuidedTours} from '../../services/GuidedTour.service' import {StepContent} from './StepContent'; export enum Steps { - Diagram = 'diagram', - SpanDetail = 'spanDetail', - TestResults = 'testResults', - Timeline = 'timeline', + AddTestSpec = 'add-test-spec', Graph = 'graph', - Details = 'details', Switcher = 'switcher', - Assertions = 'assertions', + MoreData = 'more-data', + SpanDetails = 'assertions', + RunButton = 'run-button', + MetaDetails = 'meta-details', } +export const switchTraceMode = (index: number) => () => { + const elementNodeListOfElement = (document.querySelectorAll('.ant-tabs-tab') as NodeListOf)[index]; + if (elementNodeListOfElement !== null) { + elementNodeListOfElement.click(); + } +}; + const StepList: StepType[] = [ { selector: GuidedTourService.getSelectorStep(GuidedTours.Trace, Steps.Graph), - content: ({setIsOpen}) => ( - + content: ({currentStep}) => ( + - The trace view window shows you the trace generated from the triggering transaction. This is the Graph view - showing the calling relationship between services. + View various responses here. When the test is finished, you will get the following results. ), + position: 'left', + action: switchTraceMode(0), }, { - selector: GuidedTourService.getSelectorStep(GuidedTours.Trace, Steps.Switcher), - content: ({setIsOpen}) => ( - + selector: GuidedTourService.getSelectorStep(GuidedTours.Trace, Steps.MoreData), + position: 'right', + content: ({currentStep}) => ( + - You can view the complete trace in a graph view or you can see the trace in a timeline view by clicking the - switcher + You can change the trigger by altering the details and saving. This will rerun the test with the updated + trigger. ), + action: switchTraceMode(0), + }, + { + selector: GuidedTourService.getSelectorStep(GuidedTours.Trace, Steps.MetaDetails), + position: 'bottom', + content: ({currentStep}) => ( + + Here you can check the basic details of your test run + + ), + action: switchTraceMode(0), + }, + { + selector: '.ant-tabs-nav-wrap', + position: 'bottom', + content: ({currentStep}) => ( + + + Click on the Trace tab to open the Trace Details screen or Test tab for adding test specifications. + + + ), + action: switchTraceMode(2), + }, + { + selector: GuidedTourService.getSelectorStep(GuidedTours.Trace, Steps.RunButton), + content: ({currentStep}) => ( + + Click on the Run Test button will trigger a new test run + + ), + action: switchTraceMode(2), }, { - selector: GuidedTourService.getSelectorStep(GuidedTours.Trace, Steps.Details), - content: ({setIsOpen}) => ( - + selector: GuidedTourService.getSelectorStep(GuidedTours.Trace, Steps.SpanDetails), + content: ({currentStep}) => ( + - Details about the selected span are shown here. They are grouped into tabs based on the type of span. The - {` 'All tab' `} shows all of the attributes + Click on the panel to see details about the selected span. These span attributes are grouped into tabs based + on the type of span. ), + action: switchTraceMode(2), }, { - selector: GuidedTourService.getSelectorStep(GuidedTours.Trace, Steps.Assertions), - content: ({setIsOpen}) => ( - + selector: GuidedTourService.getSelectorStep(GuidedTours.Trace, Steps.AddTestSpec), + content: ({currentStep}) => ( + - You can add an assertion to the attribute on any span by hovering over it and click the plus sign (+) or click - Add Assertion button below. Assertions may be added to a trace to set a value for a step in the trace to - determine success or failure. + Test Specifications can be added to set assertions to run against one or more spans in the trace. If test + specs have already been added to a test, there will be a list on the Test screen.{' '} ), + action: switchTraceMode(2), }, ]; diff --git a/web/src/components/Header/HeaderMenu.tsx b/web/src/components/Header/HeaderMenu.tsx index 6a553783a8..8a595682b0 100644 --- a/web/src/components/Header/HeaderMenu.tsx +++ b/web/src/components/Header/HeaderMenu.tsx @@ -1,10 +1,10 @@ import {useTour} from '@reactour/tour'; import {Popover, Typography} from 'antd'; -import {useMemo} from 'react'; -import {useLocation, useParams} from 'react-router-dom'; import {DOCUMENTATION_URL, GITHUB_URL} from 'constants/Common.constants'; import {useGuidedTour} from 'providers/GuidedTour/GuidedTour.provider'; +import {useMemo} from 'react'; +import {useLocation, useParams} from 'react-router-dom'; import HomeAnalyticsService from 'services/Analytics/HomeAnalytics.service'; import * as S from './Header.styled'; import {ShowOnboardingContent} from './ShowOnboardingContent'; diff --git a/web/src/components/Header/ShowOnboardingContent.tsx b/web/src/components/Header/ShowOnboardingContent.tsx index 2edb405b9b..d682dfd072 100644 --- a/web/src/components/Header/ShowOnboardingContent.tsx +++ b/web/src/components/Header/ShowOnboardingContent.tsx @@ -1,4 +1,5 @@ import {Button, Divider, Typography} from 'antd'; +import {switchTraceMode} from '../GuidedTour/traceStepList'; import {PrimaryButton} from '../TestResults/TestResults.styled'; export const ShowOnboardingContent = (onGuidedTourClick: () => void, onShow: () => void, onClose: () => void) => ( @@ -15,6 +16,7 @@ export const ShowOnboardingContent = (onGuidedTourClick: () => void, onShow: () onClick={() => { onShow(); onClose(); + switchTraceMode(0)(); onGuidedTourClick(); }} > diff --git a/web/src/components/RunDetailLayout/HeaderLeft.tsx b/web/src/components/RunDetailLayout/HeaderLeft.tsx index 2bdf331881..e879522c74 100644 --- a/web/src/components/RunDetailLayout/HeaderLeft.tsx +++ b/web/src/components/RunDetailLayout/HeaderLeft.tsx @@ -2,6 +2,8 @@ import {useNavigate} from 'react-router-dom'; import {useTestRun} from 'providers/TestRun/TestRun.provider'; import Date from 'utils/Date'; +import GuidedTourService, {GuidedTours} from '../../services/GuidedTour.service'; +import {Steps} from '../GuidedTour/traceStepList'; import Info from './Info'; import * as S from './RunDetailLayout.styled'; @@ -19,7 +21,7 @@ const HeaderLeft = ({name, testId, triggerType}: IProps) => { return ( navigate(`/test/${testId}`)} /> - + {name} (v{run.testVersion}) diff --git a/web/src/components/RunDetailLayout/HeaderRight.tsx b/web/src/components/RunDetailLayout/HeaderRight.tsx index 6b6d62b1f9..bca5cd4b1a 100644 --- a/web/src/components/RunDetailLayout/HeaderRight.tsx +++ b/web/src/components/RunDetailLayout/HeaderRight.tsx @@ -1,11 +1,13 @@ import {Button} from 'antd'; +import {Steps} from 'components/GuidedTour/traceStepList'; import RunActionsMenu from 'components/RunActionsMenu'; import TestActions from 'components/TestActions'; import TestState from 'components/TestState'; import {TestState as TestStateEnum} from 'constants/TestRun.constants'; -import {useTestSpecs} from 'providers/TestSpecs/TestSpecs.provider'; -import {useTestRun} from 'providers/TestRun/TestRun.provider'; import {useTest} from 'providers/Test/Test.provider'; +import {useTestRun} from 'providers/TestRun/TestRun.provider'; +import {useTestSpecs} from 'providers/TestSpecs/TestSpecs.provider'; +import GuidedTourService, {GuidedTours} from '../../services/GuidedTour.service'; import * as S from './RunDetailLayout.styled'; interface IProps { @@ -29,7 +31,13 @@ const HeaderRight = ({testId, testVersion}: IProps) => { )} {!isDraftMode && state && state === TestStateEnum.FINISHED && ( - )} diff --git a/web/src/components/RunDetailLayout/RunDetailLayout.tsx b/web/src/components/RunDetailLayout/RunDetailLayout.tsx index 986af32987..6a5cad9a2f 100644 --- a/web/src/components/RunDetailLayout/RunDetailLayout.tsx +++ b/web/src/components/RunDetailLayout/RunDetailLayout.tsx @@ -1,13 +1,15 @@ import {Tabs, TabsProps} from 'antd'; -import {useMemo} from 'react'; -import {useNavigate, useParams} from 'react-router-dom'; import RunDetailTest from 'components/RunDetailTest'; import RunDetailTrace from 'components/RunDetailTrace'; import RunDetailTrigger from 'components/RunDetailTrigger'; import {RunDetailModes} from 'constants/TestRun.constants'; import {useTestRun} from 'providers/TestRun/TestRun.provider'; +import {useMemo} from 'react'; +import {useNavigate, useParams} from 'react-router-dom'; +import GuidedTourService, {GuidedTours} from 'services/GuidedTour.service'; import {TTest} from 'types/Test.types'; +import {Steps} from '../GuidedTour/traceStepList'; import HeaderLeft from './HeaderLeft'; import HeaderRight from './HeaderRight'; import * as S from './RunDetailLayout.styled'; @@ -17,7 +19,10 @@ interface IProps { } const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => ( - + ); @@ -45,6 +50,7 @@ const RunDetailLayout = ({test: {id, name, trigger, version = 1}, test}: IProps) }} renderTabBar={renderTabBar} tabBarExtraContent={tabBarExtraContent} + id="cesco" > diff --git a/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.tsx b/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.tsx index b6975638d3..7dcca88504 100644 --- a/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.tsx +++ b/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.tsx @@ -1,6 +1,8 @@ import {Tabs} from 'antd'; import {TriggerTypes} from '../../constants/Test.constants'; +import GuidedTourService, {GuidedTours} from '../../services/GuidedTour.service'; import {TTriggerResult} from '../../types/Test.types'; +import {Steps} from '../GuidedTour/traceStepList'; import ResponseBody from './ResponseBody'; import ResponseHeaders from './ResponseHeaders'; import * as S from './RunDetailTriggerResponse.styled'; @@ -32,7 +34,7 @@ const RunDetailTriggerResponse = ({ - + diff --git a/web/src/components/SpanDetail/Header.tsx b/web/src/components/SpanDetail/Header.tsx index 7541b51b29..5066d84fef 100644 --- a/web/src/components/SpanDetail/Header.tsx +++ b/web/src/components/SpanDetail/Header.tsx @@ -1,10 +1,7 @@ import {SettingOutlined, ToolOutlined} from '@ant-design/icons'; - -import {Steps} from 'components/GuidedTour/traceStepList'; import * as SSpanNode from 'components/Visualization/components/DAG/SpanNode.styled'; import {SemanticGroupNamesToText} from 'constants/SemanticGroupNames.constants'; import {SpanKindToText} from 'constants/Span.constants'; -import GuidedTourService, {GuidedTours} from 'services/GuidedTour.service'; import SpanService from 'services/Span.service'; import {TSpan} from 'types/Span.types'; import * as S from './SpanDetail.styled'; @@ -19,7 +16,7 @@ const Header = ({span, totalFailedChecks, totalPassedChecks}: IProps) => { const {kind, name, service, system, type} = SpanService.getSpanInfo(span); return ( - + {name} diff --git a/web/src/components/TestResults/Header.tsx b/web/src/components/TestResults/Header.tsx index 11bad2cda7..2623382dfa 100644 --- a/web/src/components/TestResults/Header.tsx +++ b/web/src/components/TestResults/Header.tsx @@ -1,9 +1,9 @@ import {Steps} from 'components/GuidedTour/traceStepList'; import {useTestSpecForm} from 'components/TestSpecForm/TestSpecForm.provider'; -import GuidedTourService, {GuidedTours} from 'services/GuidedTour.service'; import SpanService from 'services/Span.service'; import {TSpan} from 'types/Span.types'; import {singularOrPlural} from 'utils/Common'; +import GuidedTourService, {GuidedTours} from '../../services/GuidedTour.service'; import * as S from './TestResults.styled'; interface IProps { @@ -27,7 +27,7 @@ const Header = ({selectedSpan, totalFailedSpecs, totalPassedSpecs}: IProps) => { }; return ( - + Test Results
@@ -47,7 +47,11 @@ const Header = ({selectedSpan, totalFailedSpecs, totalPassedSpecs}: IProps) => {
- + Add Test Spec diff --git a/web/src/providers/GuidedTour/GuidedTour.provider.tsx b/web/src/providers/GuidedTour/GuidedTour.provider.tsx index d34820fb0f..701c1e4584 100644 --- a/web/src/providers/GuidedTour/GuidedTour.provider.tsx +++ b/web/src/providers/GuidedTour/GuidedTour.provider.tsx @@ -1,11 +1,11 @@ import {TourProps, useTour} from '@reactour/tour'; -import {createContext, useCallback, useContext, useEffect, useMemo, useState} from 'react'; -import {useLocation} from 'react-router-dom'; -import GuidedTourService, {GuidedTours} from 'services/GuidedTour.service'; import HomeStepList from 'components/GuidedTour/homeStepList'; -import TraceStepList from 'components/GuidedTour/traceStepList'; import TestDetailsStepList from 'components/GuidedTour/testDetailsStepList'; +import TraceStepList from 'components/GuidedTour/traceStepList'; import {noop} from 'lodash'; +import {createContext, useCallback, useContext, useEffect, useMemo, useState} from 'react'; +import {useLocation, useNavigate} from 'react-router-dom'; +import GuidedTourService, {GuidedTours} from 'services/GuidedTour.service'; interface IContext { isTriggerVisible: boolean; @@ -36,9 +36,10 @@ const GuidedTourProvider: React.FC = ({children}) => { const tourProps = useTour(); const {setSteps} = tourProps; + const navigate = useNavigate(); useEffect(() => { setSteps(StepListMap[tour]); - }, [tour, setSteps]); + }, [tour, setSteps, navigate]); useEffect(() => { const isComplete = GuidedTourService.getIsComplete(tour);