AVO-588: Match share/copy icon to functionality (#7315)

* refactor: swap share icon to copy icon on desktop * chore: fix tests
electricitymaps · Oct 14, 2024 · 13b5bc1 · 13b5bc1
1 parent d133e05
commit 13b5bc1
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 12 deletions.
diff --git a/web/src/features/panels/zone/ShareButton.cy.tsx b/web/src/features/panels/zone/ShareButton.cy.tsx
@@ -1,3 +1,4 @@
+import { Capacitor } from '@capacitor/core';
 import { ToastProvider } from '@radix-ui/react-toast';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
@@ -12,28 +13,74 @@ describe('Share Button', () => {
     });
   });
 
-  it('should display share icon for iOS', () => {
+  it('should display copy button on desktop web', () => {
+    cy.stub(Capacitor, 'isNativePlatform').returns(false);
     cy.mount(
       <QueryClientProvider client={queryClient}>
         <ToastProvider>
           <ShareButton showIosIcon={true} />
         </ToastProvider>
       </QueryClientProvider>
     );
+    cy.get('[data-test-id="linkIcon"]').should('be.visible');
+    cy.get('[data-test-id="iosShareIcon"]').should('not.exist');
+    cy.get('[data-test-id="defaultShareIcon"]').should('not.exist');
+  });
+
+  it('should display share icon for iOS native app', () => {
+    cy.stub(Capacitor, 'isNativePlatform').returns(true);
+    cy.mount(
+      <QueryClientProvider client={queryClient}>
+        <ToastProvider>
+          <ShareButton showIosIcon={true} hasMobileUserAgent={true} />
+        </ToastProvider>
+      </QueryClientProvider>
+    );
     cy.get('[data-test-id="iosShareIcon"]').should('be.visible');
     cy.get('[data-test-id="defaultShareIcon"]').should('not.exist');
+    cy.get('[data-test-id="linkIcon"]').should('not.exist');
   });
 
-  it('should display default share icon', () => {
+  it('should display share icon for iOS mobile web', () => {
+    cy.stub(Capacitor, 'isNativePlatform').returns(false);
     cy.mount(
       <QueryClientProvider client={queryClient}>
         <ToastProvider>
-          <ShareButton showIosIcon={false} />
+          <ShareButton showIosIcon={true} hasMobileUserAgent={true} />
+        </ToastProvider>
+      </QueryClientProvider>
+    );
+    cy.get('[data-test-id="iosShareIcon"]').should('be.visible');
+    cy.get('[data-test-id="defaultShareIcon"]').should('not.exist');
+    cy.get('[data-test-id="linkIcon"]').should('not.exist');
+  });
+
+  it('should display default share icon for non-iOS native app', () => {
+    cy.stub(Capacitor, 'isNativePlatform').returns(true);
+    cy.mount(
+      <QueryClientProvider client={queryClient}>
+        <ToastProvider>
+          <ShareButton showIosIcon={false} hasMobileUserAgent={true} />
+        </ToastProvider>
+      </QueryClientProvider>
+    );
+    cy.get('[data-test-id="defaultShareIcon"]').should('be.visible');
+    cy.get('[data-test-id="iosShareIcon"]').should('not.exist');
+    cy.get('[data-test-id="linkIcon"]').should('not.exist');
+  });
+
+  it('should display default share icon for non-iOS mobile web', () => {
+    cy.stub(Capacitor, 'isNativePlatform').returns(false);
+    cy.mount(
+      <QueryClientProvider client={queryClient}>
+        <ToastProvider>
+          <ShareButton showIosIcon={false} hasMobileUserAgent={true} />
         </ToastProvider>
       </QueryClientProvider>
     );
     cy.get('[data-test-id="defaultShareIcon"]').should('be.visible');
     cy.get('[data-test-id="iosShareIcon"]').should('not.exist');
+    cy.get('[data-test-id="linkIcon"]').should('not.exist');
   });
 
   it('should trigger toast on click', () => {

diff --git a/web/src/features/panels/zone/ShareButton.tsx b/web/src/features/panels/zone/ShareButton.tsx
@@ -1,8 +1,9 @@
+import { Capacitor } from '@capacitor/core';
 import { Share as CapShare } from '@capacitor/share';
 import { Button, ButtonProps } from 'components/Button';
 import { Toast, useToastReference } from 'components/Toast';
 import { isIos, isMobile } from 'features/weather-layers/wind-layer/util';
-import { Share, Share2 } from 'lucide-react';
+import { Link, Share, Share2 } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
@@ -17,6 +18,7 @@ interface ShareButtonProps
   iconSize?: number;
   shareUrl?: string;
   showIosIcon?: boolean;
+  hasMobileUserAgent?: boolean;
 }
 const trackShareClick = trackShare(ShareType.SHARE);
 const DURATION = 3 * 1000;
@@ -25,6 +27,7 @@ export function ShareButton({
   iconSize = DEFAULT_ICON_SIZE,
   shareUrl,
   showIosIcon = isIos(),
+  hasMobileUserAgent = isMobile(),
   ...restProps
 }: ShareButtonProps) {
   const { t } = useTranslation();
@@ -64,14 +67,23 @@ export function ShareButton({
   };
 
   const onClick = async () => {
-    if (isMobile() && (await CapShare.canShare())) {
+    if (hasMobileUserAgent && (await CapShare.canShare())) {
       share();
     } else {
       copyToClipboard();
     }
     trackShareClick();
   };
 
+  let shareIcon = <Link data-test-id="linkIcon" size={iconSize} />;
+  if (hasMobileUserAgent || Capacitor.isNativePlatform()) {
+    shareIcon = showIosIcon ? (
+      <Share data-test-id="iosShareIcon" size={iconSize} />
+    ) : (
+      <Share2 data-test-id="defaultShareIcon" size={iconSize} />
+    );
+  }
+
   return (
     <>
       <Button
@@ -83,13 +95,7 @@ export function ShareButton({
           showIosIcon ? '' : '-translate-x-px'
         )}
         onClick={onClick}
-        icon={
-          showIosIcon ? (
-            <Share data-test-id="iosShareIcon" size={iconSize} />
-          ) : (
-            <Share2 data-test-id="defaultShareIcon" size={iconSize} />
-          )
-        }
+        icon={shareIcon}
         {...restProps}
       />
       <Toast