Skip to content

Commit

Permalink
pexdax refactor (#16333)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AAfghahi @eschutho
AAfghahi authored and eschutho committed Sep 3, 2021
1 parent 5f8dff1 commit f196497
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 98 deletions.
100 changes: 68 additions & 32 deletions superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx
View file
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;
}
57 changes: 18 additions & 39 deletions superset-frontend/src/dashboard/components/Header/index.jsx
View file
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 @@ -570,27 +545,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
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

0 comments on commit f196497

Please sign in to comment.