new onboarding

kubeshop · Oct 3, 2022 · 0426df3 · 0426df3
1 parent 2ffa133
commit 0426df3
Show file tree

Hide file tree

Showing 20 changed files with 220 additions and 123 deletions.
diff --git 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) => {
         <ReflexSplitter>
           <S.ButtonContainer>
             <Button
+              data-tour={GuidedTourService.getStep(GuidedTours.Trace, Steps.SpanDetails)}
               icon={isOpen ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
               onClick={event => {
                 event.stopPropagation();

diff --git a/web/src/components/EditTest/EditTest.tsx b/web/src/components/EditTest/EditTest.tsx
@@ -1,12 +1,14 @@
 import {Button, Form} from 'antd';
 import EditTestForm from 'components/EditTestForm';
+import {Steps} from 'components/GuidedTour/traceStepList';
 import {TriggerTypeToPlugin} from 'constants/Plugins.constants';
 import useValidateTestDraft from 'hooks/useValidateTestDraft';
 import {useTest} from 'providers/Test/Test.provider';
 import {useCallback} from 'react';
 import {TDraftTest, TTest} from 'types/Test.types';
 import {TestState} from 'constants/TestRun.constants';
 import {useTestRun} from 'providers/TestRun/TestRun.provider';
+import GuidedTourService, {GuidedTours} from '../../services/GuidedTour.service';
 import * as S from './EditTest.styled';
 
 interface IProps {
@@ -33,7 +35,7 @@ const EditTest = ({test}: IProps) => {
 
   return (
     <S.Wrapper data-cy="edit-test-form">
-      <S.FormContainer>
+      <S.FormContainer data-tour={GuidedTourService.getStep(GuidedTours.Trace, Steps.MoreData)}>
         <S.Title>Edit Test</S.Title>
         <EditTestForm form={form} test={test} onSubmit={handleOnSubmit} onValidation={onValidate} />
         <S.ButtonsContainer>

diff --git a/web/src/components/GuidedTour/GuidedTour.tsx b/web/src/components/GuidedTour/GuidedTour.tsx
@@ -11,10 +11,14 @@ const GuidedTour: React.FC = ({children}) => (
     prevButton={PreviousButton}
     nextButton={NextButton}
     showCloseButton={false}
+    onClickMask={clickProps => {
+      clickProps.setCurrentStep(0);
+      clickProps.setIsOpen(false);
+    }}
     styles={{
       badge: props => ({...props, display: 'none'}),
-      navigation: props => ({...props, display: 'none', margin: 0}),
-      controls: props => ({...props, margin: 0, padding: 16, paddingTop: 0}),
+      navigation: props => ({...props, display: 'none', margin: 0, padding: '10 20px'}),
+      controls: props => ({...props, margin: 0, paddingLeft: 16, paddingRight: 16, paddingTop: 8, paddingBottom: 8}),
       popover: (base, state) => {
         return {
           ...base,

diff --git a/web/src/components/GuidedTour/NextButton.tsx b/web/src/components/GuidedTour/NextButton.tsx
@@ -1,20 +1,34 @@
 import {BtnFnProps} from '@reactour/tour/dist/types';
-import {PrimaryButton} from 'components/TestResults/TestResults.styled';
+import {Button} from 'antd';
 
 export const NextButton: React.FC<BtnFnProps> = ({currentStep, setCurrentStep, stepsLength, setIsOpen}) => {
   const isLast = currentStep === stepsLength - 1;
+  let isFirst = currentStep === 0;
   return (
-    <PrimaryButton
-      onClick={() => {
-        if (isLast) {
-          setIsOpen(false);
-          setCurrentStep(0);
-          return;
-        }
-        setCurrentStep(prevState => Number(prevState) + 1);
-      }}
-    >
-      {isLast ? 'Ok' : 'Next'}
-    </PrimaryButton>
+    <div>
+      <Button
+        type="text"
+        onClick={() => {
+          if (!isFirst) {
+            setCurrentStep(prevState => Number(prevState) - 1);
+          }
+        }}
+      >
+        Prev
+      </Button>
+      <Button
+        type="text"
+        onClick={() => {
+          if (isLast) {
+            setIsOpen(false);
+            setCurrentStep(0);
+            return;
+          }
+          setCurrentStep(prevState => Number(prevState) + 1);
+        }}
+      >
+        {isLast ? 'Ok' : 'Next'}
+      </Button>
+    </div>
   );
 };
diff --git 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<BtnFnProps> = ({currentStep, stepsLength}) => (
-  <div>
-    <Typography.Text>{` ${currentStep + 1} of ${stepsLength}`}</Typography.Text>
-  </div>
+export const PreviousButton: React.FC<BtnFnProps> = ({setIsOpen, setCurrentStep}) => (
+  <Button
+    type="link"
+    onClick={() => {
+      setCurrentStep(0);
+      setIsOpen(false);
+    }}
+  >
+    Skip
+  </Button>
 );
diff --git 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
@@ -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<React.SetStateAction<Boolean>>;
+  stepsLength: number;
+  currentStep: number;
 }
 
-export const StepContent: React.FC<IProps> = ({setIsOpen, title, children}) => (
-  <>
-    <Header>
-      <TitleContainer>
-        <Title>{title}</Title>
-      </TitleContainer>
-      <Button
-        style={{width: 24, height: 24}}
-        type="link"
-        icon={<CloseOutlined />}
-        onClick={() => setIsOpen?.(o => !o)}
-      />
-    </Header>
-    <Divider />
-    <Container>{children}</Container>
-    <Divider />
-  </>
-);
+export const StepContent: React.FC<IProps> = ({title, children, stepsLength, currentStep}) => {
+  return (
+    <>
+      <Header>
+        <TitleContainer>
+          <Title>{title}</Title>
+          <TitleText>{` ${currentStep + 1} of ${stepsLength}`}</TitleText>
+        </TitleContainer>
+      </Header>
+      <Container>{children}</Container>
+      <Divider />
+    </>
+  );
+};
diff --git 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
@@ -16,56 +16,56 @@ export enum Steps {
 const StepList: StepType[] = [
   {
     selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.CreateTest),
-    content: ({setIsOpen}) => (
-      <StepContent title="Create test" setIsOpen={setIsOpen}>
+    content: ({currentStep}) => (
+      <StepContent title="Create test" currentStep={currentStep} stepsLength={StepList.length}>
         <Typography.Text>Create test</Typography.Text>
       </StepContent>
     ),
   },
   {
     selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.Method),
-    content: ({setIsOpen}) => (
-      <StepContent title="method" setIsOpen={setIsOpen}>
+    content: ({currentStep}) => (
+      <StepContent title="method" currentStep={currentStep} stepsLength={StepList.length}>
         <Typography.Text>method</Typography.Text>
       </StepContent>
     ),
   },
   {
     selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.Url),
-    content: ({setIsOpen}) => (
-      <StepContent title="url" setIsOpen={setIsOpen}>
+    content: ({currentStep}) => (
+      <StepContent title="url" currentStep={currentStep} stepsLength={StepList.length}>
         <Typography.Text>url</Typography.Text>
       </StepContent>
     ),
   },
   {
     selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.Name),
-    content: ({setIsOpen}) => (
-      <StepContent title="name" setIsOpen={setIsOpen}>
+    content: ({currentStep}) => (
+      <StepContent title="name" currentStep={currentStep} stepsLength={StepList.length}>
         <Typography.Text>name</Typography.Text>
       </StepContent>
     ),
   },
   {
     selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.Headers),
-    content: ({setIsOpen}) => (
-      <StepContent title="headers" setIsOpen={setIsOpen}>
+    content: ({currentStep}) => (
+      <StepContent title="headers" currentStep={currentStep} stepsLength={StepList.length}>
         <Typography.Text>headers</Typography.Text>
       </StepContent>
     ),
   },
   {
     selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.Body),
-    content: ({setIsOpen}) => (
-      <StepContent title="body" setIsOpen={setIsOpen}>
+    content: ({currentStep}) => (
+      <StepContent title="body" currentStep={currentStep} stepsLength={StepList.length}>
         <Typography.Text>body</Typography.Text>
       </StepContent>
     ),
   },
   {
     selector: GuidedTourService.getSelectorStep(GuidedTours.Home, Steps.Run),
-    content: ({setIsOpen}) => (
-      <StepContent title="Test View" setIsOpen={setIsOpen}>
+    content: ({currentStep}) => (
+      <StepContent title="Test View" currentStep={currentStep} stepsLength={StepList.length}>
         <Typography.Text>run</Typography.Text>
       </StepContent>
     ),

diff --git 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}) => (
-      <StepContent title="Test View" setIsOpen={setIsOpen}>
+    content: ({currentStep}) => (
+      <StepContent title="Test View" currentStep={currentStep} stepsLength={StepList.length}>
         <Typography.Text>execution time</Typography.Text>
       </StepContent>
     ),
   },
   {
     selector: GuidedTourService.getSelectorStep(GuidedTours.TestDetails, Steps.Status),
-    content: ({setIsOpen}) => (
-      <StepContent title="Test View" setIsOpen={setIsOpen}>
+    content: ({currentStep}) => (
+      <StepContent title="Test View" currentStep={currentStep} stepsLength={StepList.length}>
         <Typography.Text>status</Typography.Text>
       </StepContent>
     ),
   },
   {
     selector: GuidedTourService.getSelectorStep(GuidedTours.TestDetails, Steps.Assertions),
-    content: ({setIsOpen}) => (
-      <StepContent title="Test View" setIsOpen={setIsOpen}>
+    content: ({currentStep}) => (
+      <StepContent title="Test View" currentStep={currentStep} stepsLength={StepList.length}>
         <Typography.Text>assertions</Typography.Text>
       </StepContent>
     ),
@@ -44,8 +44,8 @@ const StepList: StepType[] = [
   },
   {
     selector: GuidedTourService.getSelectorStep(GuidedTours.TestDetails, Steps.RunTest),
-    content: ({setIsOpen}) => (
-      <StepContent title="Test View" setIsOpen={setIsOpen}>
+    content: ({currentStep}) => (
+      <StepContent title="Test View" currentStep={currentStep} stepsLength={StepList.length}>
         <Typography.Text>assertions</Typography.Text>
       </StepContent>
     ),