quidproquo-web-admin 0.1.0 → 0.1.2

package/lib/esm/LogViewer/logic/actionComponentMap/webserver/webserverWebEntryActionComponentMap.js

@@ -1,5 +1,5 @@
 import { WebEntryActionType } from 'quidproquo-webserver';
 const webserverWebEntryActionComponentMap = {
-    [WebEntryActionType.InvalidateCache]: ['askWebEntryInvalidateCache', 'entryName'],
+    [WebEntryActionType.InvalidateCache]: ['askWebEntryInvalidateCache', 'webEntryName', 'paths'],
 };
 export default webserverWebEntryActionComponentMap;

package/lib/esm/components/AdminDialog.js

@@ -20,14 +20,14 @@ export const AdminDialog = ({ open, handleClose, title, selectedTab, onSelectTab
     const handleTabChange = (event, newValue) => {
         onSelectTab(tabs[newValue]);
     };
-    return (_jsxs(Dialog, { open: open, scroll: 'paper', "aria-labelledby": "scroll-dialog-title", "aria-describedby": "scroll-dialog-description", onClose: handleClose, maxWidth: false, fullWidth: true, PaperProps: {
+    return (_jsxs(Dialog, { "aria-describedby": "scroll-dialog-description", "aria-labelledby": "scroll-dialog-title", fullWidth: true, maxWidth: false, onClose: handleClose, open: open, PaperProps: {
             style: {
                 width: '90%',
                 height: '90%',
                 maxHeight: '90%',
                 maxWidth: '90%',
             },
-        }, children: [_jsx(DialogTitle, { id: "scroll-dialog-title", children: title }), tabs.length > 0 && (_jsx(AppBar, { position: "sticky", color: "primary", children: _jsx(Tabs, { value: selectedTabIndex, onChange: handleTabChange, textColor: "inherit", indicatorColor: "secondary", children: tabs.map((t) => (_jsx(Tab, { label: t }, t))) }) })), _jsx(DialogContent, { dividers: true, sx: {
+        }, scroll: 'paper', children: [_jsx(DialogTitle, { id: "scroll-dialog-title", children: title }), tabs.length > 0 && (_jsx(AppBar, { color: "primary", position: "sticky", children: _jsx(Tabs, { indicatorColor: "secondary", onChange: handleTabChange, textColor: "inherit", value: selectedTabIndex, children: tabs.map((t) => (_jsx(Tab, { label: t }, t))) }) })), _jsx(DialogContent, { dividers: true, sx: {
                     minHeight: '150px',
                     overflowY: 'scroll',
                 }, children: children }), buttons.length > 0 && (_jsx(DialogActions, { children: buttons.map((b) => (_jsx(Button, { disabled: b.disabled, onClick: b.onClick, children: b.text }, b.text))) }))] }));

package/lib/esm/components/AsyncButton.js

@@ -17,5 +17,5 @@ export function AsyncButton({ onClick, children, disabled, type }) {
             setLoading(false);
         }
     };
-    return (_jsx(Button, { onClick: handleLogin, fullWidth: true, variant: "contained", color: "primary", disabled: loading || disabled, style: { maxHeight: '100%', height: '4em' }, type: type, children: loading ? _jsx(CircularProgress, { size: 24 }) : children }));
+    return (_jsx(Button, { color: "primary", disabled: loading || disabled, fullWidth: true, onClick: handleLogin, style: { maxHeight: '100%', height: '4em' }, type: type, variant: "contained", children: loading ? _jsx(CircularProgress, { size: 24 }) : children }));
 }

package/lib/esm/components/AutocompleteInput.js

@@ -5,7 +5,7 @@ export const AutocompleteInput = ({ label, value, options, onChange }) => {
         onChange(newValue ? newValue.value : '');
     };
     const selectedValue = options.find((option) => option.value === value) || null;
-    return (_jsx(FormControl, { fullWidth: true, children: _jsx(Autocomplete, { options: options, getOptionLabel: (option) => option.label, value: selectedValue, onChange: handleChange, renderInput: (params) => (_jsx(TextField, { ...params, label: label, InputLabelProps: {
+    return (_jsx(FormControl, { fullWidth: true, children: _jsx(Autocomplete, { getOptionLabel: (option) => option.label, onChange: handleChange, options: options, renderInput: (params) => (_jsx(TextField, { ...params, InputLabelProps: {
                     shrink: true,
-                } })) }) }));
+                }, label: label })), value: selectedValue }) }));
 };

package/lib/esm/components/DataGrid.js

@@ -13,5 +13,5 @@ export const DataGrid = ({ items, columns, onRowClick }) => {
         valueGetter: 'valueGetter' in col ? (params) => col.valueGetter(params.row, params) : undefined,
         renderCell: (params) => col.renderCell?.(params.row, params),
     }));
-    return (_jsx(Box, { sx: { height: '100%', width: '100%' }, children: _jsx(MuiDataGrid, { rows: items, columns: muiColumns, onRowClick: handleRowClick }) }));
+    return (_jsx(Box, { sx: { height: '100%', width: '100%' }, children: _jsx(MuiDataGrid, { columns: muiColumns, onRowClick: handleRowClick, rows: items }) }));
 };

package/lib/esm/components/DataGridPagination/DataGridPagination.js

@@ -5,5 +5,5 @@ export function DataGridPagination() {
     const apiRef = useGridApiContext();
     const page = useGridSelector(apiRef, gridPageSelector);
     const pageCount = useGridSelector(apiRef, gridPageCountSelector);
-    return _jsx(Pagination, { color: "primary", count: pageCount, page: page + 1, onChange: (event, value) => apiRef.current.setPage(value - 1) });
+    return _jsx(Pagination, { color: "primary", count: pageCount, onChange: (event, value) => apiRef.current.setPage(value - 1), page: page + 1 });
 }

package/lib/esm/components/DateCell/DateCell.js

@@ -12,5 +12,5 @@ export const DateCell = (props) => {
         month: '2-digit',
         year: '2-digit',
     });
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs(Typography, { variant: "body2", component: "span", children: [formattedDate, " ", formattedTime] }), _jsx(LastSeen, { isoTime: date.toISOString(), timeStyle: "twitter" })] }));
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs(Typography, { component: "span", variant: "body2", children: [formattedDate, " ", formattedTime] }), _jsx(LastSeen, { isoTime: date.toISOString(), timeStyle: "twitter" })] }));
 };

