-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Introduce Clone feature in view mode (#10925)
* Introduce Clone feature in view mode * Use a new react modal for cloning dashboards * Fix focus issues and tests Unfortunately can’t run jest tests outside of the ui_framework at this time. * Add tests for dashboard clone modal * move the jest tests out of the __tests__ directory It’ll cause failures for the normal unit test runs * use react instead of angular for overlay and loading of dom element * Append 'Copy' to the title in the clone dialog so by default it doesn't clash * address code comments
- Loading branch information
1 parent
b5c51d1
commit 3caf5d7
Showing
15 changed files
with
417 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
src/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/clone_modal.test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`renders DashboardCloneModal 1`] = ` | ||
| <div | ||
| class="kuiModalOverlay" | ||
| > | ||
| <div | ||
| aria-label="Clone a dashboard" | ||
| class="kuiModal dashboardCloneModal" | ||
| data-tests-subj="dashboardCloneModal" | ||
| > | ||
| <div | ||
| class="kuiModalHeader" | ||
| > | ||
| <div | ||
| class="kuiModalHeader__title" | ||
| > | ||
| Clone Dashboard | ||
| </div> | ||
| </div> | ||
| <div | ||
| class="kuiModalBody" | ||
| > | ||
| <div | ||
| class="kuiModalBodyText kuiVerticalRhythm" | ||
| > | ||
| Please enter a new name for your dashboard. | ||
| </div> | ||
| <div | ||
| class="kuiModalBodyText kuiVerticalRhythm" | ||
| > | ||
| <input | ||
| class="kuiTextInput kuiTextInput--large" | ||
| data-test-subj="clonedDashboardTitle" | ||
| value="dash title" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div | ||
| class="kuiModalFooter" | ||
| > | ||
| <button | ||
| class="kuiButton kuiButton--hollow" | ||
| data-test-subj="cloneCancelButton" | ||
| > | ||
| <span | ||
| class="kuiButton__inner" | ||
| > | ||
| <span> | ||
| Cancel | ||
| </span> | ||
| </span> | ||
| </button> | ||
| <button | ||
| class="kuiButton kuiButton--primary" | ||
| data-test-subj="cloneConfirmButton" | ||
| > | ||
| <span | ||
| class="kuiButton__inner" | ||
| > | ||
| <span> | ||
| Confirm Clone | ||
| </span> | ||
| </span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; |
92 changes: 92 additions & 0 deletions
92
src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import { | ||
| KuiModal, | ||
| KuiModalHeader, | ||
| KuiModalHeaderTitle, | ||
| KuiModalBody, | ||
| KuiModalBodyText, | ||
| KuiModalFooter, | ||
| KuiButton, | ||
| KuiModalOverlay | ||
| } from 'ui_framework/components'; | ||
|
|
||
| export class DashboardCloneModal extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| newDashboardName: props.title | ||
| }; | ||
| } | ||
|
|
||
| cloneDashboard = () => { | ||
| this.props.onClone(this.state.newDashboardName); | ||
| }; | ||
|
|
||
| onInputChange = (event) => { | ||
| this.setState({ newDashboardName: event.target.value }); | ||
| }; | ||
|
|
||
| onKeyDown = (event) => { | ||
| if (event.keyCode === 27) { // ESC key | ||
| this.props.onClose(); | ||
| } | ||
| }; | ||
|
|
||
| render() { | ||
| return ( | ||
| <KuiModalOverlay> | ||
| <KuiModal | ||
| data-tests-subj="dashboardCloneModal" | ||
| aria-label="Clone a dashboard" | ||
| className="dashboardCloneModal" | ||
| onKeyDown={ this.onKeyDown } | ||
| > | ||
| <KuiModalHeader> | ||
| <KuiModalHeaderTitle> | ||
| Clone Dashboard | ||
| </KuiModalHeaderTitle> | ||
| </KuiModalHeader> | ||
| <KuiModalBody> | ||
| <KuiModalBodyText className="kuiVerticalRhythm"> | ||
| Please enter a new name for your dashboard. | ||
| </KuiModalBodyText> | ||
| <KuiModalBodyText className="kuiVerticalRhythm"> | ||
| <input | ||
| autoFocus | ||
| data-test-subj="clonedDashboardTitle" | ||
| className="kuiTextInput kuiTextInput--large" | ||
| value={ this.state.newDashboardName } | ||
| onChange={ this.onInputChange } /> | ||
| </KuiModalBodyText> | ||
| </KuiModalBody> | ||
|
|
||
| <KuiModalFooter> | ||
| <KuiButton | ||
| type="hollow" | ||
| data-test-subj="cloneCancelButton" | ||
| onClick={ this.props.onClose } | ||
| > | ||
| Cancel | ||
| </KuiButton> | ||
| <KuiButton | ||
| type="primary" | ||
| data-test-subj="cloneConfirmButton" | ||
| onClick={ this.cloneDashboard } | ||
| > | ||
| Confirm Clone | ||
| </KuiButton> | ||
| </KuiModalFooter> | ||
| </KuiModal> | ||
| </KuiModalOverlay> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| DashboardCloneModal.propTypes = { | ||
| onClone: PropTypes.func, | ||
| onClose: PropTypes.func, | ||
| title: PropTypes.string | ||
| }; |
58 changes: 58 additions & 0 deletions
58
src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React from 'react'; | ||
| import sinon from 'sinon'; | ||
| import { mount, render } from 'enzyme'; | ||
|
|
||
| import { | ||
| DashboardCloneModal, | ||
| } from '../top_nav/clone_modal'; | ||
|
|
||
| let onClone; | ||
| let onClose; | ||
|
|
||
| beforeEach(() => { | ||
| onClone = sinon.spy(); | ||
| onClose = sinon.spy(); | ||
| }); | ||
|
|
||
| test('renders DashboardCloneModal', () => { | ||
| const component = render(<DashboardCloneModal | ||
| title="dash title" | ||
| onClose={onClose} | ||
| onClone={onClone} | ||
| />); | ||
| expect(component).toMatchSnapshot(); // eslint-disable-line | ||
| }); | ||
|
|
||
| test('onClone', () => { | ||
| const component = mount(<DashboardCloneModal | ||
| title="dash title" | ||
| onClose={onClose} | ||
| onClone={onClone} | ||
| />); | ||
| component.find('[data-test-subj="cloneConfirmButton"]').simulate('click'); | ||
| sinon.assert.calledWith(onClone, 'dash title'); | ||
| sinon.assert.notCalled(onClose); | ||
| }); | ||
|
|
||
| test('onClose', () => { | ||
| const component = mount(<DashboardCloneModal | ||
| title="dash title" | ||
| onClose={onClose} | ||
| onClone={onClone} | ||
| />); | ||
| component.find('[data-test-subj="cloneCancelButton"]').simulate('click'); | ||
| sinon.assert.calledOnce(onClose); | ||
| sinon.assert.notCalled(onClone); | ||
| }); | ||
|
|
||
| test('title', () => { | ||
| const component = mount(<DashboardCloneModal | ||
| title="dash title" | ||
| onClose={onClose} | ||
| onClone={onClone} | ||
| />); | ||
| const event = { target: { value: 'a' } }; | ||
| component.find('input').simulate('change', event); | ||
| component.find('[data-test-subj="cloneConfirmButton"]').simulate('click'); | ||
| sinon.assert.calledWith(onClone, 'a'); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
src/core_plugins/kibana/public/dashboard/top_nav/show_clone_modal.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { DashboardCloneModal } from './clone_modal'; | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
|
|
||
| export function showCloneModal(onClone, title) { | ||
| const container = document.createElement('div'); | ||
| const closeModal = () => { | ||
| document.body.removeChild(container); | ||
| }; | ||
|
|
||
| const onCloneConfirmed = (newTitle) => { | ||
| onClone(newTitle).then(id => { | ||
| if (id) { | ||
| closeModal(); | ||
| } | ||
| }); | ||
| }; | ||
| document.body.appendChild(container); | ||
| const element = ( | ||
| <DashboardCloneModal onClone={onCloneConfirmed} onClose={closeModal} title={title + ' Copy'}></DashboardCloneModal> | ||
| ); | ||
| ReactDOM.render(element, container); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.