TEMP

Signed-off-by: Giuseppe Macri <[email protected]>

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

@@ -1,3 +1,23 @@
+// Copyright (c) 2023 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 {Icons} from '@kepler.gl/components';
 import PropTypes from 'prop-types';

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

@@ -1,3 +1,23 @@
+// Copyright (c) 2023 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 FSQIcon from './foursquare-icon';
 import {Provider, KEPLER_FORMAT} from '@kepler.gl/cloud-providers';
 import {Auth0Client} from '@auth0/auth0-spa-js';

examples/demo-app/src/cloud-providers/index.js

@@ -33,12 +33,7 @@ const {
   FOURSQUARE_USER_MAPS_URL
 } = CLOUD_PROVIDERS_CONFIGURATION;
 
-console.log('provider index', {
-  clientId: FOURSQUARE_CLIENT_ID,
-  authDomain: FOURSQUARE_DOMAIN,
-  apiURL: FOURSQUARE_API_URL,
-  userMapsURL: FOURSQUARE_USER_MAPS_URL
-});
+console.log('CLOUD_PROVIDERS_CONFIGURATION', CLOUD_PROVIDERS_CONFIGURATION);
 
 const DROPBOX_CLIENT_NAME = 'Kepler.gl Demo App';
 

examples/demo-app/webpack.config.js

@@ -26,6 +26,22 @@ const resolve = require('path').resolve;
 const join = require('path').join;
 const webpack = require('webpack');
 
+const ENV_VARIABLES = {
+  MapboxAccessToken: 'You can get the token at https://www.mapbox.com/help/how-access-tokens-work/',
+  DropboxClientId: 'You can get the token at https://www.dropbox.com/developers',
+  CartoClientId: 'You can get the token at https://www.mapbox.com/help/how-access-tokens-work/',
+  MapboxExportToken: 'You can get the token at https://location.foursquare.com/developer',
+  FoursquareClientId: 'You can get the token at https://location.foursquare.com/developer',
+  FoursquareDomain: 'You can get the token at https://location.foursquare.com/developer',
+  FoursquareAPIURL: 'You can get the token at https://location.foursquare.com/developer',
+  FoursquareUserMapsURL: 'You can get the token at https://location.foursquare.com/developer',
+};
+
+const WEBPACK_ENV_VARIABLES = Object.keys(ENV_VARIABLES).reduce((acc, key) => ({
+  ...acc,
+  [key]: null
+}), {});
+
 const CONFIG = {
   // bundle app.js and everything it imports, recursively.
   entry: {
@@ -65,16 +81,7 @@ const CONFIG = {
 
   // Optional: Enables reading mapbox and dropbox client token from environment variable
   plugins: [
-    new webpack.EnvironmentPlugin([
-      'MapboxAccessToken',
-      'DropboxClientId',
-      'MapboxExportToken',
-      'CartoClientId',
-      'FoursquareClientId',
-      'FoursquareDomain',
-      'FoursquareAPIURL',
-      'FoursquareUserMapsURL'
-    ])
+    new webpack.EnvironmentPlugin(WEBPACK_ENV_VARIABLES)
   ]
 };
 

examples/webpack.config.local.js

@@ -36,6 +36,22 @@ const {logStep, logError} = require('../scripts/log');
 const LIB_DIR = resolve(__dirname, '..');
 const SRC_DIR = resolve(LIB_DIR, './src');
 
+const ENV_VARIABLES = {
+  MapboxAccessToken: 'You can get the token at https://www.mapbox.com/help/how-access-tokens-work/',
+  DropboxClientId: 'You can get the token at https://www.dropbox.com/developers',
+  CartoClientId: 'You can get the token at https://www.mapbox.com/help/how-access-tokens-work/',
+  MapboxExportToken: 'You can get the token at https://location.foursquare.com/developer',
+  FoursquareClientId: 'You can get the token at https://location.foursquare.com/developer',
+  FoursquareDomain: 'You can get the token at https://location.foursquare.com/developer',
+  FoursquareAPIURL: 'You can get the token at https://location.foursquare.com/developer',
+  FoursquareUserMapsURL: 'You can get the token at https://location.foursquare.com/developer',
+};
+
+const WEBPACK_ENV_VARIABLES = Object.keys(ENV_VARIABLES).reduce((acc, key) => ({
+  ...acc,
+  [key]: null
+}), {});
+
 // For deck.gl upgrade, load deck.gl from node_modules of the root directory
 const NODE_MODULES_DIR = resolve(__dirname, '../node_modules');
 
@@ -157,16 +173,7 @@ function makeLocalDevConfig(env, EXAMPLE_DIR = LIB_DIR, externals = {}) {
     },
     // Optional: Enables reading mapbox token from environment variable
     plugins: [
-      new webpack.EnvironmentPlugin([
-        'MapboxAccessToken',
-        'DropboxClientId',
-        'MapboxExportToken',
-        'CartoClientId',
-        'FoursquareClientId',
-        'FoursquareDomain',
-        'FoursquareAPIURL',
-        'FoursquareUserMapsURL'
-      ])
+      new webpack.EnvironmentPlugin(WEBPACK_ENV_VARIABLES)
     ]
   };
 }

package.json

@@ -69,6 +69,7 @@
     "start:custom-map-style": "yarn install-and-start -- examples/custom-map-style start-local",
     "start:node-app": "yarn install-and-start -- examples/node-app start-local",
     "start:web": "yarn install-and-start -- website start",
+    "start:web-prod": "yarn install-and-start -- website start-prod",
     "start:https": "yarn install-and-start -- examples/demo-app start-local-https",
     "start:e2e": "yarn install-and-start -- examples/demo-app start-local-e2e",
     "build": "NODE_OPTIONS=--openssl-legacy-provider rm -fr dist && babel src/{actions,components,reducers,cloud-providers,localization,tasks} --out-dir dist --source-maps inline --extensions '.ts,.tsx,.js,.jsx' --ignore '**/*.d.ts'",
