fix: make legends test support iox (#6591)

Author: wdoconnell

cypress/e2e/shared/legends.test.ts

@@ -13,11 +13,26 @@ const VIS_TYPES = [
   'table',
 ]
 
-describe.skip('Legends', () => {
+const CLOUD = Cypress.env('dexUrl') === 'OSS' ? false : true
+
+const dataExplorerFeatureFlags = {
+  showDashboardsInNewIOx: true,
+  showOldDataExplorerInNewIOx: true,
+  showTasksInNewIOx: true,
+}
+
+// Absence of this feature (legends - old data explorer) in IOx is tested
+// in the Data Explorer tests.
+describe('Legends', () => {
   describe('in the Data Explorer', () => {
     beforeEach(() => {
       cy.flush()
       cy.signin()
+
+      if (CLOUD) {
+        cy.setFeatureFlags(dataExplorerFeatureFlags)
+      }
+
       cy.get('@org').then(({id}: Organization) => {
         cy.createMapVariable(id)
         cy.fixture('routes').then(({orgs, explorer}) => {
@@ -348,8 +363,7 @@ describe.skip('Legends', () => {
         )
       })
 
-      // Skip for now because Firefox does not run the test correctly with a newly created cell with query and view options included
-      it.skip('saves to a dashboard as a cell with the static legend options open and with the query pre-submitted', () => {
+      it('saves to a dashboard as a cell with the static legend options open and with the query pre-submitted', () => {
         const cellName = 'anti-crash test pre-submitted data explorer'
         cy.writeData(points(100))
 
@@ -411,10 +425,19 @@ describe.skip('Legends', () => {
     })
   })
 
+  const dashboardsFeatureFlags = {
+    showDashboardsInNewIOx: true,
+  }
+
   describe('in Dashboards', () => {
     beforeEach(() => {
       cy.flush()
       cy.signin()
+
+      if (CLOUD) {
+        cy.setFeatureFlags(dashboardsFeatureFlags)
+      }
+
       cy.fixture('routes').then(({orgs}) => {
         cy.get('@org').then(({id}: Organization) => {
           cy.visit(`${orgs}/${id}/dashboards-list`)
@@ -475,16 +498,15 @@ describe.skip('Legends', () => {
             .click()
             .type(cellName + '{enter}')
 
-          // Without submitting the query, save it to a dashboard
+          cy.get('.veo-contents').click() // click out of inline editor
           cy.getByTestID('save-cell--button').click()
           cy.get('.cell--name').should('have.text', cellName)
           cy.getByTestID('giraffe-legend-table').should('not.exist')
         }
       )
     })
 
-    // Skip for now because Firefox does not run the test correctly with a newly created cell with query and view options included
-    it.skip('adds a new cell to a dashboard with the static legend options open and with the query pre-submitted', () => {
+    it('adds a new cell to a dashboard with the static legend options open and with the query pre-submitted', () => {
       const cellName = 'anti-crash test pre-submitted dashboard add cell'
       cy.writeData(points(100))
 
@@ -540,6 +562,7 @@ describe.skip('Legends', () => {
           cy.getByTestID('page-header').click().type(cellName)
 
           // Save it to a dashboard
+          cy.get('.veo-contents').click() // click out of inline editor
           cy.getByTestID('save-cell--button').click()
           cy.get('.cell--name').should('have.text', cellName)
           cy.getByTestID('giraffe-legend-table').should('be.visible')

src/dataExplorer/components/DataExplorerPage.tsx

@@ -15,11 +15,11 @@ import {
   InputLabel,
   SlideToggle,
 } from '@influxdata/clockface'
-import SaveAsButton from 'src/dataExplorer/components/SaveAsButton'
+import {SaveAsButton} from 'src/dataExplorer/components/SaveAsButton'
 import VisOptionsButton from 'src/timeMachine/components/VisOptionsButton'
 import GetResources from 'src/resources/components/GetResources'
 import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
-import SaveAsOverlay from 'src/dataExplorer/components/SaveAsOverlay'
+import {SaveAsOverlay} from 'src/dataExplorer/components/SaveAsOverlay'
 import ViewTypeDropdown from 'src/timeMachine/components/ViewTypeDropdown'
 import {AddAnnotationDEOverlay} from 'src/overlays/components/index'
 import {EditAnnotationDEOverlay} from 'src/overlays/components/index'
@@ -137,7 +137,7 @@ const DataExplorerPage: FC = () => {
     (scriptQueryBuilder && isFlagEnabled('newDataExplorer')) || isNewIOxOrg
 
   const shouldShowSaveAsButton =
-    !isNewIOxOrg ||
+    !useSelector(selectIsNewIOxOrg) ||
     shouldShowNotebooks ||
     isFlagEnabled('showTasksInNewIOx') ||
     isFlagEnabled('showDashboardsInNewIOx') ||

src/dataExplorer/components/SaveAsButton.test.tsx

@@ -4,7 +4,7 @@ import {screen} from '@testing-library/react'
 import {renderWithReduxAndRouter} from 'src/mockState'
 
 // Components
-import SaveAsButton from 'src/dataExplorer/components/SaveAsButton'
+import {SaveAsButton} from 'src/dataExplorer/components/SaveAsButton'
 
 const setup = () => {
   renderWithReduxAndRouter(<SaveAsButton />)

src/dataExplorer/components/SaveAsButton.tsx

@@ -5,7 +5,7 @@ import {useHistory, useLocation} from 'react-router-dom'
 // Components
 import {IconFont, Button, ComponentColor} from '@influxdata/clockface'
 
-const SaveAsButton: FC = () => {
+export const SaveAsButton: FC = () => {
   const history = useHistory()
   const {pathname} = useLocation()
 
@@ -24,5 +24,3 @@ const SaveAsButton: FC = () => {
     />
   )
 }
-
-export default SaveAsButton

src/dataExplorer/components/SaveAsOverlay.tsx

@@ -31,7 +31,7 @@ enum SaveAsOption {
   Variable = 'variable',
 }
 
-const SaveAsOverlay: FC = () => {
+export const SaveAsOverlay: FC = () => {
   const history = useHistory()
   const isNewIOxOrg = useSelector(selectIsNewIOxOrg)
   const shouldShowNotebooks = useSelector(selectShouldShowNotebooks)
@@ -139,5 +139,3 @@ const SaveAsOverlay: FC = () => {
     </Overlay>
   )
 }
-
-export default SaveAsOverlay