Convert form_row_text_list to React

root/area/edit_form.tt

@@ -9,9 +9,27 @@
       [%- form_row_name_with_guesscase(r) -%]
       [%- form_row_text_long(r, 'comment', 'Disambiguation:') -%]
       [%- form_row_select(r, 'type_id', 'Type:') -%]
-      [%- form_row_text_list(r, 'iso_3166_1', 'ISO 3166-1:', 'ISO 3166-1') -%]
-      [%- form_row_text_list(r, 'iso_3166_2', 'ISO 3166-2:', 'ISO 3166-2') -%]
-      [%- form_row_text_list(r, 'iso_3166_3', 'ISO 3166-3:', 'ISO 3166-3') -%]
+      [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+           repeatable => form_to_json(form.field('iso_3166_1')),
+           label => 'ISO 3166-1:',
+           addButtonId => 'add-iso-3166-1',
+           addButtonLabel => 'Add ISO 3166-1',
+           removeButtonLabel => 'Remove ISO 3166-1',
+         }) %]
+      [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+           repeatable => form_to_json(form.field('iso_3166_2')),
+           label => 'ISO 3166-2:',
+           addButtonId => 'add-iso-3166-2',
+           addButtonLabel => 'Add ISO 3166-2',
+           removeButtonLabel => 'Remove ISO 3166-2',
+         }) %]
+      [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+           repeatable => form_to_json(form.field('iso_3166_3')),
+           label => 'ISO 3166-3:',
+           addButtonId => 'add-iso-3166-3',
+           addButtonLabel => 'Add ISO 3166-3',
+           removeButtonLabel => 'Remove ISO 3166-3',
+         }) %]
     </fieldset>
 
     [% date_range_fieldset(r, 'area', 'This area has ended.') %]

root/artist/edit_form.tt

@@ -26,8 +26,20 @@
           </span>
           [% field_errors(r.form, 'area.name') %]
         [% END %]
-        [%- form_row_text_list(r, 'ipi_codes', add_colon(l('IPI codes')), l('IPI code')) -%]
-        [%- form_row_text_list(r, 'isni_codes', add_colon(l('ISNI codes')), l('ISNI code')) -%]
+        [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+           repeatable => form_to_json(form.field('ipi_codes')),
+           label => add_colon(l('IPI codes')),
+           addButtonId => 'add-ipi-code',
+           addButtonLabel => lp('Add IPI code', 'interactive'),
+           removeButtonLabel => lp('Remove IPI code', 'interactive'),
+         }) %]
+        [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+           repeatable => form_to_json(form.field('isni_codes')),
+           label => add_colon(l('ISNI codes')),
+           addButtonId => 'add-isni-code',
+           addButtonLabel => lp('Add ISNI code', 'interactive'),
+           removeButtonLabel => lp('Remove ISNI code', 'interactive'),
+         }) %]
       </fieldset>
 
       <fieldset>

root/components/forms.tt

@@ -133,39 +133,6 @@
     [% END %]
 [%- END -%]
 
-[%- MACRO form_row_text_list(r, field_name, label, item_name) BLOCK -%]
-    [% WRAPPER form_row %]
-      <label>[% label || r.form.field(field_name).label %]</label>
-      <div class="form-row-text-list">
-          <div style="display: none;"
-               class="text-list-row [%- r.form.field(field_name).html_name _ "-template" -%]">
-              <input type="text" value="" class="value with-button" />
-              <button type="button" class="nobutton icon remove-item" title="[% l('Remove {item}', item => item_name) %]"></button>
-          </div>
-          [% FOR value=r.form.field(field_name).value -%]
-          <div class="text-list-row">
-              <input type="text" value="[% value %]" name="[% r.form.field(field_name).html_name %].[% loop.index() %]" class="value with-button" />
-              <button type="button" class="nobutton icon remove-item" title="[% l('Remove {item}', item => item_name) %]"></button>
-          </div>
-          [% END -%]
-          <div class="form-row-add">
-            <button type="button" class="with-label add-item">
-              [% l('Add {item}', item => item_name) %]
-            </button>
-          </div>
-      </div>
-      <script>
-         [%- IF r.form.field(field_name).value.size -%]
-           MB.Form.TextList("[%- r.form.field(field_name).html_name -%]").init([% r.form.field(field_name).value.size %]);
-         [%- ELSE -%]
-           MB.Form.TextList("[%- r.form.field(field_name).html_name -%]").add('');
-         [%- END -%]
-      </script>
-
-      [% field_errors(r.form, field_name) %]
-    [% END %]
-[%- END -%]
-
 [%- MACRO form_row_date(r, field_name, label) BLOCK # Converted to React at root/components/FormRowPartialDate.js
 -%]
     [% WRAPPER form_row %]

root/label/edit_form.tt

@@ -29,8 +29,20 @@
             LC- [% r.text('label_code', size => 5, class => "label-code", pattern => "[0-9]*") -%]
             [%- field_errors(form, 'label_code') -%]
         [% END %]
-        [%- form_row_text_list(r, 'ipi_codes', add_colon(l('IPI codes')), l('IPI code')) -%]
-        [%- form_row_text_list(r, 'isni_codes', add_colon(l('ISNI codes')), l('ISNI code')) -%]
+        [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+           repeatable => form_to_json(form.field('ipi_codes')),
+           label => add_colon(l('IPI codes')),
+           addButtonId => 'add-ipi-code',
+           addButtonLabel => lp('Add IPI code', 'interactive'),
+           removeButtonLabel => lp('Remove IPI code', 'interactive'),
+         }) %]
+        [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+           repeatable => form_to_json(form.field('isni_codes')),
+           label => add_colon(l('ISNI codes')),
+           addButtonId => 'add-isni-code',
+           addButtonLabel => lp('Add ISNI code', 'interactive'),
+           removeButtonLabel => lp('Remove ISNI code', 'interactive'),
+         }) %]
       </fieldset>
 
       [% date_range_fieldset(r, 'label', l('This label has ended.')) %]

