code dry (#16358)

apache · Feb 9, 2022 · 5a35f4c · 5a35f4c
1 parent 6d89d8c
commit 5a35f4c
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 101 deletions.
diff --git a/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx b/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 ? (
           <>

diff --git a/superset-frontend/src/components/ReportModal/index.tsx b/superset-frontend/src/components/ReportModal/index.tsx
@@ -37,6 +37,7 @@ import Icons from 'src/components/Icons';
 import withToasts from 'src/components/MessageToasts/withToasts';
 import { CronError } from 'src/components/CronPicker';
 import { RadioChangeEvent } from 'src/common/components';
+import { ChartState } from 'src/explore/types';
 import {
   StyledModal,
   StyledTopSection,
@@ -75,20 +76,6 @@ export interface ReportObject {
   force_screenshot: boolean;
   error?: 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 {
   addReport: (report?: ReportObject) => {};
   onHide: () => {};
@@ -97,7 +84,7 @@ interface ReportProps {
   userId: number;
   userEmail: string;
   dashboardId?: number;
-  chart?: ChartObject;
+  chart?: ChartState;
   props: any;
 }
 
@@ -185,12 +172,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<
@@ -302,7 +288,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>

diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/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';
@@ -166,7 +164,7 @@ 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.
@@ -189,7 +187,6 @@ class Header extends React.PureComponent {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    const { user } = this.props;
     if (
       UNDO_LIMIT - nextProps.undoLength <= 0 &&
       !this.state.didNotifyMaxUndoHistoryToast
@@ -203,23 +200,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',
-<<<<<<< HEAD
-        nextProps?.dashboardInfo?.id,
-        user?.email,
-=======
-        nextProps.dashboardInfo.id,
->>>>>>> refactor progress (#16339)
-      );
-    }
   }
 
   componentWillUnmount() {
@@ -403,6 +383,7 @@ class Header extends React.PureComponent {
     this.setState({ showingPropertiesModal: false });
   }
 
+<<<<<<< HEAD
   canAddReports() {
     if (!isFeatureEnabled(FeatureFlag.ALERT_REPORTS)) {
       return false;
@@ -421,6 +402,8 @@ class Header extends React.PureComponent {
     return permissions[0].length > 0;
   }
 
+=======
+>>>>>>> code dry (#16358)
   render() {
     const {
       dashboardTitle,

diff --git a/superset-frontend/src/explore/components/DataTablesPane/index.tsx b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
@@ -295,7 +295,7 @@ export const DataTablesPane = ({
     },
     [queryFormData, columnNames],
   );
-
+  console.log(queryFormData);
   useEffect(() => {
     setItem(LocalStorageKeys.is_datapanel_open, panelOpen);
   }, [panelOpen]);

diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
@@ -28,13 +28,11 @@ import {
   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 'src/dashboard/util/propShapes';
 import EditableTitle from 'src/components/EditableTitle';
@@ -113,27 +111,14 @@ 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);
     this.fetchChartDashboardData = this.fetchChartDashboardData.bind(this);
   }
 
   componentDidMount() {
     const { dashboardId } = this.props;
-    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,
-      );
-    }
     if (dashboardId) {
       this.fetchChartDashboardData();
     }
@@ -197,32 +182,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?.userId) {
-      // 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, slice } = this.props;
     const {
@@ -323,20 +282,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,

diff --git a/superset-frontend/src/reports/actions/reports.js b/superset-frontend/src/reports/actions/reports.js
@@ -29,23 +29,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',