[Chore]: Technical: add types for side panel root components (#1822)

* add types for side panel root components

Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com>

* fix linting failure

Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com>

* add changes due to code review

Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com>

* handle nullish aggregation

Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com>

src/components/side-panel.tsx

@@ -18,11 +18,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {useCallback, useMemo, ComponentType} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {FormattedMessage} from 'localization';
-import {Datasets, Filter, InteractionConfig, MapStyle} from '../reducers';
-import {Layer, LayerClassesType} from '../layers';
-import {UiState} from 'reducers/ui-state-updaters';
 
 import {
   EXPORT_DATA_ID,
@@ -48,43 +45,7 @@ import PanelTitleFactory from './side-panel/panel-title';
 
 import styled from 'styled-components';
 import get from 'lodash.get';
-
-import * as MapStyleActions from 'actions/map-style-actions';
-import * as VisStateActions from 'actions/vis-state-actions';
-import * as MapStateActions from 'actions/map-state-actions';
-import * as UIStateActions from 'actions/ui-state-actions';
-
-type SidePanelItem = {
-  id: string;
-  label: string;
-  iconComponent: ComponentType<any>;
-  component?: ComponentType<any>;
-};
-
-type SidePanelProps = {
-  appName: string;
-  appWebsite: string;
-  filters: Filter[];
-  interactionConfig: InteractionConfig;
-  layerBlending: string;
-  layers: Layer[];
-  layerClasses: LayerClassesType;
-  layerOrder: number[];
-  mapStyle: MapStyle;
-  onSaveMap?: () => void;
-  width: number;
-  mapInfo: {title: string; description: string};
-  datasets: Datasets;
-  uiStateActions: typeof UIStateActions;
-  visStateActions: typeof VisStateActions;
-  mapStateActions: typeof MapStateActions;
-  mapStyleActions: typeof MapStyleActions;
-  uiState: UiState;
-  availableProviders: {hasShare: boolean; hasStorage: boolean};
-  mapSaved?: string | null;
-  panels: SidePanelItem[];
-  version: string;
-};
+import {SidePanelProps} from './types';
 
 export const StyledSidePanelContent = styled.div`
   ${props => props.theme.sidePanelScrollBar};

src/components/side-panel/filter-manager.js → src/components/side-panel/filter-manager.tsx

@@ -19,30 +19,45 @@
 // THE SOFTWARE.
 
 import React, {useCallback, useMemo} from 'react';
-import PropTypes from 'prop-types';
 import {FormattedMessage} from 'localization';
 import {Button, SidePanelDivider, SidePanelSection} from 'components/common/styled-components';
 import {Add} from 'components/common/icons';
 import SourceDataCatalogFactory from './common/source-data-catalog';
 import FilterPanelFactory from './filter-panel/filter-panel';
+import {Datasets, Filter} from 'reducers';
+import {Layer} from 'layers';
+import * as VisStateActions from 'actions/vis-state-actions';
+import {ActionHandler} from 'actions';
+
+type FilterManagerProps = {
+  filters: Filter[];
+  datasets: Datasets;
+  layers: Layer[];
+  showDatasetTable: ActionHandler<typeof VisStateActions.showDatasetTable>;
+  updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
+  visStateActions: typeof VisStateActions;
+};
 
 FilterManagerFactory.deps = [SourceDataCatalogFactory, FilterPanelFactory];
 
-function FilterManagerFactory(SourceDataCatalog, FilterPanel) {
+function FilterManagerFactory(
+  SourceDataCatalog: ReturnType<typeof SourceDataCatalogFactory>,
+  FilterPanel: ReturnType<typeof FilterPanelFactory>
+) {
   const FilterManager = ({
     filters = [],
     datasets,
     layers,
     showDatasetTable,
     updateTableColor,
     visStateActions
-  }) => {
+  }: FilterManagerProps) => {
     const {
       addFilter,
       enlargeFilter,
       removeFilter,
       setFilter,
-      toggleAnimation,
+      toggleFilterAnimation,
       toggleFilterFeature
     } = visStateActions;
     const isAnyFilterAnimating = filters.some(f => f.isAnimating);
@@ -80,7 +95,7 @@ function FilterManagerFactory(SourceDataCatalog, FilterPanel) {
               isAnyFilterAnimating={isAnyFilterAnimating}
               removeFilter={() => removeFilter(idx)}
               enlargeFilter={() => enlargeFilter(idx)}
-              toggleAnimation={() => toggleAnimation(idx)}
+              toggleAnimation={() => toggleFilterAnimation(idx)}
               toggleFilterFeature={() => toggleFilterFeature(idx)}
               setFilter={setFilter}
             />
@@ -99,18 +114,6 @@ function FilterManagerFactory(SourceDataCatalog, FilterPanel) {
     );
   };
 
-  FilterManager.propTypes = {
-    datasets: PropTypes.object,
-    layers: PropTypes.arrayOf(PropTypes.any).isRequired,
-    filters: PropTypes.arrayOf(PropTypes.any).isRequired,
-    showDatasetTable: PropTypes.func.isRequired,
-    updateTableColor: PropTypes.func.isRequired,
-    visStateActions: PropTypes.object.isRequired,
-
-    // fields can be undefined when dataset is not selected
-    fields: PropTypes.arrayOf(PropTypes.any)
-  };
-
   return FilterManager;
 }
 

src/components/side-panel/filter-panel/filter-panel.tsx

@@ -33,6 +33,7 @@ import PolygonFilterPanelFactory from 'components/filters/filter-panels/polygon-
 import {Filter} from 'reducers/vis-state-updaters';
 import {Field} from 'utils/table-utils/kepler-table';
 import {FilterPanelProps} from 'components/filters/filter-panels/types';
+import {Layer} from 'layers';
 
 const StyledFilterPanel = styled.div`
   margin-bottom: 12px;
@@ -41,6 +42,11 @@ const StyledFilterPanel = styled.div`
 
 interface FilterPanelPropsImpl extends Omit<FilterPanelProps, 'allAvailableFields'> {
   filters: Filter[];
+  layers: ReadonlyArray<Layer>;
+  isAnyFilterAnimating: boolean;
+  enlargeFilter: () => void;
+  toggleAnimation: () => void;
+  toggleFilterFeature: () => void;
 }
 
 FilterPanelFactory.deps = [

src/components/side-panel/interaction-manager.js → src/components/side-panel/interaction-manager.tsx

@@ -19,13 +19,26 @@
 // THE SOFTWARE.
 
 import React from 'react';
+import {Datasets, InteractionConfig} from 'reducers';
 import InteractionPanelFactory from './interaction-panel/interaction-panel';
+import * as VisStateActions from 'actions/vis-state-actions';
+
+type InteractionManagerProps = {
+  interactionConfig: InteractionConfig;
+  datasets: Datasets;
+  visStateActions: typeof VisStateActions;
+};
 
 InteractionManagerFactory.deps = [InteractionPanelFactory];
 
-function InteractionManagerFactory(InteractionPanel) {
-  const InteractionManager = ({interactionConfig, datasets, visStateActions}) => {
+function InteractionManagerFactory(InteractionPanel: ReturnType<typeof InteractionPanelFactory>) {
+  const InteractionManager = ({
+    interactionConfig,
+    datasets,
+    visStateActions
+  }: InteractionManagerProps) => {
     const {interactionConfigChange: onConfigChange} = visStateActions;
+
     return (
       <div className="interaction-manager">
         {Object.keys(interactionConfig).map(key => (

src/components/side-panel/interaction-panel/tooltip-config.tsx

@@ -36,6 +36,8 @@ import ItemSelector from 'components/common/item-selector/item-selector';
 import {COMPARE_TYPES} from 'constants/tooltip';
 import FieldSelectorFactory from '../../common/field-selector';
 import {GEOCODER_DATASET_NAME} from 'constants/default-settings';
+import KeplerTable from 'utils/table-utils/kepler-table';
+import {Datasets} from 'reducers';
 
 const TooltipConfigWrapper = styled.div`
   .item-selector > div > div {
@@ -83,18 +85,7 @@ type TooltipConfigProps = {
     compareMode: boolean;
     compareType: string[];
   }) => void;
-  datasets: {
-    [key: string]: {
-      id: string;
-      fields: {
-        format?: string;
-        id?: string;
-        name?: string;
-        fieldIdx?: number;
-        type?: number;
-      }[];
-    };
-  };
+  datasets: Datasets;
   intl: IntlShape;
 };
 
@@ -113,20 +104,14 @@ type DatasetTooltipConfigProps = {
     compareMode: boolean;
     compareType: string[];
   }) => void;
