MBS-12841 / MBS-8242: Link to edit and relationship docs from edits

lib/MusicBrainz/Server/Edit/Relationship/Delete.pm

@@ -100,7 +100,7 @@ sub foreign_keys
     $ids{$self->model0}->{gid_or_id($entity0)} = [ 'ArtistCredit' ];
     $ids{$self->model1}->{gid_or_id($entity1)} = [ 'ArtistCredit' ];
 
-    $ids{LinkType} = [$self->data->{link}{type}{id}];
+    $ids{LinkType} = [$self->data->{relationship}{link}{type}{id}];
     $ids{LinkAttributeType} = { map { $_->{type}{id} => ['LinkAttributeType'] } @{ $self->data->{relationship}{link}{attributes} // [] } };
 
     return \%ids;

root/edit/components/EditHeader.js

@@ -18,6 +18,7 @@ import EditLink from '../../static/scripts/common/components/EditLink.js';
 import EditorLink from '../../static/scripts/common/components/EditorLink.js';
 import linkedEntities from '../../static/scripts/common/linkedEntities.mjs';
 import bracketed from '../../static/scripts/common/utility/bracketed.js';
+import HelpIcon from '../../static/scripts/edit/components/HelpIcon.js';
 import getVoteName from '../../static/scripts/edit/utility/getVoteName.js';
 import {
   editorMayApprove,
@@ -72,6 +73,24 @@ const EditHeader = ({
   );
   const showVoteTally = latestVoteForEditor || isEditEditor || !edit.is_open;
 
+  const docLink = `/doc/Edit_Types/${edit.edit_type}`;
+  const docTooltip = (
+    <div className="edit-help">
+      <HelpIcon
+        content={exp.l(
+          `See the documentation for this edit type: {doc_link|{edit_name}}.`,
+          {
+            doc_link: {
+              href: docLink,
+              target: '_blank',
+            },
+            edit_name: l(edit.edit_name),
+          },
+        )}
+      />
+    </div>
+  );
+
   const subHeading = user ? (
     <>
       {exp.l(
@@ -161,6 +180,7 @@ const EditHeader = ({
               </tr>
             </table>
           </div>
+          {docTooltip}
           <h2>
             <EditLink content={editTitle} edit={edit} />
           </h2>
@@ -187,6 +207,7 @@ const EditHeader = ({
               ) : null}
             </div>
           ) : null}
+          {docTooltip}
           <h1>{editTitle}</h1>
         </>
       )}

root/edit/components/EditSidebar.js

@@ -96,7 +96,6 @@ const EditSidebar = ({
       <ul className="links">
         <li><a href="/doc/Introduction_to_Voting">{l('Voting FAQ')}</a></li>
         <li><a href="/doc/Editing_FAQ">{l('Editing FAQ')}</a></li>
-        <li><a href="/doc/Edit_Types">{lp('Edit types', 'noun')}</a></li>
       </ul>
     </div>
   );

root/edit/components/RelationshipDocsTooltip.js

@@ -0,0 +1,72 @@
+/*
+ * @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 expand2react from '../../static/scripts/common/i18n/expand2react.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 helpContent = (
+    <>
+      <p>{l('The following relationship types are used in this edit:')}</p>
+      <dl>
+        {relationshipTypes.map(relationshipType => (
+          <>
+            <dt>
+              {expand2react(
+                '{doc_link|{name}}',
+                {
+                  doc_link: {
+                    href: '/relationship/' + relationshipType.gid,
+                    target: '_blank',
+                  },
+                  name: relationshipType.name,
+                },
+              )}
+            </dt>
+            <dd>
+              {expand2react(l_relationships(relationshipType.description))}
+            </dd>
+          </>
+        ))}
+      </dl>
+    </>
+  );
+
+  return (
+    <div className="edit-help">
+      <HelpIcon
+        content={helpContent}
+      />
+    </div>
+  );
+};
+
+export default RelationshipDocsTooltip;

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>{addColonText(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>{addColonText(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>
+    </>
   );
 };
 

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>
+  </>
 );
 
 

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>{addColonText(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>{addColonText(l('Relationship'))}</th>
+          <td><Relationship relationship={relationship} /></td>
+        </tr>
+      </table>
+    </>
+  );
+};
 
 export default RemoveRelationship;

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

@@ -15,6 +15,8 @@ import {
   ENTITY_NAMES,
 } from '../../common/constants.js';
 import * as URLCleanup from '../../edit/URLCleanup.js';
+import getRelationshipLinkType
+  from '../../edit/utility/getRelationshipLinkType.js';
 import type {
   DialogSourceEntityStateT,
   RelationshipStateT,
@@ -23,7 +25,6 @@ import type {
   DialogEntityCreditActionT,
 } from '../types/actions.js';
 import getBatchSelectionMessage from '../utility/getBatchSelectionMessage.js';
-import getRelationshipLinkType from '../utility/getRelationshipLinkType.js';
 import isRelationshipBackward from '../utility/isRelationshipBackward.js';
 
 import DialogEntityCredit, {

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

@@ -30,6 +30,8 @@ import {
 } from '../../common/entity2.js';
 import linkedEntities from '../../common/linkedEntities.mjs';
 import isDatabaseRowId from '../../common/utility/isDatabaseRowId.js';
+import getRelationshipLinkType
+  from '../../edit/utility/getRelationshipLinkType.js';
 import type {
   DialogTargetEntityStateT,
   RelationshipStateT,
@@ -40,7 +42,6 @@ import type {
   DialogTargetEntityActionT,
   UpdateTargetEntityAutocompleteActionT,
 } from '../types/actions.js';
-import getRelationshipLinkType from '../utility/getRelationshipLinkType.js';
 import isRelationshipBackward from '../utility/isRelationshipBackward.js';
 
 import DialogEntityCredit, {

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

@@ -40,6 +40,8 @@ import isDatabaseRowId from '../../common/utility/isDatabaseRowId.js';
 import {
   isLinkTypeOrderableByUser,
 } from '../../common/utility/isLinkTypeDirectionOrderable.js';
+import getRelationshipLinkType
+  from '../../edit/utility/getRelationshipLinkType.js';
 import {
   RelationshipSourceGroupsContext,
 } from '../constants.js';
@@ -71,7 +73,6 @@ import getOpenEditsLink from '../utility/getOpenEditsLink.js';
 import getRelationshipEditStatus
   from '../utility/getRelationshipEditStatus.js';
 import getRelationshipKey from '../utility/getRelationshipKey.js';
-import getRelationshipLinkType from '../utility/getRelationshipLinkType.js';
 import isRelationshipBackward from '../utility/isRelationshipBackward.js';
 
 import DialogAttributes, {

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

@@ -29,6 +29,8 @@ import coerceToError from '../../common/utility/coerceToError.js';
 import isDatabaseRowId from '../../common/utility/isDatabaseRowId.js';
 import {uniqueNegativeId} from '../../common/utility/numbers.js';
 import {hasSessionStorage} from '../../common/utility/storage.js';
+import getRelationshipLinkType
+  from '../../edit/utility/getRelationshipLinkType.js';
 import reducerWithErrorHandling
   from '../../edit/utility/reducerWithErrorHandling.js';
 import {
@@ -58,7 +60,6 @@ import {
 } from '../utility/findState.js';
 import getRelationshipEditStatus
   from '../utility/getRelationshipEditStatus.js';
-import getRelationshipLinkType from '../utility/getRelationshipLinkType.js';
 import getRelationshipStateId from '../utility/getRelationshipStateId.js';
 import getRelationshipTarget from '../utility/getRelationshipTarget.js';
 import isRelationshipBackward from '../utility/isRelationshipBackward.js';

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

@@ -28,6 +28,9 @@ import EntityPendingEditsWarning
   from '../../edit/components/EntityPendingEditsWarning.js';
 import RelationshipPendingEditsWarning
   from '../../edit/components/RelationshipPendingEditsWarning.js';
+import Tooltip from '../../edit/components/Tooltip.js';
+import getRelationshipLinkType
+  from '../../edit/utility/getRelationshipLinkType.js';
 import {
   getPhraseAndExtraAttributesText,
 } from '../../edit/utility/linkPhrase.js';
@@ -45,7 +48,6 @@ import type {
 } from '../types/actions.js';
 import getLinkPhrase from '../utility/getLinkPhrase.js';
 import getRelationshipKey from '../utility/getRelationshipKey.js';
-import getRelationshipLinkType from '../utility/getRelationshipLinkType.js';
 import getRelationshipStatusName
   from '../utility/getRelationshipStatusName.js';
 import isRelationshipBackward from '../utility/isRelationshipBackward.js';

root/static/scripts/relationship-editor/utility/getLinkPhrase.js

@@ -12,13 +12,13 @@ import * as tree from 'weight-balanced-tree';
 import {
   isLinkTypeOrderableByUser,
 } from '../../common/utility/isLinkTypeDirectionOrderable.js';
+import getRelationshipLinkType
+  from '../../edit/utility/getRelationshipLinkType.js';
 import {interpolateText} from '../../edit/utility/linkPhrase.js';
 import type {
   RelationshipStateT,
 } from '../types.js';
 
-import getRelationshipLinkType from './getRelationshipLinkType.js';
-
 const linkPhraseCache:
   // The tuple stores [forward, backward] link phrases.
   WeakMap<RelationshipStateT, [string | null, string | null]> = new WeakMap();