@carto/kepler.gl 0.0.76 → 0.0.78-0

package/src/components/modals/overwrite-map-modal.tsx

@@ -0,0 +1,113 @@
+// Copyright (c) 2022 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 {CenterVerticalFlexbox} from 'components/common/styled-components';
+import {UploadAnimation} from './status-panel';
+import ImageModalContainer from './image-modal-container';
+import {FormattedMessage} from 'localization';
+import {Provider} from 'cloud-providers';
+
+import {ImageModalContainerProps} from './image-modal-container';
+import {cleanupExportImage} from 'actions';
+
+/** @typedef {import('./overwrite-map-modal').OverwriteMapModalProps} OverwriteMapModalProps */
+
+const StyledMsg = styled.div`
+  margin-top: 24px;
+  font-size: 14px;
+`;
+
+const StyledTitle = styled.span`
+  font-weight: 600;
+  color: black;
+`;
+
+const StyledIcon = styled.div`
+  margin-top: 24px;
+`;
+
+const StyledOverwriteMapModal = styled(CenterVerticalFlexbox)`
+  padding: 24px 12px;
+  min-height: 220px;
+`;
+
+type OverwriteMapModalProps = {
+  mapSaved: string | null;
+  title: string;
+  cloudProviders: Provider[];
+  isProviderLoading: boolean;
+  currentProvider: string | null;
+
+  // callbacks
+  onUpdateImageSetting: ImageModalContainerProps['onUpdateImageSetting'];
+  cleanupExportImage: typeof cleanupExportImage;
+};
+
+const OverwriteMapModalFactory = () => {
+  /**
+   * @type {React.FunctionComponent<OverwriteMapModalProps>}
+   */
+  const OverwriteMapModal: React.FC<OverwriteMapModalProps> = ({
+    mapSaved,
+    title,
+    currentProvider,
+    cloudProviders,
+    isProviderLoading,
+    onUpdateImageSetting,
+    cleanupExportImage
+  }) => {
+    const provider = cloudProviders.find(cp => cp.name === currentProvider);
+    return (
+      <ImageModalContainer
+        currentProvider={currentProvider}
+        cloudProviders={cloudProviders}
+        onUpdateImageSetting={onUpdateImageSetting}
+        cleanupExportImage={cleanupExportImage}
+      >
+        <StyledOverwriteMapModal className="overwrite-map-modal">
+          {isProviderLoading ? (
+            <StyledMsg>
+              <StyledTitle>
+                <FormattedMessage id={'modal.overwriteMap.title'} />
+              </StyledTitle>
+              <UploadAnimation icon={provider && provider.icon} />
+            </StyledMsg>
+          ) : (
+            <>
+              <StyledIcon>
+                {provider && provider.icon ? <provider.icon height="64px" /> : null}
+              </StyledIcon>
+              <StyledMsg className="overwrite-map-msg">
+                <StyledTitle>{title} </StyledTitle>
+                <FormattedMessage id={'modal.overwriteMap.alreadyExists'} values={{mapSaved}} />
+              </StyledMsg>
+            </>
+          )}
+        </StyledOverwriteMapModal>
+      </ImageModalContainer>
+    );
+  };
+  return OverwriteMapModal;
+};
+
+export const OverwriteMapModal = OverwriteMapModalFactory();
+export default OverwriteMapModalFactory;

package/src/components/modals/provider-modal-container.tsx

