Revise import layer workflow to be separate from add layer workflow

2025-04-24 01:38:56 -04:00 · 2019-04-01 12:02:02 -06:00 · 2019-04-01 12:02:02 -06:00 · 3b35f5371d
commit 3b35f5371d
parent 265a0e3d61
10 changed files with 72 additions and 23 deletions
--- a/x-pack/plugins/file_upload/public/components/json_upload_and_parse.js
+++ b/x-pack/plugins/file_upload/public/components/json_upload_and_parse.js
@ -5,7 +5,7 @@
 */


-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {
  EuiFilePicker,
@ -17,8 +17,6 @@ import { triggerIndexing } from '../util/indexing_service';
 import _ from 'lodash';

 export function JsonUploadAndParse({ previewFile, defaultMessage, postProcessing, boolIndexData = false }) {
-  const [fileRef, setFileRef] = useState(null);
-  const [parsedFile, setParsedFile] = useState(null);

  return (
    <EuiFormRow
@ -37,13 +35,9 @@ export function JsonUploadAndParse({ previewFile, defaultMessage, postProcessing
          />
        )}
        onChange={async ([fileToImport]) => {
-          if (fileToImport !== fileRef) {
-            await setFileRef(fileToImport);
-            console.log(fileRef, fileToImport);
-            setParsedFile(await parseFile(fileRef, postProcessing));
-          }
-          const defaultLayerName = _.get(fileRef, 'name', 'fileToImport');
-          if (fileRef) {
+          const parsedFile = await parseFile(fileToImport, postProcessing);
+          const defaultLayerName = _.get(fileToImport, 'name', 'fileToImport');
+          if (fileToImport) {
            // Callback to preview file if needed
            if (previewFile) {
              previewFile(parsedFile, defaultLayerName);
--- a/x-pack/plugins/file_upload/public/util/file_parser.js
+++ b/x-pack/plugins/file_upload/public/util/file_parser.js
@ -4,7 +4,7 @@
 * you may not use this file except in compliance with the Elastic License.
 */

-export async function parseFile(file, postProcessing, FileReader = window.FileReader) {
+export async function parseFile(file, postProcessing = null, FileReader = window.FileReader) {
  return new Promise((resolve, reject) => {
    const fr = new FileReader();
    fr.onload = ({ target: { result } }) => {
--- a/x-pack/plugins/maps/public/components/gis_map/index.js
+++ b/x-pack/plugins/maps/public/components/gis_map/index.js
@ -15,6 +15,7 @@ function mapStateToProps(state = {}) {
  return {
    layerDetailsVisible: flyoutDisplay === FLYOUT_STATE.LAYER_PANEL,
    addLayerVisible: flyoutDisplay === FLYOUT_STATE.ADD_LAYER_WIZARD,
+    importFileVisible: flyoutDisplay === FLYOUT_STATE.IMPORT_FILE_WIZARD,
    noFlyoutVisible: flyoutDisplay === FLYOUT_STATE.NONE,
    isFullScreen: getIsFullScreen(state),
    refreshConfig: getRefreshConfig(state),
--- a/x-pack/plugins/maps/public/components/gis_map/view.js
+++ b/x-pack/plugins/maps/public/components/gis_map/view.js
@ -59,6 +59,7 @@ export class GisMap extends Component {
    const {
      layerDetailsVisible,
      addLayerVisible,
+      importFileVisible,
      noFlyoutVisible,
      isFullScreen,
      exitFullScreen,
@ -71,7 +72,10 @@ export class GisMap extends Component {
      currentPanel = null;
    } else if (addLayerVisible) {
      currentPanelClassName = 'mapMapLayerPanel-isVisible';
-      currentPanel = <AddLayerPanel/>;
+      currentPanel = <AddLayerPanel importView={false}/>;
+    } else if (importFileVisible) {
+      currentPanelClassName = 'mapMapLayerPanel-isVisible';
+      currentPanel = <AddLayerPanel importView={true}/>;
    } else if (layerDetailsVisible) {
      currentPanelClassName = 'mapMapLayerPanel-isVisible';
      currentPanel = (
--- a/x-pack/plugins/maps/public/components/layer_addpanel/view.js
+++ b/x-pack/plugins/maps/public/components/layer_addpanel/view.js
@ -22,6 +22,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { triggerIndexing } from '../../../../file_upload/public/';
+import { GeojsonFileSource } from '../../shared/layers/sources/client_file_source';
 import _ from 'lodash';

 export class AddLayerPanel extends Component {
@ -125,12 +126,14 @@ export class AddLayerPanel extends Component {
    );
  }

-  _renderSourceEditor() {
-    const editorProperties = {
+  _getEditorProperties() {
+    return {
      onPreviewSource: this._previewLayer,
      inspectorAdapters: this.props.inspectorAdapters,
    };
+  }

+  _renderSourceEditor() {
    const Source = ALL_SOURCES.find((Source) => {
      return Source.type === this.state.sourceType;
    });
@ -153,7 +156,29 @@ export class AddLayerPanel extends Component {
        </EuiButtonEmpty>
        <EuiSpacer size="s" />
        <EuiPanel>
-          {Source.renderEditor(editorProperties)}
+          {Source.renderEditor(this._getEditorProperties())}
+        </EuiPanel>
+      </Fragment>
+    );
+  }
+
+  _renderFileImportEditor() {
+    return (
+      <Fragment>
+        <EuiButtonEmpty
+          size="xs"
+          flush="left"
+          onClick={this._clearSource}
+          iconType="arrowLeft"
+        >
+          <FormattedMessage
+            id="xpack.maps.addLayerPanel.changeDataSourceButtonLabel"
+            defaultMessage="Change data source"
+          />
+        </EuiButtonEmpty>
+        <EuiSpacer size="s" />
+        <EuiPanel>
+          {GeojsonFileSource.renderEditor(this._getEditorProperties())}
        </EuiPanel>
      </Fragment>
    );
@ -167,7 +192,7 @@ export class AddLayerPanel extends Component {
    return this._renderSourceEditor();
  }

-  _renderFlyout() {
+  _renderFlyout(importView) {
    return (
      <EuiFlexGroup
        direction="column"
@ -188,7 +213,11 @@ export class AddLayerPanel extends Component {
          className="mapLayerPanel__body"
          data-test-subj="layerAddForm"
        >
-          {this._renderAddLayerForm()}
+          {
+            importView
+              ? this._renderFileImportEditor()
+              : this._renderAddLayerForm()
+          }
        </EuiFlyoutBody>

        <EuiFlyoutFooter className="mapLayerPanel__footer">
@ -215,6 +244,7 @@ export class AddLayerPanel extends Component {
  }

  render() {
-    return (this.props.flyoutVisible) ? this._renderFlyout() : null;
+    const { importView, flyoutVisible } = this.props;
+    return (flyoutVisible) ? this._renderFlyout(importView) : null;
  }
 }
--- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/index.js
+++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/index.js
@ -23,6 +23,9 @@ function mapDispatchToProps(dispatch) {
    showAddLayerWizard: () => {
      dispatch(updateFlyout(FLYOUT_STATE.ADD_LAYER_WIZARD));
    },
+    showFileImportWizard: () => {
+      dispatch(updateFlyout(FLYOUT_STATE.IMPORT_FILE_WIZARD));
+    },
  };
 }

--- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js
+++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js
@ -15,8 +15,9 @@ import {
 import { LayerTOC } from './layer_toc';
 import { FormattedMessage } from '@kbn/i18n/react';

-export function LayerControl({ isReadOnly, showAddLayerWizard }) {
+export function LayerControl({ isReadOnly, showAddLayerWizard, showFileImportWizard }) {
  let addLayer;
+  let importFile;
  if (!isReadOnly) {
    addLayer = (
      <EuiFlexItem grow={false}>
@ -33,6 +34,21 @@ export function LayerControl({ isReadOnly, showAddLayerWizard }) {
        </EuiButtonEmpty>
      </EuiFlexItem>
    );
+    importFile = (
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          size="xs"
+          flush="right"
+          onClick={showFileImportWizard}
+          data-test-subj="importFileButton"
+        >
+          <FormattedMessage
+            id="xpack.maps.layerControl.importFileButtonLabel"
+            defaultMessage="Import file"
+          />
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    );
  }

  return (
@ -54,6 +70,7 @@ export function LayerControl({ isReadOnly, showAddLayerWizard }) {
              </h2>
            </EuiTitle>
          </EuiFlexItem>
+          {importFile}
          {addLayer}
        </EuiFlexGroup>
      </EuiFlexItem>
--- a/x-pack/plugins/maps/public/shared/layers/sources/client_file_source/create_client_file_source_editor.js
+++ b/x-pack/plugins/maps/public/shared/layers/sources/client_file_source/create_client_file_source_editor.js
@ -6,10 +6,10 @@


 import React from 'react';
-import { FileUploadAndParse } from '../../../../../../file_upload/public/';
+import { JsonUploadAndParse } from '../../../../../../file_upload/public/';

 export function ClientFileCreateSourceEditor({ previewGeojsonFile }) {
  return (
-    <FileUploadAndParse previewFile={previewGeojsonFile}/>
+    <JsonUploadAndParse previewFile={previewGeojsonFile}/>
  );
 }
--- a/x-pack/plugins/maps/public/shared/layers/sources/client_file_source/geojson_file_source.js
+++ b/x-pack/plugins/maps/public/shared/layers/sources/client_file_source/geojson_file_source.js
@ -14,7 +14,6 @@ export class GeojsonFileSource extends AbstractVectorSource {
  static type = GEOJSON_FILE;
  static title = 'GeoJSON Vector File';
  static description = 'Client-provided GeoJSON vector shape file';
-  static icon = 'emsApp';

  static createDescriptor(featureCollection, name) {
    return {
--- a/x-pack/plugins/maps/public/store/ui.js
+++ b/x-pack/plugins/maps/public/store/ui.js
@ -13,7 +13,8 @@ export const SET_READ_ONLY = 'SET_READ_ONLY';
 export const FLYOUT_STATE = {
  NONE: 'NONE',
  LAYER_PANEL: 'LAYER_PANEL',
-  ADD_LAYER_WIZARD: 'ADD_LAYER_WIZARD'
+  ADD_LAYER_WIZARD: 'ADD_LAYER_WIZARD',
+  IMPORT_FILE_WIZARD: 'IMPORT_FILE_WIZARD',
 };

 const INITIAL_STATE = {