[fix] Foursquare storage provider improvements

examples/demo-app/src/cloud-providers/foursquare/foursquare-provider.js

@@ -7,6 +7,8 @@ import {Auth0Client} from '@auth0/auth0-spa-js';
 
 const NAME = 'foursquare';
 const DISPLAY_NAME = 'Foursquare';
+const STORAGE_MESSAGE = 'modal.loadStorageMap.foursquareStorageMessage';
+
 const APP_NAME = 'Kepler.gl';
 
 const FOURSQUARE_PRIVATE_STORAGE_ENABLED = true;
@@ -35,6 +37,22 @@ function convertFSQModelToMapItem(model, baseApi) {
   };
 }
 
+/**
+ * Custom Auth0 popup window to change window height to fit FSQ auth window.
+ */
+export const openPopup = url => {
+  const width = 400;
+  const height = 765;
+  const left = window.screenX + (window.innerWidth - width) / 2;
+  const top = window.screenY + (window.innerHeight - height) / 2;
+
+  return window.open(
+    url,
+    'auth0:authorize:popup',
+    `left=${left},top=${top},width=${width},height=${height},resizable,scrollbars=yes,status=1`
+  );
+};
+
 function extractMapFromFSQResponse(response) {
   const {
     latestState: {data}
@@ -44,7 +62,7 @@ function extractMapFromFSQResponse(response) {
 
 export default class FoursquareProvider extends Provider {
   constructor({clientId, authDomain, apiURL, userMapsURL}) {
-    super({name: NAME, displayName: DISPLAY_NAME, icon: FSQIcon});
+    super({name: NAME, displayName: DISPLAY_NAME, storageMessage: STORAGE_MESSAGE, icon: FSQIcon});
     this.icon = FSQIcon;
     this.appName = APP_NAME;
     this.apiURL = apiURL;
@@ -74,7 +92,7 @@ export default class FoursquareProvider extends Provider {
   }
 
   async login() {
-    return this._auth0.loginWithPopup();
+    return this._auth0.loginWithPopup(undefined, {popup: openPopup()});
   }
 
   async logout() {
@@ -141,7 +159,7 @@ export default class FoursquareProvider extends Provider {
   async downloadMap(loadParams) {
     const {id} = loadParams;
     if (!id) {
-      return Promise.reject('No Map is was provider as part of loadParams');
+      return Promise.reject('No Map id was provider as part of loadParams');
     }
     const headers = await this.getHeaders();
 

src/cloud-providers/src/provider.ts

@@ -34,6 +34,7 @@ export type Thumbnail = {
 export type ProviderProps = {
   name?: string;
   displayName?: string;
+  storageMessage?: string;
   icon?: ComponentType<IconProps>;
   thumbnail?: Thumbnail;
 };
@@ -72,13 +73,15 @@ export const FILE_CONFLICT_MSG = 'file_conflict';
 export default class Provider {
   name: string;
   displayName: string;
+  storageMessage?: string;
   icon: ComponentType<IconProps>;
   thumbnail: Thumbnail;
   isNew = false;
 
   constructor(props: ProviderProps) {
     this.name = props.name || NAME;
     this.displayName = props.displayName || DISPLAY_NAME;
+    this.storageMessage = props.storageMessage;
     this.icon = props.icon || ICON;
     this.thumbnail = props.thumbnail || THUMBNAIL;
   }

src/components/src/modals/cloud-components/cloud-header.tsx

@@ -4,6 +4,7 @@
 import React, {useMemo} from 'react';
 import {Button} from '../../common/styled-components';
 import {ArrowLeft} from '../../common/icons';
+import InfoHelperFactory from '../../common/info-helper';
 import {FormattedMessage} from '@kepler.gl/localization';
 import styled from 'styled-components';
 import {dataTestIds} from '@kepler.gl/constants';
@@ -32,6 +33,7 @@ const StyledBackBtn = styled.a`
 const LINK_STYLE = {textDecoration: 'underline'};
 
 const Title = styled.span`
+  display: flex;
   font-size: 14px;
   line-height: 16px;
   font-weight: 500;
@@ -47,33 +49,48 @@ type CloudHeaderProps = {
   onBack: () => void;
 };
 
-export const CloudHeader: React.FC<CloudHeaderProps> = ({provider, onBack}) => {
-  const managementUrl = useMemo(() => provider.getManagementUrl(), [provider]);
-  return (
-    <div data-testid={dataTestIds.cloudHeader}>
-      <StyledStorageHeader>
-        <StyledBackBtn>
-          <Button link onClick={onBack}>
-            <ArrowLeft height="14px" />
-            <FormattedMessage id={'modal.loadStorageMap.back'} />
-          </Button>
-        </StyledBackBtn>
-        {managementUrl && (
-          <a
-            key={1}
-            href={managementUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            style={LINK_STYLE}
-          >
-            {provider.displayName}
-          </a>
-        )}
-      </StyledStorageHeader>
-      <Title>
-        <span>{provider.displayName}</span>
-        <FormattedMessage id={'modal.loadStorageMap.storageMaps'} />
-      </Title>
-    </div>
-  );
-};
+CloudHeaderFactory.deps = [InfoHelperFactory];
+
+function CloudHeaderFactory(InfoHelper: ReturnType<typeof InfoHelperFactory>) {
+  const CloudHeader: React.FC<CloudHeaderProps> = ({provider, onBack}) => {
+    const managementUrl = useMemo(() => provider.getManagementUrl(), [provider]);
+    return (
+      <div data-testid={dataTestIds.cloudHeader}>
+        <StyledStorageHeader>
+          <StyledBackBtn>
+            <Button link onClick={onBack}>
+              <ArrowLeft height="14px" />
+              <FormattedMessage id={'modal.loadStorageMap.back'} />
+            </Button>
+          </StyledBackBtn>
+          {managementUrl && (
+            <a
+              key={1}
+              href={managementUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={LINK_STYLE}
+            >
+              {provider.displayName}
+            </a>
+          )}
+        </StyledStorageHeader>
+        <Title>
+          <div>
+            <span>{provider.displayName}</span>{' '}
+            <FormattedMessage id={'modal.loadStorageMap.storageMaps'} />
+          </div>
+          {provider.storageMessage ? (
+            <InfoHelper
+              id={`cloud-provider-storageMessage`}
+              description={provider.storageMessage}
+            />
+          ) : null}
+        </Title>
+      </div>
+    );
+  };
+  return CloudHeader;
+}
+
+export default CloudHeaderFactory;

src/components/src/modals/load-storage-map.spec.tsx

@@ -4,12 +4,16 @@
 // @ts-nocheck
 import React from 'react';
 import {fireEvent, waitFor} from '@testing-library/react';
+import InfoHelperFactory from '../common/info-helper';
+import CloudHeaderFactory from './cloud-components/cloud-header';
 import LoadStorageMapFactory from './load-storage-map';
 import {renderWithTheme} from 'test/helpers/component-jest-utils';
 import {useCloudListProvider} from '../hooks/use-cloud-list-provider';
 import {dataTestIds} from '@kepler.gl/constants';
 
-const LoadStorageMap = LoadStorageMapFactory();
+const InfoHelper = InfoHelperFactory();
+const CloudHeader = CloudHeaderFactory(InfoHelper);
+const LoadStorageMap = LoadStorageMapFactory(CloudHeader);
 
 const DEFAULT_MAPS = [
   {

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

@@ -2,14 +2,16 @@
 // Copyright contributors to the kepler.gl project
 
 import React, {useCallback, useState, useEffect} from 'react';
-import {CloudHeader} from './cloud-components/cloud-header';
+import CloudHeaderFactory from './cloud-components/cloud-header';
 import {CloudMaps} from './cloud-components/cloud-maps';
 import {useCloudListProvider} from '../hooks/use-cloud-list-provider';
 import {ProviderSelect} from './cloud-components/provider-select';
 import {FlexColContainer} from '../common/flex-container';
 import {Provider, MapListItem} from '@kepler.gl/cloud-providers';
 
-function LoadStorageMapFactory() {
+LoadStorageMapFactory.deps = [CloudHeaderFactory];
+
+function LoadStorageMapFactory(CloudHeader: ReturnType<typeof CloudHeaderFactory>) {
   const LoadStorageMap = ({onLoadCloudMap}) => {
     const {provider: currentProvider, setProvider, cloudProviders} = useCloudListProvider();
     const [isLoading, setIsLoading] = useState(false);

src/localization/src/translations/en.ts

@@ -505,7 +505,9 @@ ${'```'}
       back: 'Back',
       goToPage: 'Go to your Kepler.gl {displayName} page',
       storageMaps: 'Storage / Maps',
-      noSavedMaps: 'No saved maps yet'
+      noSavedMaps: 'No saved maps yet',
+      foursquareStorageMessage:
+        'Only maps saved with Kepler.gl > Save > Foursquare Storage option are shown here'
     }
   },
   header: {