hfs 0.26.6 → 0.26.8

package/admin/src/addFiles.ts

@@ -0,0 +1,59 @@
+// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+
+import { alertDialog, newDialog, promptDialog } from './dialog'
+import { createElement as h, Fragment } from 'react'
+import { Box } from '@mui/material'
+import { VfsNode, reloadVfs } from './VfsPage'
+import { state } from './state'
+import { apiCall } from './api'
+import FilePicker from './FilePicker'
+import { onlyTruthy } from './misc'
+
+export default function addFiles() {
+    const close = newDialog({
+        title: "Add files or folders",
+        dialogProps: { sx:{ minWidth: 'min(90vw, 40em)', minHeight: 'calc(100vh - 9em)' } },
+        Content() {
+            const under = getUnder()
+            return h(Fragment, {},
+                h(Box, { sx:{ typography: 'body1', px: 1, py: 2 } },
+                    "Selected elements will be added to virtual path " + (under || '(home)')),
+                h(FilePicker, {
+                    async onSelect(sel) {
+                        let failed = await Promise.all(sel.map(source =>
+                            apiCall('add_vfs', { under, source }).then(() => '', () => source) ))
+                        failed = onlyTruthy(failed)
+                        if (failed.length)
+                            await alertDialog("Some elements have been rejected: "+failed.join(', '), 'error')
+                        reloadVfs()
+                        close()
+                    }
+                })
+            )
+        }
+    })
+}
+
+export async function addVirtual() {
+    try {
+        const name = await promptDialog("Enter folder name")
+        if (!name) return
+        const under = getUnder()
+        await apiCall('add_vfs', { under, name })
+        reloadVfs([ (under||'') + '/' + name ])
+        await alertDialog(`Folder "${name}" created`, 'success')
+    }
+    catch(e) {
+        await alertDialog(e as Error)
+    }
+}
+
+function getUnder() {
+    let f: VfsNode | undefined = state.selectedFiles[0]
+    if (!f)
+        return ''
+    if (f.type !== 'folder')
+        f = f.parent
+    const { id } = f!
+    return id === '/' ? '' : id
+}

package/admin/src/api.ts

