fix: disable updater button when app updating (#3268)

packages/component/src/components/app-sidebar/app-updater-button/index.css.ts

@@ -125,6 +125,9 @@ export const versionLabel = style({
   fontSize: '10px',
   lineHeight: '18px',
   borderRadius: '4px',
+  maxWidth: '100px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
 });
 
 export const whatsNewLabel = style({

packages/component/src/components/app-sidebar/app-updater-button/index.tsx

@@ -1,9 +1,10 @@
+import { Tooltip } from '@affine/component';
 import { isBrowser, Unreachable } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon, ResetIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { atom, useAtomValue, useSetAtom } from 'jotai';
-import { startTransition, useCallback } from 'react';
+import { startTransition, useCallback, useState } from 'react';
 
 import * as styles from './index.css';
 import {
@@ -48,6 +49,7 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
   const currentVersion = useAtomValue(currentVersionAtom);
   const downloadProgress = useAtomValue(downloadProgressAtom);
   const setChangelogCheckAtom = useSetAtom(changelogCheckedAtom);
+  const [appQuitting, setAppQuitting] = useState(false);
 
   const onDismissCurrentChangelog = useCallback(() => {
     if (!currentVersion) {
@@ -64,6 +66,7 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
   }, [currentVersion, setChangelogCheckAtom]);
   const onClickUpdate = useCallback(() => {
     if (updateReady) {
+      setAppQuitting(true);
       window.apis?.updater.quitAndInstall().catch(err => {
         // TODO: add error toast here
         console.error(err);
@@ -103,19 +106,37 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
   const whatsNew =
     !updateAvailable && currentChangelogUnread ? renderWhatsNew() : null;
 
-  return (
+  const wrapWithTooltip = (
+    node: React.ReactElement,
+    tooltip?: React.ReactElement | string
+  ) => {
+    if (!tooltip) {
+      return node;
+    }
+
+    return (
+      <Tooltip content={tooltip} placement="top-start">
+        {node}
+      </Tooltip>
+    );
+  };
+
+  return wrapWithTooltip(
     <button
       style={style}
       className={clsx([styles.root, className])}
       data-has-update={updateAvailable ? 'true' : 'false'}
-      data-disabled={updateAvailable?.allowAutoUpdate && !updateReady}
+      data-disabled={
+        (updateAvailable?.allowAutoUpdate && !updateReady) || appQuitting
+      }
       onClick={onClickUpdate}
     >
       {updateAvailableNode}
       {whatsNew}
       <div className={styles.particles} aria-hidden="true"></div>
       <span className={styles.halo} aria-hidden="true"></span>
-    </button>
+    </button>,
+    updateAvailable?.version
   );
 
   function renderUpdateAvailableAllowAutoUpdate() {