@openmrs/esm-report-builder 0.1.1-pre.87

package/src/components/dashboards/dashboards-page.component.tsx

@@ -0,0 +1,153 @@
+/**
+ * Dashboards Admin Page
+ * Thin CRUD page over ReportBuilderDashboard — list, create, edit, retire.
+ * Decomposition follows the data-themes admin pattern: thin page + table +
+ * form modal (with section sub-forms) + config validation helpers.
+ */
+
+import React from 'react';
+import { Button, InlineNotification, Search, Stack } from '@carbon/react';
+import { Add } from '@carbon/icons-react';
+import Header from '../shared/header/header.component';
+import DashboardsTable from './dashboards-table.component';
+import DashboardFormModal from './dashboard-form-modal.component';
+import {
+    createDashboard,
+    deleteDashboard,
+    getDashboard,
+    listDashboards,
+    updateDashboard,
+} from '../../resources/dashboard/dashboard.api';
+import type { DashboardDto } from '../../types/dashboard/dashboard.types';
+import { RB } from '../../constants/privileges';
+import { useReportBuilderPrivileges } from '../../hooks/use-report-builder-privileges';
+
+export default function DashboardsPage() {
+    const { has: hasPrivilege } = useReportBuilderPrivileges();
+    const canEditDashboard = hasPrivilege(RB.DASHBOARD_ADD, RB.DASHBOARD_EDIT);
+    const canDeleteDashboard = hasPrivilege(RB.DASHBOARD_PURGE);
+    const [q, setQ] = React.useState('');
+    const [rows, setRows] = React.useState<DashboardDto[]>([]);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+
+    const [open, setOpen] = React.useState(false);
+    const [mode, setMode] = React.useState<'create' | 'edit'>('create');
+    const [editing, setEditing] = React.useState<DashboardDto | null>(null);
+
+    const load = React.useCallback(
+        (signal?: AbortSignal) => {
+            setLoading(true);
+            setError(null);
+
+            return listDashboards({ q, v: 'default' }, signal)
+                .then((data) => setRows((data ?? []).filter((d) => Boolean(d.uuid))))
+                .catch((e: any) => {
+                    if (e?.name !== 'AbortError') setError(e?.message ?? 'Failed to load dashboards');
+                })
+                .finally(() => setLoading(false));
+        },
+        [q],
+    );
+
+    React.useEffect(() => {
+        const ac = new AbortController();
+        load(ac.signal);
+        return () => ac.abort();
+    }, [load]);
+
+    const onCreate = () => {
+        setMode('create');
+        setEditing(null);
+        setOpen(true);
+    };
+
+    const onEdit = async (uuid: string) => {
+        try {
+            setMode('edit');
+            setError(null);
+            setLoading(true);
+            // Fetch the full record (v=full) so the modal can edit configJson
+            const full = await getDashboard(uuid);
+            setEditing(full);
+            setOpen(true);
+        } catch (e: any) {
+            setError(e?.message ?? 'Failed to load dashboard for editing');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const onDelete = async (uuid: string) => {
+        const dashboard = rows.find((r) => r.uuid === uuid);
+        const yes = window.confirm(`Retire dashboard "${dashboard?.name ?? uuid}"?`);
+        if (!yes) return;
+        try {
+            await deleteDashboard(uuid, false);
+        } catch (e: any) {
+            setError(e?.message ?? 'Failed to retire dashboard');
+        }
+        const ac = new AbortController();
+        await load(ac.signal);
+    };
+
+    const onSave = async (payload: Omit<DashboardDto, 'uuid' | 'retired' | 'dateCreated' | 'dateChanged'>) => {
+        if (mode === 'create') {
+            await createDashboard(payload);
+        } else {
+            if (!editing?.uuid) throw new Error('Missing uuid for update');
+            await updateDashboard(editing.uuid, payload);
+        }
+
+        setOpen(false);
+        const ac = new AbortController();
+        await load(ac.signal);
+    };
+
+    return (
+        <Stack gap={5}>
+            <Header
+                title="Dashboards"
+                subtitle="Configure dashboards composed of sections and widgets (ETL monitors, reports)."
+            />
+
+            {canEditDashboard && (
+                <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '0 1rem' }}>
+                    <Button size="sm" kind="primary" renderIcon={Add} onClick={onCreate}>
+                        Create Dashboard
+                    </Button>
+                </div>
+            )}
+
+            <div style={{ padding: '0 1rem', display: 'grid', gap: '1rem' }}>
+                <Search
+                    size="lg"
+                    labelText="Search"
+                    placeholder="Search dashboards…"
+                    value={q}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQ(e.target.value)}
+                />
+
+                {error && (
+                    <InlineNotification
+                        lowContrast
+                        kind="error"
+                        title="Error"
+                        subtitle={error}
+                        onCloseButtonClick={() => setError(null)}
+                    />
+                )}
+
+                <DashboardsTable rows={rows} loading={loading} onEdit={onEdit} onDelete={onDelete} canEdit={canEditDashboard} canDelete={canDeleteDashboard} />
+            </div>
+
+            <DashboardFormModal
+                open={open}
+                mode={mode}
+                initial={editing}
+                onClose={() => setOpen(false)}
+                onSave={onSave}
+            />
+        </Stack>
+    );
+}

