chore: Exposes CSAs for Container widget (#11229)

* chore: Exposes CSAs for Container widget

* Introduces hook to expose variables

* Updates hook to expose variable after setting the state

* Update frontend/src/AppBuilder/_hooks/useExposeVariables.js

Co-authored-by: Kavin Venkatachalam <50441969+kavinvenkatachalam@users.noreply.github.com>

* Removes unwanted imports

* Exposing CSA to control component actions

* Moves CSA's to additional actions section

* Fixes wrong handle param

---------

Co-authored-by: Kavin Venkatachalam <50441969+kavinvenkatachalam@users.noreply.github.com>

frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx

@@ -12,6 +12,7 @@ import { shallow } from 'zustand/shallow';
 
 const SHOW_ADDITIONAL_ACTIONS = [
   'Text',
+  'Container',
   'TextInput',
   'NumberInput',
   'PasswordInput',

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

@@ -15,6 +15,25 @@ export const containerConfig = {
     loadingState: {
       type: 'toggle',
       displayName: 'Loading state',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+    },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      section: 'additionalActions',
       validation: {
         schema: { type: 'boolean' },
         defaultValue: false,
@@ -50,40 +69,44 @@ export const containerConfig = {
         defaultValue: '#fff',
       },
     },
-    visibility: {
-      type: 'toggle',
-      displayName: 'Visibility',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
-      },
-    },
-    disabledState: {
-      type: 'toggle',
-      displayName: 'Disable',
-      validation: {
-        schema: { type: 'boolean' },
-      },
-      defaultValue: false,
-    },
   },
-  exposedVariables: {},
+  exposedVariables: {
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
+  },
+  actions: [
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set disable',
+      params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+  ],
   definition: {
     others: {
       showOnDesktop: { value: '{{true}}' },
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
-      visible: { value: '{{true}}' },
       loadingState: { value: `{{false}}` },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
     },
     events: [],
     styles: {
       backgroundColor: { value: '#fff' },
       borderRadius: { value: '4' },
       borderColor: { value: '#fff' },
-      visibility: { value: '{{true}}' },
-      disabledState: { value: '{{false}}' },
     },
   },
 };

frontend/src/AppBuilder/Widgets/Container.jsx

@@ -1,9 +1,28 @@
 import React, { useMemo } from 'react';
 import { Container as ContainerComponent } from '@/AppBuilder/AppCanvas/Container';
 import Spinner from '@/_ui/Spinner';
