ui: some fixes to issue filters default value, display and placeholder consistency

2024-12-04 10:58:38 +01:00 · 2024-12-04 10:58:38 +01:00 · 486ffc7764
commit 486ffc7764
parent f854c3d43c
9 changed files with 79 additions and 51 deletions
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx
@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { Button, Checkbox, Input } from 'antd';
 import cn from 'classnames';
+import { Loader } from 'UI';
 import OutsideClickDetectingDiv from '../../OutsideClickDetectingDiv';

 export function AutocompleteModal({
@ -11,11 +12,12 @@ export function AutocompleteModal({
  loadOptions,
  options,
  isLoading,
+  placeholder,
 }: {
  values: string[];
  onClose: () => void;
  onApply: (values: string[]) => void;
-  handleFocus: () => void;
+  handleFocus?: () => void;
  loadOptions: (query: string) => void;
  options: { value: string; label: string }[];
  placeholder?: string;
@ -70,36 +72,40 @@ export function AutocompleteModal({
        onFocus={handleFocus}
        loading={isLoading}
        onChange={(e) => handleInputChange(e.target.value)}
+        placeholder={placeholder}
      />
-
-      <div
-        className={'flex flex-col gap-2 overflow-y-auto py-2'}
-        style={{ maxHeight: 200 }}
-      >
-        {sortedOptions.map((item) => (
+      <Loader loading={isLoading}>
+        <>
          <div
-            key={item.value}
-            onClick={() => onSelectOption(item)}
-            className={
-              'cursor-pointer w-full py-1 hover:bg-active-blue rounded px-2'
-            }
+            className={'flex flex-col gap-2 overflow-y-auto py-2'}
+            style={{ maxHeight: 200 }}
          >
-            <Checkbox checked={isSelected(item)} /> {item.label}
+            {sortedOptions.map((item) => (
+              <div
+                key={item.value}
+                onClick={() => onSelectOption(item)}
+                className={
+                  'cursor-pointer w-full py-1 hover:bg-active-blue rounded px-2'
+                }
+              >
+                <Checkbox checked={isSelected(item)} /> {item.label}
+              </div>
+            ))}
          </div>
-        ))}
-      </div>
-      {query.length ? (
-        <div className={'border-y border-y-gray-light py-2'}>
-          <div
-            className={
-              'rounded cursor-pointer text-blue hover:bg-active-blue px-2 py-1'
-            }
-            onClick={() => onApply([query])}
-          >
-            Apply "{query}"
-          </div>
-        </div>
-      ) : null}
+          {query.length ? (
+            <div className={'border-y border-y-gray-light py-2'}>
+              <div
+                className={
+                  'rounded cursor-pointer text-blue hover:bg-active-blue px-2 py-1'
+                }
+                onClick={() => onApply([query])}
+              >
+                Apply "{query}"
+              </div>
+            </div>
+          ) : null}
+        </>
+      </Loader>
      <div className={'flex gap-2 items-center pt-2'}>
        <Button type={'primary'} onClick={applyValues}>
          Apply
@ -151,9 +157,9 @@ export function AutoCompleteContainer(props: Props) {
                : props.value[0]}
            </div>
            {props.value.length > 1 ? (
-              props.value.length === 2 ? (
-                <>
-                  or
+              <>
+                or
+                {props.value.length === 2 ? (
                  <div
                    className={
                      'rounded-xl bg-gray-lighter leading-none px-1 py-0.5'
@ -163,16 +169,16 @@ export function AutoCompleteContainer(props: Props) {
                      ? props.mapValues(props.value[1])
                      : props.value[1]}
                  </div>
-                </>
-              ) : (
-                <div
-                  className={
-                    'rounded-xl bg-gray-lighter leading-none px-1 py-0.5'
-                  }
-                >
-                  + {props.value.length - 1} More
-                </div>
-              )
+                ) : (
+                  <div
+                    className={
+                      'rounded-xl bg-gray-lighter leading-none px-1 py-0.5'
+                    }
+                  >
+                    + {props.value.length - 1} More
+                  </div>
+                )}
+              </>
            ) : null}
          </>
        ) : (
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
@ -43,6 +43,7 @@ interface Props {
  icon?: string;
  hideOrText?: boolean;
  onApplyValues: (values: string[]) => void;
+  modalProps?: Record<string, any>
 }

 const FilterAutoComplete = observer(
@ -51,7 +52,8 @@ const FilterAutoComplete = observer(
    onClose,
    onApply,
    values,
-  }: { params: any, values: string[], onClose: () => void, onApply: (values: string[]) => void }) => {
+    placeholder,
+  }: { params: any, values: string[], onClose: () => void, onApply: (values: string[]) => void, placeholder?: string }) => {
    const [options, setOptions] = useState<{ value: string; label: string }[]>(
      []
    );
@ -128,6 +130,7 @@ const FilterAutoComplete = observer(
      loadOptions={handleInputChange}
      options={options}
      isLoading={loading}
+      placeholder={placeholder}
    />
  }
 );
--- a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
+++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
@ -42,7 +42,7 @@ function FilterItem(props: Props) {
  const replaceFilter = (filter: any) => {
    props.onUpdate({
      ...filter,
-      value: [''],
+      value: filter.value,
      filters: filter.filters ? filter.filters.map((i: any) => ({...i, value: ['']})) : [],
    });
  };
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@ -247,7 +247,7 @@ function FilterModal(props: Props) {
                  className={cn(
                    'flex items-center p-2 cursor-pointer gap-1 rounded-lg hover:bg-active-blue'
                  )}
-                  onClick={() => onFilterClick({ ...filter, value: [''] })}
+                  onClick={() => onFilterClick({ ...filter })}
                >
                  {filter.category ? <div style={{ width: 150 }} className={'text-disabled-text w-full flex justify-between items-center'}>
                    <span>{filter.category}</span>
--- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
+++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
@ -38,6 +38,8 @@ function FilterSelection(props: Props) {
    onFilterClick(filter);
    setShowModal(false);
  }
+
+  const label = filter?.category === 'Issue' ? 'Issue' : filter?.label;
  return (
    <div className="relative flex-shrink-0">
      <OutsideClickDetectingDiv
@ -74,7 +76,7 @@ function FilterSelection(props: Props) {
              className="overflow-hidden whitespace-nowrap text-ellipsis mr-auto truncate"
              style={{ textOverflow: 'ellipsis' }}
            >
-              {filter.label}
+              {label}
            </div>
          </div>
        )}
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@ -18,6 +18,7 @@ interface Props {
 }
 function FilterValue(props: Props) {
  const { filter } = props;
+  const isEvent = filter.isEvent;
  const [durationValues, setDurationValues] = useState({
    minDuration: filter.value[0],
    maxDuration: filter.value.length > 1 ? filter.value[1] : filter.value[0],
@ -113,17 +114,18 @@ function FilterValue(props: Props) {
    )
    switch (filter.type) {
      case FilterType.NUMBER_MULTIPLE:
-        return <BaseFilterLocalAutoComplete type="number" />;
+        return <BaseFilterLocalAutoComplete type="number" placeholder={filter.placeholder} />;
      case FilterType.NUMBER:
        return (
          <BaseFilterLocalAutoComplete
            type="number"
            allowDecimals={false}
            isMultiple={false}
+            placeholder={filter.placeholder}
          />
        );
      case FilterType.STRING:
-        return <BaseFilterLocalAutoComplete />;
+        return <BaseFilterLocalAutoComplete placeholder={filter.placeholder} />;
      case FilterType.DROPDOWN:
        return (
          <BaseDropDown />
@ -137,6 +139,7 @@ function FilterValue(props: Props) {
            onRemoveValue={(ind) => onRemoveValue(ind)}
            showCloseButton={showCloseButton}
            showOrButton={showOrButton}
+            placeholder={filter.placeholder}
          />
        );
      case FilterType.DURATION:
@ -164,6 +167,7 @@ function FilterValue(props: Props) {
            placeholder={filter.placeholder}
            onSelect={(e, item, index) => onChange(e, item, index)}
            icon={filter.icon}
+            modalProps={{ placeholder: isEvent ? 'Search event' : 'Filter by'}}
          />
        );
    }
--- a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
@ -1,7 +1,5 @@
 import React from 'react';
-import { Icon } from 'UI';
 import { AutoCompleteContainer, AutocompleteModal } from "../FilterAutoComplete/AutocompleteModal";
-import stl from './FilterValueDropdown.module.css';

 interface Props {
  options: any[];
@ -28,6 +26,7 @@ function FilterValueDropdown(props: Props) {
      onApply={onApply}
      loadOptions={setQuery}
      options={filteredOptions}
+      isLoading={false}
    />
  );
 }
--- a/frontend/app/mstore/searchStore.ts
+++ b/frontend/app/mstore/searchStore.ts
@ -244,6 +244,7 @@ class SearchStore {
  addFilter(filter: any) {
    const index = filter.isEvent ? -1 : this.instance.filters.findIndex((i: FilterItem) => i.key === filter.key);

+    console.log(filter)
    filter.value = checkFilterValue(filter.value);
    filter.filters = filter.filters
      ? filter.filters.map((subFilter: any) => ({
--- a/frontend/app/types/filter/newFilter.js
+++ b/frontend/app/types/filter/newFilter.js
@ -1,6 +1,6 @@
 import {
-  clickSelectorOperators
-} from 'App/constants/filterOptions';
+  clickSelectorOperators, issueOptions
+} from "App/constants/filterOptions";
 import Record from 'Types/Record';
 import { FilterType, FilterKey, FilterCategory } from './filterType';
 import filterOptions, { countries, platformOptions } from 'App/constants';
@ -86,6 +86,18 @@ export const mobileFilters = [
  }
 ];

+const issueFilters = issueOptions.map((i) => ({
+  key: `${FilterKey.ISSUE}_${i.value}`,
+  type: FilterType.ISSUE,
+  category: FilterCategory.ISSUE,
+  label: i.label,
+  value: i.value,
+  placeholder: 'Select an issue',
+  operator: 'is',
+  operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']),
+  icon: 'filters/click',
+  options: filterOptions.issueOptions,
+}));
 export const filters = [
  ...mobileFilters,
  {
@ -431,6 +443,7 @@ export const filters = [
    icon: 'filters/click',
    options: filterOptions.issueOptions
  },
+  ...issueFilters,
  {
    key: FilterKey.USER_OS,
    type: FilterType.MULTIPLE,
@ -884,7 +897,7 @@ export const clickmapFilter = {

 const mapFilters = (list) => {
  return list.reduce((acc, filter) => {
-    filter.value = [''];
+    filter.value = filter.value ? [filter.value] : [''];
    acc[filter.key] = filter;
    return acc;
  }, {});