diff --git a/superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.tsx b/superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.tsx
index e8426641d68c9..f5e6dc8eac183 100644
--- a/superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.tsx
+++ b/superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.tsx
@@ -18,6 +18,7 @@
*/
import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
+import { isEmpty } from 'lodash';
import {
t,
SupersetTheme,
@@ -103,6 +104,9 @@ export interface HeaderReportProps {
showReportSubMenu?: boolean;
}
+// Same instance to be used in useEffects
+const EMPTY_OBJECT = {};
+
export default function HeaderReportDropDown({
dashboardId,
chart,
@@ -116,7 +120,10 @@ export default function HeaderReportDropDown({
const resourceType = dashboardId
? CreationMethod.DASHBOARDS
: CreationMethod.CHARTS;
- return reportSelector(state, resourceType, dashboardId || chart?.id);
+ return (
+ reportSelector(state, resourceType, dashboardId || chart?.id) ||
+ EMPTY_OBJECT
+ );
});
const isReportActive: boolean = report?.active || false;
@@ -133,6 +140,12 @@ export default function HeaderReportDropDown({
// this is in the case that there is an anonymous user.
return false;
}
+
+ // Cannot add reports if the resource is not saved
+ if (!(dashboardId || chart?.id)) {
+ return false;
+ }
+
const roles = Object.keys(user.roles || []);
const permissions = roles.map(key =>
user.roles[key].filter(
@@ -200,7 +213,21 @@ export default function HeaderReportDropDown({
};
const textMenu = () =>
- report ? (
+ isEmpty(report) ? (
+
+ ) : (
isDropdownVisible && (
)
- ) : (
-
);
const menu = () => (