From f4c2916d5da63b7abc4c12b48a4171ad77d5ff72 Mon Sep 17 00:00:00 2001
From: caele <tsm@qlik.com>
Date: Tue, 21 Mar 2023 14:12:13 +0100
Subject: [PATCH] fix: apply theme bg color to Cell

---
 apis/nucleus/src/components/Cell.jsx          |  8 ++++---
 apis/nucleus/src/components/Sheet.jsx         |  2 +-
 .../utils/__tests__/background-props.test.js  | 24 +++++++++++++++++++
 apis/nucleus/src/utils/background-props.js    |  8 ++++++-
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/apis/nucleus/src/components/Cell.jsx b/apis/nucleus/src/components/Cell.jsx
index 61ae88713..b674d183b 100644
--- a/apis/nucleus/src/components/Cell.jsx
+++ b/apis/nucleus/src/components/Cell.jsx
@@ -307,9 +307,11 @@ const Cell = forwardRef(
     }, []);
 
     useEffect(() => {
-      const bgComp = layout?.components ? layout.components.find((comp) => comp.key === 'general') : null;
-      setBgColor(resolveBgColor(bgComp, halo.public.theme));
-      setBgImage(resolveBgImage(bgComp, halo.app));
+      if (layout) {
+        const bgComp = layout.components ? layout.components.find((comp) => comp.key === 'general') : null;
+        setBgColor(resolveBgColor(bgComp, halo.public.theme, layout.visualization));
+        setBgImage(resolveBgImage(bgComp, halo.app));
+      }
     }, [layout, halo.public.theme, halo.app, themeName]);
 
     focusHandler.current.blurCallback = (resetFocus) => {
diff --git a/apis/nucleus/src/components/Sheet.jsx b/apis/nucleus/src/components/Sheet.jsx
index 673c7ac69..245bfc11a 100644
--- a/apis/nucleus/src/components/Sheet.jsx
+++ b/apis/nucleus/src/components/Sheet.jsx
@@ -108,7 +108,7 @@ function Sheet({ model, halo, initialSnOptions, initialSnPlugins, initialError,
 
   useEffect(() => {
     const bgComp = layout?.components ? layout.components.find((comp) => comp.key === 'general') : null;
-    setBgColor(resolveBgColor(bgComp, halo.public.theme));
+    setBgColor(resolveBgColor(bgComp, halo.public.theme, 'sheet'));
     setBgImage(resolveBgImage(bgComp, halo.app));
   }, [layout, halo.public.theme, halo.app, themeName]);
 
diff --git a/apis/nucleus/src/utils/__tests__/background-props.test.js b/apis/nucleus/src/utils/__tests__/background-props.test.js
index b822ea974..5f37d9eaa 100644
--- a/apis/nucleus/src/utils/__tests__/background-props.test.js
+++ b/apis/nucleus/src/utils/__tests__/background-props.test.js
@@ -35,6 +35,10 @@ describe('Background property resolver', () => {
     };
   });
 
+  test('should resolve background color to empty', () => {
+    const color = resolveBgColor({});
+    expect(color).toBeUndefined();
+  });
   test('should resolve background color by expression', () => {
     const color = resolveBgColor(bgCompLayout, t);
     expect(color).toBe('rgb(255, 0, 0)');
@@ -55,4 +59,24 @@ describe('Background property resolver', () => {
     expect(url).toBe('http://example.com/media/Tulips.jpg');
     expect(size).toBe('contain');
   });
+  test('should resolve background color by theme', () => {
+    const color = resolveBgColor({}, t, 'peoplechart');
+    expect(color).toBe('transparent');
+  });
+
+  test('should resolve background color by custom theme', () => {
+    const color = resolveBgColor(
+      {},
+      {
+        getStyle: (obj, path, attr) => {
+          if (obj === 'object.gantt' && path === '' && attr === 'backgroundColor') {
+            return '#ff00ff';
+          }
+          return undefined;
+        },
+      },
+      'gantt'
+    );
+    expect(color).toBe('#ff00ff');
+  });
 });
diff --git a/apis/nucleus/src/utils/background-props.js b/apis/nucleus/src/utils/background-props.js
index f0b02dd6f..1e8ef9e50 100644
--- a/apis/nucleus/src/utils/background-props.js
+++ b/apis/nucleus/src/utils/background-props.js
@@ -79,7 +79,7 @@ export const resolveBgImage = (bgComp, app) => {
   return undefined;
 };
 
-export const resolveBgColor = (bgComp, theme) => {
+export const resolveBgColor = (bgComp, theme, objectType) => {
   const bgColor = bgComp?.bgColor;
   if (bgColor && theme) {
     if (bgColor.useExpression) {
@@ -87,5 +87,11 @@ export const resolveBgColor = (bgComp, theme) => {
     }
     return bgColor.color && bgColor.color.color !== 'none' ? theme.getColorPickerColor(bgColor.color, true) : undefined;
   }
+  if (theme && objectType) {
+    return theme.getStyle(`object.${objectType}`, '', 'backgroundColor');
+  }
+  if (theme) {
+    return theme.getStyle('', '', 'backgroundColor');
+  }
   return undefined;
 };