package/lib/esm/components/DateRangePicker.js

@@ -30,10 +30,10 @@ export const DateRangePicker = ({ startIsoDateTime, endIsoDateTime, setStartIsoD
     const handleQuickTimeClose = () => {
         setAnchorEl(null);
     };
-    return (_jsxs(LocalizationProvider, { dateAdapter: AdapterDateFns, children: [_jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 6, children: _jsx(Box, { position: "relative", children: _jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "Start DateTime", value: new Date(startIsoDateTime), onChange: handleStartDateChange }) }) }) }), _jsx(Grid, { item: true, xs: 6, children: _jsxs(Box, { position: "relative", children: [_jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "End DateTime", value: new Date(endIsoDateTime), onChange: handleEndDateChange }) }), _jsx(IconButton, { "aria-label": "quick time select", "aria-controls": "quick-time-menu", "aria-haspopup": "true", onClick: handleQuickTimeClick, sx: {
+    return (_jsxs(LocalizationProvider, { dateAdapter: AdapterDateFns, children: [_jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 6, children: _jsx(Box, { position: "relative", children: _jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "Start DateTime", onChange: handleStartDateChange, value: new Date(startIsoDateTime) }) }) }) }), _jsx(Grid, { item: true, xs: 6, children: _jsxs(Box, { position: "relative", children: [_jsx(FormControl, { fullWidth: true, children: _jsx(DateTimePicker, { label: "End DateTime", onChange: handleEndDateChange, value: new Date(endIsoDateTime) }) }), _jsx(IconButton, { "aria-controls": "quick-time-menu", "aria-haspopup": "true", "aria-label": "quick time select", onClick: handleQuickTimeClick, sx: {
                                         position: 'absolute',
                                         right: '-28px',
                                         top: '50%',
                                         transform: 'translateY(-50%)',
-                                    }, children: _jsx(ExpandMoreIcon, {}) })] }) })] }), _jsxs(Menu, { id: "quick-time-menu", anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleQuickTimeClose, children: [_jsx(MenuItem, { onClick: () => handleQuickTimeSelect(5), children: "Last 5 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30), children: "Last 30 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(1 * 60), children: "Last hour" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(3 * 60), children: "Last 3 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(8 * 60), children: "Last 8 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(16 * 60), children: "Last 16 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(24 * 60), children: "Last 24 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(7 * 24 * 60), children: "Last 7 days" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30 * 24 * 60), children: "Last month" })] })] }));
+                                    }, children: _jsx(ExpandMoreIcon, {}) })] }) })] }), _jsxs(Menu, { anchorEl: anchorEl, id: "quick-time-menu", keepMounted: true, onClose: handleQuickTimeClose, open: Boolean(anchorEl), children: [_jsx(MenuItem, { onClick: () => handleQuickTimeSelect(5), children: "Last 5 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30), children: "Last 30 minutes" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(1 * 60), children: "Last hour" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(3 * 60), children: "Last 3 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(8 * 60), children: "Last 8 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(16 * 60), children: "Last 16 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(24 * 60), children: "Last 24 hours" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(7 * 24 * 60), children: "Last 7 days" }), _jsx(MenuItem, { onClick: () => handleQuickTimeSelect(30 * 24 * 60), children: "Last month" })] })] }));
 };

