External links editor refactor

This was the very first React component written for MBS, all the way back in
2015, and requires significant refactoring in order to follow the Rules of
React [1] and work properly with React v19 and new tools like react-compiler.

Fixes MBS-11889
Fixes MBS-11521

[1] https://react.dev/reference/rules

Author: mwiencek

lib/MusicBrainz/Server/Controller/ReleaseEditor.pm

@@ -39,6 +39,7 @@ sub _init_release_editor
     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'),

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/server/components.mjs

@@ -550,6 +550,7 @@ export default {
   'static/scripts/edit/components/GuessCaseIcon': (): Promise<mixed> => import('../static/scripts/edit/components/GuessCaseIcon.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/edit/MB/edit.js

@@ -15,6 +15,7 @@ import linkedEntities from '../../common/linkedEntities.mjs';
 import {compactMap, sortByNumber} from '../../common/utility/arrays.js';
 import clean from '../../common/utility/clean.js';
 import deepEqual from '../../common/utility/deepEqual.js';
+import isDatabaseRowId from '../../common/utility/isDatabaseRowId.js';
 import request from '../../common/utility/request.js';
 
 const edit = {TYPES};
@@ -86,33 +87,28 @@ var fields = edit.fields = {
     return {names};
   },
 
-  externalLinkRelationship(link, source) {
+  externalLinkRelationship(release, urlEntity, relationship) {
+    const relationshipId = number(relationship.id);
     var editData = {
-      id: number(link.relationship),
-      linkTypeID: number(link.type),
-      attributes: [],
+      id: isDatabaseRowId(relationshipId) ? relationshipId : null,
+      linkTypeID: number(relationship.linkTypeID),
+      attributes: relationship.video
+        ? [{type: {gid: VIDEO_ATTRIBUTE_GID}}]
+        : [],
       entities: [
-        this.relationshipEntity(source),
-        {entityType: 'url', name: string(link.url)},
+        this.relationshipEntity(release),
+        this.relationshipEntity(urlEntity),
       ],
     };
 
-    if (source.entityType > 'url') {
-      editData.entities.reverse();
-    }
-
-    if (link.video) {
-      editData.attributes = [{type: {gid: VIDEO_ATTRIBUTE_GID}}];
-    }
-
-    editData.begin_date = fields.partialDate(link.begin_date);
-    editData.end_date = fields.partialDate(link.end_date);
+    editData.begin_date = fields.partialDate(relationship.beginDate);
+    editData.end_date = fields.partialDate(relationship.endDate);
 
     if (editData.end_date &&
       Object.values(editData.end_date).some(nonEmpty)) {
       editData.ended = true;
     } else {
-      editData.ended = Boolean(value(link.ended));
+      editData.ended = Boolean(value(relationship.ended));
     }
 
     return editData;

root/static/scripts/edit/URLCleanup.js

@@ -7771,7 +7771,7 @@ export class Checker {
     selectedTypes: $ReadOnlyArray<string>,
     allowedTypes: $ReadOnlyArray<RelationshipTypeT> | null,
   ): ValidationResult {
-    if (!allowedTypes) {
+    if (allowedTypes == null || allowedTypes.length === 0) {
       return {result: true};
     }
     // Only a single type is selected

root/static/scripts/edit/components/RelationshipPendingEditsWarning.js

@@ -9,19 +9,18 @@
 
 import openEditsForRelIconUrl
   from '../../../images/icons/open_edits_for_rel.svg';
-import type {
-  LinkRelationshipT,
-} from '../../external-links-editor/types.js';
-import type {
-  RelationshipStateT,
-} from '../../relationship-editor/types.js';
-import getOpenEditsLink
-  from '../../relationship-editor/utility/getOpenEditsLink.js';
+import getOpenEditsLink, {
+  type RelationshipEntityPropertiesT,
+} from '../../relationship-editor/utility/getOpenEditsLink.js';
 
 import Tooltip from './Tooltip.js';
 
 component RelationshipPendingEditsWarning(
-  relationship: LinkRelationshipT | RelationshipStateT
+  relationship: $ReadOnly<{
+    ...RelationshipEntityPropertiesT,
+    +editsPending: boolean,
+    ...
+  }>
 ) {
   const hasPendingEdits = relationship.editsPending;
   const openEditsLink = getOpenEditsLink(relationship);

root/static/scripts/edit/components/RemoveButton.js

@@ -8,14 +8,12 @@
  */
 
 component RemoveButton(
-  dataIndex?: number,
-  onClick: (event: SyntheticEvent<HTMLButtonElement>) => void,
+  onClick: (event: SyntheticMouseEvent<HTMLButtonElement>) => void,
   title: string,
 ) {
   return (
     <button
       className="nobutton icon remove-item"
-      data-index={dataIndex}
       onClick={onClick}
       title={title}
       type="button"

root/static/scripts/event/components/EventEditForm.js

@@ -40,10 +40,16 @@ import {
   applyAllPendingErrors,
   hasSubfieldErrors,
 } from '../../edit/utility/subfieldErrors.js';
-import ExternalLinksEditor, {
-  _ExternalLinksEditor,
-  prepareExternalLinksHtmlFormSubmission,
-} from '../../external-links-editor/components/ExternalLinksEditor.js';
+import useExternalLinksEditor
+  from '../../external-links-editor/hooks/useExternalLinksEditor.js';
+import {
+  createInitialState as createExternalLinksEditorState,
+  reducer as externalLinksEditorReducer,
+} from '../../external-links-editor/state.js';
+import type {
+  LinksEditorActionT,
+  LinksEditorStateT,
+} from '../../external-links-editor/types.js';
 import {
   NonHydratedRelationshipEditorWrapper as RelationshipEditorWrapper,
 } from '../../relationship-editor/components/RelationshipEditorWrapper.js';
@@ -55,18 +61,27 @@ type ActionT =
   | {+type: 'show-all-pending-errors'}
   | {+type: 'toggle-type-bubble'}
   | {+type: 'update-date-range', +action: DateRangeFieldsetActionT}
+  | {+type: 'update-external-links-editor', +action: LinksEditorActionT}
   | {+type: 'update-name', +action: NameActionT};
 /* eslint-enable ft-flow/sort-keys */
 
 type StateT = {
+  +externalLinksEditor: LinksEditorStateT,
   +form: EventFormT,
   +guessCaseOptions: GuessCaseOptionsStateT,
   +isGuessCaseOptionsOpen: boolean,
   +showTypeBubble: boolean,
 };
 
-function createInitialState(form: EventFormT) {
+function createInitialState({
+  $c,
+  form,
+}: {
+  +$c: SanitizedCatalystContextT,
+  +form: EventFormT,
+}) {
   return {
+    externalLinksEditor: createExternalLinksEditorState($c),
     form,
     guessCaseOptions: createGuessCaseOptionsState(),
     isGuessCaseOptionsOpen: false,
@@ -111,6 +126,12 @@ function reducer(state: StateT, action: ActionT): StateT {
         .set('guessCaseOptions', nameState.guessCaseOptions)
         .set('isGuessCaseOptionsOpen', nameState.isGuessCaseOptionsOpen);
     }
+    {type: 'update-external-links-editor', const action} => {
+      newStateCtx.set(
+        'externalLinksEditor',
+        externalLinksEditorReducer(state.externalLinksEditor, action),
+      );
+    }
     {type: 'toggle-type-bubble'} => {
       newStateCtx.set('showTypeBubble', true);
     }
@@ -153,7 +174,7 @@ component EventEditForm(
 
   const [state, dispatch] = React.useReducer(
     reducer,
-    initialForm,
+    {$c, form: initialForm},
     createInitialState,
   );
 
@@ -183,11 +204,12 @@ component EventEditForm(
     dispatch({action, type: 'update-date-range'});
   }, [dispatch]);
 
-  const hasErrors = hasSubfieldErrors(state.form);
+  const externalLinksEditor = useExternalLinksEditor(state, dispatch);
 
-  const eventEntity: EventT = getSourceEntityData($c, 'event');
+  const hasErrors = hasSubfieldErrors(state.form) ||
+    externalLinksEditor.hasErrors;
 
-  const externalLinksEditorRef = React.createRef<_ExternalLinksEditor>();
+  const eventEntity: EventT = getSourceEntityData($c, 'event');
 
   // Ensure errors are shown if the user tries to submit with Enter
   const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLFormElement>) => {
@@ -201,11 +223,6 @@ component EventEditForm(
       dispatch({type: 'show-all-pending-errors'});
       event.preventDefault();
     }
-    invariant(externalLinksEditorRef.current);
-    prepareExternalLinksHtmlFormSubmission(
-      'edit-event',
-      externalLinksEditorRef.current,
-    );
   };
 
   const typeSelectRef = React.useRef<HTMLDivElement | null>(null);
@@ -299,14 +316,7 @@ component EventEditForm(
           seededRelationships={$c.stash.seeded_relationships}
         />
 
-        <fieldset>
-          <legend>{l('External links')}</legend>
-          <ExternalLinksEditor
-            isNewEntity={!eventEntity.id}
-            ref={externalLinksEditorRef}
-            sourceData={eventEntity}
-          />
-        </fieldset>
+        {externalLinksEditor.element}
 
         <EnterEditNote field={state.form.field.edit_note} />
         <EnterEdit disabled={hasErrors} form={state.form} />