@@ -0,0 +1,246 @@
+// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+
+import { createElement as h, useCallback, useEffect, useMemo, useRef } from 'react'
+import { Dict, err2msg, Falsy, getCookie, IconBtn, spinner, useStateMounted, wantArray } from './misc'
+import { Alert } from '@mui/material'
+import _ from 'lodash'
+import { state } from './state'
+import { Refresh } from '@mui/icons-material'
+import produce, { Draft } from 'immer'
+
+export function useApiEx<T=any>(...args: Parameters<typeof useApi>) {
+    const [data, error, reload] = useApi<T>(...args)
+    const cmd = args[0]
+    const loading = data === undefined
+    const element = useMemo(() =>
+            !cmd ? null
+                : error ? h(Alert, { severity: 'error' }, String(error), h(IconBtn, { icon: Refresh, onClick: reload, sx: { m:'-8px 0 -8px 16px' } }))
+                    : loading ? spinner()
+                        : null,
+        [error, cmd, loading, reload])
+    return { data, error, reload, loading, element }
+}
+
+const PREFIX = '/~/api/'
+
+const timeoutByApi: Dict = {
+    get_status: 20 // can be lengthy on slow machines because of the find-process-on-busy-port feature
+}
+export function apiCall(cmd: string, params?: Dict, { timeout=undefined }={}) : Promise<any> {
+    const csrf = getCsrf()
+    if (csrf)
+        params = { csrf, ...params }
+
+    const controller = new AbortController()
+    if (timeout !== false)
+        setTimeout(() => controller.abort('timeout'), 1000*(timeoutByApi[cmd] ?? timeout ?? 10))
+    return fetch(PREFIX+cmd, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        signal: controller.signal,
+        body: params && JSON.stringify(params),
+    }).then(async res => {
+        if (res.ok)
+            return res.json().then(json => {
+                console.debug('API', cmd, params, '>>', json)
+                return json
+            })
+        const msg = await res.text() || 'Failed API ' + cmd
+        console.warn(msg + (params ? ' ' + JSON.stringify(params) : ''))
+        if (res.status === 401)
+            state.loginRequired = true
+        throw new ApiError(res.status, msg)
+    }, err => {
+        if (err?.message?.includes('fetch'))
+            throw Error("Network error")
+        throw err
+    })
+}
+
+export class ApiError extends Error {
+    constructor(readonly code:number, message: string) {
+        super(message);
+    }
+}
+
+export function useApi<T=any>(cmd: string | Falsy, params?: object) : [T | undefined, undefined | Error, ()=>void] {
+    const [ret, setRet] = useStateMounted<T | undefined>(undefined)
+    const [err, setErr] = useStateMounted<Error | undefined>(undefined)
+    const [forcer, setForcer] = useStateMounted(0)
+    const loadingRef = useRef(false)
+    useEffect(()=>{
+        setRet(undefined)
+        setErr(undefined)
+        if (!cmd) return
+        loadingRef.current = true
+        apiCall(cmd, params)
+            .then(setRet, setErr)
+            .finally(()=> loadingRef.current = false)
+    }, [cmd, JSON.stringify(params), forcer]) //eslint-disable-line -- json-ize to detect deep changes
+    const reload = useCallback(()=> loadingRef.current || setForcer(v => v+1), [setForcer])
+    return [ret, err, reload]
+}
+
+type EventHandler = (type:string, data?:any) => void
+
+export function apiEvents(cmd: string, params: Dict, cb:EventHandler) {
+    console.debug('API EVENTS', cmd, params)
+    const csrf = getCsrf()
+    const processed: Record<string,string> = { csrf: csrf && JSON.stringify(csrf) }
+    for (const k in params) {
+        const v = params[k]
+        if (v === undefined) continue
+        processed[k] = JSON.stringify(v)
+    }
+    const source = new EventSource(PREFIX + cmd + '?' + new URLSearchParams(processed))
+    source.onopen = () => cb('connected')
+    source.onerror = err => cb('error', err)
+    source.onmessage = ({ data }) => {
+        if (!data) {
+            cb('closed')
+            return source.close()
+        }
+        try { data = JSON.parse(data) }
+        catch {
+            return cb('string', data)
+        }
+        console.debug('SSE msg', data)
+        cb('msg', data)
+    }
+    return source
+}
+
+function getCsrf() {
+    return getCookie('csrf')
+}
+
+export function useApiEvents(cmd: string, params: Dict={}) {
+    const [data, setData] = useStateMounted<any>(undefined)
+    const [error, setError] = useStateMounted<any>(undefined)
+    const [loading, setLoading] = useStateMounted(false)
+    useEffect(() => {
+        const src = apiEvents(cmd, params, (type, data) => {
+            switch (type) {
+                case 'error':
+                    setError("Connection error")
+                    return stop()
+                case 'closed':
+                    return stop()
+                case 'msg':
+                    if (src?.readyState === src?.CLOSED)
+                        return stop()
+                    return setData(data)
+            }
+        })
+        return () => {
+            src.close()
+            stop()
+        }
+
+        function stop() {
+            setLoading(false)
+        }
+    }, [cmd, JSON.stringify(params)]) //eslint-disable-line
+    return { data, loading, error }
+}
+
+export function useApiList<T=any>(cmd:string|Falsy, params: Dict={}, { addId=false, map=((x:any)=>x) }={}) {
+    const [list, setList] = useStateMounted<T[]>([])
+    const [error, setError] = useStateMounted<any>(undefined)
+    const [connecting, setConnecting] = useStateMounted(true)
+    const [loading, setLoading] = useStateMounted(false)
+    const [initializing, setInitializing] = useStateMounted(true)
+    const idRef = useRef(0)
+    useEffect(() => {
+        if (!cmd) return
+        const buffer: T[] = []
+        const apply = _.debounce(() => {
+            const chunk = buffer.splice(0, Infinity)
+            if (chunk.length)
+                setList(list => [ ...list, ...chunk ])
+        }, 1000, { maxWait: 1000 })
+        setError(undefined)
+        setLoading(true)
+        setConnecting(true)
+        setInitializing(true)
+        setList([])
+        const src = apiEvents(cmd, params, (type, data) => {
+            switch (type) {
+                case 'connected':
+                    setConnecting(false)
+                    return setTimeout(() => apply.flush()) // this trick we'll cause first entries to be rendered almost immediately, while the rest will be subject to normal debouncing
+                case 'error':
+                    setError("Connection error")
+                    return stop()
+                case 'closed':
+                    return stop()
+                case 'msg':
+                    wantArray(data).forEach(data => {
+                        if (data === 'ready') {
+                            apply.flush()
+                            setInitializing(false)
+                            return
+                        }
+                        if (data.error)
+                            return setError(err2msg(data.error))
+                        if (data.add) {
+                            const rec = map(data.add)
+                            if (addId)
+                                rec.id = ++idRef.current
+                            buffer.push(rec)
+                            apply()
+                            return
+                        }
+                        if (data.remove) {
+                            const matchOnList: ReturnType<typeof _.matches>[] = []
+                            // first remove from the buffer
+                            for (const key of data.remove) {
+                                const match1 = _.matches(key)
+                                if (_.isEmpty(_.remove(buffer, match1)))
+                                    matchOnList.push(match1)
+                            }
+                            // then work the hooked state
+                            if (_.isEmpty(matchOnList))
+                                return
+                            setList(list => {
+                                const filtered = list.filter(rec => !matchOnList.some(match1 => match1(rec)))
+                                return filtered.length < list.length ? filtered : list // avoid unnecessary changes
+                            })
+                            return
+                        }
+                        if (data.update) {
+                            apply.flush() // avoid treating buffer
+                            setList(list => {
+                                const modified = [...list]
+                                for (const { search, change } of data.update) {
+                                    const idx = modified.findIndex(_.matches(search))
+                                    if (idx >= 0)
+                                        modified[idx] = { ...modified[idx], ...change }
+                                }
+                                return modified
+                            })
+                            return
+                        }
+                        console.debug('unknown api event', type, data)
+                    })
+                    if (src?.readyState === src?.CLOSED)
+                        stop()
+            }
+        })
+
+        return () => src.close()
+
+        function stop() {
+            setInitializing(false)
+            setLoading(false)
+            apply.flush()
+        }
+    }, [cmd, JSON.stringify(params)]) //eslint-disable-line
+    return { list, loading, error, initializing, connecting, setList, updateList }
+
+    function updateList(cb: (toModify: Draft<typeof list>) => void) {
+        setList(produce(list, x => {
+            cb(x)
+        }))
+    }
+}

