Move TickscriptSave button to own file

ui/src/kapacitor/components/TickscriptHeader.tsx

@@ -1,15 +1,9 @@
-import React, {SFC, PureComponent} from 'react'
+import React, {SFC} from 'react'
 
 import SourceIndicator from 'src/shared/components/SourceIndicator'
 import LogsToggle from 'src/kapacitor/components/LogsToggle'
 import ConfirmButton from 'src/shared/components/ConfirmButton'
-
-import {DBRP} from 'src/types/kapacitor'
-
-interface Task {
-  dbrps: DBRP[]
-  id: string
-}
+import TickscriptSave, {Task} from 'src/kapacitor/components/TickscriptSave'
 
 interface Props {
   task: Task
@@ -71,59 +65,4 @@ const TickscriptHeader: SFC<Props> = ({
   </div>
 )
 
-interface SaveProps {
-  onSave: () => void
-  task: Task
-  isNewTickscript: boolean
-  unsavedChanges: boolean
-}
-
-export class TickscriptSave extends PureComponent<SaveProps> {
-  public render() {
-    const {onSave} = this.props
-
-    return (
-      <button
-        className="btn btn-success btn-sm"
-        title={this.title}
-        onClick={onSave}
-        disabled={this.isDisabled}
-      >
-        {this.textContent}
-      </button>
-    )
-  }
-
-  private get title(): string {
-    const {task} = this.props
-
-    if (!task.id) {
-      return 'Name your TICKscript to save'
-    }
-
-    if (!task.dbrps.length) {
-      return 'Select databases to save'
-    }
-  }
-
-  private get textContent(): string {
-    if (this.props.isNewTickscript) {
-      return 'Save New TICKscript'
-    }
-
-    return 'Save Changes'
-  }
-
-  private get isDisabled(): boolean {
-    const {isNewTickscript, unsavedChanges, task} = this.props
-    const {id, dbrps} = task
-
-    if (isNewTickscript) {
-      return !id || !dbrps.length
-    }
-
-    return !unsavedChanges || !dbrps.length
-  }
-}
-
 export default TickscriptHeader

ui/src/kapacitor/components/TickscriptSave.tsx

@@ -0,0 +1,64 @@
+import React, {PureComponent} from 'react'
+import {DBRP} from 'src/types/kapacitor'
+
+export interface Task {
+  dbrps: DBRP[]
+  id: string
+}
+
+interface SaveProps {
+  onSave: () => void
+  task: Task
+  isNewTickscript: boolean
+  unsavedChanges: boolean
+}
+
+class TickscriptSave extends PureComponent<SaveProps> {
+  public render() {
+    const {onSave} = this.props
+
+    return (
+      <button
+        className="btn btn-success btn-sm"
+        title={this.title}
+        onClick={onSave}
+        disabled={this.isDisabled}
+      >
+        {this.textContent}
+      </button>
+    )
+  }
+
+  private get title(): string {
+    const {task} = this.props
+
+    if (!task.id) {
+      return 'Name your TICKscript to save'
+    }
+
+    if (!task.dbrps.length) {
+      return 'Select databases to save'
+    }
+  }
+
+  private get textContent(): string {
+    if (this.props.isNewTickscript) {
+      return 'Save New TICKscript'
+    }
+
+    return 'Save Changes'
+  }
+
+  private get isDisabled(): boolean {
+    const {isNewTickscript, unsavedChanges, task} = this.props
+    const {id, dbrps} = task
+
+    if (isNewTickscript) {
+      return !id || !dbrps.length
+    }
+
+    return !unsavedChanges || !dbrps.length
+  }
+}
+
+export default TickscriptSave

ui/test/kapacitor/components/TickscriptHeader.test.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import {shallow} from 'enzyme'
 
-import TickscriptHeader, {
-  TickscriptSave,
-} from 'src/kapacitor/components/TickscriptHeader'
+import TickscriptHeader from 'src/kapacitor/components/TickscriptHeader'
+import TickscriptSave from 'src/kapacitor/components/TickscriptSave'
 
 const setup = (override?) => {
   const props = {