feat(schemaBrowser): add diable logic to "Flux Sync" toggle (#5537)

Author: appletreeisyellow

src/dataExplorer/components/SchemaBrowserHeading.tsx

@@ -12,13 +12,20 @@ import SelectorTitle from 'src/dataExplorer/components/SelectorTitle'
 
 // Context
 import {FluxQueryBuilderContext} from 'src/dataExplorer/context/fluxQueryBuilder'
+import {PersistanceContext} from 'src/dataExplorer/context/persistance'
 
 const FLUX_SYNC_TOOLTIP = `Flux Sync autopopulates the script editor to help you \
 start a query. You can turn this feature on and off, but typing within this \
 section will disable synchronization.`
 
+const FLUX_SYNC_DISABLE_TEXT = `Schema Sync is no longer available because the \
+code block has been edited.`
+
 const SchemaBrowserHeading: FC = () => {
   const {fluxSync, toggleFluxSync} = useContext(FluxQueryBuilderContext)
+  const {selection} = useContext(PersistanceContext)
+
+  const disableToggle: boolean = selection.composition?.diverged
 
   const handleFluxSyncToggle = () => {
     toggleFluxSync(!fluxSync)
@@ -37,6 +44,8 @@ const SchemaBrowserHeading: FC = () => {
             active={fluxSync}
             onChange={handleFluxSyncToggle}
             testID="flux-sync--toggle"
+            disabled={disableToggle}
+            tooltipText={disableToggle ? FLUX_SYNC_DISABLE_TEXT : ''}
           />
           <InputLabel className="flux-sync--label">
             <SelectorTitle