MBS-12748: Convert area edit form to React

lib/MusicBrainz/Server/Controller/Area.pm

@@ -382,7 +382,6 @@ after [qw( show collections details tags aliases artists events labels releases
 with 'MusicBrainz::Server::Controller::Role::Create' => {
     form      => 'Area',
     edit_type => $EDIT_AREA_CREATE,
-    dialog_template => 'area/edit_form.tt',
 };
 
 with 'MusicBrainz::Server::Controller::Role::Edit' => {

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

@@ -63,7 +63,7 @@ role {
         my $entity;
         my %props;
 
-        if ($model eq 'Event' || $model eq 'Genre') {
+        if ($model eq 'Area' || $model eq 'Event' || $model eq 'Genre') {
             my $form = $c->form( form => $params->form );
             %props = ( form => $form->TO_JSON );
 
@@ -100,6 +100,14 @@ role {
             },
             pre_validation => sub {
                 my $form = shift;
+                if ($model eq 'Area') {
+                    my %area_descriptions = map {
+                        $_->id => $_->l_description
+                    } $c->model('AreaType')->get_all();
+
+                    $props{areaTypes} = $form->options_type_id;
+                    $props{areaDescriptions} = \%area_descriptions;
+                }
                 if ($model eq 'Event') {
                     my %event_descriptions = map {
                         $_->id => $_->l_description

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

@@ -35,7 +35,7 @@ role {
     method 'edit' => sub {
         my ($self, $c) = @_;
 
-        my @react_models = qw( Event Genre);
+        my @react_models = qw( Area Event Genre );
         my $entity_name = $self->{entity_name};
         my $edit_entity = $c->stash->{ $entity_name };
         my $model = $self->{model};
@@ -70,6 +70,14 @@ role {
             edit_rels   => 1,
             pre_validation => sub {
                 my $form = shift;
+                if ($model eq 'Area') {
+                    my %area_descriptions = map {
+                        $_->id => $_->l_description
+                    } $c->model('AreaType')->get_all();
+
+                    $props{areaTypes} = $form->options_type_id;
+                    $props{areaDescriptions} = \%area_descriptions;
+                }
                 if ($model eq 'Event') {
                     my %event_descriptions = map {
                         $_->id => $_->l_description

lib/MusicBrainz/Server/Validation.pm

@@ -282,18 +282,21 @@ sub is_valid_setlist
     my @invalid_lines = grep { $_ !~ /^([@#*] |\s*$)/ } split(/\r\n/, $setlist); return @invalid_lines ? 0 : 1;
 }
 
+# Converted to JavaScript at root/static/scripts/edit/utility/iso3166.js
 sub is_valid_iso_3166_1
 {
     my $iso_3166_1 = shift;
     return $iso_3166_1 =~ /^[A-Z]{2}$/;
 }
 
+# Converted to JavaScript at root/static/scripts/edit/utility/iso3166.js
 sub is_valid_iso_3166_2
 {
     my $iso_3166_2 = shift;
     return $iso_3166_2 =~ /^[A-Z]{2}-[A-Z0-9]+$/;
 }
 
+# Converted to JavaScript at root/static/scripts/edit/utility/iso3166.js
 sub is_valid_iso_3166_3
 {
     my $iso_3166_3 = shift;

root/area/CreateArea.js

@@ -0,0 +1,38 @@
+/*
+ * @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 AreaEditForm
+  from '../static/scripts/area/components/AreaEditForm.js';
+
+import type {AreaFormT} from './types.js';
+
+component CreateArea(
+  areaDescriptions: {+[id: string]: string},
+  areaTypes: SelectOptionsT,
+  form: AreaFormT,
+) {
+  return (
+    <Layout fullWidth title={lp('Add area', 'header')}>
+      <div id="content">
+        <h1>{lp('Add area', 'header')}</h1>
+        <AreaEditForm
+          areaDescriptions={areaDescriptions}
+          areaTypes={areaTypes}
+          form={form}
+        />
+      </div>
+      {manifest('area/components/AreaEditForm', {async: true})}
+      {manifest('relationship-editor', {async: true})}
+    </Layout>
+  );
+}
+
+export default CreateArea;

root/area/EditArea.js

@@ -0,0 +1,41 @@
+/*
+ * @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 AreaEditForm
+  from '../static/scripts/area/components/AreaEditForm.js';
+
+import AreaLayout from './AreaLayout.js';
+import {type AreaFormT} from './types.js';
+
+component EditArea(
+  entity: AreaT,
+  areaDescriptions: {+[id: string]: string},
+  areaTypes: SelectOptionsT,
+  form: AreaFormT,
+) {
+  return (
+    <AreaLayout
+      entity={entity}
+      fullWidth
+      page="edit"
+      title={lp('Edit area', 'header')}
+    >
+        <AreaEditForm
+          areaDescriptions={areaDescriptions}
+          areaTypes={areaTypes}
+          form={form}
+        />
+        {manifest('area/components/AreaEditForm', {async: true})}
+        {manifest('relationship-editor', {async: true})}
+    </AreaLayout>
+  );
+}
+
+export default EditArea;

root/area/types.js

@@ -0,0 +1,22 @@
+/*
+ * @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
+ */
+
+import type {
+  Iso3166VariantSnake,
+} from '../static/scripts/edit/utility/iso3166.js';
+
+export type AreaFormT = FormT<{
+    +comment: FieldT<string>,
+    +edit_note: FieldT<string>,
+    +[key: Iso3166VariantSnake]: RepeatableFieldT<FieldT<string>>,
+    +make_votable: FieldT<boolean>,
+    +name: FieldT<string | null>,
+    +period: DatePeriodFieldT,
+    +type_id: FieldT<string>,
+}>;

root/server/components.mjs

@@ -80,7 +80,9 @@ export default {
   'area/AreaReleases': (): Promise<mixed> => import('../area/AreaReleases.js'),
   'area/AreaUsers': (): Promise<mixed> => import('../area/AreaUsers.js'),
   'area/AreaWorks': (): Promise<mixed> => import('../area/AreaWorks.js'),
+  'area/CreateArea': (): Promise<mixed> => import('../area/CreateArea.js'),
   'area/DeleteArea': (): Promise<mixed> => import('../area/DeleteArea.js'),
+  'area/EditArea': (): Promise<mixed> => import('../area/EditArea.js'),
   'artist/ArtistEvents': (): Promise<mixed> => import('../artist/ArtistEvents.js'),
   'artist/ArtistIndex': (): Promise<mixed> => import('../artist/ArtistIndex.js'),
   'artist/ArtistMerge': (): Promise<mixed> => import('../artist/ArtistMerge.js'),