+import { useExposeState } from '@/AppBuilder/_hooks/useExposeVariables';
+
+export const Container = ({
+  id,
+  properties,
+  styles,
+  darkMode,
+  height,
+  width,
+  setExposedVariables,
+  setExposedVariable,
+}) => {
+  const { borderRadius, borderColor, boxShadow } = styles;
+
+  const { isDisabled, isVisible, isLoading } = useExposeState(
+    properties.loadingState,
+    properties.visibility,
+    properties.disabledState,
+    setExposedVariables,
+    setExposedVariable
+  );
 
-export const Container = ({ id, properties, styles, darkMode, height, width }) => {
-  const { visibility, disabledState, borderRadius, borderColor, boxShadow } = styles;
   const bgColor = useMemo(() => {
     return {
       backgroundColor:
@@ -16,19 +35,19 @@ export const Container = ({ id, properties, styles, darkMode, height, width }) =
     borderRadius: borderRadius ? parseFloat(borderRadius) : 0,
     border: `1px solid ${borderColor}`,
     height,
-    display: visibility ? 'flex' : 'none',
+    display: isVisible ? 'flex' : 'none',
     overflow: 'hidden auto',
     position: 'relative',
     boxShadow,
   };
   return (
     <div
-      className={`jet-container ${properties.loadingState && 'jet-container-loading'}`}
+      className={`jet-container ${isLoading && 'jet-container-loading'}`}
       id={id}
-      data-disabled={disabledState}
+      data-disabled={isDisabled}
       style={computedStyles}
     >
-      {properties.loadingState ? (
+      {isLoading ? (
         <Spinner />
       ) : (
         <ContainerComponent id={id} styles={bgColor} canvasHeight={height} canvasWidth={width} darkMode={darkMode} />

frontend/src/AppBuilder/_hooks/useExposeVariables.js

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+
+export const useExposeState = (loadingState, visibleState, disabledState, setExposedVariables, setExposedVariable) => {
+  const [isDisabled, setDisable] = useState(disabledState || false);
+  const [isVisible, setVisibility] = useState(visibleState || true);
+  const [isLoading, setLoading] = useState(loadingState || false);
+
+  // Effect to conditionally update state from properties passed to widget
+  useEffect(() => {
+    setDisable(disabledState);
+  }, [disabledState]);
+
+  useEffect(() => {
+    setVisibility(visibleState);
+  }, [visibleState]);
+
+  useEffect(() => {
+    setLoading(loadingState);
+  }, [loadingState]);
+
+  // exposed variables with state and async setters, happens on first time load
+  useEffect(() => {
+    setExposedVariables({
+      setDisable: async (value) => setDisable(value),
+      setVisibility: async (value) => setVisibility(value),
+      setLoading: async (value) => setLoading(value),
+    });
+  }, [setExposedVariables]);
+
+  //Side effect to state variables, these will run after the state is set and the values will be exposed
+  useEffect(() => {
+    setExposedVariable('isDisabled', isDisabled);
+  }, [isDisabled, setExposedVariable]);
+
+  useEffect(() => {
+    setExposedVariable('isVisible', isVisible);
+  }, [isVisible, setExposedVariable]);
+
+  useEffect(() => {
+    setExposedVariable('isLoading', isLoading);
+  }, [isLoading, setExposedVariable]);
+
+  return {
+    isDisabled,
+    setDisable,
+    isVisible,
+    setVisibility,
+    isLoading,
+    setLoading,
+  };
+};

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

@@ -15,6 +15,25 @@ export const containerConfig = {
     loadingState: {
       type: 'toggle',
       displayName: 'Loading state',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+    },
+    disabledState: {
+      type: 'toggle',
+      section: 'additionalActions',
+      displayName: 'Disable',
       validation: {
         schema: { type: 'boolean' },
         defaultValue: false,
@@ -50,32 +69,38 @@ export const containerConfig = {
         defaultValue: '#fff',
       },
     },
-    visibility: {
-      type: 'toggle',
-      displayName: 'Visibility',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
-      },
-    },
-    disabledState: {
-      type: 'toggle',
-      displayName: 'Disable',
-      validation: {
-        schema: { type: 'boolean' },
-      },
-      defaultValue: false,
-    },
   },
-  exposedVariables: {},
+  exposedVariables: {
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
+  },
+  actions: [
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set disable',
+      params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+  ],
   definition: {
     others: {
       showOnDesktop: { value: '{{true}}' },
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
-      visible: { value: '{{true}}' },
       loadingState: { value: `{{false}}` },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
     },
     events: [],
     styles: {

server/src/helpers/widget-config/container.js

@@ -15,6 +15,25 @@ export const containerConfig = {
     loadingState: {
       type: 'toggle',
       displayName: 'Loading state',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Visibility',
+      section: 'additionalActions',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+    },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      section: 'additionalActions',
       validation: {
         schema: { type: 'boolean' },
         defaultValue: false,
@@ -50,40 +69,44 @@ export const containerConfig = {
         defaultValue: '#fff',
       },
     },
-    visibility: {
-      type: 'toggle',
-      displayName: 'Visibility',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
-      },
-    },
-    disabledState: {
-      type: 'toggle',
-      displayName: 'Disable',
-      validation: {
-        schema: { type: 'boolean' },
-      },
-      defaultValue: false,
-    },
   },
-  exposedVariables: {},
+  exposedVariables: {
+    isVisible: true,
+    isDisabled: false,
+    isLoading: false,
+  },
+  actions: [
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisable',
+      displayName: 'Set disable',
+      params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+  ],
   definition: {
     others: {
       showOnDesktop: { value: '{{true}}' },
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
-      visible: { value: '{{true}}' },
       loadingState: { value: `{{false}}` },
+      visibility: { value: '{{true}}' },
+      disabledState: { value: '{{false}}' },
     },
     events: [],
     styles: {
       backgroundColor: { value: '#fff' },
       borderRadius: { value: '4' },
       borderColor: { value: '#fff' },
-      visibility: { value: '{{true}}' },
-      disabledState: { value: '{{false}}' },
     },
   },
 };