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

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

@@ -0,0 +1,184 @@
+/**
+ * Dashboard Widgets Editor
+ * Explicitly placed widgets: type, ref picker (ETL monitors / reports),
+ * section assignment, span, order, title/footer overrides.
+ */
+
+import React from 'react';
+import { Button, Select, SelectItem, Stack, TextInput } from '@carbon/react';
+import { Add, TrashCan as DeleteIcon } from '@carbon/icons-react';
+import { listETLMonitors } from '../../../resources/etl-monitor/etl-monitor.api';
+import { listReports } from '../../../resources/report/reports.api';
+import type { ReportDto } from '../../../resources/report/reports.api';
+import type { ETLMonitorDto } from '../../../types/etl-monitor/etl-monitor.types';
+import type { DashboardConfigV1, DashboardWidgetConfig, DashboardWidgetType } from '../../../types/dashboard/dashboard.types';
+import styles from '../dashboards-admin.scss';
+
+interface DashboardWidgetsEditorSectionProps {
+    config: DashboardConfigV1;
+    onChange: (config: DashboardConfigV1) => void;
+}
+
+const WIDGET_TYPE_OPTIONS: { value: DashboardWidgetType; label: string }[] = [
+    { value: 'ETL_MONITOR', label: 'ETL Monitor' },
+    { value: 'REPORT', label: 'Report' },
+];
+
+export default function DashboardWidgetsEditorSection({ config, onChange }: DashboardWidgetsEditorSectionProps) {
+    const [monitors, setMonitors] = React.useState<ETLMonitorDto[]>([]);
+    const [reports, setReports] = React.useState<ReportDto[]>([]);
+
+    const sections = config.sections ?? [];
+    const widgets = config.widgets ?? [];
+
+    React.useEffect(() => {
+        const ac = new AbortController();
+        listETLMonitors(undefined, ac.signal).then((data) => setMonitors(data ?? [])).catch(() => setMonitors([]));
+        listReports({ v: 'default' }, ac.signal).then((data) => setReports(data ?? [])).catch(() => setReports([]));
+        return () => ac.abort();
+    }, []);
+
+    const update = (next: DashboardWidgetConfig[]) => onChange({ ...config, widgets: next });
+
+    const addWidget = () => {
+        update([
+            ...widgets,
+            {
+                widgetType: 'ETL_MONITOR',
+                refUuid: monitors[0]?.uuid,
+                sectionKey: sections[0]?.key ?? 'overview',
+                order: (widgets.length + 1) * 100,
+            },
+        ]);
+    };
+
+    const patchWidget = (index: number, updates: Partial<DashboardWidgetConfig>) => {
+        update(widgets.map((w, i) => (i === index ? { ...w, ...updates } : w)));
+    };
+
+    const refOptions = (widget: DashboardWidgetConfig) => {
+        if (widget.widgetType === 'REPORT') {
+            return reports.map((r) => ({ value: r.uuid, label: r.code ? `${r.name} (${r.code})` : r.name }));
+        }
+        return monitors.map((m) => ({ value: m.uuid!, label: m.code ? `${m.name} (${m.code})` : m.name }));
+    };
+
+    return (
+        <fieldset>
+            <legend>Widgets</legend>
+            <Stack gap={3}>
+                <span className={styles['dashboard-editor__hint']}>
+                    Explicitly placed widgets. Use auto-include below to fill sections with the remaining active ETL monitors.
+                </span>
+                {widgets.map((widget, index) => (
+                    <div key={index} className={styles['dashboard-widgets-editor__row']}>
+                        <div className={styles['dashboard-widgets-editor__row-fields']}>
+                            <Select
+                                id={`widget-type-${index}`}
+                                labelText="Type"
+                                size="sm"
+                                value={widget.widgetType}
+                                onChange={(e) => {
+                                    const widgetType = e.target.value as DashboardWidgetType;
+                                    patchWidget(index, {
+                                        widgetType,
+                                        refUuid: widgetType === 'REPORT' ? reports[0]?.uuid : monitors[0]?.uuid,
+                                        refCode: undefined,
+                                    });
+                                }}
+                            >
+                                {WIDGET_TYPE_OPTIONS.map((opt) => (
+                                    <SelectItem key={opt.value} value={opt.value} text={opt.label} />
+                                ))}
+                            </Select>
+                            <Select
+                                id={`widget-ref-${index}`}
+                                labelText={widget.widgetType === 'REPORT' ? 'Report' : 'ETL monitor'}
+                                size="sm"
+                                value={widget.refUuid ?? ''}
+                                onChange={(e) => patchWidget(index, { refUuid: e.target.value, refCode: undefined })}
+                            >
+                                {refOptions(widget).map((opt) => (
+                                    <SelectItem key={opt.value} value={opt.value} text={opt.label} />
+                                ))}
+                            </Select>
+                            <Select
+                                id={`widget-section-${index}`}
+                                labelText="Section"
+                                size="sm"
+                                value={widget.sectionKey}
+                                onChange={(e) => patchWidget(index, { sectionKey: e.target.value })}
+                            >
+                                {sections.map((section) => (
+                                    <SelectItem key={section.key} value={section.key} text={section.label} />
+                                ))}
+                            </Select>
+                            <TextInput
+                                id={`widget-order-${index}`}
+                                labelText="Order"
+                                size="sm"
+                                type="number"
+                                value={String(widget.order ?? (index + 1) * 100)}
+                                onChange={(e) => patchWidget(index, { order: parseInt(e.target.value, 10) || 0 })}
+                            />
+                        </div>
+                        <div className={styles['dashboard-widgets-editor__span']}>
+                            {(['sm', 'md', 'lg'] as const).map((breakpoint) => (
+                                <TextInput
+                                    key={breakpoint}
+                                    id={`widget-span-${breakpoint}-${index}`}
+                                    labelText={`Span ${breakpoint}`}
+                                    size="sm"
+                                    type="number"
+                                    value={String(widget.span?.[breakpoint] ?? { sm: 4, md: 8, lg: 8 }[breakpoint])}
+                                    onChange={(e) =>
+                                        patchWidget(index, {
+                                            span: {
+                                                sm: 4,
+                                                md: 8,
+                                                lg: 8,
+                                                ...widget.span,
+                                                [breakpoint]: parseInt(e.target.value, 10) || 0,
+                                            },
+                                        })
+                                    }
+                                />
+                            ))}
+                        </div>
+                        <div className={styles['dashboard-widgets-editor__row-fields']}>
+                            <TextInput
+                                id={`widget-title-${index}`}
+                                labelText="Title override"
+                                size="sm"
+                                value={widget.titleOverride ?? ''}
+                                onChange={(e) => patchWidget(index, { titleOverride: e.target.value || undefined })}
+                            />
+                            <TextInput
+                                id={`widget-footer-${index}`}
+                                labelText="Footer label"
+                                size="sm"
+                                value={widget.footerLabel ?? ''}
+                                onChange={(e) => patchWidget(index, { footerLabel: e.target.value || undefined })}
+                            />
+                        </div>
+                        <div className={styles['dashboard-editor__row-actions']}>
+                            <Button
+                                kind="ghost"
+                                size="sm"
+                                hasIconOnly
+                                renderIcon={DeleteIcon}
+                                iconDescription="Remove widget"
+                                onClick={() => update(widgets.filter((_, i) => i !== index))}
+                            />
+                        </div>
+                    </div>
+                ))}
+                <div>
+                    <Button kind="ghost" size="sm" renderIcon={Add} onClick={addWidget}>
+                        Add Widget
+                    </Button>
+                </div>
+            </Stack>
+        </fieldset>
+    );
+}

