[WIP] MBS-12761: Convert recording edit form to React

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: {

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' => {

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 {

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,
  );
  };
 };

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,
  );
  };
 };

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/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;

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;

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/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>,
+ }>;

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'),

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/common/entity2.js

@@ -242,6 +242,10 @@ export function createRecordingObject(
  }>,
 ): RecordingT {
  return {
+ artist: '',
+ artistCredit: {
+ names: ([]: $ReadOnlyArray<ArtistCreditNameT>),
+ },
  comment: '',
  editsPending: false,
  entityType: 'recording',