Replace index keys with stable keys in editable list components

frontend/src/components/config/RegexList.tsx

@@ -5,10 +5,15 @@
  * Used in jail config panels and the filter form.
  */
 
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { Button, Input, Text } from "@fluentui/react-components";
 import { Dismiss24Regular } from "@fluentui/react-icons";
 import { useConfigStyles } from "./configStyles";
+import {
+  createStableStringEntry,
+  reconcileStableStringEntries,
+  StableStringEntry,
+} from "./stableListEntries";
 
 export interface RegexListProps {
   /** Section label displayed above the list. */
@@ -34,6 +39,23 @@ export function RegexList({
   readOnly = false,
 }: RegexListProps): React.JSX.Element {
   const styles = useConfigStyles();
+  const entriesRef = useRef<StableStringEntry[]>(
+    patterns.map(createStableStringEntry),
+  );
+
+  const entries = useMemo(() => {
+    if (
+      entriesRef.current.length === patterns.length &&
+      entriesRef.current.every((entry, index) => entry.value === patterns[index])
+    ) {
+      return entriesRef.current;
+    }
+
+    const reconciled = reconcileStableStringEntries(entriesRef.current, patterns);
+    entriesRef.current = reconciled;
+    return reconciled;
+  }, [patterns]);
+
   const [newPattern, setNewPattern] = useState("");
 
   const handleAdd = useCallback(() => {
@@ -62,11 +84,11 @@ export function RegexList({
           (none)
         </Text>
       )}
-      {patterns.map((p, i) => (
-        <div key={i} className={styles.regexItem}>
+      {entries.map(({ id, value }, i) => (
+        <div key={id} className={styles.regexItem}>
           <Input
             className={styles.regexInput}
-            value={p}
+            value={value}
             readOnly={readOnly}
             aria-label={`${label} pattern ${String(i + 1)}`}
             onChange={(_e, d) => {