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

package/src/components/legacy-reports/legacy-report-upload-modal.component.tsx

@@ -0,0 +1,307 @@
+import React from 'react';
+import {
+  Modal,
+  ModalBody,
+  ModalFooter,
+  Button,
+  FileUploader,
+  ProgressBar,
+  InlineNotification,
+  Tag,
+  StructuredListBody,
+  StructuredListRow,
+  StructuredListCell,
+  Tile,
+  Accordion,
+  AccordionItem,
+} from '@carbon/react';
+import { Checkmark, Warning } from '@carbon/icons-react';
+
+import { uploadLegacyReport, importLegacyReport, type UploadLegacyReportResponse } from '../../resources/legacy-reports/legacy-reports.api';
+import type { LegacyReportRow } from './legacy-reports-table.component';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onComplete: (report: LegacyReportRow) => void;
+};
+
+type UploadState = {
+  file: File | null;
+  uploading: boolean;
+  uploadResult: UploadLegacyReportResponse | null;
+  importResult: any | null;
+  error: string | null;
+  showDetails: boolean;
+};
+
+function LegacyReportUploadModal({ open, onClose, onComplete }: Props) {
+  const [state, setState] = React.useState<UploadState>({
+    file: null,
+    uploading: false,
+    uploadResult: null,
+    importResult: null,
+    error: null,
+    showDetails: false,
+  });
+
+  const [uploadProgress, setUploadProgress] = React.useState(0);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file && file.name.endsWith('.json')) {
+      setState((prev) => ({ ...prev, file, error: null, uploadResult: null }));
+    } else {
+      setState((prev) => ({
+        ...prev,
+        file: null,
+        error: 'Please select a valid JSON file',
+      }));
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!state.file) return;
+
+    setState((prev) => ({ ...prev, uploading: true, error: null, uploadResult: null, importResult: null }));
+    setUploadProgress(0);
+
+    try {
+      // Simulate upload progress
+      const progressInterval = setInterval(() => {
+        setUploadProgress((prev) => {
+          if (prev >= 90) {
+            clearInterval(progressInterval);
+            return 90;
+          }
+          return prev + 10;
+        });
+      }, 200);
+
+      const result = await uploadLegacyReport(state.file);
+
+      clearInterval(progressInterval);
+      setUploadProgress(100);
+
+      setState((prev) => ({ ...prev, uploadResult: result, uploading: false }));
+
+      if (!result.success) {
+        setState((prev) => ({ ...prev, error: result.error || 'Upload failed' }));
+      }
+    } catch (error: any) {
+      setState((prev) => ({
+        ...prev,
+        uploading: false,
+        error: error?.message || 'Failed to upload file',
+      }));
+    }
+  };
+
+  const handleImport = async () => {
+    if (!state.uploadResult?.tempFilePath) return;
+
+    setState((prev) => ({ ...prev, uploading: true, error: null }));
+
+    try {
+      const result = await importLegacyReport(
+        state.uploadResult.tempFilePath,
+        state.uploadResult.reportName || 'Unknown Report',
+      );
+
+      setState((prev) => ({ ...prev, importResult: result, uploading: false }));
+
+      if (result.success) {
+        // Create a new report row to add to the table
+        const newReport: LegacyReportRow = {
+          uuid: result.reportDefinitionUuid || crypto.randomUUID(),
+          key: state.uploadResult.reportKey || 'unknown',
+          name: result.reportName || state.uploadResult.reportName || 'Unknown Report',
+          description: state.uploadResult.description,
+          status: 'Imported',
+          datasetsCount: state.uploadResult.datasets?.length || 0,
+          parametersCount: state.uploadResult.parameters?.length || 0,
+        };
+
+        onComplete(newReport);
+        handleClose();
+      } else {
+        setState((prev) => ({ ...prev, error: result.error || 'Import failed' }));
+      }
+    } catch (error: any) {
+      setState((prev) => ({
+        ...prev,
+        uploading: false,
+        error: error?.message || 'Failed to import report',
+      }));
+    }
+  };
+
+  const handleClose = () => {
+    setState({
+      file: null,
+      uploading: false,
+      uploadResult: null,
+      importResult: null,
+      error: null,
+      showDetails: false,
+    });
+    setUploadProgress(0);
+    onClose();
+  };
+
+  const canUpload = Boolean(state.file && !state.uploading && !state.uploadResult);
+  const canImport = Boolean(state.uploadResult?.success && !state.uploading && !state.importResult?.success);
+  const showSuccess = state.importResult?.success;
+
+  return (
+    <Modal open={open} onRequestClose={handleClose} modalHeading="Upload Legacy Report" size="lg">
+      <ModalBody>
+        {state.error ? (
+          <InlineNotification kind="error" title="Error" subtitle={state.error} style={{ marginBottom: '1rem' }} />
+        ) : null}
+
+        {showSuccess ? (
+          <InlineNotification
+            kind="success"
+            title="Success"
+            subtitle="Legacy report imported successfully into the report builder"
+            style={{ marginBottom: '1rem' }}
+          />
+        ) : null}
+
+        {!state.uploadResult && !state.importResult?.success && (
+          <div style={{ marginBottom: '1rem' }}>
+            <FileUploader
+              labelDescription="Select a JSON file containing legacy report configuration"
+              labelTitle="Upload JSON configuration"
+              buttonLabel="Add file"
+              filenameStatus="edit"
+              accept={['.json']}
+              multiple={false}
+              onChange={handleFileChange}
+              disabled={state.uploading}
+            />
+          </div>
+        )}
+
+        {state.uploading && (
+          <div style={{ marginBottom: '1rem' }}>
+            <ProgressBar label="Uploading and validating..." value={uploadProgress} />
+          </div>
+        )}
+
+        {state.uploadResult?.success && !state.importResult?.success && (
+          <div>
+            <Tile style={{ marginBottom: '1rem' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.5rem' }}>
+                <Checkmark size={20} style={{ color: 'var(--cds-support-success)' }} />
+                <strong>File validated successfully</strong>
+              </div>
+              <p style={{ margin: '0.5rem 0', opacity: 0.85 }}>
+                The JSON file has been parsed and validated. Review the report details below before importing.
+              </p>
+            </Tile>
+
+            <StructuredListBody>
+              <StructuredListRow>
+                <StructuredListCell>Report Key</StructuredListCell>
+                <StructuredListCell>
+                  <code>{state.uploadResult.reportKey}</code>
+                </StructuredListCell>
+              </StructuredListRow>
+
+              <StructuredListRow>
+                <StructuredListCell>Report Name</StructuredListCell>
+                <StructuredListCell>
+                  <strong>{state.uploadResult.reportName}</strong>
+                </StructuredListCell>
+              </StructuredListRow>
+
+              <StructuredListRow>
+                <StructuredListCell>Description</StructuredListCell>
+                <StructuredListCell>{state.uploadResult.description || '—'}</StructuredListCell>
+              </StructuredListRow>
+
+              <StructuredListRow>
+                <StructuredListCell>Status</StructuredListCell>
+                <StructuredListCell>
+                  <Tag type="blue">{state.uploadResult.status}</Tag>
+                </StructuredListCell>
+              </StructuredListRow>
+
+              <StructuredListRow>
+                <StructuredListCell>Parameters</StructuredListCell>
+                <StructuredListCell>{state.uploadResult.parameters?.length || 0} defined</StructuredListCell>
+              </StructuredListRow>
+
+              <StructuredListRow>
+                <StructuredListCell>Datasets</StructuredListCell>
+                <StructuredListCell>{state.uploadResult.datasets?.length || 0} defined</StructuredListCell>
+              </StructuredListRow>
+
+              <StructuredListRow>
+                <StructuredListCell>Designs</StructuredListCell>
+                <StructuredListCell>{state.uploadResult.designs?.length || 0} defined</StructuredListCell>
+              </StructuredListRow>
+            </StructuredListBody>
+
+            <div style={{ marginTop: '1rem' }}>
+              <Accordion>
+                <AccordionItem title="View JSON Configuration">
+                  <pre
+                    style={{
+                      background: 'var(--cds-field-01)',
+                      padding: '1rem',
+                      borderRadius: '4px',
+                      fontSize: '0.85rem',
+                      maxHeight: '300px',
+                      overflow: 'auto',
+                    }}
+                  >
+                    {JSON.stringify(state.uploadResult.jsonTemplateConfig, null, 2)}
+                  </pre>
+                </AccordionItem>
+              </Accordion>
+            </div>
+
+            {state.uploadResult.errors && state.uploadResult.errors.length > 0 && (
+              <Tile style={{ marginTop: '1rem', background: 'var(--cds-background-warning)' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.5rem' }}>
+                  <Warning size={20} />
+                  <strong>Warnings</strong>
+                </div>
+                <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>
+                  {state.uploadResult.errors.map((error, index) => (
+                    <li key={index}>{error}</li>
+                  ))}
+                </ul>
+              </Tile>
+            )}
+          </div>
+        )}
+      </ModalBody>
+
+      <ModalFooter>
+        <Button kind="secondary" onClick={handleClose} disabled={state.uploading}>
+          {showSuccess ? 'Close' : 'Cancel'}
+        </Button>
+
+        {!showSuccess && (
+          <>
+            {canImport ? (
+              <Button kind="primary" onClick={handleImport} disabled={state.uploading}>
+                Import to Report Builder
+              </Button>
+            ) : (
+              <Button kind="primary" onClick={handleUpload} disabled={!canUpload}>
+                Validate File
+              </Button>
+            )}
+          </>
+        )}
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+export default LegacyReportUploadModal;

package/src/components/legacy-reports/legacy-reports-page.component.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import {
+  TextInput,
+  Tile,
+  InlineLoading,
+  InlineNotification,
+  Button,
+  Modal,
+  ModalBody,
+  ModalFooter,
+} from '@carbon/react';
+import { Information, Add } from '@carbon/icons-react';
+
+import Header from '../shared/header/header.component';
+import LegacyReportsTable, { type LegacyReportRow } from './legacy-reports-table.component';
+import { listLegacyReports } from '../../resources/legacy-reports/legacy-reports.api';
+import LegacyReportUploadModal from './legacy-report-upload-modal.component';
+
+const LegacyReportsPage: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [search, setSearch] = React.useState('');
+  const [reports, setReports] = React.useState<LegacyReportRow[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const [showUploadModal, setShowUploadModal] = React.useState(false);
+  const [showWelcomeModal, setShowWelcomeModal] = React.useState(false);
+
+  // Load reports on mount
+  React.useEffect(() => {
+    const ac = new AbortController();
+
+    setLoading(true);
+    setError(null);
+
+    listLegacyReports({}, ac.signal)
+      .then((data) => {
+        const mappedData = data.map((r) => ({
+          uuid: r.uuid,
+          key: r.key,
+          name: r.name,
+          description: r.description,
+          status: r.status,
+          datasetsCount: r.datasets?.length ?? 0,
+          parametersCount: r.parameters?.length ?? 0,
+        }));
+        setReports(mappedData);
+
+        // Show welcome modal if no reports exist
+        if (mappedData.length === 0) {
+          setShowWelcomeModal(true);
+        }
+      })
+      .catch((err) => {
+        setError(err?.message ?? 'Failed to load legacy reports');
+        setReports([]);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+
+    return () => ac.abort();
+  }, []);
+
+  const filteredReports = React.useMemo(() => {
+    if (!search.trim()) return reports;
+    const q = search.toLowerCase();
+    return reports.filter(
+      (r) =>
+        r.name.toLowerCase().includes(q) ||
+        r.key.toLowerCase().includes(q) ||
+        (r.description && r.description.toLowerCase().includes(q)),
+    );
+  }, [search, reports]);
+
+  const handleUploadClick = () => {
+    setShowUploadModal(true);
+    setShowWelcomeModal(false);
+  };
+
+  const handleUploadComplete = (newReport: LegacyReportRow) => {
+    setReports((prev) => [...prev, newReport]);
+    setShowUploadModal(false);
+  };
+
+  const handleViewReport = (uuid: string) => {
+    navigate(`/legacy-reports/${uuid}`);
+  };
+
+  const handleImportReport = (uuid: string) => {
+    // For now, just navigate to the report detail page
+    // In the future, this would trigger the import process
+    navigate(`/legacy-reports/${uuid}/import`);
+  };
+
+  const handleEditReport = (uuid: string) => {
+    navigate(`/legacy-reports/${uuid}/edit`);
+  };
+
+  const handleCreateNew = () => {
+    navigate('/legacy-reports/new/edit');
+  };
+
+  const handleDeleteReport = (uuid: string) => {
+    if (confirm('Are you sure you want to delete this legacy report?')) {
+      setReports((prev) => prev.filter((r) => r.uuid !== uuid));
+    }
+  };
+
+  if (loading) {
+    return (
+      <div>
+        <Header
+          title={t('legacyReports', 'Legacy Reports')}
+          subtitle={t('legacyReportsSubtitle', 'Manage and import legacy reports into the report builder')}
+        />
+        <InlineLoading description="Loading legacy reports..." />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Header
+        title={t('legacyReports', 'Legacy Reports')}
+        subtitle={t('legacyReportsSubtitle', 'Manage and import legacy reports into the report builder')}
+      />
+
+      {error ? (
+        <InlineNotification kind="error" title="Error" subtitle={error} style={{ marginBottom: '1rem' }} />
+      ) : null}
+
+      <Tile style={{ marginBottom: '1rem' }}>
+        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-start' }}>
+          <Information size={20} style={{ marginTop: '2px' }} />
+          <div>
+            <strong>What are legacy reports?</strong>
+            <p style={{ margin: '0.5rem 0', opacity: 0.85 }}>
+              Legacy reports are existing report configurations that can be imported into the new report builder.
+              Upload JSON configuration files to import and modernize your existing reports.
+            </p>
+          </div>
+        </div>
+      </Tile>
+
+      <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
+        <TextInput
+          id="search-reports"
+          labelText=""
+          placeholder="Search reports by name, key, or description..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          style={{ flex: 1 }}
+        />
+        <Button kind="primary" renderIcon={Add} onClick={handleCreateNew}>
+          Create New Report
+        </Button>
+      </div>
+
+      <LegacyReportsTable
+        rows={filteredReports}
+        onUpload={handleUploadClick}
+        onView={handleViewReport}
+        onEdit={handleEditReport}
+        onImport={handleImportReport}
+        onDelete={handleDeleteReport}
+      />
+
+      <LegacyReportUploadModal
+        open={showUploadModal}
+        onClose={() => setShowUploadModal(false)}
+        onComplete={handleUploadComplete}
+      />
+
+      {/* Welcome Modal */}
+      <Modal
+        open={showWelcomeModal}
+        onRequestClose={() => setShowWelcomeModal(false)}
+        modalHeading="Welcome to Legacy Reports"
+        passiveModal
+        size="sm"
+      >
+        <ModalBody>
+          <p>
+            You haven't uploaded any legacy reports yet. Legacy reports are existing report configurations that can
+            be imported into the new report builder.
+          </p>
+          <p>
+            Upload your JSON configuration files to get started with importing and modernizing your existing reports.
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="primary" onClick={handleUploadClick}>
+            Upload Your First Legacy Report
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </div>
+  );
+};
+
+export default LegacyReportsPage;

package/src/components/legacy-reports/legacy-reports-table.component.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import {
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  TableContainer,
+  Tag,
+  OverflowMenu,
+  OverflowMenuItem,
+  Button,
+} from '@carbon/react';
+import { Upload, Document } from '@carbon/icons-react';
+
+export type LegacyReportRow = {
+  uuid: string;
+  key: string;
+  name: string;
+  description?: string;
+  status: string;
+  datasetsCount?: number;
+  parametersCount?: number;
+};
+
+type Props = {
+  rows: LegacyReportRow[];
+  onUpload?: () => void;
+  onView?: (uuid: string) => void;
+  onImport?: (uuid: string) => void;
+  onEdit?: (uuid: string) => void;
+  onDelete?: (uuid: string) => void;
+};
+
+function statusTag(status: string) {
+  const s = (status ?? '').toLowerCase();
+  if (s.includes('legacy')) return <Tag type="blue">Legacy</Tag>;
+  if (s.includes('published')) return <Tag type="green">Published</Tag>;
+  return <Tag type="gray">Draft</Tag>;
+}
+
+export default function LegacyReportsTable({ rows, onUpload, onView, onImport, onEdit, onDelete }: Props) {
+  const headers = [
+    { key: 'key', header: 'Key' },
+    { key: 'name', header: 'Name' },
+    { key: 'description', header: 'Description' },
+    { key: 'datasetsCount', header: 'Datasets' },
+    { key: 'parametersCount', header: 'Parameters' },
+    { key: 'status', header: 'Status' },
+    { key: 'actions', header: '' },
+  ];
+
+  const tableRows = (rows ?? []).map((r) => ({
+    id: r.uuid,
+    key: r.key,
+    name: r.name,
+    description: r.description ?? '',
+    datasetsCount: r.datasetsCount ?? 0,
+    parametersCount: r.parametersCount ?? 0,
+    status: r.status,
+  }));
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+        <h3 style={{ margin: 0 }}>Legacy Reports</h3>
+        <Button size="sm" kind="primary" renderIcon={Upload} onClick={onUpload}>
+          Upload Legacy Report
+        </Button>
+      </div>
+
+      <TableContainer title="" description="">
+        <DataTable rows={tableRows} headers={headers} isSortable>
+          {({ rows: dtRows, headers: dtHeaders, getHeaderProps, getRowProps }) => (
+            <Table size="lg" useZebraStyles>
+              <TableHead>
+                <TableRow>
+                  {dtHeaders.map((h) => (
+                    <TableHeader key={h.key} {...getHeaderProps({ header: h })}>
+                      {h.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+
+              <TableBody>
+                {dtRows.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={dtHeaders.length} style={{ padding: '1rem', opacity: 0.75, textAlign: 'center' }}>
+                      <div>
+                        <Document size={32} style={{ marginBottom: '0.5rem', opacity: 0.5 }} />
+                        <div>No legacy reports found.</div>
+                        <div style={{ fontSize: '0.9rem', marginTop: '0.5rem' }}>
+                          Upload a legacy report JSON file to get started.
+                        </div>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ) : null}
+
+                {dtRows.map((row) => {
+                  const key = String(row.cells.find((c) => c.info.header === 'key')?.value ?? '');
+                  const name = String(row.cells.find((c) => c.info.header === 'name')?.value ?? '');
+                  const description = String(row.cells.find((c) => c.info.header === 'description')?.value ?? '');
+                  const datasetsCount = String(row.cells.find((c) => c.info.header === 'datasetsCount')?.value ?? '0');
+                  const parametersCount = String(row.cells.find((c) => c.info.header === 'parametersCount')?.value ?? '0');
+                  const status = String(row.cells.find((c) => c.info.header === 'status')?.value ?? '');
+
+                  return (
+                    <TableRow
+                      key={row.id}
+                      {...getRowProps({ row })}
+                      onClick={() => onView?.(row.id)}
+                      style={{ cursor: onView ? 'pointer' : 'default' }}
+                    >
+                      <TableCell>
+                        <code style={{ fontSize: '0.9em', background: 'var(--cds-field-01)', padding: '2px 6px', borderRadius: '4px' }}>
+                          {key || <span style={{ opacity: 0.7 }}>—</span>}
+                        </code>
+                      </TableCell>
+
+                      <TableCell style={{ fontWeight: 600 }}>{name}</TableCell>
+
+                      <TableCell style={{ maxWidth: '300px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {description || <span style={{ opacity: 0.7 }}>—</span>}
+                      </TableCell>
+
+                      <TableCell>{datasetsCount}</TableCell>
+
+                      <TableCell>{parametersCount}</TableCell>
+
+                      <TableCell>{statusTag(status)}</TableCell>
+
+                      <TableCell onClick={(e) => e.stopPropagation()} style={{ width: 56 }}>
+                        <OverflowMenu size="sm" flipped>
+                          <OverflowMenuItem itemText="View Details" onClick={() => onView?.(row.id)} />
+                          <OverflowMenuItem itemText="Edit Configuration" onClick={() => onEdit?.(row.id)} />
+                          <OverflowMenuItem itemText="Import to Builder" onClick={() => onImport?.(row.id)} />
+                          <OverflowMenuItem itemText="Delete" isDelete onClick={() => onDelete?.(row.id)} />
+                        </OverflowMenu>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </DataTable>
+      </TableContainer>
+    </div>
+  );
+}