[Lens] visualize in maps button

x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx

@@ -15,6 +15,7 @@ import { Action } from './state_management';
 import { DragContext, DragDropIdentifier } from '../../drag_drop';
 import { StateSetter, FramePublicAPI, DatasourceDataPanelProps, Datasource } from '../../types';
 import { Query, Filter } from '../../../../../../src/plugins/data/public';
+import { UiActionsStart } from '../../../../../../src/plugins/ui_actions/public';
 
 interface DataPanelWrapperProps {
   datasourceState: unknown;
@@ -29,6 +30,7 @@ interface DataPanelWrapperProps {
   filters: Filter[];
   dropOntoWorkspace: (field: DragDropIdentifier) => void;
   hasSuggestionForField: (field: DragDropIdentifier) => boolean;
+  plugins: { uiActions: UiActionsStart };
 }
 
 export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
@@ -56,6 +58,7 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
     showNoDataPopover: props.showNoDataPopover,
     dropOntoWorkspace: props.dropOntoWorkspace,
     hasSuggestionForField: props.hasSuggestionForField,
+    uiActions: props.plugins.uiActions,
   };
 
   const [showDatasourceSwitcher, setDatasourceSwitcher] = useState(false);

x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx

@@ -332,6 +332,7 @@ export function EditorFrame(props: EditorFrameProps) {
             showNoDataPopover={props.showNoDataPopover}
             dropOntoWorkspace={dropOntoWorkspace}
             hasSuggestionForField={hasSuggestionForField}
+            plugins={props.plugins}
           />
         }
         configPanel={

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.scss

@@ -0,0 +1,32 @@
+@import '../../../mixins';
+
+.lnsVisualizeGeoFieldWorkspacePanel__dragDrop {
+  width: $euiSizeXXL * 8;
+  height: $euiSizeXXL;
+  border: $euiBorderThin;
+  border-radius: $euiBorderRadiusSmall;
+
+  &.lnsDragDrop-isDropTarget {
+    @include lnsDroppable;
+    @include lnsDroppableActive;
+
+    p {
+      transition: filter $euiAnimSpeedFast ease-in-out;
+      filter: blur(5px);
+    }
+
+    .lnsExpressionRenderer {
+      transition: filter $euiAnimSpeedNormal ease-in-out, opacity $euiAnimSpeedNormal ease-in-out;
+      filter: blur($euiSizeXS);
+      opacity: .25;
+    }
+  }
+
+  &.lnsDragDrop-isActiveDropTarget {
+    @include lnsDroppableActiveHover;
+
+    .lnsDropIllustration__hand {
+      animation: lnsWorkspacePanel__illustrationPulseContinuous 1.5s ease-in-out 0s infinite normal forwards;
+    }
+  }
+}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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 from 'react';
+import { EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import {
+  UiActionsStart,
+  VISUALIZE_GEO_FIELD_TRIGGER,
+} from '../../../../../../../src/plugins/ui_actions/public';
+import { getVisualizeGeoFieldMessage } from '../../../utils';
+import { DragDrop } from '../../../drag_drop';
+import './geo_field_workspace_panel.scss';
+
+interface Props {
+  fieldType: string;
+  fieldName: string;
+  indexPatternId: string;
+  uiActions: UiActionsStart;
+}
+
+const dragDropIdentifier = {
+  id: 'lnsGeoFieldWorkspace',
+  humanData: {
+    label: i18n.translate('xpack.lens.geoFieldWorkspace.workspaceLabel', {
+      defaultMessage: 'Geo field workspace',
+    }),
+  },
+};
+
+const dragDropOrder = [1, 0, 0, 0];
+
+export function GeoFieldWorkspacePanel(props: Props) {
+  function onDrop() {
+    props.uiActions.getTrigger(VISUALIZE_GEO_FIELD_TRIGGER).exec({
+      indexPatternId: props.indexPatternId,
+      fieldName: props.fieldName,
+    });
+  }
+
+  return (
+    <EuiText
+      className="lnsWorkspacePanel__emptyContent"
+      textAlign="center"
+      color="subdued"
+      size="s"
+    >
+      <h2>
+        <strong>{getVisualizeGeoFieldMessage(props.fieldType)}</strong>
+      </h2>
+      <DragDrop
+        className="lnsVisualizeGeoFieldWorkspacePanel__dragDrop"
+        dataTestSubj="lnsGeoFieldWorkspace"
+        draggable={false}
+        dropTypes={['field_add']}
+        order={dragDropOrder}
+        value={dragDropIdentifier}
+        onDrop={onDrop}
+      >
+        <div>
+          <FormattedMessage
+            id="xpack.lens.geoFieldWorkspace.dropMessage"
+            defaultMessage="Drop field here to open in Maps"
+          />
+        </div>
+      </DragDrop>
+    </EuiText>
+  );
+}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx

@@ -338,17 +338,22 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
     );
   };
 
