added new tag to providers

Signed-off-by: Giuseppe Macri <[email protected]>
keplergl · Nov 17, 2023 · 868c90e · 868c90e
1 parent e33eed1
commit 868c90e
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/examples/demo-app/src/cloud-providers/fsq-studio/foursquare-provider.js b/examples/demo-app/src/cloud-providers/fsq-studio/foursquare-provider.js
@@ -79,6 +79,7 @@ export default class FoursquareProvider extends Provider {
 
     // the domain needs to be passed as input param
     this._folderLink = userMapsURL;
+    this.isNew = true;
   }
 
   hasPrivateStorage() {

diff --git a/src/cloud-providers/src/provider.ts b/src/cloud-providers/src/provider.ts
@@ -86,6 +86,7 @@ export default class Provider {
   displayName: string;
   icon: ComponentType<IconProps>;
   thumbnail: Thumbnail;
+  isNew: boolean = false;
 
   constructor(props: ProviderProps) {
     this.name = props.name || NAME;

diff --git a/src/components/src/modals/cloud-tile.tsx b/src/components/src/modals/cloud-tile.tsx
@@ -60,6 +60,7 @@ const StyledTileWrapper = styled.div.attrs({
 
 const StyledBox = styled(CenterVerticalFlexbox)`
   margin-right: 12px;
+  position: relative;
 `;
 
 const StyledCloudName = styled.div`
@@ -96,6 +97,25 @@ const LogoutButton = ({onClick}: OnClickProps) => (
   </Button>
 );
 
+const NewTag = styled.div`
+  width: 37px;
+  height: 19px;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  border-radius: 8px;
+  padding: 4px 8px;
+  background-color: #EDE9F9;
+  color: #8863F8;
+  position: absolute;
+  left: 35%;
+  top: -8px
+  z-index: 500;
+  font-size: 11px;
+  line-height: 10px;
+;
+`;
+
 interface CloudTileProps {
   actionName?: string | null;
   // cloud provider class
@@ -167,6 +187,10 @@ const CloudTile: React.FC<CloudTileProps> = ({provider, actionName}) => {
 
   return (
     <StyledBox>
+      {provider.isNew ? (
+        <NewTag>New</NewTag>
+      ) : null}
+      <div></div>
       <StyledTileWrapper onClick={onSelect} selected={isSelected}>
         <StyledCloudName>{displayName || name}</StyledCloudName>
         {provider.icon ? <provider.icon height="64px" /> : null}

diff --git a/src/components/src/modals/save-map-modal.tsx b/src/components/src/modals/save-map-modal.tsx
@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {useMemo} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import styled from 'styled-components';
 import ImageModalContainer, {ImageModalContainerProps} from './image-modal-container';
 import {FlexContainer} from '../common/flex-container';
@@ -207,6 +207,12 @@ function SaveMapModalFactory() {
       [provider, mapInfo]
     );
 
+    const confirm = useCallback(() => {
+      if (provider) {
+        onConfirm(provider);
+      }
+    }, [provider]);
+
     return (
       <ImageModalContainer
         provider={provider}
@@ -269,7 +275,7 @@ function SaveMapModalFactory() {
         </StyledSaveMapModal>
         <ModalFooter
           cancel={onCancel}
-          confirm={() => provider && onConfirm(provider)}
+          confirm={confirm}
           confirmButton={confirmButton}
         />
       </ImageModalContainer>