github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

update DashboardCloneModal to use EUI framework (#15697) (#15934)

Browse source 
* update DashboardCloneModal to use EUI framework

* EuiModalOverlay changed to EuiOverlayMask

* fix jest test
This commit is contained in:
Nathan Reese 2018-01-10 07:19:08 -07:00 • committed by GitHub
parent 1dfe3f9f45
commit e67977b2b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 93 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

114
src/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/clone_modal.test.js.snap
View file

@ -1,71 +1,57 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders DashboardCloneModal 1`] = `
<div
class="kuiModalOverlay"
>
<div>
<div
class="kuiModal dashboardCloneModal"
data-tests-subj="dashboardCloneModal"
tabindex="0"
>
<div
class="kuiModalHeader"
>
<div
class="kuiModalHeader__title"
>
Clone Dashboard
</div>
</div>
<div
class="kuiModalBody"
>
<p
class="kuiText kuiVerticalRhythm"
>
<EuiOverlayMask>
<EuiModal
className="dashboardCloneModal"
data-tests-subj="dashboardCloneModal"
onClose={[Function]}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
Clone Dashboard
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText>
<p>
Please enter a new name for your dashboard.
</p>
<div
class="kuiVerticalRhythm"
>
<input
class="kuiTextInput kuiTextInput--large"
data-test-subj="clonedDashboardTitle"
value="dash title"
/>
</div>
</div>
<div
class="kuiModalFooter"
</EuiText>
<EuiSpacer
size="l"
/>
<EuiFieldText
autoFocus={true}
data-test-subj="clonedDashboardTitle"
fullWidth={false}
isLoading={false}
onChange={[Function]}
value="dash title"
/>
</EuiModalBody>
<EuiModalFooter>
<EuiButton
color="primary"
data-test-subj="cloneCancelButton"
fill={false}
iconSide="left"
onClick={[Function]}
type="button"
>
<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>
</div>
Cancel
</EuiButton>
<EuiButton
color="primary"
data-test-subj="cloneConfirmButton"
fill={true}
iconSide="left"
onClick={[Function]}
type="button"
>
Confirm Clone
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
`;

79
src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js
View file

@ -2,14 +2,17 @@ import React from 'react';
import PropTypes from 'prop-types';
import {
KuiModal,
KuiModalHeader,
KuiModalHeaderTitle,
KuiModalBody,
KuiModalFooter,
KuiButton,
KuiModalOverlay
} from 'ui_framework/components';
EuiButton,
EuiFieldText,
EuiModal,
EuiModalBody,
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiOverlayMask,
EuiSpacer,
EuiText,
} from '@elastic/eui';
export class DashboardCloneModal extends React.Component {
constructor(props) {
@ -30,53 +33,53 @@ export class DashboardCloneModal extends React.Component {
render() {
return (
<KuiModalOverlay>
<KuiModal
<EuiOverlayMask>
<EuiModal
data-tests-subj="dashboardCloneModal"
className="dashboardCloneModal"
onClose={this.props.onClose}
>
<KuiModalHeader>
<KuiModalHeaderTitle>
<EuiModalHeader>
<EuiModalHeaderTitle>
Clone Dashboard
</KuiModalHeaderTitle>
</KuiModalHeader>
</EuiModalHeaderTitle>
</EuiModalHeader>
<KuiModalBody>
<p className="kuiText kuiVerticalRhythm">
Please enter a new name for your dashboard.
</p>
<EuiModalBody>
<EuiText>
<p>
Please enter a new name for your dashboard.
</p>
</EuiText>
<div className="kuiVerticalRhythm">
<input
autoFocus
data-test-subj="clonedDashboardTitle"
className="kuiTextInput kuiTextInput--large"
value={this.state.newDashboardName}
onChange={this.onInputChange}
/>
</div>
</KuiModalBody>
<EuiSpacer />
<KuiModalFooter>
<KuiButton
buttonType="hollow"
<EuiFieldText
autoFocus
data-test-subj="clonedDashboardTitle"
value={this.state.newDashboardName}
onChange={this.onInputChange}
/>
</EuiModalBody>
<EuiModalFooter>
<EuiButton
data-test-subj="cloneCancelButton"
onClick={this.props.onClose}
>
Cancel
</KuiButton>
</EuiButton>
<KuiButton
buttonType="primary"
<EuiButton
fill
data-test-subj="cloneConfirmButton"
onClick={this.cloneDashboard}
>
Confirm Clone
</KuiButton>
</KuiModalFooter>
</KuiModal>
</KuiModalOverlay>
</EuiButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
);
}
}

4
src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.test.js
View file

@ -1,6 +1,6 @@
import React from 'react';
import sinon from 'sinon';
import { mount, render } from 'enzyme';
import { mount, shallow } from 'enzyme';
import {
findTestSubject,
} from '@elastic/eui/lib/test';
@ -29,7 +29,7 @@ function createComponent(creationMethod = mount) {
}
test('renders DashboardCloneModal', () => {
createComponent(render);
createComponent(shallow);
expect(component).toMatchSnapshot(); // eslint-disable-line
});