[Maps] term join in produce help (#120238)

* [Maps] term join in produce help

* snapshot updates

* i18n clean up

* API doc updates

* update API docs, update copy

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* i18n cleanup

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

packages/kbn-doc-links/src/get_doc_links.ts

@@ -444,6 +444,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
       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`,

packages/kbn-doc-links/src/types.ts

@@ -310,6 +310,7 @@ export interface DocLinks {
     guide: string;
     importGeospatialPrivileges: string;
     gdalTutorial: string;
+    termJoinsExample: string;
   }>;
   readonly monitoring: Record<string, string>;
   readonly reporting: Readonly<{

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

@@ -11,6 +11,7 @@ exports[`scaling form should disable clusters option when clustering is not supp
         id="xpack.maps.esSearch.scaleTitle"
         values={Object {}}
       />
+       
       <ScalingDocumenationPopover
         clustersOptionLabel="Show clusters when results exceed 10,000"
         limitOptionLabel="Limit results to 10,000"
@@ -88,6 +89,7 @@ exports[`scaling form should render 1`] = `
         id="xpack.maps.esSearch.scaleTitle"
         values={Object {}}
       />
+       
       <ScalingDocumenationPopover
         clustersOptionLabel="Show clusters when results exceed 10,000"
         limitOptionLabel="Limit results to 10,000"

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

@@ -228,7 +228,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/__snapshots__/join_editor.test.tsx.snap

@@ -6,18 +6,13 @@ exports[`Should render callout when joins are disabled 1`] = `
     size="xs"
   >
     <h5>
-      <EuiToolTip
-        content="Use term joins to augment this layer with properties for data driven styling."
-        delay="regular"
-        display="inlineBlock"
-        position="top"
-      >
-        <FormattedMessage
-          defaultMessage="Term joins"
-          id="xpack.maps.layerPanel.joinEditor.termJoinsTitle"
-          values={Object {}}
-        />
-      </EuiToolTip>
+      <FormattedMessage
+        defaultMessage="Term joins"
+        id="xpack.maps.layerPanel.joinEditor.termJoinsTitle"
+        values={Object {}}
+      />
+       
+      <JoinDocumentationPopover />
     </h5>
   </EuiTitle>
   <EuiCallOut
@@ -34,18 +29,13 @@ exports[`Should render join editor 1`] = `
     size="xs"
   >
     <h5>
-      <EuiToolTip
-        content="Use term joins to augment this layer with properties for data driven styling."
-        delay="regular"
-        display="inlineBlock"
-        position="top"
-      >
-        <FormattedMessage
-          defaultMessage="Term joins"
-          id="xpack.maps.layerPanel.joinEditor.termJoinsTitle"
-          values={Object {}}
-        />
-      </EuiToolTip>
+      <FormattedMessage
+        defaultMessage="Term joins"
+        id="xpack.maps.layerPanel.joinEditor.termJoinsTitle"
+        values={Object {}}
+      />
+       
+      <JoinDocumentationPopover />
     </h5>
   </EuiTitle>
   <EuiSpacer

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

@@ -8,11 +8,11 @@
 import React, { Fragment } from 'react';
 import uuid from 'uuid/v4';
 
-import { EuiTitle, EuiSpacer, EuiToolTip, EuiTextAlign, EuiCallOut } from '@elastic/eui';
+import { 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';
@@ -101,17 +101,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,114 @@
+/*
+ * 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="Term joins augment layers with properties for data driven styling. Term joins work as follows:"
+            />
+          </p>
+          <ul>
+            <li>
+              <FormattedMessage
+                id="xpack.maps.joinDocs.sharedKey"
+                defaultMessage="A shared key combines vector features, the left source, with the results of an Elasticsearch aggregation, the right source."
+              />
+            </li>
+            <li>
+              <FormattedMessage
+                id="xpack.maps.joinDocs.termsAggregation"
+                defaultMessage="The terms aggregation creates a bucket for each unique shared key."
+              />
+            </li>
+            <li>
+              <FormattedMessage
+                id="xpack.maps.joinDocs.metrics"
+                defaultMessage="Metrics are calculated for all documents in a bucket."
+              />
+            </li>
+            <li>
+              <FormattedMessage
+                id="xpack.maps.joinDocs.join"
+                defaultMessage="The join adds metrics for each terms aggregation bucket with the corresponding shared key."
+              />
+            </li>
+          </ul>
+          <p>
+            <FormattedMessage
+              id="xpack.maps.joinDocs.noMatches"
+              defaultMessage="Features that do have 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/fr-FR.json

@@ -16763,7 +16763,6 @@
     "xpack.maps.layerPanel.join.deleteJoinAriaLabel": "Supprimer la liaison",
     "xpack.maps.layerPanel.join.deleteJoinTitle": "Supprimer la liaison",
     "xpack.maps.layerPanel.joinEditor.termJoinsTitle": "Liaisons de terme",
-    "xpack.maps.layerPanel.joinEditor.termJoinTooltip": "Utilisez les liaisons de terme pour ajouter à ce calque les propriétés de style basées sur les données.",
     "xpack.maps.layerPanel.joinExpression.helpText": "Configurez la clé partagée.",
     "xpack.maps.layerPanel.joinExpression.joinPopoverTitle": "Liaison",
     "xpack.maps.layerPanel.joinExpression.leftFieldLabel": "Champ gauche",

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

@@ -16897,7 +16897,6 @@
     "xpack.maps.layerPanel.join.deleteJoinAriaLabel": "ジョブの削除",
     "xpack.maps.layerPanel.join.deleteJoinTitle": "ジョブの削除",
     "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

@@ -16923,7 +16923,6 @@
     "xpack.maps.layerPanel.join.deleteJoinAriaLabel": "删除联接",
     "xpack.maps.layerPanel.join.deleteJoinTitle": "删除联接",
     "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": "左字段",