diff --git a/static/app/components/tours/issueDetails.tsx b/static/app/components/tours/issueDetails.tsx index 7a6fa0f558dcab..5119db80edf998 100644 --- a/static/app/components/tours/issueDetails.tsx +++ b/static/app/components/tours/issueDetails.tsx @@ -42,20 +42,10 @@ export function useIssueDetailsTourReducer( } export const IssueDetailsTourContext = createContext>({ - tour: { - currentStep: null, - isAvailable: false, - orderedStepIds: ORDERED_ISSUE_DETAILS_TOUR_STEP_IDS, - }, + currentStep: null, + isAvailable: false, + orderedStepIds: ORDERED_ISSUE_DETAILS_TOUR_STEP_IDS, dispatch: () => {}, - registry: { - [IssueDetailsTour.ISSUE_DETAILS_AGGREGATES]: null, - [IssueDetailsTour.ISSUE_DETAILS_FILTERS]: null, - [IssueDetailsTour.ISSUE_DETAILS_EVENT_DETAILS]: null, - [IssueDetailsTour.ISSUE_DETAILS_NAVIGATION]: null, - [IssueDetailsTour.ISSUE_DETAILS_WORKFLOWS]: null, - [IssueDetailsTour.ISSUE_DETAILS_SIDEBAR]: null, - }, }); export function useIssueDetailsTour(): TourContextType { diff --git a/static/app/components/tours/styles.tsx b/static/app/components/tours/styles.tsx index f52be95b67ceb5..3fb244e1ea7296 100644 --- a/static/app/components/tours/styles.tsx +++ b/static/app/components/tours/styles.tsx @@ -1,4 +1,4 @@ -import {ClassNames, useTheme} from '@emotion/react'; +import {useTheme} from '@emotion/react'; import styled from '@emotion/styled'; import {Button} from 'sentry/components/button'; @@ -15,9 +15,8 @@ import {space} from 'sentry/styles/space'; import type {UseHoverOverlayProps} from 'sentry/utils/useHoverOverlay'; export function TourBlurContainer({children}: {children: React.ReactNode}) { - const {tour} = useIssueDetailsTour(); - const isTourActive = tour.currentStep !== null; - + const {currentStep} = useIssueDetailsTour(); + const isTourActive = currentStep !== null; return ( {children} @@ -40,68 +39,55 @@ export function TourElement({ position, }: TourElementProps) { const theme = useTheme(); - const {tour, dispatch} = tourContext; - const {orderedStepIds} = tour; - const currentStepIndex = tour.currentStep - ? orderedStepIds.indexOf(tour.currentStep.id) - : -1; + const {currentStep, orderedStepIds, dispatch} = tourContext; + const currentStepIndex = currentStep ? orderedStepIds.indexOf(currentStep.id) : -1; const hasPreviousStep = currentStepIndex > 0; const hasNextStep = currentStepIndex < orderedStepIds.length - 1; return ( - - {({css}) => ( - - -
- {currentStepIndex + 1}/{orderedStepIds.length} -
-
- dispatch({type: 'END_TOUR'})} - icon={} - aria-label={t('Close')} - borderless - size="sm" - /> -
-
- {step.title} - {step.description} - - {hasPreviousStep && ( - dispatch({type: 'PREVIOUS_STEP'})} - > - {t('Previous')} - - )} - {hasNextStep ? ( - dispatch({type: 'NEXT_STEP'})}> - {t('Next')} - - ) : ( - dispatch({type: 'END_TOUR'})}> - {t('Finish tour')} - - )} - - - } - > - {children} -
- )} -
+ + +
+ {currentStepIndex + 1}/{orderedStepIds.length} +
+
+ dispatch({type: 'END_TOUR'})} + icon={} + aria-label={t('Close')} + borderless + size="sm" + /> +
+
+ {step.title} + {step.description} + + {hasPreviousStep && ( + dispatch({type: 'PREVIOUS_STEP'})}> + {t('Previous')} + + )} + {hasNextStep ? ( + dispatch({type: 'NEXT_STEP'})}> + {t('Next')} + + ) : ( + dispatch({type: 'END_TOUR'})}> + {t('Finish tour')} + + )} + + + } + > + {children} +
); } diff --git a/static/app/components/tours/tourContext.tsx b/static/app/components/tours/tourContext.tsx index 88797ca22cae1d..33d0624c24fe50 100644 --- a/static/app/components/tours/tourContext.tsx +++ b/static/app/components/tours/tourContext.tsx @@ -174,13 +174,11 @@ export function useTourReducer({ const [tour, dispatch] = useReducer(reducer, initState); - return {tour, registry, dispatch}; + return {...tour, dispatch}; } -export interface TourContextType { +export interface TourContextType extends TourState { dispatch: Dispatch>; - registry: TourRegistry; - tour: TourState; } type TourRegistry = { @@ -219,14 +217,14 @@ export function useRegisterTourStep({ ); // Use the dispatch and tour state from the props context - const {tour, dispatch} = tourContext; + const {currentStep, dispatch} = tourContext; // Register the step in the registry useEffect(() => { dispatch({type: 'REGISTER_STEP', step}); }, [step, dispatch]); - const isActiveStep = tour?.currentStep?.id === step.id; + const isActiveStep = currentStep?.id === step.id; // Return a callback that renders the element wrapped if the tour is active, registered and matches the step const element = isActiveStep ? (