feat: more CSAT filters (#7038)

* refactor: use grid instead of flex

* refactor: let the parent layout decide the spacing

* feat: add a separate date-range component

* refactor: use new date-range component

* fix: destructure all options

* refactor: separate group by component

* refactor: better handle group by data

* fix: defaul group by

* refactor: variable naming

* refactor: use DATE_RANGE_OPTIONS directly

* chore: update platform in gemfile.lock

* refactor: trigger fetch on filter change

* refactor: remove redundant method

* refactor: simplify methods and emitting

* refactor: simplify filter logic

* refactor: simplify fetching

* refactor: imports

* refactor: prop name

* refactor: CSAT response to use new APIs

* refactor: use common filter event

* refactor: use computed value for validGroupBy

* refactor: better function names

* refactor: rename prop

* refactor: remove redundant props

* refactor: separate agents filter component

* feat: add labels filter

* feat: add inboxes filter

* fix: event

* refactor: send label and inbox along with request payload

* feat: add inbox filter

* feat: add inbox to download

* refactor: use request payload from computed property

* refactor: params

* feat: add team to csat filters

* feat: add team to csat filters

* feat: add filter for rating

* feat: reverse options

* feat: add labels for ratings and translations

* feat: update translation

* fix: margin and spacing

* fix: trailing whitespace

* feat: add tests for filters

* chore: move files

* feat: add try catch with alerts

* feat: update import

* fix: imports

* Updates broken imports

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

app/javascript/dashboard/assets/scss/_date-picker.scss

@@ -5,12 +5,20 @@
 }
 
 .date-picker {
-  .mx-datepicker {
-    width: 100%;
+  &.no-margin {
+    .mx-input {
+      margin-bottom: 0;
+    }
   }
 
-  .mx-datepicker-range {
-    width: 320px;
+  &:not(.auto-width) {
+    .mx-datepicker-range {
+      width: 320px;
+    }
+  }
+
+  .mx-datepicker {
+    width: 100%;
   }
 
   .mx-input {

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -13,7 +13,9 @@
 }
 
 .multiselect {
-  margin-bottom: var(--space-normal);
+  &:not(.no-margin) {
+    margin-bottom: var(--space-normal);
+  }
 
   &.multiselect--disabled {
     opacity: 0.8;