fix(presentation-mode-notification): Triggers a notification when tog…

…gling dashboard presentation mode (#18471)
influxdata · Jun 11, 2020 · a205c01 · a205c01
1 parent 5bc049c
commit a205c01
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@
 1. [18345](https://github.com/influxdata/influxdb/pull/18345): Have influx delete cmd respect the config
 1. [18385](https://github.com/influxdata/influxdb/pull/18385): Store initialization for pkger enforced on reads
 1. [18434](https://github.com/influxdata/influxdb/pull/18434): Backfill missing fillColumns field for histograms in pkger
+1. [18471](https://github.com/influxdata/influxdb/pull/18471): Notifies the user how to escape presentation mode when the feature is toggled
 
 ### UI Improvements
 

diff --git a/ui/cypress/e2e/dashboardsView.test.ts b/ui/cypress/e2e/dashboardsView.test.ts
@@ -40,7 +40,7 @@ describe('Dashboard', () => {
     cy.getByTestID('dashboard-card').should('contain', newName)
   })
 
-  it('can create and destroy cells', () => {
+  it('can create and destroy cells & toggle in and out of presentation mode', () => {
     cy.get('@org').then(({id: orgID}: Organization) => {
       cy.createDashboard(orgID).then(({body}) => {
         cy.fixture('routes').then(({orgs}) => {
@@ -54,6 +54,17 @@ describe('Dashboard', () => {
     cy.getByTestID('save-cell--button').click()
     cy.getByTestID('cell--view-empty').should('have.length', 1)
 
+    // toggle presentation mode
+    cy.getByTestID('presentation-mode-toggle').click()
+    // ensure a notification is sent when toggling to presentation mode
+    cy.getByTestID('notification-primary--children').should('exist')
+    // escape to toggle the presentation mode off
+    cy.get('body').trigger('keyup', {
+      keyCode: 27,
+      code: 'Escape',
+      key: 'Escape',
+    })
+
     // Remove view cell
     cy.getByTestID('cell-context--toggle').click()
     cy.getByTestID('cell-context--delete').click()

diff --git a/ui/src/dashboards/components/DashboardLightModeToggle.tsx b/ui/src/dashboards/components/DashboardLightModeToggle.tsx
@@ -25,7 +25,10 @@ type Props = OwnProps & StateProps & DispatchProps
 
 const DashboardLightModeToggle: FC<Props> = ({theme, onSetTheme}) => {
   return (
-    <SelectGroup testID="presentation-mode-toggle" shape={ButtonShape.Square}>
+    <SelectGroup
+      testID="presentation-mode-toggle-group"
+      shape={ButtonShape.Square}
+    >
       <SelectGroup.Option
         onClick={() => onSetTheme('dark')}
         value={false}

diff --git a/ui/src/shared/actions/app.ts b/ui/src/shared/actions/app.ts
@@ -1,6 +1,9 @@
 import {PRESENTATION_MODE_ANIMATION_DELAY} from '../constants'
 
-import {notify} from 'src/shared/actions/notifications'
+import {
+  notify,
+  PublishNotificationAction,
+} from 'src/shared/actions/notifications'
 import {presentationMode} from 'src/shared/copy/notifications'
 
 import {Dispatch} from 'redux'
@@ -39,11 +42,13 @@ export const disablePresentationMode = () =>
   } as const)
 
 export const delayEnablePresentationMode = () => (
-  dispatch: Dispatch<ReturnType<typeof enablePresentationMode>>
+  dispatch: Dispatch<
+    ReturnType<typeof enablePresentationMode> | PublishNotificationAction
+  >
 ): NodeJS.Timer =>
   setTimeout(() => {
     dispatch(enablePresentationMode())
-    notify(presentationMode())
+    dispatch(notify(presentationMode()))
   }, PRESENTATION_MODE_ANIMATION_DELAY)
 
 // persistent state action creators