feat: rebooting indicator for wiki

fixes #511
tiddly-gittly · Mar 20, 2024 · c13b14b · c13b14b
1 parent c73647d
commit c13b14b
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 24 deletions.
diff --git a/localization/locales/en/translation.json b/localization/locales/en/translation.json
@@ -223,6 +223,7 @@
     "Later": "Later",
     "RestartAppNow": "Restart App Now",
     "RestartWikiNow": "Restart Wiki Now",
+    "Restarting": "Restarting",
     "MadeWithLove": "<0>Made with </0><1>❤</1><2> by </2>",
     "ReportBug": "Report Bug",
     "ReportBugDetail": "If you have read the tutorial, and carefully read the error output text, and wisely check your input, you can click on the button."

diff --git a/localization/locales/zh_CN/translation.json b/localization/locales/zh_CN/translation.json
@@ -309,6 +309,7 @@
     "RestartMessage": "您需要重新启动本程序才能使此更改生效。",
     "RestartAppNow": "现在重启应用",
     "RestartWikiNow": "现在重启知识库",
+    "Restarting": "重启中",
     "ReportBug": "报告错误",
     "ReportBugDetail": "如果你看过教程了解操作流程，并仔细读过报错内容并思考，仔细检查了自己的输入觉得没问题，可以点击按钮。",
     "MadeWithLove": "<0>有</0><1> ❤ </1><2>的开发者：</2>"