package/src/components/data-themes/data-theme-form.component.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { TextInput, TextArea, Select, SelectItem, Stack } from '@carbon/react';
+import type { DataTheme, MainDataDomain } from '../../types/theme/data-theme.types';
+
+type Props = {
+    value: DataTheme;
+    onChange: (next: DataTheme) => void;
+};
+
+const DOMAIN_OPTIONS: Array<{ value: MainDataDomain; label: string }> = [
+    { value: 'OBSERVATIONS', label: 'Observations' },
+    { value: 'TEST_ORDERS', label: 'Test Orders' },
+    { value: 'MEDICATION_ORDERS', label: 'Medication Orders' },
+    { value: 'APPOINTMENTS', label: 'Appointments' },
+    { value: 'MEDICATION_DISPENSE', label: 'Medication Dispense' },
+];
+
+export default function DataThemeForm({ value, onChange }: Props) {
+    return (
+        <Stack gap={4}>
+            <TextInput
+                id="theme-name"
+                labelText="Theme Name"
+                value={value.name}
+                onChange={(e) => onChange({ ...value, name: (e.target as HTMLInputElement).value })}
+            />
+
+            <TextInput
+                id="theme-code"
+                labelText="Code"
+                value={value.code}
+                onChange={(e) => onChange({ ...value, code: (e.target as HTMLInputElement).value })}
+            />
+
+            <TextArea
+                id="theme-description"
+                labelText="Description"
+                value={value.description || ''}
+                onChange={(e) => onChange({ ...value, description: (e.target as HTMLTextAreaElement).value })}
+            />
+
+            <Select
+                id="theme-domain"
+                labelText="Main Data Domain"
+                value={value.domain}
+                onChange={(e) =>
+                    onChange({
+                        ...value,
+                        domain: (e.target as HTMLSelectElement).value as MainDataDomain,
+                    })
+                }
+            >
+                {DOMAIN_OPTIONS.map((x) => (
+                    <SelectItem key={x.value} value={x.value} text={x.label} />
+                ))}
+            </Select>
+        </Stack>
+    );
+}

