Disables saveing tickscript if no databases are selected

ui/src/kapacitor/components/TickscriptHeader.js

@@ -1,91 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import SourceIndicator from 'shared/components/SourceIndicator'
-import LogsToggle from 'src/kapacitor/components/LogsToggle'
-import ConfirmButton from 'src/shared/components/ConfirmButton'
-
-const TickscriptHeader = ({
-  task: {id},
-  onSave,
-  onExit,
-  unsavedChanges,
-  areLogsVisible,
-  areLogsEnabled,
-  isNewTickscript,
-  onToggleLogsVisibility,
-}) => (
-  <div className="page-header full-width">
-    <div className="page-header__container">
-      <div className="page-header__left">
-        <h1 className="page-header__title">TICKscript Editor</h1>
-      </div>
-      {areLogsEnabled && (
-        <LogsToggle
-          areLogsVisible={areLogsVisible}
-          areLogsEnabled={areLogsEnabled}
-          onToggleLogsVisibility={onToggleLogsVisibility}
-        />
-      )}
-      <div className="page-header__right">
-        <SourceIndicator />
-        {isNewTickscript ? (
-          <button
-            className="btn btn-success btn-sm"
-            title="Name your TICKscript to save"
-            onClick={onSave}
-            disabled={!id}
-          >
-            Save New TICKscript
-          </button>
-        ) : (
-          <button
-            className="btn btn-success btn-sm"
-            title="You have unsaved changes"
-            onClick={onSave}
-            disabled={!unsavedChanges}
-          >
-            Save Changes
-          </button>
-        )}
-        {unsavedChanges ? (
-          <ConfirmButton
-            text="Exit"
-            confirmText="Discard unsaved changes?"
-            confirmAction={onExit}
-          />
-        ) : (
-          <button
-            className="btn btn-default btn-sm"
-            title="Return to Alert Rules"
-            onClick={onExit}
-          >
-            Exit
-          </button>
-        )}
-      </div>
-    </div>
-  </div>
-)
-
-const {arrayOf, bool, func, shape, string} = PropTypes
-
-TickscriptHeader.propTypes = {
-  isNewTickscript: bool,
-  onSave: func,
-  onExit: func.isRequired,
-  areLogsVisible: bool,
-  areLogsEnabled: bool,
-  onToggleLogsVisibility: func.isRequired,
-  task: shape({
-    dbrps: arrayOf(
-      shape({
-        db: string,
-        rp: string,
-      })
-    ),
-  }),
-  unsavedChanges: bool,
-}
-
-export default TickscriptHeader

ui/src/kapacitor/components/TickscriptHeader.tsx

@@ -0,0 +1,117 @@
+import React, {SFC, PureComponent} 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
+}
+
+interface Props {
+  task: Task
+  unsavedChanges: boolean
+  areLogsVisible: boolean
+  areLogsEnabled: boolean
+  isNewTickscript: boolean
+  onSave: () => void
+  onExit: () => void
+  onToggleLogsVisibility: () => void
+}
+
+const TickscriptHeader: SFC<Props> = ({
+  task,
+  onSave,
+  onExit,
+  unsavedChanges,
+  areLogsEnabled,
+  areLogsVisible,
+  isNewTickscript,
+  onToggleLogsVisibility,
+}) => (
+  <div className="page-header full-width">
+    <div className="page-header__container">
+      <div className="page-header__left">
+        <h1 className="page-header__title">TICKscript Editor</h1>
+      </div>
+      {areLogsEnabled && (
+        <LogsToggle
+          areLogsVisible={areLogsVisible}
+          onToggleLogsVisibility={onToggleLogsVisibility}
+        />
+      )}
+      <div className="page-header__right">
+        <SourceIndicator />
+        <TickscriptSave
+          task={task}
+          onSave={onSave}
+          unsavedChanges={unsavedChanges}
+          isNewTickscript={isNewTickscript}
+        />
+        {unsavedChanges ? (
+          <ConfirmButton
+            text="Exit"
+            confirmText="Discard unsaved changes?"
+            confirmAction={onExit}
+          />
+        ) : (
+          <button
+            className="btn btn-default btn-sm"
+            title="Return to Alert Rules"
+            onClick={onExit}
+          >
+            Exit
+          </button>
+        )}
+      </div>
+    </div>
+  </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="You have unsaved changes"
+        onClick={onSave}
+        disabled={this.isDisabled}
+      >
+        {this.textContent}
+      </button>
+    )
+  }
+
+  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/types/kapacitor.ts

@@ -191,7 +191,7 @@ interface TriggerValues {
 }
 
 // DBRP represents a database and retention policy for a time series source
-interface DBRP {
+export interface DBRP {
   db: string
   rp: string
 }

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

@@ -0,0 +1,86 @@
+import React from 'react'
+import {shallow} from 'enzyme'
+
+import TickscriptHeader, {
+  TickscriptSave,
+} from 'src/kapacitor/components/TickscriptHeader'
+
+const setup = (override?) => {
+  const props = {
+    isNewTickscript: false,
+    onToggleLogsVisibility: () => {},
+    onSave: () => {},
+    onExit: () => {},
+    areLogsVisible: false,
+    areLogsEnabled: false,
+    task: {
+      id: '1',
+      dbrps: [],
+    },
+    unsavedChanges: false,
+    ...override,
+  }
+
+  const wrapper = shallow(<TickscriptHeader {...props} />)
+
+  return {
+    wrapper,
+  }
+}
+
+describe('Kapacitor.Components.TickscriptHeader', () => {
+  describe('rendering', () => {
+    it('renders without error', () => {
+      const {wrapper} = setup()
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('user interreaction', () => {
+    describe('saving an existing tickscript', () => {
+      it('is disabled if there are no changes', () => {
+        const {wrapper} = setup({unsavedChanges: false})
+
+        const save = wrapper.find(TickscriptSave).dive()
+        const saveButton = save.find('button')
+
+        expect(saveButton.props().disabled).toBe(true)
+      })
+
+      it('is disabled if there are no dbrps', () => {
+        const {wrapper} = setup({unsavedChanges: true})
+
+        const save = wrapper.find(TickscriptSave).dive()
+        const saveButton = save.find('button')
+
+        expect(saveButton.props().disabled).toBe(true)
+      })
+    })
+
+    describe('saving a new tickscript', () => {
+      describe('when there are no dbrps', () => {
+        it('disables saving', () => {
+          const task = {id: '1', dbrps: []}
+          const {wrapper} = setup({isNewTickscript: true, task})
+
+          const save = wrapper.find(TickscriptSave).dive()
+          const saveButton = save.find('button')
+
+          expect(saveButton.props().disabled).toBe(true)
+        })
+      })
+
+      describe('when there is not an id', () => {
+        it('disables saving', () => {
+          const task = {id: '', dbrps: [{db: 'db1', rp: 'rp1'}]}
+          const {wrapper} = setup({isNewTickscript: true, task})
+
+          const save = wrapper.find(TickscriptSave).dive()
+          const saveButton = save.find('button')
+
+          expect(saveButton.props().disabled).toBe(true)
+        })
+      })
+    })
+  })
+})