Make reusable component for no steps

This commit is contained in:
tidy-dev 2024-03-13 15:27:59 -04:00
parent 87349453c9
commit 9d236a0cbf
7 changed files with 95 additions and 98 deletions

View file

@ -10,9 +10,7 @@ import { IAPIWorkflowJobStep } from '../../lib/api'
import { TooltipDirection } from '../lib/tooltip'
import { Button } from '../lib/button'
import { getCombinedStatusSummary } from './ci-check-run-popover'
import { encodePathAsUrl } from '../../lib/path'
const PaperStackImage = encodePathAsUrl(__dirname, 'static/paper-stack.svg')
import { CICheckRunNoStepItem } from './ci-check-run-no-steps'
interface ICICheckRunListItemProps {
/** The check run to display **/
@ -241,17 +239,25 @@ export class CICheckRunListItem extends React.PureComponent<ICICheckRunListItemP
return null
}
const areNoSteps = checkRun.actionJobSteps === undefined
const classes = classNames('ci-steps-container', {
'no-steps': areNoSteps,
})
return (
<div
role="region"
className="ci-steps-container"
className={classes}
id={`checkrun-${checkRun.id}`}
aria-labelledby={`check-run-header-${checkRun.id}`}
>
{this.renderStepsHeader()}
{checkRun.actionJobSteps === undefined ? (
this.renderNoSteps()
{areNoSteps ? (
<CICheckRunNoStepItem
onViewCheckExternally={this.onViewCheckExternally}
/>
) : (
<CICheckRunActionsJobStepList
steps={checkRun.actionJobSteps}
@ -262,26 +268,6 @@ export class CICheckRunListItem extends React.PureComponent<ICICheckRunListItemP
)
}
private renderNoSteps() {
return (
<div className="no-steps">
<p>
There are no steps to display for this check.
<Button
className="button-with-icon"
onClick={this.onViewCheckExternally}
role="link"
>
View check details
<Octicon symbol={octicons.linkExternal} />
</Button>
</p>
<img src={PaperStackImage} className="blankslate-image" alt="" />
</div>
)
}
public render() {
return (
<>

View file

@ -0,0 +1,35 @@
import * as React from 'react'
import { Octicon } from '../octicons'
import * as octicons from '../octicons/octicons.generated'
import { Button } from '../lib/button'
import { encodePathAsUrl } from '../../lib/path'
const PaperStackImage = encodePathAsUrl(__dirname, 'static/paper-stack.svg')
interface ICICheckRunNoStepProps {
/** Callback to opens check runs target url (maybe GitHub, maybe third party) */
readonly onViewCheckExternally: () => void
}
/** The CI check no step view. */
export class CICheckRunNoStepItem extends React.PureComponent<ICICheckRunNoStepProps> {
public render() {
return (
<div className="ci-check-run-no-steps">
<p>
There are no steps to display for this check.
<Button
className="button-with-icon"
onClick={this.props.onViewCheckExternally}
role="link"
>
View check details
<Octicon symbol={octicons.linkExternal} />
</Button>
</p>
<img src={PaperStackImage} alt="" />
</div>
)
}
}

View file

@ -18,13 +18,12 @@ import { Octicon } from '../octicons'
import * as octicons from '../octicons/octicons.generated'
import { RepositoryWithGitHubRepository } from '../../models/repository'
import { CICheckRunActionsJobStepList } from '../check-runs/ci-check-run-actions-job-step-list'
import { LinkButton } from '../lib/link-button'
import { encodePathAsUrl } from '../../lib/path'
import { PopupType } from '../../models/popup'
import { CICheckReRunButton } from '../check-runs/ci-check-re-run-button'
import { supportsRerunningIndividualOrFailedChecks } from '../../lib/endpoint-capabilities'
import { CICheckRunNoStepItem } from '../check-runs/ci-check-run-no-steps'
const PaperStackImage = encodePathAsUrl(__dirname, 'static/paper-stack.svg')
const BlankSlateImage = encodePathAsUrl(
__dirname,
'static/empty-no-pull-requests.svg'
@ -186,35 +185,40 @@ export class PullRequestChecksFailed extends React.Component<
)
}
private renderCheckRunSteps() {
const selectedCheck = this.selectedCheck
if (selectedCheck === undefined) {
return null
private checkRunStepContent() {
if (this.loadingChecksInfo) {
return this.renderCheckRunStepsLoading()
}
let stepsContent = null
if (this.loadingChecksInfo) {
stepsContent = this.renderCheckRunStepsLoading()
} else if (selectedCheck.actionJobSteps === undefined) {
stepsContent = this.renderEmptyLogOutput()
} else {
stepsContent = (
<CICheckRunActionsJobStepList
steps={selectedCheck.actionJobSteps}
onViewJobStep={this.onViewJobStep}
if (this.selectedCheck?.actionJobSteps === undefined) {
return (
<CICheckRunNoStepItem
onViewCheckExternally={this.onViewSelectedCheckRunOnGitHub}
/>
)
}
return (
<CICheckRunActionsJobStepList
steps={this.selectedCheck.actionJobSteps}
onViewJobStep={this.onViewJobStep}
/>
)
}
private renderCheckRunSteps() {
if (this.selectedCheck === undefined) {
return null
}
return (
<div
className="ci-check-run-job-steps-container"
role="region"
id={`checkrun-${selectedCheck.id}`}
aria-labelledby={`check-run-header-${selectedCheck.id}`}
id={`checkrun-${this.selectedCheck.id}`}
aria-labelledby={`check-run-header-${this.selectedCheck.id}`}
>
{stepsContent}
{this.checkRunStepContent()}
</div>
)
}
@ -229,22 +233,6 @@ export class PullRequestChecksFailed extends React.Component<
)
}
private renderEmptyLogOutput() {
return (
<div className="no-steps-to-display">
<div className="text">
There are no steps to display for this check.
<div>
<LinkButton onClick={this.onViewSelectedCheckRunOnGitHub}>
View check details
</LinkButton>
</div>
</div>
<img src={PaperStackImage} className="blankslate-image" alt="" />
</div>
)
}
private onViewJobStep = (step: IAPIWorkflowJobStep): void => {
const { repository, pullRequest, dispatcher } = this.props
const checkRun = this.selectedCheck

View file

@ -95,6 +95,7 @@
@import 'ui/check-runs/_ci-check-run-list';
@import 'ui/check-runs/_ci-check-run-popover';
@import 'ui/check-runs/ci-check-run-job-steps';
@import 'ui/check-runs/_ci-check-run-no-steps';
@import 'ui/_pull-request-checks-failed';
@import 'ui/_sandboxed-markdown';
@import 'ui/_pull-request-quick-view';

View file

@ -112,28 +112,9 @@
}
}
.no-steps-to-display {
display: flex;
padding: var(--spacing-double);
align-items: center;
height: 100%;
.text {
flex: 1;
margin-right: var(--spacing);
div {
margin-top: var(--spacing);
}
}
.blankslate-image {
flex: 0;
height: 140px;
width: 146px;
min-width: 140px;
min-height: 146px;
align-self: flex-end;
.ci-check-run-no-steps {
img {
height: 80%;
}
}

View file

@ -74,20 +74,8 @@
padding: var(--spacing);
border-bottom: var(--base-border);
.no-steps {
display: flex;
padding: var(--spacing-double);
align-items: center;
height: 100%;
.blankslate-image {
min-width: 100px;
min-height: unset;
}
.button-component {
margin-top: var(--spacing);
}
&.no-steps {
height: 150px;
}
.ci-steps-header {

View file

@ -0,0 +1,18 @@
.ci-check-run-no-steps {
display: flex;
padding: var(--spacing-double);
align-items: center;
height: 100%;
img {
height: 125%;
margin-left: var(--spacing-double);
flex: 1;
}
.button-component {
margin-top: var(--spacing);
display: flex;
align-items: center;
}
}