;
isConditional?: boolean;
isMobile?: boolean;
@@ -162,6 +165,7 @@ function FilterModal(props: Props) {
onFilterClick = () => null,
isMainSearch = false,
excludeFilterKeys = [],
+ excludeCategory = [],
allowedFilterKeys = [],
isConditional,
mode,
@@ -185,10 +189,18 @@ function FilterModal(props: Props) {
? searchStoreLive.loadingFilterSearch
: searchStore.loadingFilterSearch;
+ const parseAndAdd = (filter) => {
+ if (filter.category === FilterCategory.EVENTS && filter.key.startsWith('_')) {
+ filter.value = [filter.key.substring(1)];
+ filter.key = FilterKey.CUSTOM;
+ filter.label = 'Custom Events'
+ }
+ onFilterClick(filter)
+ }
const onFilterSearchClick = (filter: any) => {
const _filter = { ...filtersMap[filter.type] };
_filter.value = [filter.value];
- onFilterClick(_filter);
+ parseAndAdd(_filter);
};
const filterJsonObj = isConditional
@@ -198,7 +210,7 @@ function FilterModal(props: Props) {
: filters;
const { matchingCategories, matchingFilters } = getMatchingEntries(
searchQuery,
- filterJson(filterJsonObj, excludeFilterKeys, allowedFilterKeys, mode)
+ filterJson(filterJsonObj, excludeFilterKeys, excludeCategory, allowedFilterKeys, mode)
);
const isResultEmpty =
@@ -247,7 +259,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 })}
+ onClick={() => parseAndAdd({ ...filter })}
>
{filter.category ?
{filter.category}
diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
index 77bed5ccb..1fdfd970a 100644
--- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
+++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
@@ -13,6 +13,7 @@ interface Props {
onFilterClick: (filter: any) => void;
children?: any;
excludeFilterKeys?: Array;
+ excludeCategory?: Array;
allowedFilterKeys?: Array;
disabled?: boolean;
isConditional?: boolean;
@@ -26,6 +27,7 @@ function FilterSelection(props: Props) {
onFilterClick,
children,
excludeFilterKeys = [],
+ excludeCategory = [],
allowedFilterKeys = [],
disabled = false,
isConditional,
@@ -86,6 +88,7 @@ function FilterSelection(props: Props) {
onFilterClick={onAddFilter}
excludeFilterKeys={excludeFilterKeys}
allowedFilterKeys={allowedFilterKeys}
+ excludeCategory={excludeCategory}
isConditional={isConditional}
isMobile={isMobile}
mode={mode}
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index 22ce8433e..f365ddeac 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -18,9 +18,8 @@ interface Props {
}
function FilterValue(props: Props) {
const { filter } = props;
- const isEvent = filter.isEvent;
const [durationValues, setDurationValues] = useState({
- minDuration: filter.value[0],
+ minDuration: filter.value?.[0],
maxDuration: filter.value.length > 1 ? filter.value[1] : filter.value[0],
});
const showCloseButton = filter.value.length > 1;
diff --git a/frontend/app/mstore/customFieldStore.ts b/frontend/app/mstore/customFieldStore.ts
index f5502615d..a4d2de3fd 100644
--- a/frontend/app/mstore/customFieldStore.ts
+++ b/frontend/app/mstore/customFieldStore.ts
@@ -1,17 +1,16 @@
import { makeAutoObservable } from 'mobx';
-import { customFieldService } from 'App/services';
-
+import { customFieldService, filterService } from 'App/services';
import {
addElementToConditionalFiltersMap,
addElementToMobileConditionalFiltersMap,
addElementToFiltersMap,
addElementToFlagConditionsMap,
addElementToLiveFiltersMap,
- clearMetaFilters
+ clearMetaFilters,
} from 'Types/filter/newFilter';
-import { FilterCategory } from 'Types/filter/filterType';
+import { FilterCategory, FilterType } from "Types/filter/filterType";
import CustomField from 'App/mstore/types/customField';
-import customFields from 'Components/Client/CustomFields';
+import filterOptions from 'App/constants';
class CustomFieldStore {
isLoading: boolean = false;
@@ -48,14 +47,40 @@ class CustomFieldStore {
const response = await customFieldService.fetchList(siteId);
clearMetaFilters();
response.forEach((item: any) => {
- addElementToFiltersMap(FilterCategory.METADATA, '_' + item.key);
- addElementToLiveFiltersMap(FilterCategory.METADATA, '_' + item.key);
- addElementToFlagConditionsMap(FilterCategory.METADATA, '_' + item.key);
- addElementToConditionalFiltersMap(FilterCategory.METADATA, '_' + item.key);
- addElementToMobileConditionalFiltersMap(FilterCategory.METADATA, '_' + item.key);
+ const calls = [
+ addElementToFiltersMap,
+ addElementToLiveFiltersMap,
+ addElementToFlagConditionsMap,
+ addElementToConditionalFiltersMap,
+ addElementToMobileConditionalFiltersMap,
+ ];
+ calls.forEach((call) => {
+ call(FilterCategory.METADATA, '_' + item.key);
+ });
});
this.list = response.map((item_1: any) => new CustomField(item_1));
this.fetchedMetadata = true;
+ filterService.fetchTopValues('custom', undefined).then((response: []) => {
+ response.forEach((item: any) => {
+ const calls = [
+ addElementToFiltersMap,
+ addElementToFlagConditionsMap,
+ addElementToConditionalFiltersMap,
+ addElementToMobileConditionalFiltersMap,
+ ];
+ calls.forEach((call) => {
+ call(
+ FilterCategory.EVENTS,
+ '_' + item.value,
+ FilterType.MULTIPLE,
+ 'is',
+ filterOptions.stringOperators,
+ 'filters/custom',
+ true
+ );
+ });
+ });
+ });
} finally {
this.isLoading = false;
}
@@ -65,11 +90,14 @@ class CustomFieldStore {
this.isLoading = true;
try {
const response = await customFieldService.get('/integration/sources');
- this.sources = response.map(({ value, ...item }: any) => new CustomField({
- label: value,
- key: value,
- ...item
- }));
+ this.sources = response.map(
+ ({ value, ...item }: any) =>
+ new CustomField({
+ label: value,
+ key: value,
+ ...item,
+ })
+ );
} finally {
this.isLoading = false;
}
@@ -79,16 +107,18 @@ class CustomFieldStore {
this.isSaving = true;
try {
const wasCreating = !instance.exists();
- const response = wasCreating ? await customFieldService.create(siteId, instance.toData()) :
- await customFieldService.update(siteId, instance.toData());
+ const response = wasCreating
+ ? await customFieldService.create(siteId, instance.toData())
+ : await customFieldService.update(siteId, instance.toData());
const updatedInstance = new CustomField(response);
if (wasCreating) {
this.list.push(updatedInstance);
} else {
- const index = this.list.findIndex(item => item.index === instance.index);
- if (index >= 0)
- this.list[index] = updatedInstance;
+ const index = this.list.findIndex(
+ (item) => item.index === instance.index
+ );
+ if (index >= 0) this.list[index] = updatedInstance;
}
} finally {
this.isSaving = false;
@@ -99,7 +129,7 @@ class CustomFieldStore {
this.isSaving = true;
try {
await customFieldService.delete(siteId, index);
- this.list = this.list.filter(item => item.index !== index);
+ this.list = this.list.filter((item) => item.index !== index);
} finally {
this.isSaving = false;
}
@@ -115,5 +145,4 @@ class CustomFieldStore {
}
}
-
export default CustomFieldStore;
diff --git a/frontend/app/mstore/filterStore.ts b/frontend/app/mstore/filterStore.ts
index 3ffd9023c..b9d8d5736 100644
--- a/frontend/app/mstore/filterStore.ts
+++ b/frontend/app/mstore/filterStore.ts
@@ -1,5 +1,4 @@
import { makeAutoObservable } from 'mobx';
-import { filters } from 'Types/filter/newFilter';
import { filterService } from 'App/services';
interface TopValue {
diff --git a/frontend/app/types/filter/filterType.ts b/frontend/app/types/filter/filterType.ts
index 91ddf0aa3..1e951f774 100644
--- a/frontend/app/types/filter/filterType.ts
+++ b/frontend/app/types/filter/filterType.ts
@@ -1,10 +1,11 @@
export enum FilterCategory {
AUTOCAPTURE = 'Autocapture',
- DEVTOOLS = 'Devtools',
+ DEVTOOLS = 'DevTools',
USER = 'User',
METADATA = 'Metadata',
SESSION = 'Session',
ISSUE = 'Issue',
+ EVENTS = 'Events',
}
export const setQueryParamKeyFromFilterkey = (filterKey: string) => {
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
index 17c2cc860..8c5761b5f 100644
--- a/frontend/app/types/filter/newFilter.js
+++ b/frontend/app/types/filter/newFilter.js
@@ -135,7 +135,7 @@ export const filters = [
{
key: FilterKey.CUSTOM,
type: FilterType.MULTIPLE,
- category: FilterCategory.DEVTOOLS,
+ category: FilterCategory.EVENTS,
label: 'Custom Events',
placeholder: 'Enter event key',
operator: 'is',
@@ -951,6 +951,7 @@ export const clearMetaFilters = () => {
* @param {*} operator
* @param {*} operatorOptions
* @param {*} icon
+ * @param {*} isEvent
*/
export const addElementToFiltersMap = (
category = FilterCategory.METADATA,
@@ -958,7 +959,8 @@ export const addElementToFiltersMap = (
type = FilterType.MULTIPLE,
operator = 'is',
operatorOptions = filterOptions.stringOperators,
- icon = 'filters/metadata'
+ icon = 'filters/metadata',
+ isEvent = false
) => {
filtersMap[key] = {
key,
@@ -969,7 +971,8 @@ export const addElementToFiltersMap = (
operator: operator,
operatorOptions,
icon,
- isLive: true
+ isLive: true,
+ isEvent,
};
};
@@ -992,7 +995,8 @@ export const addElementToFlagConditionsMap = (
type = FilterType.MULTIPLE,
operator = 'is',
operatorOptions = filterOptions.stringOperators,
- icon = 'filters/metadata'
+ icon = 'filters/metadata',
+ isEvent = false
) => {
fflagsConditionsMap[key] = {
key,
@@ -1002,7 +1006,8 @@ export const addElementToFlagConditionsMap = (
operator: operator,
operatorOptions,
icon,
- isLive: true
+ isLive: true,
+ isEvent,
};
};
@@ -1012,7 +1017,8 @@ export const addElementToConditionalFiltersMap = (
type = FilterType.MULTIPLE,
operator = 'is',
operatorOptions = filterOptions.stringOperators,
- icon = 'filters/metadata'
+ icon = 'filters/metadata',
+ isEvent = false
) => {
conditionalFiltersMap[key] = {
key,
@@ -1022,7 +1028,8 @@ export const addElementToConditionalFiltersMap = (
operator: operator,
operatorOptions,
icon,
- isLive: true
+ isLive: true,
+ isEvent,
};
};
@@ -1032,7 +1039,8 @@ export const addElementToMobileConditionalFiltersMap = (
type = FilterType.MULTIPLE,
operator = 'is',
operatorOptions = filterOptions.stringOperators,
- icon = 'filters/metadata'
+ icon = 'filters/metadata',
+ isEvent = false
) => {
mobileConditionalFiltersMap[key] = {
key,
@@ -1042,7 +1050,8 @@ export const addElementToMobileConditionalFiltersMap = (
operator: operator,
operatorOptions,
icon,
- isLive: true
+ isLive: true,
+ isEvent,
};
};