-  dataset: {
-    id: string;
-    fields: {
-      format?: string;
-      id?: string;
-      name?: string;
-      fieldIdx?: number;
-      type?: number;
-    }[];
-  };
+  dataset: KeplerTable;
 };
 
 TooltipConfigFactory.deps = [DatasetTagFactory, FieldSelectorFactory];
-function TooltipConfigFactory(DatasetTag, FieldSelector: ReturnType<typeof FieldSelectorFactory>) {
+function TooltipConfigFactory(
+  DatasetTag: ReturnType<typeof DatasetTagFactory>,
+  FieldSelector: ReturnType<typeof FieldSelectorFactory>
+) {
   const DatasetTooltipConfig = ({config, onChange, dataset}: DatasetTooltipConfigProps) => {
     const dataId = dataset.id;
     return (

src/components/side-panel/layer-manager.js → src/components/side-panel/layer-manager.tsx

@@ -20,8 +20,7 @@
 
 import React, {Component, useCallback} from 'react';
 
-import PropTypes from 'prop-types';
-import {injectIntl} from 'react-intl';
+import {injectIntl, WrappedComponentProps} from 'react-intl';
 import {FormattedMessage} from 'localization';
 import styled from 'styled-components';
 
@@ -36,6 +35,34 @@ import ItemSelector from 'components/common/item-selector/item-selector';
 import {PanelLabel, SidePanelDivider, SidePanelSection} from 'components/common/styled-components';
 
 import {LAYER_BLENDINGS} from 'constants/default-settings';
+import {Datasets} from 'reducers';
+import {Layer, LayerClassesType} from 'layers';
+import * as UiStateActions from 'actions/ui-state-actions';
+import * as VisStateActions from 'actions/vis-state-actions';
+import {SidePanelItem} from 'components/types';
+import {LayerPanelListView} from 'reducers/ui-state-updaters';
+import {ActionHandler} from 'actions';
+
+type LayerBlendingSelectorProps = {
+  layerBlending: string;
+  updateLayerBlending: ActionHandler<typeof VisStateActions.updateLayerBlending>;
+} & WrappedComponentProps;
+
+type LayerManagerProps = {
+  datasets: Datasets;
+  layers: Layer[];
+  layerOrder: number[];
+  layerClasses: LayerClassesType;
+  layerBlending: string;
+  uiStateActions: typeof UiStateActions;
+  visStateActions: typeof VisStateActions;
+  showAddDataModal: ActionHandler<typeof UiStateActions.toggleModal>;
+  removeDataset: ActionHandler<typeof UiStateActions.openDeleteModal>;
+  showDatasetTable: ActionHandler<typeof VisStateActions.showDatasetTable>;
+  updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
+  layerPanelListView: LayerPanelListView;
+  panelMetadata: SidePanelItem;
+} & WrappedComponentProps;
 
 const LayerHeader = styled.div.attrs({
   className: 'layer-manager-header'
@@ -46,7 +73,11 @@ const LayerHeader = styled.div.attrs({
   margin-top: 16px;
 `;
 
-const LayerBlendingSelector = ({layerBlending, updateLayerBlending, intl}) => {
+const LayerBlendingSelector = ({
+  layerBlending,
+  updateLayerBlending,
+  intl
+}: LayerBlendingSelectorProps) => {
   const labeledLayerBlendings = Object.keys(LAYER_BLENDINGS).reduce(
     (acc, current) => ({
       ...acc,
@@ -86,32 +117,20 @@ LayerManagerFactory.deps = [
 ];
 
 function LayerManagerFactory(
-  LayerList,
-  DatasetLayerGroup,
-  PanelViewListToggle,
-  PanelTitle,
-  DatasetSection,
-  AddLayerButton
+  LayerList: ReturnType<typeof LayerListFactory>,
+  DatasetLayerGroup: ReturnType<typeof DatasetLayerGroupFactory>,
+  PanelViewListToggle: ReturnType<typeof PanelViewListToggleFactory>,
+  PanelTitle: ReturnType<typeof PanelTitleFactory>,
+  DatasetSection: ReturnType<typeof DatasetSectionFactory>,
+  AddLayerButton: ReturnType<typeof AddLayerButtonFactory>
 ) {
-  class LayerManager extends Component {
-    static propTypes = {
-      datasets: PropTypes.object.isRequired,
-      layerBlending: PropTypes.string.isRequired,
-      layerClasses: PropTypes.object.isRequired,
-      layers: PropTypes.arrayOf(PropTypes.any).isRequired,
-      visStateActions: PropTypes.object.isRequired,
-      // functions
-      removeDataset: PropTypes.func.isRequired,
-      showDatasetTable: PropTypes.func.isRequired,
-      updateTableColor: PropTypes.func.isRequired
-    };
-
-    _addEmptyNewLayer = dataset => {
+  class LayerManager extends Component<LayerManagerProps> {
+    _addEmptyNewLayer = (dataset: string) => {
       const {visStateActions} = this.props;
       visStateActions.addLayer(undefined, dataset);
     };
 
-    _toggleLayerPanelListView = listView => {
+    _toggleLayerPanelListView = (listView: string) => {
       const {uiStateActions} = this.props;
       uiStateActions.toggleLayerPanelListView(listView);
     };
@@ -160,6 +179,8 @@ function LayerManagerFactory(
                 <FormattedMessage id={panelMetadata.label} />
               </PanelTitle>
               {defaultDataset ? (
+                // TODO replace ignore
+                // @ts-ignore
                 <AddLayerButton
                   datasets={datasets}
                   typeaheadPlaceholder="Search datasets"
@@ -184,6 +205,8 @@ function LayerManagerFactory(
                 showDeleteDataset
               />
             ) : (
+              // TODO replace ignore
+              // @ts-ignore
               <LayerList
                 layers={layers}
                 datasets={datasets}