From 665042555a5658fff5257dd10431e7cbaf35b9a5 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     | 128 ++++++------------
 .../src/dashboard/components/Header/index.jsx |  17 ++-
 .../components/ExploreChartHeader/index.jsx   |   1 -
 3 files changed, 57 insertions(+), 89 deletions(-)

diff --git a/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx b/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx
index 48aa6218a865d..c43fbf6e19cb5 100644
--- a/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx
+++ b/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx
@@ -25,10 +25,8 @@ import { AlertObject } from 'src/views/CRUD/alert/types';
 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 { ChartState } from 'src/explore/types';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
-import { fetchUISpecificReport } from 'src/reports/actions/reports';
 
 const deleteColor = (theme: SupersetTheme) => css`
   color: ${theme.colors.error.base};
@@ -38,14 +36,14 @@ export default function HeaderReportActionsDropDown({
   toggleActive,
   deleteActiveReport,
   dashboardId,
-  chart,
+  showReportModal,
 }: {
+  showReportModal: () => void;
   toggleActive: (data: AlertObject, checked: boolean) => void;
   deleteActiveReport: (data: AlertObject) => void;
   dashboardId?: number;
   chart?: ChartState;
 }) {
-  const dispatch = useDispatch();
   const reports: Record<number, AlertObject> = useSelector<any, AlertObject>(
     state => state.reports,
   );
@@ -53,8 +51,8 @@ export default function HeaderReportActionsDropDown({
     any,
     UserWithPermissionsAndRoles
   >(state => state.user || state.explore?.user);
-  const reportsIds = Object.keys(reports || []);
-  const report: AlertObject = reports?.[reportsIds[0]];
+  const reportsIds = Object.keys(reports);
+  const report: AlertObject = reports[reportsIds[0]];
   const [
     currentReportDeleting,
     setCurrentReportDeleting,
@@ -90,36 +88,6 @@ export default function HeaderReportActionsDropDown({
     return permissions[0].length > 0;
   };
 
-  useEffect(() => {
-    if (canAddReports()) {
-      dispatch(
-        fetchUISpecificReport({
-          userId: user.userId,
-          filterField: dashboardId ? 'dashboard_id' : 'chart_id',
-          creationMethod: dashboardId ? 'dashboards' : 'charts',
-          resourceId: dashboardId || chart?.id,
-        }),
-      );
-    }
-  }, []);
-
-  useEffect(() => {
-    if (
-      canAddReports() &&
-      dashboardId &&
-      dashboardId !== dashboardIdRef.current
-    ) {
-      dispatch(
-        fetchUISpecificReport({
-          userId: user.userId,
-          filterField: 'dashboard_id',
-          creationMethod: 'dashboards',
-          resourceId: dashboardId,
-        }),
-      );
-    }
-  }, [dashboardId]);
-
   const menu = () => (
     <Menu selectable={false} css={{ width: '200px' }}>
       <Menu.Item>
@@ -144,60 +112,48 @@ export default function HeaderReportActionsDropDown({
     </Menu>
   );
 
-  return (
-    canAddReports() && (
+  return canAddReports() ? (
+    report ? (
       <>
-        <ReportModal
-          show={showModal}
-          onHide={() => setShowModal(false)}
-          userId={user.userId}
-          userEmail={user.email}
-          dashboardId={dashboardId}
-          chart={chart}
-        />
-        {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)}
-          >
+        <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}
+      >
+        <Icons.Calendar />
+      </span>
     )
-  );
+  ) : null;
 }
diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx
index e3e589470dbde..586eb3e16e411 100644
--- a/superset-frontend/src/dashboard/components/Header/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/index.jsx
@@ -161,6 +161,8 @@ 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() {
@@ -370,6 +372,14 @@ class Header extends React.PureComponent {
     this.setState({ showingPropertiesModal: false });
   }
 
+  showReportModal() {
+    this.setState({ showingReportModal: true });
+  }
+
+  hideReportModal() {
+    this.setState({ showingReportModal: false });
+  }
+
   render() {
     const {
       dashboardTitle,
@@ -533,6 +543,7 @@ class Header extends React.PureComponent {
                 toggleActive={this.props.toggleActive}
                 deleteActiveReport={this.props.deleteActiveReport}
                 dashboardId={dashboardInfo.id}
+                showReportModal={this.showReportModal}
               />
             </>
           )}
@@ -544,8 +555,10 @@ class Header extends React.PureComponent {
               onHide={this.hidePropertiesModal}
               colorScheme={this.props.colorScheme}
               onSubmit={updates => {
-                const { dashboardInfoChanged, dashboardTitleChanged } =
-                  this.props;
+                const {
+                  dashboardInfoChanged,
+                  dashboardTitleChanged
+                } = this.props;
                 dashboardInfoChanged({
                   slug: updates.slug,
                   metadata: JSON.parse(updates.jsonMetadata),
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
index 7615e11b7700b..0e0991cac647b 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
@@ -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 {
   CategoricalColorNamespace,
   SupersetClient,