Uiactions to navigate to visualize or maps

src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx

@@ -16,13 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import { EuiLink, EuiIconTip, EuiText } from '@elastic/eui';
+import React, { useState, useEffect } from 'react';
+import { EuiLink, EuiIconTip, EuiText, EuiButton } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { DiscoverFieldBucket } from './discover_field_bucket';
 import { getWarnings } from './lib/get_warnings';
+import {
+  triggerVisualizeActions,
+  isFieldVisualizable,
+  getVisualizeHref,
+} from './lib/visualize_trigger_utils';
 import { Bucket, FieldDetails } from './types';
-import { getServices } from '../../../kibana_services';
 import { IndexPatternField, IndexPattern } from '../../../../../data/public';
 
 interface DiscoverFieldDetailsProps {
@@ -39,6 +43,36 @@ export function DiscoverFieldDetails({
   onAddFilter,
 }: DiscoverFieldDetailsProps) {
   const warnings = getWarnings(field);
+  const [showVisualizeLink, setShowVisualizeLink] = useState<boolean>(false);
+  const [visualizeLink, setVisualizeLink] = useState<string>('');
+
+  useEffect(() => {
+    isFieldVisualizable(field, indexPattern.id, details.columns).then(
+      (flag) => {
+        setShowVisualizeLink(flag);
+        // get href only if Visualize button is enabled
+        getVisualizeHref(field, indexPattern.id, details.columns).then(
+          (uri) => {
+            if (uri) setVisualizeLink(uri);
+          },
+          () => {
+            setVisualizeLink('');
+          }
+        );
+      },
+      () => {
+        setShowVisualizeLink(false);
+      }
+    );
+  }, [field, indexPattern.id, details.columns]);
+
+  const handleVisualizeLinkClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (!event.defaultPrevented) {
+      // regular link click. let the uiActions code handle the navigation and show popup if needed
+      event.preventDefault();
+      triggerVisualizeActions(field, indexPattern.id, details.columns);
+    }
+  };
 
   return (
     <div className="dscFieldDetails">
@@ -76,26 +110,22 @@ export function DiscoverFieldDetails({
         </div>
       )}
 
-      {details.visualizeUrl && (
-        <>
-          <EuiLink
-            onClick={() => {
-              getServices().core.application.navigateToApp(details.visualizeUrl.app, {
-                path: details.visualizeUrl.path,
-              });
-            }}
-            className="kuiButton kuiButton--secondary kuiButton--small kuiVerticalRhythmSmall"
-            data-test-subj={`fieldVisualize-${field.name}`}
-          >
-            <FormattedMessage
-              id="discover.fieldChooser.detailViews.visualizeLinkText"
-              defaultMessage="Visualize"
-            />
-            {warnings.length > 0 && (
-              <EuiIconTip type="alert" color="warning" content={warnings.join(' ')} />
-            )}
-          </EuiLink>
-        </>
+      {showVisualizeLink && (
+        // eslint-disable-next-line @elastic/eui/href-or-on-click
+        <EuiButton
+          onClick={(e) => handleVisualizeLinkClick(e)}
+          href={visualizeLink}
+          className="kuiButton kuiButton--secondary kuiButton--small kuiVerticalRhythmSmall"
+          data-test-subj={`fieldVisualize-${field.name}`}
+        >
+          <FormattedMessage
+            id="discover.fieldChooser.detailViews.visualizeLinkText"
+            defaultMessage="Visualize"
+          />
+          {warnings.length > 0 && (
+            <EuiIconTip type="alert" color="warning" content={warnings.join(' ')} />
+          )}
+        </EuiButton>
       )}
     </div>
   );

src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx

@@ -125,9 +125,8 @@ export function DiscoverSidebar({
   );
 
   const getDetailsByField = useCallback(
-    (ipField: IndexPatternField) =>
-      getDetails(ipField, selectedIndexPattern, state, columns, hits, services),
-    [selectedIndexPattern, state, columns, hits, services]
+    (ipField: IndexPatternField) => getDetails(ipField, hits, columns),
+    [hits, columns]
   );
 
   const popularLimit = services.uiSettings.get(FIELDS_LIMIT_SETTING);

src/plugins/discover/public/application/components/sidebar/lib/get_details.ts

@@ -16,32 +16,24 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { getVisualizeUrl, isFieldVisualizable } from './visualize_url_utils';
-import { AppState } from '../../../angular/discover_state';
+
 // @ts-ignore
 import { fieldCalculator } from './field_calculator';
-import { IndexPatternField, IndexPattern } from '../../../../../../data/public';
-import { DiscoverServices } from '../../../../build_services';
+import { IndexPatternField } from '../../../../../../data/public';
 
 export function getDetails(
   field: IndexPatternField,
-  indexPattern: IndexPattern,
-  state: AppState,
-  columns: string[],
   hits: Array<Record<string, unknown>>,
-  services: DiscoverServices
+  columns: string[]
 ) {
   const details = {
-    visualizeUrl:
-      services.capabilities.visualize.show && isFieldVisualizable(field, services.visualizations)
-        ? getVisualizeUrl(field, indexPattern, state, columns, services)
-        : null,
     ...fieldCalculator.getFieldValueCounts({
       hits,
       field,
       count: 5,
       grouped: false,
     }),
+    columns,
   };
   if (details.buckets) {
     for (const bucket of details.buckets) {

src/plugins/discover/public/application/components/sidebar/lib/visualize_trigger_utils.ts

@@ -0,0 +1,110 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import {
+  VISUALIZE_FIELD_TRIGGER,
+  VISUALIZE_GEO_FIELD_TRIGGER,
+  visualizeFieldTrigger,
+  visualizeGeoFieldTrigger,
+} from '../../../../../../ui_actions/public';
+import { getUiActions } from '../../../../kibana_services';
+import { IndexPatternField, KBN_FIELD_TYPES } from '../../../../../../data/public';
+
+function getTriggerConstant(type: string) {
+  return type === KBN_FIELD_TYPES.GEO_POINT || type === KBN_FIELD_TYPES.GEO_SHAPE
+    ? VISUALIZE_GEO_FIELD_TRIGGER
+    : VISUALIZE_FIELD_TRIGGER;
+}
+
+function getTrigger(type: string) {
+  return type === KBN_FIELD_TYPES.GEO_POINT || type === KBN_FIELD_TYPES.GEO_SHAPE
+    ? visualizeGeoFieldTrigger
+    : visualizeFieldTrigger;
+}
+
+async function getCompatibleActions(
+  fieldName: string,
+  indexPatternId: string,
+  contextualFields: string[],
+  trigger: typeof VISUALIZE_FIELD_TRIGGER | typeof VISUALIZE_GEO_FIELD_TRIGGER
+) {
+  const compatibleActions = await getUiActions().getTriggerCompatibleActions(trigger, {
+    indexPatternId,
+    fieldName,
+    contextualFields,
+  });
+  return compatibleActions;
+}
+
+export async function getVisualizeHref(
+  field: IndexPatternField,
+  indexPatternId: string | undefined,
+  contextualFields: string[]
+) {
+  if (!indexPatternId) return undefined;
+  const triggerOptions = {
+    indexPatternId,
+    fieldName: field.name,
+    contextualFields,
+    trigger: getTrigger(field.type),
+  };
+  const compatibleActions = await getCompatibleActions(
+    field.name,
+    indexPatternId,
+    contextualFields,
+    getTriggerConstant(field.type)
+  );
+  // enable the link only if only one action is registered
+  return compatibleActions.length === 1
+    ? compatibleActions[0].getHref?.(triggerOptions)
+    : undefined;
+}
+
+export function triggerVisualizeActions(
+  field: IndexPatternField,
+  indexPatternId: string | undefined,
+  contextualFields: string[]
+) {
+  if (!indexPatternId) return;
+  const trigger = getTriggerConstant(field.type);
+  const triggerOptions = {
+    indexPatternId,
+    fieldName: field.name,
+    contextualFields,
+  };
+  getUiActions().getTrigger(trigger).exec(triggerOptions);
+}
+
+export async function isFieldVisualizable(
+  field: IndexPatternField,
+  indexPatternId: string | undefined,
+  contextualFields: string[]
+) {
+  if (field.name === '_id' || !indexPatternId) {
+    // for first condition you'd get a 'Fielddata access on the _id field is disallowed' error on ES side.
+    return false;
+  }
+  const trigger = getTriggerConstant(field.type);
+  const compatibleActions = await getCompatibleActions(
+    field.name,
+    indexPatternId,
+    contextualFields,
+    trigger
+  );
+  return compatibleActions.length > 0 && field.visualizable;
+}