Adds CSA for forms

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

@@ -362,6 +362,9 @@ export const formConfig = {
   exposedVariables: {
     data: {},
     isValid: true,
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
   },
   actions: [
     {
@@ -372,6 +375,21 @@ export const formConfig = {
       handle: 'resetForm',
       displayName: 'Reset Form',
     },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'setVisibility', displayName: 'Set Visibility', defaultValue: '{{true}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set Disable',
+      params: [{ handle: 'setDisable', displayName: 'Set Disable', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set Loading',
+      params: [{ handle: 'setLoading', displayName: 'Set Loading', defaultValue: '{{false}}', type: 'toggle' }],
+    },
   ],
   definition: {
     others: {

frontend/src/AppBuilder/Widgets/Form/Form.jsx

@@ -8,6 +8,7 @@ import { onComponentClick, removeFunctionObjects } from '@/_helpers/appUtils';
 import { deepClone } from '@/_helpers/utilities/utils.helpers';
 import RenderSchema from './RenderSchema';
 import useStore from '@/AppBuilder/_stores/store';
+import { useExposeState } from '@/AppBuilder/_hooks/useExposeVariables';
 import { shallow } from 'zustand/shallow';
 import {
   CONTAINER_FORM_CANVAS_PADDING,
@@ -55,6 +56,13 @@ export const Form = function Form(props) {
     visibility,
     disabledState,
   } = properties;
+  const { isDisabled, isVisible, isLoading } = useExposeState(
+    properties.loadingState,
+    properties.visibility,
+    properties.disabledState,
+    setExposedVariables,
+    setExposedVariable
+  );
   const backgroundColor =
     ['#fff', '#ffffffff'].includes(styles.backgroundColor) && darkMode ? '#232E3C' : styles.backgroundColor;
   const computedStyles = {
@@ -62,7 +70,7 @@ export const Form = function Form(props) {
     borderRadius: borderRadius ? parseFloat(borderRadius) : 0,
     border: `${SUBCONTAINER_CANVAS_BORDER_WIDTH}px solid ${borderColor}`,
     height,
-    display: visibility ? 'flex' : 'none',
+    display: isVisible ? 'flex' : 'none',
     position: 'relative',
     boxShadow,
     flexDirection: 'column',
@@ -305,17 +313,24 @@ export const Form = function Form(props) {
             }}
             componentType="Form"
           />
+          {isDisabled && (
+            <div
+              id={`${id}-header-disabled`}
+              className="tj-form-disabled-overlay"
+              style={{ height: headerHeight || '100%' }}
+              onClick={() => {}}
+              onDrop={(e) => e.stopPropagation()}
+            />
+          )}
         </div>
       )}
       <div className="jet-form-body" style={formContent}>
-        {loadingState ? (
-          <div className="p-2" style={{ margin: '0px auto' }}>
-            <center>
-              <div className="spinner-border mt-5" role="status"></div>
-            </center>
+        {isLoading ? (
+          <div className="p-2 tw-flex tw-items-center tw-justify-center" style={{ margin: '0px auto' }}>
+            <div className="spinner-border" role="status"></div>
           </div>
         ) : (
-          <fieldset disabled={disabledState} style={{ width: '100%' }}>
+          <fieldset disabled={isDisabled} style={{ width: '100%' }}>
             {!advanced && (
               <div className={'json-form-wrapper-disabled'} style={{ width: '100%', height: '100%' }}>
                 <SubContainer
@@ -381,6 +396,15 @@ export const Form = function Form(props) {
             }}
             componentType="Form"
           />
+          {isDisabled && (
+            <div
+              id={`${id}-footer-disabled`}
+              className="tj-form-disabled-overlay"
+              style={{ height: footerHeight || '100%' }}
+              onClick={() => {}}
+              onDrop={(e) => e.stopPropagation()}
+            />
+          )}
         </div>
       )}
     </form>

frontend/src/AppBuilder/Widgets/Form/form.scss

@@ -1,7 +1,7 @@
 .wj-form-header {
   position: relative;
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     bottom: 0;
     left: -7px;
@@ -14,7 +14,7 @@
 .wj-form-footer {
   position: relative;
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: -7px;
@@ -23,3 +23,18 @@
     background-color: var(--border-weak);
   }
 }
+
+.tj-form-disabled-overlay {
+  /* TODO: Make slot overlays common */
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  z-index: 1;
+  margin: 0;
+
+  box-sizing: content-box;
+  padding: 4px 0;
+}

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

@@ -362,6 +362,9 @@ export const formConfig = {
   exposedVariables: {
     data: {},
     isValid: true,
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
   },
   actions: [
     {
@@ -372,6 +375,21 @@ export const formConfig = {
       handle: 'resetForm',
       displayName: 'Reset Form',
     },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'setVisibility', displayName: 'Set Visibility', defaultValue: '{{true}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set Disable',
+      params: [{ handle: 'setDisable', displayName: 'Set Disable', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set Loading',
+      params: [{ handle: 'setLoading', displayName: 'Set Loading', defaultValue: '{{false}}', type: 'toggle' }],
+    },
   ],
   definition: {
     others: {

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

@@ -362,6 +362,9 @@ export const formConfig = {
   exposedVariables: {
     data: {},
     isValid: true,
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
   },
   actions: [
     {
@@ -372,6 +375,21 @@ export const formConfig = {
       handle: 'resetForm',
       displayName: 'Reset Form',
     },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'setVisibility', displayName: 'Set Visibility', defaultValue: '{{true}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set Disable',
+      params: [{ handle: 'setDisable', displayName: 'Set Disable', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set Loading',
+      params: [{ handle: 'setLoading', displayName: 'Set Loading', defaultValue: '{{false}}', type: 'toggle' }],
+    },
   ],
   definition: {
     others: {