Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Let tours be skipped on view enter and started later imperatively #233

Merged
merged 2 commits into from
Feb 18, 2025

Conversation

pkalita-lbl
Copy link
Collaborator

Fixes #231

The StudyView component conditionally launches on modal on data fetch. If it (or any components that it renders) starts a tour on view enter and the modal is opened soon after when the data fetch settles, the result is a tour highlighting an element that is hidden under the modal.

These changes address this by:

  • Adding a prop to the useAppTour hook that allows a client to turn off initiating the tour on view enter
  • Adding a return value from useAppTour that includes a function which can imperatively start the tour (or at least attempt to, depending on whether the tour has already been presented)
  • Use an extra bit of state in StudyView to control whether it is safe to present tours. StudyView and its children can observe this state to imperatively start a tour when it's safe to do so.

@pkalita-lbl pkalita-lbl requested review from eecavanna and removed request for eecavanna February 18, 2025 19:26
@pkalita-lbl pkalita-lbl marked this pull request as ready for review February 18, 2025 19:32
Copy link
Collaborator

@eecavanna eecavanna left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thanks for addressing this! I left one comment about boolean prop/variable names. I don't consider it a deal-breaker—just my thoughts as I was reading the code. I'm OK with the branch being merged in as is.

@@ -268,6 +271,7 @@ const StudyView: React.FC<StudyViewProps> = ({ submissionId }) => {
)}

<SampleList
tourAllowed={toursAllowed}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a deal-breaker, from my perspective:

Regarding variable names: when I see the names tourAllowed/toursAllowed, I think they may contain identifiers of tours that are allowed, as opposed to boolean flags. For that reason, I think I'd prefer prop/variable names that have is/are in them (e.g. isTourAllowed, areToursAllowed).

I don't want to hold up a merge for this. With the TypeScript type information and React.useState default value that are present, I (someone reading the code) can resolve the ambiguity.

@eecavanna eecavanna merged commit d30112f into main Feb 18, 2025
1 check passed
@eecavanna eecavanna deleted the issue-231-deferred-tours branch February 18, 2025 23:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tour overlay shows while field selection modal is open
2 participants