chore: Clean up taxonomic filter UI (#23239)

* chore: Clean up taxonomic filter UI * Update UI snapshots for `chromium` (1) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Jun 28, 2024 · d17c3e9 · d17c3e9
1 parent 38cf761
commit d17c3e9
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 23 deletions.
diff --git a/...ots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--dark.png b/...ots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--dark.png
diff --git a/...ts__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--light.png b/...ts__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--light.png
diff --git a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
@@ -184,7 +184,7 @@ export function TaxonomicPropertyFilter({
                                 )}
                             </LemonButton>
                         </LemonDropdown>
-                        {showOperatorValueSelect ? (
+                        {showOperatorValueSelect && (
                             <OperatorValueSelect
                                 propertyDefinitions={propertyDefinitionsByType(
                                     filter?.type || PropertyDefinitionType.Event,
@@ -220,8 +220,6 @@ export function TaxonomicPropertyFilter({
                                     }
                                 }}
                             />
-                        ) : (
-                            <div />
                         )}
                     </div>
                 </div>

diff --git a/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx b/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx
@@ -206,8 +206,8 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>([
                         getIcon: getEventDefinitionIcon,
                     },
                     {
-                        name: 'Data Warehouse',
-                        searchPlaceholder: 'data warehouse table name',
+                        name: 'Data warehouse tables',
+                        searchPlaceholder: 'data warehouse tables',
                         type: TaxonomicFilterGroupType.DataWarehouse,
                         logic: dataWarehouseSceneLogic,
                         value: 'dataWarehouseTablesAndViews',
@@ -217,8 +217,8 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>([
                         getIcon: () => <IconServer />,
                     },
                     {
-                        name: 'Data Warehouse Properties',
-                        searchPlaceholder: 'data warehouse property',
+                        name: 'Data warehouse properties',
+                        searchPlaceholder: 'data warehouse properties',
                         type: TaxonomicFilterGroupType.DataWarehouseProperties,
                         options: schemaColumns,
                         getName: (col: DatabaseSchemaField) => col.name,
@@ -227,8 +227,8 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>([
                         getIcon: () => <IconServer />,
                     },
                     {
-                        name: 'Extended Person Properties',
-                        searchPlaceholder: 'person properties from tables joined on persons',
+                        name: 'Extended person properties',
+                        searchPlaceholder: 'extended person properties',
                         type: TaxonomicFilterGroupType.DataWarehousePersonProperties,
                         logic: dataWarehouseJoinsLogic,
                         value: 'columnsJoinedToPersons',
@@ -485,11 +485,11 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>([
                         getIcon: getPropertyDefinitionIcon,
                     },
                     {
-                        name: 'HogQL',
-                        searchPlaceholder: 'HogQL',
+                        name: 'HogQL expression',
+                        searchPlaceholder: null,
                         type: TaxonomicFilterGroupType.HogQLExpression,
                         render: InlineHogQLEditor,
-                        getPopoverHeader: () => 'HogQL',
+                        getPopoverHeader: () => 'HogQL expression',
                         componentProps: { metadataSource },
                     },
                     {
@@ -596,12 +596,14 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>([
                             !type.startsWith(TaxonomicFilterGroupType.GroupNamesPrefix)
                     )
                 }
-                const names = searchGroupTypes.map((type) => {
-                    const taxonomicGroup = allTaxonomicGroups.find(
-                        (tGroup) => tGroup.type == type
-                    ) as TaxonomicFilterGroup
-                    return taxonomicGroup.searchPlaceholder
-                })
+                const names = searchGroupTypes
+                    .map((type) => {
+                        const taxonomicGroup = allTaxonomicGroups.find(
+                            (tGroup) => tGroup.type == type
+                        ) as TaxonomicFilterGroup
+                        return taxonomicGroup.searchPlaceholder
+                    })
+                    .filter(Boolean)
                 return names
                     .filter((a) => !!a)
                     .map(

diff --git a/frontend/src/lib/components/TaxonomicFilter/types.ts b/frontend/src/lib/components/TaxonomicFilter/types.ts
@@ -52,7 +52,8 @@ export type TaxonomicFilterRender = (props: {
 
 export interface TaxonomicFilterGroup {
     name: string
-    searchPlaceholder: string
+    /** Null means this group is not searchable (like HogQL expressions). */
+    searchPlaceholder: string | null
     type: TaxonomicFilterGroupType
     /** Component to show instead of the usual taxonomic list. */
     render?: TaxonomicFilterRender

diff --git a/frontend/src/models/groupsModel.ts b/frontend/src/models/groupsModel.ts
@@ -80,7 +80,7 @@ export const groupsModel = kea<groupsModelType>([
                         const groupType = groupTypes.get(groupTypeIndex as GroupTypeIndex)
                         if (groupType) {
                             return {
-                                singular: groupType.name_plural || groupType.group_type,
+                                singular: groupType.name_singular || groupType.group_type,
                                 plural: groupType.name_plural || `${groupType.group_type}(s)`,
                             }
                         }

diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortField.tsx b/frontend/src/scenes/cohorts/CohortFilters/CohortField.tsx
@@ -5,6 +5,7 @@ import { useActions, useValues } from 'kea'
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { PropertyValue } from 'lib/components/PropertyFilters/components/PropertyValue'
 import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
+import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 import { TaxonomicFilterGroupType, TaxonomicFilterValue } from 'lib/components/TaxonomicFilter/types'
 import { TaxonomicPopover } from 'lib/components/TaxonomicPopover/TaxonomicPopover'
 import { dayjs } from 'lib/dayjs'
@@ -135,9 +136,13 @@ export function CohortTaxonomicField({
             groupTypes={taxonomicGroupTypes}
             placeholder={placeholder}
             data-attr={`cohort-taxonomic-field-${fieldKey}`}
-            renderValue={(value) => (
-                <span className="font-medium">{value || <span className="text-muted">{placeholder}</span>}</span>
-            )}
+            renderValue={(value) =>
+                value ? (
+                    <PropertyKeyInfo value={value as string} type={groupType} />
+                ) : (
+                    <span className="text-muted">{placeholder}</span>
+                )
+            }
         />
     )
 }