MBS-10397: Convert Edit Event edit to React

lib/MusicBrainz/Server/Edit/Event/Edit.pm

@@ -7,6 +7,7 @@ use MusicBrainz::Server::Constants qw(
     $EDIT_EVENT_EDIT
 );
 use MusicBrainz::Server::Constants qw( :edit_status );
+use MusicBrainz::Server::Data::Utils qw( boolean_to_json );
 use MusicBrainz::Server::Edit::Types qw( Nullable PartialDateHash );
 use MusicBrainz::Server::Edit::Utils qw(
     changed_relations
@@ -39,6 +40,7 @@ with 'MusicBrainz::Server::Edit::Role::DatePeriod';
 
 sub edit_name { N_l('Edit event') }
 sub edit_type { $EDIT_EVENT_EDIT }
+sub edit_template_react { "EditEvent" }
 
 sub _edit_model { 'Event' }
 
@@ -110,6 +112,11 @@ sub build_display_data
         }
     }
 
+    if (exists $data->{cancelled}) {
+        $data->{cancelled}{old} = boolean_to_json($data->{cancelled}{old});
+        $data->{cancelled}{new} = boolean_to_json($data->{cancelled}{new});
+    }
+
     return $data;
 }
 

root/edit/details/EditEvent.js

@@ -0,0 +1,114 @@
+/*
+ * @flow
+ * Copyright (C) 2020 Anirudh Jain
+ *
+ * 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 * as React from 'react';
+
+import EntityLink from '../../static/scripts/common/components/EntityLink';
+import Diff from '../../static/scripts/edit/components/edit/Diff';
+import FullChangeDiff from
+  '../../static/scripts/edit/components/edit/FullChangeDiff';
+import yesNo from '../../static/scripts/common/utility/yesNo';
+import formatDate from '../../static/scripts/common/utility/formatDate';
+
+type EditEventProps = {
+  +display_data: {
+    +begin_date?: CompT<PartialDateT | null>,
+    +cancelled?: CompT<boolean>,
+    +comment?: CompT<string | null>,
+    +end_date?: CompT<PartialDateT | null>,
+    +event: EventT,
+    +name?: CompT<string>,
+    +setlist?: CompT<string | null>,
+    +time?: CompT<string | null>,
+    +type?: CompT<EventT | null>,
+  },
+};
+
+const EditEvent = ({edit}: {+edit: EditEventProps}) => {
+  const display = edit.display_data;
+  const name = display.name;
+  const comment = display.comment;
+  const cancelled = display.cancelled;
+  const type = display.type;
+  const beginDate = display.begin_date;
+  const endDate = display.end_date;
+  const time = display.time;
+  const setlist = display.setlist;
+  return (
+    <table className="details edit-event">
+      <tr>
+        <th>{addColonText(l('Event'))}</th>
+        <td colSpan="2"><EntityLink entity={display.event} /></td>
+      </tr>
+      {name ? (
+        <Diff
+          label={addColonText(l('Name'))}
+          newText={name.new}
+          oldText={name.old}
+          split="\s+"
+        />
+      ) : null}
+      {comment ? (
+        <Diff
+          label={addColonText(l('Disambiguation'))}
+          newText={comment.new ?? ''}
+          oldText={comment.old ?? ''}
+          split="\s+"
+        />
+      ) : null}
+      {cancelled ? (
+        <FullChangeDiff
+          label={addColonText(l('Cancelled'))}
+          newContent={yesNo(cancelled.new)}
+          oldContent={yesNo(cancelled.old)}
+        />
+      ) : null}
+      {type ? (
+        <FullChangeDiff
+          label={addColonText(l('Type'))}
+          newContent={type.new?.name ?? ''}
+          oldContent={type.old?.name ?? ''}
+        />
+      ) : null}
+      {beginDate ? (
+        <Diff
+          label={addColonText(l('Begin date'))}
+          newText={formatDate(beginDate.new)}
+          oldText={formatDate(beginDate.old)}
+          split="-"
+        />
+      ) : null}
+      {endDate ? (
+        <Diff
+          label={addColonText(l('End date'))}
+          newText={formatDate(endDate.new)}
+          oldText={formatDate(endDate.old)}
+          split="-"
+        />
+      ) : null}
+      {time ? (
+        <FullChangeDiff
+          label={addColonText(l('Time'))}
+          newContent={time.new ?? ''}
+          oldContent={time.old ?? ''}
+        />
+      ) : null}
+      {setlist ? (
+        <Diff
+          label={addColonText(l('Setlist'))}
+          newText={setlist.new ?? ''}
+          oldText={setlist.old ?? ''}
+          split="\s+"
+        />
+      ) : null}
+    </table>
+  );
+};
+
+export default EditEvent;

root/server/components.js

@@ -277,6 +277,7 @@ module.exports = {
   'edit/details/AddWork': require('../edit/details/AddWork'),
   'edit/details/EditAlias': require('../edit/details/EditAlias'),
   'edit/details/EditArtist': require('../edit/details/EditArtist'),
+  'edit/details/EditEvent': require('../edit/details/EditEvent'),
   'edit/details/EditPlace': require('../edit/details/EditPlace'),
   'edit/details/EditReleaseGroup': require('../edit/details/EditReleaseGroup'),
   'edit/details/EditSeries': require('../edit/details/EditSeries'),