fix(frontend): fix test run onboarding (#3220)

kubeshop · Oct 9, 2023 · f5302ae · f5302ae
1 parent 0d9a86f
commit f5302ae
Show file tree

Hide file tree

Showing 12 changed files with 111 additions and 452 deletions.
diff --git a/web/cypress/e2e/TestRunDetail/Onboarding.spec.ts b/web/cypress/e2e/TestRunDetail/Onboarding.spec.ts
@@ -0,0 +1,26 @@
+describe('Show Onboarding', () => {
+  beforeEach(() => cy.createTest());
+  afterEach(() => cy.deleteTest());
+
+  it('should init the onboarding flow', () => {
+    cy.get('[data-cy=menu-link]').click();
+    cy.get('[data-cy=menu-onboarding]').click();
+
+    cy.get('[data-cy=onboarding-container]').within(() => {
+      cy.get('[data-cy=onboarding-step]').should('contain.text', '1 of 5');
+      cy.get('[data-cy=onboarding-next]').click();
+
+      cy.get('[data-cy=onboarding-step]').should('contain.text', '2 of 5');
+      cy.get('[data-cy=onboarding-next]').click();
+
+      cy.get('[data-cy=onboarding-step]').should('contain.text', '3 of 5');
+      cy.get('[data-cy=onboarding-next]').click();
+
+      cy.get('[data-cy=onboarding-step]').should('contain.text', '4 of 5');
+      cy.get('[data-cy=onboarding-next]').click();
+
+      cy.get('[data-cy=onboarding-step]').should('contain.text', '5 of 5');
+      cy.get('[data-cy=onboarding-next]').click();
+    });
+  });
+});
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -55,7 +55,6 @@
     "react-scripts": "5.0.1",
     "react-spaces": "0.3.8",
     "react-syntax-highlighter": "15.5.0",
-    "react-use": "17.4.0",
     "redux-first-history": "5.0.12",
     "styled-components": "5.3.3",
     "typescript": "5.0.2"

diff --git a/web/src/components/GuidedTour/StepContent.tsx b/web/src/components/GuidedTour/StepContent.tsx
@@ -14,10 +14,10 @@ const StepContent = ({
   skipProps,
   isLastStep,
 }: TooltipRenderProps) => (
-  <S.Container {...tooltipProps}>
+  <S.Container {...tooltipProps} data-cy="onboarding-container">
     <S.Header>
       <S.Title>{step.title}</S.Title>
-      <S.TitleText>{` ${index + 1} of ${size}`}</S.TitleText>
+      <S.TitleText data-cy="onboarding-step">{` ${index + 1} of ${size}`}</S.TitleText>
     </S.Header>
 
     <S.Body>
@@ -40,7 +40,7 @@ const StepContent = ({
           </Button>
         )}
         {continuous && (
-          <Button {...primaryProps} type="link">
+          <Button {...primaryProps} type="link" data-cy="onboarding-next">
             {isLastStep ? 'Done' : 'Next'}
           </Button>
         )}

diff --git a/web/src/components/GuidedTour/steps.ts b/web/src/components/GuidedTour/steps.ts
@@ -27,7 +27,6 @@ export const CallbackByGuidedTour: Record<
       if (action === ACTIONS.NEXT && index === 2) {
         // Need to switch the page to Test mode. The Test mode page will update the step on mount.
         switchTestRunMode(2);
-        return;
       }
 
       // Move to the next step.

diff --git a/web/src/components/Header/HelpMenu.tsx b/web/src/components/Header/HelpMenu.tsx
@@ -49,7 +49,11 @@ function getMenuItems({
     },
     {
       key: '4',
-      label: <a onClick={onClickOnboarding}>Show Onboarding</a>,
+      label: (
+        <a data-cy="menu-onboarding" onClick={onClickOnboarding}>
+          Show Onboarding
+        </a>
+      ),
       icon: <BulbOutlined />,
       disabled: !isOnboardingActive,
     },

diff --git a/web/src/components/Layout/Layout.tsx b/web/src/components/Layout/Layout.tsx
@@ -8,6 +8,7 @@ import Header from 'components/Header';
 import Link from 'components/Link';
 import useRouterSync from 'hooks/useRouterSync';
 import ConfirmationModalProvider from 'providers/ConfirmationModal';
+import GuidedTourProvider from 'providers/GuidedTour';
 import VariableSetProvider from 'providers/VariableSet';
 import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import MissingVariablesModalProvider from 'providers/MissingVariablesModal/MissingVariablesModal.provider';
@@ -63,48 +64,50 @@ const Layout = ({hasMenu = false}: IProps) => {
         <FileViewerModalProvider>
           <ConfirmationModalProvider>
             <VariableSetProvider>
-              <S.Layout hasSider>
-                {hasMenu && (
-                  <S.Sider width={256}>
-                    <S.LogoContainer>
-                      <Link to="/">
-                        <img alt="Tracetest logo" src={logoAsset} />
-                      </Link>
-                    </S.LogoContainer>
+              <GuidedTourProvider>
+                <S.Layout hasSider>
+                  {hasMenu && (
+                    <S.Sider width={256}>
+                      <S.LogoContainer>
+                        <Link to="/">
+                          <img alt="Tracetest logo" src={logoAsset} />
+                        </Link>
+                      </S.LogoContainer>
 
-                    <S.SiderContent>
-                      <S.MenuContainer>
-                        <Menu
-                          defaultSelectedKeys={[
-                            menuItems.findIndex(value => value.path === pathname).toString() || '0',
-                          ]}
-                          items={menuItems}
-                          mode="inline"
-                          theme="dark"
-                        />
-                      </S.MenuContainer>
+                      <S.SiderContent>
+                        <S.MenuContainer>
+                          <Menu
+                            defaultSelectedKeys={[
+                              menuItems.findIndex(value => value.path === pathname).toString() || '0',
+                            ]}
+                            items={menuItems}
+                            mode="inline"
+                            theme="dark"
+                          />
+                        </S.MenuContainer>
 
-                      <S.MenuContainer>
-                        <Menu
-                          defaultSelectedKeys={[
-                            footerMenuItems.findIndex(value => value.path === pathname).toString() || '0',
-                          ]}
-                          items={footerMenuItems}
-                          mode="inline"
-                          theme="dark"
-                        />
-                      </S.MenuContainer>
-                    </S.SiderContent>
-                  </S.Sider>
-                )}
+                        <S.MenuContainer>
+                          <Menu
+                            defaultSelectedKeys={[
+                              footerMenuItems.findIndex(value => value.path === pathname).toString() || '0',
+                            ]}
+                            items={footerMenuItems}
+                            mode="inline"
+                            theme="dark"
+                          />
+                        </S.MenuContainer>
+                      </S.SiderContent>
+                    </S.Sider>
+                  )}
 
-                <S.Layout>
-                  <Header hasLogo={!hasMenu} isNoTracingMode={isNoTracingMode && !isLoading} />
-                  <S.Content $hasMenu={hasMenu}>
-                    <Outlet />
-                  </S.Content>
+                  <S.Layout>
+                    <Header hasLogo={!hasMenu} isNoTracingMode={isNoTracingMode && !isLoading} />
+                    <S.Content $hasMenu={hasMenu}>
+                      <Outlet />
+                    </S.Content>
+                  </S.Layout>
                 </S.Layout>
-              </S.Layout>
+              </GuidedTourProvider>
             </VariableSetProvider>
           </ConfirmationModalProvider>
         </FileViewerModalProvider>

diff --git a/web/src/components/ResizablePanels/LeftPanel.tsx b/web/src/components/ResizablePanels/LeftPanel.tsx
@@ -11,9 +11,18 @@ interface IProps {
   tooltip?: string;
   isToolTipVisible?: boolean;
   onOpen?(): void;
+  dataTour?: string;
 }
 
-const LeftPanel = ({panel, order = 1, tooltip, isToolTipVisible = false, children, onOpen = noop}: IProps) => {
+const LeftPanel = ({
+  panel,
+  order = 1,
+  tooltip,
+  isToolTipVisible = false,
+  children,
+  onOpen = noop,
+  dataTour,
+}: IProps) => {
   const {size, toggle, onStopResize} = useResizablePanel({panel});
 
   useLayoutEffect(() => {
@@ -37,6 +46,7 @@ const LeftPanel = ({panel, order = 1, tooltip, isToolTipVisible = false, childre
           tooltip={tooltip}
           isToolTipVisible={isToolTipVisible}
           tooltipPlacement="right"
+          dataTour={dataTour}
         />
       )}
     >

diff --git a/web/src/components/ResizablePanels/Splitter.tsx b/web/src/components/ResizablePanels/Splitter.tsx
@@ -13,6 +13,7 @@ interface IProps {
   tooltipPlacement?: TooltipProps['placement'];
   onMouseDown(e: React.MouseEvent<HTMLElement, MouseEvent>): void;
   onTouchStart(e: React.TouchEvent<HTMLElement>): void;
+  dataTour?: string;
 }
 
 const Splitter = ({
@@ -26,6 +27,7 @@ const Splitter = ({
   tooltip,
   tooltipPlacement = 'right',
   isToolTipVisible = false,
+  dataTour,
 }: IProps) => {
   const button = (
     <S.SplitterButton
@@ -39,6 +41,7 @@ const Splitter = ({
       onMouseDown={event => event.stopPropagation()}
       shape="circle"
       type="primary"
+      data-tour={dataTour}
     />
   );
 

diff --git a/web/src/components/RunDetailTest/SpanDetailsPanel.tsx b/web/src/components/RunDetailTest/SpanDetailsPanel.tsx
@@ -1,3 +1,4 @@
+import {StepsID} from 'components/GuidedTour/testRunSteps';
 import SpanDetail, {TestAttributeRow, TestSubHeader} from 'components/SpanDetail';
 import {useSpan} from 'providers/Span/Span.provider';
 import useAttributePanelTooltip from 'hooks/useAttributePanelTooltip';
@@ -14,7 +15,13 @@ const SpanDetailsPanel = () => {
   const {tooltip, isVisible, onClose} = useAttributePanelTooltip();
 
   return (
-    <LeftPanel panel={panel} tooltip={tooltip} isToolTipVisible={isVisible} onOpen={onClose}>
+    <LeftPanel
+      panel={panel}
+      tooltip={tooltip}
+      isToolTipVisible={isVisible}
+      onOpen={onClose}
+      dataTour={StepsID.SpanDetails}
+    >
       {size => (
         <PanelContainer $isOpen={size.isOpen}>
           <SpanDetail span={selectedSpan} AttributeRowComponent={TestAttributeRow} SubHeaderComponent={TestSubHeader} />

diff --git a/web/src/components/RunDetailTest/TestPanel.tsx b/web/src/components/RunDetailTest/TestPanel.tsx
@@ -1,7 +1,6 @@
 import {Tabs} from 'antd';
 import {useCallback, useState} from 'react';
 import {useSearchParams} from 'react-router-dom';
-import {useMount} from 'react-use';
 import {VisualizationType} from 'components/RunDetailTrace/RunDetailTrace';
 import TestOutputs from 'components/TestOutputs';
 import TestOutputForm from 'components/TestOutputForm/TestOutputForm';
@@ -14,7 +13,6 @@ import {TestState} from 'constants/TestRun.constants';
 import {TAssertionResultEntry} from 'models/AssertionResults.model';
 import TestRun from 'models/TestRun.model';
 import TestRunEvent from 'models/TestRunEvent.model';
-import {useGuidedTour} from 'providers/GuidedTour/GuidedTour.provider';
 import {useSpan} from 'providers/Span/Span.provider';
 import {useTestOutput} from 'providers/TestOutput/TestOutput.provider';
 import {useTestSpecs} from 'providers/TestSpecs/TestSpecs.provider';
@@ -54,13 +52,6 @@ const TestPanel = ({run, testId, runEvents}: IProps) => {
     onValidate,
   } = useTestOutput();
   const [visualizationType, setVisualizationType] = useState(VisualizationType.Dag);
-  const {isGuidedTourRunning, setGuidedTourStep} = useGuidedTour();
-
-  useMount(() => {
-    if (isGuidedTourRunning) {
-      setGuidedTourStep(3);
-    }
-  });
 
   const handleClose = useCallback(() => {
     onSetFocusedSpan('');

diff --git a/web/src/pages/RunDetail/RunDetail.tsx b/web/src/pages/RunDetail/RunDetail.tsx
@@ -2,7 +2,6 @@ import {useParams} from 'react-router-dom';
 
 import TestSpecFormProvider from 'components/TestSpecForm/TestSpecForm.provider';
 import withAnalytics from 'components/WithAnalytics/WithAnalytics';
-import GuidedTourProvider from 'providers/GuidedTour';
 import TestOutputProvider from 'providers/TestOutput';
 import SpanProvider from 'providers/Span';
 import TestSpecsProvider from 'providers/TestSpecs';
@@ -13,19 +12,17 @@ const RunDetail = () => {
   const {testId = '', runId = 0} = useParams();
 
   return (
-    <GuidedTourProvider>
-      <TestRunProvider testId={testId} runId={Number(runId)}>
-        <TestSpecsProvider testId={testId} runId={Number(runId)}>
-          <TestSpecFormProvider testId={testId}>
-            <SpanProvider>
-              <TestOutputProvider testId={testId} runId={Number(runId)}>
-                <Content />
-              </TestOutputProvider>
-            </SpanProvider>
-          </TestSpecFormProvider>
-        </TestSpecsProvider>
-      </TestRunProvider>
-    </GuidedTourProvider>
+    <TestRunProvider testId={testId} runId={Number(runId)}>
+      <TestSpecsProvider testId={testId} runId={Number(runId)}>
+        <TestSpecFormProvider testId={testId}>
+          <SpanProvider>
+            <TestOutputProvider testId={testId} runId={Number(runId)}>
+              <Content />
+            </TestOutputProvider>
+          </SpanProvider>
+        </TestSpecFormProvider>
+      </TestSpecsProvider>
+    </TestRunProvider>
   );
 };