Functionally.. announced You're done header

This commit is contained in:
tidy-dev 2023-12-05 12:31:55 -05:00
parent f1cc0929f4
commit 868ba7f860
5 changed files with 49 additions and 10 deletions

View file

@ -6312,10 +6312,6 @@ export class AppStore extends TypedBaseStore<IAppState> {
const baseURL = `${htmlURL}/pull/new/${compareString}`
await this._openInBrowser(baseURL)
if (this.currentOnboardingTutorialStep === TutorialStep.OpenPullRequest) {
this._markPullRequestTutorialStepAsComplete(repository)
}
}
public async _updateExistingUpstreamRemote(

View file

@ -22,10 +22,8 @@ export class OnboardingTutorialAssessor {
false
)
/** Has the user opted to skip the create pull request step? */
private prStepComplete: boolean = getBoolean(
pullRequestStepCompleteKey,
false
)
private prStepComplete: boolean =
1 === 1 ? false : getBoolean(pullRequestStepCompleteKey, false)
/** Is the tutorial currently paused? */
private tutorialPaused: boolean = getBoolean(tutorialPausedKey, false)

View file

@ -103,6 +103,7 @@ interface IRepositoryViewProps {
interface IRepositoryViewState {
readonly changesListScrollTop: number
readonly compareListScrollTop: number
readonly tutorialCompletionAnnounced: boolean
}
const enum Tab {
@ -133,6 +134,7 @@ export class RepositoryView extends React.Component<
this.state = {
changesListScrollTop: 0,
compareListScrollTop: 0,
tutorialCompletionAnnounced: false,
}
}
@ -450,12 +452,18 @@ export class RepositoryView extends React.Component<
this.props.dispatcher.incrementMetric('diffOptionsViewedCount')
}
private onTutorialCompletionAnnounced = () => {
this.setState({ tutorialCompletionAnnounced: true })
}
private renderTutorialPane(): JSX.Element {
if (this.props.currentTutorialStep === TutorialStep.AllDone) {
return (
<TutorialDone
dispatcher={this.props.dispatcher}
repository={this.props.repository}
tutorialCompletionAnnounced={this.state.tutorialCompletionAnnounced}
onTutorialCompletionAnnounced={this.onTutorialCompletionAnnounced}
/>
)
} else {

View file

@ -25,15 +25,47 @@ interface ITutorialDoneProps {
* The currently selected repository
*/
readonly repository: Repository
/**
* If this has not happened, the tuturial completion header will be focused so
* that it can be read by screen readers
*/
readonly tutorialCompletionAnnounced: boolean
/**
* Called when the tutorial completion header has been focused and read by
* screen readers
*/
readonly onTutorialCompletionAnnounced: () => void
}
export class TutorialDone extends React.Component<ITutorialDoneProps, {}> {
private header = React.createRef<HTMLHeadingElement>()
public componentDidMount() {
if (this.header.current && !this.props.tutorialCompletionAnnounced) {
// Add the header into the tab order so that it can be focused
this.header.current.tabIndex = 0
this.header.current?.focus()
this.props.onTutorialCompletionAnnounced()
// Remove the header from the tab order after a short delay so that it
// doesn't stay in tab order
setTimeout(() => {
if (this.header.current) {
this.header.current.tabIndex = -1
}
}, 500)
}
}
public render() {
return (
<div id="tutorial-done">
<div className="content">
<div className="header">
<div className="text">
<h1>You're done!</h1>
<h1 ref={this.header}>You're done!</h1>
<p>
Youve learned the basics on how to use GitHub Desktop. Here are
some suggestions for what to do next.

View file

@ -64,7 +64,12 @@ export class TutorialPanel extends React.Component<
}
private openPullRequest = () => {
this.props.dispatcher.createPullRequest(this.props.repository)
this.props.dispatcher.markPullRequestTutorialStepAsComplete(
this.props.repository
)
setTimeout(() => {
this.props.dispatcher.createPullRequest(this.props.repository)
}, 500)
}
private skipEditorInstall = () => {