Merged in r2-2827-insight-fixes (pull request #6762)

R2-2827: Wrapping insight filters

Author: jtoliver-quoin

app/javascript/components/form/components/styles.css

@@ -128,21 +128,10 @@
 
 :global [dir="rtl"] .MuiAutocomplete-endAdornment {
   right: initial !important;
-  margin-left: 9px !important;
-  left: 0;
+  left: 9px !important;
 }
 
 :global .MuiAutocomplete-endAdornment {
-  position: relative !important;
-  margin-right: 9px !important;
+  right: 9px !important;
   left: initial !important;
-  right: 0 !important;
-}
-
-:global .MuiAutocomplete-inputRoot {
-  display: flex;
-}
-
-:global .MuiAutocomplete-inputRoot input {
-  padding: 9.5px !important;
 }

app/javascript/components/form/fields/select-input.jsx

@@ -214,13 +214,8 @@ const SelectInput = ({ commonInputProps, metaInputProps, options: allOptions, fo
     return <TextField {...inputParams} label={<InputLabel tooltip={tooltip} text={label} />} {...rest} />;
   };
 
-  const renderTags = (value, getTagProps) => (
-    <div>
-      {value.map((option, index) => (
-        <Chip label={optionLabel(option)} {...getTagProps({ index })} disabled={disabled} />
-      ))}
-    </div>
-  );
+  const renderTags = (value, getTagProps) =>
+    value.map((option, index) => <Chip label={optionLabel(option)} {...getTagProps({ index })} disabled={disabled} />);
 
   const getOptionDisabled = option => {
     if (option?.disabled) {

app/javascript/components/insights-filters/component.js

@@ -139,7 +139,7 @@ const Component = ({ moduleID, id, subReport, toggleControls }) => {
     <form noValidate onSubmit={formMethods.handleSubmit(submit)}>
       <div className={css.container}>
         <div className={css.dateControlGroup}>{filterInputs(DATE_CONTROLS_GROUP)}</div>
-        {filterInputs()}
+        <div className={css.filters}>{filterInputs()}</div>
       </div>
       <div className={css.actions}>
         <div>

app/javascript/components/insights-filters/styles.css

@@ -12,6 +12,17 @@
   }
 }
 
+.filters {
+  display: flex;
+  gap: var(--sp-2);
+  flex-wrap: wrap;
+
+  & > div {
+    width: calc(50% - var(--sp-1));
+    margin: 0;
+  }
+}
+
 .actions {
   display: flex;
   width: 25em;
@@ -26,9 +37,9 @@
 .dateControlGroup {
   display: flex;
   flex-wrap: wrap;
-  flex: 2 !important;
   gap: var(--sp-1);
   justify-content: space-between;
+  flex: 1;
 
   & > div {
     margin: 0;

app/javascript/components/searchable-select/component.jsx

@@ -48,31 +48,28 @@ const SearchableSelect = ({
     return defaultValues || defaultEmptyValue;
   })();
 
-  const renderTags = (value, getTagProps) => (
-    <div>
-      {value.map((option, index) => {
-        const { onDelete, ...rest } = { ...getTagProps({ index }) };
-        const chipProps = {
-          ...(isDisabled || { onDelete }),
-          ...rest,
-          classes: {
-            ...(mode.isShow && {
-              disabled: css.disabledChip
-            })
-          }
-        };
+  const renderTags = (value, getTagProps) =>
+    value.map((option, index) => {
+      const { onDelete, ...rest } = { ...getTagProps({ index }) };
+      const chipProps = {
+        ...(isDisabled || { onDelete }),
+        ...rest,
+        classes: {
+          ...(mode.isShow && {
+            disabled: css.disabledChip
+          })
+        }
+      };
 
-        return (
-          <Chip
-            size="small"
-            label={optionLabel(option, options, optionIdKey, optionLabelKey)}
-            {...chipProps}
-            disabled={isDisabled}
-          />
-        );
-      })}
-    </div>
-  );
+      return (
+        <Chip
+          size="small"
+          label={optionLabel(option, options, optionIdKey, optionLabelKey)}
+          {...chipProps}
+          disabled={isDisabled}
+        />
+      );
+    });
 
   const getSelectedOptions = (option, selected) => optionEquality(option, selected, optionIdKey);
   const getOptionLabel = option => optionLabel(option, options, optionIdKey, optionLabelKey);