package/admin/src/dialog.ts

@@ -0,0 +1,203 @@
+// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+
+import {
+    Box,
+    Button,
+    CircularProgress,
+    Dialog as MuiDialog,
+    DialogContent,
+    DialogProps,
+    DialogTitle,
+    IconButton
+} from '@mui/material'
+import {
+    createElement as h, Fragment,
+    isValidElement,
+    ReactElement,
+    useEffect,
+    useRef,
+    useState
+} from 'react'
+import { Check, Close, Error as ErrorIcon, Forward, Info, Warning } from '@mui/icons-material'
+import { newDialog, closeDialog, dialogsDefaults, DialogOptions } from '@hfs/shared'
+import { Form, FormProps } from '@hfs/mui-grid-form'
+import { useBreakpoint } from './misc'
+import { Flex } from '@hfs/frontend/src/components'
+export * from '@hfs/shared/lib/dialogs'
+
+dialogsDefaults.Container = function Container(d:DialogOptions) {
+    useEffect(()=>{
+        ref.current?.focus()
+    }, [])
+    const ref = useRef<HTMLElement>()
+    d = { ...dialogsDefaults, ...d }
+    const { sx, root, ...rest } = d.dialogProps||{}
+    const p = d.padding ? 2 : 0
+    return h(MuiDialog, {
+        open: true,
+        maxWidth: 'lg',
+        fullScreen: !useBreakpoint('sm'),
+        ...rest,
+        ...root,
+        onClose: ()=> closeDialog(),
+    },
+        d.title && h(DialogTitle, {}, d.title),
+        h(DialogContent, {
+            ref,
+            sx: { ...sx, px: p, pb: p, display: 'flex', flexDirection: 'column', }
+        }, h(d.Content) )
+    )
+}
+
+type AlertType = 'error' | 'warning' | 'info' | 'success'
+
+const type2ico = {
+    error: ErrorIcon,
+    warning: Warning,
+    info: Info,
+    success: Check,
+}
+export async function alertDialog(msg: ReactElement | string | Error, options?: AlertType | ({ type?:AlertType, icon?: ReactElement } & Partial<DialogOptions>)) {
+    return new Promise(resolve => {
+        const opt = typeof options === 'string' ? { type: options } : (options ?? {})
+        let { type='info', ...rest } = opt
+        if (msg instanceof Error) {
+            msg = msg.message || String(msg)
+            type = 'error'
+        }
+        const close = newDialog({
+            className: 'dialog-alert-' + type,
+            icon: '!',
+            onClose: resolve,
+            ...rest,
+            Content() {
+                return h(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 },
+                    h(IconButton, {
+                        onClick() {
+                            close()
+                        },
+                        size: 'small',
+                        sx: { position: 'absolute', right: 0, top: 0, opacity: .5 }
+                    }, h(Close)),
+                    opt.icon ?? h(type2ico[type], { color: type, fontSize: 'large' }),
+                    isValidElement(msg) ? msg
+                        : h(Box, { fontSize: 'large', mb: 1, lineHeight: '1.8em' }, String(msg)),
+                )
+            }
+        })
+    })
+}
+
+interface ConfirmOptions { href?: string }
+export async function confirmDialog(msg: string | ReactElement, { href }: ConfirmOptions={}) : Promise<boolean> {
+    return new Promise(resolve => newDialog({
+        className: 'dialog-confirm',
+        icon: '?',
+        onClose: resolve,
+        Content
+    }) )
+
+    function Content() {
+        return h(Fragment, {},
+            h(Box, { mb: 2 }, msg),
+            h(Flex, {},
+                h('a', {
+                    href,
+                    onClick: () => closeDialog(true),
+                }, h(Button, { variant: 'contained' }, "Confirm")),
+                h(Button, { onClick: () => closeDialog(false) }, "Don't"),
+            ),
+        )
+    }
+}
+
+type FormDialog<T> = Pick<DialogProps, 'fullScreen' | 'title'>
+    & Pick<DialogOptions, 'dialogProps'>
+    & Omit<FormProps<T>, 'values' | 'save' | 'set'>
+    & Partial<Pick<FormProps<T>, 'values' | 'save'>>
+    & {
+    onChange?: (values:Partial<T>, extra: { setValues: React.Dispatch<React.SetStateAction<Partial<T>>> }) => void,
+    before?: any
+}
+export async function formDialog<T>({ fullScreen, title, onChange, before, ...props }: FormDialog<T>) : Promise<T> {
+    return new Promise(resolve => newDialog({
+        className: 'dialog-confirm',
+        icon: '?',
+        onClose: resolve,
+        title,
+        Content
+    }) )
+
+    function Content() {
+        const [values, setValues] = useState<Partial<T>>(props.values||{})
+        return h(Fragment, {},
+            before,
+            h(Form, {
+                ...props,
+                values,
+                set(v, k) {
+                    const newV = { ...values, [k]: v }
+                    setValues(newV)
+                    onChange?.(newV, { setValues })
+                },
+                save: {
+                    ...props.save,
+                    onClick() {
+                        closeDialog(values)
+                    }
+                }
+            })
+        )
+    }
+}
+
+export async function promptDialog(msg: string, props:any={}) : Promise<string | undefined> {
+    return formDialog<{ text: string }>({
+        ...props,
+        fields: [
+            { k: 'text', label: null, autoFocus: true,
+                before: h(Box, { mb: 2 }, msg),
+                ...props.field
+            },
+        ],
+        save: {
+            children: "Continue",
+            startIcon: h(Forward),
+            ...props.save,
+        },
+        saveOnEnter: true,
+        barSx: { gap: 2 },
+        addToBar: [
+            h(Button, { onClick: closeDialog }, "Cancel"),
+            ...props.addToBar||[],
+        ]
+    }).then(values => values?.text)
+}
+
+export function waitDialog() {
+    return newDialog({ Content: CircularProgress, closable: false })
+}
+
+export function toast(msg: string | ReactElement, type: AlertType | ReactElement='info') {
+    const ms = 3000
+    const close = newDialog({
+        Content,
+        dialogProps: {
+            PaperProps: {
+                sx: { transition: `opacity ${ms}ms ease-in` },
+                ref(x: HTMLElement) { // we need to set opacity later, to trigger transition
+                    if (x)
+                        x.style.opacity = '0'
+                }
+            }
+        }
+    })
+    setTimeout(close, ms)
+
+    function Content(){
+        return h(Box, { display:'flex', flexDirection: 'column', alignItems: 'center', gap: 1 },
+            isValidElement(type) ? type : h(type2ico[type], { color:type }),
+            isValidElement(msg) ? msg : h('div', {}, String(msg))
+        )
+    }
+}

