MBS-10364: Convert release merge page to React

metabrainz · Sep 9, 2022 · 06b4793 · 06b4793
1 parent 0e3aa27
commit 06b4793
Show file tree

Hide file tree

Showing 12 changed files with 379 additions and 173 deletions.
diff --git a/lib/MusicBrainz/Server/Controller/Release.pm b/lib/MusicBrainz/Server/Controller/Release.pm
@@ -427,6 +427,7 @@ sub _merge_form_arguments {
             push @mediums, {
                 id => $medium->id,
                 release_id => $medium->release_id,
+                release => $medium->release,
                 position => $position,
                 name => $name
             };
@@ -530,7 +531,12 @@ around _validate_merge => sub {
         if (@bad_recording_merges) {
             $c->model('ArtistCredit')->load(map { @$_ } @bad_recording_merges);
         }
-        $c->stash(bad_recording_merges => \@bad_recording_merges);
+
+        $c->stash(
+            bad_recording_merges => [
+                map { to_json_array($_) } @bad_recording_merges
+            ]
+        );
     }
 
     return 0 unless $self->$orig($c, $form);

diff --git a/lib/MusicBrainz/Server/Controller/Role/Merge.pm b/lib/MusicBrainz/Server/Controller/Role/Merge.pm
@@ -165,25 +165,25 @@ role {
         # field errors won't be encoded.
         my $is_merge_valid = $self->_validate_merge($c, $form);
 
-        if ($c->namespace =~ /^(?:area|artist|collection|event|instrument|label|place|recording|release_group|series|work)$/) {
-            my %props = (
-                isrcsDiffer => $c->stash->{isrcs_differ},
-                iswcsDiffer => $c->stash->{iswcs_differ},
-                privaciesDiffer => $c->stash->{privacies_differ},
-                typesDiffer => $c->stash->{types_differ},
-                form => $form->TO_JSON,
-                toMerge => to_json_array(\@entities),
-            );
-            $c->stash(
-                component_path => $c->namespace . '/'. type_to_model($c->namespace) . 'Merge',
-                component_props => \%props,
-                current_view => 'Node',
-            );
-        }
-
         if ($is_merge_valid) {
             $self->_merge_submit($c, $form, \@entities);
         }
+
+        my %props = (
+            badRecordingMerges => $c->stash->{bad_recording_merges},
+            isrcsDiffer => $c->stash->{isrcs_differ},
+            iswcsDiffer => $c->stash->{iswcs_differ},
+            mediums => to_json_array($c->stash->{mediums}),
+            privaciesDiffer => $c->stash->{privacies_differ},
+            typesDiffer => $c->stash->{types_differ},
+            form => $form->TO_JSON,
+            toMerge => to_json_array(\@entities),
+        );
+        $c->stash(
+            component_path => $c->namespace . '/' . type_to_model($c->namespace) . 'Merge',
+            component_props => \%props,
+            current_view => 'Node',
+        );
     };
 
     method _validate_merge => sub {

diff --git a/lib/MusicBrainz/Server/Form/Merge/Release.pm b/lib/MusicBrainz/Server/Form/Merge/Release.pm
@@ -6,6 +6,7 @@ extends 'MusicBrainz::Server::Form::Merge';
 
 has_field 'merge_strategy' => (
     type => 'Select',
+    default => $MusicBrainz::Server::Data::Release::MERGE_APPEND,
     required => 1
 );
 

diff --git a/root/components/list/ReleaseList.js b/root/components/list/ReleaseList.js
@@ -28,6 +28,7 @@ import {
   defineReleaseLanguageColumn,
   defineSeriesNumberColumn,
   defineTextColumn,
+  removeFromMergeColumn,
   taggerColumn,
 } from '../../utility/tableColumns.js';
 
@@ -36,6 +37,7 @@ type Props = {
   ...SeriesItemNumbersRoleT,
   +checkboxes?: string,
   +filterLabel?: LabelT,
+  +mergeForm?: MergeReleasesFormT,
   +order?: string,
   +releases: $ReadOnlyArray<ReleaseT>,
   +showInstrumentCreditsAndRelTypes?: boolean,
@@ -50,6 +52,7 @@ const ReleaseList = ({
   checkboxes,
   filterLabel,
   instrumentCreditsAndRelTypes,
+  mergeForm,
   order,
   releases,
   seriesItemNumbers,
@@ -64,8 +67,8 @@ const ReleaseList = ({
 
   const columns = React.useMemo(
     () => {
-      const checkboxColumn = $c.user && nonEmpty(checkboxes)
-        ? defineCheckboxColumn({name: checkboxes})
+      const checkboxColumn = $c.user && (nonEmpty(checkboxes) || mergeForm)
+        ? defineCheckboxColumn({mergeForm: mergeForm, name: checkboxes})
         : null;
       const seriesNumberColumn = seriesItemNumbers
         ? defineSeriesNumberColumn({seriesItemNumbers: seriesItemNumbers})
@@ -176,6 +179,7 @@ const ReleaseList = ({
         ...(statusColumn ? [statusColumn] : []),
         ...($c.session?.tport == null ? [] : [taggerColumn]),
         ...(showRatings ? [ratingsColumn] : []),
+        ...(mergeForm && releases.length > 2 ? [removeFromMergeColumn] : []),
       ];
     },
     [
@@ -184,7 +188,9 @@ const ReleaseList = ({
       checkboxes,
       filterLabel,
       instrumentCreditsAndRelTypes,
+      mergeForm,
       order,
+      releases,
       seriesItemNumbers,
       showInstrumentCreditsAndRelTypes,
       showLanguages,

diff --git a/root/release/ReleaseMerge.js b/root/release/ReleaseMerge.js
@@ -0,0 +1,80 @@
+/*
+ * @flow strict-local
+ * Copyright (C) 2020 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 * as React from 'react';
+
+import ReleaseList from '../components/list/ReleaseList.js';
+import Layout from '../layout/index.js';
+import * as manifest from '../static/manifest.mjs';
+import linkedEntities from '../static/scripts/common/linkedEntities.mjs';
+import sortByEntityName
+  from '../static/scripts/common/utility/sortByEntityName.js';
+import EnterEdit from '../static/scripts/edit/components/EnterEdit.js';
+import EnterEditNote
+  from '../static/scripts/edit/components/EnterEditNote.js';
+import FieldErrors from '../static/scripts/edit/components/FieldErrors.js';
+import ReleaseMergeStrategy
+  from '../static/scripts/edit/components/ReleaseMergeStrategy.js';
+
+type Props = {
+  +badRecordingMerges?:
+    $ReadOnlyArray<$ReadOnlyArray<RecordingWithArtistCreditT>>,
+  +form: MergeReleasesFormT,
+  +mediums: $ReadOnlyArray<MediumT>,
+  +toMerge: $ReadOnlyArray<ReleaseT>,
+};
+
+const ReleaseMerge = ({
+  badRecordingMerges,
+  form,
+  mediums,
+  toMerge,
+}: Props): React.Element<typeof Layout> => (
+  <Layout fullWidth title={l('Merge releases')}>
+    <div id="content">
+      <h1>{l('Merge releases')}</h1>
+      <p>
+        {l(`You are about to merge the following releases into a single
+            release. Please select the release which you would
+            like other releases to be merged into:`)}
+      </p>
+      <form method="post">
+        <ReleaseList
+          mergeForm={form}
+          releases={sortByEntityName(toMerge)}
+        />
+        <FieldErrors field={form.field.target} />
+
+        <ReleaseMergeStrategy
+          badRecordingMerges={badRecordingMerges}
+          form={form}
+          mediums={mediums}
+          releases={linkedEntities.release}
+        />
+
+        <EnterEditNote field={form.field.edit_note} />
+
+        <EnterEdit form={form}>
+          <button
+            className="negative"
+            name="submit"
+            type="submit"
+            value="cancel"
+          >
+            {l('Cancel')}
+          </button>
+        </EnterEdit>
+      </form>
+    </div>
+
+    {manifest.js('edit')}
+  </Layout>
+);
+
+export default ReleaseMerge;
diff --git a/root/release/merge.tt b/root/release/merge.tt
diff --git a/root/server/components.mjs b/root/server/components.mjs
@@ -165,6 +165,7 @@ export default {
   'release/CoverArt': (): Promise<mixed> => import('../release/CoverArt.js'),
   'release/CoverArtDarkened': (): Promise<mixed> => import('../release/CoverArtDarkened.js'),
   'release/ReleaseIndex': (): Promise<mixed> => import('../release/ReleaseIndex.js'),
+  'release/ReleaseMerge': (): Promise<mixed> => import('../release/ReleaseMerge.js'),
   'release/RemoveCoverArt': (): Promise<mixed> => import('../release/RemoveCoverArt.js'),
   'release_group/ReleaseGroupIndex': (): Promise<mixed> => import('../release_group/ReleaseGroupIndex.js'),
   'release_group/ReleaseGroupMerge': (): Promise<mixed> => import('../release_group/ReleaseGroupMerge.js'),

diff --git a/root/static/scripts/common/utility/renderMergeCheckboxElement.js b/root/static/scripts/common/utility/renderMergeCheckboxElement.js
@@ -9,7 +9,7 @@
 
 export default function renderMergeCheckboxElement(
   entity: CoreEntityT,
-  form: MergeFormT,
+  form: MergeFormT | MergeReleasesFormT,
   index: number,
 ): React$MixedElement {
   return (
@@ -20,7 +20,9 @@ export default function renderMergeCheckboxElement(
         value={entity.id}
       />
       <input
-        defaultChecked={entity.id === form.field.target.value}
+        defaultChecked={
+          String(entity.id) === String(form.field.target.value)
+        }
         name="merge.target"
         type="radio"
         value={entity.id}

diff --git a/root/static/scripts/edit.js b/root/static/scripts/edit.js
@@ -23,6 +23,7 @@ require('./edit/utility/guessFeat');
 require('./edit/utility/toggleEnded');
 require('./edit/MB/Control/Area');
 require('./edit/components/ArtistCreditEditor');
+require('./edit/components/ReleaseMergeStrategy');
 require('./edit/components/forms');
 require('./edit/MB/Control/ArtistEdit');
 require('./edit/MB/Control/Bubble');