package/src/components/data-themes/data-theme-modal.component.tsx

@@ -0,0 +1,349 @@
+import React from 'react';
+import { Modal, Stack, InlineLoading, SideNav, SideNavItems, SideNavLink, Content } from '@carbon/react';
+
+import DataThemeBasicsSection from './sections/data-theme-basics.section';
+import DataThemeSourceSection from './sections/data-theme-source.section';
+import DataThemeFieldsEditorSection from './sections/data-theme-fields-editor.section';
+import DataThemeConditionsSection from './sections/data-theme-condition-columns.section';
+import DataThemeMetadataSection, { type DataThemeMeta } from './sections/data-theme-metadata.section';
+import DataThemePreviewSection from './sections/data-theme-preview.section';
+
+import type { DataTheme, DataThemeConfig } from '../../types/theme/data-theme.types';
+import { getSchemaTables, type SchemaTable } from '../../resources/theme/etl-schema.api';
+import { getETLTableMeta, type TableColumn } from '../../resources/theme/etl-table-meta.api';
+
+type Props = {
+    open: boolean;
+    mode: 'create' | 'edit';
+    initial?: DataTheme | null;
+    onClose: () => void;
+    onSave: (payload: DataTheme) => void;
+};
+
+const defaultConfig: DataThemeConfig = {
+    sourceTable: '',
+    patientIdColumn: '',
+    dateColumn: '',
+    locationColumn: '',
+    fields: [],
+    conditions: [],
+};
+
+const defaultMeta: DataThemeMeta = {
+    icon: '',
+    color: '#0f62fe',
+    category: '',
+    order: 0,
+    beta: false,
+    descriptionShort: '',
+    allowedIndicatorKinds: ['BASE', 'FINAL'],
+};
+
+type PanelKey = 'basics' | 'source' | 'fields' | 'conditions' | 'metadata' | 'preview';
+
+function toCode(name: string) {
+    return (name ?? '')
+        .toUpperCase()
+        .replace(/[^A-Z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '')
+        .slice(0, 30);
+}
+
+function safeParseJson<T>(raw: string | undefined | null, fallback: T): T {
+    try {
+        if (!raw) return fallback;
+        const parsed = JSON.parse(raw);
+        return (parsed ?? fallback) as T;
+    } catch {
+        return fallback;
+    }
+}
+
+/**
+ * Supports either:
+ * 1) configJson string parses to { ...configFields }
+ * 2) configJson string parses to { configJson: { ...configFields } }
+ *
+ * Also migrates legacy `conditionColumns` -> `conditions[]` when present AND conditions[] missing/empty.
+ */
+function parseConfig(raw: string | undefined | null): DataThemeConfig {
+    const parsed = safeParseJson<any>(raw, defaultConfig);
+
+    const base =
+        parsed && typeof parsed === 'object' && parsed.configJson && typeof parsed.configJson === 'object'
+            ? parsed.configJson
+            : parsed;
+
+    const cfg: any = { ...defaultConfig, ...(base ?? {}) };
+
+    // normalize arrays defensively
+    if (!Array.isArray(cfg.fields)) cfg.fields = [];
+    if (!Array.isArray(cfg.conditions)) cfg.conditions = [];
+
+    // MIGRATION: old themes might have conditionColumns map
+    // Example: { "concept_id": "diagnosis_coded" }
+    // Only migrate if conditions[] is missing/empty (do NOT overwrite real conditions).
+    const hasLegacyMap = cfg.conditionColumns && typeof cfg.conditionColumns === 'object';
+    const hasNoConditions = !Array.isArray(cfg.conditions) || cfg.conditions.length === 0;
+
+    if (hasLegacyMap && hasNoConditions) {
+        const entries = Object.entries(cfg.conditionColumns as Record<string, string>);
+        cfg.conditions = entries.map(([key, column]) => {
+            const looksLikeConcept = key.toLowerCase().includes('concept');
+            return {
+                key,
+                label: key.replace(/_/g, ' '),
+                handler: looksLikeConcept ? 'CONCEPT_SEARCH' : 'TEXT',
+                column,
+                operator: looksLikeConcept ? 'IN' : 'EQUALS',
+                valueType: looksLikeConcept ? 'conceptId' : 'string',
+            };
+        });
+    }
+
+    // final guard
+    if (!Array.isArray(cfg.conditions)) cfg.conditions = [];
+    if (!Array.isArray(cfg.fields)) cfg.fields = [];
+
+    return cfg as DataThemeConfig;
+}
+
+/**
+ * Supports either:
+ * 1) metaJson = { "metaJson": { ...fields } }
+ * 2) metaJson = { ...fields }
+ */
+function parseMeta(raw: string | undefined | null): DataThemeMeta {
+    const parsed = safeParseJson<any>(raw, defaultMeta);
+    if (parsed && typeof parsed === 'object' && parsed.metaJson && typeof parsed.metaJson === 'object') {
+        return { ...defaultMeta, ...parsed.metaJson };
+    }
+    return { ...defaultMeta, ...parsed };
+}
+
+function wrapMeta(meta: DataThemeMeta) {
+    return JSON.stringify({ metaJson: meta }, null, 2);
+}
+
+export default function DataThemeModal({ open, mode, initial, onClose, onSave }: Props) {
+    const [active, setActive] = React.useState<PanelKey>('basics');
+
+    const [name, setName] = React.useState('');
+    const [code, setCode] = React.useState('');
+    const [domain, setDomain] = React.useState<DataTheme['domain']>('OBSERVATIONS');
+    const [description, setDescription] = React.useState('');
+
+    const [config, setConfig] = React.useState<DataThemeConfig>(defaultConfig);
+    const [configJson, setConfigJson] = React.useState<string>(JSON.stringify(defaultConfig, null, 2));
+
+    const [meta, setMeta] = React.useState<DataThemeMeta>(defaultMeta);
+    const [metaJson, setMetaJson] = React.useState<string>(wrapMeta(defaultMeta));
+
+    // schema tables
+    const [, setTables] = React.useState<SchemaTable[]>([]);
+    const [loadingTables, setLoadingTables] = React.useState(false);
+    const [tablesError, setTablesError] = React.useState<string | null>(null);
+
+    // table meta
+    const [columns, setColumns] = React.useState<TableColumn[]>([]);
+    const [loadingCols, setLoadingCols] = React.useState(false);
+    const [colsError, setColsError] = React.useState<string | null>(null);
+
+    // init when open (ensures edit pre-populates EVERYTHING)
+    React.useEffect(() => {
+        if (!open) return;
+
+        setActive('basics');
+
+        if (initial) {
+            setName(initial.name ?? '');
+            setCode(initial.code ?? '');
+            setDomain(initial.domain ?? 'OBSERVATIONS');
+            setDescription(initial.description ?? '');
+
+            const parsedConfig = parseConfig(initial.configJson);
+            setConfig(parsedConfig);
+            setConfigJson(JSON.stringify(parsedConfig, null, 2));
+
+            const parsedMeta = parseMeta((initial as any).metaJson);
+            setMeta(parsedMeta);
+            setMetaJson(wrapMeta(parsedMeta));
+        } else {
+            setName('');
+            setCode('');
+            setDomain('OBSERVATIONS');
+            setDescription('');
+
+            setConfig(defaultConfig);
+            setConfigJson(JSON.stringify(defaultConfig, null, 2));
+
+            setMeta(defaultMeta);
+            setMetaJson(wrapMeta(defaultMeta));
+        }
+    }, [open, initial]);
+
+    // load tables when modal opens
+    React.useEffect(() => {
+        if (!open) return;
+
+        const ac = new AbortController();
+        setLoadingTables(true);
+        setTablesError(null);
+        setTables([]);
+
+        getSchemaTables(ac.signal)
+            .then((data) => setTables(data ?? []))
+            .catch((e) => {
+                if (e?.name !== 'AbortError') setTablesError(e?.message ?? 'Failed to load schema tables');
+            })
+            .finally(() => setLoadingTables(false));
+
+        return () => ac.abort();
+    }, [open]);
+
+    // load columns when table changes
+    React.useEffect(() => {
+        if (!open) return;
+
+        const table = config?.sourceTable;
+        if (!table) {
+            setColumns([]);
+            setColsError(null);
+            setLoadingCols(false);
+            return;
+        }
+
+        const ac = new AbortController();
+        setLoadingCols(true);
+        setColsError(null);
+        setColumns([]);
+
+        getETLTableMeta(table, ac.signal)
+            .then((data) => setColumns(data ?? []))
+            .catch((e) => {
+                if (e?.name !== 'AbortError') setColsError(e?.message ?? 'Failed to load table columns');
+            })
+            .finally(() => setLoadingCols(false));
+
+        return () => ac.abort();
+    }, [open, config?.sourceTable]);
+
+    // keep configJson synced when user edits config
+    React.useEffect(() => {
+        setConfigJson(JSON.stringify(config ?? defaultConfig, null, 2));
+    }, [config]);
+
+    // keep metaJson synced when user edits meta
+    React.useEffect(() => {
+        setMetaJson(wrapMeta(meta ?? defaultMeta));
+    }, [meta]);
+
+    const schemaReady = open && !loadingTables && !tablesError;
+
+    const canSave =
+        schemaReady &&
+        Boolean(name.trim()) &&
+        Boolean((code.trim() || toCode(name)).trim()) &&
+        Boolean(domain) &&
+        Boolean(config?.sourceTable) &&
+        Boolean(config?.patientIdColumn) &&
+        Boolean(config?.dateColumn);
+
+    const save = () => {
+        if (!canSave) return;
+
+        const payload: DataTheme = {
+            ...(initial?.uuid ? { uuid: initial.uuid } : {}),
+            name: name.trim(),
+            code: (code.trim() || toCode(name)).trim(),
+            domain,
+            description: description.trim(),
+            configJson,
+            metaJson,
+        } as any;
+
+        onSave(payload);
+    };
+
+    if (!open) return null;
+
+    const NavLink = ({ id, label }: { id: PanelKey; label: string }) => (
+        <SideNavLink isActive={active === id} onClick={() => setActive(id)}>
+            {label}
+        </SideNavLink>
+    );
+
+    return (
+        <Modal
+            open={open}
+            modalHeading={mode === 'create' ? 'Create Data Theme' : 'Edit Data Theme'}
+            primaryButtonText={mode === 'create' ? 'Create' : 'Save'}
+            secondaryButtonText="Cancel"
+            onRequestClose={onClose}
+            onRequestSubmit={save}
+            primaryButtonDisabled={!canSave}
+            size="lg"
+        >
+            <Stack gap={6}>
+                {loadingTables ? <InlineLoading description="Loading schema tables…" /> : null}
+                {!loadingTables && tablesError ? (
+                    <div style={{ color: 'var(--cds-text-error, #da1e28)' }}>
+                        Failed to load schema tables: {tablesError}
+                    </div>
+                ) : null}
+
+                {schemaReady ? (
+                    <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: '1rem' }}>
+                        <div>
+                            <SideNav expanded isPersistent={false} aria-label="Theme editor sections">
+                                <SideNavItems>
+                                    <NavLink id="basics" label="Basics" />
+                                    <NavLink id="source" label="Source" />
+                                    <NavLink id="fields" label="Fields" />
+                                    <NavLink id="conditions" label="Conditions" />
+                                    <NavLink id="metadata" label="Metadata" />
+                                    <NavLink id="preview" label="Preview" />
+                                </SideNavItems>
+                            </SideNav>
+                        </div>
+
+                        <Content style={{ padding: 0 }}>
+                            {active === 'basics' ? (
+                                <DataThemeBasicsSection
+                                    value={{ name, code, domain, description }}
+                                    onChange={(next) => {
+                                        setName(next.name);
+                                        setCode(next.code);
+                                        setDomain(next.domain);
+                                        setDescription(next.description ?? '');
+                                    }}
+                                />
+                            ) : null}
+
+                            {active === 'source' ? (
+                                <>
+                                    <DataThemeSourceSection open={open} config={config} onChange={setConfig} />
+                                    {loadingCols ? <InlineLoading description="Loading columns…" /> : null}
+                                    {!loadingCols && colsError ? (
+                                        <div style={{ color: 'var(--cds-text-error, #da1e28)', marginTop: '0.5rem' }}>
+                                            Failed to load table columns: {colsError}
+                                        </div>
+                                    ) : null}
+                                </>
+                            ) : null}
+
+                            {active === 'fields' ? (<DataThemeFieldsEditorSection config={config} onChange={setConfig} open={open} />) : null}
+
+                            {active === 'conditions' ? (<DataThemeConditionsSection open={open} config={config} onChange={setConfig} columns={columns} loadingCols={loadingCols}/>) : null}
+
+                            {active === 'metadata' ? (<DataThemeMetadataSection value={meta} onChange={setMeta} open={open} />) : null}
+
+                            {active === 'preview' ? (<DataThemePreviewSection config={config} metaJson={metaJson} onConfigJson={setConfigJson}/>
+                            ) : null}
+                        </Content>
+                    </div>
+                ) : null}
+            </Stack>
+        </Modal>
+    );
+}