-  return (
-    <WorkspacePanelWrapper
-      title={title}
-      framePublicAPI={framePublicAPI}
-      dispatch={dispatch}
-      visualizationState={visualizationState}
-      visualizationId={activeVisualizationId}
-      datasourceStates={datasourceStates}
-      datasourceMap={datasourceMap}
-      visualizationMap={visualizationMap}
-    >
+  const dragDropContext = useContext(DragContext);
+
+  const renderDragDrop = () => {
+    const customWorkspaceRenderer =
+      activeDatasourceId &&
+      datasourceMap[activeDatasourceId].getCustomWorkspaceRenderer &&
+      dragDropContext.dragging
+        ? datasourceMap[activeDatasourceId].getCustomWorkspaceRenderer!(
+            datasourceStates[activeDatasourceId].state,
+            dragDropContext.dragging
+          )
+        : undefined;
+
+    return customWorkspaceRenderer ? (
+      customWorkspaceRenderer()
+    ) : (
       <DragDrop
         className="lnsWorkspacePanel__dragDrop"
         dataTestSubj="lnsWorkspace"
@@ -363,6 +368,21 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
           {Boolean(suggestionForDraggedField) && expression !== null && renderEmptyWorkspace()}
         </EuiPageContentBody>
       </DragDrop>
+    );
+  };
+
+  return (
+    <WorkspacePanelWrapper
+      title={title}
+      framePublicAPI={framePublicAPI}
+      dispatch={dispatch}
+      visualizationState={visualizationState}
+      visualizationId={activeVisualizationId}
+      datasourceStates={datasourceStates}
+      datasourceMap={datasourceMap}
+      visualizationMap={visualizationMap}
+    >
+      {renderDragDrop()}
     </WorkspacePanelWrapper>
   );
 });

x-pack/plugins/lens/public/editor_frame_service/service.tsx

@@ -44,7 +44,7 @@ export interface EditorFrameStartPlugins {
   embeddable?: EmbeddableStart;
   dashboard?: DashboardStart;
   expressions: ExpressionsStart;
-  uiActions?: UiActionsStart;
+  uiActions: UiActionsStart;
   charts: ChartsPluginSetup;
 }
 

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx

@@ -22,6 +22,7 @@ import { documentField } from './document_field';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
 import { indexPatternFieldEditorPluginMock } from '../../../../../src/plugins/index_pattern_field_editor/public/mocks';
 import { getFieldByNameFactory } from './pure_helpers';
