Move WorktreesEnabled to own file

This fixes the lint error

Author: pol-rivero

app/src/ui/banners/render-banner.tsx

@@ -3,8 +3,6 @@ import * as React from 'react'
 import { assertNever } from '../../lib/fatal-error'
 
 import { Banner, BannerType } from '../../models/banner'
-import { PopupType } from '../../models/popup'
-import { PreferencesTab } from '../../models/preferences'
 
 import { Dispatcher } from '../dispatcher'
 import { MergeConflictsBanner } from './merge-conflicts-banner'
@@ -21,7 +19,7 @@ import { SuccessfulSquash } from './successful-squash'
 import { SuccessBanner } from './success-banner'
 import { ConflictsFoundBanner } from './conflicts-found-banner'
 import { OSVersionNoLongerSupportedBanner } from './os-version-no-longer-supported-banner'
-import { LinkButton } from '../lib/link-button'
+import { WorktreesEnabledBanner } from './worktrees-enabled-banner'
 
 export function renderBanner(
   banner: Banner,
@@ -174,31 +172,14 @@ export function renderBanner(
       )
     case BannerType.OSVersionNoLongerSupported:
       return <OSVersionNoLongerSupportedBanner onDismissed={onDismissed} />
-    case BannerType.WorktreesEnabled: {
-      const label = __DARWIN__
-        ? 'Appearance Settings'
-        : 'Appearance Options'
+    case BannerType.WorktreesEnabled:
       return (
-        <SuccessBanner
-          key="worktrees-enabled"
-          timeout={8000}
+        <WorktreesEnabledBanner
+          dispatcher={dispatcher}
           onDismissed={onDismissed}
-        >
-          Worktrees enabled. You can change this in{' '}
-          <LinkButton
-            onClick={() =>
-              dispatcher.showPopup({
-                type: PopupType.Preferences,
-                initialSelectedTab: PreferencesTab.Appearance,
-              })
-            }
-          >
-            {label}
-          </LinkButton>
-          .
-        </SuccessBanner>
+          key={'worktrees-enabled'}
+        />
       )
-    }
     default:
       return assertNever(banner, `Unknown popup type: ${banner}`)
   }

app/src/ui/banners/worktrees-enabled-banner.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { Dispatcher } from '../dispatcher'
+import { PopupType } from '../../models/popup'
+import { PreferencesTab } from '../../models/preferences'
+import { LinkButton } from '../lib/link-button'
+import { SuccessBanner } from './success-banner'
+
+interface IWorktreesEnabledBannerProps {
+  readonly dispatcher: Dispatcher
+  readonly onDismissed: () => void
+}
+
+export class WorktreesEnabledBanner extends React.Component<IWorktreesEnabledBannerProps> {
+  private onOpenAppearanceSettings = () => {
+    this.props.dispatcher.showPopup({
+      type: PopupType.Preferences,
+      initialSelectedTab: PreferencesTab.Appearance,
+    })
+  }
+
+  public render() {
+    const label = __DARWIN__ ? 'Appearance Settings' : 'Appearance Options'
+
+    return (
+      <SuccessBanner
+        timeout={8000}
+        onDismissed={this.props.onDismissed}
+      >
+        Worktrees enabled. You can change this in{' '}
+        <LinkButton onClick={this.onOpenAppearanceSettings}>
+          {label}
+        </LinkButton>
+        .
+      </SuccessBanner>
+    )
+  }
+}