From 0147e8b4aa2f1491b018c2336f38fa92515765a7 Mon Sep 17 00:00:00 2001 From: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Date: Wed, 18 Aug 2021 15:58:10 -0400 Subject: [PATCH] pexdax refactor (#16333) --- .../HeaderReportActionsDropdown/index.tsx | 106 ++++++++++++------ .../src/dashboard/components/Header/index.jsx | 57 +++------- .../components/ExploreChartHeader/index.jsx | 32 +----- 3 files changed, 95 insertions(+), 100 deletions(-) diff --git a/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx b/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx index 6fc39283600b1..4d9ceb86fc5d3 100644 --- a/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx +++ b/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx @@ -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}; @@ -40,11 +41,19 @@ export default function HeaderReportActionsDropDown({ toggleActive: (data: AlertObject, checked: boolean) => void; deleteActiveReport: (data: AlertObject) => void; }) { - const reports = useSelector(state => state.reports); + const reports: Record = useSelector( + 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 [currentReportDeleting, setCurrentReportDeleting] = - useState(null); + const report: AlertObject = reports[reportsIds[0]]; + const [ + currentReportDeleting, + setCurrentReportDeleting, + ] = useState(null); const theme = useTheme(); const toggleActiveKey = async (data: AlertObject, checked: boolean) => { @@ -58,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 = () => ( @@ -80,36 +106,48 @@ export default function HeaderReportActionsDropDown({ ); - return isFeatureEnabled(FeatureFlag.ALERT_REPORTS) ? ( - <> - - triggerNode.closest('.action-button') - } + return canAddReports() ? ( + report ? ( + <> + + triggerNode.closest('.action-button') + } + > + + + + + {currentReportDeleting && ( + { + if (currentReportDeleting) { + handleReportDelete(currentReportDeleting); + } + }} + onHide={() => setCurrentReportDeleting(null)} + open + title={t('Delete Report?')} + /> + )} + + ) : ( + - - - - - {currentReportDeleting && ( - { - if (currentReportDeleting) { - handleReportDelete(currentReportDeleting); - } - }} - onHide={() => setCurrentReportDeleting(null)} - open - title={t('Delete Report?')} - /> - )} - + + + ) ) : null; } diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx index 075bb125fb458..712af18c9fcaf 100644 --- a/superset-frontend/src/dashboard/components/Header/index.jsx +++ b/superset-frontend/src/dashboard/components/Header/index.jsx @@ -166,7 +166,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() { @@ -408,29 +407,6 @@ class Header extends React.PureComponent { this.setState({ showingReportModal: false }); } - renderReportModal() { - const attachedReportExists = !!Object.keys(this.props.reports).length; - return attachedReportExists ? ( - - ) : ( - <> - - - - - ); - } - canAddReports() { if (!isFeatureEnabled(FeatureFlag.ALERT_REPORTS)) { return false; @@ -485,7 +461,6 @@ class Header extends React.PureComponent { const userCanSaveAs = dashboardInfo.dash_save_perm && filterboxMigrationState !== FILTER_BOX_MIGRATION_STATES.REVIEWING; - const shouldShowReport = !editMode && this.canAddReports(); const refreshLimit = dashboardInfo.common.conf.SUPERSET_DASHBOARD_PERIODICAL_REFRESH_LIMIT; const refreshWarning = @@ -591,27 +566,31 @@ class Header extends React.PureComponent { )} )} - {editMode && ( + {editMode ? ( - )} - - {!editMode && userCanEdit && ( + ) : ( <> - - - + {userCanEdit && ( + + + + )} + )} - {shouldShowReport && this.renderReportModal()} {this.state.showingPropertiesModal && ( - ) : ( - <> - - - - - ); - } - canAddReports() { if (!isFeatureEnabled(FeatureFlag.ALERT_REPORTS)) { return false; @@ -343,7 +317,11 @@ export class ExploreChartHeader extends React.PureComponent { isRunning={chartStatus === 'loading'} status={CHART_STATUS_MAP[chartStatus]} /> - {this.canAddReports() && this.renderReportModal()} +