package/admin/src/index.css

@@ -0,0 +1,21 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  height: 100vh;
+}
+#root { min-height: 100%; display:flex; }
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+.MuiTreeItem-content {
+  box-sizing: border-box; /* avoid unwanted scrolling caused by its width:100% + padding */
+}
+
+ol, ul { margin-top: .2em }

package/admin/src/index.ts

@@ -0,0 +1,10 @@
+// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+
+import { createElement as h, StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import '@hfs/shared/src/min-crypto-polyfill'
+import App from './App'
+
+createRoot(document.getElementById('root')!)
+  .render( h(StrictMode, {}, h(App)) )

package/admin/src/md.ts

@@ -0,0 +1,31 @@
+// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
+
+import { createElement as h, Fragment } from 'react'
+
+// markdown inspired syntax to transform text into react elements: * for bold, / for italic, _ for underline, ` for code
+export default function md(text: string | TemplateStringsArray) {
+    if (typeof text !== 'string')
+        text = text[0]
+    const re = /([`*/_])(.+)\1|(\n)/g
+    const res = []
+    let last = 0
+    let match
+    while (match = re.exec(text)) { //eslint-disable-line no-cond-assign
+        res.push( text.slice(last, match.index) )
+        if (match[3])
+            res.push(h('br'))
+        else {
+            const tag = ({
+                '`': 'code',
+                '*': 'b',
+                '/': 'i',
+                '_': 'u',
+            })[ match[1] ]
+            if (!tag)
+                throw Error("should never happen")
+            res.push( h(tag,{}, match[2]) )
+        }
+        last = match.index + match[0].length
+    }
+    return h(Fragment, {}, ...res, text.slice(last, Infinity))
+}