Skip to content

Commit

Permalink
feat: add notebooks to universal search (#17398)
Browse files Browse the repository at this point in the history 
* feat: add notebooks to universal search
  • Loading branch information
@daibhin
daibhin authored Sep 13, 2023
1 parent ceb38ba commit ab0e989
Show file tree
Hide file tree
Showing 10 changed files with 86 additions and 32 deletions.
Binary file modified ...napshots__/scenes-app-recordings--recordings-play-list-no-pinned-recordings.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 22 additions & 16 deletions frontend/src/layout/navigation/TopBar/TopBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,26 @@ export function TopBar(): JSX.Element {
const { hideInviteModal } = useActions(inviteLogic)
const { groupNamesTaxonomicTypes } = useValues(groupsModel)
const { featureFlags } = useValues(featureFlagLogic)

const hasNotebooks = !!featureFlags[FEATURE_FLAGS.NOTEBOOKS]

const groupTypes = [
TaxonomicFilterGroupType.Events,
TaxonomicFilterGroupType.Persons,
TaxonomicFilterGroupType.Actions,
TaxonomicFilterGroupType.Cohorts,
TaxonomicFilterGroupType.Insights,
TaxonomicFilterGroupType.FeatureFlags,
TaxonomicFilterGroupType.Plugins,
TaxonomicFilterGroupType.Experiments,
TaxonomicFilterGroupType.Dashboards,
...groupNamesTaxonomicTypes,
]

if (hasNotebooks) {
groupTypes.push(TaxonomicFilterGroupType.Notebooks)
}

return (
<>
<Announcement />
Expand All @@ -48,26 +68,12 @@ export function TopBar(): JSX.Element {
</Link>

<div className="grow">
<UniversalSearchPopover
groupType={TaxonomicFilterGroupType.Events}
groupTypes={[
TaxonomicFilterGroupType.Events,
TaxonomicFilterGroupType.Persons,
TaxonomicFilterGroupType.Actions,
TaxonomicFilterGroupType.Cohorts,
TaxonomicFilterGroupType.Insights,
TaxonomicFilterGroupType.FeatureFlags,
TaxonomicFilterGroupType.Plugins,
TaxonomicFilterGroupType.Experiments,
TaxonomicFilterGroupType.Dashboards,
...groupNamesTaxonomicTypes,
]}
/>
<UniversalSearchPopover groupType={TaxonomicFilterGroupType.Events} groupTypes={groupTypes} />
</div>
<ActivationSidebarToggle />
</div>
<div className="TopBar__segment TopBar__segment--right">
{!!featureFlags[FEATURE_FLAGS.NOTEBOOKS] && <NotebookButton />}
{hasNotebooks && <NotebookButton />}
<NotificationBell />
<HelpButton />
<SitePopover />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1348,7 +1348,7 @@ const api = {
q = { ...q, created_by: createdBy }
}
if (search) {
q = { ...q, s: search }
q = { ...q, search: search }
}
return await apiRequest.withQueryString(q).get()
},
Expand Down
33 changes: 27 additions & 6 deletions frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
PersonType,
PluginType,
PropertyDefinition,
NotebookType,
} from '~/types'
import { cohortsModel } from '~/models/cohortsModel'
import { actionsModel } from '~/models/actionsModel'
Expand All @@ -42,6 +43,7 @@ import { groupDisplayId } from 'scenes/persons/GroupActorDisplay'
import { infiniteListLogicType } from 'lib/components/TaxonomicFilter/infiniteListLogicType'
import { updatePropertyDefinitions } from '~/models/propertyDefinitionsModel'
import { InlineHogQLEditor } from './InlineHogQLEditor'
import { FEATURE_FLAGS } from 'lib/constants'

export const eventTaxonomicGroupProps: Pick<TaxonomicFilterGroup, 'getPopoverHeader' | 'getIcon'> = {
getPopoverHeader: (eventDefinition: EventDefinition): string => {
Expand Down Expand Up @@ -77,6 +79,8 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
['groupTypes', 'aggregationLabel'],
groupPropertiesModel,
['allGroupProperties'],
featureFlagsLogic,
['featureFlags'],
],
},
actions: () => ({
Expand Down Expand Up @@ -146,15 +150,17 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
s.groupAnalyticsTaxonomicGroupNames,
s.eventNames,
s.excludedProperties,
s.featureFlags,
],
(
teamId,
groupAnalyticsTaxonomicGroups,
groupAnalyticsTaxonomicGroupNames,
eventNames,
excludedProperties
excludedProperties,
featureFlags
): TaxonomicFilterGroup[] => {
return [
const groups = [
{
name: 'Events',
searchPlaceholder: 'events',
Expand Down Expand Up @@ -209,7 +215,7 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
filter_by_event_names: true,
}).url
: undefined,
expandLabel: ({ count, expandedCount }) =>
expandLabel: ({ count, expandedCount }: { count: number; expandedCount: number }) =>
`Show ${pluralize(expandedCount - count, 'property', 'properties')} that ${pluralize(
eventNames.length,
'has',
Expand Down Expand Up @@ -237,7 +243,7 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
filter_by_event_names: true,
}).url
: undefined,
expandLabel: ({ count, expandedCount }) =>
expandLabel: ({ count, expandedCount }: { count: number; expandedCount: number }) =>
`Show ${pluralize(expandedCount - count, 'property', 'properties')} that ${pluralize(
eventNames.length,
'has',
Expand Down Expand Up @@ -408,8 +414,8 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
value: '$session_duration',
},
],
getName: (option) => option.name,
getValue: (option) => option.value,
getName: (option: any) => option.name,
getValue: (option: any) => option.value,
getPopoverHeader: () => 'Session',
},
{
Expand All @@ -422,6 +428,21 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
...groupAnalyticsTaxonomicGroups,
...groupAnalyticsTaxonomicGroupNames,
]

if (featureFlags[FEATURE_FLAGS.NOTEBOOKS]) {
groups.push({
name: 'Notebooks',
searchPlaceholder: 'notebooks',
type: TaxonomicFilterGroupType.Notebooks,
value: 'notebooks',
endpoint: `api/projects/${teamId}/notebooks/`,
getName: (notebook: NotebookType) => notebook.title || `Notebook ${notebook.short_id}`,
getValue: (notebook: NotebookType) => notebook.short_id,
getPopoverHeader: () => 'Notebooks',
})
}

return groups
},
],
activeTaxonomicGroup: [
Expand Down
1 change: 1 addition & 0 deletions frontend/src/lib/components/TaxonomicFilter/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export enum TaxonomicFilterGroupType {
GroupNamesPrefix = 'name_groups',
Sessions = 'sessions',
HogQLExpression = 'hogql_expression',
Notebooks = 'notebooks',
}

export interface InfiniteListLogicProps extends TaxonomicFilterLogicProps {
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/lib/components/UniversalSearch/UniversalSearchPopover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,8 @@ function redirectOnSelectItems(
)
} else if (groupType === TaxonomicFilterGroupType.Dashboards) {
router.actions.push(urls.dashboard(value))
} else if (groupType === TaxonomicFilterGroupType.Notebooks) {
router.actions.push(urls.notebook(String(value)))
}
}

Expand Down
24 changes: 23 additions & 1 deletion frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,16 @@ import { mergeAttributes, Node, NodeViewProps } from '@tiptap/core'
import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
import { InsightModel, NotebookNodeType, NotebookTarget } from '~/types'
import { Link } from '@posthog/lemon-ui'
import { IconGauge, IconBarChart, IconFlag, IconExperiment, IconLive, IconPerson, IconCohort } from 'lib/lemon-ui/icons'
import {
IconGauge,
IconBarChart,
IconFlag,
IconExperiment,
IconLive,
IconPerson,
IconCohort,
IconJournal,
} from 'lib/lemon-ui/icons'
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { urls } from 'scenes/urls'
import clsx from 'clsx'
Expand All @@ -22,6 +31,7 @@ const ICON_MAP = {
events: <IconLive width="1em" height="1em" />,
persons: <IconPerson />,
cohorts: <IconCohort />,
notebooks: <IconJournal />,
}

const Component = (props: NodeViewProps): JSX.Element => {
Expand Down Expand Up @@ -67,6 +77,8 @@ function backlinkHref(id: string, type: TaxonomicFilterGroupType): string {
return urls.experiment(id)
} else if (type === TaxonomicFilterGroupType.Dashboards) {
return urls.dashboard(id)
} else if (type === TaxonomicFilterGroupType.Notebooks) {
return urls.notebook(id)
}
return ''
}
Expand Down Expand Up @@ -139,6 +151,16 @@ export const NotebookNodeBacklink = Node.create({
return { id: id, type: TaxonomicFilterGroupType.Dashboards, title: dashboard.name }
},
}),
posthogNodePasteRule({
find: urls.notebook('(.+)'),
editor: this.editor,
type: this.type,
getAttributes: async (match) => {
const id = match[1]
const notebook = await api.notebooks.get(id)
return { id: id, type: TaxonomicFilterGroupType.Notebooks, title: notebook.title }
},
}),
]
},
})
12 changes: 7 additions & 5 deletions frontend/src/scenes/notebooks/Notebook/BacklinkCommands.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { PluginKey } from '@tiptap/pm/state'
import { Popover } from 'lib/lemon-ui/Popover'
import { forwardRef } from 'react'
import {
TaxonomicDefinitionTypes,
TaxonomicFilterGroup,
TaxonomicFilterGroupType,
TaxonomicFilterLogicProps,
Expand Down Expand Up @@ -41,18 +42,18 @@ const BacklinkCommands = forwardRef<ReactRenderer, BacklinkCommandsProps>(functi
const { editor } = useValues(notebookLogic)

const onSelect = (
{ type }: TaxonomicFilterGroup,
group: TaxonomicFilterGroup,
value: TaxonomicFilterValue,
{ id, name }: { id: number; name: string }
item: TaxonomicDefinitionTypes
): void => {
if (!editor) {
return
}

const attrs = {
id: type === TaxonomicFilterGroupType.Events ? id : value,
title: name,
type: type,
id: group.type === TaxonomicFilterGroupType.Events ? item.id : value,
title: group.getName?.(item),
type: group.type,
}

editor
Expand Down Expand Up @@ -81,6 +82,7 @@ const BacklinkCommands = forwardRef<ReactRenderer, BacklinkCommandsProps>(functi
TaxonomicFilterGroupType.FeatureFlags,
TaxonomicFilterGroupType.Experiments,
TaxonomicFilterGroupType.Dashboards,
TaxonomicFilterGroupType.Notebooks,
],
optionsFromProp: undefined,
popoverEnabled: true,
Expand Down
4 changes: 2 additions & 2 deletions posthog/api/notebook.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,8 +250,8 @@ def _filter_request(self, request: request.Request, queryset: QuerySet) -> Query
queryset = queryset.filter(
last_modified_at__lt=relative_date_parse(request.GET["date_to"], self.team.timezone_info)
)
elif key == "s":
queryset = queryset.filter(title__icontains=request.GET["s"])
elif key == "search":
queryset = queryset.filter(title__icontains=request.GET["search"])
elif key == "contains":
contains = request.GET["contains"]
match_pairs = contains.replace(",", " ").split(" ")
Expand Down
2 changes: 1 addition & 1 deletion posthog/api/test/notebooks/test_notebook_filtering.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ def test_filters_based_on_title(self, search_text: str, expected_match_indexes:
]

response = self.client.get(
f"/api/projects/{self.team.id}/notebooks?s={search_text}",
f"/api/projects/{self.team.id}/notebooks?search={search_text}",
)
assert response.status_code == status.HTTP_200_OK

Expand Down

0 comments on commit ab0e989

Please sign in to comment.