diff --git a/src/AutoUI/index.tsx b/src/AutoUI/index.tsx index 0b208dab..677e9561 100644 --- a/src/AutoUI/index.tsx +++ b/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 = >({ 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 = >({ }; 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 = >({ resource: model.resource, lens: lens.slug, }); - - setShouldTableViewEventBeTriggered(true); }} />