handle dirty state in long queries

quiltdata · Sep 20, 2024 · aaa1102 · aaa1102
1 parent 23ef84d
commit aaa1102
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git 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 (
     <Card
       form={
         <LongQueryConfigForm
           bucket={bucket}
-          onClose={() => 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
@@ -146,6 +146,7 @@ interface LongQueryConfigFormProps {
   bucketName: string
   className: string
   onEdited?: () => void
+  onFormSpy: (state: FF.FormState<FormValues>) => 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,
       }) => (
         <form className={cx(classes.root, className)} onSubmit={handleSubmit}>
+          <RF.FormSpy
+            subscription={{ modified: true, dirty: true }}
+            onChange={onFormSpy}
+          />
           {confirm.render(<></>)}
           <div className={classes.main}>
             <RF.Field
@@ -382,9 +388,15 @@ interface ConfigsProps {
   bucket: string
   tabulatorTables: Model.GQLTypes.BucketConfig['tabulatorTables']
   onClose: () => void
+  onFormSpy: (state: FF.FormState<FormValues>) => 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}
         />
       )}
       <div className={classes.actions}>