MBS-8242: Link to specific relationship type docs from rel edits

This adds a link to the doc page(s) for the relationship type(s) involved in a relationship edit (add, edit or remove). It seems very useful to have direct links to the documentation (often including specific guidelines) directly in the place people need to vote on the changes from. We pass an array to allow multiple types in EditRelationship; we pass the rels through a Set to remove duplicates when EditRelationship does not change the rel type.
metabrainz · Sep 5, 2023 · 1af2e8d · 1af2e8d
1 parent 1407464
commit 1af2e8d
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 49 deletions.
diff --git a/root/edit/components/RelationshipDocsTooltip.js b/root/edit/components/RelationshipDocsTooltip.js
@@ -0,0 +1,67 @@
+/*
+ * @flow strict
+ * 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 commaOnlyList
+  from '../../static/scripts/common/i18n/commaOnlyList.js';
+import HelpIcon from '../../static/scripts/edit/components/HelpIcon.js';
+import getRelationshipLinkType
+  from '../../static/scripts/edit/utility/getRelationshipLinkType.js';
+
+type Props = {
+  +relationships: $ReadOnlyArray<RelationshipT>,
+};
+
+const RelationshipDocsTooltip = ({
+  relationships,
+}: Props): React$Element<'div'> | null => {
+  const relationshipTypes = [...new Set(
+    relationships.reduce((types: Array<LinkTypeT>, relationship) => {
+      const type = getRelationshipLinkType(relationship);
+      if (type && type.gid && type.name) {
+        types.push(type);
+      }
+      return types;
+    }, []),
+  )];
+
+  if (!relationshipTypes?.length) {
+    return null;
+  }
+
+  const docLinks = relationshipTypes.map(relationshipType => exp.l(
+    '“{doc_link|{name}}”',
+    {
+      doc_link: {
+        href: '/relationship/' + relationshipType.gid,
+        target: '_blank',
+      },
+      name: relationshipType.name,
+    },
+  ));
+
+  const helpContent = (
+    exp.l(
+      `See the documentation for the relationship types in this edit:
+       {doc_links}.`,
+      {
+        doc_links: commaOnlyList(docLinks),
+      },
+    )
+  );
+
+  return (
+    <div className="edit-help">
+      <HelpIcon
+        content={helpContent}
+      />
+    </div>
+  );
+};
+
+export default RelationshipDocsTooltip;
diff --git a/root/edit/details/AddRelationship.js b/root/edit/details/AddRelationship.js
@@ -9,6 +9,8 @@
 
 import Relationship
   from '../../static/scripts/common/components/Relationship.js';
+import RelationshipDocsTooltip
+  from '../components/RelationshipDocsTooltip.js';
 
 type Props = {
   +edit: AddRelationshipEditT,
@@ -17,33 +19,36 @@ type Props = {
 const AddRelationship = ({edit}: Props): React$MixedElement => {
   const relationship = edit.display_data.relationship;
   return (
-    <table className="details add-relationship">
-      <tr>
-        <th>{l('Relationship:')}</th>
-        <td>
-          <Relationship
-            allowNewEntity0={relationship.entity0_id === 0}
-            allowNewEntity1={relationship.entity1_id === 0}
-            relationship={relationship}
-          />
-        </td>
-      </tr>
-      {edit.display_data.relationship.linkOrder ? (
+    <>
+      <RelationshipDocsTooltip relationships={[relationship]} />
+      <table className="details add-relationship">
         <tr>
-          <th>{l('Link order:')}</th>
-          <td>{edit.display_data.relationship.linkOrder}</td>
-        </tr>
-      ) : null}
-      {edit.display_data.unknown_attributes ? (
-        <tr>
-          <th />
+          <th>{l('Relationship:')}</th>
           <td>
-            {l(`This relationship edit also included changes
-                to relationship attributes which no longer exist.`)}
+            <Relationship
+              allowNewEntity0={relationship.entity0_id === 0}
+              allowNewEntity1={relationship.entity1_id === 0}
+              relationship={relationship}
+            />
           </td>
         </tr>
-      ) : null}
-    </table>
+        {edit.display_data.relationship.linkOrder ? (
+          <tr>
+            <th>{l('Link order:')}</th>
+            <td>{edit.display_data.relationship.linkOrder}</td>
+          </tr>
+        ) : null}
+        {edit.display_data.unknown_attributes ? (
+          <tr>
+            <th />
+            <td>
+              {l(`This relationship edit also included changes
+                  to relationship attributes which no longer exist.`)}
+            </td>
+          </tr>
+        ) : null}
+      </table>
+    </>
   );
 };
 

diff --git a/root/edit/details/EditRelationship.js b/root/edit/details/EditRelationship.js
@@ -9,27 +9,34 @@
 
 import RelationshipDiff
   from '../../static/scripts/edit/components/edit/RelationshipDiff.js';
+import RelationshipDocsTooltip
+  from '../components/RelationshipDocsTooltip.js';
 
 type Props = {
   +edit: EditRelationshipEditT,
 };
 
 const EditRelationship = ({edit}: Props): React$MixedElement => (
-  <table className="details edit-relationship">
-    <RelationshipDiff
-      newRelationship={edit.display_data.new}
-      oldRelationship={edit.display_data.old}
+  <>
+    <RelationshipDocsTooltip
+      relationships={[edit.display_data.old, edit.display_data.new]}
     />
-    {edit.display_data.unknown_attributes ? (
-      <tr>
-        <th />
-        <td>
-          {l(`This relationship edit also included changes
-              to relationship attributes which no longer exist.`)}
-        </td>
-      </tr>
-    ) : null}
-  </table>
+    <table className="details edit-relationship">
+      <RelationshipDiff
+        newRelationship={edit.display_data.new}
+        oldRelationship={edit.display_data.old}
+      />
+      {edit.display_data.unknown_attributes ? (
+        <tr>
+          <th />
+          <td>
+            {l(`This relationship edit also included changes
+                to relationship attributes which no longer exist.`)}
+          </td>
+        </tr>
+      ) : null}
+    </table>
+  </>
 );
 
 

diff --git a/root/edit/details/RemoveRelationship.js b/root/edit/details/RemoveRelationship.js
@@ -9,18 +9,26 @@
 
 import Relationship
   from '../../static/scripts/common/components/Relationship.js';
+import RelationshipDocsTooltip
+  from '../components/RelationshipDocsTooltip.js';
 
 type Props = {
   +edit: RemoveRelationshipEditT,
 };
 
-const RemoveRelationship = ({edit}: Props): React$MixedElement => (
-  <table className="details remove-relationship">
-    <tr>
-      <th>{l('Relationship:')}</th>
-      <td><Relationship relationship={edit.display_data.relationship} /></td>
-    </tr>
-  </table>
-);
+const RemoveRelationship = ({edit}: Props): React$MixedElement => {
+  const relationship = edit.display_data.relationship;
+  return (
+    <>
+      <RelationshipDocsTooltip relationships={[relationship]} />
+      <table className="details remove-relationship">
+        <tr>
+          <th>{l('Relationship:')}</th>
+          <td><Relationship relationship={relationship} /></td>
+        </tr>
+      </table>
+    </>
+  );
+};
 
 export default RemoveRelationship;
diff --git a/root/static/styles/edit.less b/root/static/styles/edit.less
@@ -2,11 +2,11 @@
 
 .edit-header {
     padding: 5px 10px 10px 10px;
+}
 
-    .edit-help {
-        float: right;
-        margin: 6px;
-    }
+.edit-help {
+    float: right;
+    margin: 6px;
 }
 
 .overall-vote {