mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
Re-add dashboard short links (#5398)
* Re-add dashboard short links * Make the short link available to all users * Include filters in the short link for dashboards * Remove duplicate key causing linter error * Change URL Short link button into a menu item with Modal * Split out tests, bind URL short link in constructor
This commit is contained in:
parent
0aff8659d8
commit
aa9b30cf55
@ -0,0 +1,27 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import configureStore from 'redux-mock-store';
|
||||||
|
import { expect } from 'chai';
|
||||||
|
import { describe, it } from 'mocha';
|
||||||
|
import { shallow } from 'enzyme';
|
||||||
|
|
||||||
|
import URLShortLinkModal from '../../../src/components/URLShortLinkModal';
|
||||||
|
import ModalTrigger from '../../../src/components/ModalTrigger';
|
||||||
|
|
||||||
|
describe('URLShortLinkModal', () => {
|
||||||
|
const defaultProps = {
|
||||||
|
url: 'mockURL',
|
||||||
|
emailSubject: 'Mock Subject',
|
||||||
|
emailContent: 'mock content',
|
||||||
|
};
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
const mockStore = configureStore([]);
|
||||||
|
const store = mockStore({});
|
||||||
|
return shallow(<URLShortLinkModal {...defaultProps} />, { context: { store } }).dive();
|
||||||
|
}
|
||||||
|
|
||||||
|
it('renders ModalTrigger', () => {
|
||||||
|
const wrapper = setup();
|
||||||
|
expect(wrapper.find(ModalTrigger)).have.length(1);
|
||||||
|
});
|
||||||
|
});
|
@ -0,0 +1,141 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { describe, it } from 'mocha';
|
||||||
|
import { expect } from 'chai';
|
||||||
|
import { shallow } from 'enzyme';
|
||||||
|
import { DropdownButton, MenuItem } from 'react-bootstrap';
|
||||||
|
import RefreshIntervalModal from '../../../../src/dashboard/components/RefreshIntervalModal';
|
||||||
|
import URLShortLinkModal from '../../../../src/components/URLShortLinkModal';
|
||||||
|
import HeaderActionsDropdown from '../../../../src/dashboard/components/HeaderActionsDropdown';
|
||||||
|
import SaveModal from '../../../../src/dashboard/components/SaveModal';
|
||||||
|
import CssEditor from '../../../../src/dashboard/components/CssEditor';
|
||||||
|
|
||||||
|
describe('HeaderActionsDropdown', () => {
|
||||||
|
const props = {
|
||||||
|
addSuccessToast: () => {},
|
||||||
|
addDangerToast: () => {},
|
||||||
|
dashboardId: 1,
|
||||||
|
dashboardTitle: 'Title',
|
||||||
|
hasUnsavedChanges: false,
|
||||||
|
css: '',
|
||||||
|
onChange: () => {},
|
||||||
|
updateCss: () => {},
|
||||||
|
forceRefreshAllCharts: () => {},
|
||||||
|
startPeriodicRender: () => {},
|
||||||
|
editMode: false,
|
||||||
|
userCanEdit: false,
|
||||||
|
userCanSave: false,
|
||||||
|
layout: {},
|
||||||
|
filters: {},
|
||||||
|
expandedSlices: {},
|
||||||
|
onSave: () => {},
|
||||||
|
};
|
||||||
|
|
||||||
|
function setup(overrideProps) {
|
||||||
|
const wrapper = shallow(
|
||||||
|
<HeaderActionsDropdown {...props} {...overrideProps} />,
|
||||||
|
);
|
||||||
|
return wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('readonly-user', () => {
|
||||||
|
const overrideProps = { userCanSave: false };
|
||||||
|
|
||||||
|
it('should render the DropdownButton', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(DropdownButton)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not render the SaveModal', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(SaveModal)).to.have.lengthOf(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render one MenuItem', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(MenuItem)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the RefreshIntervalModal', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(RefreshIntervalModal)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the URLShortLinkModal', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(URLShortLinkModal)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not render the CssEditor', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(CssEditor)).to.have.lengthOf(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('write-user', () => {
|
||||||
|
const overrideProps = { userCanSave: true };
|
||||||
|
|
||||||
|
it('should render the DropdownButton', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(DropdownButton)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the SaveModal', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(SaveModal)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render two MenuItems', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(MenuItem)).to.have.lengthOf(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the RefreshIntervalModal', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(RefreshIntervalModal)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the URLShortLinkModal', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(URLShortLinkModal)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not render the CssEditor', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(CssEditor)).to.have.lengthOf(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('write-user-with-edit-mode', () => {
|
||||||
|
const overrideProps = { userCanSave: true, editMode: true };
|
||||||
|
|
||||||
|
it('should render the DropdownButton', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(DropdownButton)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the SaveModal', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(SaveModal)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render three MenuItems', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(MenuItem)).to.have.lengthOf(3);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the RefreshIntervalModal', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(RefreshIntervalModal)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the URLShortLinkModal', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(URLShortLinkModal)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the CssEditor', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(CssEditor)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
@ -0,0 +1,147 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { describe, it } from 'mocha';
|
||||||
|
import { expect } from 'chai';
|
||||||
|
import { shallow } from 'enzyme';
|
||||||
|
import Header from '../../../../src/dashboard/components/Header';
|
||||||
|
import EditableTitle from '../../../../src/components/EditableTitle';
|
||||||
|
import FaveStar from '../../../../src/components/FaveStar';
|
||||||
|
import HeaderActionsDropdown from '../../../../src/dashboard/components/HeaderActionsDropdown';
|
||||||
|
import Button from '../../../../src/components/Button';
|
||||||
|
import UndoRedoKeylisteners from '../../../../src/dashboard/components/UndoRedoKeylisteners';
|
||||||
|
|
||||||
|
describe('Header', () => {
|
||||||
|
const props = {
|
||||||
|
addSuccessToast: () => {},
|
||||||
|
addDangerToast: () => {},
|
||||||
|
dashboardInfo: { id: 1, dash_edit_perm: true, dash_save_perm: true },
|
||||||
|
dashboardTitle: 'title',
|
||||||
|
charts: {},
|
||||||
|
layout: {},
|
||||||
|
filters: {},
|
||||||
|
expandedSlices: {},
|
||||||
|
css: '',
|
||||||
|
isStarred: false,
|
||||||
|
onSave: () => {},
|
||||||
|
onChange: () => {},
|
||||||
|
fetchFaveStar: () => {},
|
||||||
|
fetchCharts: () => {},
|
||||||
|
saveFaveStar: () => {},
|
||||||
|
startPeriodicRender: () => {},
|
||||||
|
updateDashboardTitle: () => {},
|
||||||
|
editMode: false,
|
||||||
|
setEditMode: () => {},
|
||||||
|
showBuilderPane: false,
|
||||||
|
toggleBuilderPane: () => {},
|
||||||
|
updateCss: () => {},
|
||||||
|
hasUnsavedChanges: false,
|
||||||
|
maxUndoHistoryExceeded: false,
|
||||||
|
|
||||||
|
// redux
|
||||||
|
onUndo: () => {},
|
||||||
|
onRedo: () => {},
|
||||||
|
undoLength: 0,
|
||||||
|
redoLength: 0,
|
||||||
|
setMaxUndoHistoryExceeded: () => {},
|
||||||
|
maxUndoHistoryToast: () => {},
|
||||||
|
};
|
||||||
|
|
||||||
|
function setup(overrideProps) {
|
||||||
|
const wrapper = shallow(<Header {...props} {...overrideProps} />);
|
||||||
|
return wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('read-only-user', () => {
|
||||||
|
const overrideProps = {
|
||||||
|
dashboardInfo: { id: 1, dash_edit_perm: false, dash_save_perm: false },
|
||||||
|
};
|
||||||
|
|
||||||
|
it('should render the EditableTitle', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(EditableTitle)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the FaveStar', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(FaveStar)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the HeaderActionsDropdown', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(HeaderActionsDropdown)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render one Button', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(Button)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not set up undo/redo', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(UndoRedoKeylisteners)).to.have.lengthOf(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('write-user', () => {
|
||||||
|
const overrideProps = {
|
||||||
|
editMode: false,
|
||||||
|
dashboardInfo: { id: 1, dash_edit_perm: true, dash_save_perm: true },
|
||||||
|
};
|
||||||
|
|
||||||
|
it('should render the EditableTitle', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(EditableTitle)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the FaveStar', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(FaveStar)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the HeaderActionsDropdown', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(HeaderActionsDropdown)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render one Button', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(Button)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not set up undo/redo', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(UndoRedoKeylisteners)).to.have.lengthOf(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('write-user-with-edit-mode', () => {
|
||||||
|
const overrideProps = {
|
||||||
|
editMode: true,
|
||||||
|
dashboardInfo: { id: 1, dash_edit_perm: true, dash_save_perm: true },
|
||||||
|
};
|
||||||
|
|
||||||
|
it('should render the EditableTitle', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(EditableTitle)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the FaveStar', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(FaveStar)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the HeaderActionsDropdown', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(HeaderActionsDropdown)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render four Buttons', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(Button)).to.have.lengthOf(4);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should set up undo/redo', () => {
|
||||||
|
const wrapper = setup(overrideProps);
|
||||||
|
expect(wrapper.find(UndoRedoKeylisteners)).to.have.lengthOf(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
@ -0,0 +1,14 @@
|
|||||||
|
import { describe, it } from 'mocha';
|
||||||
|
import { expect } from 'chai';
|
||||||
|
|
||||||
|
import getDashboardUrl from '../../../../src/dashboard/util/getDashboardUrl';
|
||||||
|
|
||||||
|
describe('getChartIdsFromLayout', () => {
|
||||||
|
it('should encode filters', () => {
|
||||||
|
const filters = { 35: { key: ['value'] } };
|
||||||
|
const url = getDashboardUrl('path', filters);
|
||||||
|
expect(url).to.equal(
|
||||||
|
'path?preselect_filters=%7B%2235%22%3A%7B%22key%22%3A%5B%22value%22%5D%7D%7D',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
@ -20,6 +20,7 @@ class URLShortLinkButton extends React.Component {
|
|||||||
shortUrl: '',
|
shortUrl: '',
|
||||||
};
|
};
|
||||||
this.onShortUrlSuccess = this.onShortUrlSuccess.bind(this);
|
this.onShortUrlSuccess = this.onShortUrlSuccess.bind(this);
|
||||||
|
this.getCopyUrl = this.getCopyUrl.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
onShortUrlSuccess(data) {
|
onShortUrlSuccess(data) {
|
||||||
@ -54,7 +55,7 @@ class URLShortLinkButton extends React.Component {
|
|||||||
trigger="click"
|
trigger="click"
|
||||||
rootClose
|
rootClose
|
||||||
placement="left"
|
placement="left"
|
||||||
onEnter={this.getCopyUrl.bind(this)}
|
onEnter={this.getCopyUrl}
|
||||||
overlay={this.renderPopover()}
|
overlay={this.renderPopover()}
|
||||||
>
|
>
|
||||||
<span className="btn btn-default btn-sm">
|
<span className="btn btn-default btn-sm">
|
||||||
|
78
superset/assets/src/components/URLShortLinkModal.jsx
Normal file
78
superset/assets/src/components/URLShortLinkModal.jsx
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import CopyToClipboard from './CopyToClipboard';
|
||||||
|
import { getShortUrl } from '../utils/common';
|
||||||
|
import { t } from '../locales';
|
||||||
|
import withToasts from '../messageToasts/enhancers/withToasts';
|
||||||
|
import ModalTrigger from './ModalTrigger';
|
||||||
|
|
||||||
|
const propTypes = {
|
||||||
|
url: PropTypes.string,
|
||||||
|
emailSubject: PropTypes.string,
|
||||||
|
emailContent: PropTypes.string,
|
||||||
|
addDangerToast: PropTypes.func.isRequired,
|
||||||
|
isMenuItem: PropTypes.bool,
|
||||||
|
triggerNode: PropTypes.node.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
class URLShortLinkModal extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
shortUrl: '',
|
||||||
|
};
|
||||||
|
this.modal = null;
|
||||||
|
this.setModalRef = this.setModalRef.bind(this);
|
||||||
|
this.onShortUrlSuccess = this.onShortUrlSuccess.bind(this);
|
||||||
|
this.getCopyUrl = this.getCopyUrl.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onShortUrlSuccess(data) {
|
||||||
|
this.setState({
|
||||||
|
shortUrl: data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setModalRef(ref) {
|
||||||
|
this.modal = ref;
|
||||||
|
}
|
||||||
|
|
||||||
|
getCopyUrl() {
|
||||||
|
getShortUrl(this.props.url, this.onShortUrlSuccess, this.props.addDangerToast);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const emailBody = t('%s%s', this.props.emailContent, this.state.shortUrl);
|
||||||
|
return (
|
||||||
|
<ModalTrigger
|
||||||
|
ref={this.setModalRef}
|
||||||
|
isMenuItem={this.props.isMenuItem}
|
||||||
|
triggerNode={this.props.triggerNode}
|
||||||
|
beforeOpen={this.getCopyUrl}
|
||||||
|
modalTitle={t('Share Dashboard')}
|
||||||
|
modalBody={
|
||||||
|
<div>
|
||||||
|
<CopyToClipboard
|
||||||
|
text={this.state.shortUrl}
|
||||||
|
copyNode={<i className="fa fa-clipboard" title={t('Copy to clipboard')} />}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<a href={`mailto:?Subject=${this.props.emailSubject}%20&Body=${emailBody}`}>
|
||||||
|
<i className="fa fa-envelope" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
URLShortLinkModal.defaultProps = {
|
||||||
|
url: window.location.href.substring(window.location.origin.length),
|
||||||
|
emailSubject: '',
|
||||||
|
emailContent: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
URLShortLinkModal.propTypes = propTypes;
|
||||||
|
|
||||||
|
export default withToasts(URLShortLinkModal);
|
@ -189,100 +189,103 @@ class Header extends React.PureComponent {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{userCanSaveAs && (
|
<div className="button-container">
|
||||||
<div className="button-container">
|
{userCanSaveAs && (
|
||||||
{editMode && (
|
<div className="button-container">
|
||||||
|
{editMode && (
|
||||||
|
<Button
|
||||||
|
bsSize="small"
|
||||||
|
onClick={onUndo}
|
||||||
|
disabled={undoLength < 1}
|
||||||
|
bsStyle={this.state.emphasizeUndo ? 'primary' : undefined}
|
||||||
|
>
|
||||||
|
<div title="Undo" className="undo-action fa fa-reply" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{editMode && (
|
||||||
|
<Button
|
||||||
|
bsSize="small"
|
||||||
|
onClick={onRedo}
|
||||||
|
disabled={redoLength < 1}
|
||||||
|
bsStyle={this.state.emphasizeRedo ? 'primary' : undefined}
|
||||||
|
>
|
||||||
|
<div title="Redo" className="redo-action fa fa-share" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{editMode && (
|
||||||
|
<Button bsSize="small" onClick={this.props.toggleBuilderPane}>
|
||||||
|
{showBuilderPane
|
||||||
|
? t('Hide components')
|
||||||
|
: t('Insert components')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{editMode &&
|
||||||
|
hasUnsavedChanges && (
|
||||||
|
<Button
|
||||||
|
bsSize="small"
|
||||||
|
bsStyle={popButton ? 'primary' : undefined}
|
||||||
|
onClick={this.overwriteDashboard}
|
||||||
|
>
|
||||||
|
{t('Save changes')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{editMode &&
|
||||||
|
!hasUnsavedChanges && (
|
||||||
|
<Button
|
||||||
|
bsSize="small"
|
||||||
|
onClick={this.toggleEditMode}
|
||||||
|
bsStyle={undefined}
|
||||||
|
disabled={!userCanEdit}
|
||||||
|
>
|
||||||
|
{t('Switch to view mode')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{editMode && (
|
||||||
|
<UndoRedoKeylisteners
|
||||||
|
onUndo={this.handleCtrlZ}
|
||||||
|
onRedo={this.handleCtrlY}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!editMode &&
|
||||||
|
!hasUnsavedChanges && (
|
||||||
<Button
|
<Button
|
||||||
bsSize="small"
|
bsSize="small"
|
||||||
onClick={onUndo}
|
onClick={this.toggleEditMode}
|
||||||
disabled={undoLength < 1}
|
bsStyle={popButton ? 'primary' : undefined}
|
||||||
bsStyle={this.state.emphasizeUndo ? 'primary' : undefined}
|
disabled={!userCanEdit}
|
||||||
>
|
>
|
||||||
<div title="Undo" className="undo-action fa fa-reply" />
|
{t('Edit dashboard')}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{editMode && (
|
<HeaderActionsDropdown
|
||||||
<Button
|
addSuccessToast={this.props.addSuccessToast}
|
||||||
bsSize="small"
|
addDangerToast={this.props.addDangerToast}
|
||||||
onClick={onRedo}
|
dashboardId={dashboardInfo.id}
|
||||||
disabled={redoLength < 1}
|
dashboardTitle={dashboardTitle}
|
||||||
bsStyle={this.state.emphasizeRedo ? 'primary' : undefined}
|
layout={layout}
|
||||||
>
|
filters={filters}
|
||||||
<div title="Redo" className="redo-action fa fa-share" />
|
expandedSlices={expandedSlices}
|
||||||
</Button>
|
css={css}
|
||||||
)}
|
onSave={onSave}
|
||||||
|
onChange={onChange}
|
||||||
{editMode && (
|
forceRefreshAllCharts={this.forceRefresh}
|
||||||
<Button bsSize="small" onClick={this.props.toggleBuilderPane}>
|
startPeriodicRender={this.props.startPeriodicRender}
|
||||||
{showBuilderPane
|
updateCss={updateCss}
|
||||||
? t('Hide components')
|
editMode={editMode}
|
||||||
: t('Insert components')}
|
hasUnsavedChanges={hasUnsavedChanges}
|
||||||
</Button>
|
userCanEdit={userCanEdit}
|
||||||
)}
|
userCanSave={userCanSaveAs}
|
||||||
|
/>
|
||||||
{editMode &&
|
</div>
|
||||||
hasUnsavedChanges && (
|
|
||||||
<Button
|
|
||||||
bsSize="small"
|
|
||||||
bsStyle={popButton ? 'primary' : undefined}
|
|
||||||
onClick={this.overwriteDashboard}
|
|
||||||
>
|
|
||||||
{t('Save changes')}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!editMode &&
|
|
||||||
!hasUnsavedChanges && (
|
|
||||||
<Button
|
|
||||||
bsSize="small"
|
|
||||||
onClick={this.toggleEditMode}
|
|
||||||
bsStyle={popButton ? 'primary' : undefined}
|
|
||||||
disabled={!userCanEdit}
|
|
||||||
>
|
|
||||||
{t('Edit dashboard')}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{editMode &&
|
|
||||||
!hasUnsavedChanges && (
|
|
||||||
<Button
|
|
||||||
bsSize="small"
|
|
||||||
onClick={this.toggleEditMode}
|
|
||||||
bsStyle={undefined}
|
|
||||||
disabled={!userCanEdit}
|
|
||||||
>
|
|
||||||
{t('Switch to view mode')}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<HeaderActionsDropdown
|
|
||||||
addSuccessToast={this.props.addSuccessToast}
|
|
||||||
addDangerToast={this.props.addDangerToast}
|
|
||||||
dashboardId={dashboardInfo.id}
|
|
||||||
dashboardTitle={dashboardTitle}
|
|
||||||
layout={layout}
|
|
||||||
filters={filters}
|
|
||||||
expandedSlices={expandedSlices}
|
|
||||||
css={css}
|
|
||||||
onSave={onSave}
|
|
||||||
onChange={onChange}
|
|
||||||
forceRefreshAllCharts={this.forceRefresh}
|
|
||||||
startPeriodicRender={this.props.startPeriodicRender}
|
|
||||||
updateCss={updateCss}
|
|
||||||
editMode={editMode}
|
|
||||||
hasUnsavedChanges={hasUnsavedChanges}
|
|
||||||
userCanEdit={userCanEdit}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{editMode && (
|
|
||||||
<UndoRedoKeylisteners
|
|
||||||
onUndo={this.handleCtrlZ}
|
|
||||||
onRedo={this.handleCtrlY}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -10,6 +10,8 @@ import SaveModal from './SaveModal';
|
|||||||
import injectCustomCss from '../util/injectCustomCss';
|
import injectCustomCss from '../util/injectCustomCss';
|
||||||
import { SAVE_TYPE_NEWDASHBOARD } from '../util/constants';
|
import { SAVE_TYPE_NEWDASHBOARD } from '../util/constants';
|
||||||
import { t } from '../../locales';
|
import { t } from '../../locales';
|
||||||
|
import URLShortLinkModal from '../../components/URLShortLinkModal';
|
||||||
|
import getDashboardUrl from '../util/getDashboardUrl';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
addSuccessToast: PropTypes.func.isRequired,
|
addSuccessToast: PropTypes.func.isRequired,
|
||||||
@ -24,6 +26,7 @@ const propTypes = {
|
|||||||
startPeriodicRender: PropTypes.func.isRequired,
|
startPeriodicRender: PropTypes.func.isRequired,
|
||||||
editMode: PropTypes.bool.isRequired,
|
editMode: PropTypes.bool.isRequired,
|
||||||
userCanEdit: PropTypes.bool.isRequired,
|
userCanEdit: PropTypes.bool.isRequired,
|
||||||
|
userCanSave: PropTypes.bool.isRequired,
|
||||||
layout: PropTypes.object.isRequired,
|
layout: PropTypes.object.isRequired,
|
||||||
filters: PropTypes.object.isRequired,
|
filters: PropTypes.object.isRequired,
|
||||||
expandedSlices: PropTypes.object.isRequired,
|
expandedSlices: PropTypes.object.isRequired,
|
||||||
@ -82,10 +85,12 @@ class HeaderActionsDropdown extends React.PureComponent {
|
|||||||
expandedSlices,
|
expandedSlices,
|
||||||
onSave,
|
onSave,
|
||||||
userCanEdit,
|
userCanEdit,
|
||||||
|
userCanSave,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const emailBody = t('Check out this dashboard: %s', window.location.href);
|
const emailTitle = t('Superset Dashboard');
|
||||||
const emailLink = `mailto:?Subject=Superset%20Dashboard%20${dashboardTitle}&Body=${emailBody}`;
|
const emailSubject = `${emailTitle} ${dashboardTitle}`;
|
||||||
|
const emailBody = t('Check out this dashboard: ');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownButton
|
<DropdownButton
|
||||||
@ -95,31 +100,37 @@ class HeaderActionsDropdown extends React.PureComponent {
|
|||||||
bsSize="small"
|
bsSize="small"
|
||||||
pullRight
|
pullRight
|
||||||
>
|
>
|
||||||
<SaveModal
|
{userCanSave && (
|
||||||
addSuccessToast={this.props.addSuccessToast}
|
<SaveModal
|
||||||
addDangerToast={this.props.addDangerToast}
|
addSuccessToast={this.props.addSuccessToast}
|
||||||
dashboardId={dashboardId}
|
addDangerToast={this.props.addDangerToast}
|
||||||
dashboardTitle={dashboardTitle}
|
dashboardId={dashboardId}
|
||||||
saveType={SAVE_TYPE_NEWDASHBOARD}
|
dashboardTitle={dashboardTitle}
|
||||||
layout={layout}
|
saveType={SAVE_TYPE_NEWDASHBOARD}
|
||||||
filters={filters}
|
layout={layout}
|
||||||
expandedSlices={expandedSlices}
|
filters={filters}
|
||||||
css={css}
|
expandedSlices={expandedSlices}
|
||||||
onSave={onSave}
|
css={css}
|
||||||
isMenuItem
|
onSave={onSave}
|
||||||
triggerNode={<span>{t('Save as')}</span>}
|
isMenuItem
|
||||||
canOverwrite={userCanEdit}
|
triggerNode={<span>{t('Save as')}</span>}
|
||||||
/>
|
canOverwrite={userCanEdit}
|
||||||
{hasUnsavedChanges && (
|
/>
|
||||||
<MenuItem
|
|
||||||
eventKey="discard"
|
|
||||||
onSelect={HeaderActionsDropdown.discardChanges}
|
|
||||||
>
|
|
||||||
{t('Discard changes')}
|
|
||||||
</MenuItem>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<MenuItem divider />
|
{hasUnsavedChanges &&
|
||||||
|
userCanSave && (
|
||||||
|
<div>
|
||||||
|
<MenuItem
|
||||||
|
eventKey="discard"
|
||||||
|
onSelect={HeaderActionsDropdown.discardChanges}
|
||||||
|
>
|
||||||
|
{t('Discard changes')}
|
||||||
|
</MenuItem>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{userCanSave && <MenuItem divider />}
|
||||||
|
|
||||||
<MenuItem onClick={forceRefreshAllCharts}>
|
<MenuItem onClick={forceRefreshAllCharts}>
|
||||||
{t('Force refresh dashboard')}
|
{t('Force refresh dashboard')}
|
||||||
@ -138,9 +149,16 @@ class HeaderActionsDropdown extends React.PureComponent {
|
|||||||
{t('Edit dashboard metadata')}
|
{t('Edit dashboard metadata')}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)}
|
)}
|
||||||
{editMode && (
|
|
||||||
<MenuItem href={emailLink}>{t('Email dashboard link')}</MenuItem>
|
<URLShortLinkModal
|
||||||
)}
|
url={getDashboardUrl(window.location.pathname, this.props.filters)}
|
||||||
|
emailSubject={emailSubject}
|
||||||
|
emailContent={emailBody}
|
||||||
|
addDangerToast={this.props.addDangerToast}
|
||||||
|
isMenuItem
|
||||||
|
triggerNode={<span>{t('Share dashboard')}</span>}
|
||||||
|
/>
|
||||||
|
|
||||||
{editMode && (
|
{editMode && (
|
||||||
<CssEditor
|
<CssEditor
|
||||||
triggerNode={<span>{t('Edit CSS')}</span>}
|
triggerNode={<span>{t('Edit CSS')}</span>}
|
||||||
|
6
superset/assets/src/dashboard/util/getDashboardUrl.js
Normal file
6
superset/assets/src/dashboard/util/getDashboardUrl.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
/* eslint camelcase: 0 */
|
||||||
|
|
||||||
|
export default function getDashboardUrl(pathname, filters = {}) {
|
||||||
|
const preselect_filters = encodeURIComponent(JSON.stringify(filters));
|
||||||
|
return `${pathname}?preselect_filters=${preselect_filters}`;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user