From 8ebdb58f4b78daff916cb09e57c72a4c3679aba2 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Tue, 6 Aug 2024 16:48:25 -0700
Subject: [PATCH] Use button for update available banner (#202)

---
 emain/emain.ts                  |  4 ++--
 frontend/app/element/button.tsx |  1 +
 frontend/app/tab/tabbar.less    |  8 +-------
 frontend/app/tab/tabbar.tsx     | 16 +++++++++++-----
 frontend/util/util.ts           |  2 +-
 5 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/emain/emain.ts b/emain/emain.ts
index 71d6a9343..15618edf3 100644
--- a/emain/emain.ts
+++ b/emain/emain.ts
@@ -623,8 +623,8 @@ function makeAppMenu() {
         },
         {
             label: "Check for Updates",
-            click: async () => {
-                await updater?.checkForUpdates(true);
+            click: () => {
+                fireAndForget(() => updater?.checkForUpdates(true));
             },
         },
         {
diff --git a/frontend/app/element/button.tsx b/frontend/app/element/button.tsx
index 315ae017a..4f3a04559 100644
--- a/frontend/app/element/button.tsx
+++ b/frontend/app/element/button.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import "./button.less";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    forwardedRef?: React.RefObject<HTMLButtonElement>;
     className?: string;
     children?: React.ReactNode;
 }
diff --git a/frontend/app/tab/tabbar.less b/frontend/app/tab/tabbar.less
index 2a2f398c7..89d59edce 100644
--- a/frontend/app/tab/tabbar.less
+++ b/frontend/app/tab/tabbar.less
@@ -99,18 +99,12 @@
         --os-handle-border-radius: 2px;
     }
 
-    .update-available-label {
+    .update-available-button {
         height: 80%;
         opacity: 0.7;
-        user-select: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
         margin: auto 4px;
         color: black;
         background-color: var(--accent-color);
-        padding: 0 5px;
-        border-radius: var(--block-border-radius);
         flex: 0 0 fit-content;
     }
 }
diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx
index 0b7a1c39b..8cd619c37 100644
--- a/frontend/app/tab/tabbar.tsx
+++ b/frontend/app/tab/tabbar.tsx
@@ -12,6 +12,7 @@ import React, { createRef, useCallback, useEffect, useRef, useState } from "reac
 import { Tab } from "./tab";
 
 import { debounce } from "throttle-debounce";
+import { Button } from "../element/button";
 import "./tabbar.less";
 
 const TAB_DEFAULT_WIDTH = 130;
@@ -70,7 +71,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
     const draggerLeftRef = useRef<HTMLDivElement>(null);
     const tabWidthRef = useRef<number>(TAB_DEFAULT_WIDTH);
     const scrollableRef = useRef<boolean>(false);
-    const updateStatusLabelRef = useRef<HTMLDivElement>(null);
+    const updateStatusButtonRef = useRef<HTMLButtonElement>(null);
 
     const windowData = useAtomValue(atoms.waveWindow);
     const { activetabid } = windowData;
@@ -128,7 +129,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
         const tabbarWrapperWidth = tabbarWrapperRef.current.getBoundingClientRect().width;
         const windowDragLeftWidth = draggerLeftRef.current.getBoundingClientRect().width;
         const addBtnWidth = addBtnRef.current.getBoundingClientRect().width;
-        const updateStatusLabelWidth = updateStatusLabelRef.current?.getBoundingClientRect().width ?? 0;
+        const updateStatusLabelWidth = updateStatusButtonRef.current?.getBoundingClientRect().width ?? 0;
         const spaceForTabs =
             tabbarWrapperWidth - (windowDragLeftWidth + DRAGGER_RIGHT_MIN_WIDTH + addBtnWidth + updateStatusLabelWidth);
 
@@ -507,9 +508,14 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
     let updateAvailableLabel: React.ReactNode = null;
     if (appUpdateStatus === "ready") {
         updateAvailableLabel = (
-            <div ref={updateStatusLabelRef} className="update-available-label" onClick={onUpdateAvailableClick}>
-                Update Available: Click to Install
-            </div>
+            <Button
+                forwardedRef={updateStatusButtonRef}
+                className="update-available-button"
+                title="Click to Install Update"
+                onClick={onUpdateAvailableClick}
+            >
+                Update Available
+            </Button>
         );
     }
 
diff --git a/frontend/util/util.ts b/frontend/util/util.ts
index 0671bbd94..fbbe2280a 100644
--- a/frontend/util/util.ts
+++ b/frontend/util/util.ts
@@ -102,7 +102,7 @@ function makeIconClass(icon: string, fw: boolean): string {
  * @param f The promise to run
  */
 function fireAndForget(f: () => Promise<any>) {
-    f().catch((e) => {
+    f()?.catch((e) => {
         console.log("fireAndForget error", e);
     });
 }