Merge pull request #12238 from ToolJet/label-input-alignment

Fix alignment issues arising due to label width setting for input components

frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx

@@ -18,6 +18,7 @@ export const ConfigHandle = ({
   showHandle,
   componentType,
   visibility,
+  subContainerIndex,
 }) => {
   const shouldFreeze = useStore((state) => state.getShouldFreeze());
   const componentName = useStore((state) => state.getComponentDefinition(id)?.component?.name || '', shallow);
@@ -40,10 +41,12 @@ export const ConfigHandle = ({
     const anyComponentHovered = state.getHoveredComponentForGrid() !== '' || state.hoveredComponentBoundaryId !== '';
     // If one component is hovered and one is selected, show the handle for the hovered component
     return (
-      isWidgetHovered ||
-      (showHandle && (!isMultipleComponentsSelected || (isModal && isModalOpen)) && !anyComponentHovered)
+      (subContainerIndex === 0 || subContainerIndex === null) &&
+      (isWidgetHovered ||
+        (showHandle && (!isMultipleComponentsSelected || (isModal && isModalOpen)) && !anyComponentHovered))
     );
   }, shallow);
+
   let height = visibility === false ? 10 : widgetHeight;
 
   return (

frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx

@@ -91,6 +91,7 @@ const WidgetWrapper = memo(
               showHandle={isWidgetActive}
               componentType={componentType}
               visibility={visibility}
+              subContainerIndex={subContainerIndex}
             />
           )}
           <RenderWidget

frontend/src/AppBuilder/WidgetManager/widgets/listview.js

@@ -13,6 +13,7 @@ export const listviewConfig = {
         top: 15,
         left: 3,
         height: 100,
+        width: 7,
       },
       properties: ['source'],
       accessorKey: 'imageURL',

frontend/src/AppBuilder/WidgetManager/widgets/tabs.js

@@ -13,6 +13,7 @@ export const tabsConfig = {
         top: 60,
         left: 17,
         height: 100,
+        width: 7,
       },
       tab: 0,
       properties: ['source'],

frontend/src/Editor/Components/TextInput.jsx

@@ -236,8 +236,6 @@ export const TextInput = function TextInput({
       value: properties.value,
       isMandatory: isMandatory,
       isLoading: loading,
-      isVisible: visibility,
-      isDisabled: disable,
     };
 
     setExposedVariables(exposedVariables);
@@ -245,6 +243,17 @@ export const TextInput = function TextInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    // Fix for "visibility is not defined" in production because there's a naming conflict in the code.
+    // The issue is in the exposedVariables object where we had both a function named visibility and a property isVisible that depends on the state variable with the same name.
+    const exposedVariables = {
+      isVisible: visibility,
+      isDisabled: disable,
+    };
+    setExposedVariables(exposedVariables);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const setInputValue = (value) => {
     setValue(value);
     setExposedVariable('value', value);

frontend/src/Editor/WidgetManager/configs/listview.js

@@ -13,6 +13,7 @@ export const listviewConfig = {
         top: 15,
         left: 3,
         height: 100,
+        width: 7,
       },
       properties: ['source'],
       accessorKey: 'imageURL',

frontend/src/Editor/WidgetManager/configs/tabs.js

@@ -13,6 +13,7 @@ export const tabsConfig = {
         top: 60,
         left: 17,
         height: 100,
+        width: 7,
       },
       tab: 0,
       properties: ['source'],

frontend/src/_ui/Label.jsx

@@ -13,7 +13,7 @@ function Label({ label, width, labelRef, color, defaultAlignment, direction, aut
             justifyContent: direction == 'right' ? 'flex-end' : 'flex-start',
             fontSize: '12px',
             height: defaultAlignment === 'top' && '20px',
-            overflow: 'hidden',
+            overflow: auto ? 'visible' : 'hidden',
           }}
         >
           <p

server/src/modules/apps/services/widget-config/listview.js

@@ -13,6 +13,7 @@ export const listviewConfig = {
         top: 15,
         left: 3,
         height: 100,
+        width: 7,
       },
       properties: ['source'],
       accessorKey: 'imageURL',

server/src/modules/apps/services/widget-config/tabs.js

@@ -13,6 +13,7 @@ export const tabsConfig = {
         top: 60,
         left: 17,
         height: 100,
+        width: 7,
       },
       tab: 0,
       properties: ['source'],