MBS-11889, MBS-11521: External links editor refactor

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ env:
   MTCAPTCHA_PUBLIC_KEY: ${{ secrets.MTCAPTCHA_PUBLIC_KEY }}
   MTCAPTCHA_PRIVATE_KEY: ${{ secrets.MTCAPTCHA_PRIVATE_KEY }}
   MTCAPTCHA_PRIVATE_TEST_KEY: ${{ secrets.MTCAPTCHA_PRIVATE_TEST_KEY }}
-  TESTS_IMAGE_TAG: v-2026-03-31.0
+  TESTS_IMAGE_TAG: v-2026-03-31.1
   SECOND_PERL_VERSION: 5.42.0
 
 jobs:

eslint.config.mjs

@@ -985,20 +985,11 @@ export default [
   {
     files: [
       'root/static/scripts/common/components/TagEditor.js',
-      'root/static/scripts/edit/externalLinks.js',
     ],
     rules: {
       'react/no-access-state-in-setstate': 'off',
     },
   },
-  {
-    files: [
-      'root/static/scripts/edit/externalLinks.js',
-    ],
-    rules: {
-      'react/no-multi-comp': 'off',
-    },
-  },
   {
     files: [
       'root/search/components/ArtistResults.js',
@@ -1012,13 +1003,9 @@ export default [
       'root/static/scripts/common/components/CDTocReleaseListRow.js',
       'root/static/scripts/common/components/TagEditor.js',
       'root/static/scripts/edit/check-duplicates.js',
-      'root/static/scripts/edit/components/ExternalLinkAttributeDialog.js',
       'root/static/scripts/edit/components/FormRowNameWithGuessCase.js',
       'root/static/scripts/edit/components/FormRowSelectList.js',
       'root/static/scripts/edit/components/ReleaseMergeStrategy.js',
-      'root/static/scripts/edit/components/URLInputPopover.js',
-      'root/static/scripts/edit/components/UrlRelationshipCreditFieldset.js',
-      'root/static/scripts/edit/externalLinks.js',
       'root/static/scripts/event/components/EventEditForm.js',
       'root/static/scripts/relationship-editor/components/DialogPreview.js',
     ],
@@ -1034,7 +1021,6 @@ export default [
       'root/static/scripts/common/i18n/expand2.js',
       'root/static/scripts/common/utility/cloneDeep.mjs',
       'root/static/scripts/edit/components/withLoadedTypeInfo.js',
-      'root/static/scripts/edit/externalLinks.js',
       'root/static/scripts/relationship-editor/components/DialogEntityCredit.js',
       'root/static/scripts/relationship-editor/components/DialogTargetType.js',
       'root/static/scripts/relationship-editor/components/RelationshipEditor.js',
@@ -1068,12 +1054,12 @@ export default [
       'root/static/scripts/common/utility/createFastObjectCloneFunction.js',
       'root/static/scripts/edit/components/ArtistCreditEditor.js',
       'root/static/scripts/edit/components/ArtistCreditEditor/utilities.js',
-      'root/static/scripts/edit/components/ExternalLinkAttributeDialog.js',
       'root/static/scripts/edit/components/Multiselect.js',
       'root/static/scripts/edit/components/withLoadedTypeInfo.js',
       'root/static/scripts/edit/utility/compactEntityJson.js',
       'root/static/scripts/edit/utility/reducerWithErrorHandling.js',
       'root/static/scripts/edit/utility/subfieldErrors.js',
+      'root/static/scripts/external-links-editor/components/ExternalLinkRelationshipDialog.js',
       'root/static/scripts/guess-case/MB/GuessCase/Main.js',
       'root/static/scripts/relationship-editor/components/DialogAttribute/MultiselectAttribute.js',
       'root/static/scripts/relationship-editor/components/DialogEntityCredit.js',

flow-typed/npm/react-dom_v18.x.x.js → flow-typed/npm/react-dom_v19.x.x.js

@@ -1,5 +1,4 @@
-// flow-typed signature: bd8a9984746306d26194a489f3aeff35
-// flow-typed version: 388e9edcf0/react-dom_v18.x.x/flow_>=v0.127.x
+// @flow strict
 
 declare module 'react-dom_shared-types' {
   /**
@@ -105,33 +104,13 @@ declare module 'react-dom_shared-types' {
 }
 
 declare module 'react-dom' {
-  import * as React from 'react';
-
   declare var version: string;
 
-  declare function findDOMNode(
-    componentOrElement: Element | ?React.Component<any, any>
-  ): null | Element | Text;
-
-  declare function render<ElementType: React.ElementType>(
-    element: React.MixedElement,
-    container: Element,
-    callback?: () => void
-  ): React.ElementRef<ElementType>;
-
-  declare function hydrate<ElementType: React.ElementType>(
-    element: React.MixedElement,
-    container: Element,
-    callback?: () => void
-  ): React.ElementRef<ElementType>;
-
   declare function createPortal(
     node: React.Node,
     container: Element
   ): React$Portal;
 
-  declare function unmountComponentAtNode(container: any): boolean;
-
   declare function flushSync(callback: () => mixed): void;
 
   declare function unstable_batchedUpdates<A, B, C, D, E>(
@@ -142,15 +121,6 @@ declare module 'react-dom' {
     d: D,
     e: E
   ): void;
-
-  declare function unstable_renderSubtreeIntoContainer<
-    ElementType: React.ElementType
-  >(
-    parentComponent: React.Component<any, any>,
-    nextElement: React.MixedElement,
-    container: any,
-    callback?: () => void
-  ): React.ElementRef<ElementType>;
 }
 
 declare module 'react-dom/client' {
@@ -216,83 +186,3 @@ declare module 'react-dom/server' {
     element: React.Node
   ): stream$Readable;
 }
-
-declare module 'react-dom/test-utils' {
-  import * as React from 'react';
-
-  declare interface Thenable {
-    then(resolve: () => mixed, reject?: () => mixed): mixed,
-  }
-
-  declare var Simulate: {
-    [eventName: string]: (
-      element: Element,
-      eventData?: { [key: string]: mixed, ... }
-    ) => void,
-    ...
-  };
-
-  declare function renderIntoDocument(
-    instance: React.MixedElement
-  ): React.Component<any, any>;
-
-  declare function mockComponent(
-    componentClass: React.ElementType,
-    mockTagName?: string
-  ): { [key: string]: mixed, ... };
-
-  declare function isElement(element: React.MixedElement): boolean;
-
-  declare function isElementOfType(
-    element: React.MixedElement,
-    componentClass: React.ElementType
-  ): boolean;
-
-  declare function isDOMComponent(instance: any): boolean;
-
-  declare function isCompositeComponent(
-    instance: React.Component<any, any>
-  ): boolean;
-
-  declare function isCompositeComponentWithType(
-    instance: React.Component<any, any>,
-    componentClass: React.ElementType
-  ): boolean;
-
-  declare function findAllInRenderedTree(
-    tree: React.Component<any, any>,
-    test: (child: React.Component<any, any>) => boolean
-  ): Array<React.Component<any, any>>;
-
-  declare function scryRenderedDOMComponentsWithClass(
-    tree: React.Component<any, any>,
-    className: string
-  ): Array<Element>;
-
-  declare function findRenderedDOMComponentWithClass(
-    tree: React.Component<any, any>,
-    className: string
-  ): ?Element;
-
-  declare function scryRenderedDOMComponentsWithTag(
-    tree: React.Component<any, any>,
-    tagName: string
-  ): Array<Element>;
-
-  declare function findRenderedDOMComponentWithTag(
-    tree: React.Component<any, any>,
-    tagName: string
-  ): ?Element;
-
-  declare function scryRenderedComponentsWithType(
-    tree: React.Component<any, any>,
-    componentClass: React.ElementType
-  ): Array<React.Component<any, any>>;
-
-  declare function findRenderedComponentWithType(
-    tree: React.Component<any, any>,
-    componentClass: React.ElementType
-  ): ?React.Component<any, any>;
-
-  declare function act(callback: () => void | Thenable): Thenable;
-}

lib/MusicBrainz/Server.pm

@@ -871,6 +871,7 @@ sub TO_JSON {
         release_artwork_count
         release_cdtoc_count
         seeded_relationships
+        seeded_release_data
         series_ordering_types
         server_details
         server_languages

lib/MusicBrainz/Server/Controller/Artist.pm

@@ -893,6 +893,9 @@ sub edit_credit : Chained('credit') PathPart('edit') Edit {
     my $artist = $c->stash->{artist};
     my $ac = $c->stash->{ac};
 
+    # Needed by `getSourceEntityData` on the client.
+    $c->stash( source_entity => $artist->TO_JSON );
+
     $self->edit_action(
         $c,
         form        => 'EditArtistCredit',

lib/MusicBrainz/Server/Controller/ReleaseEditor.pm

@@ -34,11 +34,12 @@ sub _init_release_editor
         $c->req->body_params->{redirect_uri}
     );
 
-    $options{seeded_data} = $c->json->encode($self->_seeded_data($c) // {});
+    $options{seeded_release_data} = $self->_seeded_data($c);
 
     my @medium_formats = $c->model('MediumFormat')->get_all;
     my $discid_formats = [ grep { $_ } map { $_->has_discids ? ($_->id) : () } @medium_formats ];
     my %medium_format_dates = map { $_->id => $_->year } @medium_formats;
+    my $release = $c->stash->{release};
 
     $c->stash(
         template            => 'release/edit/layout.tt',
@@ -48,7 +49,7 @@ sub _init_release_editor
         statuses            => select_options_tree($c, 'ReleaseStatus'),
         languages           => build_grouped_options($c, language_options($c)),
         scripts             => build_grouped_options($c, script_options($c)),
-        source_entity       => to_json_object($c->stash->{release}),
+        source_entity       => to_json_object($release) // {entityType => 'release', isNewEntity => \1},
         packagings          => select_options_tree($c, 'ReleasePackaging'),
         countries           => select_options($c, 'CountryArea'),
         formats             => select_options_tree($c, 'MediumFormat'),
@@ -102,6 +103,9 @@ sub add : Path('/release/add') Edit RequireAuth
     $self->_init_release_editor($c, return_to => $return_to);
 }
 
+# NOTE-SEEDED-DATA-TYPES-1: The types of the final seeded data format
+# are to be kept in sync with root/types/releaseeditor.js.
+
 sub _seeded_data
 {
     my ($self, $c) = @_;

package.json

@@ -50,8 +50,8 @@
     "pg-cursor": "2.19.0",
     "po2json": "https://github.com/metabrainz/po2json.git#ba28b657a4af3a3b3753e874bfc233379011c94b",
     "punycode": "2.3.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "react-table": "7.8.0",
     "redux": "4.2.1",
     "shell-quote": "1.8.3",
@@ -63,7 +63,7 @@
     "tldts": "7.0.25",
     "webpack": "5.105.4",
     "webpack-node-externals": "3.0.0",
-    "weight-balanced-tree": "0.9.0",
+    "weight-balanced-tree": "0.16.0",
     "whatwg-fetch": "3.6.20",
     "yargs": "3.10.0"
   },

root/components/forms.tt

@@ -273,5 +273,5 @@
 [%- END -%]
 
 [%- MACRO external_links_editor BLOCK -%]
-  <div id="external-links-editor-container"></div>
+  [%- React.embed(c, 'static/scripts/external-links-editor/components/StandaloneExternalLinksEditor') -%]
 [%- END -%]

root/release/EditRelationships.js

@@ -12,15 +12,17 @@ import * as React from 'react';
 import {CatalystContext} from '../context.mjs';
 import Layout from '../layout/index.js';
 import manifest from '../static/manifest.mjs';
+import {
+  getSourceEntityData,
+} from '../static/scripts/common/utility/catalyst.js';
 import ReleaseRelationshipEditor
   from '../static/scripts/release/components/ReleaseRelationshipEditor.js';
 
 import ReleaseHeader from './ReleaseHeader.js';
 
 component EditRelationships() {
   const $c = React.useContext(CatalystContext);
-  const release = $c.stash.source_entity;
-  invariant(release?.entityType === 'release');
+  const release: ReleaseT = getSourceEntityData($c, 'release');
 
   return (
     <Layout

root/release/edit/layout.tt

@@ -87,7 +87,6 @@
     [%- END %]
       returnTo: "[% return_to | js %]",
       redirectURI: "[% redirect_uri | js %]",
-      seed: [% closing_tag_escape(seeded_data) OR 'null' %]
     });
   </script>
 [%- END -%]

root/server/components.mjs

@@ -452,6 +452,7 @@ export default {
   'static/scripts/edit/components/HydratedArtistDateRangeFieldset': (): Promise<mixed> => import('../static/scripts/edit/components/HydratedArtistDateRangeFieldset.js'),
   'static/scripts/edit/components/HydratedDateRangeFieldset': (): Promise<mixed> => import('../static/scripts/edit/components/HydratedDateRangeFieldset.js'),
   'static/scripts/edit/components/InformationIcon': (): Promise<mixed> => import('../static/scripts/edit/components/InformationIcon.js'),
+  'static/scripts/external-links-editor/components/StandaloneExternalLinksEditor': (): Promise<mixed> => import('../static/scripts/external-links-editor/components/StandaloneExternalLinksEditor.js'),
   'static/scripts/recording/RecordingName': (): Promise<mixed> => import('../static/scripts/recording/RecordingName.js'),
   'static/scripts/relationship-editor/components/RelationshipEditorWrapper': (): Promise<mixed> => import('../static/scripts/relationship-editor/components/RelationshipEditorWrapper.js'),
   'static/scripts/release-editor/components/EditNoteTab': (): Promise<mixed> => import('../static/scripts/release-editor/components/EditNoteTab.js'),

root/static/scripts/admin/components/PossibleSpammersList.js

@@ -144,16 +144,15 @@ function reducer(state: StateT, action: ActionT): StateT {
     {type: 'update-spammer-button', const action} => {
       return {
         ...state,
-        users: tree.update(
-          state.users,
-          action.state,
-          cmpUserState,
-          (existingValue) => spammerButtonReducer(
+        users: tree.update(state.users, {
+          cmp: cmpUserState,
+          key: action.state,
+          onConflict: (existingValue) => spammerButtonReducer(
             existingValue,
             action,
           ),
-          onNotFoundThrowError,
-        ),
+          onNotFound: onNotFoundThrowError,
+        }),
       };
     }
     {type: 'set-users-fetch-error', const error} => {

root/static/scripts/common/entity.js

@@ -19,7 +19,10 @@ import DescriptiveLink from './components/DescriptiveLink.js';
 import EditorLink from './components/EditorLink.js';
 import EntityLink from './components/EntityLink.js';
 import {bracketedText} from './utility/bracketed.js';
-import {getSourceEntityData} from './utility/catalyst.js';
+import {
+  getCatalystContext,
+  getSourceEntityData,
+} from './utility/catalyst.js';
 import clean from './utility/clean.js';
 import {cloneArrayDeep, cloneObjectDeep} from './utility/cloneDeep.mjs';
 import formatTrackLength from './utility/formatTrackLength.js';
@@ -136,7 +139,9 @@ import MB from './MB.js';
     if (MB._sourceEntityInstance != null) {
       return MB._sourceEntityInstance;
     }
-    MB._sourceEntityInstance = MB.entity(getSourceEntityData());
+    MB._sourceEntityInstance = MB.entity(getSourceEntityData(
+      getCatalystContext(),
+    ));
     return MB._sourceEntityInstance;
   };