From 9f3750eb2e298cbe1eb4418e126ddfc50949d15a Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Mon, 17 Mar 2025 12:12:05 +0530
Subject: [PATCH] Fix visibility off using CSA, widget height not updating

---
 .../AppCanvas/ConfigHandle/ConfigHandle.jsx      |  3 +--
 frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx  |  3 ++-
 .../src/AppBuilder/AppCanvas/WidgetWrapper.jsx   |  8 +++++---
 frontend/src/AppBuilder/AppCanvas/selecto.scss   |  2 +-
 .../src/AppBuilder/_stores/slices/gridSlice.js   | 16 ++++++++++++++++
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
index 4c558f3cc2..d877a3233f 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
@@ -45,7 +45,6 @@ export const ConfigHandle = ({
     );
   }, shallow);
   let height = visibility === false ? 10 : widgetHeight;
-
   return (
     <div
       className={`config-handle ${customClassName}`}
@@ -57,7 +56,7 @@ export const ConfigHandle = ({
             : position === 'top'
             ? '-20px'
             : `${height - (CONFIG_HANDLE_HEIGHT + BUFFER_HEIGHT)}px`,
-        visibility: _showHandle ? 'visible' : 'hidden',
+        visibility: _showHandle || visibility === false ? 'visible' : 'hidden',
         left: '-1px',
       }}
       onClick={(e) => {
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index 1b4d1265dc..bbc10562a7 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -65,6 +65,7 @@ export default function Grid({ gridWidth, currentLayout }) {
   const prevDragParentId = useRef(null);
   const newDragParentId = useRef(null);
   const [isGroupDragging, setIsGroupDragging] = useState(false);
+  const checkIfAnyWidgetVisibilityChanged = useStore((state) => state.checkIfAnyWidgetVisibilityChanged(), shallow);
 
   useEffect(() => {
     const selectedSet = new Set(selectedComponents);
@@ -316,7 +317,7 @@ export default function Grid({ gridWidth, currentLayout }) {
   useEffect(() => {
     reloadGrid();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedComponents, openModalWidgetId, boxList, currentLayout]);
+  }, [selectedComponents, openModalWidgetId, boxList, currentLayout, checkIfAnyWidgetVisibilityChanged]);
 
   const updateNewPosition = (events, parent = null) => {
     const posWithParent = {
diff --git a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
index 0f1cb3359f..17add18947 100644
--- a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx
@@ -37,6 +37,8 @@ const WidgetWrapper = memo(
     });
     const visibility = useStore((state) => {
       const component = state.getResolvedComponent(id, subContainerIndex);
+      const componentExposedVisibility = state.getExposedValueOfComponent(id)?.isVisible;
+      if (componentExposedVisibility === false) return false;
       if (component?.properties?.visibility === false || component?.styles?.visibility === false) return false;
       return true;
     });
@@ -60,9 +62,9 @@ const WidgetWrapper = memo(
       <>
         <div
           className={cx(`moveable-box ele-${id}`, {
-            [`target widget-target target1  moveable-box widget-${id}`]: !readOnly,
-            [`widget-${id} nested-target`]: id !== 'canvas' && !readOnly,
-            'position-absolute': readOnly,
+            [`target widget-target target1  moveable-box widget-${id}`]: !readOnly && visibility !== false,
+            [`widget-${id} nested-target`]: id !== 'canvas' && !readOnly && visibility !== false,
+            'position-absolute': readOnly || visibility === false,
             'active-target': isWidgetActive,
             'opacity-0': isDragging || isResizing,
           })}
diff --git a/frontend/src/AppBuilder/AppCanvas/selecto.scss b/frontend/src/AppBuilder/AppCanvas/selecto.scss
index 5602b35d5a..7366e2fd06 100644
--- a/frontend/src/AppBuilder/AppCanvas/selecto.scss
+++ b/frontend/src/AppBuilder/AppCanvas/selecto.scss
@@ -1,5 +1,5 @@
 .active-target {
-    outline: 1px solid #4af;
+    outline: 1px solid #4af !important;
 } 
 
 .main-editor-canvas .widget-target:not(:has(.widget-target:hover)):hover {  
diff --git a/frontend/src/AppBuilder/_stores/slices/gridSlice.js b/frontend/src/AppBuilder/_stores/slices/gridSlice.js
index 642266a32b..0f5984170a 100644
--- a/frontend/src/AppBuilder/_stores/slices/gridSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/gridSlice.js
@@ -73,4 +73,20 @@ export const createGridSlice = (set, get) => ({
   setLastCanvasClickPosition: (position) => {
     set({ lastCanvasClickPosition: position });
   },
+  checkIfAnyWidgetVisibilityChanged: () => {
+    // This is required to reload the grid if visibility is turned off using CSA
+    const { getExposedValueOfComponent, getCurrentPageComponents } = get();
+    const currentPageComponents = getCurrentPageComponents();
+
+    const visibilityState = {};
+
+    Object.keys(currentPageComponents).forEach((componentId) => {
+      const componentExposedVisibility = getExposedValueOfComponent(componentId)?.isVisible;
+
+      // Determine if component is visible
+      visibilityState[componentId] = !(componentExposedVisibility === false);
+    });
+
+    return visibilityState;
+  },
 });