fix: re-enable the flipping of sync styling on and off, as the composition synced is toggled on and off (#6420)

Author: wiedld

cypress/e2e/shared/fluxQueryBuilder.test.ts

@@ -638,13 +638,30 @@ describe('Script Builder', () => {
         cy.log('starts as synced')
         cy.getByTestID('flux-sync--toggle').should('have.class', 'active')
 
-        cy.log('sync toggles on and off')
+        cy.log('empty editor text')
+        cy.getByTestID('flux-editor').monacoType('{selectAll}{del}')
+
+        cy.log('Ensure LSP is online') // deflake
+        cy.wait(DELAY_FOR_LSP_SERVER_BOOTUP)
+
+        cy.log('make a composition')
+        selectSchema()
+        confirmSchemaComposition()
+
+        cy.log('sync toggles on and off, with matching styles')
+        cy.get('.composition-sync--on').should('have.length', 3)
+        cy.get('.composition-sync--off').should('have.length', 0)
         cy.getByTestID('flux-sync--toggle')
           .should('have.class', 'active')
           .click()
           .should('not.have.class', 'active')
+        cy.get('.composition-sync--on').should('have.length', 0)
+        cy.get('.composition-sync--off').should('have.length', 3)
+        cy.getByTestID('flux-sync--toggle')
           .click()
           .should('have.class', 'active')
+        cy.get('.composition-sync--on').should('have.length', 3)
+        cy.get('.composition-sync--off').should('have.length', 0)
 
         cy.log('turn off flux sync')
         cy.getByTestID('flux-sync--toggle')

src/languageSupport/languages/flux/lsp/connection.ts

@@ -59,6 +59,7 @@ export class ConnectionManager {
   ) => void = () => null
   private _dispatcher = _ => {}
   private _first_load = true
+  private _compositionRange: LspRange
 
   constructor(worker: Worker) {
     this._worker = worker
@@ -147,8 +148,10 @@ export class ConnectionManager {
     })
   }
 
-  _compositionSyncStyle(startLine: number, endLine: number) {
-    const classNamePrefix = 'composition-sync--on'
+  _compositionSyncStyle(startLine: number, endLine: number, synced: boolean) {
+    const classNamePrefix = synced
+      ? 'composition-sync--on'
+      : 'composition-sync--off'
 
     // Customize the full width of Monaco editor margin using API `marginClassName`
     // https://github.com/microsoft/monaco-editor/blob/35eb0ef/website/typedoc/monaco.d.ts#L1533
@@ -173,14 +176,15 @@ export class ConnectionManager {
     return [startLineStyle, middleLinesStyle, endLineStyle]
   }
 
-  _setEditorBlockStyle(range: LspRange | null) {
+  _setEditorBlockStyle(range: LspRange | null, synced: boolean = false) {
+    this._compositionRange = range
     const shouldRemoveAllStyles = range == null
 
     this._compositionStyle = this._editor.deltaDecorations(
       this._compositionStyle,
       shouldRemoveAllStyles
         ? []
-        : this._compositionSyncStyle(range.start.line, range.end.line)
+        : this._compositionSyncStyle(range.start.line, range.end.line, synced)
     )
   }
 
@@ -348,9 +352,17 @@ export class ConnectionManager {
     }
 
     if (!schema.composition.synced) {
+      this._session.composition.synced = false
+      this._setEditorBlockStyle(this._compositionRange)
       return
     }
+    const syncTurnedBackOn =
+      schema.composition.synced && !previousState.composition.synced
+    if (syncTurnedBackOn) {
+      this._setEditorBlockStyle(this._compositionRange, true)
+    }
 
+    // don't update the `this._session` until here. Since used to diffChange.
     this._session = {...schema, composition: {...schema.composition}}
     const {toAdd, toRemove, shouldRemoveDefaultMsg} = this._diffSchemaChange(
       schema,
@@ -414,7 +426,7 @@ export class ConnectionManager {
     actions.forEach((action: ActionItem) => {
       switch (action.title) {
         case ActionItemCommand.CompositionRange:
-          this._setEditorBlockStyle(action.range)
+          this._setEditorBlockStyle(action.range, true)
           break
         case ActionItemCommand.CompositionState:
           if (action.state) {

src/shared/components/MonacoEditor.scss

@@ -80,4 +80,24 @@
   .composition-sync--on--last {
     border-bottom: 1px solid $c-pool;
   }
+
+  .composition-sync--off {
+    opacity: 50%;
+    background-color: $cf-grey-35;
+  }
+
+  .composition-sync--off--first {
+    opacity: 50%;
+    border-top: 1px solid $cf-white;
+    // composition sync icon
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.82511 4.0427L7.10622 1.6971L5.67243 0.302734L0.0902793 6.0427H16V4.0427H4.82511ZM11.1749 11.9571H0V9.95714H15.9097L10.3275 15.6971L8.89376 14.3027L11.1749 11.9571Z' fill='white'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-size: 11px 11px;
+    background-position: $cf-space-3xs $cf-space-3xs;
+  }
+
+  .composition-sync--off--last {
+    opacity: 50%;
+    border-bottom: 1px solid $cf-white;
+  }
 }