@trieb.work/payload-plugin-backup-mongodb 0.1.1

package/dist/components/BackupDashboard/BackupListCollapsible.client.js

@@ -0,0 +1,597 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Collapsible } from '@payloadcms/ui';
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
+import { closeNativeDialogOnBackdropPointer } from '../../utils/dialogBackdrop';
+import { formatBytes, getBackupSortTimeMs, transformBlobName } from '../../utils/index';
+import { BackupItemActions } from './BackupItemActions.client';
+const defaultFilterState = {
+    dateFrom: '',
+    dateTo: '',
+    label: '',
+    media: 'all',
+    showOtherDb: true,
+    showOtherHostname: false,
+    source: 'all'
+};
+function parseDateInputStartMs(isoDate) {
+    const parts = isoDate.split('-').map(Number);
+    if (parts.length !== 3 || parts.some((n)=>!Number.isFinite(n))) {
+        return null;
+    }
+    const [y, m, d] = parts;
+    const t = new Date(y, m - 1, d, 0, 0, 0, 0).getTime();
+    return Number.isFinite(t) ? t : null;
+}
+function parseDateInputEndMs(isoDate) {
+    const parts = isoDate.split('-').map(Number);
+    if (parts.length !== 3 || parts.some((n)=>!Number.isFinite(n))) {
+        return null;
+    }
+    const [y, m, d] = parts;
+    const t = new Date(y, m - 1, d, 23, 59, 59, 999).getTime();
+    return Number.isFinite(t) ? t : null;
+}
+function passesDateMediaSource(parsed, displayMs, filters) {
+    if (filters.dateFrom) {
+        const from = parseDateInputStartMs(filters.dateFrom);
+        if (from != null && displayMs < from) {
+            return false;
+        }
+    }
+    if (filters.dateTo) {
+        const to = parseDateInputEndMs(filters.dateTo);
+        if (to != null && displayMs > to) {
+            return false;
+        }
+    }
+    if (filters.media === 'with' && parsed.fileType !== 'tar.gz') {
+        return false;
+    }
+    if (filters.media === 'without' && parsed.fileType !== 'json') {
+        return false;
+    }
+    if (filters.source === 'manual' && parsed.type !== 'manual') {
+        return false;
+    }
+    if (filters.source === 'cron' && parsed.type !== 'cron') {
+        return false;
+    }
+    const labelQuery = filters.label.trim().toLowerCase();
+    if (labelQuery) {
+        const blobLabel = (parsed.label ?? '').toLowerCase();
+        if (!blobLabel.includes(labelQuery)) {
+            return false;
+        }
+    }
+    return true;
+}
+function hasNonDefaultFilters(f) {
+    return f.dateFrom !== defaultFilterState.dateFrom || f.dateTo !== defaultFilterState.dateTo || f.label !== defaultFilterState.label || f.media !== defaultFilterState.media || f.source !== defaultFilterState.source || f.showOtherDb !== defaultFilterState.showOtherDb || f.showOtherHostname !== defaultFilterState.showOtherHostname;
+}
+export const BackupListCollapsible = ({ blobs, countOtherDb, countOtherHostname, currentDbName, currentHostname, i18nLanguage })=>{
+    const uid = useId();
+    const idDb = `${uid}-show-other-db`;
+    const idHost = `${uid}-show-other-host`;
+    const dialogRef = useRef(null);
+    const [filters, setFilters] = useState(defaultFilterState);
+    const visibleRows = useMemo(()=>{
+        const rows = [];
+        for (const blob of blobs){
+            const parsed = transformBlobName(blob.pathname);
+            const { dbName, hostname } = parsed;
+            const isCurrentDb = currentDbName === dbName;
+            const isCurrentHostname = currentHostname === hostname;
+            if (!(filters.showOtherDb || isCurrentDb)) {
+                continue;
+            }
+            if (!(filters.showOtherHostname || isCurrentHostname)) {
+                continue;
+            }
+            const uploadedAt = new Date(blob.uploadedAt);
+            const displayMs = getBackupSortTimeMs(parsed, uploadedAt);
+            if (!passesDateMediaSource(parsed, displayMs, filters)) {
+                continue;
+            }
+            rows.push({
+                blob,
+                displayAt: new Date(displayMs),
+                displayMs,
+                parsed
+            });
+        }
+        return rows;
+    }, [
+        blobs,
+        currentDbName,
+        currentHostname,
+        filters
+    ]);
+    const openFilterDialog = useCallback(()=>{
+        dialogRef.current?.showModal();
+    }, []);
+    const closeFilterDialog = useCallback(()=>{
+        dialogRef.current?.close();
+    }, []);
+    const clearFilters = useCallback(()=>{
+        setFilters(defaultFilterState);
+    }, []);
+    const hasScopeOptions = countOtherDb > 0 || countOtherHostname > 0;
+    const filtersActive = hasNonDefaultFilters(filters);
+    const filtersButton = /*#__PURE__*/ _jsx(Button, {
+        buttonStyle: "secondary",
+        className: filtersActive ? 'backup-dashboard__filter-btn backup-dashboard__filter-btn--active' : 'backup-dashboard__filter-btn',
+        onClick: openFilterDialog,
+        type: "button",
+        children: "Filters"
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(Collapsible, {
+                header: /*#__PURE__*/ _jsx("span", {
+                    className: "backup-dashboard__collapsible-title",
+                    children: "Backup list"
+                }),
+                initCollapsed: true,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "backup-dashboard__backup-list-toolbar",
+                        children: filtersButton
+                    }),
+                    blobs.length === 0 ? /*#__PURE__*/ _jsx("p", {
+                        className: "backup-dashboard__list-empty",
+                        children: "No backups yet"
+                    }) : visibleRows.length === 0 ? /*#__PURE__*/ _jsx("p", {
+                        className: "backup-dashboard__list-empty",
+                        children: "No backups match the current filters"
+                    }) : visibleRows.map(({ blob, displayAt, parsed })=>{
+                        const { type, collectionCount, dbName, fileType, hostname, label } = parsed;
+                        const isCurrentDb = currentDbName === dbName;
+                        const isCurrentHostname = currentHostname === hostname;
+                        return /*#__PURE__*/ _jsxs("div", {
+                            className: "backup-item",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "backup-item__main",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "backup-item__primary",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("time", {
+                                                    className: "backup-item__time",
+                                                    dateTime: displayAt.toISOString(),
+                                                    suppressHydrationWarning: true,
+                                                    children: displayAt.toLocaleString(i18nLanguage)
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    className: `backup-item__pill backup-item__pill--kind backup-item__pill--${type === 'cron' ? 'cron' : 'manual'}`,
+                                                    children: type === 'cron' ? 'Cron backup' : 'Manual backup'
+                                                }),
+                                                label ? /*#__PURE__*/ _jsxs("span", {
+                                                    className: "backup-item__pill backup-item__pill--label",
+                                                    title: `Label: ${label}`,
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            className: "backup-item__pill-key",
+                                                            children: "Label"
+                                                        }),
+                                                        label
+                                                    ]
+                                                }) : null
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "backup-item__meta",
+                                            children: [
+                                                /*#__PURE__*/ _jsxs("span", {
+                                                    className: `backup-item__pill backup-item__pill--db${isCurrentDb ? '' : ' backup-item__pill--warn'}`,
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            className: "backup-item__pill-key",
+                                                            children: isCurrentDb ? 'DB' : 'other DB'
+                                                        }),
+                                                        dbName || 'Unknown'
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsxs("span", {
+                                                    className: `backup-item__pill backup-item__pill--host${isCurrentHostname ? '' : ' backup-item__pill--warn'}`,
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            className: "backup-item__pill-key",
+                                                            children: "Host"
+                                                        }),
+                                                        hostname || 'Unknown'
+                                                    ]
+                                                }),
+                                                typeof collectionCount === 'number' ? /*#__PURE__*/ _jsxs("span", {
+                                                    className: "backup-item__pill backup-item__pill--collections",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            className: "backup-item__pill-key",
+                                                            children: "Collections"
+                                                        }),
+                                                        collectionCount
+                                                    ]
+                                                }) : null,
+                                                fileType === 'tar.gz' ? /*#__PURE__*/ _jsx("span", {
+                                                    className: "backup-item__pill backup-item__pill--media",
+                                                    children: "With media"
+                                                }) : fileType === 'json' ? /*#__PURE__*/ _jsx("span", {
+                                                    className: "backup-item__pill backup-item__pill--media",
+                                                    children: "Without media"
+                                                }) : null,
+                                                /*#__PURE__*/ _jsxs("span", {
+                                                    className: "backup-item__pill backup-item__pill--size",
+                                                    title: `${blob.size.toLocaleString(i18nLanguage)} bytes`,
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            className: "backup-item__pill-key",
+                                                            children: "Size"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            className: "backup-item__size-value",
+                                                            children: formatBytes(blob.size)
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(BackupItemActions, {
+                                    downloadUrl: blob.downloadUrl,
+                                    pathname: blob.pathname,
+                                    url: blob.url
+                                })
+                            ]
+                        }, blob.pathname);
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("dialog", {
+                className: "backup-confirm-dialog backup-confirm-dialog--backup-list-filters",
+                onPointerDown: (e)=>closeNativeDialogOnBackdropPointer(e, dialogRef),
+                ref: dialogRef,
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "backup-confirm-dialog__title",
+                        children: "Filter backups"
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "backup-confirm-dialog__subtitle",
+                        children: "All filters apply in the browser only. Current DB and hostname are always shown; enable the options below to include backups from other databases or hosts."
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "backup-confirm-dialog__body backup-list-filters__body",
+                        children: [
+                            hasScopeOptions ? /*#__PURE__*/ _jsxs("fieldset", {
+                                className: "backup-list-filters__fieldset",
+                                children: [
+                                    /*#__PURE__*/ _jsx("legend", {
+                                        className: "backup-list-filters__legend",
+                                        children: "Scope"
+                                    }),
+                                    countOtherDb > 0 ? /*#__PURE__*/ _jsxs("div", {
+                                        className: "field-type checkbox backup-dashboard__collapsible-checkbox backup-list-filters__scope-row",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("input", {
+                                                "aria-label": `Show other databases (${countOtherDb} in list)`,
+                                                checked: filters.showOtherDb,
+                                                className: "checkbox-input__input",
+                                                id: idDb,
+                                                onChange: (e)=>setFilters((f)=>({
+                                                            ...f,
+                                                            showOtherDb: e.target.checked
+                                                        })),
+                                                type: "checkbox"
+                                            }),
+                                            /*#__PURE__*/ _jsxs("label", {
+                                                className: "field-label",
+                                                htmlFor: idDb,
+                                                children: [
+                                                    "Show other DBs",
+                                                    /*#__PURE__*/ _jsxs("span", {
+                                                        className: "backup-list-filters__hint",
+                                                        children: [
+                                                            " (",
+                                                            countOtherDb,
+                                                            " in list)"
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    }) : null,
+                                    countOtherHostname > 0 ? /*#__PURE__*/ _jsxs("div", {
+                                        className: "field-type checkbox backup-dashboard__collapsible-checkbox backup-list-filters__scope-row",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("input", {
+                                                "aria-label": `Show other hostnames (${countOtherHostname} in list)`,
+                                                checked: filters.showOtherHostname,
+                                                className: "checkbox-input__input",
+                                                id: idHost,
+                                                onChange: (e)=>setFilters((f)=>({
+                                                            ...f,
+                                                            showOtherHostname: e.target.checked
+                                                        })),
+                                                type: "checkbox"
+                                            }),
+                                            /*#__PURE__*/ _jsxs("label", {
+                                                className: "field-label",
+                                                htmlFor: idHost,
+                                                children: [
+                                                    "Show other Hostnames",
+                                                    /*#__PURE__*/ _jsxs("span", {
+                                                        className: "backup-list-filters__hint",
+                                                        children: [
+                                                            ' ',
+                                                            "(",
+                                                            countOtherHostname,
+                                                            " in list)"
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    }) : null
+                                ]
+                            }) : null,
+                            /*#__PURE__*/ _jsxs("fieldset", {
+                                className: "backup-list-filters__fieldset",
+                                children: [
+                                    /*#__PURE__*/ _jsx("legend", {
+                                        className: "backup-list-filters__legend",
+                                        children: "Label"
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "backup-list-filters__row backup-list-filters__row--label",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("label", {
+                                                className: "backup-list-filters__label",
+                                                htmlFor: `${uid}-label`,
+                                                children: "Search"
+                                            }),
+                                            /*#__PURE__*/ _jsx("input", {
+                                                "aria-label": "Filter backups by label text",
+                                                autoComplete: "off",
+                                                className: "backup-list-filters__text",
+                                                id: `${uid}-label`,
+                                                onChange: (e)=>setFilters((f)=>({
+                                                            ...f,
+                                                            label: e.target.value
+                                                        })),
+                                                placeholder: "Filter by label text",
+                                                spellCheck: false,
+                                                type: "text",
+                                                value: filters.label
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("fieldset", {
+                                className: "backup-list-filters__fieldset",
+                                children: [
+                                    /*#__PURE__*/ _jsx("legend", {
+                                        className: "backup-list-filters__legend",
+                                        children: "Date range"
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "backup-list-filters__row",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("label", {
+                                                className: "backup-list-filters__label",
+                                                htmlFor: `${uid}-from`,
+                                                children: "From"
+                                            }),
+                                            /*#__PURE__*/ _jsx("input", {
+                                                "aria-label": "Filter from date",
+                                                className: "backup-list-filters__date",
+                                                id: `${uid}-from`,
+                                                onChange: (e)=>setFilters((f)=>({
+                                                            ...f,
+                                                            dateFrom: e.target.value
+                                                        })),
+                                                type: "date",
+                                                value: filters.dateFrom
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "backup-list-filters__row",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("label", {
+                                                className: "backup-list-filters__label",
+                                                htmlFor: `${uid}-to`,
+                                                children: "To"
+                                            }),
+                                            /*#__PURE__*/ _jsx("input", {
+                                                "aria-label": "Filter to date",
+                                                className: "backup-list-filters__date",
+                                                id: `${uid}-to`,
+                                                onChange: (e)=>setFilters((f)=>({
+                                                            ...f,
+                                                            dateTo: e.target.value
+                                                        })),
+                                                type: "date",
+                                                value: filters.dateTo
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("fieldset", {
+                                className: "backup-list-filters__fieldset",
+                                children: [
+                                    /*#__PURE__*/ _jsx("legend", {
+                                        className: "backup-list-filters__legend",
+                                        children: "Media"
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "field-type radio backup-list-filters__radio-row",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("input", {
+                                                "aria-label": "Media filter: all backups",
+                                                checked: filters.media === 'all',
+                                                className: "radio-input__input",
+                                                id: `${uid}-media-all`,
+                                                name: `${uid}-media`,
+                                                onChange: ()=>setFilters((f)=>({
+                                                            ...f,
+                                                            media: 'all'
+                                                        })),
+                                                type: "radio"
+                                            }),
+                                            /*#__PURE__*/ _jsx("label", {
+                                                className: "field-label",
+                                                htmlFor: `${uid}-media-all`,
+                                                children: "All"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "field-type radio backup-list-filters__radio-row",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("input", {
+                                                "aria-label": "Media filter: with media",
+                                                checked: filters.media === 'with',
+                                                className: "radio-input__input",
+                                                id: `${uid}-media-with`,
+                                                name: `${uid}-media`,
+                                                onChange: ()=>setFilters((f)=>({
+                                                            ...f,
+                                                            media: 'with'
+                                                        })),
+                                                type: "radio"
+                                            }),
+                                            /*#__PURE__*/ _jsx("label", {
+                                                className: "field-label",
+                                                htmlFor: `${uid}-media-with`,
+                                                children: "With media"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "field-type radio backup-list-filters__radio-row",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("input", {
+                                                "aria-label": "Media filter: without media",
+                                                checked: filters.media === 'without',
+                                                className: "radio-input__input",
+                                                id: `${uid}-media-without`,
+                                                name: `${uid}-media`,
+                                                onChange: ()=>setFilters((f)=>({
+                                                            ...f,
+                                                            media: 'without'
+                                                        })),
+                                                type: "radio"
+                                            }),
+                                            /*#__PURE__*/ _jsx("label", {
+                                                className: "field-label",
+                                                htmlFor: `${uid}-media-without`,
+                                                children: "Without media"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("fieldset", {
+                                className: "backup-list-filters__fieldset",
+                                children: [
+                                    /*#__PURE__*/ _jsx("legend", {
+                                        className: "backup-list-filters__legend",
+                                        children: "Source"
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "field-type radio backup-list-filters__radio-row",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("input", {
+                                                "aria-label": "Source filter: all",
+                                                checked: filters.source === 'all',
+                                                className: "radio-input__input",
+                                                id: `${uid}-source-all`,
+                                                name: `${uid}-source`,
+                                                onChange: ()=>setFilters((f)=>({
+                                                            ...f,
+                                                            source: 'all'
+                                                        })),
+                                                type: "radio"
+                                            }),
+                                            /*#__PURE__*/ _jsx("label", {
+                                                className: "field-label",
+                                                htmlFor: `${uid}-source-all`,
+                                                children: "All"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "field-type radio backup-list-filters__radio-row",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("input", {
+                                                "aria-label": "Source filter: manual backups",
+                                                checked: filters.source === 'manual',
+                                                className: "radio-input__input",
+                                                id: `${uid}-source-manual`,
+                                                name: `${uid}-source`,
+                                                onChange: ()=>setFilters((f)=>({
+                                                            ...f,
+                                                            source: 'manual'
+                                                        })),
+                                                type: "radio"
+                                            }),
+                                            /*#__PURE__*/ _jsx("label", {
+                                                className: "field-label",
+                                                htmlFor: `${uid}-source-manual`,
+                                                children: "Manual"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "field-type radio backup-list-filters__radio-row",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("input", {
+                                                "aria-label": "Source filter: cron backups",
+                                                checked: filters.source === 'cron',
+                                                className: "radio-input__input",
+                                                id: `${uid}-source-cron`,
+                                                name: `${uid}-source`,
+                                                onChange: ()=>setFilters((f)=>({
+                                                            ...f,
+                                                            source: 'cron'
+                                                        })),
+                                                type: "radio"
+                                            }),
+                                            /*#__PURE__*/ _jsx("label", {
+                                                className: "field-label",
+                                                htmlFor: `${uid}-source-cron`,
+                                                children: "Cron"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "backup-confirm-dialog__actions",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                buttonStyle: "secondary",
+                                onClick: clearFilters,
+                                type: "button",
+                                children: "Clear filters"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: closeFilterDialog,
+                                type: "button",
+                                children: "Done"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=BackupListCollapsible.client.js.map