From 87f52b484b39adbf86b50ed235f60de67def5bb7 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com>
Date: Tue, 10 Oct 2023 11:39:31 +0530
Subject: [PATCH] Fixes canvas background and go to app crashing (#7725)

* Fix UI issues

* Fix Scrollbar is not available after we pin the inspector.

* Fix button  jumping places if switched from extended monitor to laptop.

* fix enable pagination not getting toggled in listview

* Fix form children not being displayed

* Fix Go to app is crashing the application.

* Fix fx for canvas background color is not working.
---
 frontend/src/Editor/Header/GlobalSettings.jsx       |  2 --
 .../Inspector/ActionConfigurationPanels/GotoApp.jsx |  4 ++--
 frontend/src/Editor/LeftSidebar/index.jsx           | 13 +++++++++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Editor/Header/GlobalSettings.jsx b/frontend/src/Editor/Header/GlobalSettings.jsx
index a659f30b04..c238faf29a 100644
--- a/frontend/src/Editor/Header/GlobalSettings.jsx
+++ b/frontend/src/Editor/Header/GlobalSettings.jsx
@@ -20,7 +20,6 @@ export const GlobalSettings = ({
   darkMode,
   toggleAppMaintenance,
   isMaintenanceOn,
-  // app,
   backgroundFxQuery,
   realState,
 }) => {
@@ -233,7 +232,6 @@ export const GlobalSettings = ({
                             canvasBackgroundColor: resolveReferences(color, realState),
                             backgroundFxQuery: color,
                           };
-
                           globalSettingsChanged(options);
                         }}
                       />
diff --git a/frontend/src/Editor/Inspector/ActionConfigurationPanels/GotoApp.jsx b/frontend/src/Editor/Inspector/ActionConfigurationPanels/GotoApp.jsx
index 618a074e94..d42ebee133 100644
--- a/frontend/src/Editor/Inspector/ActionConfigurationPanels/GotoApp.jsx
+++ b/frontend/src/Editor/Inspector/ActionConfigurationPanels/GotoApp.jsx
@@ -69,7 +69,7 @@ export function GotoApp({ getAllApps, event, handlerChanged, eventIndex, darkMod
           <div key={index} className="row input-group mt-1">
             <div className="col">
               <CodeHinter
-                initialValue={event.queryParams[index][0]}
+                initialValue={event?.queryParams?.[index]?.[0]}
                 onChange={(value) => queryParamChangeHandler(index, 0, value)}
                 mode="javascript"
                 height={30}
@@ -77,7 +77,7 @@ export function GotoApp({ getAllApps, event, handlerChanged, eventIndex, darkMod
             </div>
             <div className="col">
               <CodeHinter
-                initialValue={event.queryParams[index][1]}
+                initialValue={event?.queryParams?.[index]?.[1]}
                 onChange={(value) => queryParamChangeHandler(index, 1, value)}
                 mode="javascript"
                 height={30}
diff --git a/frontend/src/Editor/LeftSidebar/index.jsx b/frontend/src/Editor/LeftSidebar/index.jsx
index 993c8c37ec..3d317978cd 100644
--- a/frontend/src/Editor/LeftSidebar/index.jsx
+++ b/frontend/src/Editor/LeftSidebar/index.jsx
@@ -19,6 +19,8 @@ import { useDataSources } from '@/_stores/dataSourcesStore';
 import { shallow } from 'zustand/shallow';
 import useDebugger from './SidebarDebugger/useDebugger';
 import { GlobalSettings } from '../Header/GlobalSettings';
+import { resolveReferences } from '@/_helpers/utils';
+import { useCurrentState } from '@/_stores/currentStateStore';
 
 export const LeftSidebar = forwardRef((props, ref) => {
   const router = useRouter();
@@ -75,6 +77,7 @@ export const LeftSidebar = forwardRef((props, ref) => {
     }),
     shallow
   );
+  const currentState = useCurrentState();
   const [pinned, setPinned] = useState(!!localStorage.getItem('selectedSidebarItem'));
 
   const { errorLogs, clearErrorLogs, unReadErrorCount, allLog } = useDebugger({
@@ -135,6 +138,8 @@ export const LeftSidebar = forwardRef((props, ref) => {
     sideBarBtnRefs.current[page] = ref;
   };
 
+  const backgroundFxQuery = appDefinition?.globalSettings?.backgroundFxQuery;
+
   const SELECTED_ITEMS = {
     page: (
       <LeftSidebarPageSelector
@@ -214,10 +219,18 @@ export const LeftSidebar = forwardRef((props, ref) => {
         toggleAppMaintenance={toggleAppMaintenance}
         isMaintenanceOn={isMaintenanceOn}
         app={app}
+        realState={currentState}
+        backgroundFxQuery={backgroundFxQuery}
       />
     ),
   };
 
+  useEffect(() => {
+    backgroundFxQuery &&
+      globalSettingsChanged({ canvasBackgroundColor: resolveReferences(backgroundFxQuery, currentState) });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(resolveReferences(backgroundFxQuery, currentState))]);
+
   return (
     <div className="left-sidebar" data-cy="left-sidebar-inspector">
       <LeftSidebarItem