[Maps] term join in produce help

docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md

@@ -268,11 +268,7 @@ readonly links: {
             uptimeDurationAnomaly: string;
         }>;
         readonly alerting: Record<string, string>;
-        readonly maps: Readonly<{
-            guide: string;
-            importGeospatialPrivileges: string;
-            gdalTutorial: string;
-        }>;
+        readonly maps: Record<string, string>;
         readonly monitoring: Record<string, string>;
         readonly security: Readonly<{
             apiKeyServiceSettings: string;

src/core/public/doc_links/doc_links_service.ts

@@ -410,6 +410,7 @@ export class DocLinksService {
           guide: `${KIBANA_DOCS}maps.html`,
           importGeospatialPrivileges: `${KIBANA_DOCS}import-geospatial-data.html#import-geospatial-privileges`,
           gdalTutorial: `${ELASTIC_WEBSITE_URL}blog/how-to-ingest-geospatial-data-into-elasticsearch-with-gdal`,
+          termJoinsExample: `${KIBANA_DOCS}terms-join.html#_example_term_join`,
         },
         monitoring: {
           alertsKibana: `${KIBANA_DOCS}kibana-alerts.html`,
@@ -855,11 +856,7 @@ export interface DocLinksStart {
       uptimeDurationAnomaly: string;
     }>;
     readonly alerting: Record<string, string>;
-    readonly maps: Readonly<{
-      guide: string;
-      importGeospatialPrivileges: string;
-      gdalTutorial: string;
-    }>;
+    readonly maps: Record<string, string>;
     readonly monitoring: Record<string, string>;
     readonly security: Readonly<{
       apiKeyServiceSettings: string;

src/core/public/public.api.md

@@ -750,11 +750,7 @@ export interface DocLinksStart {
             uptimeDurationAnomaly: string;
         }>;
         readonly alerting: Record<string, string>;
-        readonly maps: Readonly<{
-            guide: string;
-            importGeospatialPrivileges: string;
-            gdalTutorial: string;
-        }>;
+        readonly maps: Record<string, string>;
         readonly monitoring: Record<string, string>;
         readonly security: Readonly<{
             apiKeyServiceSettings: string;

x-pack/plugins/maps/public/classes/sources/es_search_source/util/scaling_form.tsx

@@ -223,7 +223,7 @@ export class ScalingForm extends Component<Props, State> {
         {this._renderModal()}
         <EuiTitle size="xs">
           <h5>
-            <FormattedMessage id="xpack.maps.esSearch.scaleTitle" defaultMessage="Scaling" />
+            <FormattedMessage id="xpack.maps.esSearch.scaleTitle" defaultMessage="Scaling" />{' '}
             <ScalingDocumenationPopover
               limitOptionLabel={this._getLimitOptionLabel()}
               clustersOptionLabel={this._getClustersOptionLabel()}

x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/join_editor.tsx

@@ -8,18 +8,12 @@
 import React, { Fragment } from 'react';
 import uuid from 'uuid/v4';
 
-import {
-  EuiButtonEmpty,
-  EuiTitle,
-  EuiSpacer,
-  EuiToolTip,
-  EuiTextAlign,
-  EuiCallOut,
-} from '@elastic/eui';
+import { EuiButtonEmpty, EuiTitle, EuiSpacer, EuiTextAlign, EuiCallOut } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { Join } from './resources/join';
+import { JoinDocumentationPopover } from './resources/join_documentation_popover';
 import { IVectorLayer } from '../../../classes/layers/vector_layer';
 import { JoinDescriptor } from '../../../../common/descriptor_types';
 import { SOURCE_TYPES } from '../../../../common/constants';
@@ -114,17 +108,11 @@ export function JoinEditor({ joins, layer, onChange, leftJoinFields, layerDispla
     <div>
       <EuiTitle size="xs">
         <h5>
-          <EuiToolTip
-            content={i18n.translate('xpack.maps.layerPanel.joinEditor.termJoinTooltip', {
-              defaultMessage:
-                'Use term joins to augment this layer with properties for data driven styling.',
-            })}
-          >
-            <FormattedMessage
-              id="xpack.maps.layerPanel.joinEditor.termJoinsTitle"
-              defaultMessage="Term joins"
-            />
-          </EuiToolTip>
+          <FormattedMessage
+            id="xpack.maps.layerPanel.joinEditor.termJoinsTitle"
+            defaultMessage="Term joins"
+          />{' '}
+          <JoinDocumentationPopover />
         </h5>
       </EuiTitle>
 

x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/join_documentation_popover.tsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { Component } from 'react';
+import { EuiButtonIcon, EuiLink, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { getDocLinks } from '../../../../kibana_services';
+
+interface State {
+  isPopoverOpen: boolean;
+}
+
+export class JoinDocumentationPopover extends Component<{}, State> {
+  state: State = {
+    isPopoverOpen: false,
+  };
+
+  _togglePopover = () => {
+    this.setState((prevState) => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
+    }));
+  };
+
+  _closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  };
+
+  _renderContent() {
+    return (
+      <div>
+        <EuiText grow={false}>
+          <p>
+            <FormattedMessage
+              id="xpack.maps.joinDocs.intro"
+              defaultMessage="Use term joins to augment layer with properties for data driven styling. For example, use a term join to add web log traffic count to world country features. Then use data driven styling to shade world countries by web log traffic."
+            />
+          </p>
+          <p>
+            <FormattedMessage
+              id="xpack.maps.joinDocs.details"
+              defaultMessage="A term join uses a shared key to combine vector features, the left source, with the results of an Elasticsearch terms aggregation, the right source. The terms aggregation creates a bucket for each unique shared key. Metrics are calculated for all documents in a bucket. The join adds metrics for each terms aggregation bucket to the feature with the corresponding shared key. Features that do not have a corresponding terms aggregation bucket are not visible on the map."
+            />
+          </p>
+          <EuiLink href={getDocLinks().links.maps.termJoinsExample} target="_blank" external={true}>
+            <FormattedMessage
+              id="xpack.maps.joinDocs.linkLabel"
+              defaultMessage="Term join example"
+            />
+          </EuiLink>
+        </EuiText>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <EuiPopover
+        id="joinHelpPopover"
+        anchorPosition="leftCenter"
+        button={
+          <EuiButtonIcon
+            onClick={this._togglePopover}
+            iconType="documentation"
+            aria-label="Join documentation"
+          />
+        }
+        isOpen={this.state.isPopoverOpen}
+        closePopover={this._closePopover}
+        repositionOnScroll
+        ownFocus
+      >
+        <EuiPopoverTitle>
+          <FormattedMessage
+            id="xpack.maps.layerPanel.joinEditor.termJoinsTitle"
+            defaultMessage="Term joins"
+          />
+        </EuiPopoverTitle>
+        {this._renderContent()}
+      </EuiPopover>
+    );
+  }
+}

x-pack/plugins/translations/translations/ja-JP.json

@@ -15073,7 +15073,6 @@
     "xpack.maps.layerPanel.joinEditor.addJoinAriaLabel": "結合を追加",
     "xpack.maps.layerPanel.joinEditor.addJoinButtonLabel": "結合を追加",
     "xpack.maps.layerPanel.joinEditor.termJoinsTitle": "用語結合",
-    "xpack.maps.layerPanel.joinEditor.termJoinTooltip": "用語結合を使用すると、データに基づくスタイル設定のプロパティでこのレイヤーを強化します。",
     "xpack.maps.layerPanel.joinExpression.helpText": "共有キーを構成します。",
     "xpack.maps.layerPanel.joinExpression.joinPopoverTitle": "結合",
     "xpack.maps.layerPanel.joinExpression.leftFieldLabel": "左のフィールド",

x-pack/plugins/translations/translations/zh-CN.json

@@ -15270,7 +15270,6 @@
     "xpack.maps.layerPanel.joinEditor.addJoinAriaLabel": "添加联接",
     "xpack.maps.layerPanel.joinEditor.addJoinButtonLabel": "添加联接",
     "xpack.maps.layerPanel.joinEditor.termJoinsTitle": "词联接",
-    "xpack.maps.layerPanel.joinEditor.termJoinTooltip": "使用词联接及属性增强此图层，以实现数据驱动的样式。",
     "xpack.maps.layerPanel.joinExpression.helpText": "配置共享密钥。",
     "xpack.maps.layerPanel.joinExpression.joinPopoverTitle": "联接",
     "xpack.maps.layerPanel.joinExpression.leftFieldLabel": "左字段",