metabrainz · reosarevok · May 16, 2024 · May 16, 2024 · Sep 5, 2024 · Sep 5, 2024
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -969,6 +969,7 @@ export default [
       'root/static/scripts/edit/components/UrlRelationshipCreditFieldset.js',
       'root/static/scripts/edit/externalLinks.js',
       'root/static/scripts/event/components/EventEditForm.js',
+      'root/static/scripts/recording/components/RecordingEditForm.js',
       'root/static/scripts/relationship-editor/components/DialogPreview.js',
     ],
     rules: {

diff --git a/lib/MusicBrainz/Server/Controller/Event.pm b/lib/MusicBrainz/Server/Controller/Event.pm
@@ -128,7 +128,6 @@ with 'MusicBrainz::Server::Controller::Role::Merge' => {
 with 'MusicBrainz::Server::Controller::Role::Create' => {
     form      => 'Event',
     edit_type => $EDIT_EVENT_CREATE,
-    dialog_template => 'event/edit_form.tt',
 };
 
 with 'MusicBrainz::Server::Controller::Role::Edit' => {

diff --git a/lib/MusicBrainz/Server/Controller/Recording.pm b/lib/MusicBrainz/Server/Controller/Recording.pm
@@ -198,7 +198,6 @@ with 'MusicBrainz::Server::Controller::Role::Create' => {
         $ret{form_args} = { used_by_tracks => 0 };
         return %ret;
     },
-    dialog_template => 'recording/edit_form.tt',
 };
 
 sub _merge_load_entities {

diff --git a/lib/MusicBrainz/Server/Controller/Role/Create.pm b/lib/MusicBrainz/Server/Controller/Role/Create.pm
@@ -60,10 +60,12 @@ role {
         my $model = $self->config->{model};
         my $entity;
         my %props;
+        my %edit_arguments = $params->edit_arguments->($self, $c);
 
-        if ($model eq 'Event' || $model eq 'Genre') {
+        if ($model eq 'Event' || $model eq 'Genre' || $model eq 'Recording') {
             my $type = model_to_type($model);
-            my $form = $c->form( form => $params->form );
+            my %form_args = %{ $edit_arguments{form_args} || {}};
+            my $form = $c->form( form => $params->form, ctx => $c, %form_args );
             %props = ( form => $form->TO_JSON );
 
             $c->stash(
@@ -98,23 +100,29 @@ role {
                 delete $c->flash->{message};
             },
             pre_validation => sub {
+                my $form = shift;
+
                 if ($model eq 'Event') {
-                    my $form = shift;
                     my %event_descriptions = map {
                         $_->id => $_->l_description
                     } $c->model('EventType')->get_all();
 
                     $props{eventTypes} = $form->options_type_id;
                     $props{eventDescriptions} = \%event_descriptions;
                 }
+
+                if ($model eq 'Recording') {
+                    $props{usedByTracks} = $form->used_by_tracks;
+                }
+
             },
             redirect => sub {
                 $c->response->redirect($c->uri_for_action(
                     $self->action_for('show'), [ $entity->gid ]));
             },
             no_redirect => $args{within_dialog},
             edit_rels   => 1,
-            $params->edit_arguments->($self, $c),
+            %edit_arguments,
         );
     };
 };

diff --git a/lib/MusicBrainz/Server/Controller/Role/Edit.pm b/lib/MusicBrainz/Server/Controller/Role/Edit.pm
@@ -34,18 +34,22 @@ role {
     method 'edit' => sub {
         my ($self, $c) = @_;
 
-        my @react_models = qw( Event Genre);
+        my @react_models = qw( Event Genre Recording );
         my $entity_name = $self->{entity_name};
         my $edit_entity = $c->stash->{ $entity_name };
         my $model = $self->{model};
         my %props;
+        my %edit_arguments = $params->edit_arguments->($self, $c, $edit_entity);
 
         if (any { $_ eq $model } @react_models) {
             my $type = model_to_type($model);
 
+            my %form_args = %{ $edit_arguments{form_args} || {}};
             my $form = $c->form(
                 form => $params->form,
+                ctx => $c,
                 init_object => $edit_entity,
+                %form_args,
             );
 
             %props = (
@@ -69,21 +73,26 @@ role {
             edit_args   => { to_edit => $edit_entity },
             edit_rels   => 1,
             pre_validation => sub {
+                my $form = shift;
+
                 if ($model eq 'Event') {
-                    my $form = shift;
                     my %event_descriptions = map {
                         $_->id => $_->l_description
                     } $c->model('EventType')->get_all();
 
                     $props{eventTypes} = $form->options_type_id;
                     $props{eventDescriptions} = \%event_descriptions;
                 }
+
+                if ($model eq 'Recording') {
+                    $props{usedByTracks} = $form->used_by_tracks;
+                }
             },
             redirect    => sub {
                 $c->response->redirect(
                     $c->uri_for_action($self->action_for('show'), [ $edit_entity->gid ]));
             },
-            $params->edit_arguments->($self, $c, $edit_entity),
+            %edit_arguments,
         );
     };
 };

diff --git a/root/area/edit_form.tt b/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.') %]

diff --git a/root/artist/edit_form.tt b/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>

diff --git a/root/components/forms.tt b/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 %]

diff --git a/root/label/edit_form.tt b/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.')) %]

diff --git a/root/recording/CreateRecording.js b/root/recording/CreateRecording.js
@@ -0,0 +1,30 @@
+/*
+ * @flow strict-local
+ * 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 Layout from '../layout/index.js';
+import manifest from '../static/manifest.mjs';
+import RecordingEditForm
+  from '../static/scripts/recording/components/RecordingEditForm.js';
+
+import type {RecordingFormT} from './types.js';
+
+component CreateRecording(form: RecordingFormT, usedByTracks: boolean) {
+  return (
+    <Layout fullWidth title={lp('Add recording', 'header')}>
+      <div id="content">
+        <h1>{lp('Add recording', 'header')}</h1>
+        <RecordingEditForm form={form} usedByTracks={usedByTracks} />
+      </div>
+      {manifest('recording/components/RecordingEditForm', {async: 'async'})}
+      {manifest('relationship-editor', {async: 'async'})}
+    </Layout>
+  );
+}
+
+export default CreateRecording;
diff --git a/root/recording/EditRecording.js b/root/recording/EditRecording.js
@@ -0,0 +1,36 @@
+/*
+ * @flow strict-local
+ * 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 manifest from '../static/manifest.mjs';
+import RecordingEditForm
+  from '../static/scripts/recording/components/RecordingEditForm.js';
+
+import RecordingLayout from './RecordingLayout.js';
+import type {RecordingFormT} from './types.js';
+
+component EditRecording(
+  entity: RecordingWithArtistCreditT,
+  form: RecordingFormT,
+  usedByTracks: boolean,
+) {
+  return (
+    <RecordingLayout
+      entity={entity}
+      fullWidth
+      page="edit"
+      title={lp('Edit recording', 'header')}
+    >
+      <RecordingEditForm form={form} usedByTracks={usedByTracks} />
+      {manifest('recording/components/RecordingEditForm', {async: 'async'})}
+      {manifest('relationship-editor', {async: 'async'})}
+    </RecordingLayout>
+  );
+}
+
+export default EditRecording;
diff --git a/root/recording/edit_form.tt b/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' %]

diff --git a/root/recording/types.js b/root/recording/types.js
@@ -0,0 +1,19 @@
+/*
+ * @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
+ */
+
+export type RecordingFormT = FormT<{
+    +artist_credit: ArtistCreditFieldT,
+    +comment: FieldT<string>,
+    +edit_note: FieldT<string>,
+    +isrcs: RepeatableFieldT<FieldT<string>>,
+    +length: FieldT<string>,
+    +make_votable: FieldT<boolean>,
+    +name: FieldT<string | null>,
+    +video: FieldT<boolean>,
+  }>;
diff --git a/root/server/components.mjs b/root/server/components.mjs
@@ -185,7 +185,9 @@ export default {
   'place/PlaceMap': (): Promise<mixed> => import('../place/PlaceMap.js'),
   'place/PlaceMerge': (): Promise<mixed> => import('../place/PlaceMerge.js'),
   'place/PlacePerformances': (): Promise<mixed> => import('../place/PlacePerformances.js'),
+  'recording/CreateRecording': (): Promise<mixed> => import('../recording/CreateRecording.js'),
   'recording/DeleteRecording': (): Promise<mixed> => import('../recording/DeleteRecording.js'),
+  'recording/EditRecording': (): Promise<mixed> => import('../recording/EditRecording.js'),
   'recording/RecordingFingerprints': (): Promise<mixed> => import('../recording/RecordingFingerprints.js'),
   'recording/RecordingIndex': (): Promise<mixed> => import('../recording/RecordingIndex.js'),
   'recording/RecordingMerge': (): Promise<mixed> => import('../recording/RecordingMerge.js'),
@@ -530,6 +532,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'),

diff --git a/root/static/scripts/area/edit.js b/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]';

diff --git a/root/static/scripts/artist/edit.js b/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';

diff --git a/root/static/scripts/common/entity2.js b/root/static/scripts/common/entity2.js
@@ -242,6 +242,10 @@ export function createRecordingObject(
   }>,
 ): RecordingT {
   return {
+    artist: '',
+    artistCredit: {
+      names: ([]: $ReadOnlyArray<ArtistCreditNameT>),
+    },
     comment: '',
     editsPending: false,
     entityType: 'recording',