[WIP] MBS-12763: Convert RG edit form to React

eslint.config.mjs

@@ -992,7 +992,10 @@ 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/instrument/components/InstrumentEditForm.js',
+      'root/static/scripts/recording/components/RecordingEditForm.js',
       'root/static/scripts/relationship-editor/components/DialogPreview.js',
+      'root/static/scripts/release_group/components/ReleaseGroupEditForm.js',
     ],
     rules: {
       'react/jsx-no-bind': 'off',

lib/MusicBrainz/Server/Controller/Event.pm

@@ -130,7 +130,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/Instrument.pm

@@ -193,7 +193,6 @@ sub _merge_load_entities {
 with 'MusicBrainz::Server::Controller::Role::Create' => {
     form      => 'Instrument',
     edit_type => $EDIT_INSTRUMENT_CREATE,
-    dialog_template => 'instrument/edit_form.tt',
 };
 
 with 'MusicBrainz::Server::Controller::Role::Delete' => {

lib/MusicBrainz/Server/Controller/Recording.pm

@@ -199,7 +199,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/ReleaseGroup.pm

@@ -133,7 +133,6 @@ with 'MusicBrainz::Server::Controller::Role::Create' => {
             return ();
         }
     },
-    dialog_template => 'release_group/edit_form.tt',
 };
 
 with 'MusicBrainz::Server::Controller::Role::Edit' => {

lib/MusicBrainz/Server/Controller/Role/Create.pm

@@ -62,9 +62,12 @@ role {
         my $type = model_to_type($model);
         my $entity;
         my %props;
+        my %edit_arguments = $params->edit_arguments->($self, $c);
 
-        if ($model eq 'Event' || $model eq 'Genre') {
-            my $form = $c->form( form => $params->form );
+        if ($model eq 'Event' || $model eq 'Genre' || $model eq 'Instrument' || $model eq 'Recording' || $model eq 'ReleaseGroup') {
+            my $type = model_to_type($model);
+            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(
@@ -108,17 +111,37 @@ role {
                     $props{eventTypes} = $form->options_type_id;
                     $props{eventDescriptions} = \%event_descriptions;
                 }
+                if ($model eq 'Instrument') {
+                    $props{instrumentTypes} = $form->options_type_id;
+                }
                 if ($self->does('MusicBrainz::Server::Controller::Role::IdentifierSet')) {
                     $self->munge_compound_text_fields($c, $form);
                 }
+                if ($model eq 'Recording') {
+                    $props{usedByTracks} = $form->used_by_tracks;
+                }
+                if ($model eq 'ReleaseGroup') {
+                    my %primary_type_descriptions = map {
+                        $_->id => $_->l_description
+                    } $c->model('ReleaseGroupType')->get_all();
+                    my %secondary_type_descriptions = map {
+                        $_->id => $_->l_description
+                    } $c->model('ReleaseGroupSecondaryType')->get_all();
+
+                    $props{primaryTypes} = $form->options_primary_type_id;
+                    $props{primaryTypeDescriptions} = \%primary_type_descriptions;
+
+                    $props{secondaryTypes} = $form->options_secondary_type_ids;
+                    $props{secondaryTypeDescriptions} = \%secondary_type_descriptions;
+                }
             },
             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,
         );
 
         if ($ENTITIES{$type}{artist_credits}) {

lib/MusicBrainz/Server/Controller/Role/Edit.pm

@@ -35,17 +35,23 @@ role {
     method 'edit' => sub {
         my ($self, $c) = @_;
 
-        my @react_models = qw( Event Genre);
+        my @react_models = qw( Event Genre Instrument Recording ReleaseGroup );
         my $entity_name = $self->{entity_name};
         my $edit_entity = $c->stash->{ $entity_name };
         my $model = $self->{model};
         my $type = model_to_type($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 = (
@@ -78,16 +84,36 @@ role {
                     $props{eventTypes} = $form->options_type_id;
                     $props{eventDescriptions} = \%event_descriptions;
                 }
+                if ($model eq 'Instrument') {
+                    $props{instrumentTypes} = $form->options_type_id;
+                }
                 if ($self->does('MusicBrainz::Server::Controller::Role::IdentifierSet')) {
                     $self->munge_compound_text_fields($c, $form);
                     $self->stash_current_identifier_values($c, $edit_entity->id);
                 }
+                if ($model eq 'Recording') {
+                    $props{usedByTracks} = $form->used_by_tracks;
+                }
+                if ($model eq 'ReleaseGroup') {
+                    my %primary_type_descriptions = map {
+                        $_->id => $_->l_description
+                    } $c->model('ReleaseGroupType')->get_all();
+                    my %secondary_type_descriptions = map {
+                        $_->id => $_->l_description
+                    } $c->model('ReleaseGroupSecondaryType')->get_all();
+
+                    $props{primaryTypes} = $form->options_primary_type_id;
+                    $props{primaryTypeDescriptions} = \%primary_type_descriptions;
+
+                    $props{secondaryTypes} = $form->options_secondary_type_ids;
+                    $props{secondaryTypeDescriptions} = \%secondary_type_descriptions;
+                }
             },
             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,
         );
 
         if ($ENTITIES{$type}{artist_credits}) {

lib/MusicBrainz/Server/Track.pm

@@ -45,25 +45,40 @@ sub FormatTrackLength
         sprintf($print_formats->{ms}, $minutes, $seconds);
 }
 
+# Keep in sync with static/scripts/common/utility/unformatTrackLength.js
 sub UnformatTrackLength
 {
     my $length = shift;
 
-    if ($length =~ /^\s*(\d{1,3}):(\d{1,2}):(\d{1,2})\s*$/ && $2 < 60 && $3 < 60)
+    # ?:?? or just space are allowed to indicate unknown/empty
+    if ($length =~ /^\s*\?:\?\?\s*$/ || $length =~ /^\s*$/)
+    {
+        return undef;
+    }
+    # Check for HH:MM:SS
+    elsif ($length =~ /^\s*(\d{1,3}):(\d{1,2}):(\d{1,2})\s*$/ && $2 < 60 && $3 < 60)
     {
         return ($1 * 3600 + $2 * 60 + $3) * 1000;
     }
+    # Check for MM:SS
     elsif ($length =~ /^\s*(\d+):(\d{1,2})\s*$/ && $2 < 60)
     {
         return ($1 * 60 + $2) * 1000;
     }
+    # Check for :SS
+    elsif ($length =~ /^\s*:(\d{1,2})\s*$/ && $1 < 60)
+    {
+        return ($1) * 1000;
+    }
+    # Check for XX ms
     elsif ($length =~ /^\s*(\d+(\.\d+)?)?\s+ms\s*$/)
     {
         return int($1);
     }
-    elsif ($length =~ /^\s*\?:\?\?\s*$/ || $length =~ /^\s*$/)
+    # Check for just a number of seconds
+    elsif ($length =~ /^\s*(\d+)\s*$/)
     {
-        return undef;
+        return ($1) * 1000;
     }
     else {
         confess("$length is not a valid track length");

root/instrument/CreateInstrument.js

@@ -0,0 +1,33 @@
+/*
+ * @flow strict-local
+ * Copyright (C) 2025 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 InstrumentEditForm
+  from '../static/scripts/instrument/components/InstrumentEditForm.js';
+
+import type {InstrumentFormT} from './types.js';
+
+component CreateInstrument(
+  form: InstrumentFormT,
+  instrumentTypes: SelectOptionsT,
+) {
+  return (
+    <Layout fullWidth title={lp('Add instrument', 'header')}>
+      <div id="content">
+        <h1>{lp('Add instrument', 'header')}</h1>
+        <InstrumentEditForm form={form} instrumentTypes={instrumentTypes} />
+      </div>
+      {manifest('instrument/components/InstrumentEditForm', {async: true})}
+      {manifest('relationship-editor', {async: true})}
+    </Layout>
+  );
+}
+
+export default CreateInstrument;

root/instrument/EditInstrument.js

@@ -0,0 +1,36 @@
+/*
+ * @flow strict-local
+ * Copyright (C) 2025 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 InstrumentEditForm
+  from '../static/scripts/instrument/components/InstrumentEditForm.js';
+
+import InstrumentLayout from './InstrumentLayout.js';
+import type {InstrumentFormT} from './types.js';
+
+component EditInstrument(
+  entity: InstrumentT,
+  form: InstrumentFormT,
+  instrumentTypes: SelectOptionsT,
+) {
+  return (
+    <InstrumentLayout
+      entity={entity}
+      fullWidth
+      page="edit"
+      title={lp('Edit instrument', 'header')}
+    >
+      <InstrumentEditForm form={form} instrumentTypes={instrumentTypes} />
+      {manifest('instrument/components/InstrumentEditForm', {async: true})}
+      {manifest('relationship-editor', {async: true})}
+    </InstrumentLayout>
+  );
+}
+
+export default EditInstrument;

root/instrument/types.js

@@ -0,0 +1,17 @@
+/*
+ * @flow strict
+ * Copyright (C) 2025 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 InstrumentFormT = FormT<{
+    +comment: FieldT<string>,
+    +description: FieldT<string>,
+    +edit_note: FieldT<string>,
+    +make_votable: FieldT<boolean>,
+    +name: FieldT<string | null>,
+    +type_id: FieldT<string>,
+  }>;

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: true})}
+      {manifest('relationship-editor', {async: true})}
+    </Layout>
+  );
+}
+
+export default CreateRecording;