@@ -0,0 +1,61 @@
+// Copyright (c) 2022 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 {Provider} from 'cloud-providers';
+import {SetCloudProviderPayload} from 'actions';
+
+export type ProviderModalContainerProps = {
+  cloudProviders?: Provider[];
+  currentProvider?: string | null;
+  onSetCloudProvider: (provider: SetCloudProviderPayload) => void;
+};
+
+/**
+ * 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<ProviderModalContainerProps> {
+  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}</>;
+  }
+}

package/src/components/modals/save-map-modal.tsx

@@ -0,0 +1,277 @@
+// Copyright (c) 2022 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 CloudTile from './cloud-tile';
+import ImageModalContainer, {ImageModalContainerProps} from './image-modal-container';
+import ProviderModalContainer, {ProviderModalContainerProps} from './provider-modal-container';
+import StatusPanel, {UploadAnimation} from './status-panel';
+
+import {MAP_THUMBNAIL_DIMENSION, MAP_INFO_CHARACTER} from 'constants/default-settings';
+
+import {
+  StyledModalContent,
+  InputLight,
+  TextAreaLight,
+  StyledExportSection,
+  StyledModalSection,
+  StyledModalInputFootnote
+} from 'components/common/styled-components';
+import ImagePreview from 'components/common/image-preview';
+import {FormattedMessage} from 'localization';
+import {ExportImage, MapInfo} from 'reducers';
+import {Provider} from 'cloud-providers';
+import {setMapInfo, cleanupExportImage} from 'actions';
+
+/** @typedef {import('./save-map-modal').SaveMapModalProps} SaveMapModalProps */
+
+const StyledSaveMapModal = styled.div.attrs({
+  className: 'save-map-modal'
+})`
+  .save-map-modal-content {
+    min-height: 400px;
+    flex-direction: column;
+  }
+
+  .description {
+    width: 300px;
+  }
+
+  .image-preview-panel {
+    width: 300px;
+
+    .image-preview {
+      padding: 0;
+    }
+  }
+
+  .map-info-panel {
+    flex-direction: column;
+  }
+
+  .save-map-modal-description {
+    .modal-section-subtitle {
+      margin-left: 6px;
+    }
+  }
+`;
+
+const nop = _ => {};
+
+type CharacterLimits = {
+  title?: number;
+  description?: number;
+};
+
+type SaveMapModalProps = {
+  mapInfo: MapInfo;
+  exportImage: ExportImage;
+  cloudProviders: Provider[];
+  isProviderLoading: boolean;
+  currentProvider?: string;
+  providerError?: any;
+  characterLimits?: CharacterLimits;
+
+  // callbacks
+  onSetCloudProvider: ProviderModalContainerProps['onSetCloudProvider'];
+  onUpdateImageSetting: ImageModalContainerProps['onUpdateImageSetting'];
+  cleanupExportImage: typeof cleanupExportImage;
+  onSetMapInfo: typeof setMapInfo;
+};
+
+type MapInfoPanelProps = Pick<SaveMapModalProps, 'mapInfo' | 'characterLimits'> & {
+  onChangeInput: (
+    type: string,
+    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+  ) => void;
+};
+
+export const MapInfoPanel: React.FC<MapInfoPanelProps> = ({
+  mapInfo = {description: '', title: ''},
+  characterLimits,
+  onChangeInput
+}) => (
+  <div className="selection map-info-panel">
+    <StyledModalSection className="save-map-modal-name">
+      <div className="modal-section-title">Name*</div>
+      <div>
+        <InputLight
+          id="map-title"
+          type="text"
+          value={mapInfo.title}
+          onChange={e => onChangeInput('title', e)}
+          placeholder="Type map title"
+        />
+      </div>
+    </StyledModalSection>
+    <StyledModalSection>
+      <div className="save-map-modal-description" style={{display: 'flex'}}>
+        <div className="modal-section-title">Description</div>
+        <div className="modal-section-subtitle">(optional)</div>
+      </div>
+      <div>
+        <TextAreaLight
+          rows={3}
+          id="map-description"
+          style={{resize: 'none'}}
+          value={mapInfo.description}
+          onChange={e => onChangeInput('description', e)}
+          placeholder="Type map description"
+        />
+      </div>
+      <StyledModalInputFootnote
+        error={
+          Boolean(characterLimits?.description) && mapInfo.description.length > Number(characterLimits?.description)
+        }
+      >
+        {mapInfo.description.length}/
+        {characterLimits?.description || MAP_INFO_CHARACTER.description} characters
+      </StyledModalInputFootnote>
+    </StyledModalSection>
+  </div>
+);
+
+function SaveMapModalFactory() {
+  /**
+   * @type {React.FunctionComponent<SaveMapModalProps>}
+   */
+  const SaveMapModal: React.FC<SaveMapModalProps> = ({
+    mapInfo,
+    exportImage,
+    characterLimits = {},
+    cloudProviders,
+    isProviderLoading,
+    currentProvider,
+    providerError,
+    onSetCloudProvider,
+    onUpdateImageSetting,
+    cleanupExportImage,
+    onSetMapInfo
+  }) => {
+    const onChangeInput = (
+      key: string,
+      {target: {value}}: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+    ) => {
+      onSetMapInfo({[key]: value});
+    };
+    const provider = currentProvider ? cloudProviders.find(p => p.name === currentProvider) : null;
+
+    return (
+      <ProviderModalContainer
+        onSetCloudProvider={onSetCloudProvider}
+        cloudProviders={cloudProviders}
+        currentProvider={currentProvider}
+      >
+        <ImageModalContainer
+          currentProvider={currentProvider}
+          cloudProviders={cloudProviders}
+          onUpdateImageSetting={onUpdateImageSetting}
+          cleanupExportImage={cleanupExportImage}
+        >
+          <StyledSaveMapModal>
+            <StyledModalContent className="save-map-modal-content">
+              <StyledExportSection disabled={isProviderLoading}>
+                <div className="description">
+                  <div className="title">
+                    <FormattedMessage id={'modal.saveMap.title'} />
+                  </div>
+                  <div className="subtitle">
+                    <FormattedMessage id={'modal.saveMap.subtitle'} />
+                  </div>
+                </div>
+                <div className="selection">
+                  {cloudProviders.map(cloudProvider => (
+                    <CloudTile
+                      key={cloudProvider.name}
+                      onSelect={() => onSetCloudProvider(cloudProvider.name)}
+                      onSetCloudProvider={onSetCloudProvider}
+                      cloudProvider={cloudProvider}
+                      isSelected={cloudProvider.name === currentProvider}
+                      isConnected={Boolean(
+                        cloudProvider.getAccessToken && cloudProvider.getAccessToken()
+                      )}
+                    />
+                  ))}
+                </div>
+              </StyledExportSection>
+              {provider && provider.getManagementUrl && (
+                <StyledExportSection style={{margin: '2px 0'}}>
+                  <div className="description" />
+                  <div className="selection">
+                    <a
+                      key={1}
+                      href={provider.getManagementUrl()}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      style={{textDecoration: 'underline'}}
+                    >
+                      Go to your Kepler.gl {provider.displayName} page
+                    </a>
+                  </div>
+                </StyledExportSection>
+              )}
+              <StyledExportSection>
+                <div className="description image-preview-panel">
+                  <ImagePreview
+                    exportImage={exportImage}
+                    width={MAP_THUMBNAIL_DIMENSION.width}
+                    showDimension={false}
+                  />
+                </div>
+                {isProviderLoading ? (
+                  <div className="selection map-saving-animation">
+                    <UploadAnimation icon={provider && provider.icon} />
+                  </div>
+                ) : (
+                  <MapInfoPanel
+                    mapInfo={mapInfo}
+                    characterLimits={characterLimits}
+                    onChangeInput={onChangeInput}
+                  />
+                )}
+              </StyledExportSection>
+              {providerError ? (
+                <StatusPanel
+                  isLoading={false}
+                  error={providerError}
+                  providerIcon={provider && provider.icon}
+                />
+              ) : null}
+            </StyledModalContent>
+          </StyledSaveMapModal>
+        </ImageModalContainer>
+      </ProviderModalContainer>
+    );
+  };
+
+  SaveMapModal.defaultProps = {
+    characterLimits: MAP_INFO_CHARACTER,
+    cloudProviders: [],
+    providerError: null,
+    isProviderLoading: false,
+    onSetCloudProvider: nop,
+    onUpdateImageSetting: nop
+  };
+
+  return SaveMapModal;
+}
+
+export default SaveMapModalFactory;