package/src/components/dashboards/dashboards-table.component.tsx

@@ -0,0 +1,130 @@
+/**
+ * Dashboards Admin Table
+ */
+
+import React from 'react';
+import {
+    Button,
+    DataTable,
+    DataTableSkeleton,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Tag,
+} from '@carbon/react';
+import { Edit, TrashCan } from '@carbon/icons-react';
+import type { DashboardDto } from '../../types/dashboard/dashboard.types';
+import styles from './dashboards-admin.scss';
+
+const headers = [
+    { key: 'name', header: 'Name' },
+    { key: 'code', header: 'Code' },
+    { key: 'dashboardType', header: 'Type' },
+    { key: 'active', header: 'Status' },
+    { key: 'sortOrder', header: 'Order' },
+    { key: 'description', header: 'Description' },
+    { key: 'actions', header: 'Actions' },
+];
+
+interface DashboardsTableProps {
+    rows: DashboardDto[];
+    loading?: boolean;
+    onEdit: (uuid: string) => void;
+    onDelete: (uuid: string) => void;
+    /** Row actions the signed-in user may see (privilege gating). */
+    canEdit?: boolean;
+    canDelete?: boolean;
+}
+
+export default function DashboardsTable({ rows, loading, onEdit, onDelete, canEdit = true, canDelete = true }: DashboardsTableProps) {
+    if (loading && rows.length === 0) {
+        return <DataTableSkeleton rowCount={4} columnCount={7} showHeader={false} showToolbar={false} />;
+    }
+
+    const tableRows = rows.map((row) => ({
+        id: row.uuid,
+        name: row.name,
+        code: row.code || '—',
+        dashboardType: row.dashboardType || 'CUSTOM',
+        active: row.active === false || row.retired ? 'Inactive' : 'Active',
+        sortOrder: row.sortOrder ?? 0,
+        description: row.description || '—',
+    }));
+
+    return (
+        <DataTable rows={tableRows} headers={headers}>
+            {({ rows: dtRows, headers: dtHeaders, getHeaderProps, getRowProps }) => (
+                <TableContainer>
+                    <Table useZebraStyles>
+                        <TableHead>
+                            <TableRow>
+                                {dtHeaders.map((header) => (
+                                    <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                                        {header.header}
+                                    </TableHeader>
+                                ))}
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {dtRows.map((row) => {
+                                const original = rows.find((d) => d.uuid === row.id);
+                                return (
+                                    <TableRow key={row.id} {...getRowProps({ row })}>
+                                        <TableCell>{row.cells[0].value}</TableCell>
+                                        <TableCell>{row.cells[1].value}</TableCell>
+                                        <TableCell>
+                                            <Tag size="sm" type="purple">
+                                                {row.cells[2].value}
+                                            </Tag>
+                                        </TableCell>
+                                        <TableCell>
+                                            {original?.active === false || original?.retired ? (
+                                                <Tag size="sm" type="gray">
+                                                    Inactive
+                                                </Tag>
+                                            ) : (
+                                                <Tag size="sm" type="green">
+                                                    Active
+                                                </Tag>
+                                            )}
+                                        </TableCell>
+                                        <TableCell>{row.cells[4].value}</TableCell>
+                                        <TableCell>{row.cells[5].value}</TableCell>
+                                        <TableCell>
+                                            <div className={styles['dashboards-table__actions']}>
+                                                {canEdit && (
+                                                    <Button
+                                                        kind="ghost"
+                                                        size="sm"
+                                                        renderIcon={Edit}
+                                                        iconDescription="Edit"
+                                                        hasIconOnly
+                                                        onClick={() => original && onEdit(original.uuid)}
+                                                    />
+                                                )}
+                                                {canDelete && (
+                                                    <Button
+                                                        kind="ghost"
+                                                        size="sm"
+                                                        renderIcon={TrashCan}
+                                                        iconDescription="Retire"
+                                                        hasIconOnly
+                                                        onClick={() => original && onDelete(original.uuid)}
+                                                    />
+                                                )}
+                                            </div>
+                                        </TableCell>
+                                    </TableRow>
+                                );
+                            })}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+            )}
+        </DataTable>
+    );
+}