package/lib/esm/components/MainLayout/MainLayout.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQpqRuntime } from 'quidproquo-web-react';
+import LogoutIcon from '@mui/icons-material/Logout';
 import { BottomNavigation, BottomNavigationAction, CircularProgress } from '@mui/material';
 import Box from '@mui/material/Box';
+import { authRuntime } from '../../Auth/logic';
 import { useUrlFields } from '../../queryParams';
 import { useTabs } from './hooks/useTabs';
 export function MainLayout() {
     const { tabs, loading } = useTabs();
     const { tab, handleTabOnChange } = useUrlFields();
+    const [authApi] = useQpqRuntime(authRuntime);
     return (_jsxs(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
@@ -17,7 +21,12 @@ export function MainLayout() {
                     pb: '56px', // <— prevent content from being hidden behind bottom nav
                 }, children: tabs
                     .filter((t, index) => index === tab)
-                    .map((tab) => (_jsx(tab.View, {}, tab.name))) }), _jsxs(BottomNavigation, { value: tab, onChange: (event, newValue) => handleTabOnChange(event, newValue), showLabels: true, sx: {
+                    .map((tab) => (_jsx(tab.View, {}, tab.name))) }), _jsxs(BottomNavigation, { onChange: (event, newValue) => {
+                    // The trailing Logout / Loading actions are not tabs
+                    if (newValue < tabs.length) {
+                        handleTabOnChange(event, newValue);
+                    }
+                }, showLabels: true, sx: {
                     position: 'fixed',
                     bottom: 0,
                     left: 0,
@@ -26,5 +35,5 @@ export function MainLayout() {
                     borderTop: 1,
                     borderColor: 'divider',
                     bgcolor: 'background.paper',
-                }, children: [tabs.map((t) => (_jsx(BottomNavigationAction, { label: t.name, icon: t.icon }, t.name))), loading && _jsx(BottomNavigationAction, { label: "Loading", icon: _jsx(CircularProgress, { size: 18 }), disabled: true })] })] }));
+                }, value: tab, children: [tabs.map((t) => (_jsx(BottomNavigationAction, { icon: t.icon, label: t.name }, t.name))), loading && _jsx(BottomNavigationAction, { disabled: true, icon: _jsx(CircularProgress, { size: 18 }), label: "Loading" }), _jsx(BottomNavigationAction, { icon: _jsx(LogoutIcon, {}), label: "Logout", onClick: () => authApi.authLogout() })] })] }));
 }

package/lib/esm/components/TextInput.js

@@ -4,7 +4,7 @@ export const TextInput = ({ label, value, onChange }) => {
     const handleChange = (event) => {
         onChange(event.target.value);
     };
-    return (_jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { label: label, value: value || '', onChange: handleChange, InputLabelProps: {
+    return (_jsx(FormControl, { fullWidth: true, children: _jsx(TextField, { InputLabelProps: {
                 shrink: true,
-            } }) }));
+            }, label: label, onChange: handleChange, value: value || '' }) }));
 };

