From a205c0197574268ffceeb1d2dbd1b251b5f8faeb Mon Sep 17 00:00:00 2001
From: Ariel Salem <Asalem1@users.noreply.github.com>
Date: Thu, 11 Jun 2020 15:01:41 -0700
Subject: [PATCH] fix(presentation-mode-notification): Triggers a notification
 when toggling dashboard presentation mode (#18471)

---
 CHANGELOG.md                                        |  1 +
 ui/cypress/e2e/dashboardsView.test.ts               | 13 ++++++++++++-
 .../components/DashboardLightModeToggle.tsx         |  5 ++++-
 ui/src/shared/actions/app.ts                        | 11 ++++++++---
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6af0dcdec19..a40c40f0874 100644
--- 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
index 21f5ec3db5b..acad678548d 100644
--- 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
index ef8bf6b7f39..8c6da807b76 100644
--- 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
index 59db326fdd0..0f1c3c4f831 100644
--- 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