@@ -87,6 +88,7 @@
     "lint:css": "stylelint './src/**/*.js'",
     "typescript": "tsc --noEmit",
     "web": "(yarn && yarn install:web && yarn start:web)",
+    "web-prod": "(yarn && yarn install:web && yarn start:web-prod)",
     "deploy": "yarn install:web && (cd website && yarn build)",
     "clean": "rm -rf node_modules examples/**/node_modules website/node_modules",
     "release:patch": "git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags",

src/components/src/modals/cloud-components/provider-select.tsx

@@ -18,33 +18,33 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import CloudTile from '../cloud-tile';
+// import CloudTile from '../cloud-tile';
 import React from 'react';
-import styled from 'styled-components';
+// import styled from 'styled-components';
 import {Provider} from '@kepler.gl/cloud-providers';
 import {dataTestIds} from '@kepler.gl/constants';
 
-const StyledProviderSection = styled.div.attrs({
-  className: 'provider-selection'
-})`
-  display: flex;
-  gap: 8px;
-`;
+// const StyledProviderSection = styled.div.attrs({
+//   className: 'provider-selection'
+// })`
+//   display: flex;
+//   gap: 8px;
+// `;
 
 type ProviderSelectProps = {
   cloudProviders: Provider[];
 };
 
 export const ProviderSelect: React.FC<ProviderSelectProps> = ({cloudProviders = []}) => (
   <div data-testid={dataTestIds.providerSelect}>
-    {cloudProviders.length ? (
-      <StyledProviderSection>
-        {cloudProviders.map(provider => (
-          <CloudTile key={provider.name} provider={provider} />
-        ))}
-      </StyledProviderSection>
-    ) : (
-      <p>No storage provider available</p>
-    )}
+    {/*{cloudProviders.length ? (*/}
+    {/*  <StyledProviderSection>*/}
+    {/*    {cloudProviders.map(provider => (*/}
+    {/*      <CloudTile key={provider.name} provider={provider} />*/}
+    {/*    ))}*/}
+    {/*  </StyledProviderSection>*/}
+    {/*) : (*/}
+    {/*  <p>No storage provider available</p>*/}
+    {/*)}*/}
   </div>
 );

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

@@ -19,16 +19,16 @@
 // THE SOFTWARE.
 
 import React, {useCallback, useState, useEffect} from 'react';
-// import {CloudHeader} from './cloud-components/cloud-header';
-// import {CloudMaps} from './cloud-components/cloud-maps';
+import {CloudHeader} 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() {
-  const LoadStorageMap = () => {
-    const {provider: currentProvider, cloudProviders} = useCloudListProvider();
+  const LoadStorageMap = ({onLoadCloudMap}) => {
+    const {provider: currentProvider, cloudProviders, setProvider} = useCloudListProvider();
     const [isLoading, setIsLoading] = useState(false);
     const [maps, setMaps] = useState<MapListItem[] | null>(null);
     const [error, setError] = useState(null);
@@ -59,28 +59,28 @@ function LoadStorageMapFactory() {
       setProviderInfo(currentProvider);
     }, [currentProvider]);
 
-    // const onSelectMap = useCallback((provider, map) => {
-    //   onLoadCloudMap({
-    //     loadParams: map.loadParams,
-    //     provider
-    //   });
-    // }, []);
+    const onSelectMap = useCallback((provider, map) => {
+      onLoadCloudMap({
+        loadParams: map.loadParams,
+        provider
+      });
+    }, []);
 
     return (
       <FlexColContainer>
         <ProviderSelect cloudProviders={cloudProviders} />
-        {/*{currentProvider ? (*/}
-        {/*  <>*/}
-        {/*    <CloudHeader provider={currentProvider} onBack={() => setProvider(null)} />*/}
-        {/*    <CloudMaps*/}
-        {/*      isLoading={isLoading}*/}
-        {/*      onSelectMap={onSelectMap}*/}
-        {/*      provider={currentProvider}*/}
-        {/*      error={error}*/}
-        {/*      maps={maps}*/}
-        {/*    />*/}
-        {/*  </>*/}
-        {/*) : null}*/}
+        {currentProvider ? (
+          <>
+            <CloudHeader provider={currentProvider} onBack={() => setProvider(null)} />
+            <CloudMaps
+              isLoading={isLoading}
+              onSelectMap={onSelectMap}
+              provider={currentProvider}
+              error={error}
+              maps={maps}
+            />
+          </>
+        ) : null}
       </FlexColContainer>
     );
   };

website/package.json

@@ -13,7 +13,7 @@
     "start-prod": "webpack-dev-server -p --env.prod --content-base ./src/static --progress --open",
     "build-clean": "rm -rf ./dist && mkdir dist",
     "build-static": "cp -r ./src/static/* dist",
-    "build-script": "NODE_OPTIONS=--openssl-legacy-provider webpack --env.prod",
+    "build-script": "NODE_OPTIONS=--openssl-legacy-provider webpack -p --env.prod",
     "build": "npm run build-clean && npm run build-static && npm run build-script",
     "lint": "eslint src"
   },

website/webpack.config.js

@@ -77,7 +77,7 @@ const COMMON_CONFIG = {
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
     modules: ['node_modules', libSources],
     alias: {
-      'kepler.gl/dist': libSources,
+      // '@kepler.gl/dist': libSources,
       // Imports the kepler.gl library from the src directory in this repo
       'kepler.gl': libSources,
       react: resolve(rootDir, './node_modules/react'),