fix: allow StaticLegend to work with Notebooks pipe context (#4132)

Author: TCL735

cypress/e2e/shared/legends.test.ts

@@ -22,7 +22,7 @@ describe('Legends', () => {
         cy.createMapVariable(id)
         cy.fixture('routes').then(({orgs, explorer}) => {
           cy.visit(`${orgs}/${id}${explorer}`)
-          cy.getByTestID('tree-nav')
+          cy.getByTestID('tree-nav').should('be.visible')
         })
       })
     })
@@ -416,7 +416,7 @@ describe('Legends', () => {
       cy.fixture('routes').then(({orgs}) => {
         cy.get('@org').then(({id}: Organization) => {
           cy.visit(`${orgs}/${id}/dashboards-list`)
-          cy.getByTestID('tree-nav')
+          cy.getByTestID('tree-nav').should('be.visible')
         })
       })
     })
@@ -555,4 +555,109 @@ describe('Legends', () => {
       )
     })
   })
+
+  describe('in Notebooks', () => {
+    beforeEach(() => {
+      cy.flush()
+      cy.signin()
+      cy.get('@org').then(({id}: Organization) => {
+        cy.createMapVariable(id)
+        cy.fixture('routes').then(({orgs, notebooks}) => {
+          cy.visit(`${orgs}/${id}${notebooks}`)
+          cy.getByTestID('tree-nav').should('be.visible')
+        })
+      })
+    })
+
+    it('allows the user to toggle the hover legend and static legend', () => {
+      cy.intercept('PATCH', '/api/v2private/notebooks/*').as('updateNotebook')
+      cy.writeData(points(100))
+      const bucketName = 'defbuck'
+
+      cy.getByTestID('preset-new')
+        .first()
+        .click()
+
+      cy.getByTestID('time-machine-submit-button').should('be.visible')
+
+      // Delete 2 panels and leave "Visualize the Result"
+      cy.getByTestID('sidebar-button')
+        .first()
+        .click()
+      cy.getByTestID('Delete--list-item').click()
+      cy.wait('@updateNotebook')
+
+      cy.getByTestID('sidebar-button')
+        .first()
+        .click()
+      cy.getByTestID('Delete--list-item').click()
+      cy.wait('@updateNotebook')
+
+      cy.get('.flow-panel__visible').should('have.length', 1)
+
+      // Add the Query Builder
+      cy.get('.flow-divider--button')
+        .first()
+        .click()
+
+      // Opening the menu adds another Query Builder button
+      cy.getByTestID('add-flow-btn--queryBuilder').should('have.length', 2)
+
+      // Click the newest Query Builder button
+      cy.getByTestID('add-flow-btn--queryBuilder')
+        .last()
+        .click()
+      cy.wait('@updateNotebook')
+
+      cy.getByTestID('bucket-selector').within(() => {
+        cy.getByTestID(`selector-list ${bucketName}`).click()
+      })
+      cy.wait('@updateNotebook')
+
+      cy.getByTestID('builder-card')
+        .eq(0)
+        .within(() => {
+          cy.getByTestID(`selector-list m`).click()
+        })
+      cy.wait('@updateNotebook')
+
+      cy.getByTestID('builder-card')
+        .eq(1)
+        .within(() => {
+          cy.getByTestID(`selector-list v`).click()
+        })
+      cy.wait('@updateNotebook')
+
+      cy.getByTestID('builder-card')
+        .eq(2)
+        .within(() => {
+          cy.getByTestID(`selector-list tv1`).click()
+        })
+      cy.wait('@updateNotebook')
+
+      cy.getByTestID('time-machine-submit-button').click()
+      cy.get('button.flows-config-visualization-button').click()
+
+      cy.get('.flow-sidebar').should('be.visible')
+      cy.getByTestID('hover-legend-toggle').scrollIntoView()
+
+      // Toggling any legend triggers an api call to update the Notebook spec
+      // Hover Legend starts as Show and is toggleable
+      cy.get('label[for="radio_hover_legend_hide"').click()
+      cy.wait('@updateNotebook')
+
+      cy.get('label[for="radio_hover_legend_show"').click()
+      cy.wait('@updateNotebook')
+
+      // Static Legend starts as Hide and is toggleable
+      cy.get('label[for="radio_static_legend_show"').click()
+      cy.wait('@updateNotebook')
+      cy.get('.insert-cell-menu.always-on').scrollIntoView()
+      cy.getByTestID('giraffe-static-legend').should('be.visible')
+
+      cy.get('label[for="radio_static_legend_hide"').click()
+      cy.wait('@updateNotebook')
+      cy.getByTestID('giraffe-static-legend').should('not.exist')
+    })
+  })
 })

