fix(5342): with flux-LSP composition released, test and debug coordination (UI vs LSP vs editor) (#5541)

Debug race conditions on sync, unsync, page reload, and turning on feature flag. Debug using fields and tagValues -- while handling race conditions while quickly inserting or removing multiple of these. Also make the session state always be updatable when not synced, except cannot update the session `synced` prop while diverged (a.k.a. cannot re-sync after divergence).

Author: wiedld

src/dataExplorer/components/SchemaBrowserHeading.tsx

@@ -57,7 +57,7 @@ const SchemaBrowserHeading: FC = () => {
         </FlexBox>
       </FlexBox>
     ),
-    [fluxSync]
+    [fluxSync, toggleFluxSync]
   )
 }
 

src/dataExplorer/context/fluxQueryBuilder.tsx

@@ -261,6 +261,8 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
 
       // Schema
       selection,
+      selection.fields,
+      selection.tagValues,
       searchTerm,
 
       children,

src/dataExplorer/context/persistance.tsx

@@ -3,7 +3,6 @@ import {TimeRange, RecursivePartial} from 'src/types'
 import {DEFAULT_TIME_RANGE} from 'src/shared/constants/timeRanges'
 import {useSessionStorage} from 'src/dataExplorer/shared/utils'
 import {Bucket, TagKeyValuePair} from 'src/types'
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {
   RESOURCES,
   ResourceConnectedQuery,
@@ -100,11 +99,7 @@ export const PersistanceProvider: FC = ({children}) => {
 
   const setSchemaSelection = useCallback(
     schema => {
-      if (
-        isFlagEnabled('schemaComposition') &&
-        selection.composition?.diverged
-      ) {
-        // TODO: how message to user?
+      if (selection.composition?.diverged && schema.composition.synced) {
         return
       }
       const nextState: SchemaSelection = {
@@ -117,7 +112,7 @@ export const PersistanceProvider: FC = ({children}) => {
       }
       setSelection(nextState)
     },
-    [selection, selection.composition, setSelection]
+    [selection.composition, selection.fields, selection.tagValues, setSelection]
   )
 
   const save = () => {