[Chores] Fixed security vulnerabilities and added new factories (#1294)

* [Chores] Fixed some dependency vulnerability Added new factories and tests updated components to functional shape

Signed-off-by: Giuseppe Macri <macri.giuseppe@gmail.com>

.travis.yml

@@ -30,5 +30,4 @@ after_success:
 script:
   - npm run lint
   - npm run coveralls
-  - fossa
 cache: yarn

package.json

@@ -239,16 +239,19 @@
     "webpack-stats-plugin": "^0.2.1"
   },
   "resolutions": {
-    "lodash": "4.17.19",
-    "dot-prop": "5.1.1",
-    "minimist": "1.2.3",
-    "jpeg-js": "0.4.0",
     "@loaders.gl/core": "^2.3.0-alpha.9",
     "@loaders.gl/csv": "^2.3.0-alpha.9",
     "@loaders.gl/gltf": "^2.3.0-alpha.9",
     "@loaders.gl/json": "^2.3.0-alpha.9",
     "@loaders.gl/loader-utils": "^2.3.0-alpha.9",
-    "@loaders.gl/polyfills": "^2.3.0-alpha.9"
+    "@loaders.gl/polyfills": "^2.3.0-alpha.9",
+    "dot-prop": "5.1.1",
+    "kind-of": "6.0.3",
+    "jpeg-js": "0.4.0",
+    "lodash": "4.17.19",
+    "minimist": "1.2.3",
+    "node-fetch": "2.6.1",
+    "tough-cookie": "2.3.0"
   },
   "peerDependencies": {
     "react": "^16.3",

src/components/index.js

@@ -55,7 +55,7 @@ export {default as LayerPanelFactory} from './side-panel/layer-panel/layer-panel
 export {default as LayerPanelHeaderFactory} from './side-panel/layer-panel/layer-panel-header';
 export {default as LayerConfiguratorFactory} from './side-panel/layer-panel/layer-configurator';
 export {default as TextLabelPanelFactory} from './side-panel/layer-panel/text-label-panel';
-export {LayerConfigGroupLabelFactory} from './side-panel/layer-panel/layer-config-group';
+export {default as LayerConfigGroupLabelFactory} from './side-panel/layer-panel/layer-config-group';
 
 export {default as SourceDataCatalogFactory} from './side-panel/common/source-data-catalog';
 export {default as SourceDataSelectorFactory} from './side-panel/common/source-data-selector';
@@ -153,8 +153,11 @@ export {DatasetSquare} from './common/styled-components';
 export {default as ActionPanel, ActionPanelItem} from 'components/common/action-panel';
 
 // side pane components
-export {default as LayerTypeSelector} from './side-panel/layer-panel/layer-type-selector';
+export {default as LayerTypeSelectorFactory} from './side-panel/layer-panel/layer-type-selector';
+export {default as LayerTypeDropdownListFactory} from './side-panel/layer-panel/layer-type-dropdown-list';
+export {default as LayerTypeListItemFactory} from './side-panel/layer-panel/layer-type-list-item';
 export {ConfigGroupCollapsibleContent} from './side-panel/layer-panel/layer-config-group';
+export {default as ColumnSelectorFactory} from './side-panel/layer-panel/column-selector';
 export {default as FilterPanelHeaderFactory} from './side-panel/filter-panel/filter-panel-header';
 export {default as StyledDropdownSelect} from './common/item-selector/item-selector';
 export {

src/components/side-panel/layer-panel/column-selector.js

@@ -0,0 +1,68 @@
+// Copyright (c) 2020 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import styled from 'styled-components';
+import {FormattedMessage} from 'localization';
+import {PanelLabel} from '../..';
+import FieldSelectorFactory from 'components/common/field-selector';
+import {validateColumn} from 'reducers/vis-state-merger';
+
+const ColumnRow = styled.div`
+  display: flex;
+  margin-bottom: 8px;
+  align-items: center;
+`;
+
+const ColumnName = styled.div`
+  width: 25%;
+`;
+
+const ColumnSelect = styled.div`
+  width: 75%;
+`;
+
+ColumnSelectorFactory.deps = [FieldSelectorFactory];
+
+function ColumnSelectorFactory(FieldSelector) {
+  const ColumnSelector = ({column, columns, label, allFields, onSelect, fieldPairs}) => (
+    <ColumnRow className="layer-config__column__selector">
+      <ColumnName className="layer-config__column__name">
+        <PanelLabel>
+          <FormattedMessage id={`columns.${label}`} />
+        </PanelLabel>
+        {!column.optional ? <PanelLabel>{`  *`}</PanelLabel> : null}
+      </ColumnName>
+      <ColumnSelect className="layer-config__column__select">
+        <FieldSelector
+          suggested={fieldPairs}
+          error={!validateColumn(column, columns, allFields)}
+          fields={allFields}
+          value={column.value}
+          erasable={Boolean(column.optional)}
+          onSelect={onSelect}
+        />
+      </ColumnSelect>
+    </ColumnRow>
+  );
+  return ColumnSelector;
+}
+
+export default ColumnSelectorFactory;

src/components/side-panel/layer-panel/layer-column-config.js

@@ -18,132 +18,96 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import {FormattedMessage} from 'localization';
-import {createSelector} from 'reselect';
-
 import {PanelLabel, SidePanelSection} from 'components/common/styled-components';
-import FieldSelectorFactory from 'components/common/field-selector';
-import {validateColumn} from 'reducers/vis-state-merger';
+import ColumnSelectorFactory from './column-selector';
 
 const TopRow = styled.div`
   display: flex;
   justify-content: space-between;
 `;
+
 LayerColumnConfigFactory.deps = [ColumnSelectorFactory];
-function LayerColumnConfigFactory(ColumnSelector) {
-  class LayerColumnConfig extends Component {
-    static propTypes = {
-      columns: PropTypes.object.isRequired,
-      fields: PropTypes.arrayOf(PropTypes.any).isRequired,
-      assignColumnPairs: PropTypes.func.isRequired,
-      assignColumn: PropTypes.func.isRequired,
-      updateLayerConfig: PropTypes.func.isRequired,
-      columnPairs: PropTypes.object,
-      fieldPairs: PropTypes.arrayOf(PropTypes.any),
-      columnLabels: PropTypes.object
-    };
 
-    columnPairs = props => props.columnPairs;
-    fieldPairs = props => props.fieldPairs;
-    fieldPairsSelector = createSelector(
-      this.columnPairs,
-      this.fieldPairs,
-      (columnPairs, fieldPairs) =>
+function LayerColumnConfigFactory(ColumnSelector) {
+  const LayerColumnConfig = ({
+    columnPairs,
+    fieldPairs,
+    columns,
+    columnLabels,
+    fields,
+    updateLayerConfig,
+    assignColumn,
+    assignColumnPairs
+  }) => {
+    const enhancedFieldPairs = useMemo(
+      () =>
         columnPairs && fieldPairs
           ? fieldPairs.map(fp => ({
               name: fp.defaultName,
               type: 'point',
               pair: fp.pair
             }))
-          : null
+          : null,
+      [columnPairs, fieldPairs]
     );
 
-    _updateColumn(key, value) {
-      const {columnPairs, assignColumnPairs, assignColumn} = this.props;
+    const onUpdateColumn = useCallback(
+      (key, value) => {
+        const assignedColumns =
+          value && value.pair && columnPairs
+            ? assignColumnPairs(key, value.pair)
+            : assignColumn(key, value);
 
-      const columns =
-        value && value.pair && columnPairs
-          ? assignColumnPairs(key, value.pair)
-          : assignColumn(key, value);
-
-      this.props.updateLayerConfig({columns});
-    }
+        updateLayerConfig({columns: assignedColumns});
+      },
+      [updateLayerConfig, columnPairs, assignColumnPairs, assignColumn]
+    );
 
-    render() {
-      const {columns, columnLabels, fields} = this.props;
+    return (
+      <div>
+        <SidePanelSection>
+          <div className="layer-config__column">
+            <TopRow>
+              <PanelLabel>
+                <FormattedMessage id={'columns.title'} />
+              </PanelLabel>
+              <PanelLabel>
+                <FormattedMessage id="layer.required" />
+              </PanelLabel>
+            </TopRow>
+            {Object.keys(columns).map(key => (
+              <ColumnSelector
+                column={columns[key]}
+                columns={columns}
+                label={(columnLabels && columnLabels[key]) || key}
+                key={key}
+                allFields={fields}
+                fieldPairs={enhancedFieldPairs}
+                onSelect={val => onUpdateColumn(key, val)}
+              />
+            ))}
+          </div>
+        </SidePanelSection>
+      </div>
+    );
+  };
 
-      const fieldPairs = this.fieldPairsSelector(this.props);
+  LayerColumnConfig.propTypes = {
+    columns: PropTypes.object.isRequired,
+    fields: PropTypes.arrayOf(PropTypes.any).isRequired,
+    assignColumnPairs: PropTypes.func.isRequired,
+    assignColumn: PropTypes.func.isRequired,
+    updateLayerConfig: PropTypes.func.isRequired,
+    columnPairs: PropTypes.object,
+    fieldPairs: PropTypes.arrayOf(PropTypes.any),
+    columnLabels: PropTypes.object
+  };
 
-      return (
-        <div>
-          <SidePanelSection>
-            <div className="layer-config__column">
-              <TopRow>
-                <PanelLabel>
-                  <FormattedMessage id={'columns.title'} />
-                </PanelLabel>
-                <PanelLabel>
-                  <FormattedMessage id="layer.required" />
-                </PanelLabel>
-              </TopRow>
-              {Object.keys(columns).map(key => (
-                <ColumnSelector
-                  column={columns[key]}
-                  columns={columns}
-                  label={(columnLabels && columnLabels[key]) || key}
-                  key={key}
-                  allFields={fields}
-                  fieldPairs={fieldPairs}
-                  onSelect={val => this._updateColumn(key, val)}
-                />
-              ))}
-            </div>
-          </SidePanelSection>
-        </div>
-      );
-    }
-  }
   return LayerColumnConfig;
 }
-ColumnSelectorFactory.deps = [FieldSelectorFactory];
-function ColumnSelectorFactory(FieldSelector) {
-  const ColumnSelector = ({column, columns, label, allFields, onSelect, fieldPairs}) => (
-    <ColumnRow className="layer-config__column__selector">
-      <ColumnName className="layer-config__column__name">
-        <PanelLabel>
-          <FormattedMessage id={`columns.${label}`} />
-        </PanelLabel>
-        {!column.optional ? <PanelLabel>{`  *`}</PanelLabel> : null}
-      </ColumnName>
-      <ColumnSelect className="layer-config__column__select">
-        <FieldSelector
-          suggested={fieldPairs}
-          error={!validateColumn(column, columns, allFields)}
-          fields={allFields}
-          value={column.value}
-          erasable={Boolean(column.optional)}
-          onSelect={onSelect}
-        />
-      </ColumnSelect>
-    </ColumnRow>
-  );
-  return ColumnSelector;
-}
-
-const ColumnRow = styled.div`
-  display: flex;
-  margin-bottom: 8px;
-  align-items: center;
-`;
-
-const ColumnName = styled.div`
-  width: 25%;
-`;
-const ColumnSelect = styled.div`
-  width: 75%;
-`;
 
 export default LayerColumnConfigFactory;

src/components/side-panel/layer-panel/layer-config-group.js

@@ -101,6 +101,7 @@ const ConfigGroupContent = styled.div`
 `;
 
 LayerConfigGroupLabelFactory.deps = [InfoHelperFactory];
+
 export function LayerConfigGroupLabelFactory(InfoHelper) {
   const StyledLayerConfigGroupLabel = styled.div`
     border-left: ${props => props.theme.layerConfigGroupLabelBorderLeft} solid
@@ -135,6 +136,7 @@ export function LayerConfigGroupLabelFactory(InfoHelper) {
 }
 
 LayerConfigGroupFactory.deps = [LayerConfigGroupLabelFactory];
+
 function LayerConfigGroupFactory(LayerConfigGroupLabel) {
   class LayerConfigGroup extends Component {
     static defaultProps = {

src/components/side-panel/layer-panel/layer-configurator.js

@@ -29,7 +29,7 @@ import ItemSelector from 'components/common/item-selector/item-selector';
 
 import VisConfigByFieldSelectorFactory from './vis-config-by-field-selector';
 import LayerColumnConfigFactory from './layer-column-config';
-import LayerTypeSelector from './layer-type-selector';
+import LayerTypeSelectorFactory from './layer-type-selector';
 import DimensionScaleSelector from './dimension-scale-selector';
 import ColorSelector from './color-selector';
 import SourceDataSelectorFactory from 'components/side-panel/common/source-data-selector';
@@ -87,7 +87,8 @@ LayerConfiguratorFactory.deps = [
   TextLabelPanelFactory,
   LayerConfigGroupFactory,
   ChannelByValueSelectorFactory,
-  LayerColumnConfigFactory
+  LayerColumnConfigFactory,
+  LayerTypeSelectorFactory
 ];
 
 export default function LayerConfiguratorFactory(
@@ -96,7 +97,8 @@ export default function LayerConfiguratorFactory(
   TextLabelPanel,
   LayerConfigGroup,
   ChannelByValueSelector,
-  LayerColumnConfig
+  LayerColumnConfig,
+  LayerTypeSelector
 ) {
   class LayerConfigurator extends Component {
     static propTypes = {