fix: Where clause UI fixes (10406) (#10411)

* Replaced vh with vw, fixed logic for customStyles

* Removed console logs

* Updated width of the dropdown options

* Fixes where clause filter group delete icon placement

Co-authored-by: Irongade <adeoluayangade@yahoo.com>

app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx

@@ -90,7 +90,7 @@ const StyledFormLabel = styled.label<{ config?: ControlProps }>`
     props.config?.controlType === "SWITCH" ||
     props.config?.controlType === "CHECKBOX"
       ? "auto;"
-      : "50vh;"} 
+      : "20vw;"} 
   margin-left: ${(props) =>
     // margin required for CHECKBOX
     props.config?.controlType === "CHECKBOX" ? "0px;" : "16px;"} 

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

@@ -13,14 +13,18 @@ import { DynamicValues } from "reducers/evaluationReducers/formEvaluationReducer
 
 const DropdownSelect = styled.div`
   font-size: 14px;
-  width: 50vh;
+  width: 20vw;
 `;
 
 class DropDownControl extends BaseControl<DropDownControlProps> {
   render() {
-    let width = "50vh";
+    let width = "20vw";
-    if (this.props.customStyles && this.props?.customStyles?.width) {
+    if (
-      width = this.props?.customStyles?.width;
+      "customStyles" in this.props &&
+      !!this.props.customStyles &&
+      "width" in this.props.customStyles
+    ) {
+      width = this.props.customStyles.width;
     }
 
     // Options will be set dynamically if the config has fetchOptionsConditionally set to true
@@ -54,7 +58,8 @@ class DropDownControl extends BaseControl<DropDownControlProps> {
 function renderDropdown(props: {
   input?: WrappedFieldInputProps;
   meta?: WrappedFieldMetaProps;
-  props: DropDownControlProps & { width?: string };
+  props: DropDownControlProps;
+  width: string;
   formName: string;
   isLoading?: boolean;
   options: DropdownOption[];
@@ -80,12 +85,12 @@ function renderDropdown(props: {
       isLoading={props.isLoading}
       isMultiSelect={props?.props?.isMultiSelect}
       onSelect={props.input?.onChange}
-      optionWidth="50vh"
+      optionWidth={props.width}
       options={props.options}
       placeholder={props.props?.placeholderText}
       selected={selectedOption}
       showLabelOnly
-      width={props?.props?.width ? props?.props?.width : "50vh"}
+      width={props.width}
     />
   );
 }

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

@@ -57,14 +57,14 @@ export function InputText(props: {
     };
   }
 
-  let customStyle = { width: "50vh", minHeight: "38px" };
+  let customStyle = { width: "20vw", minHeight: "38px" };
   if (!!props.customStyles && _.isEmpty(props.customStyles) === false) {
     customStyle = { ...props.customStyles };
-    if (props.customStyles?.width) {
+    if ("width" in props.customStyles) {
-      customStyle.width = "50vh";
+      customStyle.width = props.customStyles.width;
     }
-    if (props.customStyles?.minHeight) {
+    if ("minHeight" in props.customStyles) {
-      customStyle.minHeight = "34px";
+      customStyle.minHeight = props.customStyles.minHeight;
     }
   }
   return (

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

@@ -105,7 +105,7 @@ function RenderFilePicker(props: RenderFilePickerProps) {
     <>
       <div
         className={replayHighlightClass}
-        style={{ flexDirection: "row", display: "flex", width: "50vh" }}
+        style={{ flexDirection: "row", display: "flex", width: "20vw" }}
       >
         <StyledDiv>{props?.input?.value?.name}</StyledDiv>
         <SelectButton

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

@@ -6,7 +6,7 @@ import TextField from "components/editorComponents/form/fields/TextField";
 import styled from "styled-components";
 
 const Wrapper = styled.div`
-  width: 50vh;
+  width: 20vw;
 `;
 
 class FixKeyInputControl extends BaseControl<FixedKeyInputControlProps> {

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

@@ -35,7 +35,7 @@ export function InputText(props: {
   const { dataType, disabled, name, placeholder } = props;
 
   return (
-    <div data-cy={name} style={{ width: "50vh" }}>
+    <div data-cy={name} style={{ width: "20vw" }}>
       <Field
         component={renderComponent}
         datatype={dataType}

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

@@ -111,7 +111,7 @@ function KeyValueRow(
           >
             <div
               data-replay-id={btoa(keyTextFieldName)}
-              style={{ width: "50vh" }}
+              style={{ width: "20vw" }}
             >
               <Field
                 component={renderTextInput}
@@ -129,7 +129,7 @@ function KeyValueRow(
               />
             </div>
             {!props.actionConfig && (
-              <div style={{ marginLeft: "16px", width: "50vh" }}>
+              <div style={{ marginLeft: "16px", width: "20vw" }}>
                 <div
                   data-replay-id={valueTextFieldName}
                   style={{ display: "flex", flexDirection: "row" }}

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

@@ -55,7 +55,7 @@ function KeyValueRow(props: KeyValueRowProps & WrappedFieldArrayProps) {
             <FormRowWithLabel key={index} style={{ marginTop: index ? 13 : 0 }}>
               <div
                 data-replay-id={btoa(`${field}.key`)}
-                style={{ width: "50vh" }}
+                style={{ width: "20vw" }}
               >
                 <TextField name={`${field}.key`} placeholder="Key" />
               </div>
@@ -64,7 +64,7 @@ function KeyValueRow(props: KeyValueRowProps & WrappedFieldArrayProps) {
                 <div style={{ display: "flex", flexDirection: "row" }}>
                   <div
                     data-replay-id={btoa(`${field}.value`)}
-                    style={{ marginRight: 14, width: "50vh" }}
+                    style={{ marginRight: 14, width: "20vw" }}
                   >
                     <TextField name={`${field}.value`} placeholder="Value" />
                   </div>

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

@@ -52,7 +52,7 @@ export function Pagination(props: {
   const { configProperty, customStyles, formName, name } = props;
 
   return (
-    <div data-cy={name} style={{ width: "50vh" }}>
+    <div data-cy={name} style={{ width: "20vw" }}>
       {/*  form control for Limit field */}
       <FormControlContainer>
         <FormControl

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

@@ -46,14 +46,18 @@ const logicalFieldConfig: any = {
   controlType: "DROP_DOWN",
   initialValue: "EQ",
   options: [],
-  customStyles: { width: "10vh", height: "30px" },
+  customStyles: { width: "5vw" },
 };
 
 // Component for the delete Icon
-const CenteredIcon = styled(Icon)`
+const CenteredIcon = styled(Icon)<{
+  alignSelf?: string;
+  marginBottom?: string;
+}>`
   margin-left: 5px;
-  align-self: end;
+  align-self: ${(props) => (props.alignSelf ? props.alignSelf : "end")};
-  margin-bottom: 10px;
+  margin-bottom: ${(props) =>
+    props.marginBottom ? props.marginBottom : "10px"};
   &.hide {
     opacity: 0;
     pointer-events: none;
@@ -112,11 +116,9 @@ const AddMoreAction = styled.div`
 // Component to display single line of condition, includes 2 inputs and 1 dropdown
 function ConditionComponent(props: any, index: number) {
   // Custom styles have to be passed as props, otherwise the UI will be disproportional
-  const customStyles = {
+
-    // 15 is subtracted because the width of the operator dropdown is 15px
+  // 5 is subtracted because the width of the operator dropdown is 5vw
-    width: `${(props.maxWidth - 15) / 3}vh`,
+  const unitWidth = (props.maxWidth - 5) / 5;
-    height: "30px",
-  };
 
   // Labels are only displayed if the condition is the first one
   let keyLabel = "";
@@ -134,7 +136,7 @@ function ConditionComponent(props: any, index: number) {
         config={{
           ...keyFieldConfig,
           label: keyLabel,
-          customStyles,
+          customStyles: { width: `${unitWidth * 2}vw` },
           configProperty: `${props.field}.key`,
         }}
         formName={props.formName}
@@ -144,7 +146,7 @@ function ConditionComponent(props: any, index: number) {
         config={{
           ...conditionFieldConfig,
           label: conditionLabel,
-          customStyles,
+          customStyles: { width: `${unitWidth * 1}vw` },
           configProperty: `${props.field}.condition`,
           options: props.comparisonTypes,
           initialValue: props.comparisonTypes[0].value,
@@ -156,7 +158,7 @@ function ConditionComponent(props: any, index: number) {
         config={{
           ...valueFieldConfig,
           label: valueLabel,
-          customStyles,
+          customStyles: { width: `${unitWidth * 2}vw` },
           configProperty: `${props.field}.value`,
         }}
         formName={props.formName}
@@ -235,6 +237,7 @@ function ConditionBlock(props: any) {
               const fieldValue: whereClauseValueType = props.fields.get(index);
               if (!!fieldValue && "children" in fieldValue) {
                 // If the value contains children in it, that means it is a ConditionBlock
+                const maxWidth = props.maxWidth - 7.5;
                 return (
                   <ConditionBox>
                     <FieldArray
@@ -242,7 +245,7 @@ function ConditionBlock(props: any) {
                       key={`${field}.children`}
                       name={`${field}.children`}
                       props={{
-                        maxWidth: props.maxWidth - 15,
+                        maxWidth,
                         configProperty: `${field}`,
                         formName: props.formName,
                         logicalTypes: props.logicalTypes,
@@ -255,6 +258,8 @@ function ConditionBlock(props: any) {
                       rerenderOnEveryChange={false}
                     />
                     <CenteredIcon
+                      alignSelf={"center"}
+                      marginBottom={"-5px"}
                       name="cross"
                       onClick={(e) => {
                         e.stopPropagation();
@@ -322,7 +327,7 @@ export default function WhereClauseControl(props: WhereClauseControlProps) {
   } = props;
 
   // Max width is designed in a way that the proportion stays same even after nesting
-  const maxWidth = 105;
+  const maxWidth = 55;
   return (
     <FieldArray
       component={ConditionBlock}

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

@@ -772,7 +772,7 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
           )}
         </FormInputContainer>
         <FormInputContainer>
-          <div style={{ width: "50vh" }}>
+          <div style={{ width: "20vw" }}>
             <FormLabel>
               Redirect URL
               <br />