feat(3000): Allow renaming the current item from the top bar (#18709)

* Allow renaming items via breadcrumbs

* Support 3000 renames in insights, dashboards, and notebooks

* Make all breadcrumbs keyed

* Cancel renaming on navigation away

* Fix EditableField mode sync

* Clarify things a bit

* Restore tuned line height

* Tune insight metadata tags margin

* Add missing breadcrumb keys

* Fix unexpected promises

* Fix dashboard tags margin

It was using a class only defined in `Insight.scss`, so the class didn't actually work in dashboards.

* Fix remaining merge conflict

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Fix a double breadcrumb

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/layout/navigation-3000/components/Breadcrumbs.scss

@@ -29,29 +29,36 @@
     pointer-events: auto;
 }
 
-.Breadcrumbs3000__crumbs {
-    display: flex;
-    align-items: center;
-}
-
 .Breadcrumbs3000__trail {
     flex-grow: 1;
     flex-shrink: 1;
-    overflow-x: auto;
+    min-width: 0;
+}
+
+.Breadcrumbs3000__crumbs {
+    height: 1rem;
+    margin-top: 0.25rem;
+    display: flex;
+    align-items: center;
+    overflow: visible;
 }
 
 .Breadcrumbs3000__here {
+    visibility: var(--breadcrumbs-title-large-visibility);
     position: relative;
     line-height: 1.2;
-    margin: calc(0.25rem * (1 - var(--breadcrumbs-compaction-rate))) 0 0;
+    margin: 0;
+    padding: calc(0.5rem * (1 - var(--breadcrumbs-compaction-rate))) 0 0;
     font-size: 1rem;
     font-weight: 700;
     overflow: hidden;
-    height: calc(1em * 1.2 * (1 - var(--breadcrumbs-compaction-rate)));
+    height: calc(1.2em * (1 - var(--breadcrumbs-compaction-rate)));
+    box-sizing: content-box;
 
-    > span {
+    > * {
         position: absolute;
-        bottom: 0;
+        bottom: 0.25rem;
+        height: 1.2em;
     }
 }
 
@@ -69,9 +76,10 @@
     }
 
     &.Breadcrumbs3000__breadcrumb--here {
+        visibility: var(--breadcrumbs-title-small-visibility);
         cursor: default;
 
-        > span {
+        > * {
             opacity: 1;
             transform: translateY(calc(100% * (1 - var(--breadcrumbs-compaction-rate))));
         }

frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx

@@ -1,13 +1,14 @@
-import React, { useEffect, useState } from 'react'
+import React, { useLayoutEffect, useState } from 'react'
 import { useActions, useValues } from 'kea'
 import { IconArrowDropDown } from 'lib/lemon-ui/icons'
 import { Link } from 'lib/lemon-ui/Link'
 import './Breadcrumbs.scss'
-import { Breadcrumb as IBreadcrumb } from '~/types'
+import { FinalizedBreadcrumb } from '~/types'
 import clsx from 'clsx'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
 import { breadcrumbsLogic } from '~/layout/navigation/Breadcrumbs/breadcrumbsLogic'
 import { LemonSkeleton } from '@posthog/lemon-ui'
+import { EditableField } from 'lib/components/EditableField/EditableField'
 
 const COMPACTION_DISTANCE = 44
 
@@ -17,27 +18,47 @@ const COMPACTION_DISTANCE = 44
  * - The "Quick scene actions" buttons (zero or more buttons on the right)
  */
 export function Breadcrumbs(): JSX.Element | null {
-    const { breadcrumbs } = useValues(breadcrumbsLogic)
+    const { breadcrumbs, renameState } = useValues(breadcrumbsLogic)
     const { setActionsContainer } = useActions(breadcrumbsLogic)
 
     const [compactionRate, setCompactionRate] = useState(0)
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         function handleScroll(): void {
             const scrollTop = document.getElementsByTagName('main')[0].scrollTop
-            setCompactionRate(Math.min(scrollTop / COMPACTION_DISTANCE, 1))
+            const newCompactionRate = Math.min(scrollTop / COMPACTION_DISTANCE, 1)
+            setCompactionRate(newCompactionRate)
+            if (
+                renameState &&
+                ((newCompactionRate > 0.5 && compactionRate <= 0.5) ||
+                    (newCompactionRate <= 0.5 && compactionRate > 0.5))
+            ) {
+                // Transfer selection from the outgoing input to the incoming one
+                const [source, target] = newCompactionRate > 0.5 ? ['large', 'small'] : ['small', 'large']
+                const sourceEl = document.querySelector<HTMLInputElement>(`input[name="item-name-${source}"]`)
+                const targetEl = document.querySelector<HTMLInputElement>(`input[name="item-name-${target}"]`)
+                if (sourceEl && targetEl) {
+                    targetEl.focus()
+                    targetEl.setSelectionRange(sourceEl.selectionStart || 0, sourceEl.selectionEnd || 0)
+                }
+            }
         }
         const main = document.getElementsByTagName('main')[0]
         main.addEventListener('scroll', handleScroll)
         return () => main.removeEventListener('scroll', handleScroll)
-    }, [])
+    }, [compactionRate])
 
     return breadcrumbs.length ? (
         <div
             className="Breadcrumbs3000"
+            // eslint-disable-next-line react/forbid-dom-props
             style={
                 {
                     '--breadcrumbs-compaction-rate': compactionRate,
+                    // It wouldn't be necessary to set visibility, but for some reason without this positioning
+                    // of breadcrumbs becomes borked when entering title editing mode
+                    '--breadcrumbs-title-large-visibility': compactionRate === 1 ? 'hidden' : 'visible',
+                    '--breadcrumbs-title-small-visibility': compactionRate === 0 ? 'hidden' : 'visible',
                 } as React.CSSProperties
             }
         >
@@ -65,14 +86,43 @@ export function Breadcrumbs(): JSX.Element | null {
 }
 
 interface BreadcrumbProps {
-    breadcrumb: IBreadcrumb
+    breadcrumb: FinalizedBreadcrumb
     index: number
     here?: boolean
 }
 
 function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
+    const { renameState } = useValues(breadcrumbsLogic)
+    const { tentativelyRename, finishRenaming } = useActions(breadcrumbsLogic)
     const [popoverShown, setPopoverShown] = useState(false)
 
+    let nameElement: JSX.Element
+    if (breadcrumb.name != null && breadcrumb.onRename) {
+        nameElement = (
+            <EditableField
+                name="item-name-small"
+                value={renameState && renameState[0] === breadcrumb.globalKey ? renameState[1] : breadcrumb.name}
+                onChange={(newName) => tentativelyRename(breadcrumb.globalKey, newName)}
+                onSave={(newName) => {
+                    void breadcrumb.onRename?.(newName)
+                }}
+                mode={renameState && renameState[0] === breadcrumb.globalKey ? 'edit' : 'view'}
+                onModeToggle={(newMode) => {
+                    if (newMode === 'edit') {
+                        tentativelyRename(breadcrumb.globalKey, breadcrumb.name as string)
+                    } else {
+                        finishRenaming()
+                    }
+                    setPopoverShown(false)
+                }}
+                compactButtons="xsmall"
+                editingIndication="underlined"
+            />
+        )
+    } else {
+        nameElement = <span>{breadcrumb.name}</span>
+    }
+
     const Component = breadcrumb.path ? Link : 'div'
     const breadcrumbContent = (
         <Component
@@ -88,7 +138,7 @@ function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
             data-attr={`breadcrumb-${index}`}
             to={breadcrumb.path}
         >
-            <span>{breadcrumb.name}</span>
+            {nameElement}
             {breadcrumb.popover && <IconArrowDropDown />}
         </Component>
     )
@@ -118,13 +168,39 @@ function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
 }
 
 interface HereProps {
-    breadcrumb: IBreadcrumb
+    breadcrumb: FinalizedBreadcrumb
 }
 
 function Here({ breadcrumb }: HereProps): JSX.Element {
+    const { renameState } = useValues(breadcrumbsLogic)
+    const { tentativelyRename, finishRenaming } = useActions(breadcrumbsLogic)
+
     return (
         <h1 className="Breadcrumbs3000__here">
-            <span>{breadcrumb.name || <LemonSkeleton className="w-40 h-4" />}</span>
+            {breadcrumb.name == null ? (
+                <LemonSkeleton className="w-40 h-4" />
+            ) : breadcrumb.onRename ? (
+                <EditableField
+                    name="item-name-large"
+                    value={renameState && renameState[0] === breadcrumb.globalKey ? renameState[1] : breadcrumb.name}
+                    onChange={(newName) => tentativelyRename(breadcrumb.globalKey, newName)}
+                    onSave={(newName) => {
+                        void breadcrumb.onRename?.(newName)
+                    }}
+                    mode={renameState && renameState[0] === breadcrumb.globalKey ? 'edit' : 'view'}
+                    onModeToggle={(newMode) => {
+                        if (newMode === 'edit') {
+                            tentativelyRename(breadcrumb.globalKey, breadcrumb.name as string)
+                        } else {
+                            finishRenaming()
+                        }
+                    }}
+                    compactButtons="xsmall"
+                    editingIndication="underlined"
+                />
+            ) : (
+                <span>{breadcrumb.name}</span>
+            )}
         </h1>
     )
 }

frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx

@@ -1,4 +1,4 @@
-import { actions, connect, kea, path, props, reducers, selectors } from 'kea'
+import { actions, connect, kea, listeners, path, props, reducers, selectors } from 'kea'
 import { organizationLogic } from 'scenes/organizationLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import './Breadcrumbs.scss'
@@ -11,7 +11,7 @@ import { Lettermark } from 'lib/lemon-ui/Lettermark'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { ProjectSwitcherOverlay } from '~/layout/navigation/ProjectSwitcher'
 import { OrganizationSwitcherOverlay } from '~/layout/navigation/OrganizationSwitcher'
-import { Breadcrumb } from '~/types'
+import { Breadcrumb, FinalizedBreadcrumb } from '~/types'
 import { subscriptions } from 'kea-subscriptions'
 
 export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
@@ -37,6 +37,11 @@ export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
     })),
     actions({
         setActionsContainer: (element: HTMLElement | null) => ({ element }),
+        tentativelyRename: (breadcrumbGlobalKey: string, tentativeName: string) => ({
+            breadcrumbGlobalKey,
+            tentativeName,
+        }),
+        finishRenaming: true,
     }),
     reducers({
         actionsContainer: [
@@ -45,7 +50,17 @@ export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
                 setActionsContainer: (_, { element }) => element,
             },
         ],
+        renameState: [
+            null as [breadcrumbGlobalKey: string, tentativeName: string] | null,
+            {
+                tentativelyRename: (_, { breadcrumbGlobalKey, tentativeName }) => [breadcrumbGlobalKey, tentativeName],
+                finishRenaming: () => null,
+            },
+        ],
     }),