package/src/components/dashboards/sections/dashboard-autoinclude.section.tsx

@@ -0,0 +1,75 @@
+/**
+ * Dashboard Auto-Include Section
+ * Fill sections with the remaining active ETL monitors, arranged by each
+ * monitor's own saved layout metadata (explicit placements always win).
+ */
+
+import React from 'react';
+import { Checkbox, Select, SelectItem, Stack, TextInput } from '@carbon/react';
+import type { DashboardConfigV1 } from '../../../types/dashboard/dashboard.types';
+import styles from '../dashboards-admin.scss';
+
+interface DashboardAutoIncludeSectionProps {
+    config: DashboardConfigV1;
+    onChange: (config: DashboardConfigV1) => void;
+}
+
+export default function DashboardAutoIncludeSection({ config, onChange }: DashboardAutoIncludeSectionProps) {
+    const autoInclude = config.autoInclude?.etlMonitors;
+    const sections = config.sections ?? [];
+
+    const patch = (updates: Partial<NonNullable<DashboardConfigV1['autoInclude']>['etlMonitors']>) => {
+        onChange({
+            ...config,
+            autoInclude: {
+                ...config.autoInclude,
+                etlMonitors: { enabled: false, arrangeBy: 'monitorLayout', ...config.autoInclude?.etlMonitors, ...updates },
+            },
+        });
+    };
+
+    return (
+        <fieldset>
+            <legend>Auto-include ETL monitors</legend>
+            <Stack gap={4}>
+                <span className={styles['dashboard-editor__hint']}>
+                    Active ETL monitors that are not explicitly placed above are added automatically, using each
+                    monitor's own section/span/priority from the monitor builder. Explicit placements always win.
+                </span>
+                <Checkbox
+                    id="dashboard-autoinclude-enabled"
+                    labelText="Auto-include active ETL monitors"
+                    checked={!!autoInclude?.enabled}
+                    onChange={(_, { checked }) => patch({ enabled: checked })}
+                />
+                <Stack orientation="horizontal" gap={5}>
+                    <Select
+                        id="dashboard-autoinclude-default-section"
+                        labelText="Default section"
+                        size="sm"
+                        disabled={!autoInclude?.enabled}
+                        value={autoInclude?.defaultSectionKey ?? sections[0]?.key ?? 'overview'}
+                        onChange={(e) => patch({ defaultSectionKey: e.target.value })}
+                    >
+                        {sections.map((section) => (
+                            <SelectItem key={section.key} value={section.key} text={section.label} />
+                        ))}
+                    </Select>
+                    <TextInput
+                        id="dashboard-autoinclude-default-span-lg"
+                        labelText="Default span (desktop)"
+                        size="sm"
+                        type="number"
+                        disabled={!autoInclude?.enabled}
+                        value={String(autoInclude?.defaultSpan?.lg ?? 8)}
+                        onChange={(e) =>
+                            patch({
+                                defaultSpan: { sm: 4, md: 8, lg: parseInt(e.target.value, 10) || 8 },
+                            })
+                        }
+                    />
+                </Stack>
+            </Stack>
+        </fieldset>
+    );
+}

