MBS-12622: Show if URL has pending edits in links editor

If a URL is being edited, we should indicate it in the links editor.
This way it is possible to find out that, say, the URL you are adding
or changing the relationship for is actually going to change soon,
otherwise making your changes have unexpected consequences.

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

@@ -0,0 +1,50 @@
+/*
+ * @flow strict-local
+ * Copyright (C) 2023 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 openEditsForEntityIconUrl
+  from '../../../images/icons/open_edits_for_entity.svg';
+import entityHref from '../../common/utility/entityHref.js';
+
+import Tooltip from './Tooltip.js';
+
+type PropsT = {
+  +entity: RelatableEntityT,
+};
+
+const EntityPendingEditsWarning = ({
+  entity,
+}: PropsT): React$Element<typeof React.Fragment> | null => {
+  const hasPendingEdits = Boolean(entity.editsPending);
+  const openEditsLink = entityHref(entity, '/open_edits');
+
+  return hasPendingEdits && nonEmpty(openEditsLink) ? (
+    <>
+      {' '}
+      <Tooltip
+        content={exp.l(
+          'This entity has {edits_link|pending edits}.',
+          {edits_link: openEditsLink},
+        )}
+        target={
+          <img
+            alt={l('This entity has pending edits.')}
+            className="info"
+            height={16}
+            src={openEditsForEntityIconUrl}
+            style={{verticalAlign: 'middle'}}
+          />
+        }
+      />
+    </>
+  ) : null;
+};
+
+export default EntityPendingEditsWarning;

root/static/scripts/edit/externalLinks.js

@@ -39,6 +39,8 @@ import {
 } from '../relationship-editor/utility/prepareHtmlFormSubmission.js';
 import {isMalware} from '../url/utility/isGreyedOut.js';
 
+import EntityPendingEditsWarning
+  from './components/EntityPendingEditsWarning.js';
 import ExternalLinkAttributeDialog
   from './components/ExternalLinkAttributeDialog.js';
 import HelpIcon from './components/HelpIcon.js';
@@ -937,7 +939,7 @@ export class _ExternalLinksEditor
              * The first element of tuple `item` is not the URL
              * when the URL is not submitted therefore isn't grouped.
              */
-            const {url, rawUrl} = relationships[0];
+            const {url, rawUrl, entity1} = relationships[0];
             const isLastLink = index === linksByUrl.length - 1;
             const links = [...relationships];
             const linkIndexes = [];
@@ -1072,6 +1074,7 @@ export class _ExternalLinksEditor
                 relationships={links}
                 typeOptions={typeOptions}
                 url={url}
+                urlEntity={entity1}
                 urlMatchesType={urlMatchesType}
                 validateLink={(link) => this.validateLink(link)}
               />
@@ -1315,6 +1318,7 @@ type LinkProps = {
   +relationships: $ReadOnlyArray<LinkRelationshipT>,
   +typeOptions: $ReadOnlyArray<LinkTypeOptionT>,
   +url: string,
+  +urlEntity?: RelatableEntityT,
   +urlMatchesType: boolean,
   +validateLink: (LinkRelationshipT | LinkStateT) => ErrorT | null,
 };
@@ -1457,6 +1461,9 @@ export class ExternalLink extends React.Component<LinkProps> {
                 {props.url}
               </a>
             )}
+            {props.urlEntity ? (
+              <EntityPendingEditsWarning entity={props.urlEntity} />
+            ) : null}
             {props.url && props.duplicate !== null ? (
               <div
                 className="error field-error"

root/static/scripts/relationship-editor/components/RelationshipItem.js

@@ -10,14 +10,11 @@
 import * as React from 'react';
 import * as tree from 'weight-balanced-tree';
 
-import openEditsForEntityIconUrl
-  from '../../../images/icons/open_edits_for_entity.svg';
 import ButtonPopover from '../../common/components/ButtonPopover.js';
 import DescriptiveLink from '../../common/components/DescriptiveLink.js';
 import {bracketedText} from '../../common/utility/bracketed.js';
 import {displayLinkAttributesText}
   from '../../common/utility/displayLinkAttribute.js';
-import entityHref from '../../common/utility/entityHref.js';
 import {
   performReactUpdateAndMaintainFocus,
 } from '../../common/utility/focusManagement.js';
@@ -27,9 +24,10 @@ import {
 } from '../../common/utility/isLinkTypeDirectionOrderable.js';
 import relationshipDateText
   from '../../common/utility/relationshipDateText.js';
+import EntityPendingEditsWarning
+  from '../../edit/components/EntityPendingEditsWarning.js';
 import RelationshipPendingEditsWarning
   from '../../edit/components/RelationshipPendingEditsWarning.js';
-import Tooltip from '../../edit/components/Tooltip.js';
 import {
   getPhraseAndExtraAttributesText,
 } from '../../edit/utility/linkPhrase.js';
@@ -82,7 +80,6 @@ const RelationshipItem = (React.memo<PropsT>(({
   const [sourceCredit, targetCredit] = backward
     ? [relationship.entity1_credit, relationship.entity0_credit]
     : [relationship.entity0_credit, relationship.entity1_credit];
-  const targetHasPendingEdits = Boolean(target.editsPending);
   const isRemoved = relationship._status === REL_STATUS_REMOVE;
   const removeButtonId =
     'remove-relationship-' + getRelationshipKey(relationship);
@@ -282,26 +279,7 @@ const RelationshipItem = (React.memo<PropsT>(({
               })
             )
             : targetDisplay}
-          {targetHasPendingEdits ? (
-            <>
-              {' '}
-              <Tooltip
-                content={exp.l(
-                  'This entity has {edits_link|pending edits}.',
-                  {edits_link: entityHref(target, '/open_edits')},
-                )}
-                target={
-                  <img
-                    alt={l('This entity has pending edits.')}
-                    className="info"
-                    height={16}
-                    src={openEditsForEntityIconUrl}
-                    style={{verticalAlign: 'middle'}}
-                  />
-                }
-              />
-            </>
-          ) : null}
+          <EntityPendingEditsWarning entity={target} />
           <RelationshipPendingEditsWarning relationship={relationship} />
           {datesAndAttributes}
         </span>