feat: Add mentions instead of search (#18447)

frontend/src/layout/navigation/navigationLogic.ts

@@ -8,7 +8,7 @@ import { sceneLogic } from 'scenes/sceneLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { userLogic } from 'scenes/userLogic'
 import type { navigationLogicType } from './navigationLogicType'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/organization/membersLogic'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { Scene } from 'scenes/sceneTypes'
 

frontend/src/lib/components/ActivationSidebar/activationLogic.test.ts

@@ -1,6 +1,6 @@
 import { expectLogic } from 'kea-test-utils'
 import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/organization/membersLogic'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { navigationLogic } from '~/layout/navigation/navigationLogic'

frontend/src/lib/components/ActivationSidebar/activationLogic.ts

@@ -4,7 +4,7 @@ import { router, urlToAction } from 'kea-router'
 import api from 'lib/api'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/organization/membersLogic'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { navigationLogic } from '~/layout/navigation/navigationLogic'

frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx

@@ -8,7 +8,7 @@ import { KeyMapping, UserBasicType, PropertyDefinition } from '~/types'
 import { Owner } from 'scenes/events/Owner'
 import { dayjs } from 'lib/dayjs'
 import { Divider, DividerProps, Select } from 'antd'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/organization/membersLogic'
 import { Link } from 'lib/lemon-ui/Link'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'

frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react'
 import { useActions, useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/organization/membersLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { Field } from 'lib/forms/Field'
 import { dayjs } from 'lib/dayjs'

frontend/src/scenes/App.tsx

@@ -20,7 +20,7 @@ import { inAppPromptLogic } from 'lib/logic/inAppPrompt/inAppPromptLogic'
 import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
 import { LemonModal } from '@posthog/lemon-ui'
 import { Setup2FA } from './authentication/Setup2FA'
-import { membersLogic } from './organization/Settings/membersLogic'
+import { membersLogic } from './organization/membersLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { Navigation as Navigation3000 } from '~/layout/navigation-3000/Navigation'
 import { Prompt } from 'lib/logic/newPrompt/Prompt'

frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx

@@ -22,7 +22,7 @@ import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { LemonRow } from 'lib/lemon-ui/LemonRow'
 import { DASHBOARD_CANNOT_EDIT_MESSAGE } from '../DashboardHeader'
 import { LemonInput, LemonSelect } from '@posthog/lemon-ui'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/organization/membersLogic'
 import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 
 export function DashboardsTableContainer(): JSX.Element {

frontend/src/scenes/me/Settings/TwoFactorAuthentication.tsx

@@ -4,7 +4,7 @@ import { LemonButton, LemonModal } from '@posthog/lemon-ui'
 import { IconCheckmark, IconWarning } from 'lib/lemon-ui/icons'
 import { useState } from 'react'
 import { Setup2FA } from 'scenes/authentication/Setup2FA'
-import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { membersLogic } from 'scenes/organization/membersLogic'
 
 export function TwoFactorAuthentication(): JSX.Element {
     const { user } = useValues(userLogic)

frontend/src/scenes/notebooks/Nodes/NotebookNodeMention.tsx

@@ -0,0 +1,70 @@
+import { mergeAttributes, Node, NodeViewProps } from '@tiptap/core'
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
+import { NotebookNodeType } from '~/types'
+import clsx from 'clsx'
+import { LemonButton, ProfilePicture, Tooltip } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { membersLogic } from 'scenes/organization/membersLogic'
+
+export interface NotebookNodeMentionAttrs {
+    id?: number
+}
+
+const Component = (props: NodeViewProps): JSX.Element => {
+    const { id } = props.node.attrs as NotebookNodeMentionAttrs
+
+    const { meFirstMembers } = useValues(membersLogic)
+
+    const member = meFirstMembers.find((member) => member.user.id === id)
+
+    return (
+        <NodeViewWrapper as="span" className={clsx('NotebookMention', props.selected && 'NotebookMention--selected')}>
+            <Tooltip
+                title={
+                    <div className="p-2 flex items-center gap-2">
+                        <ProfilePicture name={member?.user.first_name} email={member?.user.email} size="xl" />
+                        <div>
+                            <div className="font-bold">{member?.user.first_name}</div>
+                            <div className="text-sm">{member?.user.email}</div>
+                        </div>
+                    </div>
+                }
+            >
+                <LemonButton size="small" noPadding type="secondary" status="primary-alt" sideIcon={null}>
+                    <span className="p-1">@{member?.user.first_name ?? '(Member)'}</span>
+                </LemonButton>
+            </Tooltip>
+        </NodeViewWrapper>
+    )
+}
+
+export const NotebookNodeMention = Node.create({
+    name: NotebookNodeType.Mention,
+    inline: true,
+    group: 'inline',
+    atom: true,
+
+    serializedText: (attrs: NotebookNodeMentionAttrs): string => {
+        // mention is not a block so `getText` does not add a separator.
+        // we need to add it manually
+        return `(member:${attrs.id})`
+    },
+
+    addAttributes() {
+        return {
+            id: { default: null },
+        }
+    },
+
+    parseHTML() {
+        return [{ tag: NotebookNodeType.Mention }]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return [NotebookNodeType.Mention, mergeAttributes(HTMLAttributes)]
+    },
+
+    addNodeView() {
+        return ReactNodeViewRenderer(Component)
+    },
+})

frontend/src/scenes/notebooks/Notebook/Editor.tsx

@@ -29,7 +29,6 @@ import { NotebookNodeImage } from '../Nodes/NotebookNodeImage'
 
 import { EditorFocusPosition, EditorRange, JSONContent, Node, textContent } from './utils'
 import { SlashCommandsExtension } from './SlashCommands'
-import { BacklinkCommandsExtension } from './BacklinkCommands'
 import { NotebookNodeEarlyAccessFeature } from '../Nodes/NotebookNodeEarlyAccessFeature'
 import { NotebookNodeSurvey } from '../Nodes/NotebookNodeSurvey'
 import { InlineMenu } from './InlineMenu'
@@ -40,6 +39,8 @@ import { NotebookNodeCohort } from '../Nodes/NotebookNodeCohort'
 import { NotebookNodePersonFeed } from '../Nodes/NotebookNodePersonFeed/NotebookNodePersonFeed'
 import { NotebookNodeProperties } from '../Nodes/NotebookNodeProperties'
 import { NotebookNodeMap } from '../Nodes/NotebookNodeMap'
+import { MentionsExtension } from './MentionsExtension'
+import { NotebookNodeMention } from '../Nodes/NotebookNodeMention'
 
 const CustomDocument = ExtensionDocument.extend({
     content: 'heading block*',
@@ -118,8 +119,9 @@ export function Editor(): JSX.Element {
             NotebookNodeSurvey,
             NotebookNodeImage,
             NotebookNodeProperties,
+            NotebookNodeMention,
             SlashCommandsExtension,
-            BacklinkCommandsExtension,
+            MentionsExtension,
             NotebookNodePersonFeed,
             NotebookNodeMap,
         ],