mirror of https://github.com/apache/superset.git
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: '',
|
||||
};
|
||||
this.onShortUrlSuccess = this.onShortUrlSuccess.bind(this);
|
||||
this.getCopyUrl = this.getCopyUrl.bind(this);
|
||||
}
|
||||
|
||||
onShortUrlSuccess(data) {
|
||||
|
@ -54,7 +55,7 @@ class URLShortLinkButton extends React.Component {
|
|||
trigger="click"
|
||||
rootClose
|
||||
placement="left"
|
||||
onEnter={this.getCopyUrl.bind(this)}
|
||||
onEnter={this.getCopyUrl}
|
||||
overlay={this.renderPopover()}
|
||||
>
|
||||
<span className="btn btn-default btn-sm">
|
||||
|
|
|
@ -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>
|
||||
</div>
|
||||
|
||||
{userCanSaveAs && (
|
||||
<div className="button-container">
|
||||
{editMode && (
|
||||
<div className="button-container">
|
||||
{userCanSaveAs && (
|
||||
<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
|
||||
bsSize="small"
|
||||
onClick={onUndo}
|
||||
disabled={undoLength < 1}
|
||||
bsStyle={this.state.emphasizeUndo ? 'primary' : undefined}
|
||||
onClick={this.toggleEditMode}
|
||||
bsStyle={popButton ? 'primary' : undefined}
|
||||
disabled={!userCanEdit}
|
||||
>
|
||||
<div title="Undo" className="undo-action fa fa-reply" />
|
||||
{t('Edit dashboard')}
|
||||
</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={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>
|
||||
)}
|
||||
<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}
|
||||
userCanSave={userCanSaveAs}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -10,6 +10,8 @@ import SaveModal from './SaveModal';
|
|||
import injectCustomCss from '../util/injectCustomCss';
|
||||
import { SAVE_TYPE_NEWDASHBOARD } from '../util/constants';
|
||||
import { t } from '../../locales';
|
||||
import URLShortLinkModal from '../../components/URLShortLinkModal';
|
||||
import getDashboardUrl from '../util/getDashboardUrl';
|
||||
|
||||
const propTypes = {
|
||||
addSuccessToast: PropTypes.func.isRequired,
|
||||
|
@ -24,6 +26,7 @@ const propTypes = {
|
|||
startPeriodicRender: PropTypes.func.isRequired,
|
||||
editMode: PropTypes.bool.isRequired,
|
||||
userCanEdit: PropTypes.bool.isRequired,
|
||||
userCanSave: PropTypes.bool.isRequired,
|
||||
layout: PropTypes.object.isRequired,
|
||||
filters: PropTypes.object.isRequired,
|
||||
expandedSlices: PropTypes.object.isRequired,
|
||||
|
@ -82,10 +85,12 @@ class HeaderActionsDropdown extends React.PureComponent {
|
|||
expandedSlices,
|
||||
onSave,
|
||||
userCanEdit,
|
||||
userCanSave,
|
||||
} = this.props;
|
||||
|
||||
const emailBody = t('Check out this dashboard: %s', window.location.href);
|
||||
const emailLink = `mailto:?Subject=Superset%20Dashboard%20${dashboardTitle}&Body=${emailBody}`;
|
||||
const emailTitle = t('Superset Dashboard');
|
||||
const emailSubject = `${emailTitle} ${dashboardTitle}`;
|
||||
const emailBody = t('Check out this dashboard: ');
|
||||
|
||||
return (
|
||||
<DropdownButton
|
||||
|
@ -95,31 +100,37 @@ class HeaderActionsDropdown extends React.PureComponent {
|
|||
bsSize="small"
|
||||
pullRight
|
||||
>
|
||||
<SaveModal
|
||||
addSuccessToast={this.props.addSuccessToast}
|
||||
addDangerToast={this.props.addDangerToast}
|
||||
dashboardId={dashboardId}
|
||||
dashboardTitle={dashboardTitle}
|
||||
saveType={SAVE_TYPE_NEWDASHBOARD}
|
||||
layout={layout}
|
||||
filters={filters}
|
||||
expandedSlices={expandedSlices}
|
||||
css={css}
|
||||
onSave={onSave}
|
||||
isMenuItem
|
||||
triggerNode={<span>{t('Save as')}</span>}
|
||||
canOverwrite={userCanEdit}
|
||||
/>
|
||||
{hasUnsavedChanges && (
|
||||
<MenuItem
|
||||
eventKey="discard"
|
||||
onSelect={HeaderActionsDropdown.discardChanges}
|
||||
>
|
||||
{t('Discard changes')}
|
||||
</MenuItem>
|
||||
{userCanSave && (
|
||||
<SaveModal
|
||||
addSuccessToast={this.props.addSuccessToast}
|
||||
addDangerToast={this.props.addDangerToast}
|
||||
dashboardId={dashboardId}
|
||||
dashboardTitle={dashboardTitle}
|
||||
saveType={SAVE_TYPE_NEWDASHBOARD}
|
||||
layout={layout}
|
||||
filters={filters}
|
||||
expandedSlices={expandedSlices}
|
||||
css={css}
|
||||
onSave={onSave}
|
||||
isMenuItem
|
||||
triggerNode={<span>{t('Save as')}</span>}
|
||||
canOverwrite={userCanEdit}
|
||||
/>
|
||||
)}
|
||||
|
||||
<MenuItem divider />
|
||||
{hasUnsavedChanges &&
|
||||
userCanSave && (
|
||||
<div>
|
||||
<MenuItem
|
||||
eventKey="discard"
|
||||
onSelect={HeaderActionsDropdown.discardChanges}
|
||||
>
|
||||
{t('Discard changes')}
|
||||
</MenuItem>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{userCanSave && <MenuItem divider />}
|
||||
|
||||
<MenuItem onClick={forceRefreshAllCharts}>
|
||||
{t('Force refresh dashboard')}
|
||||
|
@ -138,9 +149,16 @@ class HeaderActionsDropdown extends React.PureComponent {
|
|||
{t('Edit dashboard metadata')}
|
||||
</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 && (
|
||||
<CssEditor
|
||||
triggerNode={<span>{t('Edit CSS')}</span>}
|
||||
|
|
|
@ -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