Merge pull request #3113 from mwiencek/artist-credit-editor-refactor

MBS-12715, MBS-13526: ArtistCreditEditor refactor

root/static/images/attribution.txt

@@ -41,6 +41,7 @@ Images:
     icons/delete.png
     icons/information.png
     icons/tick.png (recolored to gold by CatQuest)
+    icons/arrow_undo.png
 
 ----------------------------------------------------------------------------
 

root/static/scripts/common/components/Autocomplete2.js

@@ -158,6 +158,7 @@ type InitialStateT<T: EntityItemT> = {
   +inputClass?: string,
   +inputRef?: {-current: HTMLInputElement | null},
   +inputValue?: string,
+  +isLookupPerformed?: boolean,
   +labelStyle?: {...},
   +placeholder?: string,
   +recentItemsKey?: string,
@@ -321,7 +322,7 @@ const Autocomplete2 = (React.memo(<T: EntityItemT>(
     disabled = false,
     entityType,
     highlightedIndex,
-    id,
+    id: inputId,
     inputChangeHook,
     inputRef: externalInputRef,
     inputValue,
@@ -616,12 +617,11 @@ const Autocomplete2 = (React.memo(<T: EntityItemT>(
   );
 
   const activeDescendant = highlightedItem
-    ? `${id}-item-${highlightedItem.id}`
+    ? `${inputId}-item-${highlightedItem.id}`
     : null;
-  const inputId = `${id}-input`;
-  const labelId = `${id}-label`;
-  const menuId = `${id}-menu`;
-  const statusId = `${id}-status`;
+  const labelId = `${inputId}-label`;
+  const menuId = `${inputId}-menu`;
+  const statusId = `${inputId}-status`;
 
   useOutsideClickEffect(
     containerRef,
@@ -703,7 +703,7 @@ const Autocomplete2 = (React.memo(<T: EntityItemT>(
   const menuItemElements = React.useMemo(
     () => items.map((item, index) => (
       <AutocompleteItem
-        autocompleteId={id}
+        autocompleteId={inputId}
         dispatch={dispatch}
         formatOptions={
           (
@@ -730,7 +730,7 @@ const Autocomplete2 = (React.memo(<T: EntityItemT>(
       dispatch,
       entityType,
       highlightedItem,
-      id,
+      inputId,
       items,
       selectItem,
       selectedItem,
@@ -879,3 +879,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);

root/static/scripts/common/components/ButtonPopover.js

@@ -146,7 +146,7 @@ const ButtonPopover = (props: PropsT): React$MixedElement => {
           </ErrorBoundary>
           <FloatingArrow
             context={context}
-            fill="white"
+            fill="currentColor"
             height={12}
             ref={arrowRef}
             stroke="#AAA"

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,

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';
@@ -67,6 +68,7 @@ const iconClassPicker = {
   release: 'releaselink',
   release_group: 'rglink',
   series: 'serieslink',
+  track: null,
   url: null,
   work: 'worklink',
 };
@@ -151,7 +153,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,
@@ -189,8 +196,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;
@@ -224,15 +233,17 @@ $ReadOnlyArray<Expand2ReactOutput> | Expand2ReactOutput | null => {
       : hover + ' ' + bracketedText(comment);
   }
 
+  const entityName = ko.unwrap(entity.name);
+
   if (entity.entityType === 'area') {
     content = empty(content) ? localizeAreaName(entity) : content;
   } else if (entity.entityType === 'instrument') {
     content = empty(content) ? localizeInstrumentName(entity) : content;
   } else if (entity.entityType === 'link_type') {
-    content = empty(content) ? l_relationships(entity.name) : content;
+    content = empty(content) ? l_relationships(entityName) : content;
   }
 
-  content = empty(content) ? ko.unwrap(entity.name) : content;
+  content = empty(content) ? entityName : content;
 
   if (!ko.unwrap(entity.gid)) {
     if (entity.entityType === 'url') {
@@ -262,17 +273,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;
       }
     }
   }

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);
       }
   }