fix: [FIXUP] fix placeholder in Superset dashboards

Author: csm-thu

…lderLayout/DashboardPlaceholderLayout.js …laceholder/DashboardPlaceholderLayout.jssrc/charts/DashboardPlaceholderLayout/DashboardPlaceholderLayout.js renamed to src/charts/DashboardPlaceholder/DashboardPlaceholderLayout.js src/charts/DashboardPlaceholderLayout/DashboardPlaceholderLayout.js renamed to src/charts/DashboardPlaceholder/DashboardPlaceholderLayout.js

@@ -1 +1 @@
-export { default } from './DashboardPlaceholder';
+export { default } from './DashboardPlaceholderLayout';

src/charts/DashboardPlaceholder/index.js

@@ -1,9 +1,8 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useCallback } from 'react';
 import { RUNNER_RUN_STATE } from '../../common/apiConstants';
-import DashboardPlaceholderLayout from '../DashboardPlaceholderLayout';
+import DashboardPlaceholderLayout from './DashboardPlaceholderLayout';
 
 const DEFAULT_LABELS = {
   noScenario: {
@@ -25,16 +24,15 @@ const DEFAULT_LABELS = {
   },
 };
 
-const DashboardPlaceholder = (props) => {
-  const {
-    alwaysShowReports,
-    disabled,
-    downloadLogsFile,
-    noDashboardConfigured,
-    labels: tmpLabels,
-    scenario,
-    scenarioDTO,
-  } = props;
+const forgeDashboardPlaceholder = ({
+  alwaysShowReports,
+  disabled,
+  downloadLogsFile,
+  noDashboardConfigured,
+  labels: tmpLabels,
+  scenario,
+  scenarioDTO,
+}) => {
   const labels = { ...DEFAULT_LABELS, ...tmpLabels };
 
   const noScenario = scenario === null;
@@ -64,14 +62,11 @@ const DashboardPlaceholder = (props) => {
   return null;
 };
 
-DashboardPlaceholder.propTypes = {
-  alwaysShowReports: PropTypes.bool,
-  disabled: PropTypes.bool,
-  downloadLogsFile: PropTypes.func,
-  noDashboardConfigured: PropTypes.bool,
-  scenario: PropTypes.object,
-  scenarioDTO: PropTypes.object,
-  labels: PropTypes.object,
-};
+export const useDashboardPlaceholder = () => {
+  const getDashboardPlaceholder = useCallback((params) => {
+    const placeholder = forgeDashboardPlaceholder(params);
+    return { placeholder, showPlaceholder: placeholder != null };
+  }, []);
 
-export default DashboardPlaceholder;
+  return { getDashboardPlaceholder };
+};

…boardPlaceholder/DashboardPlaceholder.js …rdPlaceholder/useDashboardPlaceholder.jssrc/charts/DashboardPlaceholder/DashboardPlaceholder.js renamed to src/charts/DashboardPlaceholder/useDashboardPlaceholder.js src/charts/DashboardPlaceholder/DashboardPlaceholder.js renamed to src/charts/DashboardPlaceholder/useDashboardPlaceholder.js

@@ -9,7 +9,7 @@ import { styled } from '@mui/material/styles';
 import { PowerBIUtils } from '@cosmotech/azure';
 import { RUNNER_RUN_STATE } from '../../common/apiConstants';
 import { FadingTooltip } from '../../misc';
-import DashboardPlaceholder from '../DashboardPlaceholder';
+import { useDashboardPlaceholder } from '../DashboardPlaceholder/useDashboardPlaceholder';
 
 const PREFIX = 'PowerBIReport';
 const classes = { report: `${PREFIX}-report` };
@@ -64,6 +64,7 @@ export const PowerBIReport = ({
 }) => {
   const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...tmpLabels }), [tmpLabels]);
   const { reportId, settings, staticFilters, dynamicFilters, pageName } = reportConfiguration[index] || {};
+  const { getDashboardPlaceholder } = useDashboardPlaceholder();
 
   // 1 Embed or 0 Aad
   const tokenType = useAAD ? 0 : 1;
@@ -90,19 +91,27 @@ export const PowerBIReport = ({
     [dynamicFilters, scenarioDTO]
   );
 
-  const placeholder = useMemo(() => {
-    return (
-      <DashboardPlaceholder
-        alwaysShowReports={alwaysShowReports}
-        disabled={reports?.status === 'DISABLED'}
-        downloadLogsFile={downloadLogsFile}
-        noDashboardConfigured={reportConfiguration[index] == null}
-        scenario={scenario}
-        scenarioDTO={scenarioDTO}
-        labels={labels}
-      />
-    );
-  }, [alwaysShowReports, reports, downloadLogsFile, reportConfiguration, index, scenario, scenarioDTO, labels]);
+  const { placeholder } = useMemo(() => {
+    return getDashboardPlaceholder({
+      alwaysShowReports,
+      disabled: reports?.status === 'DISABLED',
+      downloadLogsFile,
+      noDashboardConfigured: reportConfiguration[index] == null,
+      scenario,
+      scenarioDTO,
+      labels,
+    });
+  }, [
+    getDashboardPlaceholder,
+    alwaysShowReports,
+    reports,
+    downloadLogsFile,
+    reportConfiguration,
+    index,
+    scenario,
+    scenarioDTO,
+    labels,
+  ]);
 
   useEffect(() => {
     const newConfig = {

src/charts/DashboardPlaceholderLayout/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Box, CircularProgress, Backdrop } from '@mui/material';
 import { embedDashboard } from '@superset-ui/embedded-sdk';
 import { PowerBIUtils } from '@cosmotech/azure';
-import DashboardPlaceholder from '../DashboardPlaceholder';
+import { useDashboardPlaceholder } from '../DashboardPlaceholder/useDashboardPlaceholder';
 
 export const SupersetReport = ({
   alwaysShowReports = false,
@@ -26,6 +26,8 @@ export const SupersetReport = ({
   const [isEmbedded, setIsEmbedded] = useState(false);
   const [dashboard, setDashboard] = useState(null);
 
+  const { getDashboardPlaceholder } = useDashboardPlaceholder();
+
   useEffect(() => {
     tokenRef.current = guestToken;
   }, [guestToken]);
@@ -64,24 +66,32 @@ export const SupersetReport = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [report.id, options.supersetUrl, guestToken]);
 
-  const placeholder = useMemo(() => {
+  const { placeholder, showPlaceholder } = useMemo(() => {
     const scenarioDTO = PowerBIUtils.constructScenarioDTO(scenario, visibleScenarios);
-    return (
-      <DashboardPlaceholder
-        alwaysShowReports={alwaysShowReports}
-        disabled={disabled}
-        downloadLogsFile={downloadLogsFile}
-        noDashboardConfigured={report == null}
-        scenario={scenario}
-        scenarioDTO={scenarioDTO}
-        labels={labels}
-      />
-    );
-  }, [alwaysShowReports, disabled, downloadLogsFile, report, scenario, visibleScenarios, labels]);
+    return getDashboardPlaceholder({
+      alwaysShowReports,
+      disabled,
+      downloadLogsFile,
+      noDashboardConfigured: report == null,
+      scenario,
+      scenarioDTO,
+      labels,
+    });
+  }, [
+    getDashboardPlaceholder,
+    alwaysShowReports,
+    disabled,
+    downloadLogsFile,
+    report,
+    scenario,
+    visibleScenarios,
+    labels,
+  ]);
 
-  const isReportVisible = isEmbedded && placeholder == null;
+  const isReportVisible = isEmbedded && !showPlaceholder;
   const reportContainerDisplay = isReportVisible ? undefined : 'none';
-  const showLoadingSpinner = placeholder == null && (isLoading || !isEmbedded)
+  const showLoadingSpinner = placeholder == null && (isLoading || !isEmbedded);
+
   return (
     <Box
       sx={{

src/charts/PowerBIReport/PowerBIReport.js

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 import React from 'react';
 import PropTypes from 'prop-types';
-import DashboardPlaceholderLayout from '../../charts/DashboardPlaceholderLayout';
+import DashboardPlaceholderLayout from '../../charts/DashboardPlaceholder';
 
 // As of React 17.0, error boundaries can only be implemented with class components
 class ErrorBoundary extends React.Component {