Edit Dashboard title and Slice title in place (#2940)

* Edit Dashboard title and Slice title in place

Add EditableTitle component into Dashboard and Explore view to support edit title inline.

superset/assets/spec/javascripts/profile/EditableTitle_spec.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { describe, it } from 'mocha';
+import sinon from 'sinon';
+import { expect } from 'chai';
+
+import EditableTable from '../../../javascripts/components/EditableTitle';
+
+describe('EditableTitle', () => {
+  const callback = sinon.spy();
+  const mockProps = {
+    title: 'my title',
+    canEdit: true,
+    onSaveTitle: callback,
+  };
+  const mockEvent = {
+    target: {
+      value: 'new title',
+    },
+  };
+  const editableWrapper = shallow(<EditableTable {...mockProps} />);
+  const notEditableWrapper = shallow(<EditableTable title="my title" />);
+  it('is valid', () => {
+    expect(
+      React.isValidElement(<EditableTable {...mockProps} />),
+    ).to.equal(true);
+  });
+  it('should render title', () => {
+    const titleElement = editableWrapper.find('input');
+    expect(titleElement.props().value).to.equal('my title');
+    expect(titleElement.props().type).to.equal('button');
+  });
+
+  describe('should handle click', () => {
+    it('should change title', () => {
+      editableWrapper.find('input').simulate('click');
+      expect(editableWrapper.find('input').props().type).to.equal('text');
+    });
+    it('should not change title', () => {
+      notEditableWrapper.find('input').simulate('click');
+      expect(notEditableWrapper.find('input').props().type).to.equal('button');
+    });
+  });
+
+  describe('should handle change', () => {
+    afterEach(() => {
+      editableWrapper.setState({ title: 'my title' });
+      editableWrapper.setState({ lastTitle: 'my title' });
+    });
+    it('should change title', () => {
+      editableWrapper.find('input').simulate('change', mockEvent);
+      expect(editableWrapper.find('input').props().value).to.equal('new title');
+    });
+    it('should not change title', () => {
+      notEditableWrapper.find('input').simulate('change', mockEvent);
+      expect(editableWrapper.find('input').props().value).to.equal('my title');
+    });
+  });
+
+  describe('should handle blur', () => {
+    beforeEach(() => {
+      editableWrapper.find('input').simulate('click');
+      expect(editableWrapper.find('input').props().type).to.equal('text');
+    });
+    afterEach(() => {
+      callback.reset();
+      editableWrapper.setState({ title: 'my title' });
+      editableWrapper.setState({ lastTitle: 'my title' });
+    });
+
+    it('should trigger callback', () => {
+      editableWrapper.setState({ title: 'new title' });
+      editableWrapper.find('input').simulate('blur');
+      expect(editableWrapper.find('input').props().type).to.equal('button');
+      expect(callback.callCount).to.equal(1);
+      expect(callback.getCall(0).args[0]).to.equal('new title');
+    });
+    it('should not trigger callback', () => {
+      editableWrapper.find('input').simulate('blur');
+      expect(editableWrapper.find('input').props().type).to.equal('button');
+      // no change
+      expect(callback.callCount).to.equal(0);
+    });
+  });
+});