From ec80cb14fb6bfada383c64f684d3fe2376fa1073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Tamargo?= <reosarevok@gmail.com>
Date: Thu, 23 Feb 2023 13:44:03 +0200
Subject: [PATCH] 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.
---
 .../components/EntityPendingEditsWarning.js   | 51 +++++++++++++++++++
 root/static/scripts/edit/externalLinks.js     |  9 +++-
 .../components/RelationshipItem.js            | 28 ++--------
 3 files changed, 62 insertions(+), 26 deletions(-)
 create mode 100644 root/static/scripts/edit/components/EntityPendingEditsWarning.js

diff --git a/root/static/scripts/edit/components/EntityPendingEditsWarning.js b/root/static/scripts/edit/components/EntityPendingEditsWarning.js
new file mode 100644
index 00000000000..e1736c6b17a
--- /dev/null
+++ b/root/static/scripts/edit/components/EntityPendingEditsWarning.js
@@ -0,0 +1,51 @@
+/*
+ * @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: CoreEntityT,
+};
+
+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;
diff --git a/root/static/scripts/edit/externalLinks.js b/root/static/scripts/edit/externalLinks.js
index 82aebc89c0a..155f75780d1 100644
--- a/root/static/scripts/edit/externalLinks.js
+++ b/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';
@@ -928,7 +930,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 = [];
@@ -1063,6 +1065,7 @@ export class _ExternalLinksEditor
                 relationships={links}
                 typeOptions={typeOptions}
                 url={url}
+                urlEntity={entity1}
                 urlMatchesType={urlMatchesType}
                 validateLink={(link) => this.validateLink(link)}
               />
@@ -1306,6 +1309,7 @@ type LinkProps = {
   +relationships: $ReadOnlyArray<LinkRelationshipT>,
   +typeOptions: $ReadOnlyArray<LinkTypeOptionT>,
   +url: string,
+  +urlEntity?: CoreEntityT,
   +urlMatchesType: boolean,
   +validateLink: (LinkRelationshipT | LinkStateT) => ErrorT | null,
 };
@@ -1448,6 +1452,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"
diff --git a/root/static/scripts/relationship-editor/components/RelationshipItem.js b/root/static/scripts/relationship-editor/components/RelationshipItem.js
index 8523a798a91..3c6a18844f5 100644
--- a/root/static/scripts/relationship-editor/components/RelationshipItem.js
+++ b/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);
@@ -281,26 +278,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>