feat(diff-tool) - make some improvements (#941)

* feat(diff-tool) - make some improvements

* fix format

* fix recursive fields

* remove dead code

* fix fieldProps

* fix basicInformationVersions

Author: gabrielseco

src/components/JsonSchemaComparison/SchemaFormComparison.tsx

@@ -24,13 +24,11 @@ interface SchemaFormComparisonProps {
 const FieldWrapper = ({
   children,
   diffType,
-  orderChanged,
   changes,
 }: {
   children: React.ReactNode;
   diffType: 'added' | 'removed' | 'modified' | 'unchanged';
   fieldName: string;
-  orderChanged?: { oldIndex: number; newIndex: number };
   changes?: {
     label?: { old: string; new: string };
     required?: { old: boolean; new: boolean };
@@ -54,9 +52,9 @@ const FieldWrapper = ({
     nestedFields?: unknown[];
   };
 }) => {
-  const styles = getDiffStyles(diffType, !!orderChanged);
+  const styles = getDiffStyles(diffType);
 
-  if (diffType === 'unchanged' && !orderChanged) {
+  if (diffType === 'unchanged') {
     return <div>{children}</div>;
   }
 
@@ -78,14 +76,7 @@ const FieldWrapper = ({
     ),
   };
 
-  const reorderedBadge = orderChanged && diffType === 'unchanged' && (
-    <span className='text-xs font-semibold text-blue-700 bg-blue-100 px-2 py-1 rounded'>
-      MOVED
-    </span>
-  );
-
-  const badge =
-    reorderedBadge || (diffType !== 'unchanged' && badges[diffType]);
+  const badge = badges[diffType];
 
   const renderChanges = () => {
     if (!changes || diffType !== 'modified') return null;
@@ -221,12 +212,7 @@ const FieldWrapper = ({
 
   return (
     <div className={`p-3 mb-2 rounded ${styles} relative`}>
-      <div className='absolute top-2 right-2'>
-        {badge}
-        {orderChanged && diffType !== 'unchanged' && (
-          <span className='ml-2 text-xs text-gray-600'>(position changed)</span>
-        )}
-      </div>
+      <div className='absolute top-2 right-2'>{badge}</div>
       {children}
       {renderChanges()}
     </div>
@@ -248,7 +234,6 @@ const FormPanel = ({
     string,
     {
       diffType: 'added' | 'removed' | 'modified' | 'unchanged';
-      orderChanged?: { oldIndex: number; newIndex: number };
       changes?: unknown;
     }
   >;
@@ -260,26 +245,83 @@ const FormPanel = ({
   });
 
   const fieldsWithWrappers = useMemo(() => {
-    return fields.map((field) => {
-      const diff = diffMap.get(field.name);
-      const diffType = diff?.diffType || 'unchanged';
-      const orderChanged = diff?.orderChanged;
-      const changes = diff?.changes;
-
-      return {
-        ...field,
-        WrapperComponent: ({ children }: { children: React.ReactNode }) => (
-          <FieldWrapper
-            diffType={diffType}
-            fieldName={field.name}
-            orderChanged={orderChanged}
-            changes={changes as never}
-          >
-            {children}
-          </FieldWrapper>
-        ),
-      };
-    });
+    // Recursive function to apply wrappers to fields and their nested fields
+    const applyWrappers = (
+      fields: JSFField[],
+      diffMap: Map<
+        string,
+        {
+          diffType: 'added' | 'removed' | 'modified' | 'unchanged';
+          changes?: unknown;
+        }
+      >,
+    ): JSFField[] => {
+      return fields.map((field) => {
+        const diff = diffMap.get(field.name);
+        const diffType = diff?.diffType || 'unchanged';
+        const changes = diff?.changes;
+
+        // If this field has nested fields (e.g., fieldset), recursively apply wrappers
+        const nestedFields = (field as never as { fields?: JSFField[] }).fields;
+        let processedField = field;
+
+        if (nestedFields && Array.isArray(nestedFields)) {
+          // Build a nested diff map from the changes.nestedFields
+          const nestedDiffMap = new Map<
+            string,
+            {
+              diffType: 'added' | 'removed' | 'modified' | 'unchanged';
+              changes?: unknown;
+            }
+          >();
+
+          if (
+            changes &&
+            typeof changes === 'object' &&
+            'nestedFields' in changes &&
+            Array.isArray(changes.nestedFields)
+          ) {
+            (
+              changes.nestedFields as Array<{
+                fieldName: string;
+                diffType: 'added' | 'removed' | 'modified' | 'unchanged';
+                changes?: unknown;
+              }>
+            ).forEach((nestedDiff) => {
+              nestedDiffMap.set(nestedDiff.fieldName, {
+                diffType: nestedDiff.diffType,
+                changes: nestedDiff.changes,
+              });
+            });
+          }
+
+          // Recursively apply wrappers to nested fields
+          const wrappedNestedFields = applyWrappers(
+            nestedFields,
+            nestedDiffMap,
+          );
+          processedField = {
+            ...field,
+            fields: wrappedNestedFields,
+          } as JSFField;
+        }
+
+        return {
+          ...processedField,
+          WrapperComponent: ({ children }: { children: React.ReactNode }) => (
+            <FieldWrapper
+              diffType={diffType}
+              fieldName={field.name}
+              changes={changes as never}
+            >
+              {children}
+            </FieldWrapper>
+          ),
+        };
+      });
+    };
+
+    return applyWrappers(fields, diffMap);
   }, [fields, diffMap]);
 
   return (
@@ -369,8 +411,7 @@ export const SchemaFormComparison = ({
   const hasNoDifferences =
     diff.added.length === 0 &&
     diff.removed.length === 0 &&
-    diff.modified.length === 0 &&
-    diff.reordered.length === 0;
+    diff.modified.length === 0;
 
   return (
     <div className='space-y-6'>
@@ -409,15 +450,6 @@ export const SchemaFormComparison = ({
                   </span>
                 </div>
               )}
-              {diff.reordered.length > 0 && (
-                <div className='flex items-center gap-2'>
-                  <span className='w-4 h-4 bg-blue-500 rounded'></span>
-                  <span className='text-sm'>
-                    {diff.reordered.length} field
-                    {diff.reordered.length > 1 ? 's' : ''} reordered
-                  </span>
-                </div>
-              )}
             </div>
           )}
         </CardContent>

src/components/JsonSchemaComparison/formDiffDetector.ts

@@ -6,7 +6,6 @@ export type DiffType = 'added' | 'removed' | 'modified' | 'unchanged';
 export interface FieldDiff {
   fieldName: string;
   diffType: DiffType;
-  orderChanged?: { oldIndex: number; newIndex: number };
   changes?: {
     label?: { old: string; new: string };
     required?: { old: boolean; new: boolean };
@@ -36,7 +35,6 @@ export interface FormDiff {
   removed: string[];
   modified: string[];
   unchanged: string[];
-  reordered: string[];
   fieldDiffs: Map<string, FieldDiff>;
 }
 
@@ -125,24 +123,14 @@ const compareNestedFields = (
   const hasChanges =
     nestedDiff.added.length > 0 ||
     nestedDiff.removed.length > 0 ||
-    nestedDiff.modified.length > 0 ||
-    nestedDiff.reordered.length > 0;
+    nestedDiff.modified.length > 0;
 
   if (!hasChanges) return undefined;
 
   return Array.from(nestedDiff.fieldDiffs.values());
 };
 
-const isFieldModified = (
-  field1: JSFField,
-  field2: JSFField,
-  index1: number,
-  index2: number,
-): boolean => {
-  if (index1 !== index2) {
-    return true;
-  }
-
+const isFieldModified = (field1: JSFField, field2: JSFField): boolean => {
   // Only compare user-facing schema properties, not internal/computed ones
   // Ignore: schema (Yup), computedAttributes, scopedJsonSchema, errorMessage, meta, description
   // Note: nested fields are checked via compareNestedFields to avoid deep equal with problematic properties
@@ -178,8 +166,7 @@ const isFieldModified = (
     return (
       nestedDiff.added.length > 0 ||
       nestedDiff.removed.length > 0 ||
-      nestedDiff.modified.length > 0 ||
-      nestedDiff.reordered.length > 0
+      nestedDiff.modified.length > 0
     );
   })();
 
@@ -280,18 +267,13 @@ export const compareFormFields = (
   const validFields1 = fields1.filter(validateField);
   const validFields2 = fields2.filter(validateField);
 
-  const fieldMap1 = new Map(
-    validFields1.map((f, i) => [f.name, { field: f, index: i }]),
-  );
-  const fieldMap2 = new Map(
-    validFields2.map((f, i) => [f.name, { field: f, index: i }]),
-  );
+  const fieldMap1 = new Map(validFields1.map((f) => [f.name, { field: f }]));
+  const fieldMap2 = new Map(validFields2.map((f) => [f.name, { field: f }]));
 
   const added: string[] = [];
   const removed: string[] = [];
   const modified: string[] = [];
   const unchanged: string[] = [];
-  const reordered: string[] = [];
   const fieldDiffs = new Map<string, FieldDiff>();
 
   fieldMap2.forEach((_, name) => {
@@ -304,39 +286,23 @@ export const compareFormFields = (
     }
   });
 
-  fieldMap1.forEach(({ field: field1, index: index1 }, name) => {
+  fieldMap1.forEach(({ field: field1 }, name) => {
     if (!fieldMap2.has(name)) {
       removed.push(name);
       fieldDiffs.set(name, {
         fieldName: name,
         diffType: 'removed',
       });
     } else {
-      const { field: field2, index: index2 } = fieldMap2.get(name)!;
-
-      if (isFieldModified(field1, field2, index1, index2)) {
-        const onlyPositionChanged =
-          index1 !== index2 && !isFieldModified(field1, field2, index1, index1);
-
-        if (onlyPositionChanged) {
-          reordered.push(name);
-          fieldDiffs.set(name, {
-            fieldName: name,
-            diffType: 'unchanged',
-            orderChanged: { oldIndex: index1, newIndex: index2 },
-          });
-        } else {
-          modified.push(name);
-          fieldDiffs.set(name, {
-            fieldName: name,
-            diffType: 'modified',
-            orderChanged:
-              index1 !== index2
-                ? { oldIndex: index1, newIndex: index2 }
-                : undefined,
-            changes: getFieldChanges(field1, field2),
-          });
-        }
+      const { field: field2 } = fieldMap2.get(name)!;
+
+      if (isFieldModified(field1, field2)) {
+        modified.push(name);
+        fieldDiffs.set(name, {
+          fieldName: name,
+          diffType: 'modified',
+          changes: getFieldChanges(field1, field2),
+        });
       } else {
         unchanged.push(name);
         fieldDiffs.set(name, {
@@ -352,19 +318,11 @@ export const compareFormFields = (
     removed,
     modified,
     unchanged,
-    reordered,
     fieldDiffs,
   };
 };
 
-export const getDiffStyles = (
-  diffType: DiffType,
-  hasOrderChange?: boolean,
-): string => {
-  if (hasOrderChange && diffType === 'unchanged') {
-    return 'bg-blue-50 border-l-4 border-blue-500';
-  }
-
+export const getDiffStyles = (diffType: DiffType): string => {
   switch (diffType) {
     case 'added':
       return 'bg-green-50 border-l-4 border-green-500';

src/components/JsonSchemaComparison/promptTiger.txt

@@ -1,20 +1,15 @@
-we have different snapshots from contract details
-
-like @priv/json_schemas/contract_details/snapshots/PRT/1.json 
-
-I need for every country to have all the versions for example latest is this file @priv/json_schemas/contract_details/PRT.json 
-
-I want the output like this
-
-COUNTRY_CONTRACT_VERSIONS: Record<string, VersionOption[]> = {
-  DEU: [
+Generate a TypeScript constant called COUNTRY_CONTRACT_VERSIONS that maps country codes to their available contract detail versions.
+For each country in apps/tiger/priv/json_schemas/contract_details/ (excluding base.json):
+1. Count the number of snapshot files in snapshots/{COUNTRY}/ (these are historical versions)
+2. Add 1 for the current version in the root directory ({COUNTRY}.json)
+3. Create an array of version objects from 1 to the total count
+Output format:
+```typescript
+const COUNTRY_CONTRACT_VERSIONS: Record<string, VersionOption[]> = {
+  COUNTRY_CODE: [
     { value: 1, label: 'v1' },
     { value: 2, label: 'v2' },
-    { value: 'latest', label: 'Latest' },
+    // ... up to the total version count
   ],
-  USA: [
-    { value: 1, label: 'v1' },
-    { value: 'latest', label: 'Latest' },
-  ],
-  // ... other countries
+  // ... all countries sorted alphabetically
 };