fix(3000): Top bar title fixes (#19291)

* Fix recording playlist's beforeUnload

* Fix missing insight derived name

* Allow saving unnamed action

* Fix EditableField autofocus

* Update query snapshots

* Update query snapshots

---------

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

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

@@ -237,6 +237,7 @@ function Here({ breadcrumb }: HereProps): JSX.Element {
                     placeholder="Unnamed"
                     compactButtons="xsmall"
                     editingIndication="underlined"
+                    autoFocus
                 />
             ) : (
                 <span>{breadcrumb.name}</span>

frontend/src/lib/components/EditableField/EditableField.tsx

@@ -1,12 +1,13 @@
 import './EditableField.scss'
 
+import { useMergeRefs } from '@floating-ui/react'
 import clsx from 'clsx'
 import { IconEdit, IconMarkdown } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { pluralize } from 'lib/utils'
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 
 export interface EditableFieldProps {
@@ -51,7 +52,7 @@ export function EditableField({
     placeholder,
     minLength,
     maxLength,
-    autoFocus = true,
+    autoFocus = false,
     multiline = false,
     markdown = false,
     compactButtons = false,
@@ -65,16 +66,30 @@ export function EditableField({
     saveButtonText = 'Save',
     notice,
 }: EditableFieldProps): JSX.Element {
-    const [localIsEditing, setLocalIsEditing] = useState(false)
+    const [localIsEditing, setLocalIsEditing] = useState(mode === 'edit')
     const [localTentativeValue, setLocalTentativeValue] = useState(value)
+    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>()
+    const previousIsEditing = useRef<boolean>()
 
     useEffect(() => {
         setLocalTentativeValue(value)
     }, [value])
+
     useEffect(() => {
         setLocalIsEditing(mode === 'edit')
     }, [mode])
 
+    useEffect(() => {
+        // We always want to focus when switching to edit mode, but can't use autoFocus, because we don't want this to
+        // happen when the component is _initially_ rendered in edit mode.
+        if (inputRef.current && previousIsEditing.current === false && localIsEditing === true) {
+            const endOfInput = inputRef.current.value.length
+            inputRef.current.setSelectionRange(endOfInput, endOfInput)
+            inputRef.current.focus()
+        }
+        previousIsEditing.current = localIsEditing
+    }, [localIsEditing])
+
     const isSaveable = !minLength || localTentativeValue.length >= minLength
 
     const mouseDownOnCancelButton = (e: React.MouseEvent): void => {
@@ -150,6 +165,7 @@ export function EditableField({
                                     minLength={minLength}
                                     maxLength={maxLength}
                                     autoFocus={autoFocus}
+                                    ref={inputRef as React.RefObject<HTMLTextAreaElement>}
                                 />
                             ) : (
                                 <AutosizeInput
@@ -165,6 +181,7 @@ export function EditableField({
                                     minLength={minLength}
                                     maxLength={maxLength}
                                     autoFocus={autoFocus}
+                                    ref={inputRef as React.RefObject<HTMLInputElement>}
                                 />
                             )}
                             {(!mode || !!onModeToggle) && (
@@ -242,17 +259,7 @@ export function EditableField({
     )
 }
 
-const AutosizeInput = ({
-    name,
-    value,
-    onChange,
-    placeholder,
-    onBlur,
-    onKeyDown,
-    minLength,
-    maxLength,
-    autoFocus,
-}: {
+interface AutosizeInputProps {
     name: string
     value: string
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
@@ -262,11 +269,18 @@ const AutosizeInput = ({
     minLength?: number
     maxLength?: number
     autoFocus?: boolean
-}): JSX.Element => {
+}
+
+const AutosizeInput = React.forwardRef<HTMLInputElement, AutosizeInputProps>(function AutosizeInput(
+    { name, value, onChange, placeholder, onBlur, onKeyDown, minLength, maxLength, autoFocus },
+    ref
+) {
     const [inputWidth, setInputWidth] = useState<number | string>(1)
-    const inputRef = useRef<HTMLInputElement>(null)
+    const [inputStyles, setInputStyles] = useState<CSSStyleDeclaration>()
     const sizerRef = useRef<HTMLDivElement>(null)
     const placeHolderSizerRef = useRef<HTMLDivElement>(null)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const mergedRefs = useMergeRefs([ref, inputRef])
 
     const copyStyles = (styles: CSSStyleDeclaration, node: HTMLDivElement): void => {
         node.style.fontSize = styles.fontSize
@@ -277,21 +291,22 @@ const AutosizeInput = ({
         node.style.textTransform = styles.textTransform
     }
 
-    const inputStyles = useMemo(() => {
-        return inputRef.current ? window.getComputedStyle(inputRef.current) : null
-    }, [inputRef.current])
-
     useLayoutEffect(() => {
-        if (inputStyles && placeHolderSizerRef.current) {
-            copyStyles(inputStyles, placeHolderSizerRef.current)
+        if (inputRef.current) {
+            setInputStyles(getComputedStyle(inputRef.current))
         }
-    }, [placeHolderSizerRef, placeHolderSizerRef])
+    }, [inputRef.current])
 
     useLayoutEffect(() => {
-        if (inputStyles && sizerRef.current) {
-            copyStyles(inputStyles, sizerRef.current)
+        if (inputStyles) {
+            if (sizerRef.current) {
+                copyStyles(inputStyles, sizerRef.current)
+            }
+            if (placeHolderSizerRef.current) {
+                copyStyles(inputStyles, placeHolderSizerRef.current)
+            }
         }
-    }, [inputStyles, sizerRef])
+    }, [inputStyles])
 
     useLayoutEffect(() => {
         if (!sizerRef.current || !placeHolderSizerRef.current) {
@@ -320,7 +335,7 @@ const AutosizeInput = ({
                 minLength={minLength}
                 maxLength={maxLength}
                 autoFocus={autoFocus}
-                ref={inputRef}
+                ref={mergedRefs}
                 /* eslint-disable-next-line react/forbid-dom-props */
                 style={{ boxSizing: 'content-box', width: `${inputWidth}px` }}
             />
@@ -332,4 +347,4 @@ const AutosizeInput = ({
             </div>
         </div>
     )
-}
+})

frontend/src/scenes/actions/actionEditLogic.tsx

@@ -69,9 +69,6 @@ export const actionEditLogic = kea<actionEditLogicType>([
     forms(({ actions, props }) => ({
         action: {
             defaults: { ...props.action } as ActionEditType,
-            errors: ({ name }) => ({
-                name: !name ? 'You need to set a name' : null,
-            }),
             submit: (action) => {
                 actions.saveAction(action)
             },

frontend/src/scenes/data-management/actions/ActionsTable.tsx

@@ -47,7 +47,7 @@ export function ActionsTable(): JSX.Element {
                 return (
                     <>
                         <Link data-attr={'action-link-' + index} to={urls.action(action.id)} className="row-name">
-                            {name || <i>Unnamed action</i>}
+                            {name || <i>Unnamed</i>}
                         </Link>
                         {action.description && (
                             <LemonMarkdown className="row-description" lowKeyHeadings>

frontend/src/scenes/insights/insightSceneLogic.tsx

@@ -9,13 +9,17 @@ import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { sceneLogic } from 'scenes/sceneLogic'
 import { Scene } from 'scenes/sceneTypes'
 import { teamLogic } from 'scenes/teamLogic'
+import { mathsLogic } from 'scenes/trends/mathsLogic'
 import { urls } from 'scenes/urls'
 
+import { cohortsModel } from '~/models/cohortsModel'
+import { groupsModel } from '~/models/groupsModel'
 import { Breadcrumb, FilterType, InsightShortId, InsightType, ItemMode } from '~/types'
 
 import { insightDataLogic } from './insightDataLogic'
 import { insightDataLogicType } from './insightDataLogicType'
 import type { insightSceneLogicType } from './insightSceneLogicType'
+import { summarizeInsight } from './summarizeInsight'
 
 export const insightSceneLogic = kea<insightSceneLogicType>([
     path(['scenes', 'insights', 'insightSceneLogic']),
@@ -85,18 +89,33 @@ export const insightSceneLogic = kea<insightSceneLogicType>([
     }),
     selectors(() => ({
         insightSelector: [(s) => [s.insightLogicRef], (insightLogicRef) => insightLogicRef?.logic.selectors.insight],
+        filtersSelector: [(s) => [s.insightLogicRef], (insightLogicRef) => insightLogicRef?.logic.selectors.filters],
         insight: [(s) => [(state, props) => s.insightSelector?.(state, props)?.(state, props)], (insight) => insight],
+        filters: [(s) => [(state, props) => s.filtersSelector?.(state, props)?.(state, props)], (filters) => filters],
         breadcrumbs: [
-            (s) => [s.insight, s.insightLogicRef],
-            (insight, insightLogicRef): Breadcrumb[] => [
+            (s) => [
+                s.insightLogicRef,
+                s.insight,
+                s.filters,
+                groupsModel.selectors.aggregationLabel,
+                cohortsModel.selectors.cohortsById,
+                mathsLogic.selectors.mathDefinitions,
+            ],
+            (insightLogicRef, insight, filters, aggregationLabel, cohortsById, mathDefinitions): Breadcrumb[] => [
                 {
                     key: Scene.SavedInsights,
                     name: 'Product analytics',
                     path: urls.savedInsights(),
                 },
                 {
                     key: insight?.short_id || 'new',
-                    name: insight?.name || insight?.derived_name || 'Unnamed',
+                    name:
+                        insight?.name ||
+                        summarizeInsight(insight?.query, filters, {
+                            aggregationLabel,
+                            cohortsById,
+                            mathDefinitions,
+                        }),
                     onRename: async (name: string) => {
                         await insightLogicRef?.logic.asyncActions.setInsightMetadata({ name })
                     },

frontend/src/scenes/insights/summarizeInsight.ts

@@ -343,15 +343,14 @@ export interface SummaryContext {
 
 export function summarizeInsight(
     query: Node | undefined | null,
-    filters: Partial<FilterType>,
+    filters: Partial<FilterType> | undefined | null,
     context: SummaryContext
 ): string {
-    const hasFilters = Object.keys(filters || {}).length > 0
     return isInsightVizNode(query)
         ? summarizeInsightQuery(query.source, context)
         : !!query && !isInsightVizNode(query)
         ? summarizeQuery(query)
-        : hasFilters
+        : filters && Object.keys(filters).length > 0
         ? summarizeInsightFilters(filters, context)
         : ''
 }

frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistSceneLogic.ts

@@ -4,6 +4,7 @@ import { actions, afterMount, connect, kea, key, listeners, path, props, reducer
 import { loaders } from 'kea-loaders'
 import { beforeUnload, router } from 'kea-router'
 import api from 'lib/api'
+import { sceneLogic } from 'scenes/sceneLogic'
 import { Scene } from 'scenes/sceneTypes'
 import {
     deletePlaylist,
@@ -30,7 +31,7 @@ export const sessionRecordingsPlaylistSceneLogic = kea<sessionRecordingsPlaylist
     props({} as SessionRecordingsPlaylistLogicProps),
     key((props) => props.shortId),
     connect({
-        values: [cohortsModel, ['cohortsById']],
+        values: [cohortsModel, ['cohortsById'], sceneLogic, ['activeScene']],
     }),
     actions({
         updatePlaylist: (properties?: Partial<SessionRecordingPlaylistType>, silent = false) => ({
@@ -126,7 +127,10 @@ export const sessionRecordingsPlaylistSceneLogic = kea<sessionRecordingsPlaylist
     })),
 
     beforeUnload(({ values, actions }) => ({
-        enabled: (newLocation) => values.hasChanges && newLocation?.pathname !== router.values.location.pathname,
+        enabled: (newLocation) =>
+            values.activeScene === Scene.ReplayPlaylist &&
+            values.hasChanges &&
+            newLocation?.pathname !== router.values.location.pathname,
         message: 'Leave playlist?\nChanges you made will be discarded.',
         onConfirm: () => {
             actions.setFilters(values.playlist?.filters || null)