From da3b8892133173b871412c4ee73961e31f5d18e7 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     | 106 ++++++++++++------
 .../src/dashboard/components/Header/index.jsx |  57 +++-------
 .../components/ExploreChartHeader/index.jsx   |  34 +-----
 3 files changed, 96 insertions(+), 101 deletions(-)

diff --git a/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx b/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx
index 6fc39283600b..4d9ceb86fc5d 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,11 +41,19 @@ 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 [currentReportDeleting, setCurrentReportDeleting] =
-    useState<AlertObject | null>(null);
+  const report: AlertObject = reports[reportsIds[0]];
+  const [
+    currentReportDeleting,
+    setCurrentReportDeleting,
+  ] = useState<AlertObject | null>(null);
   const theme = useTheme();
 
   const toggleActiveKey = async (data: AlertObject, checked: boolean) => {
@@ -58,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>
@@ -80,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/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx
index a67061832dda..516359a9c42f 100644
--- a/superset-frontend/src/dashboard/components/Header/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/index.jsx
@@ -165,7 +165,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() {
@@ -411,29 +410,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;
@@ -488,7 +464,6 @@ class Header extends React.PureComponent {
     const userCanSaveAs =
       dashboardInfo.dash_save_perm &&
       filterboxMigrationState !== FILTER_BOX_MIGRATION_STATES.REVIEWING;
-    const shouldShowReport = !editMode && this.canAddReports();
     const refreshLimit =
       dashboardInfo.common?.conf?.SUPERSET_DASHBOARD_PERIODICAL_REFRESH_LIMIT;
     const refreshWarning =
@@ -602,27 +577,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()}
 
           <PropertiesModal
             dashboardId={dashboardInfo.id}
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
index 6f73361deadf..a9b536e11591 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
@@ -120,7 +120,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);
     this.fetchChartDashboardData = this.fetchChartDashboardData.bind(this);
   }
 
@@ -159,8 +158,7 @@ export class ExploreChartHeader extends React.PureComponent {
             // setting the chart to use the dashboard custom label colors if any
             const labelColors =
               JSON.parse(dashboard.json_metadata).label_colors || {};
-            const categoricalNamespace =
-              CategoricalColorNamespace.getNamespace();
+            const categoricalNamespace = CategoricalColorNamespace.getNamespace();
 
             Object.keys(labelColors).forEach(label => {
               categoricalNamespace.setColor(label, labelColors[label]);
@@ -208,30 +206,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;
@@ -349,7 +323,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}