has_not_done for goals is now named is not in the UI

Author: macobo

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

@@ -76,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)
@@ -84,10 +88,6 @@ export default function FilterOperatorSelector(props) {
                     FILTER_OPERATIONS.contains_not,
                     supportsContains(filterName) && supportsIsNot(filterName)
                   )}
-                  {renderTypeItem(
-                    FILTER_OPERATIONS.has_not_done,
-                    supportsHasDoneNot(filterName)
-                  )}
                 </div>
               </Menu.Items>
             </Transition>

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

@@ -9,7 +9,7 @@ describe('styledFilterText() and plainFilterText()', () => {
     [['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']], {}, 'Has not done goal Signup or Login'],
+    [['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) => {

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

@@ -4,7 +4,6 @@ import React, { ReactNode, isValidElement, Fragment } from 'react'
 import { DashboardQuery, Filter } from '../query'
 import {
   EVENT_PROPS_PREFIX,
-  FILTER_OPERATIONS,
   FILTER_OPERATIONS_DISPLAY_NAMES,
   formattedFilters,
   getLabel,
@@ -36,24 +35,13 @@ export function styledFilterText(
     throw new Error(`Unknown filter: ${filterKey}`)
   }
 
-  if (operation === FILTER_OPERATIONS.has_not_done) {
-    // Has not done goal Visit foo
-    return (
-      <>
-        {capitalize(FILTER_OPERATIONS_DISPLAY_NAMES[operation])}{' '}
-        {formattedFilter.toLowerCase()} {formatClauses(clausesLabels)}
-      </>
-    )
-  } else {
-    // Hostname is example.com
-    return (
-      <>
-        {capitalize(formattedFilter)}{' '}
-        {FILTER_OPERATIONS_DISPLAY_NAMES[operation]}{' '}
-        {formatClauses(clausesLabels)}
-      </>
-    )
-  }
+  return (
+    <>
+      {capitalize(formattedFilter)}{' '}
+      {FILTER_OPERATIONS_DISPLAY_NAMES[operation]}{' '}
+      {formatClauses(clausesLabels)}
+    </>
+  )
 }
 
 export function plainFilterText(query: DashboardQuery, filter: Filter) {

assets/js/dashboard/util/filters.js

@@ -39,7 +39,9 @@ export const FILTER_OPERATIONS_DISPLAY_NAMES = {
   [FILTER_OPERATIONS.isNot]: 'is not',
   [FILTER_OPERATIONS.contains]: 'contains',
   [FILTER_OPERATIONS.contains_not]: 'does not contain',
-  [FILTER_OPERATIONS.has_not_done]: 'has not done'
+  // :NOTE: Goal filters are displayed as "is not" in the UI, but in the backend they are wrapped with has_not_done.
+  // It is currently unclear if we'll do the same for other event filters in the future.
+  [FILTER_OPERATIONS.has_not_done]: 'is not'
 }
 
 const OPERATION_PREFIX = {