refactor: Reports - dashboards

superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx

@@ -26,20 +26,21 @@ 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`
   color: ${theme.colors.error.base};
 `;
 
 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;
+  );
 }

superset-frontend/src/components/ReportModal/index.tsx

@@ -97,7 +97,6 @@ interface ReportProps {
   userEmail: string;
   dashboardId?: number;
   chart?: ChartObject;
-  creationMethod: string;
   props: any;
 }
 
@@ -168,10 +167,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
@@ -210,19 +213,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,
       timezone: currentReport?.timezone,

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,
       );
     }
   }
@@ -206,7 +203,6 @@ class Header extends React.PureComponent {
         'dashboard_id',
         'dashboards',
         nextProps.dashboardInfo.id,
-        user.email,
       );
     }
   }
@@ -391,14 +387,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;
@@ -562,9 +550,9 @@ class Header extends React.PureComponent {
                 </span>
               )}
               <HeaderReportActionsDropdown
-                showReportModal={this.showReportModal}
                 toggleActive={this.props.toggleActive}
                 deleteActiveReport={this.props.deleteActiveReport}
+                dashboardId={dashboardInfo.id}
               />
             </>
           )}

superset-frontend/src/reports/actions/reports.js

@@ -31,14 +31,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',