refactor progress (#16339)

apache · Apr 18, 2022 · eef744a · eef744a
1 parent 6b3637b
commit eef744a
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 92 deletions.
diff --git a/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx b/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx
@@ -27,20 +27,21 @@ import { NoAnimationDropdown } from 'src/components/Dropdown';
 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,
@@ -56,6 +57,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) {
@@ -97,7 +99,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}
@@ -107,48 +111,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
@@ -101,6 +101,7 @@ interface ReportProps {
   dashboardId?: number;
   chart?: ChartObject;
   creationMethod: string;
+  props: any;
 }
 
 interface ReportPayloadType {
@@ -186,10 +187,14 @@ const ReportModal: FunctionComponent<ReportProps> = ({
   onReportAdd,
   onHide,
   show = false,
+  dashboardId,
+  chart,
+  userId,
+  userEmail,
   ...props
 }) => {
-  const vizType = props.chart?.sliceFormData?.viz_type;
-  const isChart = !!props.chart;
+  const vizType = chart?.sliceFormData?.viz_type;
+  const isChart = !!chart;
   const defaultNotificationFormat =
     isChart && TEXT_BASED_VISUALIZATION_TYPES.includes(vizType)
       ? NOTIFICATION_FORMATS.TEXT
@@ -225,14 +230,14 @@ const ReportModal: FunctionComponent<ReportProps> = ({
     // Create new Report
     const newReportValues: Partial<ReportObject> = {
       crontab: currentReport?.crontab,
-      dashboard: props.dashboardId,
-      chart: props.chart?.id,
+      dashboard: dashboardId,
+      chart: chart?.id,
       description: currentReport?.description,
       name: currentReport?.name,
-      owners: [props.userId],
+      owners: [userId],
       recipients: [
         {
-          recipient_config_json: { target: props.userEmail },
+          recipient_config_json: { target: userEmail },
           type: 'Email',
         },
       ],

diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx
@@ -165,8 +165,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() {
@@ -180,7 +178,6 @@ class Header extends React.PureComponent {
           'dashboard_id',
           'dashboards',
           dashboardInfo.id,
-          user.email,
         );
       }
     }
@@ -413,45 +410,6 @@ class Header extends React.PureComponent {
     this.setState({ showingPropertiesModal: false });
   }
 
-  showReportModal() {
-    this.setState({ showingReportModal: true });
-  }
-
-  hideReportModal() {
-    this.setState({ showingReportModal: false });
-  }
-
-  showEmbedModal = () => {
-    this.setState({ showingEmbedModal: true });
-  };
-
-  hideEmbedModal = () => {
-    this.setState({ showingEmbedModal: 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;
@@ -642,9 +600,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
@@ -33,14 +33,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',