feat(Universal-search): Search for literally anything in PostHog

ee/clickhouse/views/groups.py

@@ -62,7 +62,14 @@ class ClickhouseGroupsView(StructuredViewSetMixin, mixins.ListModelMixin, viewse
     permission_classes = [IsAuthenticated, ProjectMembershipNecessaryPermissions, TeamMemberAccessPermission]
 
     def get_queryset(self):
-        return super().get_queryset().filter(group_type_index=self.request.GET["group_type_index"])
+        return (
+            super()
+            .get_queryset()
+            .filter(
+                group_type_index=self.request.GET["group_type_index"],
+                group_key__icontains=self.request.GET.get("group_key", ""),
+            )
+        )
 
     @action(methods=["GET"], detail=False)
     def find(self, request: request.Request, **kw) -> response.Response:

frontend/src/layout/navigation/TopBar/TopBar.scss

@@ -24,6 +24,9 @@
     display: flex;
     align-items: center;
     height: 100%;
+    &--left {
+        flex-grow: 1;
+    }
     &--left > * {
         margin-right: 1rem;
     }

frontend/src/layout/navigation/TopBar/TopBar.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import { FriendlyLogo } from '../../../toolbar/assets/FriendlyLogo'
 import { SitePopover } from './SitePopover'
 import { Announcement } from './Announcement'
-import { SearchBox } from './SearchBox'
 import { navigationLogic } from '../navigationLogic'
 import { HelpButton } from '../../../lib/components/HelpButton/HelpButton'
 import { CommandPalette } from '../../../lib/components/CommandPalette'
@@ -14,6 +13,12 @@ import { IconMenu, IconMenuOpen } from '../../../lib/components/icons'
 import { CreateProjectModal } from '../../../scenes/project/CreateProjectModal'
 import './TopBar.scss'
 import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
+import { UniversalSearchPopup } from 'lib/components/UniversalSearch/UniversalSearchPopup'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { groupsModel } from '~/models/groupsModel'
+import { SearchBox } from './SearchBox'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 
 export function TopBar(): JSX.Element {
     const { isSideBarShown, bareNav, mobileLayout, isCreateOrganizationModalShown, isCreateProjectModalShown } =
@@ -22,6 +27,8 @@ export function TopBar(): JSX.Element {
         useActions(navigationLogic)
     const { isInviteModalShown } = useValues(inviteLogic)
     const { hideInviteModal } = useActions(inviteLogic)
+    const { featureFlags } = useValues(featureFlagLogic)
+    const { groupNamesTaxonomicTypes } = useValues(groupsModel)
 
     return (
         <>
@@ -39,7 +46,28 @@ export function TopBar(): JSX.Element {
                     <Link to="/" className="TopBar__logo">
                         <FriendlyLogo />
                     </Link>
-                    <SearchBox />
+
+                    {featureFlags[FEATURE_FLAGS.UNIVERSAL_SEARCH] ? (
+                        <div style={{ flexGrow: 1 }}>
+                            <UniversalSearchPopup
+                                groupType={TaxonomicFilterGroupType.Events}
+                                groupTypes={[
+                                    TaxonomicFilterGroupType.Events,
+                                    TaxonomicFilterGroupType.Persons,
+                                    TaxonomicFilterGroupType.Actions,
+                                    TaxonomicFilterGroupType.Cohorts,
+                                    TaxonomicFilterGroupType.Insights,
+                                    TaxonomicFilterGroupType.FeatureFlags,
+                                    TaxonomicFilterGroupType.Plugins,
+                                    TaxonomicFilterGroupType.Experiments,
+                                    TaxonomicFilterGroupType.Dashboards,
+                                    ...groupNamesTaxonomicTypes,
+                                ]}
+                            />
+                        </div>
+                    ) : (
+                        <SearchBox />
+                    )}
                 </div>
                 <div className="TopBar__segment TopBar__segment--right">
                     <HelpButton />

frontend/src/lib/components/Popup/Popup.tsx

@@ -25,6 +25,7 @@ export interface PopupProps {
     /** Whether the popover's width should be synced with the children's width. */
     sameWidth?: boolean
     className?: string
+    modifier?: Record<string, any>
 }
 
 /** 0 means no parent. */
@@ -44,6 +45,7 @@ export function Popup({
     className,
     actionable = false,
     sameWidth = false,
+    modifier = {},
 }: PopupProps): JSX.Element {
     const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null)
     const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
@@ -80,6 +82,7 @@ export function Popup({
                       requires: ['computeStyles'],
                   }
                 : {},
+            modifier,
         ],
         []
     )

frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx

@@ -129,8 +129,8 @@ const renderItemContents = ({
                 <PropertyKeyInfo type="element" value={item.name ?? ''} disablePopover style={{ maxWidth: '100%' }} />
             ) : (
                 <>
-                    {icon}
-                    {item.name ?? ''}
+                    {group.getIcon ? icon : null}
+                    {group.getName(item) || item.name || ''}
                 </>
             )}
         </div>

frontend/src/lib/components/TaxonomicFilter/infiniteListLogic.ts

@@ -14,6 +14,7 @@ import {
     TaxonomicFilterGroup,
 } from 'lib/components/TaxonomicFilter/types'
 import { taxonomicFilterLogic } from 'lib/components/TaxonomicFilter/taxonomicFilterLogic'
+import { featureFlagsLogic } from 'scenes/feature-flags/featureFlagsLogic'
 
 /*
  by default the pop-up starts open for the first item in the list
@@ -67,7 +68,12 @@ export const infiniteListLogic = kea<infiniteListLogicType>({
     key: (props) => `${props.taxonomicFilterLogicKey}-${props.listGroupType}`,
 
     connect: (props: InfiniteListLogicProps) => ({
-        values: [taxonomicFilterLogic(props), ['searchQuery', 'value', 'groupType', 'taxonomicGroups']],
+        values: [
+            taxonomicFilterLogic(props),
+            ['searchQuery', 'value', 'groupType', 'taxonomicGroups'],
+            featureFlagsLogic,
+            ['featureFlags'],
+        ],
         actions: [taxonomicFilterLogic(props), ['setSearchQuery', 'selectItem', 'infiniteListResultsReceived']],
     }),
 

frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx

@@ -11,7 +11,20 @@ import {
 } from 'lib/components/TaxonomicFilter/types'
 import { infiniteListLogic } from 'lib/components/TaxonomicFilter/infiniteListLogic'
 import { personPropertiesModel } from '~/models/personPropertiesModel'
-import { ActionType, CohortType, EventDefinition, PersonProperty, PropertyDefinition } from '~/types'
+import {
+    ActionType,
+    CohortType,
+    DashboardType,
+    EventDefinition,
+    Experiment,
+    FeatureFlagType,
+    Group,
+    InsightModel,
+    PersonProperty,
+    PersonType,
+    PluginType,
+    PropertyDefinition,
+} from '~/types'
 import { cohortsModel } from '~/models/cohortsModel'
 import { actionsModel } from '~/models/actionsModel'
 import { eventDefinitionsModel } from '~/models/eventDefinitionsModel'
@@ -23,6 +36,11 @@ import { combineUrl } from 'kea-router'
 import { ActionStack, CohortIcon } from 'lib/components/icons'
 import { keyMapping } from 'lib/components/PropertyKeyInfo'
 import { getEventDefinitionIcon, getPropertyDefinitionIcon } from 'scenes/data-management/events/DefinitionHeader'
+import { featureFlagsLogic } from 'scenes/feature-flags/featureFlagsLogic'
+import { experimentsLogic } from 'scenes/experiments/experimentsLogic'
+import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
+import { dashboardsModel } from '~/models/dashboardsModel'
+import { groupDisplayId } from 'scenes/persons/GroupActorHeader'
 
 export const eventTaxonomicGroupProps: Pick<TaxonomicFilterGroup, 'getPopupHeader' | 'getIcon'> = {
     getPopupHeader: (eventDefinition: EventDefinition): string => {
@@ -117,8 +135,18 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
         ],
         eventNames: [() => [(_, props) => props.eventNames], (eventNames) => eventNames ?? []],
         taxonomicGroups: [
-            (selectors) => [selectors.currentTeamId, selectors.groupAnalyticsTaxonomicGroups, selectors.eventNames],
-            (teamId, groupAnalyticsTaxonomicGroups, eventNames): TaxonomicFilterGroup[] => [
+            (selectors) => [
+                selectors.currentTeamId,
+                selectors.groupAnalyticsTaxonomicGroups,
+                selectors.groupAnalyticsTaxonomicGroupNames,
+                selectors.eventNames,
+            ],
+            (
+                teamId,
+                groupAnalyticsTaxonomicGroups,
+                groupAnalyticsTaxonomicGroupNames,
+                eventNames
+            ): TaxonomicFilterGroup[] => [
                 {
                     name: 'Events',
                     searchPlaceholder: 'events',
@@ -265,7 +293,68 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
                     getValue: (option: SimpleOption) => option.name,
                     getPopupHeader: () => `Wildcard`,
                 },
+                {
+                    name: 'Persons',
+                    searchPlaceholder: 'persons',
+                    type: TaxonomicFilterGroupType.Persons,
+                    endpoint: `api/projects/${teamId}/persons/`,
+                    getName: (person: PersonType) => person.name || 'Anon user?',
+                    getValue: (person: PersonType) => person.distinct_ids[0],
+                    getPopupHeader: () => `Person`,
+                },
+                {
+                    name: 'Insights',
+                    searchPlaceholder: 'insights',
+                    type: TaxonomicFilterGroupType.Insights,
+                    endpoint: combineUrl(`api/projects/${teamId}/insights/`, {
+                        saved: true,
+                    }).url,
+                    getName: (insight: InsightModel) => insight.name,
+                    getValue: (insight: InsightModel) => insight.short_id,
+                    getPopupHeader: () => `Insights`,
+                },
+                {
+                    name: 'Feature Flags',
+                    searchPlaceholder: 'feature flags',
+                    type: TaxonomicFilterGroupType.FeatureFlags,
+                    logic: featureFlagsLogic,
+                    value: 'featureFlags',
+                    getName: (featureFlag: FeatureFlagType) => featureFlag.key || featureFlag.name,
+                    getValue: (featureFlag: FeatureFlagType) => featureFlag.id || '',
+                    getPopupHeader: () => `Feature Flags`,
+                },
+                {
+                    name: 'Experiments',
+                    searchPlaceholder: 'experiments',
+                    type: TaxonomicFilterGroupType.Experiments,
+                    logic: experimentsLogic,
+                    value: 'experiments',
+                    getName: (experiment: Experiment) => experiment.name,
+                    getValue: (experiment: Experiment) => experiment.id,
+                    getPopupHeader: () => `Experiments`,
+                },
+                {
+                    name: 'Plugins',
+                    searchPlaceholder: 'plugins',
+                    type: TaxonomicFilterGroupType.Plugins,
+                    logic: pluginsLogic,
+                    value: 'allPossiblePlugins',
+                    getName: (plugin: Pick<PluginType, 'name' | 'url'>) => plugin.name,
+                    getValue: (plugin: Pick<PluginType, 'name' | 'url'>) => plugin.name,
+                    getPopupHeader: () => `Plugins`,
+                },
+                {
+                    name: 'Dashboards',
+                    searchPlaceholder: 'dashboards',
+                    type: TaxonomicFilterGroupType.Dashboards,
+                    logic: dashboardsModel,
+                    value: 'nameSortedDashboards',
+                    getName: (dashboard: DashboardType) => dashboard.name,
+                    getValue: (dashboard: DashboardType) => dashboard.id,
+                    getPopupHeader: () => `Dashboards`,
+                },
                 ...groupAnalyticsTaxonomicGroups,
+                ...groupAnalyticsTaxonomicGroupNames,
             ],
         ],
         activeTaxonomicGroup: [
@@ -277,13 +366,30 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
             (groupTypes, taxonomicGroups): TaxonomicFilterGroupType[] =>
                 groupTypes || taxonomicGroups.map((g) => g.type),
         ],
+        groupAnalyticsTaxonomicGroupNames: [
+            (selectors) => [selectors.groupTypes, selectors.currentTeamId, selectors.aggregationLabel],
+            (groupTypes, teamId, aggregationLabel): TaxonomicFilterGroup[] =>
+                groupTypes.map((type) => ({
+                    name: `${capitalizeFirstLetter(aggregationLabel(type.group_type_index).plural)}`,
+                    searchPlaceholder: `${aggregationLabel(type.group_type_index).plural}`,
+                    type: `${TaxonomicFilterGroupType.GroupNamesPrefix}_${type.group_type_index}` as unknown as TaxonomicFilterGroupType,
+                    endpoint: combineUrl(`api/projects/${teamId}/groups/`, {
+                        group_type_index: type.group_type_index,
+                    }).url,
+                    searchAlias: 'group_key',
+                    getPopupHeader: () => `Group Names`,
+                    getName: (group: Group) => groupDisplayId(group.group_key, group.group_properties),
+                    getValue: (group: Group) => group.group_key,
+                    groupTypeIndex: type.group_type_index,
+                })),
+        ],
         groupAnalyticsTaxonomicGroups: [
             (selectors) => [selectors.groupTypes, selectors.currentTeamId, selectors.aggregationLabel],
             (groupTypes, teamId, aggregationLabel): TaxonomicFilterGroup[] =>
                 groupTypes.map((type) => ({
                     name: `${capitalizeFirstLetter(aggregationLabel(type.group_type_index).singular)} properties`,
                     searchPlaceholder: `${aggregationLabel(type.group_type_index).singular} properties`,
-                    type: `${TaxonomicFilterGroupType.GroupsPrefix}_${type.group_type_index}` as TaxonomicFilterGroupType,
+                    type: `${TaxonomicFilterGroupType.GroupsPrefix}_${type.group_type_index}` as unknown as TaxonomicFilterGroupType,
                     logic: groupPropertiesModel,
                     value: `groupProperties_${type.group_type_index}`,
                     valuesEndpoint: (key) =>
@@ -334,7 +440,9 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
             (allTaxonomicGroups, searchGroupTypes) => {
                 if (searchGroupTypes.length > 1) {
                     searchGroupTypes = searchGroupTypes.filter(
-                        (type) => !type.startsWith(TaxonomicFilterGroupType.GroupsPrefix)
+                        (type) =>
+                            !type.startsWith(TaxonomicFilterGroupType.GroupsPrefix) &&
+                            !type.startsWith(TaxonomicFilterGroupType.GroupNamesPrefix)
                     )
                 }
                 const names = searchGroupTypes.map((type) => {

frontend/src/lib/components/TaxonomicFilter/types.ts

@@ -62,6 +62,14 @@ export enum TaxonomicFilterGroupType {
     CustomEvents = 'custom_events',
     Wildcards = 'wildcard',
     GroupsPrefix = 'groups',
+    // Types for searching
+    Persons = 'persons',
+    FeatureFlags = 'feature_flags',
+    Insights = 'insights',
+    Experiments = 'experiments',
+    Plugins = 'plugins',
+    Dashboards = 'dashboards',
+    GroupNamesPrefix = 'name_groups',
 }
 
 export interface InfiniteListLogicProps extends TaxonomicFilterLogicProps {

frontend/src/lib/components/UniversalSearch/UniversalSearch.scss

@@ -0,0 +1,51 @@
+@import '~/vars';
+
+.universal-search-box {
+    max-width: 483px;
+    cursor: pointer;
+
+    transition: 200ms ease margin;
+    .ant-input-affix-wrapper,
+    input {
+        background: var(--bg-bridge);
+    }
+
+    &.universal-search-box--sidebar-shown {
+        margin-left: 55px;
+    }
+    @media screen and (min-width: $sm) {
+        display: flex;
+    }
+}
+
+.universal-search {
+    .ant-input {
+        cursor: pointer;
+    }
+
+    .magnifier-icon {
+        font-size: 18px;
+        color: var(--text-muted);
+        &.magnifier-icon-active {
+            color: var(--primary);
+        }
+    }
+}
+
+.universal-search-popup {
+    width: 550px;
+    max-width: calc(100vw - 40px);
+    background: white;
+    display: flex;
+    flex-direction: column;
+
+    &.force-minimum-width {
+        min-width: 300px;
+    }
+
+    &.one-taxonomic-tab {
+        .taxonomic-infinite-list {
+            margin-top: 10px;
+        }
+    }
+}