better handling provider tile update

src/components/modals/image-modal-container.js

@@ -24,9 +24,13 @@ import get from 'lodash.get';
 
 import {MAP_THUMBNAIL_DIMENSION, EXPORT_IMG_RATIOS} from 'constants/default-settings';
 
+/**
+ * A wrapper component in modals contain a image preview of the map with cloud providers
+ * It sets export image size based on provider thumbnail size
+ * @component
+ */
 export default class ImageModalContainer extends Component {
   static propTypes = {
-    onSetCloudProvider: PropTypes.func.isRequired,
     onUpdateImageSetting: PropTypes.func.isRequired,
     cloudProviders: PropTypes.arrayOf(PropTypes.object),
     currentProvider: PropTypes.string
@@ -38,18 +42,17 @@ export default class ImageModalContainer extends Component {
   };
 
   componentDidMount() {
-    this._updateThumbSize();
-    this._setDefaultProvider();
+    this._updateThumbSize(true);
   }
 
   componentDidUpdate(prevProps) {
     // set thumbnail size if provider changes
-    if (this.props.currentProvider !== prevProps.currentProvider) {
+    if (this.props.currentProvider !== prevProps.currentProvider && this.props.currentProvider) {
       this._updateThumbSize();
     }
   }
 
-  _updateThumbSize() {
+  _updateThumbSize(initialMount) {
     if (this.props.currentProvider && this.props.cloudProviders.length) {
       const provider = this.props.cloudProviders.find(p => p.name === this.props.currentProvider);
 
@@ -61,18 +64,12 @@ export default class ImageModalContainer extends Component {
           legend: false
         });
       }
-    }
-  }
-
-  _setDefaultProvider() {
-    if (!this.props.currentProvider && this.props.cloudProviders.length) {
-      const connected = this.props.cloudProviders.find(
-        p => typeof p.getAccessToken === 'function' && p.getAccessToken()
-      );
-
-      if (connected) {
-        this.props.onSetCloudProvider(connected.name);
-      }
+    } else if (initialMount) {
+      this.props.onUpdateImageSetting({
+        mapW: MAP_THUMBNAIL_DIMENSION.width,
+        mapH: MAP_THUMBNAIL_DIMENSION.height,
+        ratio: EXPORT_IMG_RATIOS.CUSTOM
+      });
     }
   }
 

src/components/modals/load-storage-map.js

@@ -26,8 +26,11 @@ import LoadingDialog from './loading-dialog';
 import {Button} from 'components/common/styled-components';
 import CloudTile from './cloud-tile';
 import {Base, ArrowLeft} from 'components/common/icons';
+import ProviderModalContainer from './provider-modal-container';
 
-const StyledProviderSection = styled.div`
+const StyledProviderSection = styled.div.attrs({
+  className: 'provider-selection'
+})`
   display: flex;
 `;
 
@@ -215,17 +218,23 @@ const VisualizationItem = ({vis, onClick}) => {
     </StyledVisualizationItem>
   );
 };
-const ProviderSelect = ({cloudProviders, onSetCloudProvider, currentProvider}) =>
+
+export const ProviderSelect = ({
+  cloudProviders = [],
+  onSelect,
+  onSetCloudProvider,
+  currentProvider
+}) =>
   cloudProviders.length ? (
     <StyledProviderSection>
       {cloudProviders.map(provider => (
         <CloudTile
           key={provider.name}
-          onSelect={() => onSetCloudProvider(provider.name)}
+          onSelect={() => onSelect(provider.name)}
           onSetCloudProvider={onSetCloudProvider}
           cloudProvider={provider}
           isSelected={provider.name === currentProvider}
-          isConnected={Boolean(provider.getAccessToken())}
+          isConnected={Boolean(provider.getAccessToken && provider.getAccessToken())}
         />
       ))}
     </StyledProviderSection>
@@ -235,9 +244,14 @@ const ProviderSelect = ({cloudProviders, onSetCloudProvider, currentProvider}) =
 
 function LoadStorageMapFactory() {
   class LoadStorageMap extends Component {
+    state = {
+      showProviderSelect: true
+    };
+
     componentDidMount() {
       this._getSavedMaps();
     }
+
     componentDidUpdate(prevProps) {
       if (prevProps.currentProvider !== this.props.currentProvider) {
         this._getSavedMaps();
@@ -253,6 +267,7 @@ function LoadStorageMapFactory() {
       const provider = this._getProvider();
       if (provider) {
         this.props.getSavedMaps(provider);
+        this.setState({showProviderSelect: false});
       }
     }
 
@@ -262,21 +277,38 @@ function LoadStorageMapFactory() {
         provider
       });
     }
+
+    _clickBack = () => {
+      this.setState({showProviderSelect: true});
+    };
+
+    _selectProvider = providerName => {
+      this.props.onSetCloudProvider(providerName);
+      const provider = (this.props.cloudProviders || []).find(p => p.name === providerName);
+      this.props.getSavedMaps(provider);
+      this.setState({showProviderSelect: false});
+    };
+
     render() {
       const {
         visualizations,
         cloudProviders,
-        currentProvider = null,
+        currentProvider,
         isProviderLoading,
         onSetCloudProvider
       } = this.props;
 
       const provider = this._getProvider();
 
       return (
-        <div>
-          {!provider ? (
+        <ProviderModalContainer
+          onSetCloudProvider={onSetCloudProvider}
+          cloudProviders={cloudProviders}
+          currentProvider={currentProvider}
+        >
+          {this.state.showProviderSelect ? (
             <ProviderSelect
+              onSelect={this._selectProvider}
               cloudProviders={cloudProviders}
               onSetCloudProvider={onSetCloudProvider}
               currentProvider={currentProvider}
@@ -292,7 +324,7 @@ function LoadStorageMapFactory() {
                 <StyledVisualizationSection>
                   <StyledStorageHeader>
                     <StyledBackBtn>
-                      <Button link onClick={() => onSetCloudProvider(null)}>
+                      <Button link onClick={this._clickBack}>
                         <ArrowLeft height="14px" />
                         Back
                       </Button>
@@ -332,7 +364,7 @@ function LoadStorageMapFactory() {
               )}
             </>
           )}
-        </div>
+        </ProviderModalContainer>
       );
     }
   }

src/components/modals/modal-tabs.js

@@ -73,7 +73,7 @@ const StyledLoadDataModalTabItem = styled.div`
 
 const noop = () => {};
 
-const ModalTabItem = ({currentMethod, method, toggleMethod}) => {
+export const ModalTabItem = ({currentMethod, method, toggleMethod}) => {
   const onClick = useCallback(() => toggleMethod(method), [method, toggleMethod]);
 
   return method.tabElementType ? (

src/components/modals/provider-modal-container.js

@@ -0,0 +1,60 @@
+// 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, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * A wrapper component in modals contain cloud providers.
+ * It set default provider by checking which provider has logged in
+ * @component
+ */
+export default class ProviderModalContainer extends Component {
+  static propTypes = {
+    onSetCloudProvider: PropTypes.func.isRequired,
+    cloudProviders: PropTypes.arrayOf(PropTypes.object),
+    currentProvider: PropTypes.string
+  };
+
+  static defaultProps = {
+    cloudProviders: [],
+    currentProvider: null
+  };
+
+  componentDidMount() {
+    this._setDefaultProvider();
+  }
+
+  _setDefaultProvider() {
+    if (!this.props.currentProvider && this.props.cloudProviders.length) {
+      const connected = this.props.cloudProviders.find(
+        p => typeof p.getAccessToken === 'function' && p.getAccessToken()
+      );
+
+      if (connected && typeof this.props.onSetCloudProvider === 'function') {
+        this.props.onSetCloudProvider(connected.name);
+      }
+    }
+  }
+
+  render() {
+    return <>{this.props.children}</>;
+  }
+}