[Discover] Edit histogram as vis (#125705)

elastic · Feb 17, 2022 · 5eb58f7 · 5eb58f7
1 parent 0e83465
commit 5eb58f7
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 36 deletions.
diff --git a/src/plugins/discover/public/application/main/components/chart/discover_chart.test.tsx b/src/plugins/discover/public/application/main/components/chart/discover_chart.test.tsx
@@ -7,9 +7,11 @@
  */
 
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
-import { setHeaderActionMenuMounter } from '../../../../kibana_services';
+import type { DataView } from '../../../../../../data/common';
+import { setHeaderActionMenuMounter, setUiActions } from '../../../../kibana_services';
 import { esHits } from '../../../../__mocks__/es_hits';
 import { savedSearchMock } from '../../../../__mocks__/saved_search';
 import { createSearchSourceMock } from '../../../../../../data/common/search/search_source/mocks';
@@ -21,10 +23,12 @@ import { Chart } from './point_series';
 import { DiscoverChart } from './discover_chart';
 import { VIEW_MODE } from '../../../../components/view_mode_toggle';
 import { KibanaContextProvider } from '../../../../../../kibana_react/public';
+import { UiActionsStart } from 'src/plugins/ui_actions/public';
+import { ReactWrapper } from 'enzyme';
 
 setHeaderActionMenuMounter(jest.fn());
 
-function mountComponent(isTimeBased: boolean = false) {
+async function mountComponent(isTimeBased: boolean = false) {
   const searchSourceMock = createSearchSourceMock({});
   const services = discoverServiceMock;
   services.data.query.timefilter.timefilter.getAbsoluteTime = () => {
@@ -86,7 +90,12 @@ function mountComponent(isTimeBased: boolean = false) {
   }) as DataCharts$;
 
   const props = {
-    isTimeBased,
+    indexPattern: {
+      isTimeBased: () => isTimeBased,
+      id: '123',
+      getFieldByName: () => ({ type: 'date', name: 'timefield', visualizable: true }),
+      timeFieldName: 'timefield',
+    } as unknown as DataView,
     resetSavedSearch: jest.fn(),
     savedSearch: savedSearchMock,
     savedSearchDataChart$: charts$,
@@ -99,20 +108,64 @@ function mountComponent(isTimeBased: boolean = false) {
     setDiscoverViewMode: jest.fn(),
   };
 
-  return mountWithIntl(
-    <KibanaContextProvider services={services}>
-      <DiscoverChart {...props} />
-    </KibanaContextProvider>
-  );
+  let instance: ReactWrapper = {} as ReactWrapper;
+  await act(async () => {
+    instance = mountWithIntl(
+      <KibanaContextProvider services={services}>
+        <DiscoverChart {...props} />
+      </KibanaContextProvider>
+    );
+    // wait for initial async loading to complete
+    await new Promise((r) => setTimeout(r, 0));
+    await instance.update();
+  });
+  return instance;
 }
 
 describe('Discover chart', () => {
-  test('render without timefield', () => {
-    const component = mountComponent();
+  let triggerActions: unknown[] = [];
+  beforeEach(() => {
+    setUiActions({
+      getTriggerCompatibleActions: () => {
+        return triggerActions;
+      },
+    } as unknown as UiActionsStart);
+  });
+  test('render without timefield', async () => {
+    const component = await mountComponent();
     expect(component.find('[data-test-subj="discoverChartOptionsToggle"]').exists()).toBeFalsy();
   });
-  test('render with filefield', () => {
-    const component = mountComponent(true);
+
+  test('render with timefield without visualize permissions', async () => {
+    const component = await mountComponent(true);
+    expect(component.find('[data-test-subj="discoverChartOptionsToggle"]').exists()).toBeTruthy();
+    expect(component.find('[data-test-subj="discoverEditVisualization"]').exists()).toBeFalsy();
+  });
+
+  test('render with timefield with visualize permissions', async () => {
+    triggerActions = [{}];
+    const component = await mountComponent(true);
     expect(component.find('[data-test-subj="discoverChartOptionsToggle"]').exists()).toBeTruthy();
+    expect(component.find('[data-test-subj="discoverEditVisualization"]').exists()).toBeTruthy();
+  });
+
+  test('triggers ui action on click', async () => {
+    const fn = jest.fn();
+    setUiActions({
+      getTrigger: () => ({
+        exec: fn,
+      }),
+      getTriggerCompatibleActions: () => {
+        return [{}];
+      },
+    } as unknown as UiActionsStart);
+    const component = await mountComponent(true);
+    component.find('[data-test-subj="discoverEditVisualization"]').first().simulate('click');
+    expect(fn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        indexPatternId: '123',
+        fieldName: 'timefield',
+      })
+    );
   });
 });
diff --git a/src/plugins/discover/public/application/main/components/chart/discover_chart.tsx b/src/plugins/discover/public/application/main/components/chart/discover_chart.tsx
@@ -8,14 +8,16 @@
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import moment from 'moment';
 import {
-  EuiButtonEmpty,
+  EuiButtonIcon,
   EuiContextMenu,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPopover,
+  EuiToolTip,
   EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import type { DataView } from '../../../../../../data/common';
 import { HitsCounter } from '../hits_counter';
 import { SavedSearch } from '../../../../services/saved_searches';
 import { GetStateReturn } from '../../services/discover_state';
@@ -25,6 +27,10 @@ import { useChartPanels } from './use_chart_panels';
 import { VIEW_MODE, DocumentViewModeToggle } from '../../../../components/view_mode_toggle';
 import { SHOW_FIELD_STATISTICS } from '../../../../../common';
 import { useDiscoverServices } from '../../../../utils/use_discover_services';
+import {
+  getVisualizeInformation,
+  triggerVisualizeActions,
+} from '../sidebar/lib/visualize_trigger_utils';
 
 const DiscoverHistogramMemoized = memo(DiscoverHistogram);
 export const CHART_HIDDEN_KEY = 'discover:chartHidden';
@@ -35,7 +41,7 @@ export function DiscoverChart({
   savedSearchDataChart$,
   savedSearchDataTotalHits$,
   stateContainer,
-  isTimeBased,
+  indexPattern,
   viewMode,
   setDiscoverViewMode,
   hideChart,
@@ -46,12 +52,13 @@ export function DiscoverChart({
   savedSearchDataChart$: DataCharts$;
   savedSearchDataTotalHits$: DataTotalHits$;
   stateContainer: GetStateReturn;
-  isTimeBased: boolean;
+  indexPattern: DataView;
   viewMode: VIEW_MODE;
   setDiscoverViewMode: (viewMode: VIEW_MODE) => void;
   hideChart?: boolean;
   interval?: string;
 }) {
+  const isTimeBased = indexPattern.isTimeBased();
   const { uiSettings, data, storage } = useDiscoverServices();
   const [showChartOptionsPopover, setShowChartOptionsPopover] = useState(false);
   const showViewModeToggle = uiSettings.get(SHOW_FIELD_STATISTICS) ?? false;
@@ -61,6 +68,24 @@ export function DiscoverChart({
     moveFocus: false,
   });
 
+  const timeField =
+    indexPattern.timeFieldName && indexPattern.getFieldByName(indexPattern.timeFieldName);
+  const [canVisualize, setCanVisualize] = useState(false);
+
+  useEffect(() => {
+    if (!timeField) return;
+    getVisualizeInformation(timeField, indexPattern.id, savedSearch.columns || []).then((info) => {
+      setCanVisualize(Boolean(info));
+    });
+  }, [indexPattern, savedSearch.columns, timeField]);
+
+  const onEditVisualization = useCallback(() => {
+    if (!timeField) {
+      return;
+    }
+    triggerVisualizeActions(timeField, indexPattern.id, savedSearch.columns || []);
+  }, [indexPattern.id, savedSearch, timeField]);
+
   const onShowChartOptions = useCallback(() => {
     setShowChartOptionsPopover(!showChartOptionsPopover);
   }, [showChartOptionsPopover]);
@@ -124,27 +149,55 @@ export function DiscoverChart({
           )}
           {isTimeBased && (
             <EuiFlexItem className="dscResultCount__toggle" grow={false}>
-              <EuiPopover
-                id="dscChartOptions"
-                button={
-                  <EuiButtonEmpty
-                    size="xs"
-                    iconType="gear"
-                    onClick={onShowChartOptions}
-                    data-test-subj="discoverChartOptionsToggle"
+              <EuiFlexGroup direction="row" gutterSize="s" responsive={false}>
+                {canVisualize && (
+                  <EuiFlexItem grow={false}>
+                    <EuiToolTip
+                      content={i18n.translate('discover.editVisualizationButton', {
+                        defaultMessage: 'Edit visualization',
+                      })}
+                    >
+                      <EuiButtonIcon
+                        size="xs"
+                        iconType="lensApp"
+                        onClick={onEditVisualization}
+                        data-test-subj="discoverEditVisualization"
+                        aria-label={i18n.translate('discover.editVisualizationButton', {
+                          defaultMessage: 'Edit visualization',
+                        })}
+                      />
+                    </EuiToolTip>
+                  </EuiFlexItem>
+                )}
+                <EuiFlexItem grow={false}>
+                  <EuiPopover
+                    id="dscChartOptions"
+                    button={
+                      <EuiToolTip
+                        content={i18n.translate('discover.chartOptionsButton', {
+                          defaultMessage: 'Chart options',
+                        })}
+                      >
+                        <EuiButtonIcon
+                          size="xs"
+                          iconType="gear"
+                          onClick={onShowChartOptions}
+                          data-test-subj="discoverChartOptionsToggle"
+                          aria-label={i18n.translate('discover.chartOptionsButton', {
+                            defaultMessage: 'Chart options',
+                          })}
+                        />
+                      </EuiToolTip>
+                    }
+                    isOpen={showChartOptionsPopover}
+                    closePopover={closeChartOptions}
+                    panelPaddingSize="none"
+                    anchorPosition="downLeft"
                   >
-                    {i18n.translate('discover.chartOptionsButton', {
-                      defaultMessage: 'Chart options',
-                    })}
-                  </EuiButtonEmpty>
-                }
-                isOpen={showChartOptionsPopover}
-                closePopover={closeChartOptions}
-                panelPaddingSize="none"
-                anchorPosition="downLeft"
-              >
-                <EuiContextMenu initialPanelId={0} panels={panels} />
-              </EuiPopover>
+                    <EuiContextMenu initialPanelId={0} panels={panels} />
+                  </EuiPopover>
+                </EuiFlexItem>
+              </EuiFlexGroup>
             </EuiFlexItem>
           )}
         </EuiFlexGroup>

diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx b/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx
@@ -318,7 +318,7 @@ export function DiscoverLayout({
                       savedSearchDataChart$={charts$}
                       savedSearchDataTotalHits$={totalHits$}
                       stateContainer={stateContainer}
-                      isTimeBased={isTimeBased}
+                      indexPattern={indexPattern}
                       viewMode={viewMode}
                       setDiscoverViewMode={setDiscoverViewMode}
                       hideChart={state.hideChart}