validate url of Add data modal (#1837)

* fix modal styles Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com> * validate url input Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com> * add http to url regexp Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com> * fix linter error Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com>
keplergl · Jun 1, 2022 · 9bee093 · 9bee093
1 parent b7d8edf
commit 9bee093
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/examples/demo-app/src/components/load-data-modal/load-remote-map.js b/examples/demo-app/src/components/load-data-modal/load-remote-map.js
@@ -25,6 +25,7 @@ import styled from 'styled-components';
 import {CORS_LINK} from '../../constants/default-settings';
 import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
 import {Button} from 'kepler.gl/components';
+import {validateUrl} from '../../utils/url';
 
 const propTypes = {
   onLoadRemoteMap: PropTypes.func.isRequired
@@ -92,26 +93,33 @@ const Error = ({error, url}) => (
 
 class LoadRemoteMap extends Component {
   state = {
-    dataUrl: ''
+    dataUrl: '',
+    error: null,
+    submitted: false
   };
 
   onMapUrlChange = e => {
-    // TODO: validate url
     this.setState({
-      dataUrl: e.target.value
+      dataUrl: e.target.value,
+      error: !validateUrl(e.target.value) ? {message: 'Incorrect URL'} : null
     });
   };
 
   onLoadRemoteMap = () => {
-    const {dataUrl} = this.state;
-    if (!dataUrl) {
+    const {dataUrl, error} = this.state;
+
+    this.setState({submitted: true});
+
+    if (!dataUrl || error) {
       return;
     }
 
     this.props.onLoadRemoteMap({dataUrl});
   };
 
   render() {
+    const displayedError = this.props.error || this.state.submitted ? this.state.error : null;
+
     return (
       <div>
         <InputForm>
@@ -138,13 +146,13 @@ class LoadRemoteMap extends Component {
               type="text"
               placeholder="Url"
               value={this.state.dataUrl}
-              error={this.props.error}
+              error={displayedError}
             />
             <Button type="submit" cta size="small" onClick={this.onLoadRemoteMap}>
               <FormattedMessage id={'loadRemoteMap.fetch'} />
             </Button>
           </StyledFromGroup>
-          {this.props.error && <Error error={this.props.error} url={this.props.option.dataUrl} />}
+          {displayedError && <Error error={displayedError} url={this.props.option?.dataUrl} />}
         </InputForm>
       </div>
     );

diff --git a/examples/demo-app/src/utils/url.js b/examples/demo-app/src/utils/url.js
@@ -66,3 +66,11 @@ parseUri.options = {
     loose: /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
   }
 };
+
+/**
+ * Validates an url
+ * @param str
+ */
+export function validateUrl(str) {
+  return str?.match(/^(ftp|http|https?):\/\/+(www\.)?[a-z0-9\-\.]{3,}\.[a-z]{3}$/);
+}
diff --git a/src/components/modal-container.tsx b/src/components/modal-container.tsx
@@ -20,6 +20,7 @@
 
 import React, {Component} from 'react';
 import {css} from 'styled-components';
+import {findDOMNode} from 'react-dom';
 import {createSelector} from 'reselect';
 import get from 'lodash.get';
 import document from 'global/document';
@@ -274,6 +275,7 @@ export default function ModalContainerFactory(
         mapState,
         uiState,
         visState,
+        rootNode,
         visStateActions,
         uiStateActions,
         providerState
@@ -545,6 +547,7 @@ export default function ModalContainerFactory(
 
       return this.props.rootNode ? (
         <ModalDialog
+          parentSelector={() => findDOMNode(rootNode)}
           isOpen={Boolean(currentModal)}
           onCancel={this._closeModal}
           {...modalProps}

diff --git a/src/components/side-panel/common/types.ts b/src/components/side-panel/common/types.ts
@@ -59,7 +59,7 @@ export type DatasetItemProps = {
 };
 
 export type SourceDataSelectorProps = {
-  dataId: string | string[];
+  dataId: string | string[] | null;
   datasets: Datasets;
   disabled: boolean;
   defaultValue?: string;