Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: refactoring Reports Modal #16333

Merged
merged 1 commit into from
Aug 18, 2021
Merged

refactor: refactoring Reports Modal #16333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 68 additions & 32 deletions superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { Menu, NoAnimationDropdown } from 'src/common/components';
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';

import DeleteModal from 'src/components/DeleteModal';
import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';

const deleteColor = (theme: SupersetTheme) => css`
color: ${theme.colors.error.base};
Expand All @@ -40,9 +41,15 @@ export default function HeaderReportActionsDropDown({
toggleActive: (data: AlertObject, checked: boolean) => void;
deleteActiveReport: (data: AlertObject) => void;
}) {
const reports = useSelector<any, AlertObject>(state => state.reports);
const reports: Record<number, AlertObject> = useSelector<any, AlertObject>(
state => state.reports,
);
const user: UserWithPermissionsAndRoles = useSelector<
any,
UserWithPermissionsAndRoles
>(state => state.user || state.explore?.user);
const reportsIds = Object.keys(reports);
const report = reports[reportsIds[0]];
const report: AlertObject = reports[reportsIds[0]];
const [
currentReportDeleting,
setCurrentReportDeleting,
Expand All @@ -60,6 +67,23 @@ export default function HeaderReportActionsDropDown({
setCurrentReportDeleting(null);
};

const canAddReports = () => {
if (!isFeatureEnabled(FeatureFlag.ALERT_REPORTS)) {
return false;
}
if (!user) {
// this is in the case that there is an anonymous user.
return false;
}
const roles = Object.keys(user.roles || []);
const permissions = roles.map(key =>
user.roles[key].filter(
perms => perms[0] === 'menu_access' && perms[1] === 'Manage',
),
);
return permissions[0].length > 0;
};

const menu = () => (
<Menu selectable={false} css={{ width: '200px' }}>
<Menu.Item>
Expand All @@ -82,36 +106,48 @@ export default function HeaderReportActionsDropDown({
</Menu>
);

return isFeatureEnabled(FeatureFlag.ALERT_REPORTS) ? (
<>
<NoAnimationDropdown
// ref={ref}
overlay={menu()}
trigger={['click']}
getPopupContainer={(triggerNode: any) =>
triggerNode.closest('.action-button')
}
return canAddReports() ? (
report ? (
<>
<NoAnimationDropdown
// ref={ref}
overlay={menu()}
trigger={['click']}
getPopupContainer={(triggerNode: any) =>
triggerNode.closest('.action-button')
}
>
<span role="button" className="action-button" tabIndex={0}>
<Icons.Calendar />
</span>
</NoAnimationDropdown>
{currentReportDeleting && (
<DeleteModal
description={t(
'This action will permanently delete %s.',
currentReportDeleting.name,
)}
onConfirm={() => {
if (currentReportDeleting) {
handleReportDelete(currentReportDeleting);
}
}}
onHide={() => setCurrentReportDeleting(null)}
open
title={t('Delete Report?')}
/>
)}
</>
) : (
<span
role="button"
title={t('Schedule email report')}
tabIndex={0}
className="action-button"
onClick={showReportModal}
>
<span role="button" className="action-button" tabIndex={0}>
<Icons.Calendar />
</span>
</NoAnimationDropdown>
{currentReportDeleting && (
<DeleteModal
description={t(
'This action will permanently delete %s.',
currentReportDeleting.name,
)}
onConfirm={() => {
if (currentReportDeleting) {
handleReportDelete(currentReportDeleting);
}
}}
onHide={() => setCurrentReportDeleting(null)}
open
title={t('Delete Report?')}
/>
)}
</>
<Icons.Calendar />
</span>
)
) : null;
}
2 changes: 1 addition & 1 deletion superset-frontend/src/components/ReportModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ import {
StyledRadioGroup,
} from './styles';

interface ReportObject {
export interface ReportObject {
id?: number;
active: boolean;
crontab: string;
Expand Down
57 changes: 18 additions & 39 deletions superset-frontend/src/dashboard/components/Header/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,6 @@ class Header extends React.PureComponent {
this.hidePropertiesModal = this.hidePropertiesModal.bind(this);
this.showReportModal = this.showReportModal.bind(this);
this.hideReportModal = this.hideReportModal.bind(this);
this.renderReportModal = this.renderReportModal.bind(this);
}

componentDidMount() {
Expand Down Expand Up @@ -400,29 +399,6 @@ class Header extends React.PureComponent {
this.setState({ showingReportModal: false });
}

renderReportModal() {
const attachedReportExists = !!Object.keys(this.props.reports).length;
return attachedReportExists ? (
<HeaderReportActionsDropdown
showReportModal={this.showReportModal}
toggleActive={this.props.toggleActive}
deleteActiveReport={this.props.deleteActiveReport}
/>
) : (
<>
<span
role="button"
title={t('Schedule email report')}
tabIndex={0}
className="action-button"
onClick={this.showReportModal}
>
<Icons.Calendar />
</span>
</>
);
}

canAddReports() {
if (!isFeatureEnabled(FeatureFlag.ALERT_REPORTS)) {
return false;
Expand Down Expand Up @@ -472,7 +448,6 @@ class Header extends React.PureComponent {
const userCanEdit = dashboardInfo.dash_edit_perm;
const userCanShare = dashboardInfo.dash_share_perm;
const userCanSaveAs = dashboardInfo.dash_save_perm;
const shouldShowReport = !editMode && this.canAddReports();
const refreshLimit =
dashboardInfo.common.conf.SUPERSET_DASHBOARD_PERIODICAL_REFRESH_LIMIT;
const refreshWarning =
Expand Down Expand Up @@ -568,27 +543,31 @@ class Header extends React.PureComponent {
)}
</div>
)}
{editMode && (
{editMode ? (
<UndoRedoKeyListeners
onUndo={this.handleCtrlZ}
onRedo={this.handleCtrlY}
/>
)}

{!editMode && userCanEdit && (
) : (
<>
<span
role="button"
title={t('Edit dashboard')}
tabIndex={0}
className="action-button"
onClick={this.toggleEditMode}
>
<Icons.EditAlt />
</span>
{userCanEdit && (
<span
role="button"
title={t('Edit dashboard')}
tabIndex={0}
className="action-button"
onClick={this.toggleEditMode}
>
<Icons.EditAlt />
</span>
)}
<HeaderReportActionsDropdown
showReportModal={this.showReportModal}
toggleActive={this.props.toggleActive}
deleteActiveReport={this.props.deleteActiveReport}
/>
</>
)}
{shouldShowReport && this.renderReportModal()}

{this.state.showingPropertiesModal && (
<PropertiesModal
Expand Down
32 changes: 5 additions & 27 deletions superset-frontend/src/explore/components/ExploreChartHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import Icons from 'src/components/Icons';
import { styled, t } from '@superset-ui/core';
import { Tooltip } from 'src/components/Tooltip';
import ReportModal from 'src/components/ReportModal';
Expand Down Expand Up @@ -113,7 +112,6 @@ export class ExploreChartHeader extends React.PureComponent {
this.closePropertiesModal = this.closePropertiesModal.bind(this);
this.showReportModal = this.showReportModal.bind(this);
this.hideReportModal = this.hideReportModal.bind(this);
this.renderReportModal = this.renderReportModal.bind(this);
}

componentDidMount() {
Expand Down Expand Up @@ -163,30 +161,6 @@ export class ExploreChartHeader extends React.PureComponent {
this.setState({ showingReportModal: false });
}

renderReportModal() {
const attachedReportExists = !!Object.keys(this.props.reports).length;
return attachedReportExists ? (
<HeaderReportActionsDropdown
showReportModal={this.showReportModal}
hideReportModal={this.hideReportModal}
toggleActive={this.props.toggleActive}
deleteActiveReport={this.props.deleteActiveReport}
/>
) : (
<>
<span
role="button"
title={t('Schedule email report')}
tabIndex={0}
className="action-button"
onClick={this.showReportModal}
>
<Icons.Calendar />
</span>
</>
);
}

canAddReports() {
if (!isFeatureEnabled(FeatureFlag.ALERT_REPORTS)) {
return false;
Expand Down Expand Up @@ -287,7 +261,11 @@ export class ExploreChartHeader extends React.PureComponent {
isRunning={chartStatus === 'loading'}
status={CHART_STATUS_MAP[chartStatus]}
/>
{this.canAddReports() && this.renderReportModal()}
<HeaderReportActionsDropdown
showReportModal={this.showReportModal}
toggleActive={this.props.toggleActive}
deleteActiveReport={this.props.deleteActiveReport}
/>
<ReportModal
show={this.state.showingReportModal}
onHide={this.hideReportModal}
Expand Down