feat: add configurable view-aware dashboards
This commit is contained in:
@@ -13,12 +13,15 @@
|
||||
},
|
||||
"./styles/dashboard.css": "./src/styles/dashboard.css"
|
||||
},
|
||||
"scripts": {
|
||||
"test:dashboard-layout": "node --experimental-strip-types tests/dashboard-layout.test.ts"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@govoplan/core-webui": "^0.1.8",
|
||||
"lucide-react": "^1.23.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.1.1"
|
||||
"react-router-dom": ">=7.18.2 <8"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@govoplan/core-webui": {
|
||||
|
||||
53
webui/src/api/dashboard.ts
Normal file
53
webui/src/api/dashboard.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import {
|
||||
apiFetch,
|
||||
apiPath,
|
||||
type ApiSettings,
|
||||
type DashboardWidgetConfiguration,
|
||||
type DashboardWidgetSize
|
||||
} from "@govoplan/core-webui";
|
||||
|
||||
export type DashboardWidgetPlacementResponse = {
|
||||
instance_id: string;
|
||||
widget_id: string;
|
||||
size: DashboardWidgetSize;
|
||||
configuration: DashboardWidgetConfiguration;
|
||||
};
|
||||
|
||||
export type DashboardLayoutResponse = {
|
||||
exists: boolean;
|
||||
view_id: string | null;
|
||||
layout_version: number;
|
||||
revision: number;
|
||||
placements: DashboardWidgetPlacementResponse[];
|
||||
known_widget_ids: string[];
|
||||
updated_at: string | null;
|
||||
};
|
||||
|
||||
export type DashboardLayoutUpdate = {
|
||||
expected_revision: number | null;
|
||||
layout_version: 1;
|
||||
placements: DashboardWidgetPlacementResponse[];
|
||||
known_widget_ids: string[];
|
||||
};
|
||||
|
||||
function layoutPath(viewId: string | null): string {
|
||||
return apiPath("/api/v1/dashboard/layout", { view_id: viewId });
|
||||
}
|
||||
|
||||
export function fetchDashboardLayout(
|
||||
settings: ApiSettings,
|
||||
viewId: string | null
|
||||
): Promise<DashboardLayoutResponse> {
|
||||
return apiFetch<DashboardLayoutResponse>(settings, layoutPath(viewId));
|
||||
}
|
||||
|
||||
export function saveDashboardLayout(
|
||||
settings: ApiSettings,
|
||||
viewId: string | null,
|
||||
payload: DashboardLayoutUpdate
|
||||
): Promise<DashboardLayoutResponse> {
|
||||
return apiFetch<DashboardLayoutResponse>(settings, layoutPath(viewId), {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
}
|
||||
368
webui/src/features/dashboard/DashboardGrid.tsx
Normal file
368
webui/src/features/dashboard/DashboardGrid.tsx
Normal file
@@ -0,0 +1,368 @@
|
||||
import {
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type HTMLAttributes,
|
||||
type DragEvent as ReactDragEvent,
|
||||
type ReactNode
|
||||
} from "react";
|
||||
import {
|
||||
GripVertical,
|
||||
Settings2,
|
||||
Trash2
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Card,
|
||||
IconButton,
|
||||
type ApiSettings,
|
||||
type AuthInfo,
|
||||
type DashboardWidgetContribution,
|
||||
type EffectiveViewProjection,
|
||||
type PlatformWebModule
|
||||
} from "@govoplan/core-webui";
|
||||
import {
|
||||
dashboardMasonryRowSpan,
|
||||
defaultWidgetSize,
|
||||
widgetIsConfigurable,
|
||||
type DashboardWidgetPlacement
|
||||
} from "./dashboardLayout";
|
||||
import {
|
||||
dashboardGridPreview,
|
||||
type DashboardDragItem,
|
||||
type DashboardDropTarget
|
||||
} from "./dashboardEditorTypes";
|
||||
|
||||
type DashboardGridProps = {
|
||||
placements: DashboardWidgetPlacement[];
|
||||
widgetById: Map<string, DashboardWidgetContribution>;
|
||||
settings: ApiSettings;
|
||||
auth: AuthInfo;
|
||||
modules: PlatformWebModule[];
|
||||
effectiveView: EffectiveViewProjection | null;
|
||||
refreshKey: number;
|
||||
configuring: boolean;
|
||||
dragItem: DashboardDragItem | null;
|
||||
dropTarget: DashboardDropTarget | null;
|
||||
onDragStart: (event: ReactDragEvent, item: DashboardDragItem) => void;
|
||||
onDragEnd: () => void;
|
||||
onDragOver: (event: ReactDragEvent<HTMLElement>, instanceId: string) => void;
|
||||
onDragOverEnd: (event: ReactDragEvent<HTMLElement>) => void;
|
||||
onDrop: (
|
||||
event: ReactDragEvent<HTMLElement>,
|
||||
placement: DashboardWidgetPlacement
|
||||
) => void;
|
||||
onDropPreview: (event: ReactDragEvent<HTMLElement>) => void;
|
||||
onDropAtEnd: (event: ReactDragEvent<HTMLElement>) => void;
|
||||
onRemove: (instanceId: string) => void;
|
||||
onConfigure: (instanceId: string) => void;
|
||||
};
|
||||
|
||||
export default function DashboardGrid({
|
||||
placements,
|
||||
widgetById,
|
||||
settings,
|
||||
auth,
|
||||
modules,
|
||||
effectiveView,
|
||||
refreshKey,
|
||||
configuring,
|
||||
dragItem,
|
||||
dropTarget,
|
||||
onDragStart,
|
||||
onDragEnd,
|
||||
onDragOver,
|
||||
onDragOverEnd,
|
||||
onDrop,
|
||||
onDropPreview,
|
||||
onDropAtEnd,
|
||||
onRemove,
|
||||
onConfigure
|
||||
}: DashboardGridProps) {
|
||||
const showingEmptyPreview =
|
||||
configuring
|
||||
&& dragItem?.kind === "catalogue"
|
||||
&& dropTarget !== null;
|
||||
if (!placements.length && !showingEmptyPreview) {
|
||||
return (
|
||||
<div
|
||||
className={`dashboard-empty-state${configuring ? " is-drop-target" : ""}`}
|
||||
onDragOver={(event) => {
|
||||
if (!configuring) return;
|
||||
onDragOverEnd(event);
|
||||
}}
|
||||
onDrop={configuring ? onDropAtEnd : undefined}
|
||||
>
|
||||
<h2>No widgets on this Dashboard</h2>
|
||||
<p className="muted">
|
||||
{configuring
|
||||
? "Drag a widget here from the library."
|
||||
: "Open Configure to add widgets provided by active modules."}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const catalogueWidget =
|
||||
dragItem?.kind === "catalogue"
|
||||
? widgetById.get(dragItem.widgetId)
|
||||
: null;
|
||||
const previewItems = dashboardGridPreview(
|
||||
placements,
|
||||
configuring ? dragItem : null,
|
||||
configuring ? dropTarget : null,
|
||||
catalogueWidget ? defaultWidgetSize(catalogueWidget) : "medium"
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`dashboard-widget-grid${configuring ? " is-configuring" : ""}`}
|
||||
onDragOver={(event) => {
|
||||
if (!configuring || event.target !== event.currentTarget) return;
|
||||
onDragOverEnd(event);
|
||||
}}
|
||||
onDrop={configuring ? onDropAtEnd : undefined}
|
||||
>
|
||||
{previewItems.map((item) => {
|
||||
if (item.kind === "catalogue") {
|
||||
const widget = widgetById.get(item.widgetId);
|
||||
return (
|
||||
<DashboardDropPlaceholder
|
||||
key={`catalogue-placeholder:${item.widgetId}`}
|
||||
title={widget?.title ?? "New widget"}
|
||||
size={item.size}
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
onDrop={onDropPreview}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const placement = item.placement;
|
||||
const widget = widgetById.get(placement.widgetId);
|
||||
if (!widget) return null;
|
||||
if (item.placeholder) {
|
||||
return (
|
||||
<DashboardDropPlaceholder
|
||||
key={placement.instanceId}
|
||||
title={widget.title}
|
||||
size={placement.size}
|
||||
preserveHeight
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
onDrop={onDropPreview}
|
||||
>
|
||||
<Card title={widget.title}>
|
||||
<DashboardWidgetContent
|
||||
widget={widget}
|
||||
placement={placement}
|
||||
settings={settings}
|
||||
auth={auth}
|
||||
modules={modules}
|
||||
effectiveView={effectiveView}
|
||||
refreshKey={refreshKey}
|
||||
/>
|
||||
</Card>
|
||||
</DashboardDropPlaceholder>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<DashboardMasonryItem
|
||||
key={placement.instanceId}
|
||||
className={`dashboard-widget dashboard-widget-${placement.size}`}
|
||||
onDragOver={
|
||||
configuring
|
||||
? (event) => onDragOver(event, placement.instanceId)
|
||||
: undefined
|
||||
}
|
||||
onDrop={
|
||||
configuring
|
||||
? (event) => onDrop(event, placement)
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<Card
|
||||
title={widget.title}
|
||||
collapsible={!configuring}
|
||||
collapseKey={`dashboard-widget:${placement.instanceId}`}
|
||||
actions={
|
||||
configuring ? (
|
||||
<div className="dashboard-widget-actions">
|
||||
<IconButton
|
||||
label={`Drag ${widget.title}`}
|
||||
icon={<GripVertical size={16} />}
|
||||
variant="ghost"
|
||||
className="dashboard-widget-drag-handle"
|
||||
draggable
|
||||
onDragStart={(event) =>
|
||||
onDragStart(event, {
|
||||
kind: "placement",
|
||||
instanceId: placement.instanceId
|
||||
})
|
||||
}
|
||||
onDragEnd={onDragEnd}
|
||||
/>
|
||||
{widgetIsConfigurable(widget) && (
|
||||
<IconButton
|
||||
label={`Configure ${widget.title}`}
|
||||
icon={<Settings2 size={16} />}
|
||||
variant="ghost"
|
||||
onClick={() => onConfigure(placement.instanceId)}
|
||||
/>
|
||||
)}
|
||||
<IconButton
|
||||
label={`Remove ${widget.title}`}
|
||||
icon={<Trash2 size={16} />}
|
||||
variant="ghost"
|
||||
onClick={() => onRemove(placement.instanceId)}
|
||||
/>
|
||||
</div>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
<DashboardWidgetContent
|
||||
widget={widget}
|
||||
placement={placement}
|
||||
settings={settings}
|
||||
auth={auth}
|
||||
modules={modules}
|
||||
effectiveView={effectiveView}
|
||||
refreshKey={refreshKey}
|
||||
/>
|
||||
</Card>
|
||||
</DashboardMasonryItem>
|
||||
);
|
||||
})}
|
||||
{configuring && (
|
||||
<div
|
||||
className="dashboard-grid-end-drop-target"
|
||||
onDragOver={onDragOverEnd}
|
||||
onDrop={onDropAtEnd}
|
||||
>
|
||||
Drop here to place the widget last
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DashboardDropPlaceholder({
|
||||
title,
|
||||
size,
|
||||
preserveHeight = false,
|
||||
onDragOver,
|
||||
onDrop,
|
||||
children
|
||||
}: {
|
||||
title: string;
|
||||
size: DashboardWidgetPlacement["size"];
|
||||
preserveHeight?: boolean;
|
||||
onDragOver: (event: ReactDragEvent<HTMLElement>) => void;
|
||||
onDrop: (event: ReactDragEvent<HTMLElement>) => void;
|
||||
children?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<DashboardMasonryItem
|
||||
className={[
|
||||
"dashboard-widget",
|
||||
`dashboard-widget-${size}`,
|
||||
"dashboard-widget-drop-placeholder",
|
||||
preserveHeight ? "preserves-widget-height" : ""
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
onDragOver={onDragOver}
|
||||
onDrop={onDrop}
|
||||
aria-label={`Place ${title} here`}
|
||||
>
|
||||
{children && (
|
||||
<div className="dashboard-widget-placeholder-content">
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
<div className="dashboard-widget-placeholder-surface">
|
||||
<GripVertical size={18} aria-hidden="true" />
|
||||
<strong>{title}</strong>
|
||||
</div>
|
||||
</DashboardMasonryItem>
|
||||
);
|
||||
}
|
||||
|
||||
function DashboardMasonryItem({
|
||||
children,
|
||||
...props
|
||||
}: HTMLAttributes<HTMLElement>) {
|
||||
const itemRef = useRef<HTMLElement>(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const item = itemRef.current;
|
||||
const grid = item?.parentElement;
|
||||
if (!item || !grid) return undefined;
|
||||
|
||||
const updateSpan = () => {
|
||||
const gridStyles = window.getComputedStyle(grid);
|
||||
const itemStyles = window.getComputedStyle(item);
|
||||
const rowHeight = Number.parseFloat(gridStyles.gridAutoRows);
|
||||
const bottomGap = Number.parseFloat(itemStyles.marginBottom);
|
||||
const nextSpan = dashboardMasonryRowSpan(
|
||||
item.getBoundingClientRect().height,
|
||||
rowHeight,
|
||||
bottomGap
|
||||
);
|
||||
const gridRowEnd = `span ${nextSpan}`;
|
||||
if (item.style.gridRowEnd !== gridRowEnd) {
|
||||
item.style.gridRowEnd = gridRowEnd;
|
||||
}
|
||||
};
|
||||
|
||||
updateSpan();
|
||||
if (typeof ResizeObserver === "undefined") return undefined;
|
||||
const observer = new ResizeObserver(updateSpan);
|
||||
observer.observe(item);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section ref={itemRef} {...props}>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function DashboardWidgetContent({
|
||||
widget,
|
||||
placement,
|
||||
settings,
|
||||
auth,
|
||||
modules,
|
||||
effectiveView,
|
||||
refreshKey
|
||||
}: {
|
||||
widget: DashboardWidgetContribution;
|
||||
placement: DashboardWidgetPlacement;
|
||||
settings: ApiSettings;
|
||||
auth: AuthInfo;
|
||||
modules: PlatformWebModule[];
|
||||
effectiveView: EffectiveViewProjection | null;
|
||||
refreshKey: number;
|
||||
}) {
|
||||
const [scheduledRefreshKey, setScheduledRefreshKey] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!widget.refreshIntervalMs) return undefined;
|
||||
const interval = window.setInterval(
|
||||
() => setScheduledRefreshKey((value) => value + 1),
|
||||
Math.max(widget.refreshIntervalMs, 5_000)
|
||||
);
|
||||
return () => window.clearInterval(interval);
|
||||
}, [widget.refreshIntervalMs]);
|
||||
|
||||
return widget.render({
|
||||
settings,
|
||||
auth,
|
||||
modules,
|
||||
effectiveView,
|
||||
instanceId: placement.instanceId,
|
||||
widgetId: widget.id,
|
||||
refreshKey: refreshKey + scheduledRefreshKey,
|
||||
size: placement.size,
|
||||
configuration: placement.configuration
|
||||
});
|
||||
}
|
||||
@@ -1,29 +1,72 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { RefreshCw, RotateCcw, SlidersHorizontal } from "lucide-react";
|
||||
import {
|
||||
AdminSelectionList,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
type DragEvent as ReactDragEvent
|
||||
} from "react";
|
||||
import {
|
||||
RefreshCw,
|
||||
Save,
|
||||
SlidersHorizontal,
|
||||
X
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
DismissibleAlert,
|
||||
LoadingFrame,
|
||||
MetricCard,
|
||||
PageScrollViewport,
|
||||
PageTitle,
|
||||
dashboardWidgetsForModules,
|
||||
hasAnyScope,
|
||||
hasScope,
|
||||
isApiError,
|
||||
useEffectiveView,
|
||||
usePlatformModules,
|
||||
useUnsavedDraftGuard,
|
||||
type ApiSettings,
|
||||
type AuthInfo,
|
||||
type DashboardWidgetContribution,
|
||||
type DashboardWidgetSize
|
||||
type DashboardWidgetContribution
|
||||
} from "@govoplan/core-webui";
|
||||
import {
|
||||
fetchDashboardLayout,
|
||||
saveDashboardLayout
|
||||
} from "../../api/dashboard";
|
||||
import DashboardGrid from "./DashboardGrid";
|
||||
import WidgetConfigurationDialog from "./WidgetConfigurationDialog";
|
||||
import WidgetLibrary from "./WidgetLibrary";
|
||||
import {
|
||||
appendPlacement,
|
||||
defaultDashboardLayout,
|
||||
insertPlacement,
|
||||
layoutFromResponse,
|
||||
layoutUpdatePayload,
|
||||
layoutsEqual,
|
||||
localLayoutKey,
|
||||
MAX_DASHBOARD_WIDGETS,
|
||||
readLocalLayout,
|
||||
reconcileDashboardLayout,
|
||||
removePlacement,
|
||||
reorderPlacement,
|
||||
updatePlacement,
|
||||
writeLocalLayout,
|
||||
type DashboardLayoutState,
|
||||
type DashboardWidgetPlacement
|
||||
} from "./dashboardLayout";
|
||||
import type {
|
||||
DashboardDragItem,
|
||||
DashboardDropTarget
|
||||
} from "./dashboardEditorTypes";
|
||||
|
||||
type DashboardLayout = {
|
||||
visible: string[];
|
||||
known: string[];
|
||||
};
|
||||
type LayoutSource = "server" | "browser" | "default";
|
||||
|
||||
export default function DashboardPage({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
|
||||
export default function DashboardPage({
|
||||
settings,
|
||||
auth
|
||||
}: {
|
||||
settings: ApiSettings;
|
||||
auth: AuthInfo;
|
||||
}) {
|
||||
const modules = usePlatformModules();
|
||||
const effectiveView = useEffectiveView();
|
||||
const widgets = useMemo(
|
||||
@@ -33,150 +76,485 @@ export default function DashboardPage({ settings, auth }: { settings: ApiSetting
|
||||
),
|
||||
[auth, effectiveView, modules]
|
||||
);
|
||||
const widgetSignature = widgets.map((widget) => widget.id).join("|");
|
||||
const storageKey = `govoplan.dashboard.layout:${auth.active_tenant?.id ?? auth.tenant.id}:${auth.user.id}`;
|
||||
const [layout, setLayout] = useState<DashboardLayout>(() => defaultLayout(widgets));
|
||||
const widgetSignature = JSON.stringify(
|
||||
widgets.map((widget) => ({
|
||||
id: widget.id,
|
||||
allowMultiple: widget.allowMultiple ?? false,
|
||||
defaultVisible: widget.defaultVisible ?? true,
|
||||
defaultSize: widget.defaultSize ?? "medium",
|
||||
supportedSizes: widget.supportedSizes ?? [],
|
||||
defaultConfiguration: widget.defaultConfiguration ?? {}
|
||||
}))
|
||||
);
|
||||
const tenantId = auth.active_tenant?.id ?? auth.tenant.id;
|
||||
const accountId = auth.user.account_id || auth.user.id;
|
||||
const viewId = effectiveView?.activeViewId ?? null;
|
||||
const storageKey = localLayoutKey(tenantId, accountId, viewId);
|
||||
const legacyStorageKey = viewId === null
|
||||
? `govoplan.dashboard.layout:${tenantId}:${auth.user.id}`
|
||||
: null;
|
||||
const initialLayout = useMemo(
|
||||
() => defaultDashboardLayout(widgets),
|
||||
[widgets]
|
||||
);
|
||||
const [savedLayout, setSavedLayout] = useState<DashboardLayoutState>(initialLayout);
|
||||
const [draftLayout, setDraftLayout] = useState<DashboardLayoutState>(initialLayout);
|
||||
const [layoutSource, setLayoutSource] = useState<LayoutSource>("default");
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [configuring, setConfiguring] = useState(false);
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
const [error, setError] = useState("");
|
||||
const [notice, setNotice] = useState("");
|
||||
const [libraryQuery, setLibraryQuery] = useState("");
|
||||
const [dragItem, setDragItem] = useState<DashboardDragItem | null>(null);
|
||||
const [dropTarget, setDropTarget] = useState<DashboardDropTarget | null>(null);
|
||||
const [editingInstanceId, setEditingInstanceId] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setLayout(readLayout(storageKey) ?? defaultLayout(widgets));
|
||||
}, [storageKey, widgetSignature]);
|
||||
let active = true;
|
||||
setLoading(true);
|
||||
setError("");
|
||||
setNotice("");
|
||||
setConfiguring(false);
|
||||
setEditingInstanceId(null);
|
||||
|
||||
const visibleWidgetIds = useMemo(() => {
|
||||
const known = new Set(layout.known);
|
||||
const visible = new Set(layout.visible);
|
||||
for (const widget of widgets) {
|
||||
if (!known.has(widget.id) && widget.defaultVisible !== false) visible.add(widget.id);
|
||||
void fetchDashboardLayout(settings, viewId)
|
||||
.then((response) => {
|
||||
if (!active) return;
|
||||
const local = readLocalLayout(storageKey, legacyStorageKey, widgets);
|
||||
const source: LayoutSource = response.exists
|
||||
? "server"
|
||||
: local
|
||||
? "browser"
|
||||
: "default";
|
||||
const base = response.exists
|
||||
? layoutFromResponse(response)
|
||||
: local
|
||||
? { ...local, revision: 0 }
|
||||
: defaultDashboardLayout(widgets);
|
||||
const next = reconcileDashboardLayout(base, widgets);
|
||||
setSavedLayout(next);
|
||||
setDraftLayout(next);
|
||||
setLayoutSource(source);
|
||||
})
|
||||
.catch((reason) => {
|
||||
if (!active) return;
|
||||
const local = readLocalLayout(storageKey, legacyStorageKey, widgets);
|
||||
const next = reconcileDashboardLayout(
|
||||
local ?? defaultDashboardLayout(widgets),
|
||||
widgets
|
||||
);
|
||||
setSavedLayout(next);
|
||||
setDraftLayout(next);
|
||||
setLayoutSource(local ? "browser" : "default");
|
||||
setError(
|
||||
`The saved Dashboard layout could not be loaded. ${
|
||||
local
|
||||
? "The browser fallback is shown."
|
||||
: "The module defaults are shown."
|
||||
} ${errorMessage(reason)}`
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
if (active) setLoading(false);
|
||||
});
|
||||
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [
|
||||
legacyStorageKey,
|
||||
settings.accessToken,
|
||||
settings.apiBaseUrl,
|
||||
settings.apiKey,
|
||||
storageKey,
|
||||
viewId,
|
||||
widgetSignature
|
||||
]);
|
||||
|
||||
const dirty = configuring && !layoutsEqual(savedLayout, draftLayout);
|
||||
useUnsavedDraftGuard({
|
||||
dirty,
|
||||
onSave: persistLayout,
|
||||
onDiscard: discardChanges,
|
||||
title: "Unsaved Dashboard layout",
|
||||
message: "Save or discard the Dashboard arrangement before leaving this page."
|
||||
});
|
||||
|
||||
const activeLayout = configuring ? draftLayout : savedLayout;
|
||||
const widgetById = useMemo(
|
||||
() => new Map(widgets.map((widget) => [widget.id, widget])),
|
||||
[widgets]
|
||||
);
|
||||
const renderedPlacements = activeLayout.placements.filter((placement) =>
|
||||
widgetById.has(placement.widgetId)
|
||||
);
|
||||
const placedWidgetIds = new Set(
|
||||
draftLayout.placements.map((placement) => placement.widgetId)
|
||||
);
|
||||
const libraryWidgets = widgets.filter((widget) => {
|
||||
if (!widget.allowMultiple && placedWidgetIds.has(widget.id)) return false;
|
||||
if (!libraryQuery.trim()) return true;
|
||||
const query = libraryQuery.trim().toLocaleLowerCase();
|
||||
return [widget.title, widget.description, widget.category, widget.moduleId, widget.id]
|
||||
.filter(Boolean)
|
||||
.some((value) => String(value).toLocaleLowerCase().includes(query));
|
||||
});
|
||||
const hiddenCount = widgets.filter(
|
||||
(widget) => !placedWidgetIds.has(widget.id)
|
||||
).length;
|
||||
const editingPlacement = editingInstanceId
|
||||
? draftLayout.placements.find(
|
||||
(placement) => placement.instanceId === editingInstanceId
|
||||
) ?? null
|
||||
: null;
|
||||
const editingWidget = editingPlacement
|
||||
? widgetById.get(editingPlacement.widgetId) ?? null
|
||||
: null;
|
||||
const viewLabel = effectiveView?.activeViewName ?? "Full interface";
|
||||
|
||||
async function persistLayout(): Promise<boolean> {
|
||||
setSaving(true);
|
||||
setError("");
|
||||
setNotice("");
|
||||
try {
|
||||
const response = await saveDashboardLayout(
|
||||
settings,
|
||||
viewId,
|
||||
layoutUpdatePayload(draftLayout)
|
||||
);
|
||||
const next = reconcileDashboardLayout(layoutFromResponse(response), widgets);
|
||||
setSavedLayout(next);
|
||||
setDraftLayout(next);
|
||||
setLayoutSource("server");
|
||||
setConfiguring(false);
|
||||
writeLocalLayout(storageKey, next);
|
||||
setNotice(`Dashboard layout saved for ${viewLabel}.`);
|
||||
return true;
|
||||
} catch (reason) {
|
||||
setError(errorMessage(reason));
|
||||
return false;
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
const availableIds = new Set(widgets.map((widget) => widget.id));
|
||||
return widgets.map((widget) => widget.id).filter((id) => availableIds.has(id) && visible.has(id));
|
||||
}, [layout, widgets]);
|
||||
const visibleWidgets = widgets.filter((widget) => visibleWidgetIds.includes(widget.id));
|
||||
const hiddenCount = Math.max(widgets.length - visibleWidgets.length, 0);
|
||||
|
||||
function saveLayout(next: DashboardLayout) {
|
||||
setLayout(next);
|
||||
writeLayout(storageKey, next);
|
||||
}
|
||||
|
||||
function setVisibleWidgets(selected: string[]) {
|
||||
const allIds = widgets.map((widget) => widget.id);
|
||||
const nextVisible = new Set(selected);
|
||||
saveLayout({
|
||||
known: allIds,
|
||||
visible: allIds.filter((id) => nextVisible.has(id))
|
||||
});
|
||||
function discardChanges() {
|
||||
setDraftLayout(savedLayout);
|
||||
setConfiguring(false);
|
||||
setEditingInstanceId(null);
|
||||
setDragItem(null);
|
||||
setDropTarget(null);
|
||||
}
|
||||
|
||||
function resetLayout() {
|
||||
saveLayout(defaultLayout(widgets));
|
||||
function beginConfiguration() {
|
||||
setDraftLayout(savedLayout);
|
||||
setConfiguring(true);
|
||||
setError("");
|
||||
setNotice("");
|
||||
}
|
||||
|
||||
function updateDraft(updater: (layout: DashboardLayoutState) => DashboardLayoutState) {
|
||||
setDraftLayout((current) => updater(current));
|
||||
}
|
||||
|
||||
function addWidget(widget: DashboardWidgetContribution) {
|
||||
updateDraft((layout) => appendPlacement(layout, widget));
|
||||
}
|
||||
|
||||
function startDrag(event: ReactDragEvent, item: DashboardDragItem) {
|
||||
event.dataTransfer.effectAllowed = item.kind === "catalogue" ? "copy" : "move";
|
||||
event.dataTransfer.setData("application/x-govoplan-dashboard", JSON.stringify(item));
|
||||
setDragItem(item);
|
||||
setDropTarget(null);
|
||||
}
|
||||
|
||||
function finishDrag() {
|
||||
setDragItem(null);
|
||||
setDropTarget(null);
|
||||
}
|
||||
|
||||
function markDropTarget(
|
||||
event: ReactDragEvent<HTMLElement>,
|
||||
instanceId: string
|
||||
) {
|
||||
if (!dragItem) return;
|
||||
event.preventDefault();
|
||||
event.dataTransfer.dropEffect = dragItem.kind === "catalogue" ? "copy" : "move";
|
||||
const bounds = event.currentTarget.getBoundingClientRect();
|
||||
const verticalPosition = (event.clientY - bounds.top) / bounds.height;
|
||||
const edge =
|
||||
verticalPosition < 0.3
|
||||
|| (
|
||||
verticalPosition <= 0.7
|
||||
&& event.clientX < bounds.left + bounds.width / 2
|
||||
)
|
||||
? "before"
|
||||
: "after";
|
||||
setDropTarget((current) =>
|
||||
current?.kind === "placement"
|
||||
&& current.instanceId === instanceId
|
||||
&& current.edge === edge
|
||||
? current
|
||||
: { kind: "placement", instanceId, edge }
|
||||
);
|
||||
}
|
||||
|
||||
function markEndDropTarget(event: ReactDragEvent<HTMLElement>) {
|
||||
if (!dragItem) return;
|
||||
event.preventDefault();
|
||||
event.dataTransfer.dropEffect = dragItem.kind === "catalogue" ? "copy" : "move";
|
||||
setDropTarget((current) =>
|
||||
current?.kind === "end" ? current : { kind: "end" }
|
||||
);
|
||||
}
|
||||
|
||||
function dropOnPlacement(
|
||||
event: ReactDragEvent<HTMLElement>,
|
||||
target: DashboardWidgetPlacement
|
||||
) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (!dragItem) return;
|
||||
const edge = dropTarget?.kind === "placement"
|
||||
&& dropTarget.instanceId === target.instanceId
|
||||
? dropTarget.edge
|
||||
: "after";
|
||||
if (dragItem.kind === "placement") {
|
||||
updateDraft((layout) =>
|
||||
reorderPlacement(layout, dragItem.instanceId, target.instanceId, edge)
|
||||
);
|
||||
} else {
|
||||
const widget = widgetById.get(dragItem.widgetId);
|
||||
if (widget) {
|
||||
updateDraft((layout) =>
|
||||
insertPlacement(layout, widget, target.instanceId, edge)
|
||||
);
|
||||
}
|
||||
}
|
||||
finishDrag();
|
||||
}
|
||||
|
||||
function dropOnPreview(event: ReactDragEvent<HTMLElement>) {
|
||||
if (dropTarget?.kind === "placement") {
|
||||
const target = renderedPlacements.find(
|
||||
(placement) => placement.instanceId === dropTarget.instanceId
|
||||
);
|
||||
if (target) {
|
||||
dropOnPlacement(event, target);
|
||||
return;
|
||||
}
|
||||
}
|
||||
dropAtEnd(event);
|
||||
}
|
||||
|
||||
function dropAtEnd(event: ReactDragEvent<HTMLElement>) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (!dragItem) return;
|
||||
if (dragItem.kind === "placement") {
|
||||
const last = draftLayout.placements.at(-1);
|
||||
if (last) {
|
||||
updateDraft((layout) =>
|
||||
reorderPlacement(layout, dragItem.instanceId, last.instanceId, "after")
|
||||
);
|
||||
}
|
||||
} else {
|
||||
const widget = widgetById.get(dragItem.widgetId);
|
||||
if (widget) addWidget(widget);
|
||||
}
|
||||
finishDrag();
|
||||
}
|
||||
|
||||
return (
|
||||
<PageScrollViewport className="dashboard-page">
|
||||
<div className="content-pad workspace-data-page">
|
||||
<div className="page-heading split workspace-heading">
|
||||
<div>
|
||||
<PageTitle>i18n:govoplan-dashboard.dashboard.3f8b4df2</PageTitle>
|
||||
<p>Personal workspace assembled from installed module widgets.</p>
|
||||
<div className="page-heading split workspace-heading">
|
||||
<div>
|
||||
<PageTitle>i18n:govoplan-dashboard.dashboard.3f8b4df2</PageTitle>
|
||||
<p>Personal workspace assembled from installed module widgets.</p>
|
||||
</div>
|
||||
<div className="button-row compact-actions">
|
||||
{!configuring && (
|
||||
<>
|
||||
<Button onClick={() => setRefreshKey((value) => value + 1)}>
|
||||
<RefreshCw size={16} /> Refresh
|
||||
</Button>
|
||||
<Button onClick={beginConfiguration}>
|
||||
<SlidersHorizontal size={16} /> Configure
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{configuring && (
|
||||
<>
|
||||
<Button onClick={discardChanges} disabled={saving}>
|
||||
<X size={16} /> Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => void persistLayout()}
|
||||
disabled={saving || !dirty}
|
||||
>
|
||||
<Save size={16} /> {saving ? "Saving..." : "Save layout"}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="button-row compact-actions">
|
||||
<Button onClick={() => setRefreshKey((value) => value + 1)}><RefreshCw size={16} /> Refresh</Button>
|
||||
<Button onClick={() => setConfiguring((value) => !value)}><SlidersHorizontal size={16} /> Configure</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="metric-grid dashboard-summary-grid">
|
||||
<MetricCard label="Installed modules" value={modules.length} tone="info" detail={moduleLabels(modules)} />
|
||||
<MetricCard label="Available widgets" value={widgets.length} tone="neutral" detail="Provided by active modules" />
|
||||
<MetricCard label="Visible widgets" value={visibleWidgets.length} tone="good" detail={hiddenCount ? `${hiddenCount} hidden` : "All shown"} />
|
||||
<MetricCard label="Layout" value="personal" tone="neutral" detail="Saved in this browser" />
|
||||
</div>
|
||||
|
||||
{configuring &&
|
||||
<Card
|
||||
title="Dashboard widgets"
|
||||
actions={<Button onClick={resetLayout}><RotateCcw size={16} /> Reset</Button>}>
|
||||
{widgets.length === 0 ? <p className="muted">No installed module exposes dashboard widgets yet.</p> :
|
||||
<AdminSelectionList
|
||||
options={widgets.map((widget) => ({ id: widget.id, label: widget.title, description: widget.description ?? widget.id }))}
|
||||
selected={visibleWidgetIds}
|
||||
onChange={setVisibleWidgets}
|
||||
/>
|
||||
}
|
||||
</Card>
|
||||
}
|
||||
|
||||
{visibleWidgets.length === 0 ?
|
||||
<Card title="No widgets selected">
|
||||
<p className="muted">Open Configure and select at least one widget. Modules can add more widgets by exposing the dashboard.widgets capability.</p>
|
||||
</Card> :
|
||||
<div className="dashboard-widget-grid">
|
||||
{visibleWidgets.map((widget) =>
|
||||
<section key={widget.id} className={`dashboard-widget dashboard-widget-${widgetSize(widget)}`}>
|
||||
<Card title={widget.title} collapsible collapseKey={`dashboard-widget:${widget.id}`}>
|
||||
{widget.render({
|
||||
settings,
|
||||
auth,
|
||||
modules,
|
||||
widgetId: widget.id,
|
||||
refreshKey,
|
||||
size: widgetSize(widget)
|
||||
})}
|
||||
</Card>
|
||||
</section>
|
||||
{error && (
|
||||
<DismissibleAlert tone="danger" resetKey={error} floating>
|
||||
{error}
|
||||
</DismissibleAlert>
|
||||
)}
|
||||
{notice && !error && (
|
||||
<DismissibleAlert tone="success" resetKey={notice} floating>
|
||||
{notice}
|
||||
</DismissibleAlert>
|
||||
)}
|
||||
|
||||
<div className="metric-grid dashboard-summary-grid">
|
||||
<MetricCard
|
||||
label="Installed modules"
|
||||
value={modules.length}
|
||||
tone="info"
|
||||
detail={moduleLabels(modules)}
|
||||
/>
|
||||
<MetricCard
|
||||
label="Available widgets"
|
||||
value={widgets.length}
|
||||
tone="neutral"
|
||||
detail="Provided by active modules"
|
||||
/>
|
||||
<MetricCard
|
||||
label="On dashboard"
|
||||
value={renderedPlacements.length}
|
||||
tone="good"
|
||||
detail={hiddenCount ? `${hiddenCount} available to add` : "All shown"}
|
||||
/>
|
||||
<MetricCard
|
||||
label="Layout"
|
||||
value={viewLabel}
|
||||
tone="neutral"
|
||||
detail={layoutSourceLabel(layoutSource)}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
<LoadingFrame loading={loading} label="Loading Dashboard layout">
|
||||
{configuring ? (
|
||||
<div className="dashboard-config-workspace">
|
||||
<WidgetLibrary
|
||||
widgets={libraryWidgets}
|
||||
atCapacity={draftLayout.placements.length >= MAX_DASHBOARD_WIDGETS}
|
||||
query={libraryQuery}
|
||||
onQueryChange={setLibraryQuery}
|
||||
onReset={() =>
|
||||
setDraftLayout({
|
||||
...defaultDashboardLayout(widgets),
|
||||
revision: savedLayout.revision
|
||||
})
|
||||
}
|
||||
onAdd={addWidget}
|
||||
onDragStart={startDrag}
|
||||
onDragEnd={finishDrag}
|
||||
/>
|
||||
|
||||
<DashboardGrid
|
||||
placements={renderedPlacements}
|
||||
widgetById={widgetById}
|
||||
settings={settings}
|
||||
auth={auth}
|
||||
modules={modules}
|
||||
effectiveView={effectiveView}
|
||||
refreshKey={refreshKey}
|
||||
configuring
|
||||
dragItem={dragItem}
|
||||
dropTarget={dropTarget}
|
||||
onDragStart={startDrag}
|
||||
onDragEnd={finishDrag}
|
||||
onDragOver={markDropTarget}
|
||||
onDragOverEnd={markEndDropTarget}
|
||||
onDrop={dropOnPlacement}
|
||||
onDropPreview={dropOnPreview}
|
||||
onDropAtEnd={dropAtEnd}
|
||||
onRemove={(instanceId) =>
|
||||
updateDraft((layout) => removePlacement(layout, instanceId))
|
||||
}
|
||||
onConfigure={setEditingInstanceId}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<DashboardGrid
|
||||
placements={renderedPlacements}
|
||||
widgetById={widgetById}
|
||||
settings={settings}
|
||||
auth={auth}
|
||||
modules={modules}
|
||||
effectiveView={effectiveView}
|
||||
refreshKey={refreshKey}
|
||||
configuring={false}
|
||||
dragItem={null}
|
||||
dropTarget={null}
|
||||
onDragStart={startDrag}
|
||||
onDragEnd={finishDrag}
|
||||
onDragOver={markDropTarget}
|
||||
onDragOverEnd={markEndDropTarget}
|
||||
onDrop={dropOnPlacement}
|
||||
onDropPreview={dropOnPreview}
|
||||
onDropAtEnd={dropAtEnd}
|
||||
onRemove={() => undefined}
|
||||
onConfigure={() => undefined}
|
||||
/>
|
||||
)}
|
||||
</LoadingFrame>
|
||||
</div>
|
||||
</PageScrollViewport>);
|
||||
|
||||
<WidgetConfigurationDialog
|
||||
open={Boolean(editingPlacement && editingWidget)}
|
||||
widget={editingWidget}
|
||||
placement={editingPlacement}
|
||||
onClose={() => setEditingInstanceId(null)}
|
||||
onSave={(placement) => {
|
||||
updateDraft((layout) => updatePlacement(layout, placement));
|
||||
setEditingInstanceId(null);
|
||||
}}
|
||||
/>
|
||||
</PageScrollViewport>
|
||||
);
|
||||
}
|
||||
|
||||
function canUseWidget(auth: AuthInfo, widget: DashboardWidgetContribution): boolean {
|
||||
if (widget.allOf?.length && !widget.allOf.every((scope) => hasScope(auth, scope))) return false;
|
||||
function canUseWidget(
|
||||
auth: AuthInfo,
|
||||
widget: DashboardWidgetContribution
|
||||
): boolean {
|
||||
if (
|
||||
widget.allOf?.length
|
||||
&& !widget.allOf.every((scope) => hasScope(auth, scope))
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
if (widget.anyOf?.length && !hasAnyScope(auth, widget.anyOf)) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
function widgetSize(widget: DashboardWidgetContribution): DashboardWidgetSize {
|
||||
return widget.defaultSize ?? "medium";
|
||||
}
|
||||
|
||||
function defaultLayout(widgets: DashboardWidgetContribution[]): DashboardLayout {
|
||||
const ids = widgets.map((widget) => widget.id);
|
||||
return {
|
||||
known: ids,
|
||||
visible: widgets.filter((widget) => widget.defaultVisible !== false).map((widget) => widget.id)
|
||||
};
|
||||
}
|
||||
|
||||
function readLayout(storageKey: string): DashboardLayout | null {
|
||||
if (typeof window === "undefined") return null;
|
||||
try {
|
||||
const raw = window.localStorage.getItem(storageKey);
|
||||
if (!raw) return null;
|
||||
const parsed = JSON.parse(raw) as Partial<DashboardLayout>;
|
||||
if (!Array.isArray(parsed.visible) || !Array.isArray(parsed.known)) return null;
|
||||
return {
|
||||
visible: parsed.visible.filter((id): id is string => typeof id === "string"),
|
||||
known: parsed.known.filter((id): id is string => typeof id === "string")
|
||||
};
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function writeLayout(storageKey: string, layout: DashboardLayout): void {
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
window.localStorage.setItem(storageKey, JSON.stringify(layout));
|
||||
} catch {
|
||||
// localStorage may be unavailable in restricted browsing contexts.
|
||||
}
|
||||
}
|
||||
|
||||
function moduleLabels(modules: Array<{ id: string }>): string {
|
||||
if (!modules.length) return "Core shell only";
|
||||
return modules.slice(0, 4).map((module) => module.id).join(", ");
|
||||
}
|
||||
|
||||
function layoutSourceLabel(source: LayoutSource): string {
|
||||
if (source === "server") return "Saved for your account";
|
||||
if (source === "browser") return "Browser layout; save to synchronize";
|
||||
return "Module defaults";
|
||||
}
|
||||
|
||||
function errorMessage(error: unknown): string {
|
||||
if (isApiError(error)) {
|
||||
if (error.status === 409) {
|
||||
return "This layout changed in another session. Reload the page before saving again.";
|
||||
}
|
||||
return error.message;
|
||||
}
|
||||
return error instanceof Error ? error.message : "The Dashboard request failed.";
|
||||
}
|
||||
|
||||
201
webui/src/features/dashboard/WidgetConfigurationDialog.tsx
Normal file
201
webui/src/features/dashboard/WidgetConfigurationDialog.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
FormField,
|
||||
SegmentedControl,
|
||||
ToggleSwitch,
|
||||
type DashboardWidgetConfiguration,
|
||||
type DashboardWidgetConfigurationField,
|
||||
type DashboardWidgetConfigurationValue,
|
||||
type DashboardWidgetContribution,
|
||||
type DashboardWidgetSize
|
||||
} from "@govoplan/core-webui";
|
||||
import {
|
||||
defaultWidgetSize,
|
||||
supportedWidgetSizes,
|
||||
type DashboardWidgetPlacement
|
||||
} from "./dashboardLayout";
|
||||
|
||||
type WidgetConfigurationDialogProps = {
|
||||
open: boolean;
|
||||
widget: DashboardWidgetContribution | null;
|
||||
placement: DashboardWidgetPlacement | null;
|
||||
onClose: () => void;
|
||||
onSave: (placement: DashboardWidgetPlacement) => void;
|
||||
};
|
||||
|
||||
export default function WidgetConfigurationDialog({
|
||||
open,
|
||||
widget,
|
||||
placement,
|
||||
onClose,
|
||||
onSave
|
||||
}: WidgetConfigurationDialogProps) {
|
||||
const [size, setSize] = useState<DashboardWidgetSize>("medium");
|
||||
const [configuration, setConfiguration] = useState<DashboardWidgetConfiguration>({});
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !widget || !placement) return;
|
||||
setSize(placement.size);
|
||||
setConfiguration({
|
||||
...(widget.defaultConfiguration ?? {}),
|
||||
...placement.configuration
|
||||
});
|
||||
}, [open, placement, widget]);
|
||||
|
||||
const invalidConfiguration = useMemo(
|
||||
() => (widget?.configurationFields ?? []).some((field) => {
|
||||
const value = configuration[field.id];
|
||||
if (field.required && valueIsEmpty(value)) return true;
|
||||
if (field.kind !== "number" || value === null || value === undefined) {
|
||||
return false;
|
||||
}
|
||||
if (typeof value !== "number" || !Number.isFinite(value)) return true;
|
||||
if (field.min !== undefined && value < field.min) return true;
|
||||
return field.max !== undefined && value > field.max;
|
||||
}),
|
||||
[configuration, widget]
|
||||
);
|
||||
|
||||
if (!widget || !placement) return null;
|
||||
const supportedSizes = supportedWidgetSizes(widget);
|
||||
|
||||
function setValue(id: string, value: DashboardWidgetConfigurationValue) {
|
||||
setConfiguration((current) => ({ ...current, [id]: value }));
|
||||
}
|
||||
|
||||
function reset() {
|
||||
setSize(defaultWidgetSize(widget));
|
||||
setConfiguration({ ...(widget.defaultConfiguration ?? {}) });
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
title={`Configure ${widget.title}`}
|
||||
onClose={onClose}
|
||||
className="dashboard-widget-config-dialog"
|
||||
footer={
|
||||
<>
|
||||
<Button type="button" variant="ghost" onClick={reset}>Reset</Button>
|
||||
<span className="dialog-footer-spacer" />
|
||||
<Button type="button" onClick={onClose}>Cancel</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
disabled={invalidConfiguration}
|
||||
onClick={() => onSave({ ...placement, size, configuration })}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{supportedSizes.length > 1 && (
|
||||
<FormField label="Widget size">
|
||||
<SegmentedControl
|
||||
options={supportedSizes.map((candidate) => ({
|
||||
id: candidate,
|
||||
label: sizeLabel(candidate)
|
||||
}))}
|
||||
value={size}
|
||||
onChange={setSize}
|
||||
ariaLabel="Widget size"
|
||||
role="group"
|
||||
size="equal"
|
||||
width="fill"
|
||||
/>
|
||||
</FormField>
|
||||
)}
|
||||
{(widget.configurationFields ?? []).map((field) => (
|
||||
<ConfigurationField
|
||||
key={field.id}
|
||||
field={field}
|
||||
value={configuration[field.id] ?? widget.defaultConfiguration?.[field.id] ?? null}
|
||||
onChange={(value) => setValue(field.id, value)}
|
||||
/>
|
||||
))}
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function ConfigurationField({
|
||||
field,
|
||||
value,
|
||||
onChange
|
||||
}: {
|
||||
field: DashboardWidgetConfigurationField;
|
||||
value: DashboardWidgetConfigurationValue;
|
||||
onChange: (value: DashboardWidgetConfigurationValue) => void;
|
||||
}) {
|
||||
if (field.kind === "boolean") {
|
||||
return (
|
||||
<ToggleSwitch
|
||||
label={field.label}
|
||||
help={field.description}
|
||||
checked={value === true}
|
||||
onChange={onChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (field.kind === "select") {
|
||||
return (
|
||||
<FormField label={field.label} help={field.description}>
|
||||
<select
|
||||
value={typeof value === "string" ? value : ""}
|
||||
required={field.required}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
>
|
||||
<option value="" disabled={field.required}>
|
||||
{field.required ? "Select an option" : "None"}
|
||||
</option>
|
||||
{(field.options ?? []).map((option) => (
|
||||
<option key={option.value} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</FormField>
|
||||
);
|
||||
}
|
||||
|
||||
if (field.kind === "number") {
|
||||
return (
|
||||
<FormField label={field.label} help={field.description}>
|
||||
<input
|
||||
type="number"
|
||||
value={typeof value === "number" ? value : ""}
|
||||
required={field.required}
|
||||
min={field.min}
|
||||
max={field.max}
|
||||
step={field.step}
|
||||
placeholder={field.placeholder}
|
||||
onChange={(event) => {
|
||||
const next = event.target.value;
|
||||
onChange(next === "" ? null : Number(next));
|
||||
}}
|
||||
/>
|
||||
</FormField>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<FormField label={field.label} help={field.description}>
|
||||
<input
|
||||
type="text"
|
||||
value={typeof value === "string" ? value : ""}
|
||||
required={field.required}
|
||||
placeholder={field.placeholder}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
/>
|
||||
</FormField>
|
||||
);
|
||||
}
|
||||
|
||||
function valueIsEmpty(value: DashboardWidgetConfigurationValue | undefined): boolean {
|
||||
return value === null || value === undefined || value === "";
|
||||
}
|
||||
|
||||
function sizeLabel(size: DashboardWidgetSize): string {
|
||||
return size.charAt(0).toUpperCase() + size.slice(1);
|
||||
}
|
||||
99
webui/src/features/dashboard/WidgetLibrary.tsx
Normal file
99
webui/src/features/dashboard/WidgetLibrary.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import type { DragEvent as ReactDragEvent } from "react";
|
||||
import { GripVertical, Plus, RotateCcw, Search } from "lucide-react";
|
||||
import {
|
||||
IconButton,
|
||||
type DashboardWidgetContribution
|
||||
} from "@govoplan/core-webui";
|
||||
import type { DashboardDragItem } from "./dashboardEditorTypes";
|
||||
|
||||
type WidgetLibraryProps = {
|
||||
widgets: DashboardWidgetContribution[];
|
||||
atCapacity: boolean;
|
||||
query: string;
|
||||
onQueryChange: (query: string) => void;
|
||||
onReset: () => void;
|
||||
onAdd: (widget: DashboardWidgetContribution) => void;
|
||||
onDragStart: (
|
||||
event: ReactDragEvent,
|
||||
item: DashboardDragItem
|
||||
) => void;
|
||||
onDragEnd: () => void;
|
||||
};
|
||||
|
||||
export default function WidgetLibrary({
|
||||
widgets,
|
||||
atCapacity,
|
||||
query,
|
||||
onQueryChange,
|
||||
onReset,
|
||||
onAdd,
|
||||
onDragStart,
|
||||
onDragEnd
|
||||
}: WidgetLibraryProps) {
|
||||
return (
|
||||
<aside className="dashboard-widget-library" aria-label="Widget library">
|
||||
<div className="dashboard-widget-library-controls">
|
||||
<div className="dashboard-widget-library-header">
|
||||
<h2>Widget library</h2>
|
||||
</div>
|
||||
<label className="dashboard-widget-search">
|
||||
<Search size={16} aria-hidden="true" />
|
||||
<input
|
||||
type="search"
|
||||
value={query}
|
||||
placeholder="Search widgets"
|
||||
onChange={(event) => onQueryChange(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="dashboard-widget-library-list">
|
||||
{widgets.map((widget) => (
|
||||
<div
|
||||
key={widget.id}
|
||||
className={`dashboard-widget-library-item${atCapacity ? " is-disabled" : ""}`}
|
||||
draggable={!atCapacity}
|
||||
onDragStart={(event) =>
|
||||
onDragStart(event, { kind: "catalogue", widgetId: widget.id })
|
||||
}
|
||||
onDragEnd={onDragEnd}
|
||||
>
|
||||
<GripVertical size={16} aria-hidden="true" />
|
||||
<div>
|
||||
<strong>{widget.title}</strong>
|
||||
<span>{widget.description ?? widget.category ?? widget.moduleId}</span>
|
||||
</div>
|
||||
<IconButton
|
||||
label={`Add ${widget.title}`}
|
||||
icon={<Plus size={16} />}
|
||||
variant="ghost"
|
||||
disabledReason={
|
||||
atCapacity
|
||||
? "A Dashboard can contain at most 100 widgets."
|
||||
: undefined
|
||||
}
|
||||
onClick={() => onAdd(widget)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{widgets.length === 0 && !atCapacity && (
|
||||
<p className="muted dashboard-widget-library-empty">
|
||||
{query.trim()
|
||||
? "No available widgets match the search."
|
||||
: "All available widgets are already on this Dashboard."}
|
||||
</p>
|
||||
)}
|
||||
{atCapacity && (
|
||||
<p className="muted dashboard-widget-library-empty">
|
||||
This Dashboard has reached the 100-widget limit.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<IconButton
|
||||
label="Reset to module defaults"
|
||||
icon={<RotateCcw size={16} />}
|
||||
variant="ghost"
|
||||
onClick={onReset}
|
||||
/>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
96
webui/src/features/dashboard/dashboardEditorTypes.ts
Normal file
96
webui/src/features/dashboard/dashboardEditorTypes.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
import type { DashboardWidgetSize } from "@govoplan/core-webui";
|
||||
import type { DashboardWidgetPlacement } from "./dashboardLayout";
|
||||
|
||||
export type DashboardDragItem =
|
||||
| { kind: "placement"; instanceId: string }
|
||||
| { kind: "catalogue"; widgetId: string };
|
||||
|
||||
export type DashboardDropTarget =
|
||||
| {
|
||||
kind: "placement";
|
||||
instanceId: string;
|
||||
edge: "before" | "after";
|
||||
}
|
||||
| { kind: "end" };
|
||||
|
||||
export type DashboardGridPreviewItem =
|
||||
| {
|
||||
kind: "placement";
|
||||
placement: DashboardWidgetPlacement;
|
||||
placeholder: boolean;
|
||||
}
|
||||
| {
|
||||
kind: "catalogue";
|
||||
widgetId: string;
|
||||
size: DashboardWidgetSize;
|
||||
};
|
||||
|
||||
export function dashboardGridPreview(
|
||||
placements: DashboardWidgetPlacement[],
|
||||
dragItem: DashboardDragItem | null,
|
||||
dropTarget: DashboardDropTarget | null,
|
||||
catalogueSize: DashboardWidgetSize = "medium"
|
||||
): DashboardGridPreviewItem[] {
|
||||
const items: DashboardGridPreviewItem[] = placements.map((placement) => ({
|
||||
kind: "placement",
|
||||
placement,
|
||||
placeholder: false
|
||||
}));
|
||||
if (!dragItem || !dropTarget) return items;
|
||||
|
||||
if (dragItem.kind === "catalogue") {
|
||||
const insertionIndex = previewInsertionIndex(
|
||||
placements,
|
||||
dropTarget,
|
||||
null
|
||||
);
|
||||
items.splice(insertionIndex, 0, {
|
||||
kind: "catalogue",
|
||||
widgetId: dragItem.widgetId,
|
||||
size: catalogueSize
|
||||
});
|
||||
return items;
|
||||
}
|
||||
|
||||
const sourceIndex = placements.findIndex(
|
||||
(placement) => placement.instanceId === dragItem.instanceId
|
||||
);
|
||||
if (sourceIndex < 0) return items;
|
||||
const source = placements[sourceIndex];
|
||||
const remaining = placements.filter(
|
||||
(placement) => placement.instanceId !== dragItem.instanceId
|
||||
);
|
||||
const insertionIndex = previewInsertionIndex(
|
||||
remaining,
|
||||
dropTarget,
|
||||
sourceIndex
|
||||
);
|
||||
const preview: DashboardGridPreviewItem[] = remaining.map((placement) => ({
|
||||
kind: "placement",
|
||||
placement,
|
||||
placeholder: false
|
||||
}));
|
||||
preview.splice(insertionIndex, 0, {
|
||||
kind: "placement",
|
||||
placement: source,
|
||||
placeholder: true
|
||||
});
|
||||
return preview;
|
||||
}
|
||||
|
||||
function previewInsertionIndex(
|
||||
placements: DashboardWidgetPlacement[],
|
||||
target: DashboardDropTarget,
|
||||
fallbackIndex: number | null
|
||||
): number {
|
||||
if (target.kind === "end") return placements.length;
|
||||
const targetIndex = placements.findIndex(
|
||||
(placement) => placement.instanceId === target.instanceId
|
||||
);
|
||||
if (targetIndex < 0) {
|
||||
return fallbackIndex === null
|
||||
? placements.length
|
||||
: Math.min(fallbackIndex, placements.length);
|
||||
}
|
||||
return targetIndex + (target.edge === "after" ? 1 : 0);
|
||||
}
|
||||
445
webui/src/features/dashboard/dashboardLayout.ts
Normal file
445
webui/src/features/dashboard/dashboardLayout.ts
Normal file
@@ -0,0 +1,445 @@
|
||||
import type {
|
||||
DashboardWidgetConfiguration,
|
||||
DashboardWidgetContribution,
|
||||
DashboardWidgetSize
|
||||
} from "@govoplan/core-webui";
|
||||
import type {
|
||||
DashboardLayoutResponse,
|
||||
DashboardLayoutUpdate,
|
||||
DashboardWidgetPlacementResponse
|
||||
} from "../../api/dashboard";
|
||||
|
||||
export type DashboardWidgetPlacement = {
|
||||
instanceId: string;
|
||||
widgetId: string;
|
||||
size: DashboardWidgetSize;
|
||||
configuration: DashboardWidgetConfiguration;
|
||||
};
|
||||
|
||||
export type DashboardLayoutState = {
|
||||
layoutVersion: 1;
|
||||
revision: number;
|
||||
knownWidgetIds: string[];
|
||||
placements: DashboardWidgetPlacement[];
|
||||
};
|
||||
|
||||
type LegacyDashboardLayout = {
|
||||
visible: string[];
|
||||
known: string[];
|
||||
};
|
||||
|
||||
const SIZES: DashboardWidgetSize[] = ["small", "medium", "wide", "full"];
|
||||
export const MAX_DASHBOARD_WIDGETS = 100;
|
||||
|
||||
export function createWidgetPlacement(
|
||||
widget: DashboardWidgetContribution
|
||||
): DashboardWidgetPlacement {
|
||||
return {
|
||||
instanceId: newInstanceId(),
|
||||
widgetId: widget.id,
|
||||
size: defaultWidgetSize(widget),
|
||||
configuration: { ...(widget.defaultConfiguration ?? {}) }
|
||||
};
|
||||
}
|
||||
|
||||
export function defaultDashboardLayout(
|
||||
widgets: DashboardWidgetContribution[]
|
||||
): DashboardLayoutState {
|
||||
return {
|
||||
layoutVersion: 1,
|
||||
revision: 0,
|
||||
knownWidgetIds: widgets.map((widget) => widget.id),
|
||||
placements: widgets
|
||||
.filter((widget) => widget.defaultVisible !== false)
|
||||
.slice(0, MAX_DASHBOARD_WIDGETS)
|
||||
.map(createWidgetPlacement)
|
||||
};
|
||||
}
|
||||
|
||||
export function reconcileDashboardLayout(
|
||||
layout: DashboardLayoutState,
|
||||
widgets: DashboardWidgetContribution[]
|
||||
): DashboardLayoutState {
|
||||
const widgetById = new Map(widgets.map((widget) => [widget.id, widget]));
|
||||
const seenInstances = new Set<string>();
|
||||
const seenWidgets = new Set<string>();
|
||||
const placements = layout.placements.flatMap((placement) => {
|
||||
if (!placement.instanceId || seenInstances.has(placement.instanceId)) return [];
|
||||
const widget = widgetById.get(placement.widgetId);
|
||||
if (widget && !widget.allowMultiple && seenWidgets.has(widget.id)) return [];
|
||||
seenInstances.add(placement.instanceId);
|
||||
seenWidgets.add(placement.widgetId);
|
||||
return [normalizePlacement(placement, widget)];
|
||||
});
|
||||
const known = new Set(layout.knownWidgetIds);
|
||||
|
||||
for (const widget of widgets) {
|
||||
if (
|
||||
placements.length < MAX_DASHBOARD_WIDGETS
|
||||
&& !known.has(widget.id)
|
||||
&& widget.defaultVisible !== false
|
||||
) {
|
||||
placements.push(createWidgetPlacement(widget));
|
||||
}
|
||||
known.add(widget.id);
|
||||
}
|
||||
|
||||
return {
|
||||
layoutVersion: 1,
|
||||
revision: layout.revision,
|
||||
knownWidgetIds: [...known],
|
||||
placements: placements.slice(0, MAX_DASHBOARD_WIDGETS)
|
||||
};
|
||||
}
|
||||
|
||||
export function layoutFromResponse(
|
||||
response: DashboardLayoutResponse
|
||||
): DashboardLayoutState {
|
||||
return {
|
||||
layoutVersion: 1,
|
||||
revision: response.revision,
|
||||
knownWidgetIds: uniqueStrings(response.known_widget_ids),
|
||||
placements: response.placements.map(placementFromResponse)
|
||||
};
|
||||
}
|
||||
|
||||
export function layoutUpdatePayload(
|
||||
layout: DashboardLayoutState
|
||||
): DashboardLayoutUpdate {
|
||||
return {
|
||||
expected_revision: layout.revision,
|
||||
layout_version: 1,
|
||||
placements: layout.placements.map(placementToResponse),
|
||||
known_widget_ids: uniqueStrings(layout.knownWidgetIds)
|
||||
};
|
||||
}
|
||||
|
||||
export function appendPlacement(
|
||||
layout: DashboardLayoutState,
|
||||
widget: DashboardWidgetContribution
|
||||
): DashboardLayoutState {
|
||||
if (
|
||||
layout.placements.length >= MAX_DASHBOARD_WIDGETS
|
||||
|| (
|
||||
!widget.allowMultiple
|
||||
&& layout.placements.some((placement) => placement.widgetId === widget.id)
|
||||
)
|
||||
) {
|
||||
return layout;
|
||||
}
|
||||
return {
|
||||
...layout,
|
||||
knownWidgetIds: uniqueStrings([...layout.knownWidgetIds, widget.id]),
|
||||
placements: [...layout.placements, createWidgetPlacement(widget)]
|
||||
};
|
||||
}
|
||||
|
||||
export function insertPlacement(
|
||||
layout: DashboardLayoutState,
|
||||
widget: DashboardWidgetContribution,
|
||||
targetInstanceId: string,
|
||||
edge: "before" | "after"
|
||||
): DashboardLayoutState {
|
||||
if (
|
||||
layout.placements.length >= MAX_DASHBOARD_WIDGETS
|
||||
|| (
|
||||
!widget.allowMultiple
|
||||
&& layout.placements.some((placement) => placement.widgetId === widget.id)
|
||||
)
|
||||
) {
|
||||
return layout;
|
||||
}
|
||||
const targetIndex = layout.placements.findIndex(
|
||||
(placement) => placement.instanceId === targetInstanceId
|
||||
);
|
||||
if (targetIndex < 0) return appendPlacement(layout, widget);
|
||||
const insertionIndex = targetIndex + (edge === "after" ? 1 : 0);
|
||||
return {
|
||||
...layout,
|
||||
knownWidgetIds: uniqueStrings([...layout.knownWidgetIds, widget.id]),
|
||||
placements: [
|
||||
...layout.placements.slice(0, insertionIndex),
|
||||
createWidgetPlacement(widget),
|
||||
...layout.placements.slice(insertionIndex)
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
export function removePlacement(
|
||||
layout: DashboardLayoutState,
|
||||
instanceId: string
|
||||
): DashboardLayoutState {
|
||||
return {
|
||||
...layout,
|
||||
placements: layout.placements.filter(
|
||||
(placement) => placement.instanceId !== instanceId
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
export function updatePlacement(
|
||||
layout: DashboardLayoutState,
|
||||
nextPlacement: DashboardWidgetPlacement
|
||||
): DashboardLayoutState {
|
||||
return {
|
||||
...layout,
|
||||
placements: layout.placements.map((placement) =>
|
||||
placement.instanceId === nextPlacement.instanceId
|
||||
? nextPlacement
|
||||
: placement
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
export function reorderPlacement(
|
||||
layout: DashboardLayoutState,
|
||||
sourceInstanceId: string,
|
||||
targetInstanceId: string,
|
||||
edge: "before" | "after"
|
||||
): DashboardLayoutState {
|
||||
if (sourceInstanceId === targetInstanceId) return layout;
|
||||
const source = layout.placements.find(
|
||||
(placement) => placement.instanceId === sourceInstanceId
|
||||
);
|
||||
if (!source) return layout;
|
||||
const remaining = layout.placements.filter(
|
||||
(placement) => placement.instanceId !== sourceInstanceId
|
||||
);
|
||||
const targetIndex = remaining.findIndex(
|
||||
(placement) => placement.instanceId === targetInstanceId
|
||||
);
|
||||
if (targetIndex < 0) return layout;
|
||||
const insertionIndex = targetIndex + (edge === "after" ? 1 : 0);
|
||||
return {
|
||||
...layout,
|
||||
placements: [
|
||||
...remaining.slice(0, insertionIndex),
|
||||
source,
|
||||
...remaining.slice(insertionIndex)
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
export function dashboardMasonryRowSpan(
|
||||
height: number,
|
||||
rowHeight: number,
|
||||
bottomGap: number
|
||||
): number {
|
||||
const safeHeight = Number.isFinite(height) ? Math.max(0, height) : 0;
|
||||
const safeRowHeight =
|
||||
Number.isFinite(rowHeight) && rowHeight > 0 ? rowHeight : 4;
|
||||
const safeBottomGap =
|
||||
Number.isFinite(bottomGap) ? Math.max(0, bottomGap) : 0;
|
||||
return Math.max(1, Math.ceil((safeHeight + safeBottomGap) / safeRowHeight));
|
||||
}
|
||||
|
||||
export function layoutsEqual(
|
||||
left: DashboardLayoutState,
|
||||
right: DashboardLayoutState
|
||||
): boolean {
|
||||
return JSON.stringify(comparableLayout(left)) === JSON.stringify(comparableLayout(right));
|
||||
}
|
||||
|
||||
export function localLayoutKey(
|
||||
tenantId: string,
|
||||
accountId: string,
|
||||
viewId: string | null
|
||||
): string {
|
||||
return [
|
||||
"govoplan.dashboard.layout.v2",
|
||||
encodeURIComponent(tenantId),
|
||||
encodeURIComponent(accountId),
|
||||
encodeURIComponent(viewId ?? "full")
|
||||
].join(":");
|
||||
}
|
||||
|
||||
export function readLocalLayout(
|
||||
storageKey: string,
|
||||
legacyStorageKey: string | null,
|
||||
widgets: DashboardWidgetContribution[]
|
||||
): DashboardLayoutState | null {
|
||||
if (typeof window === "undefined") return null;
|
||||
try {
|
||||
const current = window.localStorage.getItem(storageKey);
|
||||
if (current) return parseStoredLayout(JSON.parse(current));
|
||||
if (!legacyStorageKey) return null;
|
||||
const legacy = window.localStorage.getItem(legacyStorageKey);
|
||||
if (!legacy) return null;
|
||||
return migrateLegacyLayout(JSON.parse(legacy), widgets);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function writeLocalLayout(
|
||||
storageKey: string,
|
||||
layout: DashboardLayoutState
|
||||
): void {
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
window.localStorage.setItem(storageKey, JSON.stringify(layout));
|
||||
} catch {
|
||||
// Browser storage is only a resilience and migration fallback.
|
||||
}
|
||||
}
|
||||
|
||||
export function defaultWidgetSize(
|
||||
widget: DashboardWidgetContribution
|
||||
): DashboardWidgetSize {
|
||||
const supported = supportedWidgetSizes(widget);
|
||||
return supported.includes(widget.defaultSize ?? "medium")
|
||||
? widget.defaultSize ?? "medium"
|
||||
: supported[0];
|
||||
}
|
||||
|
||||
export function supportedWidgetSizes(
|
||||
widget: DashboardWidgetContribution
|
||||
): DashboardWidgetSize[] {
|
||||
const supported = (widget.supportedSizes ?? [widget.defaultSize ?? "medium"])
|
||||
.filter((size): size is DashboardWidgetSize => SIZES.includes(size));
|
||||
return supported.length ? [...new Set(supported)] : ["medium"];
|
||||
}
|
||||
|
||||
export function widgetIsConfigurable(
|
||||
widget: DashboardWidgetContribution
|
||||
): boolean {
|
||||
return Boolean(
|
||||
widget.configurationFields?.length
|
||||
|| supportedWidgetSizes(widget).length > 1
|
||||
);
|
||||
}
|
||||
|
||||
function normalizePlacement(
|
||||
placement: DashboardWidgetPlacement,
|
||||
widget: DashboardWidgetContribution | undefined
|
||||
): DashboardWidgetPlacement {
|
||||
if (!widget) return placement;
|
||||
const supported = supportedWidgetSizes(widget);
|
||||
return {
|
||||
...placement,
|
||||
size: supported.includes(placement.size)
|
||||
? placement.size
|
||||
: defaultWidgetSize(widget),
|
||||
configuration: {
|
||||
...(widget.defaultConfiguration ?? {}),
|
||||
...placement.configuration
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function placementFromResponse(
|
||||
placement: DashboardWidgetPlacementResponse
|
||||
): DashboardWidgetPlacement {
|
||||
return {
|
||||
instanceId: placement.instance_id,
|
||||
widgetId: placement.widget_id,
|
||||
size: placement.size,
|
||||
configuration: { ...placement.configuration }
|
||||
};
|
||||
}
|
||||
|
||||
function placementToResponse(
|
||||
placement: DashboardWidgetPlacement
|
||||
): DashboardWidgetPlacementResponse {
|
||||
return {
|
||||
instance_id: placement.instanceId,
|
||||
widget_id: placement.widgetId,
|
||||
size: placement.size,
|
||||
configuration: { ...placement.configuration }
|
||||
};
|
||||
}
|
||||
|
||||
function parseStoredLayout(value: unknown): DashboardLayoutState | null {
|
||||
if (!value || typeof value !== "object") return null;
|
||||
const candidate = value as Partial<DashboardLayoutState>;
|
||||
if (!Array.isArray(candidate.placements) || !Array.isArray(candidate.knownWidgetIds)) {
|
||||
return null;
|
||||
}
|
||||
const placements = candidate.placements.flatMap((item) => {
|
||||
if (!item || typeof item !== "object") return [];
|
||||
const placement = item as Partial<DashboardWidgetPlacement>;
|
||||
if (
|
||||
typeof placement.instanceId !== "string"
|
||||
|| typeof placement.widgetId !== "string"
|
||||
|| !SIZES.includes(placement.size as DashboardWidgetSize)
|
||||
|| !placement.configuration
|
||||
|| typeof placement.configuration !== "object"
|
||||
|| Array.isArray(placement.configuration)
|
||||
) {
|
||||
return [];
|
||||
}
|
||||
return [{
|
||||
instanceId: placement.instanceId,
|
||||
widgetId: placement.widgetId,
|
||||
size: placement.size as DashboardWidgetSize,
|
||||
configuration: sanitizeConfiguration(placement.configuration)
|
||||
}];
|
||||
});
|
||||
return {
|
||||
layoutVersion: 1,
|
||||
revision: typeof candidate.revision === "number" ? candidate.revision : 0,
|
||||
knownWidgetIds: uniqueStrings(candidate.knownWidgetIds),
|
||||
placements
|
||||
};
|
||||
}
|
||||
|
||||
function migrateLegacyLayout(
|
||||
value: unknown,
|
||||
widgets: DashboardWidgetContribution[]
|
||||
): DashboardLayoutState | null {
|
||||
if (!value || typeof value !== "object") return null;
|
||||
const candidate = value as Partial<LegacyDashboardLayout>;
|
||||
if (!Array.isArray(candidate.visible) || !Array.isArray(candidate.known)) {
|
||||
return null;
|
||||
}
|
||||
const visible = new Set(uniqueStrings(candidate.visible));
|
||||
const widgetById = new Map(widgets.map((widget) => [widget.id, widget]));
|
||||
return {
|
||||
layoutVersion: 1,
|
||||
revision: 0,
|
||||
knownWidgetIds: uniqueStrings(candidate.known),
|
||||
placements: [...visible].flatMap((widgetId) => {
|
||||
const widget = widgetById.get(widgetId);
|
||||
return widget ? [createWidgetPlacement(widget)] : [];
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
function uniqueStrings(values: unknown[]): string[] {
|
||||
return [...new Set(values.filter((value): value is string => typeof value === "string"))];
|
||||
}
|
||||
|
||||
function sanitizeConfiguration(
|
||||
value: Record<string, unknown>
|
||||
): DashboardWidgetConfiguration {
|
||||
return Object.fromEntries(
|
||||
Object.entries(value).filter(([key, item]) =>
|
||||
key.length > 0
|
||||
&& key.length <= 120
|
||||
&& (
|
||||
item === null
|
||||
|| typeof item === "string"
|
||||
|| typeof item === "boolean"
|
||||
|| (typeof item === "number" && Number.isFinite(item))
|
||||
)
|
||||
)
|
||||
) as DashboardWidgetConfiguration;
|
||||
}
|
||||
|
||||
function comparableLayout(layout: DashboardLayoutState) {
|
||||
return {
|
||||
layoutVersion: layout.layoutVersion,
|
||||
knownWidgetIds: layout.knownWidgetIds,
|
||||
placements: layout.placements
|
||||
};
|
||||
}
|
||||
|
||||
function newInstanceId(): string {
|
||||
if (
|
||||
typeof globalThis.crypto !== "undefined"
|
||||
&& typeof globalThis.crypto.randomUUID === "function"
|
||||
) {
|
||||
return globalThis.crypto.randomUUID();
|
||||
}
|
||||
return `widget-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 12)}`;
|
||||
}
|
||||
@@ -1,16 +1,52 @@
|
||||
import { StatusBadge, type PlatformWebModule } from "@govoplan/core-webui";
|
||||
import {
|
||||
StatusBadge,
|
||||
type DashboardWidgetConfiguration,
|
||||
type PlatformWebModule
|
||||
} from "@govoplan/core-webui";
|
||||
|
||||
export default function InstalledModulesWidget({ modules }: { modules: PlatformWebModule[] }) {
|
||||
export default function InstalledModulesWidget({
|
||||
modules,
|
||||
configuration
|
||||
}: {
|
||||
modules: PlatformWebModule[];
|
||||
configuration: DashboardWidgetConfiguration;
|
||||
}) {
|
||||
if (!modules.length) return <p className="muted">No WebUI modules are active.</p>;
|
||||
const maxItems = clampNumber(configuration.maxItems, 1, 50, 8);
|
||||
const showVersions = configuration.showVersions !== false;
|
||||
const sortBy = configuration.sortBy === "label" ? "label" : "module";
|
||||
const visibleModules = [...modules]
|
||||
.sort((left, right) => {
|
||||
const leftValue = sortBy === "label" ? left.label : left.id;
|
||||
const rightValue = sortBy === "label" ? right.label : right.id;
|
||||
return String(leftValue).localeCompare(String(rightValue));
|
||||
})
|
||||
.slice(0, maxItems);
|
||||
const remaining = Math.max(modules.length - visibleModules.length, 0);
|
||||
|
||||
return (
|
||||
<dl className="detail-list dashboard-compact-list">
|
||||
{modules.map((module) =>
|
||||
<div key={module.id}>
|
||||
<dt><StatusBadge status="success" label={module.id} /></dt>
|
||||
<dd><strong>{module.label}</strong><span className="muted"> v{module.version}</span></dd>
|
||||
</div>
|
||||
)}
|
||||
</dl>);
|
||||
<>
|
||||
<dl className="detail-list dashboard-compact-list">
|
||||
{visibleModules.map((module) =>
|
||||
<div key={module.id}>
|
||||
<dt><StatusBadge status="success" label={module.id} /></dt>
|
||||
<dd>
|
||||
<strong>{module.label}</strong>
|
||||
{showVersions && <span className="muted"> v{module.version}</span>}
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
</dl>
|
||||
{remaining > 0 && <p className="muted dashboard-widget-overflow">+{remaining} more active modules</p>}
|
||||
</>);
|
||||
}
|
||||
|
||||
function clampNumber(
|
||||
value: DashboardWidgetConfiguration[string],
|
||||
minimum: number,
|
||||
maximum: number,
|
||||
fallback: number
|
||||
): number {
|
||||
if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
|
||||
return Math.min(maximum, Math.max(minimum, Math.round(value)));
|
||||
}
|
||||
|
||||
@@ -17,7 +17,41 @@ const dashboardWidgets: DashboardWidgetsUiCapability = {
|
||||
category: "Platform",
|
||||
order: 10,
|
||||
defaultSize: "medium",
|
||||
render: ({ modules }) => createElement(InstalledModulesWidget, { modules })
|
||||
supportedSizes: ["small", "medium", "wide"],
|
||||
defaultConfiguration: {
|
||||
maxItems: 8,
|
||||
showVersions: true,
|
||||
sortBy: "module"
|
||||
},
|
||||
configurationFields: [
|
||||
{
|
||||
id: "maxItems",
|
||||
label: "Maximum modules",
|
||||
description: "Limit how many active modules are listed.",
|
||||
kind: "number",
|
||||
min: 1,
|
||||
max: 50,
|
||||
step: 1,
|
||||
required: true
|
||||
},
|
||||
{
|
||||
id: "sortBy",
|
||||
label: "Sort modules by",
|
||||
kind: "select",
|
||||
required: true,
|
||||
options: [
|
||||
{ value: "module", label: "Module id" },
|
||||
{ value: "label", label: "Display name" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "showVersions",
|
||||
label: "Show module versions",
|
||||
kind: "boolean"
|
||||
}
|
||||
],
|
||||
render: ({ modules, configuration }) =>
|
||||
createElement(InstalledModulesWidget, { modules, configuration })
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@@ -11,12 +11,23 @@
|
||||
.dashboard-widget-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(220px, 1fr));
|
||||
gap: 18px;
|
||||
grid-auto-flow: row dense;
|
||||
grid-auto-rows: 4px;
|
||||
column-gap: 18px;
|
||||
row-gap: 0;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.dashboard-widget {
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
align-self: start;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.dashboard-widget > .card {
|
||||
height: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dashboard-widget-small {
|
||||
@@ -41,10 +52,275 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dashboard-config-workspace {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.dashboard-widget-library {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) 36px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
min-height: 84px;
|
||||
overflow: hidden;
|
||||
border: var(--border-line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
.dashboard-widget-library-controls {
|
||||
align-self: stretch;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
padding: 9px 12px;
|
||||
border-right: var(--border-line);
|
||||
background: var(--panel-header);
|
||||
}
|
||||
|
||||
.dashboard-widget-library-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard-widget-library-header h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dashboard-widget-search {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 4px 8px;
|
||||
border: var(--border-line);
|
||||
border-radius: 5px;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.dashboard-widget-search:focus-within {
|
||||
box-shadow: var(--accent-ring-soft);
|
||||
}
|
||||
|
||||
.dashboard-widget-search input[type="search"] {
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
padding: 1px 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.dashboard-widget-library-list {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
border-right: var(--border-line);
|
||||
}
|
||||
|
||||
.dashboard-widget-library-item {
|
||||
flex: 0 0 min(250px, 32vw);
|
||||
display: grid;
|
||||
grid-template-columns: 18px minmax(0, 1fr) 36px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 70px;
|
||||
padding: 9px 10px 9px 12px;
|
||||
border-right: var(--border-line);
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.dashboard-widget-library-item:hover {
|
||||
background: var(--hover-tint-soft);
|
||||
}
|
||||
|
||||
.dashboard-widget-library-item:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.dashboard-widget-library-item.is-disabled {
|
||||
cursor: default;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.dashboard-widget-library-item > div {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.dashboard-widget-library-item strong,
|
||||
.dashboard-widget-library-item span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dashboard-widget-library-item span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dashboard-widget-library-empty {
|
||||
flex: 1 0 auto;
|
||||
margin: 0;
|
||||
padding: 18px 16px;
|
||||
}
|
||||
|
||||
.dashboard-widget-grid.is-configuring .dashboard-widget {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.dashboard-widget-grid.is-configuring .card-header {
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: 6px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.dashboard-widget-grid.is-configuring .card-header > h2 {
|
||||
order: 2;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dashboard-widget-grid.is-configuring .card-actions {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.dashboard-widget-actions {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.dashboard-widget-actions > * {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.dashboard-widget-drag-handle {
|
||||
order: 1;
|
||||
flex: 0 0 auto;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.dashboard-widget-drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.dashboard-widget-drop-placeholder {
|
||||
min-height: 142px;
|
||||
border: 2px dashed var(--accent);
|
||||
border-radius: var(--radius);
|
||||
background: var(--accent-hover-bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.dashboard-widget-drop-placeholder.preserves-widget-height {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dashboard-widget-placeholder-content {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.dashboard-widget-placeholder-surface {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 142px;
|
||||
padding: 16px;
|
||||
border: 2px dashed var(--accent);
|
||||
border-radius: var(--radius);
|
||||
background: var(--accent-hover-bg);
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dashboard-grid-end-drop-target,
|
||||
.dashboard-empty-state.is-drop-target {
|
||||
display: grid;
|
||||
min-height: 74px;
|
||||
place-items: center;
|
||||
border: 2px dashed var(--line-dark);
|
||||
border-radius: var(--radius);
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dashboard-grid-end-drop-target {
|
||||
grid-column: 1 / -1;
|
||||
grid-row-end: span 19;
|
||||
}
|
||||
|
||||
.dashboard-grid-end-drop-target:hover,
|
||||
.dashboard-empty-state.is-drop-target:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-hover-bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.dashboard-empty-state {
|
||||
min-height: 220px;
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dashboard-empty-state h2 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.dashboard-empty-state p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dashboard-widget-config-dialog {
|
||||
width: min(620px, 100%);
|
||||
}
|
||||
|
||||
.dashboard-widget-config-dialog .dialog-body {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.dashboard-widget-config-dialog .dialog-footer-spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.dashboard-widget-overflow {
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.dashboard-widget-grid {
|
||||
grid-template-columns: repeat(2, minmax(220px, 1fr));
|
||||
}
|
||||
|
||||
.dashboard-widget-library {
|
||||
grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@@ -53,6 +329,29 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dashboard-widget-library {
|
||||
grid-template-columns: minmax(0, 1fr) 36px;
|
||||
}
|
||||
|
||||
.dashboard-widget-library-controls {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.dashboard-widget-library-list {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
min-height: 70px;
|
||||
border-top: var(--border-line);
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.dashboard-widget-library-item {
|
||||
flex-basis: min(250px, 72vw);
|
||||
}
|
||||
|
||||
.dashboard-widget-small,
|
||||
.dashboard-widget-medium,
|
||||
.dashboard-widget-wide,
|
||||
|
||||
170
webui/tests/dashboard-layout.test.ts
Normal file
170
webui/tests/dashboard-layout.test.ts
Normal file
@@ -0,0 +1,170 @@
|
||||
import assert from "node:assert/strict";
|
||||
import {
|
||||
appendPlacement,
|
||||
dashboardMasonryRowSpan,
|
||||
defaultDashboardLayout,
|
||||
layoutUpdatePayload,
|
||||
reconcileDashboardLayout,
|
||||
removePlacement,
|
||||
reorderPlacement
|
||||
} from "../src/features/dashboard/dashboardLayout.ts";
|
||||
import { dashboardGridPreview } from "../src/features/dashboard/dashboardEditorTypes.ts";
|
||||
|
||||
const widgets = [
|
||||
{
|
||||
id: "one",
|
||||
surfaceId: "one.widget",
|
||||
title: "One",
|
||||
moduleId: "one",
|
||||
defaultSize: "small" as const,
|
||||
supportedSizes: ["small", "medium"] as const,
|
||||
defaultConfiguration: { count: 3 },
|
||||
render: () => null
|
||||
},
|
||||
{
|
||||
id: "two",
|
||||
surfaceId: "two.widget",
|
||||
title: "Two",
|
||||
moduleId: "two",
|
||||
defaultVisible: false,
|
||||
defaultSize: "medium" as const,
|
||||
render: () => null
|
||||
}
|
||||
];
|
||||
|
||||
const defaults = defaultDashboardLayout(widgets);
|
||||
assert.deepEqual(defaults.knownWidgetIds, ["one", "two"]);
|
||||
assert.equal(defaults.placements.length, 1);
|
||||
assert.equal(defaults.placements[0].widgetId, "one");
|
||||
assert.deepEqual(defaults.placements[0].configuration, { count: 3 });
|
||||
|
||||
const withTwo = appendPlacement(defaults, widgets[1]);
|
||||
assert.deepEqual(
|
||||
withTwo.placements.map((placement) => placement.widgetId),
|
||||
["one", "two"]
|
||||
);
|
||||
assert.equal(
|
||||
appendPlacement(withTwo, widgets[1]).placements.length,
|
||||
2,
|
||||
"single-instance widgets must not be duplicated"
|
||||
);
|
||||
|
||||
const reordered = reorderPlacement(
|
||||
withTwo,
|
||||
withTwo.placements[1].instanceId,
|
||||
withTwo.placements[0].instanceId,
|
||||
"before"
|
||||
);
|
||||
assert.deepEqual(
|
||||
reordered.placements.map((placement) => placement.widgetId),
|
||||
["two", "one"]
|
||||
);
|
||||
|
||||
const removed = removePlacement(reordered, reordered.placements[0].instanceId);
|
||||
assert.deepEqual(
|
||||
removed.placements.map((placement) => placement.widgetId),
|
||||
["one"]
|
||||
);
|
||||
|
||||
const placementPreview = dashboardGridPreview(
|
||||
withTwo.placements,
|
||||
{
|
||||
kind: "placement",
|
||||
instanceId: withTwo.placements[0].instanceId
|
||||
},
|
||||
{
|
||||
kind: "placement",
|
||||
instanceId: withTwo.placements[1].instanceId,
|
||||
edge: "after"
|
||||
}
|
||||
);
|
||||
assert.deepEqual(
|
||||
placementPreview.map((item) =>
|
||||
item.kind === "placement"
|
||||
? `${item.placement.widgetId}:${item.placeholder}`
|
||||
: item.widgetId
|
||||
),
|
||||
["two:false", "one:true"],
|
||||
"placement previews must show the prospective order"
|
||||
);
|
||||
|
||||
const cataloguePreview = dashboardGridPreview(
|
||||
withTwo.placements,
|
||||
{ kind: "catalogue", widgetId: "three" },
|
||||
{
|
||||
kind: "placement",
|
||||
instanceId: withTwo.placements[0].instanceId,
|
||||
edge: "after"
|
||||
},
|
||||
"wide"
|
||||
);
|
||||
assert.deepEqual(
|
||||
cataloguePreview.map((item) =>
|
||||
item.kind === "placement"
|
||||
? item.placement.widgetId
|
||||
: `${item.widgetId}:${item.size}`
|
||||
),
|
||||
["one", "three:wide", "two"],
|
||||
"catalogue previews must reserve the prospective widget size"
|
||||
);
|
||||
|
||||
const unavailablePlacement = {
|
||||
instanceId: "unavailable-instance",
|
||||
widgetId: "temporarily-disabled",
|
||||
size: "wide" as const,
|
||||
configuration: { mode: "summary" }
|
||||
};
|
||||
const reconciled = reconcileDashboardLayout(
|
||||
{
|
||||
layoutVersion: 1,
|
||||
revision: 4,
|
||||
knownWidgetIds: ["temporarily-disabled"],
|
||||
placements: [unavailablePlacement]
|
||||
},
|
||||
widgets
|
||||
);
|
||||
assert.equal(
|
||||
reconciled.placements[0],
|
||||
unavailablePlacement,
|
||||
"temporarily unavailable contributions must retain their placement"
|
||||
);
|
||||
assert.equal(
|
||||
reconciled.placements[1].widgetId,
|
||||
"one",
|
||||
"new default-visible widgets are announced into existing layouts"
|
||||
);
|
||||
assert.equal(reconciled.revision, 4);
|
||||
|
||||
const payload = layoutUpdatePayload(reconciled);
|
||||
assert.equal(payload.expected_revision, 4);
|
||||
assert.equal(payload.placements[0].instance_id, "unavailable-instance");
|
||||
assert.equal(payload.placements[0].configuration.mode, "summary");
|
||||
|
||||
const repeatingWidget = {
|
||||
...widgets[0],
|
||||
id: "repeating",
|
||||
allowMultiple: true,
|
||||
defaultVisible: false
|
||||
};
|
||||
let bounded = defaultDashboardLayout([repeatingWidget]);
|
||||
for (let index = 0; index < 105; index += 1) {
|
||||
bounded = appendPlacement(bounded, repeatingWidget);
|
||||
}
|
||||
assert.equal(
|
||||
bounded.placements.length,
|
||||
100,
|
||||
"client layout helpers must enforce the server placement limit"
|
||||
);
|
||||
|
||||
assert.equal(
|
||||
dashboardMasonryRowSpan(142, 4, 18),
|
||||
40,
|
||||
"masonry spans must reserve the widget height and inter-widget gap"
|
||||
);
|
||||
assert.equal(
|
||||
dashboardMasonryRowSpan(0, Number.NaN, Number.NaN),
|
||||
1,
|
||||
"masonry spans must remain valid while a widget is mounting"
|
||||
);
|
||||
|
||||
console.log("Dashboard layout tests passed.");
|
||||
Reference in New Issue
Block a user