Skip to content

Commit

Permalink
code dry (#16358)
Browse files Browse the repository at this point in the history
  • Loading branch information
AAfghahi authored and eschutho committed Oct 22, 2021
1 parent 59b157c commit 85e14e2
Show file tree
Hide file tree
Showing 6 changed files with 34 additions and 126 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand All @@ -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,
);
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -119,6 +136,7 @@ export default function HeaderReportActionsDropDown({
userId={user.userId}
userEmail={user.email}
dashboardId={dashboardId}
chart={chart}
/>
{report ? (
<>
Expand Down
22 changes: 4 additions & 18 deletions superset-frontend/src/components/ReportModal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand All @@ -96,7 +83,7 @@ interface ReportProps {
userId: number;
userEmail: string;
dashboardId?: number;
chart?: ChartObject;
chart?: ChartState;
props: any;
}

Expand Down Expand Up @@ -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<
Expand Down Expand Up @@ -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>
Expand Down
44 changes: 1 addition & 43 deletions superset-frontend/src/dashboard/components/Header/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -165,17 +163,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) {
Expand All @@ -186,7 +175,6 @@ class Header extends React.PureComponent {
}

UNSAFE_componentWillReceiveProps(nextProps) {
const { user } = this.props;
if (
UNDO_LIMIT - nextProps.undoLength <= 0 &&
!this.state.didNotifyMaxUndoHistoryToast
Expand All @@ -200,18 +188,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() {
Expand Down Expand Up @@ -402,24 +378,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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ export const DataTablesPane = ({
},
[queryFormData],
);

console.log(queryFormData);
useEffect(() => {
setInLocalStorage(STORAGE_KEYS.isOpen, panelOpen);
}, [panelOpen]);
Expand Down
56 changes: 1 addition & 55 deletions superset-frontend/src/explore/components/ExploreChartHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down
12 changes: 6 additions & 6 deletions superset-frontend/src/reports/actions/reports.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down

0 comments on commit 85e14e2

Please sign in to comment.