Merge branch 'main' into release/database-1.1.1

.github/workflows/tooljet-release-docker-image-build.yml

@@ -7,7 +7,7 @@ on:
   workflow_dispatch:
     inputs:
       job-to-run:
-        description: Enter the job name (tooljet-ce/tooljet-server-ce)
+        description: Enter the job name (tooljet-ce)
         options: ["tooljet-ce"]
         required: true
       image:
@@ -46,7 +46,8 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
-      - name: Build and Push Docker image
+      - name: Build and Push Docker image for non-LTS tag
+        if: "!contains(github.event.release.tag_name, 'CE-LTS')"
         uses: docker/build-push-action@v4
         with:
           context: .
@@ -58,6 +59,19 @@ jobs:
           DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
           DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
 
+      - name: Build and Push Docker image for LTS tag
+        if: "contains(github.event.release.tag_name, 'CE-LTS')"
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: docker/production.Dockerfile
+          push: true
+          tags: tooljet/tooljet-ce:${{ github.event.release.tag_name }},tooljet/tooljet-ce:CE-LTS-latest
+          platforms: linux/amd64
+        env:
+          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+
       - name: Send Slack Notification
         run: |
           if [[ "${{ job.status }}" == "success" ]]; then
@@ -101,6 +115,7 @@ jobs:
           password: ${{ secrets.DOCKER_PASSWORD }}
 
       - name: Build and Push Docker image
+        if: "!contains(github.event.release.tag_name, 'CE-LTS')"
         uses: docker/build-push-action@v4
         with:
           context: .
@@ -112,6 +127,19 @@ jobs:
           DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
           DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
 
+      - name: Build and Push Docker image
+        if: "contains(github.event.release.tag_name, 'CE-LTS')"
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: docker/production.Dockerfile
+          push: true
+          tags: tooljet/tooljet-ce:${{ github.event.inputs.image }},tooljet/tooljet-ce:CE-LTS-latest
+          platforms: linux/amd64
+        env:
+          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+
       - name: Send Slack Notification
         run: |
           if [[ "${{ job.status }}" == "success" ]]; then

frontend/.version

@@ -1 +1 @@
-2.61.0
+2.61.0

frontend/src/Editor/Container.jsx

@@ -1046,10 +1046,12 @@ const WidgetWrapper = ({
   const isWidgetActive = (isSelected || isDragging) && mode !== 'view';
 
   const { label = { value: null } } = propertiesDefinition ?? {};
+  const visibility = propertiesDefinition?.visibility?.value ?? stylesDefinition?.visibility?.value ?? null;
+  const resolvedVisibility = resolveWidgetFieldValue(visibility);
 
   const styles = {
     width: width + 'px',
-    height: calculateMoveableBoxHeight() + 'px',
+    height: resolvedVisibility ? calculateMoveableBoxHeight() + 'px' : '10px',
     transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`,
     ...(isGhostComponent ? { opacity: 0.5 } : {}),
     ...(isWidgetActive ? { zIndex: 3 } : {}),

frontend/src/Editor/DragContainer.jsx

@@ -11,6 +11,7 @@ import { restrictedWidgetsObj } from './WidgetManager/restrictedWidgetsConfig';
 import { useGridStore, useIsGroupHandleHoverd, useOpenModalWidgetId } from '@/_stores/gridStore';
 import toast from 'react-hot-toast';
 import { individualGroupableProps } from './gridUtils';
+import { resolveWidgetFieldValue } from '@/_helpers/utils';
 
 const CANVAS_BOUNDS = { left: 0, top: 0, right: 0, bottom: 0, position: 'css' };
 const RESIZABLE_CONFIG = {
@@ -247,6 +248,30 @@ export default function DragContainer({
     lastDraggedEventsRef.current = posWithParent;
   };
 
+  const widgetsWithDefinitions = Object.entries(boxes).map(([id, box]) => {
+    const propertiesDefinition = box?.component?.definition?.properties || {};
+    const stylesDefinition = box?.component?.definition?.styles || {};
+    return {
+      id,
+      propertiesDefinition,
+      stylesDefinition,
+      ...box,
+    };
+  });
+
+  const isComponentVisible = (id) => {
+    for (const key in widgetsWithDefinitions) {
+      if (widgetsWithDefinitions[key].id === id) {
+        const visibility =
+          widgetsWithDefinitions[key].propertiesDefinition?.visibility?.value ??
+          widgetsWithDefinitions[key].stylesDefinition?.visibility?.value ??
+          null;
+        return resolveWidgetFieldValue(visibility);
+      }
+    }
+    return true;
+  };
+
   return mode === 'edit' ? (
     <>
       <Moveable
@@ -376,6 +401,9 @@ export default function DragContainer({
           useGridStore.getState().actions.setDragTarget();
         }}
         onResizeStart={(e) => {
+          if (!isComponentVisible(e.target.id)) {
+            return false;
+          }
           performance.mark('onResizeStart');
           useGridStore.getState().actions.setResizingComponentId(e.target.id);
           e.setMin([gridWidth, 10]);

frontend/src/Editor/SubContainer.jsx

@@ -715,11 +715,19 @@ const SubWidgetWrapper = ({
 
   const isDragging = useGridStore((state) => state?.draggingComponentId === id);
 
+  const isComponentVisible = () => {
+    const visibility =
+      widget.component.definition?.properties?.visibility?.value ??
+      widget.component.definition?.styles?.visibility?.value ??
+      null;
+    return resolveWidgetFieldValue(visibility);
+  };
+
   let width = (canvasWidth * layoutData.width) / 43;
   width = width > canvasWidth ? canvasWidth : width; //this handles scenarios where the width is set more than canvas for older components
   const styles = {
     width: width + 'px',
-    height: layoutData.height + 'px',
+    height: isComponentVisible() ? layoutData.height + 'px' : '10px',
     transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`,
     ...(isGhostComponent ? { opacity: 0.5 } : {}),
   };

server/.version

@@ -1 +1 @@
-2.61.0
+2.61.0