package/src/components/dashboards/sections/dashboard-basics.section.tsx

@@ -0,0 +1,80 @@
+/**
+ * Dashboard Basics Section
+ * Name, code, description, type, active, sort order.
+ */
+
+import React from 'react';
+import { Checkbox, NumberInput, Select, SelectItem, Stack, TextArea, TextInput } from '@carbon/react';
+import type { DashboardType } from '../../../types/dashboard/dashboard.types';
+import type { DashboardFormState } from '../dashboard-form-modal.component';
+
+interface DashboardBasicsSectionProps {
+    form: DashboardFormState;
+    onChange: (updates: Partial<DashboardFormState>) => void;
+}
+
+const TYPE_OPTIONS: { value: DashboardType; label: string }[] = [
+    { value: 'ETL', label: 'ETL' },
+    { value: 'REPORT', label: 'Report' },
+    { value: 'CUSTOM', label: 'Custom' },
+];
+
+export default function DashboardBasicsSection({ form, onChange }: DashboardBasicsSectionProps) {
+    return (
+        <fieldset>
+            <legend>Basics</legend>
+            <Stack gap={4}>
+                <TextInput
+                    id="dashboard-name"
+                    labelText="Name"
+                    required
+                    placeholder="e.g., ETL Dashboard"
+                    value={form.name}
+                    onChange={(e) => onChange({ name: e.target.value })}
+                />
+                <TextInput
+                    id="dashboard-code"
+                    labelText="Code"
+                    placeholder="e.g., etl-dashboard"
+                    helperText="Lowercase letters, numbers, dashes. Used in the URL: /dashboards/:code"
+                    value={form.code}
+                    onChange={(e) => onChange({ code: e.target.value })}
+                />
+                <TextArea
+                    id="dashboard-description"
+                    labelText="Description"
+                    rows={2}
+                    value={form.description}
+                    onChange={(e) => onChange({ description: e.target.value })}
+                />
+                <Select
+                    id="dashboard-type"
+                    labelText="Dashboard type"
+                    value={form.dashboardType}
+                    onChange={(e) => onChange({ dashboardType: e.target.value as DashboardType })}
+                >
+                    {TYPE_OPTIONS.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value} text={opt.label} />
+                    ))}
+                </Select>
+                <Stack orientation="horizontal" gap={5}>
+                    <NumberInput
+                        id="dashboard-sort-order"
+                        label="Sort order"
+                        value={form.sortOrder}
+                        onChange={(event) => {
+                            const value = (event.target as HTMLInputElement | undefined)?.value;
+                            if (value !== undefined) onChange({ sortOrder: parseInt(value, 10) || 0 });
+                        }}
+                    />
+                    <Checkbox
+                        id="dashboard-active"
+                        labelText="Active"
+                        checked={form.active}
+                        onChange={(_, { checked }) => onChange({ active: checked })}
+                    />
+                </Stack>
+            </Stack>
+        </fieldset>
+    );
+}

package/src/components/dashboards/sections/dashboard-json.section.tsx

