Create component that displays the description of a fork contribution target

We're going to reuse this component on the dialog that's shown after cloning a forked repository
This commit is contained in:
Rafael Oleza 2020-05-26 10:00:29 +02:00
parent c124d5b2f5
commit 72ecb65f9d
2 changed files with 42 additions and 31 deletions

View file

@ -0,0 +1,37 @@
import * as React from 'react'
import { ForkContributionTarget } from '../../models/workflow-preferences'
import { RepositoryWithForkedGitHubRepository } from '../../models/repository'
interface IForkSettingsDescription {
readonly repository: RepositoryWithForkedGitHubRepository
readonly forkContributionTarget: ForkContributionTarget
}
export function ForkSettingsDescription(props: IForkSettingsDescription) {
// We can't use the getNonForkGitHubRepository() helper since we need to calculate
// the value based on the temporary form state.
const targetRepository =
props.forkContributionTarget === ForkContributionTarget.Self
? props.repository.gitHubRepository
: props.repository.gitHubRepository.parent
return (
<ul className="fork-settings-description">
<li>
Pull requests targeting <strong>{targetRepository.fullName}</strong>{' '}
will be shown in the pull request list.
</li>
<li>
Issues will be created in <strong>{targetRepository.fullName}</strong>.
</li>
<li>
"View on Github" will open <strong>{targetRepository.fullName}</strong>{' '}
in the browser.
</li>
<li>
New branches will be based on{' '}
<strong>{targetRepository.fullName}</strong>'s default branch.
</li>
</ul>
)
}

View file

@ -2,6 +2,7 @@ import * as React from 'react'
import { DialogContent } from '../dialog'
import { ForkContributionTarget } from '../../models/workflow-preferences'
import { RepositoryWithForkedGitHubRepository } from '../../models/repository'
import { ForkSettingsDescription } from './fork-contribution-target-description'
interface IGitIgnoreProps {
readonly forkContributionTarget: ForkContributionTarget
@ -51,41 +52,14 @@ export class ForkSettings extends React.Component<IGitIgnoreProps, {}> {
<label htmlFor={RadioButtonId.Self}>For my own purposes</label>
</div>
{this.renderDescription()}
<ForkSettingsDescription
repository={this.props.repository}
forkContributionTarget={this.props.forkContributionTarget}
/>
</DialogContent>
)
}
private renderDescription() {
// We can't use the getNonForkGitHubRepository() helper since we need to calculate
// the value based on the temporary form state.
const targetRepository =
this.props.forkContributionTarget === ForkContributionTarget.Self
? this.props.repository.gitHubRepository
: this.props.repository.gitHubRepository.parent
return (
<ul className="fork-settings-description">
<li>
Pull requests targeting <strong>{targetRepository.fullName}</strong>{' '}
will be shown in the pull request list.
</li>
<li>
Issues will be created in <strong>{targetRepository.fullName}</strong>
.
</li>
<li>
"View on Github" will open{' '}
<strong>{targetRepository.fullName}</strong> in the browser.
</li>
<li>
New branches will be based on{' '}
<strong>{targetRepository.fullName}</strong>'s default branch.
</li>
</ul>
)
}
private onForkContributionTargetChanged = (
event: React.FormEvent<HTMLInputElement>
) => {