diff --git a/superset-frontend/spec/fixtures/mockDashboardLayout.js b/superset-frontend/spec/fixtures/mockDashboardLayout.js index bd1f4d186..90918d388 100644 --- a/superset-frontend/spec/fixtures/mockDashboardLayout.js +++ b/superset-frontend/spec/fixtures/mockDashboardLayout.js @@ -119,6 +119,7 @@ export const dashboardLayoutWithTabs = { parents: ['ROOT_ID', 'TABS_ID'], meta: { text: 'tab1', + defaultText: 'tab1', }, }, @@ -129,6 +130,7 @@ export const dashboardLayoutWithTabs = { parents: ['ROOT_ID', 'TABS_ID'], meta: { text: 'tab2', + defaultText: 'tab2', }, }, diff --git a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Tab_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Tab_spec.jsx index a5c35543c..6fb564337 100644 --- a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Tab_spec.jsx +++ b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Tab_spec.jsx @@ -83,7 +83,7 @@ describe('Tabs', () => { const title = wrapper.find(EditableTitle); expect(title).toHaveLength(1); expect(title.find('.editable-title')).toHaveText( - props.component.meta.text, + props.component.meta.defaultText, ); }); diff --git a/superset-frontend/src/components/EditableTitle.tsx b/superset-frontend/src/components/EditableTitle.tsx index 024879358..3a3537009 100644 --- a/superset-frontend/src/components/EditableTitle.tsx +++ b/superset-frontend/src/components/EditableTitle.tsx @@ -23,6 +23,7 @@ import { Tooltip } from 'src/common/components/Tooltip'; interface EditableTitleProps { canEdit?: boolean; + editing?: boolean; emptyText?: string; extraClasses?: Array | string; multiLine?: boolean; @@ -30,21 +31,25 @@ interface EditableTitleProps { onSaveTitle: (arg0: string) => {}; showTooltip?: boolean; style?: object; - title: string; + title?: string; + defaultTitle?: string; + placeholder?: string; } export default function EditableTitle({ canEdit = false, - emptyText, + editing = false, extraClasses, multiLine = false, noPermitTooltip, onSaveTitle, showTooltip = true, style, - title, + title = '', + defaultTitle = '', + placeholder = '', }: EditableTitleProps) { - const [isEditing, setIsEditing] = useState(false); + const [isEditing, setIsEditing] = useState(editing); const [currentTitle, setCurrentTitle] = useState(title); const [lastTitle, setLastTitle] = useState(title); const [ @@ -62,6 +67,12 @@ export default function EditableTitle({ } }, [title]); + useEffect(() => { + if (isEditing) { + contentRef.current.focus(); + } + }, [isEditing]); + function handleClick() { if (!canEdit || isEditing) { return; @@ -110,6 +121,10 @@ export default function EditableTitle({ if (event.key === ' ') { event.stopPropagation(); } + if (event.key === 'Enter') { + event.preventDefault(); + handleBlur(); + } } function handleChange(ev: any) { @@ -127,10 +142,9 @@ export default function EditableTitle({ } let value: string | undefined; - if (currentTitle) { - value = currentTitle; - } else if (!isEditing) { - value = emptyText; + value = currentTitle; + if (!isEditing && !currentTitle) { + value = defaultTitle || title; } // Construct an inline style based on previously-saved height of the rendered label. Only @@ -147,7 +161,6 @@ export default function EditableTitle({