From 44e6aa3b64531f69b8ee6b2a8979b8087f6dc770 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     | 100 ++++++++++++------
 .../src/components/ReportModal/index.tsx      |   2 +-
 .../src/dashboard/components/Header/index.jsx |  57 ++++------
 .../explore/components/ExploreChartHeader.jsx |  32 +-----
 4 files changed, 92 insertions(+), 99 deletions(-)

diff --git a/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx b/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx
index 2ffc6f28600e7..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,9 +41,15 @@ export default function HeaderReportActionsDropDown({
   toggleActive: (data: AlertObject, checked: boolean) => void;
   deleteActiveReport: (data: AlertObject) => void;
 }) {
-  const reports = useSelector<any, AlertObject>(state => state.reports);
+  const reports: Record<number, AlertObject> = useSelector<any, AlertObject>(
+    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 report: AlertObject = reports[reportsIds[0]];
   const [
     currentReportDeleting,
     setCurrentReportDeleting,
@@ -60,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 = () => (
     <Menu selectable={false} css={{ width: '200px' }}>
       <Menu.Item>
@@ -82,36 +106,48 @@ export default function HeaderReportActionsDropDown({
     </Menu>
   );
 
-  return isFeatureEnabled(FeatureFlag.ALERT_REPORTS) ? (
-    <>
-      <NoAnimationDropdown
-        // ref={ref}
-        overlay={menu()}
-        trigger={['click']}
-        getPopupContainer={(triggerNode: any) =>
-          triggerNode.closest('.action-button')
-        }
+  return canAddReports() ? (
+    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={showReportModal}
       >
-        <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?')}
-        />
-      )}
-    </>
+        <Icons.Calendar />
+      </span>
+    )
   ) : null;
 }
diff --git a/superset-frontend/src/components/ReportModal/index.tsx b/superset-frontend/src/components/ReportModal/index.tsx
index 3770aadeda1f4..af6101b28b12f 100644
--- a/superset-frontend/src/components/ReportModal/index.tsx
+++ b/superset-frontend/src/components/ReportModal/index.tsx
@@ -53,7 +53,7 @@ import {
   StyledRadioGroup,
 } from './styles';
 
-interface ReportObject {
+export interface ReportObject {
   id?: number;
   active: boolean;
   crontab: string;
diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx
index 9198601ae685d..d47f6196c9495 100644
--- a/superset-frontend/src/dashboard/components/Header/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/index.jsx
@@ -164,7 +164,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() {
@@ -400,29 +399,6 @@ class Header extends React.PureComponent {
     this.setState({ showingReportModal: 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;
@@ -472,7 +448,6 @@ class Header extends React.PureComponent {
     const userCanEdit = dashboardInfo.dash_edit_perm;
     const userCanShare = dashboardInfo.dash_share_perm;
     const userCanSaveAs = dashboardInfo.dash_save_perm;
-    const shouldShowReport = !editMode && this.canAddReports();
     const refreshLimit =
       dashboardInfo.common.conf.SUPERSET_DASHBOARD_PERIODICAL_REFRESH_LIMIT;
     const refreshWarning =
@@ -568,27 +543,31 @@ class Header extends React.PureComponent {
               )}
             </div>
           )}
-          {editMode && (
+          {editMode ? (
             <UndoRedoKeyListeners
               onUndo={this.handleCtrlZ}
               onRedo={this.handleCtrlY}
             />
-          )}
-
-          {!editMode && userCanEdit && (
+          ) : (
             <>
-              <span
-                role="button"
-                title={t('Edit dashboard')}
-                tabIndex={0}
-                className="action-button"
-                onClick={this.toggleEditMode}
-              >
-                <Icons.EditAlt />
-              </span>
+              {userCanEdit && (
+                <span
+                  role="button"
+                  title={t('Edit dashboard')}
+                  tabIndex={0}
+                  className="action-button"
+                  onClick={this.toggleEditMode}
+                >
+                  <Icons.EditAlt />
+                </span>
+              )}
+              <HeaderReportActionsDropdown
+                showReportModal={this.showReportModal}
+                toggleActive={this.props.toggleActive}
+                deleteActiveReport={this.props.deleteActiveReport}
+              />
             </>
           )}
-          {shouldShowReport && this.renderReportModal()}
 
           {this.state.showingPropertiesModal && (
             <PropertiesModal
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader.jsx b/superset-frontend/src/explore/components/ExploreChartHeader.jsx
index 5d057cabaec76..1f2bb10bcb013 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader.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 { styled, t } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
 import ReportModal from 'src/components/ReportModal';
@@ -113,7 +112,6 @@ export class ExploreChartHeader extends React.PureComponent {
     this.closePropertiesModal = this.closePropertiesModal.bind(this);
     this.showReportModal = this.showReportModal.bind(this);
     this.hideReportModal = this.hideReportModal.bind(this);
-    this.renderReportModal = this.renderReportModal.bind(this);
   }
 
   componentDidMount() {
@@ -163,30 +161,6 @@ export class ExploreChartHeader extends React.PureComponent {
     this.setState({ showingReportModal: false });
   }
 
-  renderReportModal() {
-    const attachedReportExists = !!Object.keys(this.props.reports).length;
-    return attachedReportExists ? (
-      <HeaderReportActionsDropdown
-        showReportModal={this.showReportModal}
-        hideReportModal={this.hideReportModal}
-        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;
@@ -287,7 +261,11 @@ export class ExploreChartHeader extends React.PureComponent {
             isRunning={chartStatus === 'loading'}
             status={CHART_STATUS_MAP[chartStatus]}
           />
-          {this.canAddReports() && this.renderReportModal()}
+          <HeaderReportActionsDropdown
+            showReportModal={this.showReportModal}
+            toggleActive={this.props.toggleActive}
+            deleteActiveReport={this.props.deleteActiveReport}
+          />
           <ReportModal
             show={this.state.showingReportModal}
             onHide={this.hideReportModal}