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>
2022-01-14 19:20:54 +05:30 · 2022-01-14 19:20:54 +05:30 · f100b5918d
commit f100b5918d
parent fabe453940
11 changed files with 46 additions and 36 deletions
--- a/app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx
+++ b/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;"} 
--- a/app/client/src/components/formControls/DropDownControl.tsx
+++ b/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";
-    if (this.props.customStyles && this.props?.customStyles?.width) {
-      width = this.props?.customStyles?.width;
+    let width = "20vw";
+    if (
+      "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}
    />
  );
 }
--- a/app/client/src/components/formControls/DynamicInputTextControl.tsx
+++ b/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) {
-      customStyle.width = "50vh";
+    if ("width" in props.customStyles) {
+      customStyle.width = props.customStyles.width;
    }
-    if (props.customStyles?.minHeight) {
-      customStyle.minHeight = "34px";
+    if ("minHeight" in props.customStyles) {
+      customStyle.minHeight = props.customStyles.minHeight;
    }
  }
  return (
--- a/app/client/src/components/formControls/FilePickerControl.tsx
+++ b/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
--- a/app/client/src/components/formControls/FixedKeyInputControl.tsx
+++ b/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> {
--- a/app/client/src/components/formControls/InputTextControl.tsx
+++ b/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}
--- a/app/client/src/components/formControls/KeyValueArrayControl.tsx
+++ b/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" }}
--- a/app/client/src/components/formControls/KeyValueInputControl.tsx
+++ b/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>
--- a/app/client/src/components/formControls/PaginationControl.tsx
+++ b/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
--- a/app/client/src/components/formControls/WhereClauseControl.tsx
+++ b/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;
-  margin-bottom: 10px;
+  align-self: ${(props) => (props.alignSelf ? props.alignSelf : "end")};
+  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
-    width: `${(props.maxWidth - 15) / 3}vh`,
-    height: "30px",
-  };
+
+  // 5 is subtracted because the width of the operator dropdown is 5vw
+  const unitWidth = (props.maxWidth - 5) / 5;

  // 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}
--- a/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
+++ b/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 />