+    listeners(({ actions }) => ({
+        [sceneLogic.actionTypes.loadScene]: () => actions.finishRenaming(), // Cancel renaming on navigation away
+    })),
     selectors(() => ({
         sceneBreadcrumbs: [
             (s) => [
@@ -94,6 +109,7 @@ export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
                         return breadcrumbs
                     }
                     breadcrumbs.push({
+                        key: 'me',
                         name: user.first_name,
                         symbol: <ProfilePicture name={user.first_name} email={user.email} size="md" />,
                     })
@@ -104,6 +120,7 @@ export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
                         return breadcrumbs
                     }
                     breadcrumbs.push({
+                        key: 'instance',
                         name: stripHTTP(preflight.site_url),
                         symbol: <Lettermark name="@" />,
                     })
@@ -114,6 +131,7 @@ export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
                         return breadcrumbs
                     }
                     breadcrumbs.push({
+                        key: 'organization',
                         name: currentOrganization.name,
                         symbol: <Lettermark name={currentOrganization.name} />,
                         popover:
@@ -131,6 +149,7 @@ export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
                         return breadcrumbs
                     }
                     breadcrumbs.push({
+                        key: 'project',
                         name: currentTeam.name,
                         popover: {
                             overlay: <ProjectSwitcherOverlay />,
@@ -144,8 +163,24 @@ export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
         ],
         breadcrumbs: [
             (s) => [s.appBreadcrumbs, s.sceneBreadcrumbs],
-            (appBreadcrumbs, sceneBreadcrumbs) => {
-                return [...appBreadcrumbs, ...sceneBreadcrumbs]
+            (appBreadcrumbs, sceneBreadcrumbs): FinalizedBreadcrumb[] => {
+                const breadcrumbs = Array<FinalizedBreadcrumb>(appBreadcrumbs.length + sceneBreadcrumbs.length)
+                const globalPathSoFar: string[] = []
+                for (let i = 0; i < appBreadcrumbs.length; i++) {
+                    globalPathSoFar.push(String(appBreadcrumbs[i].key))
+                    breadcrumbs[i] = {
+                        ...appBreadcrumbs[i],
+                        globalKey: globalPathSoFar.join('.'),
+                    }
+                }
+                for (let i = 0; i < sceneBreadcrumbs.length; i++) {
+                    globalPathSoFar.push(String(sceneBreadcrumbs[i].key))
+                    breadcrumbs[i + appBreadcrumbs.length] = {
+                        ...sceneBreadcrumbs[i],
+                        globalKey: globalPathSoFar.join('.'),
+                    }
+                }
+                return breadcrumbs
             },
         ],
         firstBreadcrumb: [(s) => [s.breadcrumbs], (breadcrumbs) => breadcrumbs[0]],

frontend/src/lib/api.ts

@@ -1451,7 +1451,7 @@ const api = {
         },
         async update(
             notebookId: NotebookType['short_id'],
-            data: Pick<NotebookType, 'version' | 'content' | 'text_content' | 'title'>
+            data: Partial<Pick<NotebookType, 'version' | 'content' | 'text_content' | 'title'>>
         ): Promise<NotebookType> {
             return await new ApiRequest().notebook(notebookId).update({ data })
         },

frontend/src/lib/components/EditableField/EditableField.scss

@@ -4,7 +4,7 @@
     max-width: 100%;
 
     &:not(.EditableField--multiline) {
-        line-height: 2rem;
+        line-height: 1.15em;
     }
 
     i {
@@ -23,14 +23,13 @@
         align-items: center;
         width: fit-content;
         max-width: calc(100% + 0.5rem);
-        min-height: 2rem;
         padding: 0.25rem; // Some padding to give the focus outline more breathing space
         margin: -0.25rem;
         white-space: pre-wrap;
         overflow: auto;
     }
 
-    &--editing .EditableField__highlight {
+    &.EditableField--editing .EditableField__highlight {
         flex-grow: 1;
         align-items: flex-end;
         width: auto;
@@ -39,6 +38,23 @@
         border-radius: var(--radius);
     }
 
+    &.EditableField--underlined {
+        .EditableField__highlight {
+            padding: 0;
+            margin: 0;
+        }
+
+        &.EditableField--editing .EditableField__highlight {
+            outline: none;
+
+            input {
+                text-decoration: underline;
+                text-decoration-color: var(--muted);
+                text-underline-offset: 0.5em;
+            }
+        }
+    }
+
     .EditableField__autosize {
         align-self: center;
         min-width: 0;