Make reusable component for no steps

app/src/ui/check-runs/ci-check-run-list-item.tsx

@@ -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 (
       <>

app/src/ui/check-runs/ci-check-run-no-steps.tsx

@@ -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>
+    )
+  }
+}

app/src/ui/notifications/pull-request-checks-failed.tsx

@@ -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

app/styles/_ui.scss

@@ -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';

app/styles/ui/_pull-request-checks-failed.scss

@@ -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%;
           }
         }
 

app/styles/ui/check-runs/_ci-check-run-list-item.scss

@@ -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 {

app/styles/ui/check-runs/_ci-check-run-no-steps.scss

@@ -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;
+  }
+}