Skip to content

Commit 08864b2

Browse files
kibanamachinethomasneirynck
kibanamachine
and
thomasneirynck
authored
[Maps] Add draw wizard (#100278) (#100695)
Co-authored-by: Thomas Neirynck <thomas@elastic.co>
1 parent 2028d54 commit 08864b2

24 files changed

Lines changed: 483 additions & 48 deletions

File tree

‎x-pack/plugins/file_upload/public/api/index.ts‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
* 2.0.
66
*/
77

8-
import React from 'react';
9-
import { FileUploadComponentProps, lazyLoadModules } from '../lazy_load_bundle';
8+
import { lazyLoadModules } from '../lazy_load_bundle';
109
import type { IImporter, ImportFactoryOptions } from '../importer';
11-
import { IndexNameFormProps } from '../';
1210
import type { HasImportPermission, FindFileStructureResponse } from '../../common';
1311
import type { getMaxBytes, getMaxBytesFormatted } from '../importer/get_max_bytes';
12+
import { JsonUploadAndParseAsyncWrapper } from './json_upload_and_parse_async_wrapper';
13+
import { IndexNameFormAsyncWrapper } from './index_name_form_async_wrapper';
1414

1515
export interface FileUploadStartApi {
16-
getFileUploadComponent(): ReturnType<typeof getFileUploadComponent>;
17-
getIndexNameFormComponent(): Promise<React.ComponentType<IndexNameFormProps>>;
16+
FileUploadComponent: typeof JsonUploadAndParseAsyncWrapper;
17+
IndexNameFormComponent: typeof IndexNameFormAsyncWrapper;
1818
importerFactory: typeof importerFactory;
1919
getMaxBytes: typeof getMaxBytes;
2020
getMaxBytesFormatted: typeof getMaxBytesFormatted;
@@ -30,19 +30,8 @@ export interface GetTimeFieldRangeResponse {
3030
end: { epoch: number; string: string };
3131
}
3232

33-
export async function getFileUploadComponent(): Promise<
34-
React.ComponentType<FileUploadComponentProps>
35-
> {
36-
const fileUploadModules = await lazyLoadModules();
37-
return fileUploadModules.JsonUploadAndParse;
38-
}
39-
40-
export async function getIndexNameFormComponent(): Promise<
41-
React.ComponentType<IndexNameFormProps>
42-
> {
43-
const fileUploadModules = await lazyLoadModules();
44-
return fileUploadModules.IndexNameForm;
45-
}
33+
export const FileUploadComponent = JsonUploadAndParseAsyncWrapper;
34+
export const IndexNameFormComponent = IndexNameFormAsyncWrapper;
4635

4736
export async function importerFactory(
4837
format: string,

‎x-pack/plugins/file_upload/public/api/index_name_form_async_wrapper.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import React from 'react';
9+
import { EuiLoadingContent } from '@elastic/eui';
10+
import { lazyLoadModules } from '../lazy_load_bundle';
11+
import { IndexNameFormProps } from '../index';
12+
13+
interface State {
14+
IndexNameForm: React.ComponentType<IndexNameFormProps> | null;
15+
}
16+
17+
export class IndexNameFormAsyncWrapper extends React.Component<IndexNameFormProps, State> {
18+
state: State = {
19+
IndexNameForm: null,
20+
};
21+
22+
private _isMounted = false;
23+
24+
componentWillUnmount(): void {
25+
this._isMounted = false;
26+
}
27+
28+
componentDidMount() {
29+
this._isMounted = true;
30+
lazyLoadModules().then((modules) => {
31+
if (this._isMounted) {
32+
this.setState({
33+
IndexNameForm: modules.IndexNameForm,
34+
});
35+
}
36+
});
37+
}
38+
39+
render() {
40+
const { IndexNameForm } = this.state;
41+
return IndexNameForm ? <IndexNameForm {...this.props} /> : <EuiLoadingContent lines={3} />;
42+
}
43+
}

‎x-pack/plugins/file_upload/public/api/json_upload_and_parse_async_wrapper.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import React from 'react';
9+
import { EuiLoadingContent } from '@elastic/eui';
10+
import { FileUploadComponentProps, lazyLoadModules } from '../lazy_load_bundle';
11+
12+
interface State {
13+
JsonUploadAndParse: React.ComponentType<FileUploadComponentProps> | null;
14+
}
15+
16+
export class JsonUploadAndParseAsyncWrapper extends React.Component<
17+
FileUploadComponentProps,
18+
State
19+
> {
20+
state: State = {
21+
JsonUploadAndParse: null,
22+
};
23+
private _isMounted = false;
24+
25+
componentDidMount() {
26+
this._isMounted = true;
27+
lazyLoadModules().then((modules) => {
28+
if (this._isMounted) {
29+
this.setState({
30+
JsonUploadAndParse: modules.JsonUploadAndParse,
31+
});
32+
}
33+
});
34+
}
35+
36+
componentWillUnmount(): void {
37+
this._isMounted = false;
38+
}
39+
40+
render() {
41+
const { JsonUploadAndParse } = this.state;
42+
return JsonUploadAndParse ? (
43+
<JsonUploadAndParse {...this.props} />
44+
) : (
45+
<EuiLoadingContent lines={3} />
46+
);
47+
}
48+
}

‎x-pack/plugins/file_upload/public/lazy_load_bundle/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export interface FileUploadComponentProps {
3232

3333
let loadModulesPromise: Promise<LazyLoadedFileUploadModules>;
3434

35-
interface LazyLoadedFileUploadModules {
35+
export interface LazyLoadedFileUploadModules {
3636
JsonUploadAndParse: React.ComponentType<FileUploadComponentProps>;
3737
IndexNameForm: React.ComponentType<IndexNameFormProps>;
3838
importerFactory: (format: string, options: ImportFactoryOptions) => IImporter | undefined;

‎x-pack/plugins/file_upload/public/plugin.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
import { CoreStart, Plugin } from '../../../../src/core/public';
99
import {
1010
FileUploadStartApi,
11-
getFileUploadComponent,
11+
FileUploadComponent,
1212
importerFactory,
1313
hasImportPermission,
14-
getIndexNameFormComponent,
14+
IndexNameFormComponent,
1515
checkIndexExists,
1616
getTimeFieldRange,
1717
analyzeFile,
@@ -42,8 +42,8 @@ export class FileUploadPlugin
4242
public start(core: CoreStart, plugins: FileUploadStartDependencies): FileUploadStartApi {
4343
setStartServices(core, plugins);
4444
return {
45-
getFileUploadComponent,
46-
getIndexNameFormComponent,
45+
FileUploadComponent,
46+
IndexNameFormComponent,
4747
importerFactory,
4848
getMaxBytes,
4949
getMaxBytesFormatted,

‎x-pack/plugins/maps/common/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const GIS_API_PATH = `api/${APP_ID}`;
4141
export const INDEX_SETTINGS_API_PATH = `${GIS_API_PATH}/indexSettings`;
4242
export const FONTS_API_PATH = `${GIS_API_PATH}/fonts`;
4343
export const INDEX_SOURCE_API_PATH = `${GIS_API_PATH}/docSource`;
44+
export const INDEX_FEATURE_PATH = `/${GIS_API_PATH}/feature`;
4445
export const API_ROOT_PATH = `/${GIS_API_PATH}`;
4546

4647
export const MVT_GETTILE_API_PATH = 'mvt/getTile';

‎x-pack/plugins/maps/common/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
*/
77

88
export interface CreateDocSourceResp {
9+
indexPatternId?: string;
910
success: boolean;
1011
error?: Error;
1112
}

‎x-pack/plugins/maps/public/actions/map_actions.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { AnyAction, Dispatch } from 'redux';
1010
import { ThunkDispatch } from 'redux-thunk';
1111
import turfBboxPolygon from '@turf/bbox-polygon';
1212
import turfBooleanContains from '@turf/boolean-contains';
13-
1413
import { Filter, Query, TimeRange } from 'src/plugins/data/public';
1514
import { MapStoreState } from '../reducers/store';
1615
import {

‎x-pack/plugins/maps/public/classes/layers/file_upload_wizard/wizard.tsx‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ import React, { Component } from 'react';
1111
import { FeatureCollection } from 'geojson';
1212
import { EuiPanel } from '@elastic/eui';
1313
import { DEFAULT_MAX_RESULT_WINDOW, SCALING_TYPES } from '../../../../common/constants';
14-
import { getFileUpload } from '../../../kibana_services';
1514
import { GeoJsonFileSource } from '../../sources/geojson_file_source';
1615
import { VectorLayer } from '../../layers/vector_layer';
1716
import { createDefaultLayerDescriptor } from '../../sources/es_search_source';
1817
import { RenderWizardArguments } from '../../layers/layer_wizard_registry';
19-
import { FileUploadComponentProps, FileUploadGeoResults } from '../../../../../file_upload/public';
18+
import { FileUploadGeoResults } from '../../../../../file_upload/public';
2019
import { ES_FIELD_TYPES } from '../../../../../../../src/plugins/data/public';
20+
import { getFileUploadComponent } from '../../../kibana_services';
2121

2222
export enum UPLOAD_STEPS {
2323
CONFIGURE_UPLOAD = 'CONFIGURE_UPLOAD',
@@ -34,7 +34,6 @@ enum INDEXING_STAGE {
3434

3535
interface State {
3636
indexingStage: INDEXING_STAGE;
37-
fileUploadComponent: React.ComponentType<FileUploadComponentProps> | null;
3837
results?: FileUploadGeoResults;
3938
}
4039

@@ -43,12 +42,10 @@ export class ClientFileCreateSourceEditor extends Component<RenderWizardArgument
4342

4443
state: State = {
4544
indexingStage: INDEXING_STAGE.CONFIGURE,
46-
fileUploadComponent: null,
4745
};
4846

4947
componentDidMount() {
5048
this._isMounted = true;
51-
this._loadFileUploadComponent();
5249
}
5350

5451
componentWillUnmount() {
@@ -91,13 +88,6 @@ export class ClientFileCreateSourceEditor extends Component<RenderWizardArgument
9188
this.props.advanceToNextStep();
9289
});
9390

94-
async _loadFileUploadComponent() {
95-
const fileUploadComponent = await getFileUpload().getFileUploadComponent();
96-
if (this._isMounted) {
97-
this.setState({ fileUploadComponent });
98-
}
99-
}
100-
10191
_onFileSelect = (geojsonFile: FeatureCollection, name: string, previewCoverage: number) => {
10292
if (!this._isMounted) {
10393
return;
@@ -157,11 +147,8 @@ export class ClientFileCreateSourceEditor extends Component<RenderWizardArgument
157147
};
158148

159149
render() {
160-
if (!this.state.fileUploadComponent) {
161-
return null;
162-
}
150+
const FileUpload = getFileUploadComponent();
163151

164-
const FileUpload = this.state.fileUploadComponent;
165152
return (
166153
<EuiPanel>
167154
<FileUpload

‎x-pack/plugins/maps/public/classes/layers/icons/draw_layer_icon.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import React, { FunctionComponent } from 'react';
9+
10+
export const DrawLayerIcon: FunctionComponent = () => (
11+
<svg
12+
xmlns="http://www.w3.org/2000/svg"
13+
width="49"
14+
height="25"
15+
fill="none"
16+
viewBox="0 0 49 25"
17+
className="mapLayersWizardIcon"
18+
>
19+
<path
20+
className="mapLayersWizardIcon__background"
21+
d="M12.281 3l-6.625 7.625 1.657 8.938 35.218-.813v-13l-10.625-3.5-9.781 9.5L12.281 3z"
22+
/>
23+
<path
24+
className="mapLayersWizardIcon__highlight"
25+
fillRule="evenodd"
26+
d="M31.775 1.68l11.256 3.708v13.85l-36.133.834-1.777-9.593 7.114-8.189 9.875 8.778 9.665-9.388zm.262 1.14l-9.897 9.612-9.813-8.722-6.135 7.06 1.535 8.283 34.304-.792V6.111L32.037 2.82z"
27+
clipRule="evenodd"
28+
/>
29+
<circle cx="7.281" cy="19.5" r="2.5" className="mapLayersWizardIcon__highlight" />
30+
<circle cx="5.656" cy="10.25" r="2.5" className="mapLayersWizardIcon__highlight" />
31+
<circle cx="12.156" cy="3.625" r="2.5" className="mapLayersWizardIcon__highlight" />
32+
<circle cx="22" cy="11.6" r="2.5" className="mapLayersWizardIcon__highlight" />
33+
<circle cx="31.969" cy="2.5" r="2.5" className="mapLayersWizardIcon__highlight" />
34+
<circle cx="42.344" cy="6.125" r="2.5" className="mapLayersWizardIcon__highlight" />
35+
<circle cx="42.344" cy="19" r="2.5" className="mapLayersWizardIcon__highlight" />
36+
</svg>
37+
);

0 commit comments

Comments
 (0)