Address PR review feedback (#6840)

- assign generated IDs to externally appended PII pattern rows
- cover editing appended rows without remounting

Author: j15z

apps/sim/components/pii/custom-patterns-editor.test.tsx

@@ -82,18 +82,26 @@ describe('CustomPatternsEditor', () => {
     expect(onChange).toHaveBeenCalledWith([{ name: 'X', regex: 'b+', replacement: '<X>' }])
   })
 
-  it('preserves an existing row while rows are appended and truncated', () => {
+  it('preserves rows while they are appended, edited, and truncated', () => {
     const onChange = vi.fn()
     const firstPattern = row('a+')
     renderEditor([firstPattern], onChange)
 
     const firstRegexInput = container.querySelector('input[value="a+"]') as HTMLInputElement
     firstRegexInput.focus()
 
-    renderEditor([firstPattern, row('b+')], onChange)
+    const secondPattern = row('b+')
+    renderEditor([firstPattern, secondPattern], onChange)
     expect(container.querySelector('input[value="a+"]')).toBe(firstRegexInput)
     expect(document.activeElement).toBe(firstRegexInput)
 
+    const secondRegexInput = container.querySelector('input[value="b+"]') as HTMLInputElement
+    secondRegexInput.focus()
+    renderEditor([firstPattern, { ...secondPattern, regex: 'b*' }], onChange)
+    expect(container.querySelector('input[value="b*"]')).toBe(secondRegexInput)
+    expect(document.activeElement).toBe(secondRegexInput)
+
+    firstRegexInput.focus()
     renderEditor([firstPattern], onChange)
     expect(container.querySelector('input[value="a+"]')).toBe(firstRegexInput)
     expect(document.activeElement).toBe(firstRegexInput)

apps/sim/components/pii/custom-patterns-editor.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Chip, ChipInput } from '@sim/emcn'
 import { Plus, Trash } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
@@ -28,6 +28,14 @@ interface CustomPatternsEditorProps {
 export function CustomPatternsEditor({ patterns, onChange }: CustomPatternsEditorProps) {
   const [patternIds, setPatternIds] = useState(() => patterns.map(() => generateShortId()))
 
+  useEffect(() => {
+    setPatternIds((current) => {
+      if (current.length === patterns.length) return current
+      if (current.length > patterns.length) return current.slice(0, patterns.length)
+      return [...current, ...patterns.slice(current.length).map(() => generateShortId())]
+    })
+  }, [patterns.length])
+
   function updateRow(index: number, patch: Partial<CustomPiiPattern>) {
     onChange(patterns.map((pattern, i) => (i === index ? { ...pattern, ...patch } : pattern)))
   }