diff --git a/src/components/WorkspaceIconAndSelector/SortableWorkspaceSelectorButton.tsx b/src/components/WorkspaceIconAndSelector/SortableWorkspaceSelectorButton.tsx
@@ -1,7 +1,7 @@
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { getWorkspaceMenuTemplate, openWorkspaceTagTiddler } from '@services/workspaces/getWorkspaceMenuTemplate';
-import { IWorkspace } from '@services/workspaces/interface';
+import { IWorkspaceWithMetadata } from '@services/workspaces/interface';
 import { MouseEvent, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { WorkspaceSelectorBase } from './WorkspaceSelectorBase';
@@ -14,7 +14,7 @@ export interface ISortableItemProps {
   index: number;
   showSideBarIcon: boolean;
   showSidebarTexts: boolean;
-  workspace: IWorkspace;
+  workspace: IWorkspaceWithMetadata;
 }
 
 export function SortableWorkspaceSelectorButton({ index, workspace, showSidebarTexts, showSideBarIcon }: ISortableItemProps): JSX.Element {
@@ -52,6 +52,7 @@ export function SortableWorkspaceSelectorButton({ index, workspace, showSidebarT
     <div ref={setNodeRef} style={style} {...attributes} {...listeners} onContextMenu={onWorkspaceContextMenu}>
       <WorkspaceSelectorBase
         workspaceClickedLoading={workspaceClickedLoading}
+        restarting={workspace.metadata.isRestarting}
         showSideBarIcon={showSideBarIcon}
         onClick={onWorkspaceClick}
         active={active}

diff --git a/src/components/WorkspaceIconAndSelector/WorkspaceSelectorBase.tsx b/src/components/WorkspaceIconAndSelector/WorkspaceSelectorBase.tsx
@@ -1,12 +1,14 @@
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import BadgeRaw from '@mui/material/Badge';
 import Promise from 'bluebird';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import styled, { keyframes } from 'styled-components';
+import { keyframes, styled } from 'styled-components';
 import is from 'typescript-styled-is';
 
 import { getAssetsFileUrl } from '@/helpers/url';
+import { Tooltip } from '@mui/material';
 import defaultIcon from '../../images/default-icon.png';
 
 Promise.config({ cancellation: true });
@@ -121,6 +123,7 @@ interface Props {
   index?: number;
   onClick?: () => void;
   picturePath?: string | null;
+  restarting?: boolean;
   showSideBarIcon: boolean;
   showSidebarTexts?: boolean;
   transparentBackground?: boolean;
@@ -130,6 +133,7 @@ interface Props {
 }
 export function WorkspaceSelectorBase({
   active = false,
+  restarting: loading = false,
   badgeCount = 0,
   hibernated = false,
   showSideBarIcon = true,
@@ -146,9 +150,35 @@ export function WorkspaceSelectorBase({
   const [shortWorkspaceName, shortWorkspaceNameSetter] = useState<string>(t('Loading'));
   useEffect(() => {
     void window.service.native.path('basename', workspaceName).then((baseName) => {
-      shortWorkspaceNameSetter(baseName === undefined ? t('WorkspaceSelector.BadWorkspacePath') : baseName);
+      shortWorkspaceNameSetter(baseName ?? t('WorkspaceSelector.BadWorkspacePath'));
     });
   }, [workspaceName, t]);
+  let icon = showSideBarIcon && (
+    <Avatar
+      $large={!showSidebarTexts}
+      $transparent={transparentBackground}
+      $addAvatar={id === 'add'}
+      $highlightAdd={index === 0}
+      id={id === 'add' || id === 'guide' ? 'add-workspace-button' : `workspace-avatar-${id}`}
+    >
+      {id === 'add'
+        ? (
+          '+'
+        )
+        : (id === 'guide'
+          ? (
+            '※'
+          )
+          : <AvatarPicture alt='Icon' $large={!showSidebarTexts} src={picturePath ? getAssetsFileUrl(picturePath) : defaultIcon} draggable={false} />)}
+    </Avatar>
+  );
+  if (loading) {
+    icon = (
+      <Tooltip title={<span>{t('Dialog.Restarting')}</span>}>
+        <RestartAltIcon />
+      </Tooltip>
+    );
+  }
   return (
     <Root
       $hibernated={hibernated}
@@ -157,25 +187,7 @@ export function WorkspaceSelectorBase({
       onClick={workspaceClickedLoading ? () => {} : onClick}
     >
       <Badge color='secondary' badgeContent={badgeCount} max={99}>
-        {showSideBarIcon && (
-          <Avatar
-            $large={!showSidebarTexts}
-            $transparent={transparentBackground}
-            $addAvatar={id === 'add'}
-            $highlightAdd={index === 0}
-            id={id === 'add' || id === 'guide' ? 'add-workspace-button' : `workspace-avatar-${id}`}
-          >
-            {id === 'add'
-              ? (
-                '+'
-              )
-              : (id === 'guide'
-                ? (
-                  '※'
-                )
-                : <AvatarPicture alt='Icon' $large={!showSidebarTexts} src={picturePath ? getAssetsFileUrl(picturePath) : defaultIcon} draggable={false} />)}
-          </Avatar>
-        )}
+        {icon}
       </Badge>
       {showSidebarTexts && (
         <ShortcutText $active={active}>

diff --git a/src/services/workspaces/interface.ts b/src/services/workspaces/interface.ts
@@ -143,6 +143,10 @@ export interface IWorkspaceMetaData {
    * indicating server or webpage is still loading
    */
   isLoading?: boolean;
+  /**
+   * Is restarting service for this workspace.
+   */
+  isRestarting?: boolean;
 }
 
 export interface IWorkspaceWithMetadata extends IWorkspace {

diff --git a/src/services/workspacesView/index.ts b/src/services/workspacesView/index.ts
@@ -378,7 +378,8 @@ export class WorkspaceView implements IWorkspaceViewService {
     }
     logger.info(`Restarting workspace ${workspaceToRestart.id}`);
     await this.updateLastUrl(workspaceToRestart.id);
-    await this.workspaceService.updateMetaData(workspaceToRestart.id, { didFailLoadErrorMessage: null, isLoading: false });
+    // start restarting. Set isLoading to false, and it will be set by some callback elsewhere to true.
+    await this.workspaceService.updateMetaData(workspaceToRestart.id, { didFailLoadErrorMessage: null, isLoading: false, isRestarting: true });
     await this.wikiService.stopWiki(workspaceToRestart.id);
     await this.initializeWorkspaceView(workspaceToRestart, { syncImmediately: false });
     if (await this.workspaceService.workspaceDidFailLoad(workspaceToRestart.id)) {
@@ -387,6 +388,7 @@ export class WorkspaceView implements IWorkspaceViewService {
     }
     await this.viewService.reloadViewsWebContents(workspaceToRestart.id);
     await this.wikiService.wikiOperationInBrowser(WikiChannel.generalNotification, workspaceToRestart.id, [i18n.t('ContextMenu.RestartServiceComplete')]);
+    await this.workspaceService.updateMetaData(workspaceToRestart.id, { isRestarting: false });
   }
 
   public async restartAllWorkspaceView(): Promise<void> {