root/recording/edit_form.tt

@@ -42,7 +42,13 @@
         [%- END -%]
       [%- END -%]
       [%- form_row_checkbox(r, 'video', l('Video')) -%]
-      [%- form_row_text_list(r, 'isrcs', add_colon(l('ISRCs')), l('ISRC')) -%]
+      [% React.embed(c, 'static/scripts/edit/components/FormRowTextList', {
+          repeatable => form_to_json(form.field('isrcs')),
+          label => add_colon(l('ISRCs')),
+          addButtonId => 'add-isrc',
+          addButtonLabel => lp('Add ISRC', 'interactive'),
+          removeButtonLabel => lp('Remove ISRC', 'interactive'),
+        }) %]
     </fieldset>
 
     [% PROCESS 'forms/relationship-editor.tt' %]

root/server/components.mjs

@@ -530,6 +530,7 @@ export default {
   'static/scripts/common/components/WarningIcon': (): Promise<mixed> => import('../static/scripts/common/components/WarningIcon.js'),
   'static/scripts/edit/components/AddIcon': (): Promise<mixed> => import('../static/scripts/edit/components/AddIcon.js'),
   'static/scripts/edit/components/FormRowNameWithGuessCase': (): Promise<mixed> => import('../static/scripts/edit/components/FormRowNameWithGuessCase.js'),
+  'static/scripts/edit/components/FormRowTextList': (): Promise<mixed> => import('../static/scripts/edit/components/FormRowTextList.js'),
   'static/scripts/edit/components/GuessCaseIcon': (): Promise<mixed> => import('../static/scripts/edit/components/GuessCaseIcon.js'),
   'static/scripts/edit/components/InformationIcon': (): Promise<mixed> => import('../static/scripts/edit/components/InformationIcon.js'),
   'static/scripts/recording/RecordingName': (): Promise<mixed> => import('../static/scripts/recording/RecordingName.js'),

root/static/scripts/area/edit.js

@@ -7,6 +7,8 @@
  * later version: http://www.gnu.org/licenses/gpl-2.0.txt
  */
 
+import '../edit/components/FormRowTextList.js';
+
 import typeBubble from '../edit/typeBubble.js';
 
 const typeIdField = 'select[name=edit-area\\.type_id]';

root/static/scripts/artist/edit.js

@@ -8,6 +8,7 @@
  */
 
 import './components/ArtistCreditRenamer.js';
+import '../edit/components/FormRowTextList.js';
 import '../relationship-editor/components/RelationshipEditorWrapper.js';
 
 import typeBubble from '../edit/typeBubble.js';

root/static/scripts/edit.js

@@ -21,7 +21,6 @@ require('./edit/MB/Control/Bubble.js');
 require('./edit/URLCleanup.js');
 require('./edit/MB/edit.js');
 require('./edit/MB/reltypeslist.js');
-require('./edit/MB/TextList.js');
 require('./edit/check-duplicates.js');
 
 require('./guess-case/MB/Control/GuessCase.js');

root/static/scripts/edit/components/AddButton.js

@@ -0,0 +1,38 @@
+/*
+ * @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(
+  id: string,
+  onClick: (event: SyntheticEvent<HTMLButtonElement>) => void,
+  label?: string,
+) {
+  if (label == null) {
+    return (
+      <button
+        className="add-item"
+        id={id}
+        onClick={onClick}
+        type="button"
+      />
+    );
+  }
+
+  return (
+    <button
+      className="with-label add-item"
+      id={id}
+      onClick={onClick}
+      type="button"
+    >
+      {label}
+    </button>
+  );
+}
+
+export default AddButton;

root/static/scripts/edit/components/FormRow.js

@@ -9,6 +9,7 @@
 
 component FormRow(
   children: React.Node,
+  className as passedClassname?: string,
   hasNoLabel: boolean = false,
   hasNoMargin: boolean = false,
   rowRef?: {-current: HTMLDivElement | null},
@@ -18,7 +19,8 @@ component FormRow(
       className={
         'row' +
         (hasNoLabel ? ' no-label' : '') +
-        (hasNoMargin ? ' no-margin' : '')
+        (hasNoMargin ? ' no-margin' : '') +
+        (nonEmpty(passedClassname) ? ' ' + passedClassname : '')
       }
       ref={rowRef}
     >

root/static/scripts/edit/components/FormRowSelectList.js

@@ -9,6 +9,7 @@
 
 import SelectField from '../../common/components/SelectField.js';
 
+import AddButton from './AddButton.js';
 import FieldErrors from './FieldErrors.js';
 import FormRow from './FormRow.js';
 
@@ -49,14 +50,11 @@ component FormRowSelectList<S: {+id: number, ...}>(
         ))}
         {hideAddButton ? null : (
           <div className="form-row-add">
-            <button
-              className="with-label add-item"
+            <AddButton
               id={addId}
+              label={addLabel}
               onClick={onAdd}
-              type="button"
-            >
-              {addLabel}
-            </button>
+            />
           </div>
         )}
       </div>