This is an automated email from the ASF dual-hosted git repository. elizabeth pushed a commit to branch refactorReports in repository https://gitbox.apache.org/repos/asf/superset.git
commit 684fa58413e23e181fc3f53eb489dc60235304f0 Author: Lyndsi Kay Williams <[email protected]> AuthorDate: Thu Aug 19 12:19:33 2021 -0500 refactor progress (#16339) --- .../HeaderReportActionsDropdown/index.tsx | 97 +++++++++++++--------- .../src/components/ReportModal/index.tsx | 19 +++-- .../src/dashboard/components/Header/index.jsx | 14 +--- superset-frontend/src/reports/actions/reports.js | 4 +- 4 files changed, 70 insertions(+), 64 deletions(-) diff --git a/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx b/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx index 4d9ceb8..bbc30c8 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 ReportModal from 'src/components/ReportModal'; import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes'; const deleteColor = (theme: SupersetTheme) => css` @@ -33,13 +34,13 @@ const deleteColor = (theme: SupersetTheme) => css` `; export default function HeaderReportActionsDropDown({ - showReportModal, toggleActive, deleteActiveReport, + dashboardId, }: { - showReportModal: () => void; toggleActive: (data: AlertObject, checked: boolean) => void; deleteActiveReport: (data: AlertObject) => void; + dashboardId?: number; }) { const reports: Record<number, AlertObject> = useSelector<any, AlertObject>( state => state.reports, @@ -55,6 +56,7 @@ export default function HeaderReportActionsDropDown({ setCurrentReportDeleting, ] = useState<AlertObject | null>(null); const theme = useTheme(); + const [showModal, setShowModal] = useState(false); const toggleActiveKey = async (data: AlertObject, checked: boolean) => { if (data?.id) { @@ -96,7 +98,9 @@ export default function HeaderReportActionsDropDown({ css={{ marginLeft: theme.gridUnit * 2 }} /> </Menu.Item> - <Menu.Item onClick={showReportModal}>{t('Edit email report')}</Menu.Item> + <Menu.Item onClick={() => setShowModal(true)}> + {t('Edit email report')} + </Menu.Item> <Menu.Item onClick={() => setCurrentReportDeleting(report)} css={deleteColor} @@ -106,48 +110,59 @@ export default function HeaderReportActionsDropDown({ </Menu> ); - return canAddReports() ? ( - report ? ( + return ( + canAddReports() && ( <> - <NoAnimationDropdown - // ref={ref} - overlay={menu()} - trigger={['click']} - getPopupContainer={(triggerNode: any) => - triggerNode.closest('.action-button') - } - > - <span role="button" className="action-button" tabIndex={0}> + <ReportModal + show={showModal} + onHide={() => setShowModal(false)} + userId={user.userId} + userEmail={user.email} + dashboardId={dashboardId} + /> + {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={() => setShowModal(true)} + > <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} - > - <Icons.Calendar /> - </span> ) - ) : null; + ); } diff --git a/superset-frontend/src/components/ReportModal/index.tsx b/superset-frontend/src/components/ReportModal/index.tsx index 178e394..6042367 100644 --- a/superset-frontend/src/components/ReportModal/index.tsx +++ b/superset-frontend/src/components/ReportModal/index.tsx @@ -97,7 +97,6 @@ interface ReportProps { userEmail: string; dashboardId?: number; chart?: ChartObject; - creationMethod: string; props: any; } @@ -169,10 +168,14 @@ const ReportModal: FunctionComponent<ReportProps> = ({ onReportAdd, onHide, show = false, + dashboardId, + chart, + userId, + userEmail, ...props }) => { - const vizType = props.props.chart?.sliceFormData?.viz_type; - const isChart = !!props.props.chart; + const vizType = chart?.sliceFormData?.viz_type; + const isChart = !!chart; const defaultNotificationFormat = isChart && TEXT_BASED_VISUALIZATION_TYPES.includes(vizType) ? NOTIFICATION_FORMATS.TEXT @@ -211,19 +214,19 @@ const ReportModal: FunctionComponent<ReportProps> = ({ // Create new Report const newReportValues: Partial<ReportObject> = { crontab: currentReport?.crontab, - dashboard: props.props.dashboardId, - chart: props.props.chart?.id, + dashboard: dashboardId, + chart: chart?.id, description: currentReport?.description, name: currentReport?.name, - owners: [props.props.userId], + owners: [userId], recipients: [ { - recipient_config_json: { target: props.props.userEmail }, + recipient_config_json: { target: userEmail }, type: 'Email', }, ], type: 'Report', - creation_method: props.props.creationMethod, + creation_method: dashboardId ? 'dashboards' : 'charts', active: true, report_format: currentReport?.report_format || defaultNotificationFormat, timezone: currentReport?.timezone, diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx index 08ac0fb..398daa9 100644 --- a/superset-frontend/src/dashboard/components/Header/index.jsx +++ b/superset-frontend/src/dashboard/components/Header/index.jsx @@ -162,8 +162,6 @@ class Header extends React.PureComponent { this.overwriteDashboard = this.overwriteDashboard.bind(this); this.showPropertiesModal = this.showPropertiesModal.bind(this); this.hidePropertiesModal = this.hidePropertiesModal.bind(this); - this.showReportModal = this.showReportModal.bind(this); - this.hideReportModal = this.hideReportModal.bind(this); } componentDidMount() { @@ -176,7 +174,6 @@ class Header extends React.PureComponent { 'dashboard_id', 'dashboards', dashboardInfo.id, - user.email, ); } } @@ -213,7 +210,6 @@ class Header extends React.PureComponent { 'dashboard_id', 'dashboards', nextProps.dashboardInfo.id, - user.email, ); } } @@ -406,14 +402,6 @@ class Header extends React.PureComponent { this.setState({ showingPropertiesModal: false }); } - showReportModal() { - this.setState({ showingReportModal: true }); - } - - hideReportModal() { - this.setState({ showingReportModal: false }); - } - canAddReports() { if (!isFeatureEnabled(FeatureFlag.ALERT_REPORTS)) { return false; @@ -579,9 +567,9 @@ class Header extends React.PureComponent { </span> )} <HeaderReportActionsDropdown - showReportModal={this.showReportModal} toggleActive={this.props.toggleActive} deleteActiveReport={this.props.deleteActiveReport} + dashboardId={dashboardInfo.id} /> </> )} diff --git a/superset-frontend/src/reports/actions/reports.js b/superset-frontend/src/reports/actions/reports.js index 345cfa1..3c01da7 100644 --- a/superset-frontend/src/reports/actions/reports.js +++ b/superset-frontend/src/reports/actions/reports.js @@ -34,14 +34,14 @@ export function fetchUISpecificReport( userId, filter_field, creation_method, - dashboardId, + resourceId, ) { const queryParams = rison.encode({ filters: [ { col: filter_field, opr: 'eq', - value: dashboardId, + value: resourceId, }, { col: 'creation_method',
