fix: fix placeholder and refresh button visibility in BI reports

Author: csm-thu

src/charts/DashboardPlaceholder/useDashboardPlaceholder.js

@@ -42,7 +42,7 @@ const forgeDashboardPlaceholder = ({
   const hasError = scenarioLastRunStatus === RUNNER_RUN_STATE.FAILED;
   const hasUnknownStatus = scenarioLastRunStatus === RUNNER_RUN_STATE.UNKNOWN;
 
-  if (alwaysShowReports) return null;
+  if (alwaysShowReports && !disabled) return null;
   if (noScenario) return <DashboardPlaceholderLayout label={labels.noScenario.label} title={labels.noScenario.title} />;
   if (noRun) return <DashboardPlaceholderLayout label={labels.noRun.label} title={labels.noRun.title} />;
   if (runInProgress)

src/charts/PowerBIReport/PowerBIReport.js

@@ -70,7 +70,7 @@ export const PowerBIReport = ({
   const tokenType = useAAD ? 0 : 1;
   // PowerBI Report object (received via callback)
   const [report, setReport] = useState();
-  const [disabled, setDisabled] = useState(false);
+  const [canTriggerRefresh, setCanTriggerRefresh] = useState(true);
   const [embedConfig, setEmbedConfig] = useState({
     type: 'report',
     id: reportId,
@@ -91,10 +91,11 @@ export const PowerBIReport = ({
     [dynamicFilters, scenarioDTO]
   );
 
+  const disabled = useMemo(() => reports?.status === 'DISABLED', [reports]);
   const { placeholder } = useMemo(() => {
     return getDashboardPlaceholder({
       alwaysShowReports,
-      disabled: reports?.status === 'DISABLED',
+      disabled,
       downloadLogsFile,
       noDashboardConfigured: reportConfiguration[index] == null,
       scenario,
@@ -140,10 +141,8 @@ export const PowerBIReport = ({
       report.refresh();
 
       if (triggerTimeout) {
-        setDisabled(true);
-        setTimeout(() => {
-          setDisabled(false);
-        }, refreshTimeout);
+        setCanTriggerRefresh(false);
+        setTimeout(() => setCanTriggerRefresh(true), refreshTimeout);
       }
     },
     [refreshTimeout, report]
@@ -164,7 +163,7 @@ export const PowerBIReport = ({
         <PowerBIEmbed cssClassName={classes.report} embedConfig={embedConfig} getEmbeddedComponent={setReport} />
       );
     } catch (error) {
-      console.log('Error when intializing the PowerBIEmbed component.');
+      console.log('Error when initializing the PowerBIEmbed component.');
       console.error(error);
       return null;
     }
@@ -176,7 +175,7 @@ export const PowerBIReport = ({
     (scenarioLastRunStatus === undefined || scenarioLastRunStatus === RUNNER_RUN_STATE.SUCCESSFUL) && !noScenario;
 
   const divContainerStyle = {};
-  if (!isReady && !alwaysShowReports) {
+  if (disabled || (!isReady && !alwaysShowReports)) {
     divContainerStyle.display = 'none';
   }
 
@@ -195,7 +194,7 @@ export const PowerBIReport = ({
             <FadingTooltip title={labels.refreshTooltip}>
               <IconButton
                 aria-label="refresh"
-                disabled={!report || disabled}
+                disabled={!report || !canTriggerRefresh}
                 color="primary"
                 onClick={refreshReport}
                 size="large"