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

package/src/components/shared/preview/query-results-preview.component.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import {
+    Button,
+    InlineLoading,
+    InlineNotification,
+    DataTable,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableHeader,
+    TableRow,
+    CodeSnippet,
+    Accordion,
+    AccordionItem,
+    Tag,
+} from '@carbon/react';
+import { Play } from '@carbon/icons-react';
+
+import { previewSql, type SqlPreviewResponse } from '../../../resources/preview/sql-preview.api';
+
+type Props = {
+    title?: string;
+
+    sql: string;
+    params?: Record<string, any>;
+    maxRows?: number;
+
+    /**
+     * If false, user cannot run preview (e.g. missing dates)
+     */
+    canRun?: boolean;
+
+    /**
+     * Auto-run when inputs change (default false)
+     */
+    autoRun?: boolean;
+};
+
+export default function QueryResultsPreview({
+                                                title = 'Results preview',
+                                                sql,
+                                                params,
+                                                maxRows = 200,
+                                                canRun = true,
+                                                autoRun = false,
+                                            }: Props) {
+    const [loading, setLoading] = React.useState(false);
+    const [err, setErr] = React.useState<string | null>(null);
+    const [data, setData] = React.useState<SqlPreviewResponse | null>(null);
+
+    const run = React.useCallback(async () => {
+        if (!canRun) return;
+        if (!sql?.trim()) return;
+
+        const ac = new AbortController();
+        setLoading(true);
+        setErr(null);
+
+        try {
+            const resp = await previewSql({ sql, params, maxRows }, ac.signal);
+            setData(resp);
+        } catch (e: any) {
+            setErr(e?.message ?? 'Failed to preview query');
+            setData(null);
+        } finally {
+            setLoading(false);
+        }
+
+        return () => ac.abort();
+    }, [sql, params, maxRows, canRun]);
+
+    // optional autorun
+    React.useEffect(() => {
+        if (!autoRun) return;
+        if (!canRun) return;
+        if (!sql?.trim()) return;
+        run();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [autoRun, canRun, sql, JSON.stringify(params ?? {}), maxRows]);
+
+    const columns = React.useMemo(() => data?.columns ?? [], [data?.columns]);
+    const rows = React.useMemo(() => data?.rows ?? [], [data?.rows]);
+
+    const headers = React.useMemo(() => columns.map((c) => ({ key: c, header: c })), [columns]);
+
+    const tableRows = React.useMemo(() => {
+        return rows.map((r, idx) => {
+            const obj: any = { id: String(idx) };
+            columns.forEach((c, i) => {
+                obj[c] = r[i];
+            });
+            return obj;
+        });
+    }, [rows, columns]);
+
+    const hasSql = Boolean(sql?.trim());
+    const canClickRun = Boolean(canRun && hasSql && !loading);
+
+    return (
+        <div
+            style={{
+                display: 'grid',
+                gap: '0.75rem',
+                padding: '1rem',
+                borderRadius: '0.5rem',
+                background: 'var(--cds-layer, #ffffff)',
+                border: '1px solid var(--cds-border-subtle, #e0e0e0)',
+            }}
+        >
+            {/* Header */}
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '1rem' }}>
+                <div style={{ display: 'grid', gap: '0.25rem' }}>
+                    <div style={{ fontWeight: 600 }}>{title}</div>
+                    <div style={{ fontSize: '0.875rem', opacity: 0.75 }}>
+                        {canRun ? 'Ready to preview results.' : 'Select required parameters to enable preview.'}
+                    </div>
+                </div>
+
+                <Button kind="secondary" size="sm" renderIcon={Play} disabled={!canClickRun} onClick={() => run()}>
+                    Run preview
+                </Button>
+            </div>
+
+            {/* SQL (collapsible) */}
+            <Accordion align="start">
+                <AccordionItem title="SQL (click to expand)">
+                    <CodeSnippet type="multi" wrapText>
+                        {hasSql ? sql : '-- No SQL to preview yet'}
+                    </CodeSnippet>
+                </AccordionItem>
+            </Accordion>
+
+            {/* Status row */}
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem' }}>
+                <div>
+                    {loading ? <InlineLoading description="Running preview…" /> : null}
+                    {!loading && err ? (
+                        <InlineNotification kind="error" lowContrast title="Preview error" subtitle={err} />
+                    ) : null}
+                </div>
+
+                {data && !loading && !err ? (
+                    <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
+                        <Tag type="cool-gray" size="sm">
+                            Rows: {data.rowCount}
+                        </Tag>
+                        {data.truncated ? (
+                            <Tag type="red" size="sm">
+                                Truncated to {maxRows}
+                            </Tag>
+                        ) : (
+                            <Tag type="green" size="sm">
+                                Not truncated
+                            </Tag>
+                        )}
+                    </div>
+                ) : null}
+            </div>
+
+            {/* Results table */}
+            {data && !loading && !err ? (
+                <div
+                    style={{
+                        border: '1px solid var(--cds-border-subtle, #e0e0e0)',
+                        borderRadius: '0.25rem',
+                        overflow: 'hidden',
+                        background: 'var(--cds-layer, #ffffff)',
+                    }}
+                >
+                    <div style={{ maxHeight: '320px', overflow: 'auto' }}>
+                        <DataTable rows={tableRows} headers={headers} size="sm">
+                            {({ rows, headers, getHeaderProps, getRowProps }) => (
+                                <TableContainer>
+                                    <Table size="sm" useZebraStyles>
+                                        <TableHead>
+                                            <TableRow>
+                                                {headers.map((h) => (
+                                                    <TableHeader key={h.key} {...getHeaderProps({ header: h })}>
+                                                        {h.header}
+                                                    </TableHeader>
+                                                ))}
+                                            </TableRow>
+                                        </TableHead>
+                                        <TableBody>
+                                            {rows.map((row) => (
+                                                <TableRow key={row.id} {...getRowProps({ row })}>
+                                                    {row.cells.map((cell) => (
+                                                        <TableCell key={cell.id}>{String(cell.value ?? '')}</TableCell>
+                                                    ))}
+                                                </TableRow>
+                                            ))}
+                                        </TableBody>
+                                    </Table>
+                                </TableContainer>
+                            )}
+                        </DataTable>
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    );
+}

package/src/components/shared/template-structure-panel/template-structure-panel.component.tsx

@@ -0,0 +1,296 @@
+import React, { useRef } from 'react';
+import { Button, Tile, TreeView, TreeNode } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { nanoid } from 'nanoid';
+
+import styles from './template-structure-panel.scss';
+
+export type IndicatorNode = {
+  id: string;
+  label: string;
+  code?: string;
+  type?: 'group' | 'indicator';
+  children?: IndicatorNode[];
+};
+
+export type SelectedNode = {
+  id: string;
+  label?: string;
+  code?: string;
+  hasChildren?: boolean;
+};
+
+type Props = {
+  tree: IndicatorNode[];
+  selected?: SelectedNode | null;
+  onSelectNode: (node: IndicatorNode) => void;
+  onChangeTree: (updater: (prevTree: IndicatorNode[]) => IndicatorNode[]) => void;
+
+  // ✅ NEW: refresh JSON from template draft
+  onRefreshJson: () => void;
+};
+
+type IndexPath = number[];
+
+function findIndexPath(nodes: IndicatorNode[], id: string): IndexPath | null {
+  for (let i = 0; i < nodes.length; i++) {
+    const n = nodes[i];
+    if (n.id === id) return [i];
+    if (n.children?.length) {
+      const childPath = findIndexPath(n.children, id);
+      if (childPath) return [i, ...childPath];
+    }
+  }
+  return null;
+}
+
+function getNodeAtPath(root: IndicatorNode[], path: IndexPath): IndicatorNode {
+  let node = root[path[0]];
+  for (let i = 1; i < path.length; i++) node = (node.children ?? [])[path[i]];
+  return node;
+}
+
+function getSiblingsAtPath(root: IndicatorNode[], path: IndexPath): { siblings: IndicatorNode[]; index: number } {
+  let siblings = root;
+  for (let depth = 0; depth < path.length - 1; depth++) {
+    const idx = path[depth];
+    siblings = siblings[idx].children ?? (siblings[idx].children = []);
+  }
+  return { siblings, index: path[path.length - 1] };
+}
+
+function getSiblingsAtDepth(root: IndicatorNode[], pathToLevel: number[]): IndicatorNode[] {
+  let siblings = root;
+  for (let i = 0; i < pathToLevel.length; i++) {
+    const idx = pathToLevel[i];
+    siblings = siblings[idx].children ?? [];
+  }
+  return siblings;
+}
+
+function containsId(node: IndicatorNode, id: string): boolean {
+  if (node.id === id) return true;
+  for (const c of node.children ?? []) {
+    if (containsId(c, id)) return true;
+  }
+  return false;
+}
+
+function removeNodeById(nodes: IndicatorNode[], id: string): IndicatorNode | null {
+  for (let i = 0; i < nodes.length; i++) {
+    const n = nodes[i];
+    if (n.id === id) return nodes.splice(i, 1)[0];
+
+    if (n.children?.length) {
+      const removed = removeNodeById(n.children, id);
+      if (removed) {
+        if (n.children.length === 0) delete n.children;
+        return removed;
+      }
+    }
+  }
+  return null;
+}
+
+export default function TemplateStructurePanel({ tree, selected, onSelectNode, onChangeTree, onRefreshJson }: Props) {
+  const { t } = useTranslation();
+  const draggingIdRef = useRef<string | null>(null);
+
+  const addNode = () => {
+    onChangeTree((prevTree) => {
+      const root = structuredClone(prevTree);
+
+      const newNode: IndicatorNode = {
+        id: nanoid(),
+        label: t('newNode', 'New node'),
+        code: '',
+      };
+
+      if (!selected?.id) {
+        root.push(newNode);
+        onSelectNode(newNode);
+        return root;
+      }
+
+      const path = findIndexPath(root, selected.id);
+      if (!path) return root;
+
+      const selNode = getNodeAtPath(root, path);
+      const isGroup = Boolean(selNode.children?.length) || selNode.type === 'group';
+
+      if (isGroup) {
+        selNode.children = selNode.children ?? [];
+        selNode.children.push(newNode);
+      } else {
+        const { siblings, index } = getSiblingsAtPath(root, path);
+        siblings.splice(index + 1, 0, newNode);
+      }
+
+      onSelectNode(newNode);
+      return root;
+    });
+  };
+
+  const moveUp = () => {
+    if (!selected?.id) return;
+
+    onChangeTree((prevTree) => {
+      const root = structuredClone(prevTree);
+      const path = findIndexPath(root, selected.id);
+      if (!path) return root;
+
+      const { siblings, index } = getSiblingsAtPath(root, path);
+      if (index <= 0) return root;
+
+      [siblings[index - 1], siblings[index]] = [siblings[index], siblings[index - 1]];
+      return root;
+    });
+  };
+
+  const moveDown = () => {
+    if (!selected?.id) return;
+
+    onChangeTree((prevTree) => {
+      const root = structuredClone(prevTree);
+      const path = findIndexPath(root, selected.id);
+      if (!path) return root;
+
+      const { siblings, index } = getSiblingsAtPath(root, path);
+      if (index >= siblings.length - 1) return root;
+
+      [siblings[index + 1], siblings[index]] = [siblings[index], siblings[index + 1]];
+      return root;
+    });
+  };
+
+  const outdent = () => {
+    if (!selected?.id) return;
+
+    onChangeTree((prevTree) => {
+      const root = structuredClone(prevTree);
+      const path = findIndexPath(root, selected.id);
+      if (!path || path.length < 2) return root;
+
+      const { siblings: currentSiblings, index: currentIndex } = getSiblingsAtPath(root, path);
+      const movedNode = currentSiblings.splice(currentIndex, 1)[0];
+
+      const parentPath = path.slice(0, -1);
+      const parentIndexInGrand = parentPath[parentPath.length - 1];
+
+      const grandParentPath = path.slice(0, -2);
+      const grandSiblings = grandParentPath.length ? getSiblingsAtDepth(root, grandParentPath) : root;
+
+      grandSiblings.splice(parentIndexInGrand + 1, 0, movedNode);
+
+      const parentNode = getNodeAtPath(root, parentPath);
+      if (parentNode.children && parentNode.children.length === 0) delete parentNode.children;
+
+      return root;
+    });
+  };
+
+  const onDragStart = (id: string) => (e: React.DragEvent) => {
+    draggingIdRef.current = id;
+    e.dataTransfer.setData('application/x-indicator-node-id', id);
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
+  const onDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  };
+
+  const onDropIndent = (targetId: string) => (e: React.DragEvent) => {
+    e.preventDefault();
+
+    const draggedId = e.dataTransfer.getData('application/x-indicator-node-id') || draggingIdRef.current;
+    if (!draggedId || draggedId === targetId) return;
+
+    onChangeTree((prevTree) => {
+      const root = structuredClone(prevTree);
+
+      const draggedNode = removeNodeById(root, draggedId);
+      if (!draggedNode) return root;
+
+      if (containsId(draggedNode, targetId)) {
+        root.push(draggedNode);
+        return root;
+      }
+
+      const targetPath = findIndexPath(root, targetId);
+      if (!targetPath) {
+        root.push(draggedNode);
+        return root;
+      }
+
+      const targetNode = getNodeAtPath(root, targetPath);
+      targetNode.children = targetNode.children ?? [];
+      targetNode.children.push(draggedNode);
+
+      return root;
+    });
+  };
+
+  const renderTree = (nodes: IndicatorNode[]) =>
+    nodes.map((node) => (
+      <TreeNode
+        key={node.id}
+        id={node.id}
+        label={
+          <div
+            className={styles.draggableLabel}
+            draggable
+            onDragStart={onDragStart(node.id)}
+            onDragOver={onDragOver}
+            onDrop={onDropIndent(node.id)}
+            onClick={() => onSelectNode(node)}
+            role="button"
+            tabIndex={0}
+          >
+            <span className={styles.nodeText}>{node.label}</span>
+            {node.code ? <span className={styles.nodeCode}>{node.code}</span> : null}
+          </div>
+        }
+      >
+        {node.children?.length ? renderTree(node.children) : null}
+      </TreeNode>
+    ));
+
+  return (
+    <div className={styles.root}>
+      <Tile className={styles.tile}>
+        <div className={styles.tileHeaderRow}>
+          <h3 className={styles.tileTitle}>{t('templateStructure', 'Template Structure')}</h3>
+
+          <Button size="sm" kind="ghost" onClick={onRefreshJson}>
+            {t('refreshJson', 'Refresh JSON')}
+          </Button>
+        </div>
+
+        <div className={styles.treeWrap}>
+          <TreeView label={t('templateStructure', 'Template Structure')} hideLabel selected={selected?.id ? [selected.id] : []}>
+            {renderTree(tree)}
+          </TreeView>
+        </div>
+
+        <div className={styles.structureActions}>
+          <Button size="sm" kind="primary" onClick={addNode}>
+            {t('addNode', 'Add Node')}
+          </Button>
+
+          <Button size="sm" kind="secondary" onClick={moveUp} disabled={!selected?.id}>
+            {t('moveUp', 'Move Up')}
+          </Button>
+
+          <Button size="sm" kind="secondary" onClick={moveDown} disabled={!selected?.id}>
+            {t('moveDown', 'Move Down')}
+          </Button>
+
+          <Button size="sm" kind="tertiary" onClick={outdent} disabled={!selected?.id}>
+            {t('outdent', 'Outdent')}
+          </Button>
+        </div>
+      </Tile>
+    </div>
+  );
+}

package/src/components/shared/template-structure-panel/template-structure-panel.scss

@@ -0,0 +1,81 @@
+.root {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.tile {
+  flex: 1;
+  min-height: 0;
+  padding: 1rem;
+  border-radius: 0.5rem;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.tileHeaderRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  flex-shrink: 0;
+}
+
+.tileTitle {
+  margin: 0;
+  font-weight: 600;
+}
+
+.treeWrap {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+
+  border: 1px solid var(--cds-border-subtle, #e0e0e0);
+  border-radius: 0.375rem;
+  padding: 0.5rem;
+  background: var(--cds-layer-01, #fff);
+}
+
+.structureActions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+.draggableLabel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  cursor: grab;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+}
+
+.draggableLabel:active {
+  cursor: grabbing;
+}
+
+.draggableLabel:hover {
+  background: var(--cds-layer-hover-01, #f4f4f4);
+}
+
+.nodeText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nodeCode {
+  font-size: 0.75rem;
+  opacity: 0.75;
+  border: 1px solid var(--cds-border-subtle, #e0e0e0);
+  padding: 0.1rem 0.35rem;
+  border-radius: 0.375rem;
+}

package/src/config-schema.ts

@@ -0,0 +1,43 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  defaultMapping: {
+    _description: 'Defaults used by the report builder.',
+    keyPattern: {
+      _default: '{code}_{age}_{sex}',
+      _description: 'Default key pattern for flat values.',
+      _type: Type.String,
+    },
+    defaultDimensions: {
+      _description: 'Default dimension names used in templates.',
+      age: {
+        _default: 'age',
+        _type: Type.String,
+      },
+      sex: {
+        _default: 'sex',
+        _type: Type.String,
+      },
+    },
+  },
+  etlTasks: {
+    _description: 'ETL task configuration for data extraction and processing.',
+    tasks: {
+      _default: [],
+      _description: 'List of ETL task names to execute. Tasks must exist in OpenMRS task definitions.',
+      _type: Type.Array,
+      _elements: {
+        _type: Type.String,
+      },
+    },
+    progressMonitors: {
+      _default: [],
+      _description:
+        'Codes (preferred) or UUIDs of ETL monitors whose live progress is shown above the task list. Each entry renders as an auto-refreshing monitor card.',
+      _type: Type.Array,
+      _elements: {
+        _type: Type.String,
+      },
+    },
+  },
+};

package/src/constants/privileges.test.ts

@@ -0,0 +1,53 @@
+import { RB, RB_PREFIX, ROUTE_PRIVILEGES, rbDisplay } from './privileges';
+
+describe('privilege catalog', () => {
+  it('declares exactly the 46 backend privileges', () => {
+    expect(Object.keys(RB)).toHaveLength(46);
+  });
+
+  it('builds every privilege from the canonical prefix', () => {
+    for (const value of Object.values(RB)) {
+      expect(value.startsWith(RB_PREFIX)).toBe(true);
+      // Backend suffixes are lowercase dotted domains/actions
+      expect(value).toMatch(/^Task: reportbuilder\.[a-z.]+$/);
+    }
+  });
+
+  it('keeps report.view matching the backend contract verbatim', () => {
+    expect(RB.REPORT_VIEW).toBe('Task: reportbuilder.report.view');
+    expect(RB.REPORT_EDIT).toBe('Task: reportbuilder.report.edit');
+    expect(RB.SQL_EXECUTE).toBe('Task: reportbuilder.sql.execute');
+    expect(RB.PACKAGE_IMPORT).toBe('Task: reportbuilder.package.import');
+  });
+
+  it('strips the prefix for display', () => {
+    expect(rbDisplay(RB.REPORT_EDIT)).toBe('report.edit');
+  });
+});
+
+describe('route privilege map', () => {
+  it('always requires at least one privilege per guarded route', () => {
+    for (const [route, required] of Object.entries(ROUTE_PRIVILEGES)) {
+      expect(required.length).toBeGreaterThan(0);
+      for (const privilege of required) {
+        expect(Object.values(RB)).toContain(privilege);
+      }
+      expect(route).toMatch(/^\//);
+    }
+  });
+
+  it('covers the landing, run, and admin landing routes', () => {
+    expect(ROUTE_PRIVILEGES['/']).toEqual([RB.REPORT_VIEW]);
+    expect(ROUTE_PRIVILEGES['/run']).toEqual([RB.REPORT_RUN]);
+    expect(ROUTE_PRIVILEGES['/admin']).toEqual([RB.REPORT_VIEW]);
+  });
+
+  it('gives import-export OR semantics (either package privilege)', () => {
+    expect(ROUTE_PRIVILEGES['/import-export']).toEqual([RB.PACKAGE_IMPORT, RB.PACKAGE_EXPORT]);
+  });
+
+  it('does not guard redirect-only routes', () => {
+    expect(ROUTE_PRIVILEGES['/themes']).toBeUndefined();
+    expect(ROUTE_PRIVILEGES['*']).toBeUndefined();
+  });
+});