Refactor to simplify DiffContentsWarning usage

app/src/ui/diff/diff-contents-warning.tsx

@@ -4,7 +4,7 @@ import * as OcticonSymbol from '../octicons/octicons.generated'
 import { LinkButton } from '../lib/link-button'
 import { ITextDiff, LineEndingsChange } from '../../models/diff'
 
-export enum DiffContentsWarningType {
+enum DiffContentsWarningType {
   UnicodeBidiCharacters,
   LineEndingsChange,
 }
@@ -18,36 +18,21 @@ type DiffContentsWarningItem =
       readonly lineEndingsChange: LineEndingsChange
     }
 
-export function getTextDiffWarningItems(
-  diff: ITextDiff
-): ReadonlyArray<DiffContentsWarningItem> {
-  const items = new Array<DiffContentsWarningItem>()
-
-  if (diff.hasHiddenBidiChars) {
-    items.push({
-      type: DiffContentsWarningType.UnicodeBidiCharacters,
-    })
-  }
-
-  if (diff.lineEndingsChange) {
-    items.push({
-      type: DiffContentsWarningType.LineEndingsChange,
-      lineEndingsChange: diff.lineEndingsChange,
-    })
-  }
-
-  return items
-}
-
 interface IDiffContentsWarningProps {
-  readonly items: ReadonlyArray<DiffContentsWarningItem>
+  readonly diff: ITextDiff
 }
 
 export class DiffContentsWarning extends React.Component<IDiffContentsWarningProps> {
   public render() {
+    const items = this.getTextDiffWarningItems()
+
+    if (items.length === 0) {
+      return null
+    }
+
     return (
       <div className="diff-contents-warning-container">
-        {this.props.items.map((item, i) => (
+        {items.map((item, i) => (
           <div className="diff-contents-warning" key={i}>
             <Octicon symbol={OcticonSymbol.alert} />
             {this.getWarningMessageForItem(item)}
@@ -57,6 +42,26 @@ export class DiffContentsWarning extends React.Component<IDiffContentsWarningPro
     )
   }
 
+  private getTextDiffWarningItems(): ReadonlyArray<DiffContentsWarningItem> {
+    const items = new Array<DiffContentsWarningItem>()
+    const { diff } = this.props
+
+    if (diff.hasHiddenBidiChars) {
+      items.push({
+        type: DiffContentsWarningType.UnicodeBidiCharacters,
+      })
+    }
+
+    if (diff.lineEndingsChange) {
+      items.push({
+        type: DiffContentsWarningType.LineEndingsChange,
+        lineEndingsChange: diff.lineEndingsChange,
+      })
+    }
+
+    return items
+  }
+
   private getWarningMessageForItem(item: DiffContentsWarningItem) {
     switch (item.type) {
       case DiffContentsWarningType.UnicodeBidiCharacters:

app/src/ui/diff/side-by-side-diff.tsx

@@ -60,10 +60,7 @@ import {
   expandWholeTextDiff,
 } from './text-diff-expansion'
 import { IMenuItem } from '../../lib/menu-item'
-import {
-  DiffContentsWarning,
-  getTextDiffWarningItems,
-} from './diff-contents-warning'
+import { DiffContentsWarning } from './diff-contents-warning'
 import { findDOMNode } from 'react-dom'
 import escapeRegExp from 'lodash/escapeRegExp'
 
@@ -533,8 +530,6 @@ export class SideBySideDiff extends React.Component<
       editable: canSelect(this.props.file),
     })
 
-    const warningItems = getTextDiffWarningItems(diff)
-
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
@@ -542,9 +537,7 @@ export class SideBySideDiff extends React.Component<
         onMouseDown={this.onMouseDown}
         onKeyDown={this.onKeyDown}
       >
-        {warningItems.length !== 0 && (
-          <DiffContentsWarning items={warningItems} />
-        )}
+        <DiffContentsWarning diff={diff} />
         {this.state.isSearching && (
           <DiffSearchInput
             onSearch={this.onSearch}

app/src/ui/diff/text-diff.tsx

@@ -56,10 +56,7 @@ import { createOcticonElement } from '../octicons/octicon'
 import * as OcticonSymbol from '../octicons/octicons.generated'
 import { WhitespaceHintPopover } from './whitespace-hint-popover'
 import { PopoverAnchorPosition } from '../lib/popover'
-import {
-  DiffContentsWarning,
-  getTextDiffWarningItems,
-} from './diff-contents-warning'
+import { DiffContentsWarning } from './diff-contents-warning'
 
 // This is a custom version of the no-newline octicon that's exactly as
 // tall as it needs to be (8px) which helps with aligning it on the line.
@@ -1557,13 +1554,9 @@ export class TextDiff extends React.Component<ITextDiffProps, ITextDiffState> {
       this.getNoNewlineIndicatorLines(this.state.diff.hunks)
     )
 
-    const warningItems = getTextDiffWarningItems(diff)
-
     return (
       <>
-        {warningItems.length !== 0 && (
-          <DiffContentsWarning items={warningItems} />
-        )}
+        <DiffContentsWarning diff={diff} />
         <CodeMirrorHost
           className="diff-code-mirror"
           value={doc}