diff --git a/frontend/src/metabase/core/components/EditableText/EditableText.tsx b/frontend/src/metabase/core/components/EditableText/EditableText.tsx index 4e50c84462d2ff52786ef2bb5fcd1c14911e6ae5..8193edfd85fe317f105a72e89abe3aad90d5cc25 100644 --- a/frontend/src/metabase/core/components/EditableText/EditableText.tsx +++ b/frontend/src/metabase/core/components/EditableText/EditableText.tsx @@ -17,6 +17,7 @@ export type EditableTextAttributes = Omit< export interface EditableTextProps extends EditableTextAttributes { initialValue?: string | null; placeholder?: string; + isOptional?: boolean; isMultiline?: boolean; onChange?: (value: string) => void; "data-testid"?: string; @@ -26,6 +27,7 @@ const EditableText = forwardRef(function EditableText( { initialValue, placeholder, + isOptional = false, isMultiline = false, onChange, "data-testid": dataTestId, @@ -35,13 +37,16 @@ const EditableText = forwardRef(function EditableText( ) { const [inputValue, setInputValue] = useState(initialValue ?? ""); const [submitValue, setSubmitValue] = useState(initialValue ?? ""); + const displayValue = inputValue ? inputValue : placeholder; const handleBlur = useCallback(() => { - if (inputValue !== submitValue) { + if (!isOptional && !inputValue) { + setInputValue(submitValue); + } else if (inputValue !== submitValue) { setSubmitValue(inputValue); onChange?.(inputValue); } - }, [inputValue, submitValue, onChange]); + }, [inputValue, submitValue, isOptional, onChange]); const handleChange = useCallback( (event: ChangeEvent<HTMLTextAreaElement>) => { @@ -63,7 +68,7 @@ const EditableText = forwardRef(function EditableText( ); return ( - <EditableTextRoot {...props} ref={ref} data-value={`${inputValue}\u00A0`}> + <EditableTextRoot {...props} ref={ref} data-value={`${displayValue}\u00A0`}> <EditableTextArea value={inputValue} placeholder={placeholder} diff --git a/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx b/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx index de09c06a770d81a0c5d16855b47def5801032fec..f6e3032836f3f0a2effde14d89997ebd208fb3bb 100644 --- a/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx +++ b/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx @@ -192,11 +192,8 @@ function SavedQuestionLeftSide(props) { const onHeaderChange = useCallback( name => { - if (name !== question.displayName()) { - onSave({ - ...question.card(), - name, - }); + if (name && name !== question.displayName()) { + onSave(question.setDisplayName(name).card()); } }, [question, onSave], diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar.tsx index dca8218cf438910ab007ef7ae0c3adb11ce00e6b..ccbb0f38046c582bb62bb498ce9f0646eeca458c 100644 --- a/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar.tsx +++ b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar.tsx @@ -51,6 +51,7 @@ export const QuestionInfoSidebar = ({ <EditableText initialValue={description} placeholder={t`Description`} + isOptional isMultiline onChange={handleSave} />