You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by el...@apache.org on 2021/11/24 18:46:38 UTC
[superset] 04/14: code dry (#16358)
This is an automated email from the ASF dual-hosted git repository.
elizabeth pushed a commit to branch refactorReports
in repository https://gitbox.apache.org/repos/asf/superset.git
commit be2e1ecf6795b3275472b857bc3a5be6ad3e06e0
Author: AAfghahi <48...@users.noreply.github.com>
AuthorDate: Fri Aug 20 13:09:40 2021 -0400
code dry (#16358)
---
.../HeaderReportActionsDropdown/index.tsx | 26 +++++++++--
.../src/components/ReportModal/index.tsx | 22 ++-------
.../src/dashboard/components/Header/index.jsx | 44 +-----------------
.../explore/components/DataTablesPane/index.tsx | 2 +-
.../components/ExploreChartHeader/index.jsx | 54 +---------------------
superset-frontend/src/reports/actions/reports.js | 12 ++---
6 files changed, 36 insertions(+), 124 deletions(-)
diff --git a/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx b/superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx
index 026a262..58ba650 100644
--- 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,
);
@@ -73,7 +77,7 @@ export default function HeaderReportActionsDropDown({
if (!isFeatureEnabled(FeatureFlag.ALERT_REPORTS)) {
return false;
}
- if (!user) {
+ if (!user?.userId) {
// this is in the case that there is an anonymous user.
return false;
}
@@ -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
index 6042367..20fecdc 100644
--- a/superset-frontend/src/components/ReportModal/index.tsx
+++ b/superset-frontend/src/components/ReportModal/index.tsx
@@ -36,6 +36,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,
@@ -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;
}
@@ -172,12 +159,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<
@@ -287,7 +273,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
index 504b461..67be4fd 100644
--- a/superset-frontend/src/dashboard/components/Header/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/index.jsx
@@ -29,8 +29,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';
@@ -167,17 +165,8 @@ 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,
- );
- }
}
componentDidUpdate(prevProps) {
@@ -188,7 +177,6 @@ class Header extends React.PureComponent {
}
UNSAFE_componentWillReceiveProps(nextProps) {
- const { user } = this.props;
if (
UNDO_LIMIT - nextProps.undoLength <= 0 &&
!this.state.didNotifyMaxUndoHistoryToast
@@ -202,18 +190,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() {
@@ -395,24 +371,6 @@ class Header extends React.PureComponent {
this.setState({ showingPropertiesModal: 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 {
dashboardTitle,
diff --git a/superset-frontend/src/explore/components/DataTablesPane/index.tsx b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
index 67a07f9..dc41e9c 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/index.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
@@ -281,7 +281,7 @@ export const DataTablesPane = ({
},
[queryFormData, columnNames],
);
-
+ console.log(queryFormData);
useEffect(() => {
setInLocalStorage(STORAGE_KEYS.isOpen, panelOpen);
}, [panelOpen]);
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
index 8cd138f..85f1654 100644
--- 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';
@@ -114,26 +112,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();
}
@@ -192,32 +178,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 {
@@ -318,20 +278,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
index 3c01da7..a46849e 100644
--- a/superset-frontend/src/reports/actions/reports.js
+++ b/superset-frontend/src/reports/actions/reports.js
@@ -30,23 +30,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',