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

package/src/features/report-visualizer/components/ReportExplorer/ReportList.tsx

@@ -0,0 +1,287 @@
+/**
+ * Report List Component
+ *
+ * Enhanced list of filtered reports with keyboard navigation, hover states,
+ * and improved visual feedback. Supports arrow keys, Enter, and Escape.
+ *
+ * Improvements:
+ * - Keyboard navigation (↑/↓ arrows, Enter to select, Escape to clear)
+ * - Hover states with smooth transitions
+ * - Better visual hierarchy with selection highlight
+ * - Keyboard focus indicator
+ * - Empty state with helpful message
+ * - Loading skeleton
+ *
+ * Phase 2.4: Report list display (Enhanced)
+ */
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { Checkmark, Document, Search } from '@carbon/react/icons';
+
+import type { ReportLibraryItem } from '../../types';
+
+interface ReportListProps {
+  reports: ReportLibraryItem[];
+  selectedReportUuid?: string;
+  onSelect: (report: ReportLibraryItem) => void;
+  loading?: boolean;
+  searchQuery?: string;
+}
+
+const ReportList: React.FC<ReportListProps> = ({
+  reports,
+  selectedReportUuid,
+  onSelect,
+  loading,
+  searchQuery = '',
+}) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [focusedIndex, setFocusedIndex] = useState<number>(-1);
+  const listRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
+    if (reports.length === 0) return;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        setFocusedIndex((prev) => {
+          const next = Math.min(prev + 1, reports.length - 1);
+          // Scroll into view
+          itemRefs.current[next]?.scrollIntoView({ block: 'nearest' });
+          return next;
+        });
+        break;
+
+      case 'ArrowUp':
+        event.preventDefault();
+        setFocusedIndex((prev) => {
+          const next = Math.max(prev - 1, 0);
+          // Scroll into view
+          itemRefs.current[next]?.scrollIntoView({ block: 'nearest' });
+          return next;
+        });
+        break;
+
+      case 'Enter':
+        event.preventDefault();
+        if (focusedIndex >= 0 && focusedIndex < reports.length) {
+          onSelect(reports[focusedIndex]);
+        }
+        break;
+
+      case 'Escape':
+        event.preventDefault();
+        setFocusedIndex(-1);
+        break;
+    }
+  }, [reports, focusedIndex, onSelect]);
+
+  // Reset focused index when reports change
+  useEffect(() => {
+    setFocusedIndex(-1);
+    setHoveredIndex(null);
+  }, [reports.length, searchQuery]);
+
+  // Set focused index to selected report when selection changes
+  useEffect(() => {
+    if (selectedReportUuid) {
+      const selectedIndex = reports.findIndex((r) => r.uuid === selectedReportUuid);
+      if (selectedIndex >= 0) {
+        setFocusedIndex(selectedIndex);
+      }
+    }
+  }, [selectedReportUuid, reports]);
+
+  if (loading) {
+    return (
+      <div style={{ padding: '1rem' }}>
+        {/* Loading skeleton */}
+        {[1, 2, 3].map((i) => (
+          <div
+            key={i}
+            style={{
+              padding: '0.75rem',
+              marginBottom: '0.5rem',
+              backgroundColor: '#f5f5f5',
+              borderRadius: '4px',
+              animation: 'pulse 1.5s ease-in-out infinite',
+            }}
+          >
+            <div
+              style={{
+                height: '14px',
+                width: '70%',
+                backgroundColor: '#e0e0e0',
+                borderRadius: '2px',
+                marginBottom: '0.5rem',
+              }}
+            />
+            <div
+              style={{
+                height: '12px',
+                width: '40%',
+                backgroundColor: '#e0e0e0',
+                borderRadius: '2px',
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (reports.length === 0) {
+    return (
+      <div
+        style={{
+          padding: '2rem 1rem',
+          textAlign: 'center',
+          color: '#666',
+        }}
+      >
+        {searchQuery ? (
+          <>
+            <Search
+              size={32}
+              style={{ marginBottom: '0.75rem', opacity: 0.4, color: '#999' }}
+            />
+            <p style={{ fontSize: '0.875rem', marginBottom: '0.25rem' }}>
+              No reports match "{searchQuery}"
+            </p>
+            <p style={{ fontSize: '0.75rem', color: '#999' }}>
+              Try adjusting your search or filters
+            </p>
+          </>
+        ) : (
+          <>
+            <Document
+              size={32}
+              style={{ marginBottom: '0.75rem', opacity: 0.4 }}
+            />
+            <p style={{ fontSize: '0.875rem', marginBottom: '0.25rem' }}>
+              No reports available
+            </p>
+            <p style={{ fontSize: '0.75rem', color: '#999' }}>
+              Select a category to see reports
+            </p>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={listRef}
+      role="listbox"
+      aria-label="Reports"
+      onKeyDown={handleKeyDown}
+      tabIndex={-1}
+      style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}
+    >
+      {reports.map((report, index) => {
+        const isSelected = report.uuid === selectedReportUuid;
+        const isFocused = index === focusedIndex;
+        const isHovered = index === hoveredIndex;
+
+        return (
+          <div
+            key={report.uuid}
+            ref={(el) => (itemRefs.current[index] = el)}
+            onClick={() => onSelect(report)}
+            onMouseEnter={() => setHoveredIndex(index)}
+            onMouseLeave={() => setHoveredIndex(null)}
+            role="option"
+            aria-selected={isSelected}
+            tabIndex={isFocused ? 0 : -1}
+            style={{
+              padding: '0.75rem',
+              backgroundColor: isSelected
+                ? '#e0f2ff'
+                : isFocused
+                ? '#f4f8ff'
+                : isHovered
+                ? '#fafafa'
+                : '#ffffff',
+              border: isSelected
+                ? '2px solid #0f62fe'
+                : isFocused
+                ? '2px solid #8ca3f7'
+                : '1px solid #e0e0e0',
+              borderRadius: '6px',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'flex-start',
+              justifyContent: 'space-between',
+              transition: 'all 0.15s ease',
+              transform: isFocused ? 'translateX(2px)' : 'translateX(0)',
+              boxShadow: isFocused
+                ? '0 2px 8px rgba(15, 98, 254, 0.15)'
+                : isSelected
+                ? '0 1px 4px rgba(15, 98, 254, 0.1)'
+                : 'none',
+            }}
+          >
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div
+                style={{
+                  fontWeight: isSelected || isFocused ? 600 : 500,
+                  color: '#161616',
+                  marginBottom: '0.25rem',
+                  fontSize: '0.875rem',
+                }}
+              >
+                {report.name}
+              </div>
+              {report.code && (
+                <div
+                  style={{
+                    fontSize: '0.75rem',
+                    color: '#666',
+                    display: 'inline-block',
+                    padding: '2px 6px',
+                    backgroundColor: '#f0f0f0',
+                    borderRadius: '3px',
+                    marginBottom: '0.25rem',
+                  }}
+                >
+                  {report.code}
+                </div>
+              )}
+              {report.description && (
+                <div
+                  style={{
+                    fontSize: '0.75rem',
+                    color: '#666',
+                    marginTop: '0.25rem',
+                    lineHeight: '1.4',
+                  }}
+                >
+                  {report.description}
+                </div>
+              )}
+            </div>
+            {isSelected && (
+              <div
+                style={{
+                  backgroundColor: '#0f62fe',
+                  borderRadius: '50%',
+                  padding: '4px',
+                  flexShrink: 0,
+                  marginLeft: '0.5rem',
+                  marginTop: '2px',
+                }}
+              >
+                <Checkmark size={12} style={{ color: '#ffffff' }} />
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ReportList;

package/src/features/report-visualizer/components/ReportExplorer/ReportSearch.tsx

@@ -0,0 +1,151 @@
+/**
+ * Report Search Component
+ *
+ * Enhanced search input with keyboard shortcut (Ctrl+K / Cmd+K), quick clear,
+ * and better visual feedback for filtering reports by name, code, or tag.
+ *
+ * Improvements:
+ * - Global keyboard shortcut (Ctrl+K / Cmd+K)
+ * - Visual indicator for active search
+ * - Quick clear button when has value
+ * - Better placeholder with shortcut hint
+ * - Focus ring for accessibility
+ *
+ * Phase 2.1: Search functionality (Enhanced)
+ */
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { TextInput, Button } from '@carbon/react';
+import { Close, Search as SearchIcon } from '@carbon/react/icons';
+
+interface ReportSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+const ReportSearch: React.FC<ReportSearchProps> = ({ value, onChange, disabled }) => {
+  const [localValue, setLocalValue] = useState(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isFocused, setIsFocused] = useState(false);
+
+  // Create debounced onChange function
+  const debouncedOnChange = useMemo(
+    () => {
+      let timeoutId: NodeJS.Timeout | null = null;
+      return (newValue: string) => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+          onChange(newValue);
+        }, 200); // Faster debounce for better responsiveness
+      };
+    },
+    [onChange]
+  );
+
+  // Sync local value when prop value changes externally
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  // Handle keyboard shortcut (Ctrl+K / Cmd+K)
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+        event.preventDefault();
+        inputRef.current?.focus();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    setLocalValue(newValue);
+    debouncedOnChange(newValue);
+  };
+
+  const handleClear = () => {
+    setLocalValue('');
+    onChange('');
+    inputRef.current?.focus();
+  };
+
+  const hasValue = localValue.length > 0;
+  const isActive = value.length > 0;
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <TextInput
+        ref={inputRef}
+        id="report-search-input"
+        labelText=""
+        placeholder="Search... (⌘K)"
+        value={localValue}
+        onChange={handleChange}
+        disabled={disabled}
+        size="sm"
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        style={{
+          borderColor: isActive ? '#0f62fe' : isFocused ? '#0f62fe' : undefined,
+          backgroundColor: isActive ? '#f4f8ff' : undefined,
+        }}
+      />
+      {/* Search icon on left */}
+      <div
+        style={{
+          position: 'absolute',
+          left: '0.75rem',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          color: isActive ? '#0f62fe' : '#666',
+          pointerEvents: 'none',
+          transition: 'color 0.15s ease',
+        }}
+      >
+        <SearchIcon size={16} />
+      </div>
+      {/* Clear button on right - only show when has value */}
+      {hasValue && (
+        <Button
+          kind="ghost"
+          size="sm"
+          hasIconOnly
+          renderIcon={Close}
+          iconDescription="Clear search"
+          onClick={handleClear}
+          style={{
+            position: 'absolute',
+            right: '0.25rem',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            padding: '0.25rem',
+            minWidth: 'auto',
+            width: '28px',
+            height: '28px',
+          }}
+        />
+      )}
+      {/* Active indicator */}
+      {isActive && (
+        <div
+          style={{
+            position: 'absolute',
+            left: '0',
+            top: '0',
+            bottom: '0',
+            width: '3px',
+            backgroundColor: '#0f62fe',
+            borderRadius: '4px 0 0 4px',
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ReportSearch;

package/src/features/report-visualizer/components/ReportExplorer/ReportTagFilter.tsx

@@ -0,0 +1,100 @@
+/**
+ * Report Tag Filter Component
+ *
+ * Multi-select tag filter for filtering reports by tags.
+ * Shows selected tags as removable chips.
+ * Uses AND logic: report must match ALL selected tags.
+ *
+ * Phase 2.3: Tag filtering
+ */
+import React, { useState, useMemo } from 'react';
+import { Tag, ComboBox, Button } from '@carbon/react';
+import { Close } from '@carbon/react/icons';
+
+interface ReportTagFilterProps {
+  availableTags: string[];
+  selectedTags: string[];
+  onChange: (tags: string[]) => void;
+  disabled?: boolean;
+}
+
+const ReportTagFilter: React.FC<ReportTagFilterProps> = ({
+  availableTags,
+  selectedTags,
+  onChange,
+  disabled,
+}) => {
+  const [inputValue, setInputValue] = useState('');
+
+  // Convert available tags to ComboBox items format
+  const tagItems = useMemo(() => {
+    return availableTags
+      .filter((tag) => !selectedTags.includes(tag))
+      .map((tag) => ({
+        id: tag,
+        label: tag,
+        value: tag,
+      }));
+  }, [availableTags, selectedTags]);
+
+  // Remove a tag from selection
+  const handleRemoveTag = (tagToRemove: string) => {
+    onChange(selectedTags.filter((tag) => tag !== tagToRemove));
+  };
+
+  // Add a tag from ComboBox
+  const handleAddTag = (selectedItem: any) => {
+    if (selectedItem && !selectedTags.includes(selectedItem.value)) {
+      onChange([...selectedTags, selectedItem.value]);
+      setInputValue('');
+    }
+  };
+
+  return (
+    <div>
+      {/* Selected tags display */}
+      {selectedTags.length > 0 && (
+        <div style={{ marginBottom: '0.5rem', display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+          {selectedTags.map((tag) => (
+            <Tag
+              key={tag}
+              type="blue"
+              style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}
+            >
+              {tag}
+              <Button
+                kind="ghost"
+                size="sm"
+                hasIconOnly
+                renderIcon={Close}
+                iconDescription={`Remove ${tag}`}
+                onClick={() => handleRemoveTag(tag)}
+                style={{ marginLeft: '0.25rem', padding: '0' }}
+              />
+            </Tag>
+          ))}
+        </div>
+      )}
+
+      {/* Tag selector */}
+      <ComboBox
+        id="report-tag-filter"
+        titleText="Tags"
+        placeholder="Add tag filter"
+        items={tagItems}
+        value={inputValue}
+        itemToString={(item: any) => item?.label || ''}
+        onChange={({ selectedItem }) => {
+          if (selectedItem) {
+            handleAddTag(selectedItem);
+          }
+        }}
+        onInputChange={(e: any) => setInputValue(e.target.value || '')}
+        disabled={disabled}
+        size="sm"
+      />
+    </div>
+  );
+};
+
+export default ReportTagFilter;

package/src/features/report-visualizer/components/ReportExplorer/RunReportButton.tsx

@@ -0,0 +1,42 @@
+/**
+ * Run Report Button Component
+ *
+ * Primary action button at the bottom of the explorer panel.
+ * Properly labeled "Run report" (not "View report").
+ *
+ * Phase 2.6: Run report button
+ */
+import React from 'react';
+import { Button } from '@carbon/react';
+import { Play, ArrowRight } from '@carbon/react/icons';
+
+interface RunReportButtonProps {
+  disabled?: boolean;
+  loading?: boolean;
+  onClick: () => void;
+  reportSelected?: boolean;
+}
+
+const RunReportButton: React.FC<RunReportButtonProps> = ({
+  disabled,
+  loading,
+  onClick,
+  reportSelected,
+}) => {
+  return (
+    <div style={{ padding: '1rem', borderTop: '1px solid #e0e0e0', marginTop: 'auto' }}>
+      <Button
+        kind="primary"
+        size="lg"
+        renderIcon={reportSelected ? Play : ArrowRight}
+        onClick={onClick}
+        disabled={disabled || loading || !reportSelected}
+        style={{ width: '100%' }}
+      >
+        {loading ? 'Running...' : reportSelected ? 'Run report' : 'Select a report'}
+      </Button>
+    </div>
+  );
+};
+
+export default RunReportButton;