From 4e4637fe40b515083afac5308a809561d4df3cca Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Tue, 2 Feb 2021 13:15:24 +0100
Subject: [PATCH] Fix functional test

---
 .../public/application/components/discover.tsx | 18 +++++++++++-------
 .../public/application/components/types.ts     |  6 +++++-
 .../apps/discover/_discover_histogram.ts       |  8 ++++++--
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx
index 5653ef4f57435..62ac5910963fd 100644
--- a/src/plugins/discover/public/application/components/discover.tsx
+++ b/src/plugins/discover/public/application/components/discover.tsx
@@ -7,7 +7,7 @@
  */
 
 import './discover.scss';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useMemo, useCallback } from 'react';
 import {
   EuiButtonEmpty,
   EuiButtonIcon,
@@ -87,8 +87,12 @@ export function Discover({
     // collapse icon isn't displayed in mobile view, use it to detect which view is displayed
     return collapseIcon && !collapseIcon.current;
   };
+  const toggleHideChart = useCallback(() => {
+    const newState = { ...state, hideChart: !state.hideChart };
+    opts.stateContainer.setAppState(newState);
+  }, [state, opts]);
+  const hideChart = useMemo(() => state.hideChart, [state]);
 
-  const [toggleOn, toggleChart] = useState(true);
   const [isSidebarClosed, setIsSidebarClosed] = useState(false);
   const services = getServices();
   const { TopNavMenu } = services.navigation.ui;
@@ -198,7 +202,7 @@ export function Discover({
                             onResetQuery={resetQuery}
                           />
                         </EuiFlexItem>
-                        {toggleOn && (
+                        {!hideChart && (
                           <EuiFlexItem className="dscResultCount__actions">
                             <TimechartHeader
                               dateFormat={opts.config.get('dateFormat')}
@@ -214,13 +218,13 @@ export function Discover({
                           <EuiFlexItem className="dscResultCount__toggle" grow={false}>
                             <EuiButtonEmpty
                               size="xs"
-                              iconType={toggleOn ? 'eyeClosed' : 'eye'}
+                              iconType={!hideChart ? 'eyeClosed' : 'eye'}
                               onClick={() => {
-                                toggleChart(!toggleOn);
+                                toggleHideChart();
                               }}
                               data-test-subj="discoverChartToggle"
                             >
-                              {toggleOn
+                              {!hideChart
                                 ? i18n.translate('discover.hideChart', {
                                     defaultMessage: 'Hide chart',
                                   })
@@ -233,7 +237,7 @@ export function Discover({
                       </EuiFlexGroup>
                       {isLegacy && <SkipBottomButton onClick={onSkipBottomButtonClick} />}
                     </EuiFlexItem>
-                    {toggleOn && opts.timefield && (
+                    {!hideChart && opts.timefield && (
                       <EuiFlexItem grow={false}>
                         <section
                           aria-label={i18n.translate(
diff --git a/src/plugins/discover/public/application/components/types.ts b/src/plugins/discover/public/application/components/types.ts
index fe0d40f222f23..e2d32b762c747 100644
--- a/src/plugins/discover/public/application/components/types.ts
+++ b/src/plugins/discover/public/application/components/types.ts
@@ -20,7 +20,7 @@ import {
   TimeRange,
 } from '../../../../data/public';
 import { SavedSearch } from '../../saved_searches';
-import { AppState } from '../angular/discover_state';
+import { AppState, GetStateReturn } from '../angular/discover_state';
 import { TopNavMenuData } from '../../../../navigation/public';
 
 export interface DiscoverProps {
@@ -131,6 +131,10 @@ export interface DiscoverProps {
      * Function to set the current state
      */
     setAppState: (state: Partial<AppState>) => void;
+    /**
+     * State container providing globalState, appState and functions
+     */
+    stateContainer: GetStateReturn;
   };
   /**
    * Function to reset the current query
diff --git a/test/functional/apps/discover/_discover_histogram.ts b/test/functional/apps/discover/_discover_histogram.ts
index 765081aebb521..c252609df1d16 100644
--- a/test/functional/apps/discover/_discover_histogram.ts
+++ b/test/functional/apps/discover/_discover_histogram.ts
@@ -69,7 +69,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const chartIntervalIconTip = await PageObjects.discover.getChartIntervalWarningIcon();
       expect(chartIntervalIconTip).to.be(true);
     });
-    it('should allow hide/show histogram, persisted in url state', async () => {
+    it('1234 should allow hide/show histogram, persisted in url state', async () => {
       const fromTime = 'Jan 01, 2010 @ 00:00:00.000';
       const toTime = 'Mar 21, 2019 @ 00:00:00.000';
       await prepareTest(fromTime, toTime);
@@ -84,9 +84,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       expect(canvasExists).to.be(false);
       await testSubjects.click('discoverChartToggle');
       await PageObjects.header.waitUntilLoadingHasFinished();
+      canvasExists = await elasticChart.canvasExists();
       expect(canvasExists).to.be(true);
     });
-    it('should allow hiding the histogram, persisted in saved search', async () => {
+    it('1234 should allow hiding the histogram, persisted in saved search', async () => {
       const fromTime = 'Jan 01, 2010 @ 00:00:00.000';
       const toTime = 'Mar 21, 2019 @ 00:00:00.000';
       const savedSearch = 'persisted hidden histogram';
@@ -96,10 +97,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       expect(canvasExists).to.be(false);
       await PageObjects.discover.saveSearch(savedSearch);
       await PageObjects.header.waitUntilLoadingHasFinished();
+      canvasExists = await elasticChart.canvasExists();
+      expect(canvasExists).to.be(false);
       await testSubjects.click('discoverChartToggle');
       canvasExists = await elasticChart.canvasExists();
       expect(canvasExists).to.be(true);
       await PageObjects.discover.clickResetSavedSearchButton();
+      await PageObjects.header.waitUntilLoadingHasFinished();
       canvasExists = await elasticChart.canvasExists();
       expect(canvasExists).to.be(false);
     });