package/src/components/modals/share-map-modal.tsx

@@ -0,0 +1,217 @@
+// Copyright (c) 2022 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, {useState} from 'react';
+import styled, {ThemeProvider} from 'styled-components';
+import {CopyToClipboard} from 'react-copy-to-clipboard';
+import {themeLT} from 'styles/base';
+import ImageModalContainer, {ImageModalContainerProps} from './image-modal-container';
+import ProviderModalContainer from './provider-modal-container';
+
+import {
+  StyledModalContent,
+  StyledExportSection,
+  InputLight,
+  Button
+} from 'components/common/styled-components';
+import CloudTile from './cloud-tile';
+import StatusPanel from './status-panel';
+import {FormattedMessage} from 'localization';
+import {Provider} from 'cloud-providers';
+import {cleanupExportImage, SetCloudProviderPayload} from 'actions';
+
+export const StyledInputLabel = styled.label`
+  font-size: 12px;
+  color: ${props => props.theme.textColorLT};
+  letter-spacing: 0.2px;
+`;
+
+export const StyleSharingUrl = styled.div.attrs({
+  className: 'sharing-url'
+})`
+  width: 100%;
+  display: flex;
+  margin-bottom: 14px;
+  flex-direction: column;
+
+  input {
+    border-right: 0;
+  }
+
+  .button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+`;
+
+interface SharingUrlProps {
+  url: string;
+  message?: string;
+}
+
+export const SharingUrl: React.FC<SharingUrlProps> = ({url, message = ''}) => {
+  const [copied, setCopy] = useState(false);
+  return (
+    <StyleSharingUrl>
+      <StyledInputLabel>{message}</StyledInputLabel>
+      <div style={{display: 'flex'}}>
+        <InputLight type="text" value={url} readOnly />
+        <CopyToClipboard text={url} onCopy={() => setCopy(true)}>
+          <Button width="80px">{copied ? 'Copied!' : 'Copy'}</Button>
+        </CopyToClipboard>
+      </div>
+    </StyleSharingUrl>
+  );
+};
+const nop = () => {};
+
+const StyledShareMapModal = styled(StyledModalContent)`
+  padding: 24px 72px 40px 72px;
+  margin: 0 -72px -40px -72px;
+`;
+
+const StyledInnerDiv = styled.div`
+  min-height: 500px;
+`;
+
+interface ShareMapUrlModalFactoryProps {
+  isProviderLoading?: boolean;
+  isReady?: boolean;
+  onExport?: (provider: Provider) => void;
+  cloudProviders?: Provider[];
+  currentProvider: string | null;
+  providerError?: string;
+  successInfo?: {shareUrl?: string; folderLink?: string};
+  onSetCloudProvider?: (provider: SetCloudProviderPayload) => void;
+  onUpdateImageSetting: ImageModalContainerProps['onUpdateImageSetting'];
+  cleanupExportImage: typeof cleanupExportImage;
+}
+
+export default function ShareMapUrlModalFactory() {
+  const ShareMapUrlModal: React.FC<ShareMapUrlModalFactoryProps> = ({
+    isProviderLoading = false,
+    isReady,
+    onExport = nop,
+    cloudProviders = [],
+    currentProvider = null,
+    providerError = null,
+    successInfo = {},
+    onSetCloudProvider = nop,
+    onUpdateImageSetting = nop,
+    cleanupExportImage
+  }) => {
+    const {shareUrl, folderLink} = successInfo;
+    const provider = currentProvider ? cloudProviders.find(p => p.name === currentProvider) : null;
+
+    return (
+      <ThemeProvider theme={themeLT}>
+        <ProviderModalContainer
+          onSetCloudProvider={onSetCloudProvider}
+          cloudProviders={cloudProviders}
+          currentProvider={currentProvider}
+        >
+          <ImageModalContainer
+            currentProvider={currentProvider}
+            cloudProviders={cloudProviders}
+            onUpdateImageSetting={onUpdateImageSetting}
+            cleanupExportImage={cleanupExportImage}
+          >
+            <StyledShareMapModal className="export-cloud-modal">
+              <StyledInnerDiv>
+                <StyledExportSection>
+                  <div className="description">
+                    <div className="title">
+                      <FormattedMessage id={'modal.shareMap.shareUriTitle'} />
+                    </div>
+                    <div className="subtitle">
+                      <FormattedMessage id={'modal.shareMap.shareUriSubtitle'} />
+                    </div>
+                  </div>
+                  <div className="selection">
+                    <div className="title warning">
+                      <FormattedMessage id={'modal.shareMap.shareDisclaimer'} />
+                    </div>
+                  </div>
+                </StyledExportSection>
+                <StyledExportSection disabled={isProviderLoading}>
+                  <div className="description">
+                    <div className="title">
+                      <FormattedMessage id={'modal.shareMap.cloudTitle'} />
+                    </div>
+                    <div className="subtitle">
+                      <FormattedMessage id={'modal.shareMap.cloudSubtitle'} />
+                    </div>
+                  </div>
+                  <div className="selection">
+                    {cloudProviders.map(cloudProvider => (
+                      <CloudTile
+                        key={cloudProvider.name}
+                        onSelect={() => onExport(cloudProvider)}
+                        onSetCloudProvider={onSetCloudProvider}
+                        cloudProvider={cloudProvider}
+                        actionName="Upload"
+                        isSelected={cloudProvider.name === currentProvider}
+                        isConnected={Boolean(cloudProvider.getAccessToken())}
+                        isReady={isReady}
+                      />
+                    ))}
+                  </div>
+                </StyledExportSection>
+                {isProviderLoading || providerError ? (
+                  <StatusPanel
+                    isLoading={isProviderLoading}
+                    error={providerError}
+                    providerIcon={provider && provider.icon}
+                  />
+                ) : null}
+                {shareUrl && (
+                  <StyledExportSection>
+                    <div className="description">
+                      <div className="title">Share Url</div>
+                    </div>
+                    <div className="selection">
+                      <SharingUrl key={0} url={shareUrl} />
+                      {provider && folderLink && (
+                        <a
+                          key={1}
+                          href={folderLink}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          style={{textDecoration: 'underline'}}
+                        >
+                          <FormattedMessage
+                            id={'modal.shareMap.gotoPage'}
+                            values={{currentProvider}}
+                          />
+                        </a>
+                      )}
+                    </div>
+                  </StyledExportSection>
+                )}
+              </StyledInnerDiv>
+            </StyledShareMapModal>
+          </ImageModalContainer>
+        </ProviderModalContainer>
+      </ThemeProvider>
+    );
+  };
+
+  return ShareMapUrlModal;
+}