feat: Changing evaluations for UQI from hidden type to js objects

app/client/src/actions/evaluationActions.ts

@@ -7,6 +7,7 @@ import _ from "lodash";
 import { DataTree } from "../entities/DataTree/dataTreeFactory";
 import { DependencyMap } from "../utils/DynamicBindingUtils";
 import { Diff } from "deep-diff";
+import { QueryActionConfig } from "../entities/Action";
 
 export const FIRST_EVAL_REDUX_ACTIONS = [
   // Pages
@@ -80,3 +81,26 @@ export const setDependencyMap = (
     payload: { inverseDependencyMap },
   };
 };
+
+// Called when a form is being setup, for setting up the base condition evaluations for the form
+export const initFormEvaluations = (
+  editorConfig: any,
+  settingConfig: any,
+  formId: string,
+) => {
+  return {
+    type: ReduxActionTypes.INIT_FORM_EVALUATION,
+    payload: { editorConfig, settingConfig, formId },
+  };
+};
+
+// Called when there is change in the data of the form, re evaluates the whole form
+export const startFormEvaluations = (
+  formId: string,
+  formData: QueryActionConfig,
+) => {
+  return {
+    type: ReduxActionTypes.RUN_FORM_EVALUATION,
+    payload: { formId, actionConfiguration: formData },
+  };
+};

app/client/src/api/PluginApi.ts

@@ -8,14 +8,25 @@ export type PluginId = string;
 export type PluginPackageName = string;
 export type GenerateCRUDEnabledPluginMap = Record<PluginId, PluginPackageName>;
 
