MBS-11599: Allow adding URL relationships to genre pages

Not implementing a full relationship editor yet since that
has no easy React implementation and mwiencek is working
on that for all entities, by which point it should be trivial
to also extend it to genres. In the meantime, being able to link
genres to Wikidata, Rate Your Music and whatnot seems like a great
first step.

We do need a "mock" relationship editor section for hidden inputs
to be attached to, though, so one is added.

entities.json

@@ -239,7 +239,8 @@
         "edit_table": true,
         "mbid": {
             "indexable": true,
-            "multiple": false
+            "multiple": false,
+            "relatable": "overview"
         },
         "merging": false,
         "model": "Genre",

lib/MusicBrainz/Server/Controller/Genre.pm

@@ -9,11 +9,13 @@ use MusicBrainz::Server::Entity::Util::JSON qw( to_json_array );
 with 'MusicBrainz::Server::Controller::Role::Load' => {
     model           => 'Genre',
     entity_name     => 'genre',
+    relationships   => { cardinal => ['show', 'edit'], default => ['url'] },
 };
 with 'MusicBrainz::Server::Controller::Role::LoadWithRowID';
 with 'MusicBrainz::Server::Controller::Role::Annotation';
 with 'MusicBrainz::Server::Controller::Role::Details';
 with 'MusicBrainz::Server::Controller::Role::EditListing';
