From 1b888ef7f07c9c52a29c9657245309d3aa51a71a Mon Sep 17 00:00:00 2001
From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Date: Tue, 20 Aug 2024 17:48:29 +0530
Subject: [PATCH] feat: Action redesign - updated helper text to show below the
 control

---
 .../form/fields/StyledFormComponents.tsx      | 29 +++++++++++--------
 app/client/src/pages/Editor/FormConfig.tsx    | 23 ++++++++++++---
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx b/app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx
index 259abf538ea4..6cc500f53a45 100644
--- a/app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx
+++ b/app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx
@@ -8,8 +8,8 @@ export const StyledFormInfo = styled.span<{ config?: ControlProps }>`
     //SWITCH and CHECKBOX display label text and form input aligned side by side
     props?.config?.controlType !== "SWITCH" &&
     props?.config?.controlType !== "CHECKBOX"
-      ? "block;"
-      : "inline-block;"}
+      ? "block"
+      : "inline-block"};
   font-weight: normal;
   color: var(--ads-v2-color-fg-muted);
   font-size: 12px;
@@ -19,7 +19,12 @@ export const StyledFormInfo = styled.span<{ config?: ControlProps }>`
     props?.config?.controlType !== "CHECKBOX"
       ? "1px"
       : "0px"};
-  margin-top: 5px;
+  margin-top: ${(props) =>
+    //SWITCH and CHECKBOX display label text and form input aligned side by side but not for others
+    props?.config?.controlType === "SWITCH" ||
+    props?.config?.controlType === "CHECKBOX"
+      ? "0px"
+      : "5px"};
   margin-bottom: ${(props) =>
     //SWITCH and CHECKBOX display label text and form input aligned side by side but not for others
     props?.config?.controlType !== "SWITCH" &&
@@ -30,15 +35,15 @@ export const StyledFormInfo = styled.span<{ config?: ControlProps }>`
 `;
 
 const FormSubtitleText = styled.span<{ config?: ControlProps }>`
-display: ${(props) =>
-  //SWITCH and CHECKBOX display label text and form input aligned side by side
-  props?.config?.controlType !== "SWITCH" &&
-  props?.config?.controlType !== "CHECKBOX"
-    ? "block;"
-    : "inline;"}
-font-weight: normal;
-color: var(--ads-v2-color-fg-muted);
-font-size: 12px;
+  display: ${(props) =>
+    //SWITCH and CHECKBOX display label text and form input aligned side by side
+    props?.config?.controlType !== "SWITCH" &&
+    props?.config?.controlType !== "CHECKBOX"
+      ? "block"
+      : "inline"};
+  font-weight: normal;
+  color: var(--ads-v2-color-fg-muted);
+  font-size: 12px;
 `;
 
 //Styled help text, intended to be used with Form Fields
diff --git a/app/client/src/pages/Editor/FormConfig.tsx b/app/client/src/pages/Editor/FormConfig.tsx
index a4529dbaff1b..172dadf994de 100644
--- a/app/client/src/pages/Editor/FormConfig.tsx
+++ b/app/client/src/pages/Editor/FormConfig.tsx
@@ -67,6 +67,12 @@ interface FormConfigProps extends FormControlProps {
   changesViewType: boolean;
 }
 
+const controlsWithSubtitleInTop = [
+  "ARRAY_FIELD",
+  "WHERE_CLAUSE",
+  "QUERY_DYNAMIC_TEXT",
+];
+
 // top contains label, subtitle, urltext, tooltip, display type
 // bottom contains the info and error text
 // props.children will render the form element
@@ -176,6 +182,7 @@ function renderFormConfigTop(props: {
   changesViewType: boolean;
 }) {
   const {
+    controlType,
     encrypted,
     isRequired,
     label,
@@ -185,16 +192,21 @@ function renderFormConfigTop(props: {
     url,
     urlText,
   } = { ...props.config };
+  const shouldRenderSubtitle =
+    subtitle && controlsWithSubtitleInTop.includes(controlType);
   return (
     <div className="form-config-top" key={props.config.label}>
       {!nestedFormControl && // if the form control is a nested form control hide its label
-        (label?.length > 0 || encrypted || tooltipText || subtitle) && (
+        (label?.length > 0 ||
+          encrypted ||
+          tooltipText ||
+          shouldRenderSubtitle) && (
           <>
             <FlexWrapper>
               <FormLabel
                 config={props.config}
                 extraStyles={{
-                  marginBottom: !!subtitle && "0px",
+                  marginBottom: shouldRenderSubtitle && "0px",
                   minWidth: !!props.changesViewType && "unset",
                 }}
               >
@@ -237,7 +249,7 @@ function renderFormConfigTop(props: {
                 />
               )}
             </FlexWrapper>
-            {subtitle && (
+            {shouldRenderSubtitle && (
               <FormInfoText config={props.config}>{subtitle}</FormInfoText>
             )}
           </>
@@ -255,9 +267,12 @@ function renderFormConfigBottom(props: {
   config: ControlProps;
   configErrors?: EvaluationError[];
 }) {
-  const { controlType, info } = { ...props.config };
+  const { controlType, info, subtitle } = { ...props.config };
   return (
     <>
+      {subtitle && !controlsWithSubtitleInTop.includes(controlType) && (
+        <FormInfoText config={props.config}>{subtitle}</FormInfoText>
+      )}
       {info && (
         <FormInputHelperText
           addMarginTop={controlType === "CHECKBOX" ? "8px" : "2px"} // checkboxes need a higher margin top than others form control types