Excluding goals in dashboard (#4983)

* Simple frontend for has_done_not

* Simple UI for goal filter adding or removal

* Better alignment on trash icons, avoid moving around if row expands

* Refactor filter text functions, share code

* has_not_done, special casing for has not done when formatting filter text

* Changelog

* Fix lint

* prettier format

* Add tests

* Lowercase Goal

* Update changelog

* has_not_done for goals is now named `is not` in the UI

* prettier

* Document and test serializeApiFilters

CHANGELOG.md

@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file.
 - Dashboard shows comparisons for all reports
 - UTM Medium report and API shows (gclid) and (msclkid) for paid searches when no explicit utm medium present.
 - Support for `case_sensitive: false` modifiers in Stats API V2 filters for case-insensitive searches.
+- Add filter `is not` for goals in dashboard plausible/analytics#4983
 
 ### Removed
 

assets/js/dashboard/components/filter-operator-selector.js

@@ -6,7 +6,8 @@ import {
   FILTER_OPERATIONS,
   FILTER_OPERATIONS_DISPLAY_NAMES,
   supportsContains,
-  supportsIsNot
+  supportsIsNot,
+  supportsHasDoneNot
 } from '../util/filters'
 import { Menu, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
@@ -75,6 +76,10 @@ export default function FilterOperatorSelector(props) {
                     FILTER_OPERATIONS.isNot,
                     supportsIsNot(filterName)
                   )}
+                  {renderTypeItem(
+                    FILTER_OPERATIONS.has_not_done,
+                    supportsHasDoneNot(filterName)
+                  )}
                   {renderTypeItem(
                     FILTER_OPERATIONS.contains,
                     supportsContains(filterName)

assets/js/dashboard/filters.js

@@ -12,10 +12,9 @@ import {
   cleanLabels,
   FILTER_MODAL_TO_FILTER_GROUP,
   formatFilterGroup,
-  EVENT_PROPS_PREFIX,
-  plainFilterText,
-  styledFilterText
-} from "./util/filters";
+  EVENT_PROPS_PREFIX
+} from "./util/filters"
+import { plainFilterText, styledFilterText } from "./util/filter-text"
 
 const WRAPSTATE = { unwrapped: 0, waiting: 1, wrapped: 2 }
 

assets/js/dashboard/nav-menu/filter-pills-list.tsx

@@ -6,10 +6,9 @@ import { FilterPill } from './filter-pill'
 import {
   cleanLabels,
   EVENT_PROPS_PREFIX,
-  FILTER_GROUP_TO_MODAL_TYPE,
-  plainFilterText,
-  styledFilterText
+  FILTER_GROUP_TO_MODAL_TYPE
 } from '../util/filters'
+import { styledFilterText, plainFilterText } from '../util/filter-text'
 import { useAppNavigate } from '../navigation/use-app-navigate'
 import classNames from 'classnames'
 

assets/js/dashboard/nav-menu/filters-bar.test.tsx

@@ -61,9 +61,9 @@ test('user can see expected filters and clear them one by one or all together',
   )
 
   expect(queryFilterPills().map((m) => m.textContent)).toEqual([
-    'Country is Germany ',
-    'Goal is Subscribed to Newsletter ',
-    'Page is /docs or /blog '
+    'Country is Germany',
+    'Goal is Subscribed to Newsletter',
+    'Page is /docs or /blog'
   ])
 
   await userEvent.click(
@@ -74,8 +74,8 @@ test('user can see expected filters and clear them one by one or all together',
   )
 
   expect(queryFilterPills().map((m) => m.textContent)).toEqual([
-    'Goal is Subscribed to Newsletter ',
-    'Page is /docs or /blog '
+    'Goal is Subscribed to Newsletter',
+    'Page is /docs or /blog'
   ])
 
   await userEvent.click(

assets/js/dashboard/stats/modals/filter-modal-group.js

@@ -20,7 +20,7 @@ export default function FilterModalGroup({
     [filterGroup, rows]
   )
 
-  const showAddRow = filterGroup == 'props'
+  const showAddRow = ['props', 'goal'].includes(filterGroup)
   const showTitle = filterGroup != 'props'
 
   return (
@@ -42,7 +42,10 @@ export default function FilterModalGroup({
               key={id}
               filter={filter}
               labels={labels}
+              canDelete={showAddRow}
+              showDelete={rows.length > 1}
               onUpdate={(newFilter, labelUpdate) => onUpdateRowValue(id, newFilter, labelUpdate)}
+              onDelete={() => onDeleteRow(id)}
             />
           )
         )}

assets/js/dashboard/stats/modals/filter-modal-props-row.js

@@ -112,7 +112,7 @@ export default function FilterModalPropsRow({
         />
       </div>
       {showDelete && (
-        <div className="col-span-1 flex flex-col justify-center">
+        <div className="col-span-1 flex flex-col mt-2">
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a
             className="ml-2 text-red-600 h-5 w-5 cursor-pointer"

assets/js/dashboard/stats/modals/filter-modal-row.js

@@ -1,6 +1,8 @@
 /** @format */
 
 import React, { useMemo } from 'react'
+import { TrashIcon } from '@heroicons/react/20/solid'
+import classNames from 'classnames'
 
 import FilterOperatorSelector from '../../components/filter-operator-selector'
 import Combobox from '../../components/combobox'
@@ -16,7 +18,14 @@ import { apiPath } from '../../util/url'
 import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
 
-export default function FilterModalRow({ filter, labels, onUpdate }) {
+export default function FilterModalRow({
+  filter,
+  labels,
+  canDelete,
+  showDelete,
+  onUpdate,
+  onDelete
+}) {
   const { query } = useQueryContext()
   const site = useSiteContext()
   const [operation, filterKey, clauses] = filter
@@ -64,7 +73,12 @@ export default function FilterModalRow({ filter, labels, onUpdate }) {
   }
 
   return (
-    <div className="grid grid-cols-11 mt-1">
+    <div
+      className={classNames('grid mt-1', {
+        'grid-cols-12': canDelete,
+        'grid-cols-11': !canDelete
+      })}
+    >
       <div className="col-span-3">
         <FilterOperatorSelector
           forFilter={filterKey}
@@ -83,6 +97,17 @@ export default function FilterModalRow({ filter, labels, onUpdate }) {
           placeholder={`Select ${withIndefiniteArticle(formattedFilters[filterKey])}`}
         />
       </div>
+      {showDelete && (
+        <div className="col-span-1 flex flex-col mt-2">
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a
+            className="ml-2 text-red-600 h-5 w-5 cursor-pointer"
+            onClick={onDelete}
+          >
+            <TrashIcon />
+          </a>
+        </div>
+      )}
     </div>
   )
 }

assets/js/dashboard/stats/reports/list.js

@@ -14,9 +14,9 @@ import {
   cleanLabels,
   replaceFilterByPrefix,
   isRealTimeDashboard,
-  hasGoalFilter,
-  plainFilterText
+  hasGoalFilter
 } from '../../util/filters'
+import { plainFilterText } from '../../util/filter-text'
 import { useQueryContext } from '../../query-context'
 
 const MAX_ITEMS = 9

assets/js/dashboard/util/filter-text.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { DashboardQuery, Filter, FilterClauseLabels } from '../query'
+import { plainFilterText, styledFilterText } from './filter-text'
+import { render, screen } from '@testing-library/react'
+
+describe('styledFilterText() and plainFilterText()', () => {
+  it.each<[Filter, FilterClauseLabels, string]>([
+    [['is', 'page', ['/docs', '/blog']], {}, 'Page is /docs or /blog'],
+    [['is', 'country', ['US']], { US: 'United States' }, 'Country is United States'],
+    [['is', 'goal', ['Signup']], {}, 'Goal is Signup'],
+    [['is', 'props:browser_language', ['en-US']], {}, 'Property browser_language is en-US'],
+    [['has_not_done', 'goal', ['Signup', 'Login']], {}, 'Goal is not Signup or Login'],
+  ])(
+    'when filter is %p and labels are %p, functions return %p',
+    (filter, labels, expectedPlainText) => {
+      const query = { labels } as unknown as DashboardQuery
+
+      expect(plainFilterText(query, filter)).toBe(expectedPlainText)
+
+      render(<p data-testid="filter-text">{styledFilterText(query, filter)}</p>)
+      expect(screen.getByTestId('filter-text')).toHaveTextContent(expectedPlainText)
+    }
+  )
+})

assets/js/dashboard/util/filter-text.tsx

@@ -0,0 +1,77 @@
+/* @format */
+
+import React, { ReactNode, isValidElement, Fragment } from 'react'
+import { DashboardQuery, Filter } from '../query'
+import {
+  EVENT_PROPS_PREFIX,
+  FILTER_OPERATIONS_DISPLAY_NAMES,
+  formattedFilters,
+  getLabel,
+  getPropertyKeyFromFilterKey
+} from './filters'
+
+export function styledFilterText(
+  query: DashboardQuery,
+  [operation, filterKey, clauses]: Filter
+) {
+  if (filterKey.startsWith(EVENT_PROPS_PREFIX)) {
+    const propKey = getPropertyKeyFromFilterKey(filterKey)
+    return (
+      <>
+        Property <b>{propKey}</b> {FILTER_OPERATIONS_DISPLAY_NAMES[operation]}{' '}
+        {formatClauses(clauses)}
+      </>
+    )
+  }
+
+  const formattedFilter = (
+    formattedFilters as Record<string, string | undefined>
+  )[filterKey]
+  const clausesLabels = clauses.map((value) =>
+    getLabel(query.labels, filterKey, value)
+  )
+
+  if (!formattedFilter) {
+    throw new Error(`Unknown filter: ${filterKey}`)
+  }
+
+  return (
+    <>
+      {capitalize(formattedFilter)} {FILTER_OPERATIONS_DISPLAY_NAMES[operation]}{' '}
+      {formatClauses(clausesLabels)}
+    </>
+  )
+}
+
+export function plainFilterText(query: DashboardQuery, filter: Filter) {
+  return reactNodeToString(styledFilterText(query, filter))
+}
+
+function formatClauses(labels: Array<string | number>): ReactNode[] {
+  return labels.map((label, index) => (
+    <Fragment key={index}>
+      {index > 0 && ' or '}
+      <b>{label}</b>
+    </Fragment>
+  ))
+}
+
+function capitalize(str: string): string {
+  return str[0].toUpperCase() + str.slice(1)
+}
+
+function reactNodeToString(reactNode: ReactNode): string {
+  let string = ''
+  if (typeof reactNode === 'string') {
+    string = reactNode
+  } else if (typeof reactNode === 'number') {
+    string = reactNode.toString()
+  } else if (reactNode instanceof Array) {
+    reactNode.forEach(function (child) {
+      string += reactNodeToString(child)
+    })
+  } else if (isValidElement(reactNode)) {
+    string += reactNodeToString(reactNode.props.children)
+  }
+  return string
+}