fix: Navbar DownloadButton behavior and track event (#230)

* fix: Navbar DownloadButton behavior and track event * feat: update workflow pull-request to use ubuntu-latest * feat: add the option to hide download button
decentraland · Feb 13, 2025 · 82a828c · 82a828c
1 parent e863dbd
commit 82a828c
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 37 deletions.
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -10,7 +10,7 @@ on:
 
 jobs:
   release:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v2

diff --git a/src/components/DownloadButton/DownloadButton.styled.ts b/src/components/DownloadButton/DownloadButton.styled.ts
@@ -7,7 +7,7 @@ const DownloadButtonStyled = styled(Button)((props) => {
   const { theme } = props
   return {
     "&.MuiButton-sizeMedium.MuiButton-containedPrimary": {
-      height: "48px",
+      height: "46px",
       fontSize: "14px",
       fontWeight: 600,
       borderRadius: "6px",

diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx
@@ -34,6 +34,7 @@ const UserMenu = React.memo((props: UserMenuProps) => {
     isDisconnecting,
     manaBalances,
     i18n = i18nUserMenu,
+    hideDownloadButton,
     onClickSignIn,
     onClickBalance,
     onClickOpen,
@@ -119,9 +120,7 @@ const UserMenu = React.memo((props: UserMenuProps) => {
 
       setTimeout(
         () => {
-          onClickDownload
-            ? onClickDownload(event)
-            : window.open(config.get("DOWNLOAD_URL"), "_blank", "noopener")
+          window.open(config.get("DOWNLOAD_URL"), "_blank", "noopener")
         },
         onClickUserMenuItem ? 300 : 0
       )
@@ -135,20 +134,11 @@ const UserMenu = React.memo((props: UserMenuProps) => {
 
       if (!userAgentData || !defaultDownloadOption) return
 
-      onClickUserMenuItem &&
-        onClickUserMenuItem(event, {
-          type: UserMenuEventId.DOWNLOAD,
-          track_uuid: trackingId || undefined,
-          url: config.get("DOWNLOAD_URL"),
+      onClickDownload &&
+        onClickDownload(event, {
+          href: config.get("DOWNLOAD_URL"),
         })
 
-      setTimeout(
-        () => {
-          triggerFileDownload(defaultDownloadOption.link)
-        },
-        onClickUserMenuItem ? 300 : 0
-      )
-
       const redirectUrl = updateUrlWithLastValue(
         config.get("DOWNLOAD_SUCCESS_URL"),
         "os",
@@ -158,9 +148,15 @@ const UserMenu = React.memo((props: UserMenuProps) => {
       const finalUrl = addQueryParamsToUrlString(redirectUrl, {
         arch: userAgentData.cpu.architecture,
       })
-      setTimeout(() => {
-        window.location.href = finalUrl
-      }, 3000)
+
+      setTimeout(
+        () => {
+          triggerFileDownload(defaultDownloadOption.link).then(() => {
+            window.location.href = finalUrl
+          })
+        },
+        onClickDownload ? 300 : 0
+      )
     },
     [defaultDownloadOption, userAgentData]
   )
@@ -242,7 +238,8 @@ const UserMenu = React.memo((props: UserMenuProps) => {
           {(isLoadingUserAgentData || !defaultDownloadOption) &&
             userAgentData &&
             !userAgentData.mobile &&
-            !userAgentData.tablet && (
+            !userAgentData.tablet &&
+            !hideDownloadButton && (
               <DownloadButton
                 href={config.get("DOWNLOAD_URL")}
                 onClick={handleClickDownload}
@@ -251,14 +248,16 @@ const UserMenu = React.memo((props: UserMenuProps) => {
               />
             )}
 
-          {!isLoadingUserAgentData && defaultDownloadOption && (
-            <DownloadButton
-              href={defaultDownloadOption.link!}
-              onClick={onClickDownloadOsHandler}
-              endIcon={defaultDownloadOption.icon}
-              label={i18n.download}
-            />
-          )}
+          {!isLoadingUserAgentData &&
+            defaultDownloadOption &&
+            !hideDownloadButton && (
+              <DownloadButton
+                href={defaultDownloadOption.link!}
+                onClick={onClickDownloadOsHandler}
+                endIcon={defaultDownloadOption.icon}
+                label={i18n.download}
+              />
+            )}
         </>
       )}
     </UserMenuContainer>

diff --git a/src/components/UserMenu/UserMenu.types.ts b/src/components/UserMenu/UserMenu.types.ts
@@ -22,12 +22,16 @@ type UserMenuProps = Omit<
   isDisconnecting?: boolean
   isActivity?: boolean
   i18n?: UserMenuI18N
+  hideDownloadButton?: boolean
   onClickSignIn?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
   onClickOpen?: (
     event: React.MouseEvent<HTMLElement, MouseEvent>,
     trackingId: string
   ) => void
-  onClickDownload?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
+  onClickDownload?: (
+    event: React.MouseEvent<HTMLElement, MouseEvent>,
+    options: { href: string }
+  ) => void
 }
 
 enum UserMenuEventId {

diff --git a/src/modules/file.ts b/src/modules/file.ts
@@ -1,10 +1,13 @@
-const triggerFileDownload = (link: string): void => {
-  const a = document.createElement("a")
-  a.href = link
-  a.setAttribute("download", "")
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
+const triggerFileDownload = (link: string): Promise<void> => {
+  return new Promise((resolve) => {
+    const a = document.createElement("a")
+    a.href = link
+    a.setAttribute("download", "")
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    setTimeout(resolve, 3000)
+  })
 }
 
 export { triggerFileDownload }