@@ -0,0 +1,79 @@
+/**
+ * Dashboard JSON Section
+ * Raw configJson editor: a draft textarea with Apply/Reset, validated by
+ * the shared config schema helpers before it replaces the structured form
+ * state.
+ */
+
+import React from 'react';
+import { Button, Stack, TextArea } from '@carbon/react';
+import type { DashboardConfigV1 } from '../../../types/dashboard/dashboard.types';
+import { parseDashboardConfigJson } from '../dashboard-config.schema';
+import styles from '../dashboards-admin.scss';
+
+interface DashboardJsonSectionProps {
+    config: DashboardConfigV1;
+    onChange: (config: DashboardConfigV1) => void;
+    onErrors: (errors: string[]) => void;
+}
+
+export default function DashboardJsonSection({ config, onChange, onErrors }: DashboardJsonSectionProps) {
+    const [draft, setDraft] = React.useState(() => JSON.stringify(config, null, 2));
+    const [dirty, setDirty] = React.useState(false);
+    const [localErrors, setLocalErrors] = React.useState<string[]>([]);
+
+    const apply = () => {
+        const parsed = parseDashboardConfigJson(draft);
+        setLocalErrors(parsed.errors);
+        onErrors(parsed.errors);
+        if (parsed.errors.length === 0 && parsed.config) {
+            onChange(parsed.config);
+            setDraft(JSON.stringify(parsed.config, null, 2));
+            setDirty(false);
+        }
+    };
+
+    const reset = () => {
+        setDraft(JSON.stringify(config, null, 2));
+        setLocalErrors([]);
+        setDirty(false);
+    };
+
+    return (
+        <fieldset>
+            <legend>Configuration JSON</legend>
+            <Stack gap={3}>
+                <span className={styles['dashboard-editor__hint']}>
+                    Advanced: edit the raw dashboard configuration. Apply validates and syncs the editors above.
+                </span>
+                <TextArea
+                    id="dashboard-json-draft"
+                    labelText="configJson"
+                    hideLabel
+                    rows={12}
+                    className={styles['dashboard-json-editor__draft']}
+                    value={dirty ? draft : JSON.stringify(config, null, 2)}
+                    onChange={(e) => {
+                        setDraft(e.target.value);
+                        setDirty(true);
+                    }}
+                />
+                {localErrors.length > 0 && (
+                    <ul className={styles['dashboard-form-modal__errors']}>
+                        {localErrors.map((error, i) => (
+                            <li key={i}>{error}</li>
+                        ))}
+                    </ul>
+                )}
+                <div className={styles['dashboard-editor__row-actions']}>
+                    <Button kind="ghost" size="sm" onClick={reset} disabled={!dirty}>
+                        Reset
+                    </Button>
+                    <Button kind="primary" size="sm" onClick={apply} disabled={!dirty}>
+                        Apply
+                    </Button>
+                </div>
+            </Stack>
+        </fieldset>
+    );
+}

package/src/components/dashboards/sections/dashboard-sections-editor.section.tsx

