diff --git a/catalog/app/containers/Admin/Buckets/Buckets.tsx b/catalog/app/containers/Admin/Buckets/Buckets.tsx index 0a05ba177be..a0a75bcede5 100644 --- a/catalog/app/containers/Admin/Buckets/Buckets.tsx +++ b/catalog/app/containers/Admin/Buckets/Buckets.tsx @@ -1446,19 +1446,37 @@ function LongQueryConfigCard({ onEdit, tabulatorTables, }: LongQueryConfigCardProps) { + const [dirtyCounter, setDirtyCounter] = React.useState(0) + const onFormSpy = React.useCallback(({ dirty, modified }) => { + setDirtyCounter((c) => { + if (Object.values(modified).every((v) => !v)) return c + return dirty ? c + 1 : Math.max(c - 1, 0) + }) + }, []) + const handleEdit = React.useCallback( + (e) => { + if (!e && !!dirtyCounter) { + // eslint-disable-next-line no-alert + if (!window.confirm('You have unsaved changes. Discard them?')) return + } + onEdit(e) + }, + [dirtyCounter, onEdit], + ) return ( onEdit(false)} + onClose={() => handleEdit(false)} tabulatorTables={tabulatorTables} + onFormSpy={onFormSpy} /> } editing={editing} className={className} disabled={disabled} - onEdit={onEdit} + onEdit={handleEdit} icon="query_builder" title={ tabulatorTables.length diff --git a/catalog/app/containers/Admin/Buckets/LongQueryConfig.tsx b/catalog/app/containers/Admin/Buckets/LongQueryConfig.tsx index 49376516d28..6f8b68b152f 100644 --- a/catalog/app/containers/Admin/Buckets/LongQueryConfig.tsx +++ b/catalog/app/containers/Admin/Buckets/LongQueryConfig.tsx @@ -146,6 +146,7 @@ interface LongQueryConfigFormProps { bucketName: string className: string onEdited?: () => void + onFormSpy: (state: FF.FormState) => void } interface AddNew extends LongQueryConfigFormProps { @@ -164,6 +165,7 @@ function LongQueryConfigForm({ bucketName, className, onClose, + onFormSpy, onEdited, tabulatorTable, isLast, @@ -258,6 +260,10 @@ function LongQueryConfigForm({ submitError, }) => (
+ {confirm.render(<>)}
void + onFormSpy: (state: FF.FormState) => void } -export default function Configs({ bucket, onClose, tabulatorTables }: ConfigsProps) { +export default function Configs({ + bucket, + onClose, + onFormSpy, + tabulatorTables, +}: ConfigsProps) { const classes = useConfigsStyles() loadMode('yaml') const [toAdd, setToAdd] = React.useState(false) @@ -396,6 +408,7 @@ export default function Configs({ bucket, onClose, tabulatorTables }: ConfigsPro className={classes.item} key={tabulatorTable.name} tabulatorTable={tabulatorTable} + onFormSpy={onFormSpy} /> ))} {((!!tabulatorTables.length && toAdd) || !tabulatorTables.length) && ( @@ -406,6 +419,7 @@ export default function Configs({ bucket, onClose, tabulatorTables }: ConfigsPro key={tabulatorTables.length ? 'new-config' : 'first-config'} onClose={() => setToAdd(false)} onEdited={() => setToAdd(false)} + onFormSpy={onFormSpy} /> )}