From 33b089f51d663cc65820a2bb73aedc46f47fddd0 Mon Sep 17 00:00:00 2001
From: Serial <69764315+Serial-ATA@users.noreply.github.com>
Date: Thu, 16 May 2024 01:11:32 -0400
Subject: [PATCH 1/2] Convert form_row_text_list to React

---
 root/components/forms.tt                      |   3 +-
 .../scripts/edit/components/AddButton.js      |  26 ++++
 .../edit/components/FormRowTextList.js        | 141 ++++++++++++++++++
 3 files changed, 169 insertions(+), 1 deletion(-)
 create mode 100644 root/static/scripts/edit/components/AddButton.js
 create mode 100644 root/static/scripts/edit/components/FormRowTextList.js

diff --git a/root/components/forms.tt b/root/components/forms.tt
index 974f4bf9c7b..87611b156c2 100644
--- a/root/components/forms.tt
+++ b/root/components/forms.tt
@@ -153,7 +153,8 @@
     [% END %]
 [%- END -%]
 
-[%- MACRO form_row_text_list(r, field_name, label, item_name) BLOCK -%]
+[%- MACRO form_row_text_list(r, field_name, label, item_name) BLOCK # Converted to React at root/static/scripts/edit/components/FormTowTextList.js
+-%] 
     [% WRAPPER form_row %]
       <label>[% label || r.form.field(field_name).label %]</label>
       <div class="form-row-text-list">
