feature: [PROD-14860] add StyledErrorContainer component

Author: Edon Zeqiraj

src/charts/SimplePowerBIReportEmbed/SimplePowerBIReportEmbed.js

@@ -10,17 +10,6 @@ import { PowerBIUtils } from '@cosmotech/azure';
 import { FadingTooltip } from '../../misc';
 import DashboardPlaceholder from '../Dashboard/components';
 
-const StyledErrorContainerDiv = styled('div')(({ theme }) => ({
-  'z-index': '1', // Need z-index > 0, otherwise the error banner is hidden behind the powerbi loading screen
-  height: '50px',
-  width: '100%',
-  position: 'absolute',
-  textAlign: 'center',
-  padding: '5px 0',
-  backgroundColor: theme.palette.error.main,
-  color: theme.palette.error.contrastText,
-}));
-
 const PREFIX = 'SimplePowerBIReportEmbed';
 const classes = { report: `${PREFIX}-report` };
 
@@ -31,15 +20,6 @@ const Root = styled('div')(({ theme }) => ({
   },
 }));
 
-function getErrorCode(labels, reports) {
-  if (!reports?.error?.status && !reports?.error?.statusText) return labels.errors.unknown;
-  return `${reports?.error?.status ?? ''} ${reports?.error?.statusText ?? ''}`;
-}
-
-function getErrorDescription(labels, reports) {
-  return reports?.error?.powerBIErrorInfo ?? labels.errors.details;
-}
-
 function addDynamicParameters(pageName, lang, newConfig, settings, staticFilters, additionalFilters) {
   if (pageName !== undefined && pageName[lang] !== undefined) {
     newConfig.pageName = pageName[lang];
@@ -189,9 +169,6 @@ export const SimplePowerBIReportEmbed = ({
     }
   }, [theme, report]);
 
-  const errorCode = getErrorCode(labels, reports);
-  const errorDescription = getErrorDescription(labels, reports);
-
   const refreshReport = useCallback(
     (triggerTimeout = true) => {
       if (!report) return;
@@ -246,10 +223,6 @@ export const SimplePowerBIReportEmbed = ({
 
   return (
     <Root style={{ height: '100%', width: '100%', position: 'relative' }}>
-      <StyledErrorContainerDiv hidden={reports.status !== 'ERROR'}>
-        <div style={{ fontWeight: 'bold', fontSize: 'large' }}>{errorCode}</div>
-        <div style={{ fontWeight: 'bold', fontSize: 'small' }}>{errorDescription}</div>
-      </StyledErrorContainerDiv>
       {placeholder}
       <div style={{ width: '100%', display: 'flex', flexDirection: 'row', ...divContainerStyle }}>
         {refreshable && (

src/index.js

@@ -3,7 +3,14 @@
 
 export { CreateScenarioButton, SelfDestructLinkButton, SignInButton, RolesEditionButton } from './buttons';
 export { ScenarioNode, ResourceCard } from './cards';
-export { CytoViz, Dashboard, ScenarioManagerTreeList, SimplePowerBIReportEmbed, SupersetEmbed } from './charts';
+export {
+  CytoViz,
+  Dashboard,
+  ScenarioManagerTreeList,
+  SimplePowerBIReportEmbed,
+  SupersetEmbed,
+  DashboardPlaceholder,
+} from './charts';
 export { SimpleTwoActionsDialog, DontAskAgainDialog } from './dialogs';
 export {
   HierarchicalComboBox,
@@ -30,6 +37,7 @@ export {
 export { UserInfo, HelpMenu } from './menus';
 export {
   ErrorBanner,
+  StyledErrorContainer,
   ErrorBoundary,
   ErrorsPanel,
   FadingTooltip,

src/misc/StyledErrorContainer/StyledErrorContainer.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+const Container = styled('div')(({ theme }) => ({
+  zIndex: 1,
+  height: '50px',
+  width: '100%',
+  position: 'absolute',
+  textAlign: 'center',
+  padding: '5px 0',
+  backgroundColor: theme.palette.error.main,
+  color: theme.palette.error.contrastText,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+const StyledErrorContainer = ({ errorCode, errorDescription, ...rest }) => (
+  <Container {...rest}>
+    {errorCode && <div style={{ fontWeight: 'bold', fontSize: 'large' }}>{errorCode}</div>}
+    {errorDescription && <div style={{ fontWeight: 'bold', fontSize: 'small' }}>{errorDescription}</div>}
+  </Container>
+);
+
+StyledErrorContainer.propTypes = {
+  errorCode: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  errorDescription: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  children: PropTypes.node,
+};
+
+export default StyledErrorContainer;

src/misc/StyledErrorContainer/index.js

@@ -0,0 +1 @@
+export { default as StyledErrorContainer } from './StyledErrorContainer';

src/misc/index.js

@@ -6,6 +6,7 @@ export { ErrorsPanel } from './ErrorsPanel';
 export { ScenarioValidationStatusChip } from './ScenarioValidationStatusChip';
 export { LoadingLine } from './LoadingLine';
 export { ErrorBanner } from './ErrorBanner';
+export { StyledErrorContainer } from './StyledErrorContainer';
 export { DefaultAvatar } from './DefaultAvatar';
 export { FadingTooltip } from './FadingTooltip';
 export { TooltipInfo } from './TooltipInfo';