+export enum UIComponentTypes {
+  DbEditorForm = "DbEditorForm",
+  UQIDbEditorForm = "UQIDbEditorForm",
+  ApiEditorForm = "ApiEditorForm",
+  RapidApiEditorForm = "RapidApiEditorForm",
+}
+
+export enum DatasourceComponentTypes {
+  RestAPIDatasourceForm = "RestAPIDatasourceForm",
+  AutoForm = "AutoForm",
+}
 export interface Plugin {
   id: string;
   name: string;
   type: PluginType;
   packageName: string;
   iconLocation?: string;
-  uiComponent: "ApiEditorForm" | "RapidApiEditorForm" | "DbEditorForm";
-  datasourceComponent: "RestAPIDatasourceForm" | "AutoForm";
+  uiComponent: UIComponentTypes;
+  datasourceComponent: DatasourceComponentTypes;
   allowUserDatasources?: boolean;
   templates: Record<string, string>;
   responseType?: "TABLE" | "JSON";

app/client/src/components/formControls/BaseControl.tsx

@@ -33,6 +33,7 @@ export interface ControlBuilder<T extends ControlProps> {
 }
 
 export interface ControlProps extends ControlData, ControlFunctions {
+  serverLabel?: string;
   key?: string;
   extraData?: ControlData[];
   formName: string;
@@ -49,6 +50,7 @@ export interface ControlData {
   validationRegex?: string;
   dataType?: InputType;
   isRequired?: boolean;
+  conditionals: string;
   hidden?: HiddenType;
   placeholderText?: string;
   schema?: any;

app/client/src/components/formControls/DynamicTextFieldControl.test.tsx

@@ -7,6 +7,7 @@ import { PluginType } from "entities/Action";
 import { waitFor } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
 import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
+import { DatasourceComponentTypes, UIComponentTypes } from "api/PluginApi";
 
 function TestForm(props: any) {
   return <div>{props.children}</div>;
@@ -55,8 +56,8 @@ describe("DynamicTextFieldControl", () => {
                   templates: {
                     CREATE: "test plugin template",
                   },
-                  uiComponent: "DbEditorForm",
-                  datasourceComponent: "AutoForm",
+                  uiComponent: UIComponentTypes.DbEditorForm,
+                  datasourceComponent: DatasourceComponentTypes.AutoForm,
                 },
               ],
             },

app/client/src/constants/ReduxActionConstants.tsx

@@ -480,6 +480,9 @@ export const ReduxActionTypes = {
   TOGGLE_SHOW_GLOBAL_SEARCH_MODAL: "TOGGLE_SHOW_GLOBAL_SEARCH_MODAL",
   FETCH_RELEASES_SUCCESS: "FETCH_RELEASES_SUCCESS",
   RESET_UNREAD_RELEASES_COUNT: "RESET_UNREAD_RELEASES_COUNT",
+  SET_FORM_EVALUATION: "SET_FORM_EVALUATION",
+  INIT_FORM_EVALUATION: "INIT_FORM_EVALUATION",
+  RUN_FORM_EVALUATION: "RUN_FORM_EVALUATION",
   SET_LOADING_ENTITIES: "SET_LOADING_ENTITIES",
   RESET_CURRENT_APPLICATION: "RESET_CURRENT_APPLICATION",
   SELECT_WIDGETS_IN_AREA: "SELECT_WIDGETS_IN_AREA",

app/client/src/pages/Editor/DataSourceEditor/index.tsx

@@ -27,6 +27,7 @@ import { setGlobalSearchQuery } from "actions/globalSearchActions";
 import { toggleShowGlobalSearchModal } from "actions/globalSearchActions";
 import { getQueryParams } from "../../../utils/AppsmithUtils";
 import { redirectToNewIntegrations } from "actions/apiPaneActions";
+import { DatasourceComponentTypes } from "api/PluginApi";
 
 interface ReduxStateProps {
   formData: Datasource;
@@ -148,7 +149,8 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
       datasourcePane.newDatasource === props.match.params.datasourceId,
     viewMode: datasourcePane.viewMode[datasource?.id ?? ""] ?? true,
     pluginType: plugin?.type ?? "",
-    pluginDatasourceForm: plugin?.datasourceComponent ?? "AutoForm",
+    pluginDatasourceForm:
+      plugin?.datasourceComponent ?? DatasourceComponentTypes.AutoForm,
     pluginPackageName: plugin?.packageName ?? "",
   };
 };

app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx

@@ -63,7 +63,8 @@ import { thinScrollbar } from "constants/DefaultTheme";
 import ActionRightPane from "components/editorComponents/ActionRightPane";
 import { SuggestedWidget } from "api/ActionAPI";
 import { getActionTabsInitialIndex } from "selectors/editorSelectors";
-import TooltipComponent from "components/ads/Tooltip";
+import { UIComponentTypes } from "../../../api/PluginApi";
+import TooltipComponent from "../../../components/ads/Tooltip";
 
 const QueryFormContainer = styled.form`
   display: flex;
@@ -365,6 +366,7 @@ type QueryFormProps = {
   isRunning: boolean;
   dataSources: Datasource[];
   DATASOURCES_OPTIONS: any;
+  uiComponent: UIComponentTypes;
   executedQueryData?: {
     body: any;
     isExecutionSuccess?: boolean;
@@ -386,6 +388,7 @@ type ReduxProps = {
   responseType: string | undefined;
   pluginId: string;
   documentationLink: string | undefined;
+  formEvaluationState: Record<string, any>;
 };
 
 export type EditorJSONtoFormProps = QueryFormProps & ReduxProps;
@@ -409,6 +412,7 @@ export function EditorJSONtoForm(props: Props) {
     responseType,
     runErrorMessage,
     settingConfig,
+    uiComponent,
   } = props;
   let error = runErrorMessage;
   let output: Record<string, any>[] | null = null;
@@ -505,6 +509,71 @@ export function EditorJSONtoForm(props: Props) {
     }
   };
 
+  // Added function to handle the render of the configs
+  const renderConfig = (editorConfig: any) => {
+    // Selectively rendering form based on uiComponent prop
+    return uiComponent === UIComponentTypes.UQIDbEditorForm
+      ? editorConfig.map(renderEachConfigV2(formName))
+      : editorConfig.map(renderEachConfig(formName));
+  };
+
+  // V2 call to make rendering more flexible, used for UQI forms
+  const renderEachConfigV2 = (formName: string) => (section: any): any => {
+    return section.children.map(
+      (formControlOrSection: ControlProps, idx: number) => {
+        if (
+          !!formControlOrSection &&
+          props.hasOwnProperty("formEvaluationState") &&
+          !!props.formEvaluationState
+        ) {
+          let allowToRender = true;
+          if (
+            formControlOrSection.hasOwnProperty("configProperty") &&
+            props.formEvaluationState.hasOwnProperty(
+              formControlOrSection.configProperty,
+            )
+          ) {
+            allowToRender =
+              props?.formEvaluationState[formControlOrSection.configProperty]
+                .visible;
+          } else if (
+            formControlOrSection.hasOwnProperty("serverLabel") &&
+            !!formControlOrSection.serverLabel &&
+            props.formEvaluationState.hasOwnProperty(
+              formControlOrSection.serverLabel,
+            )
+          ) {
+            allowToRender =
+              props?.formEvaluationState[formControlOrSection.serverLabel]
+                .visible;
+          }
+
+          if (!allowToRender) return null;
+        }
+
+        if (formControlOrSection.hasOwnProperty("children")) {
+          return renderEachConfigV2(formName)(formControlOrSection);
+        } else {
+          try {
+            const { configProperty } = formControlOrSection;
+            return (
+              <FieldWrapper key={`${configProperty}_${idx}`}>
+                <FormControl
+                  config={formControlOrSection}
+                  formName={formName}
+                />
+              </FieldWrapper>
+            );
+          } catch (e) {
+            log.error(e);
+          }
+        }
+        return null;
+      },
+    );
+  };
+
+  // Recursive call to render forms pre UQI
   const renderEachConfig = (formName: string) => (section: any): any => {
     return section.children.map(
       (formControlOrSection: ControlProps, idx: number) => {
@@ -712,7 +781,7 @@ export function EditorJSONtoForm(props: Props) {
                     panelComponent: (
                       <SettingsWrapper>
                         {editorConfig && editorConfig.length > 0 ? (
-                          editorConfig.map(renderEachConfig(formName))
+                          renderConfig(editorConfig)
                         ) : (
                           <>
                             <ErrorMessage>

app/client/src/pages/Editor/QueryEditor/Form.tsx

@@ -10,6 +10,7 @@ import {
 import { EditorJSONtoForm, EditorJSONtoFormProps } from "./EditorJSONtoForm";
 import { getFormValues } from "redux-form";
 import { QueryAction } from "entities/Action";
+import { getFormEvaluationState } from "selectors/formSelectors";
 
 const valueSelector = formValueSelector(QUERY_EDITOR_FORM_NAME);
 const mapStateToProps = (state: AppState) => {
@@ -21,6 +22,14 @@ const mapStateToProps = (state: AppState) => {
   const documentationLinks = getPluginDocumentationLinks(state);
   const formData = getFormValues(QUERY_EDITOR_FORM_NAME)(state) as QueryAction;
 
+  // State to manage the evaluations for the form
+  let formEvaluationState = {};
+
+  // Fetching evaluations state only once the formData is populated
+  if (!!formData) {
+    formEvaluationState = getFormEvaluationState(state)[formData.id];
+  }
+
   return {
     actionName,
     pluginId,
@@ -29,6 +38,7 @@ const mapStateToProps = (state: AppState) => {
     documentationLink: documentationLinks[pluginId],
     formName: QUERY_EDITOR_FORM_NAME,
     formData: formData,
+    formEvaluationState,
   };
 };