records: allow to override affiliations display

* closes CERNDocumentServer/cds-rdm#193

package.json

@@ -36,6 +36,7 @@
     "semantic-ui-css": "^2.4.0",
     "semantic-ui-react": "^2.1.0",
     "tinymce": "^6.7.2",
+    "react-overridable": "^0.0.3",
     "yup": "^0.32.11"
   },
   "devDependencies": {

src/lib/elements/contrib/invenioRDM/records/AffiliationsSuggestions.js

@@ -9,6 +9,7 @@
 import React from "react";
 import { Image } from "../../../Image";
 import { Header } from "semantic-ui-react";
+import Overridable from "react-overridable";
 
 const makeIdEntry = (identifier) => {
   let icon, link;
@@ -85,14 +86,23 @@ export const AffiliationsSuggestions = (creatibutors, isOrganization) => {
       text: creatibutor.name,
       value: creatibutor.name,
       extra: creatibutor,
-      key: creatibutor.name,
       name: creatibutor.name,
+      key: creatibutor.id,
       id: creatibutor.id,
       content: (
-        <Header>
-          {name} {idString.length > 0 && <>({idString})</>}
-          {subheader.length > 0 && <Header.Subheader>{subheader}</Header.Subheader>}
-        </Header>
+        <Overridable
+          id="ReactInvenioForms.AffiliationsSuggestions.content"
+          creatibutor={creatibutor}
+          isOrganization={isOrganization}
+          idString={idString}
+          makeSubheader={makeSubheader}
+          makeIdEntry={makeIdEntry}
+        >
+          <Header>
+            {name} {idString.length > 0 && <>({idString})</>}
+            {subheader.length > 0 && <Header.Subheader>{subheader}</Header.Subheader>}
+          </Header>
+        </Overridable>
       ),
     };
   });

src/lib/forms/RemoteSelectField.js

@@ -102,7 +102,7 @@ export class RemoteSelectField extends Component {
       this.setState((prevState) => ({
         suggestions: _uniqBy(
           [...prevState.selectedSuggestions, ...serializedSuggestions],
-          "value"
+          "key"
         ),
         isFetching: false,
         error: false,