fix: background image embed (#1832)

* fix: missing app reference

* fix: use hostconfig to retrieve base url for background image

apis/nucleus/src/components/NebulaApp.jsx

@@ -130,7 +130,7 @@ export default function boot({ app, context }) {
       setMuiThemeName(themeName) {
         (async () => {
           await rendered;
-          appRef.current.setMuiThemeName(themeName);
+          appRef?.current?.setMuiThemeName(themeName);
         })();
       },
       context(ctx) {
@@ -140,7 +140,7 @@ export default function boot({ app, context }) {
           if (ctx) {
             unifyContraintsAndInteractions(ctx);
           }
-          appRef.current.setContext(ctx);
+          appRef?.current?.setContext(ctx);
         })();
       },
       destroy() {

apis/nucleus/src/hooks/useStyling.js

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import {
   resolveBgColor,
   resolveBgImage,
@@ -7,6 +7,7 @@ import {
   resolveBorderRadius,
   resolveBoxShadow,
 } from '../utils/style/styling-props';
+import InstanceContext from '../contexts/InstanceContext';
 
 const THEME_OBJECT_TYPE_MAP = {
   linechart: 'lineChart',
@@ -37,6 +38,7 @@ const getThemeObjectType = (visualization) => {
 };
 
 const useStyling = ({ layout, theme, app, themeName, disableThemeBorder, queryParams }) => {
+  const { hostConfig } = useContext(InstanceContext);
   const styling = useMemo(() => {
     if (layout && theme) {
       const generalComp = layout.components ? layout.components.find((comp) => comp.key === 'general') : null;
@@ -47,7 +49,7 @@ const useStyling = ({ layout, theme, app, themeName, disableThemeBorder, queryPa
         subTitle: resolveTextStyle(generalComp, 'subTitle', theme, objectType),
       };
       const bgColor = resolveBgColor(generalComp, theme, objectType);
-      const bgImage = resolveBgImage(generalComp, app, queryParams);
+      const bgImage = resolveBgImage(generalComp, app, queryParams, hostConfig?.host);
       const border = resolveBorder(generalComp, theme, objectType, disableThemeBorder);
       const borderRadius = resolveBorderRadius(generalComp, theme, objectType);
       const boxShadow = resolveBoxShadow(generalComp, theme, objectType);

apis/nucleus/src/utils/style/__tests__/styling-props.test.js

@@ -110,6 +110,14 @@ describe('Styling property resolver', () => {
       expect(size).toBe('contain');
     });
 
+    test('should resolve background image with host', () => {
+      const host = 'https://my-asset-host.com';
+      const { url, pos, size } = resolveBgImage(bgCompLayout, app, null, host);
+      expect(url).toBe('https://my-asset-host.com/media/Tulips.jpg');
+      expect(pos).toBe('top left');
+      expect(size).toBe('contain');
+    });
+
     test('should resolve text style by props', () => {
       const prop = {
         title: {

apis/nucleus/src/utils/style/styling-props.js

@@ -58,11 +58,17 @@ function getBackgroundSize(bgComp) {
   return bkgImageSize;
 }
 
-function resolveImageUrl(app, relativeUrl) {
-  return relativeUrl ? getSenseServerUrl(app) + relativeUrl : undefined;
+function resolveImageUrl(app, relativeUrl, host) {
+  if (!relativeUrl) {
+    return undefined;
+  }
+  if (host) {
+    return host + relativeUrl;
+  }
+  return getSenseServerUrl(app) + relativeUrl;
 }
 
-export function resolveBgImage(bgComp, app, queryParams) {
+export function resolveBgImage(bgComp, app, queryParams, host) {
   const bgImageDef = bgComp?.bgImage;
 
   if (bgImageDef) {
@@ -72,7 +78,7 @@ export function resolveBgImage(bgComp, app, queryParams) {
       const urlObj = bgImageDef?.mediaUrl;
       const { qUrl } = urlObj?.qStaticContentUrl || {};
       url = qUrl ? decodeURIComponent(qUrl) : undefined;
-      url = resolveImageUrl(app, url);
+      url = resolveImageUrl(app, url, host);
 
       if (queryParams) {
         authParamsAsString = Object.entries(queryParams)