@@ -0,0 +1,130 @@
+/**
+ * Dashboard Sections Editor
+ * Add / edit / remove / reorder the dashboard's sections.
+ */
+
+import React from 'react';
+import { Button, Checkbox, Stack, TextInput } from '@carbon/react';
+import { ArrowDown, ArrowUp, Add, TrashCan as DeleteIcon } from '@carbon/icons-react';
+import type { DashboardConfigV1, DashboardSectionConfig } from '../../../types/dashboard/dashboard.types';
+import { validateSectionKey } from '../dashboard-config.schema';
+import styles from '../dashboards-admin.scss';
+
+interface DashboardSectionsEditorSectionProps {
+    config: DashboardConfigV1;
+    onChange: (config: DashboardConfigV1) => void;
+}
+
+export default function DashboardSectionsEditorSection({ config, onChange }: DashboardSectionsEditorSectionProps) {
+    const sections = config.sections ?? [];
+
+    const update = (next: DashboardSectionConfig[]) => onChange({ ...config, sections: next });
+
+    const addSection = () => {
+        update([
+            ...sections,
+            { key: `section-${sections.length + 1}`, label: `Section ${sections.length + 1}`, order: (sections.length + 1) * 10 },
+        ]);
+    };
+
+    const patchSection = (index: number, updates: Partial<DashboardSectionConfig>) => {
+        update(sections.map((s, i) => (i === index ? { ...s, ...updates } : s)));
+    };
+
+    const move = (index: number, direction: -1 | 1) => {
+        const target = index + direction;
+        if (target < 0 || target >= sections.length) return;
+        const next = [...sections];
+        [next[index], next[target]] = [next[target], next[index]];
+        update(next);
+    };
+
+    return (
+        <fieldset>
+            <legend>Sections</legend>
+            <Stack gap={3}>
+                <span className={styles['dashboard-editor__hint']}>
+                    Widgets are placed into sections. Empty sections are hidden unless "always show" is set.
+                </span>
+                {sections.map((section, index) => {
+                    const keyError = validateSectionKey(section.key);
+                    return (
+                        <div key={index} className={styles['dashboard-sections-editor__row']}>
+                            <div className={styles['dashboard-sections-editor__row-fields']}>
+                                <TextInput
+                                    id={`section-key-${index}`}
+                                    labelText="Key"
+                                    size="sm"
+                                    invalid={!!keyError}
+                                    invalidText={keyError ?? undefined}
+                                    value={section.key}
+                                    onChange={(e) => patchSection(index, { key: e.target.value })}
+                                />
+                                <TextInput
+                                    id={`section-label-${index}`}
+                                    labelText="Label"
+                                    size="sm"
+                                    value={section.label}
+                                    onChange={(e) => patchSection(index, { label: e.target.value })}
+                                />
+                                <TextInput
+                                    id={`section-order-${index}`}
+                                    labelText="Order"
+                                    size="sm"
+                                    type="number"
+                                    value={String(section.order ?? (index + 1) * 10)}
+                                    onChange={(e) => patchSection(index, { order: parseInt(e.target.value, 10) || 0 })}
+                                />
+                                <Checkbox
+                                    id={`section-collapsed-${index}`}
+                                    labelText="Collapsed"
+                                    checked={!!section.collapsed}
+                                    onChange={(_, { checked }) => patchSection(index, { collapsed: checked })}
+                                />
+                                <Checkbox
+                                    id={`section-always-${index}`}
+                                    labelText="Always show"
+                                    checked={!!section.alwaysShow}
+                                    onChange={(_, { checked }) => patchSection(index, { alwaysShow: checked })}
+                                />
+                            </div>
+                            <div className={styles['dashboard-editor__row-actions']}>
+                                <Button
+                                    kind="ghost"
+                                    size="sm"
+                                    hasIconOnly
+                                    renderIcon={ArrowUp}
+                                    iconDescription="Move up"
+                                    disabled={index === 0}
+                                    onClick={() => move(index, -1)}
+                                />
+                                <Button
+                                    kind="ghost"
+                                    size="sm"
+                                    hasIconOnly
+                                    renderIcon={ArrowDown}
+                                    iconDescription="Move down"
+                                    disabled={index === sections.length - 1}
+                                    onClick={() => move(index, 1)}
+                                />
+                                <Button
+                                    kind="ghost"
+                                    size="sm"
+                                    hasIconOnly
+                                    renderIcon={DeleteIcon}
+                                    iconDescription="Remove section"
+                                    onClick={() => update(sections.filter((_, i) => i !== index))}
+                                />
+                            </div>
+                        </div>
+                    );
+                })}
+                <div>
+                    <Button kind="ghost" size="sm" renderIcon={Add} onClick={addSection}>
+                        Add Section
+                    </Button>
+                </div>
+            </Stack>
+        </fieldset>
+    );
+}