admin: icon on message dialogs
Massimo Melina committed
Feb 13, 2022 at 19:06 UTC
6de9a482bf954ef3e034b1e04999c7b96cc30361
4 files changed
+29
-13
admin/src/AccountsPage.ts
+2
-2
@@ -173,7 +173,7 @@ function AccountForm({ account, done, groups }: { account: Account, groups: stri
173
throw e
174
}
175
done(username)
176
- return alertDialog("Account created")
176
+ return alertDialog("Account created", 'success')
177
}
178
await apiCall('set_account', {
179
username: account.username,
@@ -182,7 +182,7 @@ function AccountForm({ account, done, groups }: { account: Account, groups: stri
182
if (password)
183
await apiNewPassword(username, password)
184
done(username)
185
- return alertDialog("Account modified")
185
+ return alertDialog("Account modified", 'success')
186
}
187
catch (e) {
188
return alertDialog(e as Error)
admin/src/ConfigPage.ts
+1
-3
@@ -73,8 +73,7 @@ export default function ConfigPage() {
73
await apiCall('set_config', { values: state.changes })
74
Object.assign(loaded, state.changes) // since changes are recalculated subscribing state.config, but it depends on 'loaded' to (which cannot be subscribed), be sure to update loaded first
75
recalculateChanges()
76
- console.debug('saved')
77
- await alertDialog("Changes applied")
76
+ await alertDialog("Changes applied", 'success')
77
}
78
}
79
@@ -85,7 +84,6 @@ function recalculateChanges() {
84
if (JSON.stringify(v) !== JSON.stringify(loaded?.[k]))
85
changes[k] = v
86
state.changes = changes
88
- console.debug('changes', Object.keys(changes))
87
}
88
89
function ServerPort({ label, value, onChange }: FieldProps<number | null>) {
admin/src/addFiles.ts
+1
-1
@@ -40,7 +40,7 @@ export async function addVirtual() {
40
const under = getUnder()
41
await apiCall('add_vfs', { under, name })
42
reloadVfs([ (under||'') + '/' + name ])
43
- await alertDialog(name + " created")
43
+ await alertDialog(name + " created", 'success')
44
}
45
catch(e) {
46
await alertDialog(e as Error)
admin/src/dialog.ts
+25
-7
@@ -1,6 +1,16 @@
1
-import { Button, Dialog as MuiDialog, DialogContent, DialogTitle } from '@mui/material'
2
-import { createElement as h, Fragment, FunctionComponent, ReactElement, ReactNode, useEffect, useRef } from 'react'
1
+import { Box, Button, Dialog as MuiDialog, DialogContent, DialogTitle } from '@mui/material'
2
+import {
3
+ createElement as h,
4
+ Fragment,
5
+ FunctionComponent,
6
+ isValidElement,
7
+ ReactElement,
8
+ ReactNode,
9
+ useEffect,
10
+ useRef
11
+} from 'react'
12
import { proxy, useSnapshot } from 'valtio'
13
+import { Check, Error as ErrorIcon, Info, Warning } from '@mui/icons-material'
14
15
interface DialogOptions {
16
Content: FunctionComponent,
@@ -73,9 +83,16 @@ export function closeDialog(v?:any) {
83
}
84
}
85
76
-type AlertType = 'error' | 'warning' | 'info'
86
+type AlertType = 'error' | 'warning' | 'info' | 'success'
87
78
-export async function alertDialog(msg: ReactElement | string | Error, type:AlertType='info') {
88
+const type2ico = {
89
+ error: ErrorIcon,
90
+ warning: Warning,
91
+ info: Info,
92
+ success: Check,
93
+}
94
+
95
+export async function alertDialog(msg: ReactElement | string | Error, type:AlertType='info', icon?: ReactElement) {
96
if (msg instanceof Error) {
97
msg = String(msg)
98
type = 'error'
@@ -88,9 +105,10 @@ export async function alertDialog(msg: ReactElement | string | Error, type:Alert
105
}))
106
107
function Content(){
91
- if (typeof msg === 'string' || msg instanceof Error)
92
- msg = h('div', {}, String(msg))
93
- return msg
108
+ return h(Box, { display:'flex', flexDirection: 'column', alignItems: 'center', gap: 1 },
109
+ icon ?? h(type2ico[type], { color:type }),
110
+ isValidElement(msg) ? msg : h('div', {}, String(msg))
111
+ )
112
}
113
}
114