fix: schema composition sync and resetting (#5586)

* Add back in schema resetting behavior for new script, which got accidentally removed here 34920a7#diff-dc45f9353f4973afb51830453f2b9afd104ab1b0057ab80ba84b9f4cf2b09f7d.
* make sync default be true

Author: wiedld

src/dataExplorer/components/FluxQueryBuilder.tsx

@@ -37,7 +37,13 @@ export enum OverlayType {
 }
 
 const FluxQueryBuilder: FC = () => {
-  const {query, vertical, setVertical} = useContext(PersistanceContext)
+  const {
+    query,
+    setQuery,
+    vertical,
+    setVertical,
+    clearSchemaSelection,
+  } = useContext(PersistanceContext)
   const [overlayType, setOverlayType] = useState<OverlayType | null>(null)
 
   return (
@@ -47,6 +53,10 @@ const FluxQueryBuilder: FC = () => {
           <SaveAsScript
             type={overlayType}
             onClose={() => setOverlayType(null)}
+            onClear={() => {
+              clearSchemaSelection()
+              setQuery('')
+            }}
           />
         </Overlay>
         <FlexBox

src/dataExplorer/components/SaveAsScript.tsx

@@ -27,11 +27,12 @@ import {getOrg} from 'src/organizations/selectors'
 import OpenScript from 'src/dataExplorer/components/OpenScript'
 
 interface Props {
+  onClear: () => void
   onClose: () => void
   type: OverlayType | null
 }
 
-const SaveAsScript: FC<Props> = ({onClose, type}) => {
+const SaveAsScript: FC<Props> = ({onClose, onClear, type}) => {
   const dispatch = useDispatch()
   const history = useHistory()
   const {query, resource, setResource, save} = useContext(PersistanceContext)
@@ -63,6 +64,7 @@ const SaveAsScript: FC<Props> = ({onClose, type}) => {
     cancel()
     setStatus(RemoteDataState.NotStarted)
     setResult(null)
+    onClear()
 
     history.replace(`/orgs/${org.id}/data-explorer/from/script`)
     if (type !== OverlayType.OPEN) {

src/dataExplorer/components/resources/TemplatePage.tsx

@@ -5,15 +5,16 @@ import {RemoteDataState} from 'src/types'
 
 import {getOrg} from 'src/organizations/selectors'
 
-import {DEFAULT_SCHEMA} from 'src/dataExplorer/context/persistance'
 import {RESOURCES} from 'src/dataExplorer/components/resources'
 import {
   PersistanceContext,
   PersistanceProvider,
 } from 'src/dataExplorer/context/persistance'
 
 const Template: FC = () => {
-  const {setQuery, setResource, setSelection} = useContext(PersistanceContext)
+  const {setQuery, setResource, clearSchemaSelection} = useContext(
+    PersistanceContext
+  )
   const params = useParams()[0].split('/')
   const org = useSelector(getOrg)
   const history = useHistory()
@@ -34,7 +35,7 @@ const Template: FC = () => {
     }
 
     setLoading(RemoteDataState.Loading)
-    setSelection(JSON.parse(JSON.stringify(DEFAULT_SCHEMA)))
+    clearSchemaSelection()
     setQuery('')
     setResource(null)
 

src/dataExplorer/context/persistance.tsx

@@ -35,6 +35,7 @@ interface ContextType {
   setQuery: (val: string) => void
   setResource: (val: ResourceConnectedQuery<any>) => void
   setSelection: (val: RecursivePartial<SchemaSelection>) => void
+  clearSchemaSelection: () => void
 
   save: () => Promise<ResourceConnectedQuery<any>>
 }
@@ -45,7 +46,7 @@ export const DEFAULT_SCHEMA: SchemaSelection = {
   fields: [] as string[],
   tagValues: [] as TagKeyValuePair[],
   composition: {
-    synced: false,
+    synced: true,
     diverged: false,
   },
 }
@@ -56,15 +57,15 @@ const DEFAULT_CONTEXT = {
   range: DEFAULT_TIME_RANGE,
   query: '',
   resource: null,
-  selection: DEFAULT_SCHEMA,
+  selection: JSON.parse(JSON.stringify(DEFAULT_SCHEMA)),
 
   setHorizontal: (_: number[]) => {},
   setVertical: (_: number[]) => {},
   setRange: (_: TimeRange) => {},
   setQuery: (_: string) => {},
   setResource: (_: any) => {},
   setSelection: (_: RecursivePartial<SchemaSelection>) => {},
-
+  clearSchemaSelection: () => {},
   save: () => Promise.resolve(null),
 }
 
@@ -101,6 +102,10 @@ export const PersistanceProvider: FC = ({children}) => {
     JSON.parse(JSON.stringify(DEFAULT_CONTEXT.selection))
   )
 
+  const clearSchemaSelection = () => {
+    setSelection(JSON.parse(JSON.stringify(DEFAULT_SCHEMA)))
+  }
+
   const setSchemaSelection = useCallback(
     schema => {
       if (selection.composition?.diverged && schema.composition.synced) {
@@ -148,6 +153,7 @@ export const PersistanceProvider: FC = ({children}) => {
         setQuery,
         setResource,
         setSelection: setSchemaSelection,
+        clearSchemaSelection,
 
         save,
       }}