+import { uiActionsPluginMock } from '../../../../../src/plugins/ui_actions/public/mocks';
 
 const fieldsOne = [
   {
@@ -267,6 +268,7 @@ describe('IndexPattern Data Panel', () => {
       showNoDataPopover: jest.fn(),
       dropOntoWorkspace: jest.fn(),
       hasSuggestionForField: jest.fn(() => false),
+      uiActions: uiActionsPluginMock.createStartContract(),
     };
   });
 

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx

@@ -41,6 +41,7 @@ import { fieldExists } from './pure_helpers';
 import { Loader } from '../loader';
 import { esQuery, IIndexPattern } from '../../../../../src/plugins/data/public';
 import { IndexPatternFieldEditorStart } from '../../../../../src/plugins/index_pattern_field_editor/public';
+import { VISUALIZE_GEO_FIELD_TRIGGER } from '../../../../../src/plugins/ui_actions/public';
 
 export type Props = Omit<DatasourceDataPanelProps<IndexPatternPrivateState>, 'core'> & {
   data: DataPublicPluginStart;
@@ -62,29 +63,6 @@ function sortFields(fieldA: IndexPatternField, fieldB: IndexPatternField) {
   return fieldA.displayName.localeCompare(fieldB.displayName, undefined, { sensitivity: 'base' });
 }
 
-const supportedFieldTypes = new Set([
-  'string',
-  'number',
-  'boolean',
-  'date',
-  'ip',
-  'number_range',
-  'date_range',
-  'ip_range',
-  'histogram',
-  'document',
-]);
-
-const fieldTypeNames: Record<DataType, string> = {
-  document: i18n.translate('xpack.lens.datatypes.record', { defaultMessage: 'record' }),
-  string: i18n.translate('xpack.lens.datatypes.string', { defaultMessage: 'string' }),
-  number: i18n.translate('xpack.lens.datatypes.number', { defaultMessage: 'number' }),
-  boolean: i18n.translate('xpack.lens.datatypes.boolean', { defaultMessage: 'boolean' }),
-  date: i18n.translate('xpack.lens.datatypes.date', { defaultMessage: 'date' }),
-  ip: i18n.translate('xpack.lens.datatypes.ipAddress', { defaultMessage: 'IP' }),
-  histogram: i18n.translate('xpack.lens.datatypes.histogram', { defaultMessage: 'histogram' }),
-};
-
 // Wrapper around esQuery.buildEsQuery, handling errors (e.g. because a query can't be parsed) by
 // returning a query dsl object not matching anything
 function buildSafeEsQuery(
@@ -121,6 +99,7 @@ export function IndexPatternDataPanel({
   showNoDataPopover,
   dropOntoWorkspace,
   hasSuggestionForField,
+  uiActions,
 }: Props) {
   const { indexPatternRefs, indexPatterns, currentIndexPatternId } = state;
   const onChangeIndexPattern = useCallback(
@@ -233,6 +212,7 @@ export function IndexPatternDataPanel({
           existenceFetchTimeout={state.existenceFetchTimeout}
           dropOntoWorkspace={dropOntoWorkspace}
           hasSuggestionForField={hasSuggestionForField}
+          uiActions={uiActions}
         />
       )}
     </>
@@ -286,6 +266,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
   charts,
   dropOntoWorkspace,
   hasSuggestionForField,
+  uiActions,
 }: Omit<DatasourceDataPanelProps, 'state' | 'setState' | 'showNoDataPopover' | 'core'> & {
   data: DataPublicPluginStart;
   core: CoreStart;
@@ -309,6 +290,26 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
     isEmptyAccordionOpen: false,
     isMetaAccordionOpen: false,
   });
+
+  const fieldTypeNames: Record<DataType, string> = {
+    document: i18n.translate('xpack.lens.datatypes.record', { defaultMessage: 'record' }),
+    string: i18n.translate('xpack.lens.datatypes.string', { defaultMessage: 'string' }),
+    number: i18n.translate('xpack.lens.datatypes.number', { defaultMessage: 'number' }),
+    boolean: i18n.translate('xpack.lens.datatypes.boolean', { defaultMessage: 'boolean' }),
+    date: i18n.translate('xpack.lens.datatypes.date', { defaultMessage: 'date' }),
+    ip: i18n.translate('xpack.lens.datatypes.ipAddress', { defaultMessage: 'IP' }),
+    histogram: i18n.translate('xpack.lens.datatypes.histogram', { defaultMessage: 'histogram' }),
+  };
+  const visualizeGeoFieldTrigger = uiActions.getTrigger(VISUALIZE_GEO_FIELD_TRIGGER);
+  if (visualizeGeoFieldTrigger) {
+    fieldTypeNames.geo_point = i18n.translate('xpack.lens.datatypes.geoPoint', {
+      defaultMessage: 'geo_point',
+    });
+    fieldTypeNames.geo_shape = i18n.translate('xpack.lens.datatypes.geoShape', {
+      defaultMessage: 'geo_shape',
+    });
+  }
+
   const currentIndexPattern = indexPatterns[currentIndexPatternId];
   const allFields = currentIndexPattern.fields;
   const clearLocalState = () => setLocalState((s) => ({ ...s, nameFilter: '', typeFilter: [] }));
@@ -323,6 +324,23 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
   const editPermission = indexPatternFieldEditor.userPermissions.editIndexPattern();
 
   const unfilteredFieldGroups: FieldGroups = useMemo(() => {
+    const supportedFieldTypes = new Set([
+      'string',
+      'number',
+      'boolean',
+      'date',
+      'ip',
+      'number_range',
+      'date_range',
+      'ip_range',
+      'histogram',
+      'document',
+    ]);
+    if (visualizeGeoFieldTrigger) {
+      supportedFieldTypes.add('geo_point');
+      supportedFieldTypes.add('geo_shape');
+    }
+
     const containsData = (field: IndexPatternField) => {
       const overallField = currentIndexPattern.getFieldByName(field.name);
 
@@ -449,6 +467,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
     existenceFetchTimeout,
     currentIndexPattern,
     existingFields,
+    visualizeGeoFieldTrigger,
   ]);
 
   const fieldGroups: FieldGroups = useMemo(() => {
@@ -807,6 +826,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
             hasSuggestionForField={hasSuggestionForField}
             editField={editField}
             removeField={removeField}
+            uiActions={uiActions}
           />
         </EuiFlexItem>
       </EuiFlexGroup>

x-pack/plugins/lens/public/indexpattern_datasource/field_item.test.tsx

@@ -17,6 +17,7 @@ import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks';
 import { IndexPattern } from './types';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
 import { documentField } from './document_field';
+import { uiActionsPluginMock } from '../../../../../src/plugins/ui_actions/public/mocks';
 
 const chartsThemeService = chartPluginMock.createSetupContract().theme;
 
@@ -109,6 +110,7 @@ describe('IndexPattern Field Item', () => {
       itemIndex: 0,
       dropOntoWorkspace: () => {},
       hasSuggestionForField: () => false,
+      uiActions: uiActionsPluginMock.createStartContract(),
     };
 
     data.fieldFormats = ({