ArtistCreditEditor refactor (including MBS-12715)

* Uses the new `ButtonPopover` component. * Uses the new `Autocomplete2` component (MBS-12715). * Replaces the nasty `ArtistCreditBubble` update hacks with `createPortal`. * Converts everything into "stateless" (as in, no internal state) functional components. * Adds Flow types. * Fixes a usability issue with removing items by keeping focus on the current [X] and replacing the deleted row with [removed]. See https://ux.stackexchange.com/a/99411.
metabrainz · Dec 6, 2023 · 8402a91 · 8402a91
1 parent bbde55f
commit 8402a91
Show file tree

Hide file tree

Showing 31 changed files with 1,407 additions and 894 deletions.
diff --git a/root/static/scripts/common/components/Autocomplete2.js b/root/static/scripts/common/components/Autocomplete2.js
@@ -156,6 +156,7 @@ type InitialStateT<T: EntityItemT> = {
   ) => boolean,
   +inputClass?: string,
   +inputValue?: string,
+  +isLookupPerformed?: boolean,
   +labelStyle?: {...},
   +placeholder?: string,
   +recentItemsKey?: string,
@@ -799,6 +800,7 @@ const Autocomplete2 = (React.memo(<T: EntityItemT>(
               : l('Type to search, or paste an MBID')
           }
           ref={inputRef}
+          type="text"
           value={inputValue}
         />
         <button
@@ -872,3 +874,9 @@ const Autocomplete2 = (React.memo(<T: EntityItemT>(
 }): React$AbstractComponent<PropsT<any>, void>);
 
 export default Autocomplete2;
+
+// XXX Until Flow supports https://github.com/facebook/flow/issues/7672
+export const ArtistAutocomplete:
+  React$AbstractComponent<PropsT<ArtistT>, void> =
+  // $FlowIgnore[unclear-type]
+  (Autocomplete2: any);
diff --git a/root/static/scripts/common/components/DescriptiveLink.js b/root/static/scripts/common/components/DescriptiveLink.js
@@ -9,6 +9,8 @@
 
 import ko from 'knockout';
 
+import type {ReleaseEditorTrackT} from '../../release-editor/types.js';
+
 import AreaWithContainmentLink from './AreaWithContainmentLink.js';
 import ArtistCreditLink from './ArtistCreditLink.js';
 import EntityLink from './EntityLink.js';
@@ -20,7 +22,7 @@ type DescriptiveLinkProps = {
   +customArtistCredit?: ArtistCreditT,
   +deletedCaption?: string,
   +disableLink?: boolean,
-  +entity: CollectionT | RelatableEntityT,
+  +entity: CollectionT | RelatableEntityT | TrackT | ReleaseEditorTrackT,
   +showDeletedArtists?: boolean,
   +showDisambiguation?: boolean,
   +showEditsPending?: boolean,

diff --git a/root/static/scripts/common/components/EntityLink.js b/root/static/scripts/common/components/EntityLink.js
@@ -11,6 +11,7 @@ import * as Sentry from '@sentry/browser';
 import ko from 'knockout';
 import * as React from 'react';
 
+import type {ReleaseEditorTrackT} from '../../release-editor/types.js';
 import isGreyedOut from '../../url/utility/isGreyedOut.js';
 import localizeAreaName from '../i18n/localizeAreaName.js';
 import localizeInstrumentName from '../i18n/localizeInstrumentName.js';
@@ -65,6 +66,7 @@ const iconClassPicker = {
   release: 'releaselink',
   release_group: 'rglink',
   series: 'serieslink',
+  track: null,
   url: null,
   work: 'worklink',
 };
@@ -149,7 +151,12 @@ type EntityLinkProps = {
   +content?: ?Expand2ReactOutput,
   +deletedCaption?: string,
   +disableLink?: boolean,
-  +entity: RelatableEntityT | CollectionT | LinkTypeT,
+  +entity:
+    | RelatableEntityT
+    | CollectionT
+    | LinkTypeT
+    | TrackT
+    | ReleaseEditorTrackT,
   +hover?: string,
   +nameVariation?: boolean,
   +showCaaPresence?: boolean,
@@ -187,8 +194,10 @@ const EntityLink = ({
 }: EntityLinkProps):
 $ReadOnlyArray<Expand2ReactOutput> | Expand2ReactOutput | null => {
   const hasCustomContent = nonEmpty(passedContent);
+  // $FlowIgnore[sketchy-null-mixed]
   const hasEditsPending = entity.editsPending || false;
   const hasSubPath = nonEmpty(subPath);
+  // $FlowIgnore[prop-missing]
   const comment = nonEmpty(entity.comment) ? ko.unwrap(entity.comment) : '';
 
   let content = passedContent;
@@ -216,6 +225,8 @@ $ReadOnlyArray<Expand2ReactOutput> | Expand2ReactOutput | null => {
     hover = entity.sort_name + (comment ? ' ' + bracketedText(comment) : '');
   }
 
+  const entityName = ko.unwrap(entity.name);
+
   if (entity.entityType === 'area') {
     content = empty(content) ? localizeAreaName(entity) : content;
   } else if (entity.entityType === 'instrument') {
@@ -224,7 +235,7 @@ $ReadOnlyArray<Expand2ReactOutput> | Expand2ReactOutput | null => {
     content = empty(content) ? l_relationships(entity.name) : content;
   }
 
-  content = empty(content) ? ko.unwrap(entity.name) : content;
+  content = empty(content) ? entityName : content;
 
   if (!ko.unwrap(entity.gid)) {
     if (entity.entityType === 'url') {
@@ -254,17 +265,17 @@ $ReadOnlyArray<Expand2ReactOutput> | Expand2ReactOutput | null => {
   // URLs are kind of weird and we probably don't care to set this for them
   if (!hasSubPath && entity.entityType !== 'url') {
     if (nameVariation === undefined && typeof content === 'string') {
-      nameVariation = content !== entity.name;
+      nameVariation = content !== entityName;
     }
 
     if (nameVariation === true) {
       if (nonEmpty(hover)) {
         hover = texp.l('{name} – {additional_info}', {
           additional_info: hover,
-          name: entity.name,
+          name: entityName,
         });
       } else {
-        hover = ko.unwrap(entity.name);
+        hover = entityName;
       }
     }
   }

diff --git a/root/static/scripts/common/utility/entityHref.js b/root/static/scripts/common/utility/entityHref.js
@@ -21,7 +21,8 @@ type LinkableEntity =
   | {+entityType: 'iswc', +iswc: string, ...}
   | {+entityType: RelatableEntityTypeT, +gid: string, ...}
   | {+entityType: 'collection', +gid: string, ...}
-  | {+entityType: 'link_type', +gid: string, ...};
+  | {+entityType: 'link_type', +gid: string, ...}
+  | {+entityType: 'track', +gid?: string, ...};
 
 function generateHref(
   path: string,
@@ -87,7 +88,7 @@ function entityHref(
       break;
 
     default:
-      if (entityProps.mbid && entity.gid) {
+      if (entityProps.mbid && nonEmpty(entity.gid)) {
         id = ko.unwrap(entity.gid);
       }
   }