diff --git a/root/static/scripts/edit/components/AddButton.js b/root/static/scripts/edit/components/AddButton.js
new file mode 100644
index 00000000000..1e073626672
--- /dev/null
+++ b/root/static/scripts/edit/components/AddButton.js
@@ -0,0 +1,26 @@
+/*
+ * @flow strict
+ * Copyright (C) 2024 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+component AddButton(
+  onClick: (event: SyntheticEvent<HTMLInputElement>) => void,
+  label?: string,
+) {
+  if (label == null) {
+    return <button type="button" className="add-item" onClick={onClick} />;
+  }
+      
+  return (
+    <button type="button" className="with-label add-item" onClick={onClick}>
+      {l(label)}
+    </button>
+  );
+};
+  
+export default AddButton;
+  
\ No newline at end of file
diff --git a/root/static/scripts/edit/components/FormRowTextList.js b/root/static/scripts/edit/components/FormRowTextList.js
new file mode 100644
index 00000000000..bdd1cb53699
--- /dev/null
+++ b/root/static/scripts/edit/components/FormRowTextList.js
@@ -0,0 +1,141 @@
+/*
+ * @flow strict
+ * Copyright (C) 2024 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+import React, {useState} from 'react';
+
+import AddButton from './AddButton.js';
+import FieldErrors from './FieldErrors.js';
+import FormLabel from './FormLabel.js';
+import FormRow from './FormRow.js';
+import RemoveButton from './RemoveButton.js';
+
+type TextListRowProps = {
+  +name: string,
+  +value?: string,
+  +template?: boolean,
+  +onChange?: (event: SyntheticEvent<HTMLInputElement>) => void,
+  +onRemove?: (event: SyntheticEvent<HTMLInputElement>) => void,
+  +index?: number,
+};
+
+component TextListRow(...{
+  name,
+  value = "",
+  template = false,
+  onChange = () => {},
+  onRemove = () => {},
+  index = 0
+}: TextListRowProps) {
+  if (template) {
+    return (
+      <div
+        className={`text-list-row ${name}-template`}
+        style={{display: 'none'}}
+      >
+        <input className="value with-button" type="text" value="" />
+        <RemoveButton
+          dataIndex={index}
+          onClick={onRemove}
+          title={l('Remove item')}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="text-list-row">
+      <input
+        className="value with-button"
+        name={name}
+        onChange={onChange}
+        type="text"
+        value={value}
+      />
+      <RemoveButton onClick={onRemove} title={l('Remove item')} />
+    </div>
+  );
+}
+
+const initialRows = (repeatable: RepeatableFieldT<FieldT<string>>) => {
+  if (repeatable.field.length === 0) {
+    return [{name: repeatable.html_name + '.0', value: ''}];
+  }
+
+  return repeatable.field.map((field, index) => ({
+    name: repeatable.html_name + '.' + index,
+    value: field.value ?? '',
+  }));
+};
+
+component FormRowTextList(
+  repeatable: RepeatableFieldT<FieldT<string>>,
+  label: string,
+  itemName: string,
+  required: boolean = false,
+) {
+  const newRow = (name: string, value: string, index: number) => {
+    return {name: name + '.' + index, value};
+  };
+
+  const [rows, setRows] = useState(initialRows(repeatable));
+
+  const add = () => {
+    const index = rows.length;
+
+    setRows([...rows, newRow(repeatable.html_name, '', index)]);
+  };
+
+  const change = (index: number, value: string) => {
+    const newRows = [...rows];
+    newRows[index] = newRow(repeatable.html_name, value, index);
+    setRows(newRows);
+  };
+
+  const removeRow = (index: number) => {
+    if (rows.length === 1) {
+      setRows([newRow(repeatable.html_name, '', 0)]);
+      return;
+    }
+
+    setRows(rows.filter((_, i) => i !== index));
+  };
+
+  return (
+    <FormRow>
+      <FormLabel forField={repeatable} label={label} required={required} />
+
+      <div className="form-row-text-list">
+        <TextListRow
+          name={repeatable.html_name}
+          onChange={() => {}}
+          onRemove={() => {}}
+          template
+        />
+
+        {rows.map((field, index) => (
+          <TextListRow
+            key={index}
+            name={field.name}
+            onChange={(event) => change(index, event.currentTarget.value)}
+            onRemove={() => removeRow(index)}
+            value={field.value}
+          />
+        ))}
+
+        <div className="form-row-add">
+          <AddButton label={`Add ${itemName}`} onClick={add} />
+        </div>
+      </div>
+
+      <FieldErrors field={repeatable} />
+    </FormRow>
+  );
+}
+
+export default FormRowTextList;

From fc004e4d915753ce3f20d34c978638d12d38e973 Mon Sep 17 00:00:00 2001
From: Serial <69764315+Serial-ATA@users.noreply.github.com>
Date: Thu, 16 May 2024 02:04:06 -0400
Subject: [PATCH 2/2] Fix ESLint warnings

---
 root/static/scripts/edit/components/AddButton.js   | 11 +++++------
 .../scripts/edit/components/FormRowTextList.js     | 14 ++++++--------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/root/static/scripts/edit/components/AddButton.js b/root/static/scripts/edit/components/AddButton.js
index 1e073626672..cdef659bdee 100644
--- a/root/static/scripts/edit/components/AddButton.js
+++ b/root/static/scripts/edit/components/AddButton.js
@@ -12,15 +12,14 @@ component AddButton(
   label?: string,
 ) {
   if (label == null) {
-    return <button type="button" className="add-item" onClick={onClick} />;
+    return <button className="add-item" onClick={onClick} type="button" />;
   }
-      
+
   return (
-    <button type="button" className="with-label add-item" onClick={onClick}>
+    <button className="with-label add-item" onClick={onClick} type="button">
       {l(label)}
     </button>
   );
-};
-  
+}
+
 export default AddButton;
-  
\ No newline at end of file
diff --git a/root/static/scripts/edit/components/FormRowTextList.js b/root/static/scripts/edit/components/FormRowTextList.js
index bdd1cb53699..b9be1b56ed0 100644
--- a/root/static/scripts/edit/components/FormRowTextList.js
+++ b/root/static/scripts/edit/components/FormRowTextList.js
@@ -16,21 +16,21 @@ import FormRow from './FormRow.js';
 import RemoveButton from './RemoveButton.js';
 
 type TextListRowProps = {
+  +index?: number,
   +name: string,
-  +value?: string,
-  +template?: boolean,
   +onChange?: (event: SyntheticEvent<HTMLInputElement>) => void,
   +onRemove?: (event: SyntheticEvent<HTMLInputElement>) => void,
-  +index?: number,
+  +template?: boolean,
+  +value?: string,
 };
 
 component TextListRow(...{
+  index = 0,
   name,
-  value = "",
-  template = false,
   onChange = () => {},
   onRemove = () => {},
-  index = 0
+  template = false,
+  value = '',
 }: TextListRowProps) {
   if (template) {
     return (
@@ -113,8 +113,6 @@ component FormRowTextList(
       <div className="form-row-text-list">
         <TextListRow
           name={repeatable.html_name}
-          onChange={() => {}}
-          onRemove={() => {}}
           template
         />