@fgv/ts-res-ui-components 5.0.0-10

package/src/components/views/ResolutionView/EditableJsonView.tsx

@@ -0,0 +1,214 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { JsonEditor } from 'json-edit-react';
+import { PencilIcon, CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { validateEditedResource } from '../../../utils/resolutionEditing';
+
+export interface EditableJsonViewProps {
+  /** The original JSON value */
+  value: any;
+  /** The resource ID for tracking edits */
+  resourceId: string;
+  /** Whether this resource has been edited */
+  isEdited?: boolean;
+  /** The current edited value if any */
+  editedValue?: any;
+  /** Callback when the user saves an edit */
+  onSave?: (resourceId: string, editedValue: any, originalValue: any) => void;
+  /** Callback when the user cancels an edit */
+  onCancel?: (resourceId: string) => void;
+  /** Whether editing is currently disabled */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const EditableJsonView: React.FC<EditableJsonViewProps> = ({
+  value,
+  resourceId,
+  isEdited = false,
+  editedValue,
+  onSave,
+  onCancel,
+  disabled = false,
+  className = ''
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [currentEditValue, setCurrentEditValue] = useState<any>(null);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+
+  // The display value is either the edited value or the original value
+  const displayValue = useMemo(() => {
+    if (isEdited && editedValue !== undefined) {
+      return editedValue;
+    }
+    return value;
+  }, [value, editedValue, isEdited]);
+
+  // Handle starting an edit
+  const handleStartEdit = useCallback(() => {
+    if (disabled) return;
+    setCurrentEditValue(displayValue);
+    setIsEditing(true);
+    setValidationErrors([]);
+  }, [displayValue, disabled]);
+
+  // Handle canceling an edit
+  const handleCancelEdit = useCallback(() => {
+    setIsEditing(false);
+    setCurrentEditValue(null);
+    setValidationErrors([]);
+    onCancel?.(resourceId);
+  }, [resourceId, onCancel]);
+
+  // Handle saving an edit
+  const handleSaveEdit = useCallback(() => {
+    if (!onSave || currentEditValue === null) return;
+
+    // Validate the edited value
+    const validation = validateEditedResource(currentEditValue);
+    if (!validation.isValid) {
+      setValidationErrors(validation.errors);
+      return;
+    }
+
+    // Save the edit
+    onSave(resourceId, currentEditValue, value);
+    setIsEditing(false);
+    setCurrentEditValue(null);
+    setValidationErrors([]);
+  }, [resourceId, currentEditValue, value, onSave]);
+
+  // Handle changes in the JSON editor
+  const handleJsonChange = useCallback(
+    (newValue: any) => {
+      setCurrentEditValue(newValue);
+
+      // Clear validation errors when user starts typing
+      if (validationErrors.length > 0) {
+        setValidationErrors([]);
+      }
+    },
+    [validationErrors]
+  );
+
+  // JSON editor configuration
+  const jsonEditConfig = useMemo(
+    () => ({
+      minHeight: '200px',
+      maxHeight: '400px',
+      style: {
+        container: {
+          backgroundColor: '#f9fafb',
+          border: '1px solid #d1d5db',
+          borderRadius: '0.375rem',
+          fontFamily:
+            'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+        },
+        key: {
+          color: '#1f2937',
+          fontWeight: '500'
+        },
+        string: {
+          color: '#059669'
+        },
+        number: {
+          color: '#dc2626'
+        },
+        boolean: {
+          color: '#7c3aed'
+        },
+        null: {
+          color: '#6b7280'
+        }
+      },
+      enableHighlight: true,
+      enableClipboard: true
+    }),
+    []
+  );
+
+  return (
+    <div className={`bg-white rounded-lg border ${className}`}>
+      {/* Header with edit controls */}
+      <div className="flex items-center justify-between p-3 border-b bg-gray-50">
+        <div className="flex items-center space-x-2">
+          <h4 className="text-sm font-semibold text-gray-900">Resource Content</h4>
+          {isEdited && (
+            <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+              Edited
+            </span>
+          )}
+        </div>
+
+        {!isEditing && (
+          <button
+            onClick={handleStartEdit}
+            disabled={disabled}
+            className="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            title="Edit resource content"
+          >
+            <PencilIcon className="h-4 w-4 mr-1" />
+            Edit
+          </button>
+        )}
+
+        {isEditing && (
+          <div className="flex items-center space-x-2">
+            <button
+              onClick={handleSaveEdit}
+              disabled={validationErrors.length > 0}
+              className="inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Save changes"
+            >
+              <CheckIcon className="h-4 w-4 mr-1" />
+              Save
+            </button>
+            <button
+              onClick={handleCancelEdit}
+              className="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              title="Cancel changes"
+            >
+              <XMarkIcon className="h-4 w-4 mr-1" />
+              Cancel
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Validation errors */}
+      {validationErrors.length > 0 && (
+        <div className="p-3 border-b bg-red-50">
+          <div className="text-sm text-red-800">
+            <p className="font-medium mb-1">Validation Errors:</p>
+            <ul className="list-disc list-inside space-y-1">
+              {validationErrors.map((error, index) => (
+                <li key={index}>{error}</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+
+      {/* JSON content */}
+      <div className="p-3">
+        {isEditing ? (
+          <JsonEditor data={currentEditValue} setData={handleJsonChange} {...jsonEditConfig} />
+        ) : (
+          <pre className="text-sm font-mono text-gray-800 bg-gray-50 p-3 rounded border overflow-x-auto whitespace-pre-wrap">
+            {JSON.stringify(displayValue, null, 2)}
+          </pre>
+        )}
+      </div>
+
+      {/* Help text */}
+      {isEditing && (
+        <div className="px-3 pb-3">
+          <p className="text-xs text-gray-500">
+            Edit the JSON content above. Changes will be saved as a new candidate with the current resolution
+            context.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/views/ResolutionView/ResolutionEditControls.tsx

@@ -0,0 +1,170 @@
+import React, { useState } from 'react';
+import {
+  CheckIcon,
+  XMarkIcon,
+  ExclamationTriangleIcon,
+  ArrowPathIcon,
+  DocumentTextIcon
+} from '@heroicons/react/24/outline';
+
+export interface ResolutionEditControlsProps {
+  /** Number of unsaved edits */
+  editCount: number;
+  /** Whether edit application is currently in progress */
+  isApplying: boolean;
+  /** Whether any edits exist to operate on */
+  hasEdits: boolean;
+  /** Callback to apply all pending edits */
+  onApplyEdits?: () => Promise<void>;
+  /** Callback to discard all pending edits */
+  onDiscardEdits?: () => void;
+  /** Whether the controls should be disabled */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const ResolutionEditControls: React.FC<ResolutionEditControlsProps> = ({
+  editCount,
+  isApplying,
+  hasEdits,
+  onApplyEdits,
+  onDiscardEdits,
+  disabled = false,
+  className = ''
+}) => {
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
+
+  const handleApplyEdits = async () => {
+    if (onApplyEdits && !isApplying && hasEdits) {
+      await onApplyEdits();
+    }
+  };
+
+  const handleDiscardEdits = () => {
+    if (onDiscardEdits && hasEdits && !isApplying) {
+      onDiscardEdits();
+      setShowDiscardConfirm(false);
+    }
+  };
+
+  const handleDiscardClick = () => {
+    if (hasEdits) {
+      setShowDiscardConfirm(true);
+    }
+  };
+
+  if (!hasEdits && !isApplying) {
+    return (
+      <div className={`bg-gray-50 rounded-lg border border-gray-200 p-4 ${className}`}>
+        <div className="flex items-center justify-center text-gray-500">
+          <DocumentTextIcon className="h-5 w-5 mr-2" />
+          <span className="text-sm">No pending edits</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`bg-white rounded-lg border border-gray-200 shadow-sm ${className}`}>
+      <div className="p-4">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center">
+            <div className="flex items-center space-x-2">
+              <h3 className="text-lg font-semibold text-gray-900">Pending Edits</h3>
+              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                {editCount} edit{editCount !== 1 ? 's' : ''}
+              </span>
+            </div>
+          </div>
+
+          {isApplying && (
+            <div className="flex items-center text-blue-600">
+              <ArrowPathIcon className="h-4 w-4 mr-1 animate-spin" />
+              <span className="text-sm font-medium">Applying...</span>
+            </div>
+          )}
+        </div>
+
+        {/* Info text */}
+        <p className="text-sm text-gray-600 mb-4">
+          You have {editCount} unsaved edit{editCount !== 1 ? 's' : ''}.{' '}
+          {editCount === 1 ? 'This edit' : 'These edits'} will be applied as new candidate
+          {editCount !== 1 ? 's' : ''} with the current resolution context.
+        </p>
+
+        {/* Action buttons */}
+        {!showDiscardConfirm ? (
+          <div className="flex items-center space-x-3">
+            <button
+              onClick={handleApplyEdits}
+              disabled={disabled || isApplying || !hasEdits}
+              className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isApplying ? (
+                <>
+                  <ArrowPathIcon className="h-4 w-4 mr-2 animate-spin" />
+                  Applying Edits...
+                </>
+              ) : (
+                <>
+                  <CheckIcon className="h-4 w-4 mr-2" />
+                  Apply Edits
+                </>
+              )}
+            </button>
+
+            <button
+              onClick={handleDiscardClick}
+              disabled={disabled || isApplying || !hasEdits}
+              className="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <XMarkIcon className="h-4 w-4 mr-2" />
+              Discard Edits
+            </button>
+          </div>
+        ) : (
+          /* Discard confirmation */
+          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+            <div className="flex items-start">
+              <ExclamationTriangleIcon className="h-5 w-5 text-yellow-400 mt-0.5 mr-3" />
+              <div className="flex-1">
+                <h4 className="text-sm font-medium text-yellow-800 mb-1">Confirm Discard</h4>
+                <p className="text-sm text-yellow-700 mb-3">
+                  Are you sure you want to discard {editCount} unsaved edit{editCount !== 1 ? 's' : ''}? This
+                  action cannot be undone.
+                </p>
+                <div className="flex items-center space-x-3">
+                  <button
+                    onClick={handleDiscardEdits}
+                    className="inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-red-600 border border-transparent rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+                  >
+                    <XMarkIcon className="h-4 w-4 mr-1" />
+                    Yes, Discard
+                  </button>
+                  <button
+                    onClick={() => setShowDiscardConfirm(false)}
+                    className="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Warning about system rebuild */}
+      {hasEdits && !showDiscardConfirm && (
+        <div className="border-t border-gray-200 px-4 py-3 bg-blue-50">
+          <p className="text-xs text-blue-700">
+            <strong>Note:</strong> Applying edits will rebuild the entire resource system with your changes.
+            This may take a moment and will update all resolution results.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};