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

package/src/components/etl-monitor/builder/generated-config-panel.component.tsx

@@ -0,0 +1,168 @@
+/**
+ * Generated Configuration Panel
+ * Right-hand panel content on the Preview step: Visual / JSON tabs with a
+ * copyable, syntax-highlighted config and a publish-readiness banner.
+ * Reference design: docs/image-series-monitor/stage5.png
+ */
+
+import React, { useMemo, useState } from 'react';
+import { Button } from '@carbon/react';
+import { Checkmark, CheckmarkFilled, Copy, Error as ErrorIcon } from '@carbon/icons-react';
+import { useBuilderContext } from './etl-monitor-builder-context';
+import {
+  generateConfigFromState,
+  getAllValidationErrors,
+  validatePreviewStep,
+} from './builder-state-machine';
+import { MonitorPreviewRenderer } from './monitor-preview';
+import styles from './generated-config-panel.scss';
+
+const TOKEN_RE = /("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false|null)\b|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g;
+
+/**
+ * Minimal JSON syntax highlighter
+ */
+function highlightJson(json: string): React.ReactNode[] {
+  const nodes: React.ReactNode[] = [];
+  let last = 0;
+  let key = 0;
+  let match: RegExpExecArray | null;
+
+  TOKEN_RE.lastIndex = 0;
+  while ((match = TOKEN_RE.exec(json))) {
+    if (match.index > last) {
+      nodes.push(json.slice(last, match.index));
+    }
+    if (match[1] !== undefined) {
+      nodes.push(
+        <span key={key++} className={match[2] ? styles['json-key'] : styles['json-string']}>
+          {match[1]}
+        </span>
+      );
+      if (match[2]) {
+        nodes.push(match[2]);
+      }
+    } else if (match[3] !== undefined) {
+      nodes.push(
+        <span key={key++} className={styles['json-boolean']}>
+          {match[3]}
+        </span>
+      );
+    } else if (match[4] !== undefined) {
+      nodes.push(
+        <span key={key++} className={styles['json-number']}>
+          {match[4]}
+        </span>
+      );
+    }
+    last = TOKEN_RE.lastIndex;
+  }
+  if (last < json.length) {
+    nodes.push(json.slice(last));
+  }
+  return nodes;
+}
+
+/**
+ * Generated Configuration Panel Component
+ */
+export function GeneratedConfigPanel() {
+  const { state } = useBuilderContext();
+  const [tab, setTab] = useState<'visual' | 'json'>('json');
+  const [copied, setCopied] = useState(false);
+
+  const config = useMemo(() => generateConfigFromState(state), [state]);
+  const json = useMemo(() => JSON.stringify(config, null, 2), [config]);
+  const highlighted = useMemo(() => highlightJson(json), [json]);
+
+  const errors = useMemo(() => getAllValidationErrors(state), [state]);
+  const previewValidation = useMemo(() => validatePreviewStep(state), [state]);
+  const isReady = errors.length === 0 && previewValidation.valid;
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(json);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard unavailable — ignore
+    }
+  };
+
+  return (
+    <div className={styles['generated-config-panel']}>
+      <div className={styles['generated-config-panel__header']}>
+        <h4>Generated Configuration</h4>
+      </div>
+
+      <div className={styles['generated-config-panel__tabs']} role="tablist">
+        <button
+          type="button"
+          role="tab"
+          aria-selected={tab === 'visual'}
+          className={[
+            styles['generated-config-panel__tab'],
+            tab === 'visual' && styles['generated-config-panel__tab--active'],
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          onClick={() => setTab('visual')}
+        >
+          Visual
+        </button>
+        <button
+          type="button"
+          role="tab"
+          aria-selected={tab === 'json'}
+          className={[
+            styles['generated-config-panel__tab'],
+            tab === 'json' && styles['generated-config-panel__tab--active'],
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          onClick={() => setTab('json')}
+        >
+          JSON
+        </button>
+      </div>
+
+      <div className={styles['generated-config-panel__content']}>
+        {tab === 'visual' ? (
+          <MonitorPreviewRenderer state={state} />
+        ) : (
+          <div className={styles['generated-config-panel__json-wrap']}>
+            <Button
+              kind="ghost"
+              size="sm"
+              hasIconOnly
+              renderIcon={copied ? Checkmark : Copy}
+              iconDescription={copied ? 'Copied!' : 'Copy JSON'}
+              className={styles['generated-config-panel__copy']}
+              onClick={handleCopy}
+            />
+            <pre className={styles['generated-config-panel__json']}>{highlighted}</pre>
+          </div>
+        )}
+      </div>
+
+      <div
+        className={[
+          styles['generated-config-panel__banner'],
+          isReady
+            ? styles['generated-config-panel__banner--ready']
+            : styles['generated-config-panel__banner--blocked'],
+        ]
+          .join(' ')}
+      >
+        {isReady ? <CheckmarkFilled size={18} /> : <ErrorIcon size={18} />}
+        <span>
+          {isReady
+            ? 'Ready to publish — this monitor will appear immediately on the dashboard after saving.'
+            : `Configuration incomplete — fix ${errors.length} error${errors.length === 1 ? '' : 's'} before saving.`}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default GeneratedConfigPanel;

package/src/components/etl-monitor/builder/generated-config-panel.scss

@@ -0,0 +1,198 @@
+/**
+ * Generated Configuration Panel Styles
+ */
+
+.generated-config-panel {
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.75rem;
+  padding: 1.25rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+
+  &__header {
+    h4 {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 600;
+      color: #161616;
+    }
+  }
+
+  &__tabs {
+    display: flex;
+    gap: 0.25rem;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  &__tab {
+    appearance: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem 0.875rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #525252;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+
+    &:focus-visible {
+      outline: 2px solid #0f62fe;
+      outline-offset: -2px;
+    }
+
+    &--active {
+      color: #161616;
+      font-weight: 600;
+      border-bottom-color: #045d78;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    overflow: auto;
+    min-height: 0;
+  }
+
+  &__json-wrap {
+    position: relative;
+  }
+
+  &__copy {
+    position: absolute !important;
+    top: 0.5rem;
+    right: 0.5rem;
+    z-index: 2;
+  }
+
+  &__json {
+    margin: 0;
+    padding: 1rem;
+    background: #f4f4f4;
+    border: 1px solid #e0e0e0;
+    border-radius: 0.5rem;
+    font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+    font-size: 0.75rem;
+    line-height: 1.55;
+    overflow: auto;
+    max-height: 520px;
+    white-space: pre;
+  }
+
+  &__banner {
+    display: flex;
+    gap: 0.625rem;
+    align-items: flex-start;
+    padding: 0.875rem 1rem;
+    border-radius: 0.5rem;
+    font-size: 0.8125rem;
+    line-height: 1.45;
+
+    svg {
+      flex-shrink: 0;
+      margin-top: 0.125rem;
+    }
+
+    &--ready {
+      background: #defbe6;
+      color: #0e6027;
+
+      svg {
+        color: #24a148;
+      }
+    }
+
+    &--blocked {
+      background: #ffd7d9;
+      color: #a2191f;
+
+      svg {
+        color: #da1e28;
+      }
+    }
+  }
+}
+
+/* JSON syntax colors */
+.json-key {
+  color: #0d8085;
+}
+
+.json-string {
+  color: #5b54d9;
+}
+
+.json-number {
+  color: #2f80ed;
+}
+
+.json-boolean {
+  color: #da1e28;
+}
+
+/* Dark theme */
+[data-theme='dark'] {
+  .generated-config-panel {
+    background: #1f2937;
+    border-color: #393939;
+
+    &__header h4 {
+      color: #f4f4f4;
+    }
+
+    &__tabs {
+      border-bottom-color: #393939;
+    }
+
+    &__tab {
+      color: #8d8d8d;
+
+      &--active {
+        color: #f4f4f4;
+        border-bottom-color: #3ddbd9;
+      }
+    }
+
+    &__json {
+      background: #16191e;
+      border-color: #393939;
+    }
+
+    &__banner--ready {
+      background: rgba(36, 161, 72, 0.15);
+      color: #42be65;
+
+      svg {
+        color: #42be65;
+      }
+    }
+
+    &__banner--blocked {
+      background: rgba(218, 30, 40, 0.15);
+      color: #fa4d56;
+
+      svg {
+        color: #fa4d56;
+      }
+    }
+  }
+
+  .json-key {
+    color: #3ddbd9;
+  }
+
+  .json-string {
+    color: #9b8cff;
+  }
+
+  .json-number {
+    color: #78a9ff;
+  }
+
+  .json-boolean {
+    color: #fa4d56;
+  }
+}

package/src/components/etl-monitor/builder/index.ts

@@ -0,0 +1,5 @@
+export { EtlMonitorBuilderPage, default as EtlMonitorBuilderPageDefault } from './etl-monitor-builder-page.component';
+export { EtlMonitorBuilderModalWrapper, EtlMonitorBuilderModal, default as EtlMonitorBuilderModalDefault } from './etl-monitor-builder-modal.component';
+export { BuilderProvider, useBuilderContext, useUpdateBuilderState, useStepNavigation } from './etl-monitor-builder-context';
+export { getAllValidationErrors, generateConfigFromState, isBuilderStateValid, stateToSavePayload } from './builder-state-machine';
+export type { StepValidation } from './builder-state-machine';

package/src/components/etl-monitor/builder/monitor-preview.tsx

@@ -0,0 +1,124 @@
+/**
+ * Shared monitor preview helpers
+ * Renders the real MonitorRenderer with the config generated from builder
+ * state, fed with endpoint test data or synthesized sample data.
+ */
+
+import React from 'react';
+import { generateConfigFromState } from './builder-state-machine';
+import { MonitorRenderer } from '../renderers/MonitorRenderer';
+import type { DisplayConfigV2 } from '../../../types/etl-monitor/etl-monitor-v2.types';
+
+interface MonitorPreviewRendererProps {
+  state: any;
+}
+
+/**
+ * Render the monitor exactly as it will appear on the dashboard
+ */
+export function MonitorPreviewRenderer({ state }: MonitorPreviewRendererProps) {
+  const displayConfig: DisplayConfigV2 = generateConfigFromState(state);
+
+  // Prefer real data captured by the endpoint test, fall back to sample data
+  const sampleData = state.testResult?.data || createSampleData(state, displayConfig);
+
+  // Rendered by the exact same MonitorRenderer the dashboard uses — no preview-specific styling
+  return <MonitorRenderer config={displayConfig} data={sampleData} loading={false} error={null} />;
+}
+
+/**
+ * Create sample data for preview based on configured fields
+ */
+export function createSampleData(state: any, config: DisplayConfigV2): any {
+  const { fields, componentType } = state;
+
+  if (!fields || fields.length === 0) {
+    return {};
+  }
+
+  const sample: any = {};
+
+  fields.forEach((field: any) => {
+    const path = field.path;
+
+    if (path.startsWith('$.')) {
+      const fieldName = path.slice(2);
+      sample[fieldName] = getSampleValueForField(field);
+    } else {
+      sample[field.key] = getSampleValueForField(field);
+    }
+  });
+
+  // For table components, create an array of rows
+  if (componentType === 'DATA_TABLE' || componentType === 'TABLE' || componentType === 'ERROR_LOG') {
+    const arrayPath = config.data?.arrayPath || '$.data';
+    const basePath = arrayPath.startsWith('$.') ? arrayPath.slice(2) : 'data';
+
+    sample[basePath] = [
+      createRowSample(fields, 0),
+      createRowSample(fields, 1, { status: 'COMPLETED', result: 'SUCCESS' }),
+      createRowSample(fields, 2, { status: 'FAILED', result: 'ERROR' }),
+    ];
+  }
+
+  return sample;
+}
+
+/**
+ * Get a sample value for a specific field type with row index variation
+ */
+function getSampleValueForField(field: any, rowIndex: number = 0): any {
+  switch (field.type) {
+    case 'STATUS':
+      if (field.statusMappings && field.statusMappings.length > 0) {
+        return field.statusMappings[0].rawValue || 'UP';
+      }
+      return 'UP';
+    case 'TIMESTAMP':
+      return Date.now() - (rowIndex * 3600000);
+    case 'DURATION':
+      return 1000 + (rowIndex * 500);
+    case 'BOOLEAN':
+      return rowIndex % 2 === 0;
+    case 'NUMBER':
+    case 'INTEGER':
+    case 'DECIMAL':
+      return Math.floor(Math.random() * 1000) + 100 + (rowIndex * 100);
+    case 'PERCENTAGE':
+      return Math.max(0, Math.min(100, 80 - (rowIndex * 20)));
+    case 'DATE':
+      return new Date(Date.now() - (rowIndex * 86400000)).toISOString().split('T')[0];
+    case 'TIME':
+      return new Date(Date.now() - (rowIndex * 3600000)).toTimeString().split(' ')[0];
+    default:
+      return `Sample ${field.label} ${rowIndex + 1}`;
+  }
+}
+
+/**
+ * Create a sample row for table components
+ */
+function createRowSample(fields: any[], index: number, overrides: Record<string, any> = {}): any {
+  const row: any = { _id: index + 1 };
+
+  fields.forEach((field: any) => {
+    const path = field.path;
+    let fieldName;
+
+    if (path.startsWith('$.')) {
+      fieldName = path.slice(2);
+    } else if (path.includes('.')) {
+      fieldName = path.split('.').pop();
+    } else {
+      fieldName = field.key;
+    }
+
+    if (overrides[fieldName] !== undefined) {
+      row[fieldName] = overrides[fieldName];
+    } else {
+      row[fieldName] = getSampleValueForField(field, index);
+    }
+  });
+
+  return row;
+}