package/lib/esm/tmp/RandomView.js

@@ -36,6 +36,6 @@ const columns = [
 ];
 const AdminView = () => {
     const accessToken = useAuthAccessToken();
-    return (_jsx(TabViewBox, { header: () => (_jsxs(GridContainer, { spacing: 2, xs: 12, children: [_jsx(GridItem, { xs: 6, children: _jsx(DateRangePicker, { startIsoDateTime: new Date().toISOString(), endIsoDateTime: new Date().toISOString(), setStartIsoDateTime: () => { }, setEndIsoDateTime: () => { } }) }), _jsx(GridItem, { xs: 4, children: _jsx(TextInput, { label: "Email", onChange: () => { }, value: "" }) }), _jsx(GridItem, { xs: 2, children: _jsx(AsyncButton, { onClick: async () => { }, children: "Search" }) })] })), body: () => _jsx(DataGrid, { items: [], columns: columns }) }));
+    return (_jsx(TabViewBox, { body: () => _jsx(DataGrid, { columns: columns, items: [] }), header: () => (_jsxs(GridContainer, { spacing: 2, xs: 12, children: [_jsx(GridItem, { xs: 6, children: _jsx(DateRangePicker, { endIsoDateTime: new Date().toISOString(), setEndIsoDateTime: () => { }, setStartIsoDateTime: () => { }, startIsoDateTime: new Date().toISOString() }) }), _jsx(GridItem, { xs: 4, children: _jsx(TextInput, { label: "Email", onChange: () => { }, value: "" }) }), _jsx(GridItem, { xs: 2, children: _jsx(AsyncButton, { onClick: async () => { }, children: "Search" }) })] })) }));
 };
 export default memo(AdminView);

package/lib/esm/useFederatedAddon.js

@@ -1,4 +1,4 @@
-import { useAuthAccessToken, useBaseUrlResolvers } from 'quidproquo-web-react';
+import { useAuthAccessToken, useBaseUrlResolvers, useEffectCallback } from 'quidproquo-web-react';
 import { useEffect, useState } from 'react';
 import { useLoadFederatedAddons } from './FederatedAddonProvider';
 export function useFederatedAddon() {
@@ -7,12 +7,13 @@ export function useFederatedAddon() {
     const accessToken = useAuthAccessToken();
     const baseUrlResolvers = useBaseUrlResolvers();
     const loadAddons = useLoadFederatedAddons();
+    // Stable identity so the mount-only effect below can list it as a dependency.
+    const doAsyncWork = useEffectCallback(async () => {
+        setLoading(true);
+        const addons = await loadAddons({ baseUrlResolvers, accessToken });
+        setFederatedAddons(addons);
+    });
     useEffect(() => {
-        const doAsyncWork = async () => {
-            setLoading(true);
-            const addons = await loadAddons({ baseUrlResolvers, accessToken });
-            setFederatedAddons(addons);
-        };
         doAsyncWork()
             .catch((e) => {
             console.log(e);
@@ -21,7 +22,7 @@ export function useFederatedAddon() {
             .finally(() => {
             setLoading(false);
         });
-    }, []);
+    }, [doAsyncWork]);
     return {
         addons: federatedAddons,
         loading,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quidproquo-web-admin",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/esm/index.js",
@@ -44,11 +44,11 @@
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.7",
     "javascript-time-ago": "^2.5.9",
-    "quidproquo-core": "0.1.0",
-    "quidproquo-tsconfig": "0.1.0",
-    "quidproquo-web": "0.1.0",
-    "quidproquo-web-react": "0.1.0",
-    "quidproquo-webserver": "0.1.0",
+    "quidproquo-core": "0.1.2",
+    "quidproquo-tsconfig": "0.1.2",
+    "quidproquo-web": "0.1.2",
+    "quidproquo-web-react": "0.1.2",
+    "quidproquo-webserver": "0.1.2",
     "react": ">=18.3.1",
     "react-d3-tree": "^3.6.6",
     "react-dom": "18.3.1",
@@ -70,4 +70,4 @@
   "peerDependencies": {
     "react": ">=18.3.1"
   }
-}
+}