+with 'MusicBrainz::Server::Controller::Role::EditRelationships';
 
 use MusicBrainz::Server::Constants qw(
     $EDIT_GENRE_CREATE

lib/MusicBrainz/Server/Controller/Role/EditRelationships.pm

@@ -298,14 +298,23 @@ role {
         my $seeded_relationships = get_seeded_relationships($c, $source_type, $source);
         my @link_type_tree = $c->model('LinkType')->get_full_tree;
         my @link_attribute_types = $c->model('LinkAttributeType')->get_all;
+        my $type_info = build_type_info(
+            $c,
+            qr/(^$source_type-|-$source_type$)/,
+            @link_type_tree,
+        );
 
         $c->stash(
             seeded_relationships => $c->json->encode(to_json_array($seeded_relationships)),
             source_entity => $c->json->encode($source_entity),
             attr_info => $c->json->encode(\@link_attribute_types),
-            type_info => $c->json->encode(build_type_info($c, qr/(^$source_type-|-$source_type$)/, @link_type_tree)),
+            type_info => $c->json->encode($type_info),
         );
 
+        $c->stash->{component_props}{sourceEntity} = $source_entity;
+        $c->stash->{component_props}{attrInfo} = to_json_array(\@link_attribute_types);
+        $c->stash->{component_props}{typeInfo} = $type_info;
+
         my $post_creation = delete $opts{post_creation};
 
         $opts{post_creation} = sub {

lib/MusicBrainz/Server/Data/Genre.pm

@@ -55,6 +55,7 @@ sub can_delete { 1 }
 sub delete {
     my ($self, $genre_id) = @_;
 
+    $self->c->model('Relationship')->delete_entities('genre', $genre_id);
     $self->annotation->delete($genre_id);
     $self->delete_returning_gids($genre_id);
     return;

lib/MusicBrainz/Server/Entity/Genre.pm

@@ -7,6 +7,7 @@ extends 'MusicBrainz::Server::Entity::CoreEntity';
 with 'MusicBrainz::Server::Entity::Role::Annotation';
 with 'MusicBrainz::Server::Entity::Role::Comment';
 with 'MusicBrainz::Server::Entity::Role::LastUpdate';
+with 'MusicBrainz::Server::Entity::Role::Linkable';
 
 sub entity_type { 'genre' }
 

lib/MusicBrainz/Server/Form/Genre.pm

@@ -3,6 +3,7 @@ use HTML::FormHandler::Moose;
 
 extends 'MusicBrainz::Server::Form';
 with 'MusicBrainz::Server::Form::Role::Edit';
+with 'MusicBrainz::Server::Form::Role::Relationships';
 
 has '+name' => ( default => 'edit-genre' );
 

root/genre/CreateGenre.js

@@ -10,21 +10,38 @@
 import * as React from 'react';
 
 import Layout from '../layout';
+import * as manifest from '../static/manifest';
+import GenreEditForm from '../static/scripts/genre/components/GenreEditForm';
 
-import GenreEditForm from './GenreEditForm';
 import type {GenreFormT} from './types';
 
 type Props = {
   +$c: CatalystContextT,
+  +attrInfo: LinkAttrTypeOptionsT,
   +form: GenreFormT,
+  +sourceEntity: {entityType: 'genre'},
+  +typeInfo: LinkTypeOptionsT,
 };
 
-const CreateGenre = ({$c, form}: Props): React.Element<typeof Layout> => (
+const CreateGenre = ({
+  $c,
+  attrInfo,
+  form,
+  sourceEntity,
+  typeInfo,
+}: Props): React.Element<typeof Layout> => (
   <Layout fullWidth title={l('Add a new genre')}>
     <div id="content">
       <h1>{l('Add a new genre')}</h1>
-      <GenreEditForm $c={$c} form={form} />
+      <GenreEditForm
+        $c={$c}
+        attrInfo={attrInfo}
+        form={form}
+        sourceEntity={sourceEntity}
+        typeInfo={typeInfo}
+      />
     </div>
+    {manifest.js('genre/components/GenreEditForm', {async: 'async'})}
   </Layout>
 );
 

root/genre/EditGenre.js

@@ -9,28 +9,43 @@
 
 import * as React from 'react';
 
-import GenreEditForm from './GenreEditForm';
+import * as manifest from '../static/manifest';
+import GenreEditForm from '../static/scripts/genre/components/GenreEditForm';
+
 import GenreLayout from './GenreLayout';
 import type {GenreFormT} from './types';
 
 type Props = {
   +$c: CatalystContextT,
+  +attrInfo: LinkAttrTypeOptionsT,
   +entity: GenreT,
   +form: GenreFormT,
+  +sourceEntity: GenreT,
+  +typeInfo: LinkTypeOptionsT,
 };
 
 const EditGenre = ({
   $c,
+  attrInfo,
   entity,
   form,
+  sourceEntity,
+  typeInfo,
 }: Props): React.Element<typeof GenreLayout> => (
   <GenreLayout
     entity={entity}
     fullWidth
     page="edit"
     title={l('Edit genre')}
   >
-    <GenreEditForm $c={$c} form={form} />
+    <GenreEditForm
+      $c={$c}
+      attrInfo={attrInfo}
+      form={form}
+      sourceEntity={sourceEntity}
+      typeInfo={typeInfo}
+    />
+    {manifest.js('genre/components/GenreEditForm', {async: 'async'})}
   </GenreLayout>
 );
 

root/genre/GenreIndex.js

@@ -9,6 +9,7 @@
 
 import * as React from 'react';
 
+import Relationships from '../components/Relationships';
 import Annotation from '../static/scripts/common/components/Annotation';
 import TagLink from '../static/scripts/common/components/TagLink';
 import * as manifest from '../static/manifest';
@@ -42,6 +43,7 @@ const GenreIndex = ({
       entity={genre}
       numberOfRevisions={numberOfRevisions}
     />
+    <Relationships source={genre} />
     {manifest.js('genre/index', {async: 'async'})}
   </GenreLayout>
 );

root/layout/components/sidebar/GenreSidebar.js

@@ -12,6 +12,7 @@ import * as React from 'react';
 import {CatalystContext} from '../../../context';
 import {isRelationshipEditor}
   from '../../../static/scripts/common/utility/privileges';
+import ExternalLinks from '../ExternalLinks';
 
 import AnnotationLinks from './AnnotationLinks';
 import EditLinks from './EditLinks';
@@ -27,6 +28,8 @@ const GenreSidebar = ({genre}: Props): React.Element<'div'> => {
 
   return (
     <div id="sidebar">
+      <ExternalLinks empty entity={genre} />
+
       {isRelationshipEditor($c.user) ? (
         <EditLinks entity={genre}>
           <AnnotationLinks entity={genre} />

root/static/scripts/edit/externalLinks.js

@@ -1673,15 +1673,21 @@ function isMusicBrainz(url) {
 type InitialOptionsT = {
   errorObservable?: (boolean) => void,
   mountPoint: Element,
-  sourceData: CoreEntityT,
+  sourceData: CoreEntityT | {
+    +entityType: CoreEntityTypeT,
+    +id?: void,
+    +relationships?: void,
+  },
 };
 
 type SeededUrlShape = {
   +link_type_id?: string,
   +text?: string,
 };
 
-MB.createExternalLinksEditor = function (options: InitialOptionsT) {
+export function createExternalLinksEditor(
+  options: InitialOptionsT,
+): React$ElementRef<typeof ExternalLinksEditor> {
   const sourceData = options.sourceData;
   const sourceType = sourceData.entityType;
   const entityTypes = [sourceType, 'url'].sort().join('-');
@@ -1762,11 +1768,15 @@ MB.createExternalLinksEditor = function (options: InitialOptionsT) {
       errorObservable={errorObservable}
       initialLinks={initialLinks}
       isNewEntity={!sourceData.id}
+      ref={(instance) => {
+        // $FlowIgnore
+        MB.sourceExternalLinksEditor = instance;
+      }}
       sourceType={sourceData.entityType}
       typeOptions={typeOptions}
     />,
     options.mountPoint,
   );
-};
+}
 
-export const createExternalLinksEditor = MB.createExternalLinksEditor;
+MB.createExternalLinksEditor = createExternalLinksEditor;

root/static/scripts/genre/components/GenreEditForm.js

@@ -0,0 +1,94 @@
+/*
+ * @flow
+ * Copyright (C) 2019 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 EnterEdit from '../../../../components/EnterEdit';
+import EnterEditNote from '../../../../components/EnterEditNote';
+import FormRowTextLong from '../../../../components/FormRowTextLong';
+import type {GenreFormT} from '../../../../genre/types';
+import {createExternalLinksEditor} from '../../edit/externalLinks';
+import {exportTypeInfo} from '../../relationship-editor/common/viewModel';
+import {prepareSubmission} from '../../relationship-editor/generic';
+
+type Props = {
+  +$c: CatalystContextT,
+  +attrInfo: LinkAttrTypeOptionsT,
+  +form: GenreFormT,
+  +sourceEntity: GenreT | {entityType: 'genre'},
+  +typeInfo: LinkTypeOptionsT,
+};
+
+const GenreEditForm = ({
+  $c,
+  attrInfo,
+  form,
+  sourceEntity,
+  typeInfo,
+}: Props): React.Element<'form'> => {
+  const externalLinksEditorContainerRef = React.useRef(null);
+
+  const handleSubmit = () => {
+    console.log('preparing submission');
+    prepareSubmission('edit-genre');
+  };
+
+  React.useEffect(() => {
+    exportTypeInfo(typeInfo, attrInfo);
+    invariant(externalLinksEditorContainerRef.current != null);
+    createExternalLinksEditor({
+      mountPoint: externalLinksEditorContainerRef.current,
+      sourceData: sourceEntity,
+    });
+  }, [attrInfo, sourceEntity, typeInfo]);
+
+  return (
+    <form
+      action={$c.req.uri}
+      className="edit-genre"
+      method="post"
+      onSubmit={handleSubmit}
+    >
+      <div className="half-width">
+        <fieldset>
+          <legend>{l('Genre details')}</legend>
+          <FormRowTextLong
+            field={form.field.name}
+            label={addColonText(l('Name'))}
+            required
+            uncontrolled
+          />
+          <FormRowTextLong
+            field={form.field.comment}
+            label={addColonText(l('Disambiguation'))}
+            uncontrolled
+          />
+        </fieldset>
+
+        <div data-form-name="edit-genre" id="relationship-editor" />
+
+        <fieldset>
+          <legend>{l('External Links')}</legend>
+          <div
+            id="external-links-editor-container"
+            ref={externalLinksEditorContainerRef}
+          />
+        </fieldset>
+
+        <EnterEditNote field={form.field.edit_note} />
+        <EnterEdit form={form} />
+      </div>
+    </form>
+  );
+};
+
+export default (hydrate<Props>(
+  'div.genre-edit-form',
+  GenreEditForm,
+): React.AbstractComponent<Props, void>);

root/static/scripts/relationship-editor/common/viewModel.js

@@ -315,3 +315,5 @@ function editorMayEditTypes(type0, type1) {
 
   return true;
 }
+
+export const exportTypeInfo = MB.relationshipEditor.exportTypeInfo;