refactor: Pexdax/code dry

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

@@ -16,18 +16,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
+import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import { t, SupersetTheme, css, useTheme } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { Switch } from 'src/components/Switch';
 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};
@@ -37,11 +38,14 @@ export default function HeaderReportActionsDropDown({
   toggleActive,
   deleteActiveReport,
   dashboardId,
+  chart,
 }: {
   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,
   );
@@ -86,6 +90,19 @@ 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,
+        }),
+      );
+    }
+  }, []);
+
   const menu = () => (
     <Menu selectable={false} css={{ width: '200px' }}>
       <Menu.Item>
@@ -119,6 +136,7 @@ export default function HeaderReportActionsDropDown({
           userId={user.userId}
           userEmail={user.email}
           dashboardId={dashboardId}
+          chart={chart}
         />
         {report ? (
           <>

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

@@ -36,6 +36,7 @@ import Icons from 'src/components/Icons';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import { CronError } from 'src/components/CronPicker';
 import { RadioChangeEvent } from 'src/common/components';
+import { ChartState } from 'src/explore/types';
 import {
   StyledModal,
   StyledTopSection,
@@ -72,20 +73,6 @@ export interface ReportObject {
   working_timeout: number;
   creation_method: string;
 }
-
-interface ChartObject {
-  id: number;
-  chartAlert: string;
-  chartStatus: string;
-  chartUpdateEndTime: number;
-  chartUpdateStartTime: number;
-  latestQueryFormData: object;
-  queryController: { abort: () => {} };
-  queriesResponse: object;
-  triggerQuery: boolean;
-  lastRendered: number;
-}
-
 interface ReportProps {
   addDangerToast: (msg: string) => void;
   addSuccessToast: (msg: string) => void;
@@ -96,7 +83,7 @@ interface ReportProps {
   userId: number;
   userEmail: string;
   dashboardId?: number;
-  chart?: ChartObject;
+  chart?: ChartState;
   props: any;
 }
 
@@ -171,12 +158,11 @@ const ReportModal: FunctionComponent<ReportProps> = ({
   chart,
   userId,
   userEmail,
-  ...props
 }) => {
   const vizType = chart?.sliceFormData?.viz_type;
   const isChart = !!chart;
   const defaultNotificationFormat =
-    isChart && TEXT_BASED_VISUALIZATION_TYPES.includes(vizType)
+    vizType && TEXT_BASED_VISUALIZATION_TYPES.includes(vizType)
       ? NOTIFICATION_FORMATS.TEXT
       : NOTIFICATION_FORMATS.PNG;
   const [currentReport, setCurrentReport] = useReducer<
@@ -286,7 +272,7 @@ const ReportModal: FunctionComponent<ReportProps> = ({
           }}
           value={currentReport?.report_format || defaultNotificationFormat}
         >
-          {TEXT_BASED_VISUALIZATION_TYPES.includes(vizType) && (
+          {vizType && TEXT_BASED_VISUALIZATION_TYPES.includes(vizType) && (
             <StyledRadio value={NOTIFICATION_FORMATS.TEXT}>
               {t('Text embedded in email')}
             </StyledRadio>

superset-frontend/src/dashboard/components/Header/index.jsx

@@ -28,8 +28,6 @@ import {
   LOG_ACTIONS_FORCE_REFRESH_DASHBOARD,
   LOG_ACTIONS_TOGGLE_EDIT_DASHBOARD,
 } from 'src/logger/LogUtils';
-import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
-
 import Icons from 'src/components/Icons';
 import Button from 'src/components/Button';
 import EditableTitle from 'src/components/EditableTitle';
@@ -165,21 +163,11 @@ class Header extends React.PureComponent {
   }
 
   componentDidMount() {
-    const { refreshFrequency, user, dashboardInfo } = this.props;
+    const { refreshFrequency } = this.props;
     this.startPeriodicRender(refreshFrequency * 1000);
-    if (this.canAddReports()) {
-      // this is in case there is an anonymous user.
-      this.props.fetchUISpecificReport(
-        user.userId,
-        'dashboard_id',
-        'dashboards',
-        dashboardInfo.id,
-      );
-    }
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    const { user } = this.props;
     if (
       UNDO_LIMIT - nextProps.undoLength <= 0 &&
       !this.state.didNotifyMaxUndoHistoryToast
@@ -193,18 +181,6 @@ class Header extends React.PureComponent {
     ) {
       this.props.setMaxUndoHistoryExceeded();
     }
-    if (
-      this.canAddReports() &&
-      nextProps.dashboardInfo.id !== this.props.dashboardInfo.id
-    ) {
-      // this is in case there is an anonymous user.
-      this.props.fetchUISpecificReport(
-        user.userId,
-        'dashboard_id',
-        'dashboards',
-        nextProps.dashboardInfo.id,
-      );
-    }
   }
 
   componentWillUnmount() {
@@ -387,24 +363,6 @@ class Header extends React.PureComponent {
     this.setState({ showingPropertiesModal: false });
   }
 
-  canAddReports() {
-    if (!isFeatureEnabled(FeatureFlag.ALERT_REPORTS)) {
-      return false;
-    }
-    const { user } = this.props;
-    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;
-  }
-
   render() {
     const {
       dashboardTitle,

superset-frontend/src/explore/components/DataTableControl/index.tsx

@@ -125,6 +125,7 @@ export const useTableColumns = (
                 accessor: row => row[key],
                 Header: key,
                 Cell: ({ value }) => {
+                  console.log(data);
                   if (value === true) {
                     return BOOL_TRUE_DISPLAY;
                   }

superset-frontend/src/explore/components/DataTablesPane/index.tsx

@@ -201,7 +201,7 @@ export const DataTablesPane = ({
     },
     [queryFormData],
   );
-
+  console.log(queryFormData);
   useEffect(() => {
     setInLocalStorage(STORAGE_KEYS.isOpen, panelOpen);
   }, [panelOpen]);

superset-frontend/src/explore/components/ExploreChartHeader.jsx

@@ -22,13 +22,11 @@ import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
 import { styled, t } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
-import ReportModal from 'src/components/ReportModal';
 import {
   fetchUISpecificReport,
   toggleActive,
   deleteActiveReport,
 } from 'src/reports/actions/reports';
-import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 import HeaderReportActionsDropdown from 'src/components/ReportModal/HeaderReportActionsDropdown';
 import { chartPropShape } from '../../dashboard/util/propShapes';
 import ExploreActionButtons from './ExploreActionButtons';
@@ -106,25 +104,9 @@ export class ExploreChartHeader extends React.PureComponent {
     super(props);
     this.state = {
       isPropertiesModalOpen: false,
-      showingReportModal: false,
     };
     this.openPropertiesModal = this.openPropertiesModal.bind(this);
     this.closePropertiesModal = this.closePropertiesModal.bind(this);
-    this.showReportModal = this.showReportModal.bind(this);
-    this.hideReportModal = this.hideReportModal.bind(this);
-  }
-
-  componentDidMount() {
-    if (this.canAddReports()) {
-      const { user, chart } = this.props;
-      // this is in the case that there is an anonymous user.
-      this.props.fetchUISpecificReport(
-        user.userId,
-        'chart_id',
-        'charts',
-        chart.id,
-      );
-    }
   }
 
   getSliceName() {
@@ -153,32 +135,6 @@ export class ExploreChartHeader extends React.PureComponent {
     });
   }
 
-  showReportModal() {
-    this.setState({ showingReportModal: true });
-  }
-
-  hideReportModal() {
-    this.setState({ showingReportModal: false });
-  }
-
-  canAddReports() {
-    if (!isFeatureEnabled(FeatureFlag.ALERT_REPORTS)) {
-      return false;
-    }
-    const { user } = this.props;
-    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;
-  }
-
   render() {
     const { user, form_data: formData } = this.props;
     const {
@@ -262,20 +218,10 @@ export class ExploreChartHeader extends React.PureComponent {
             status={CHART_STATUS_MAP[chartStatus]}
           />
           <HeaderReportActionsDropdown
-            showReportModal={this.showReportModal}
+            chart={this.props.chart}
             toggleActive={this.props.toggleActive}
             deleteActiveReport={this.props.deleteActiveReport}
           />
-          <ReportModal
-            show={this.state.showingReportModal}
-            onHide={this.hideReportModal}
-            props={{
-              userId: this.props.user.userId,
-              userEmail: this.props.user.email,
-              chart: this.props.chart,
-              creationMethod: 'charts',
-            }}
-          />
           <ExploreActionButtons
             actions={{
               ...this.props.actions,

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

@@ -27,23 +27,23 @@ export function setReport(report) {
   return { type: SET_REPORT, report };
 }
 
-export function fetchUISpecificReport(
+export function fetchUISpecificReport({
   userId,
-  filter_field,
-  creation_method,
+  filterField,
+  creationMethod,
   resourceId,
-) {
+}) {
   const queryParams = rison.encode({
     filters: [
       {
-        col: filter_field,
+        col: filterField,
         opr: 'eq',
         value: resourceId,
       },
       {
         col: 'creation_method',
         opr: 'eq',
-        value: creation_method,
+        value: creationMethod,
       },
       {
         col: 'created_by',