cypress/fixtures/routes.json

@@ -6,6 +6,7 @@
   "endpoints": "/endpoints",
   "explorer": "/data-explorer",
   "flows": "/flows",
+  "notebooks": "/notebooks",
   "orgs": "/orgs",
   "rules": "/rules",
   "sources": "/load-data/sources",

src/visualization/components/View.test.tsx

@@ -67,6 +67,19 @@ jest.doMock('src/visualization/contextLoader', () => {
   }
 })
 
+jest.mock('src/flows/index', () => {
+  return {
+    PROJECT_NAME: 'NoteBook',
+    DEFAULT_PROJECT_NAME: 'Untitled Notebook',
+  }
+})
+
+jest.mock('src/flows/templates/index', () => {
+  return {
+    TEMPLATES: {},
+  }
+})
+
 import {View, SUPPORTED_VISUALIZATIONS} from 'src/visualization'
 
 const setup = properties => {

src/visualization/utils/useStaticLegend.ts

@@ -1,7 +1,10 @@
 // Libraries
-import {useMemo, useCallback} from 'react'
+import {useMemo, useContext, useCallback} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 
+// Context
+import {PipeContext} from 'src/flows/context/pipe'
+
 // Actions
 import {setStaticLegend} from 'src/timeMachine/actions'
 
@@ -66,9 +69,11 @@ const convertShowToHide = (showState: boolean): boolean => !showState
 const eventPrefix = 'visualization.customize.staticlegend'
 
 export const useStaticLegend = (properties): StaticLegendConfig => {
+  const {id, data, update} = useContext(PipeContext)
+
   const {isViewingVisOptions} = useSelector(getActiveTimeMachine)
   const dispatch = useDispatch()
-  const update = useCallback(
+  const timeMachineUpdate = useCallback(
     (staticLegend: StaticLegendAPI) => {
       dispatch(
         setStaticLegend({
@@ -79,6 +84,22 @@ export const useStaticLegend = (properties): StaticLegendConfig => {
     },
     [dispatch, properties.staticLegend]
   )
+
+  let updateStaticLegendProperties
+  const notebookViewProperties = data?.properties || {}
+  const notebookStaticLegend = notebookViewProperties.staticLegend || {}
+  if (id) {
+    updateStaticLegendProperties = (updatedProperties: StaticLegendAPI) =>
+      update({
+        properties: {
+          ...notebookViewProperties,
+          staticLegend: {...notebookStaticLegend, ...updatedProperties},
+        },
+      })
+  } else {
+    updateStaticLegendProperties = timeMachineUpdate
+  }
+
   return useMemo(() => {
     const {
       legendColorizeRows = LEGEND_COLORIZE_ROWS_DEFAULT,
@@ -132,7 +153,7 @@ export const useStaticLegend = (properties): StaticLegendConfig => {
         validThreshold = LEGEND_ORIENTATION_THRESHOLD_VERTICAL
       }
 
-      update({
+      updateStaticLegendProperties({
         colorizeRows: legendColorizeRows,
         opacity: validOpacity,
         orientationThreshold: validThreshold,
@@ -199,11 +220,11 @@ export const useStaticLegend = (properties): StaticLegendConfig => {
             updatedHeightRatio,
           })
 
-          update({
+          updateStaticLegendProperties({
             heightRatio: updatedHeightRatio,
           })
         }
       },
     }
-  }, [properties, isViewingVisOptions, update])
+  }, [properties, isViewingVisOptions, updateStaticLegendProperties])
 }