possible fix

src/AutoUI/index.tsx

@@ -72,12 +72,14 @@ import {
 	useAnalyticsContext,
 } from '@balena/ui-shared-components';
 import type { FiltersView } from '../components/Filters';
-import { ajvFilter } from '../components/Filters/SchemaSieve';
+import {
+	ajvFilter,
+	parseFilterDescription,
+} from '../components/Filters/SchemaSieve';
 import type { Format } from '../components/Widget/utils';
 import type { Dictionary } from '../common';
 import { defaultFormats } from '../components/Widget/Formats';
-import { listFilterQuery } from './Filters/PersistentFilters';
-import { removeRefSchemeSeparatorsFromFilters } from './Filters/utils';
+
 const { Box, styled } = Material;
 
 const HeaderGrid = styled(Box)(({ theme }) => ({
@@ -181,10 +183,16 @@ export const AutoUI = <T extends AutoUIBaseResource<T>>({
 	const { t } = useTranslation();
 	const { state: analytics } = useAnalyticsContext();
 	const history = useHistory();
-	// Use a flag to make sure table view event is only triggered once (without the tag
-	// it will be triggered whenever the data is updated)
-	const [shouldTableViewEventBeTriggered, setShouldTableViewEventBeTriggered] =
-		React.useState(true);
+
+	const totalItems = React.useMemo(
+		() =>
+			pagination && 'totalItems' in pagination
+				? pagination.totalItems
+				: Array.isArray(data)
+				? data.length
+				: null,
+		[pagination, data],
+	);
 
 	const modelRef = React.useRef(modelRaw);
 	// This allows the component to work even if
@@ -438,28 +446,33 @@ export const AutoUI = <T extends AutoUIBaseResource<T>>({
 	};
 
 	React.useEffect(() => {
-		if (!lens || !shouldTableViewEventBeTriggered) {
+		if (!lens || !totalItems) {
 			return;
 		}
 
-		const dataCount = Array.isArray(data) ? data.length : null;
-		const totalItems = pagination?.serverSide
-			? pagination.totalItems
-			: dataCount;
+		// TODO: check this as we might want to change it.
+		const amplitudeFilter = filters
+			.map((filter) => filter.anyOf)
+			.map((anyOf) => {
+				return anyOf
+					?.map((af: JSONSchema) => {
+						const description = parseFilterDescription(af);
+
+						return description
+							? `${description.schema.title} ${description.operator} ${description.value}`
+							: null;
+					})
+					.join(' OR ');
+			});
 
 		analytics.webTracker?.track('Resource List View', {
 			lens: lens.slug,
 			resource: model.resource,
 			totalItems,
-			filters: Object.assign(
-				{},
-				listFilterQuery(removeRefSchemeSeparatorsFromFilters(filters), false),
-			),
+			filters: amplitudeFilter,
 			sort,
 		});
-
-		setShouldTableViewEventBeTriggered(false);
-	}, [lens, model.resource, pagination, filters, sort, data]);
+	}, [lens, model.resource, filters, sort, totalItems]);
 
 	if (loading && data == null) {
 		return (
@@ -551,8 +564,6 @@ export const AutoUI = <T extends AutoUIBaseResource<T>>({
 														resource: model.resource,
 														lens: lens.slug,
 													});
-
-													setShouldTableViewEventBeTriggered(true);
 												}}
 											/>
 										</HeaderGrid>