Develop into master

Gemfile

@@ -37,13 +37,13 @@ gem 'resource_api', git: 'https://github.com/performant-software/resource-api.gi
 gem 'jwt_auth', git: 'https://github.com/performant-software/jwt-auth.git', tag: 'v0.1.3'
 
 # Core data
-gem 'core_data_connector', git: 'https://github.com/performant-software/core-data-connector.git', tag: 'v0.1.109'
+gem 'core_data_connector', git: 'https://github.com/performant-software/core-data-connector.git', tag: 'v0.1.111'
 
 # IIIF
 gem 'triple_eye_effable', git: 'https://github.com/performant-software/triple-eye-effable.git', tag: 'v0.2.7'
 
 # User defined fields
-gem 'user_defined_fields', git: 'https://github.com/performant-software/user-defined-fields.git', tag: 'v0.1.14'
+gem 'user_defined_fields', git: 'https://github.com/performant-software/user-defined-fields.git', tag: 'v0.1.15'
 
 # Fuzzy dates
 gem 'fuzzy_dates', git: 'https://github.com/performant-software/fuzzy-dates.git', tag: 'v0.1.2'

Gemfile.lock

@@ -1,7 +1,7 @@
 GIT
   remote: https://github.com/performant-software/core-data-connector.git
-  revision: 727ca617ce80b2d9dc29f2cb0f80f707df31335d
-  tag: v0.1.109
+  revision: b7786f958414034ed449c89350fff768ec4f94be
+  tag: v0.1.111
   specs:
     core_data_connector (0.1.0)
       activerecord-postgis-adapter (~> 11.0)
@@ -59,8 +59,8 @@ GIT
 
 GIT
   remote: https://github.com/performant-software/user-defined-fields.git
-  revision: 9799f151ab51506eef42177c756b762060a9838a
-  tag: v0.1.14
+  revision: 3fe09c999fa5193e8de9e1253e60d25c95a40af8
+  tag: v0.1.15
   specs:
     user_defined_fields (0.1.0)
       rails (>= 6.0.3.2, < 9)
@@ -245,7 +245,7 @@ GEM
       racc (~> 1.4)
     nokogiri (1.18.9-x86_64-linux-gnu)
       racc (~> 1.4)
-    oj (3.16.12)
+    oj (3.16.13)
       bigdecimal (>= 3.0)
       ostruct (>= 0.2)
     ostruct (0.6.3)

client/src/components/ItemPage.js

@@ -49,7 +49,14 @@ type ComponentProps = {
   saved?: boolean
 };
 
-const ItemPage = ({ form: Form, onInitialize, onSave }: Props) => {
+const ItemPage = (props: Props) => {
+  const {
+    form: Form,
+    onCreateManifests,
+    onInitialize,
+    onSave
+  } = props;
+
   const { t } = useTranslation();
 
   const Component = useCallback((props: ComponentProps) => {
@@ -152,7 +159,9 @@ const ItemPage = ({ form: Form, onInitialize, onSave }: Props) => {
                   saving={props.saving}
                 />
               </Section>
-              <Relationships />
+              <Relationships
+                onCreateManifests={onCreateManifests}
+              />
               { projectModel?.allow_identifiers && props.item.id && (
                 <Section
                   id='identifiers'
@@ -186,6 +195,7 @@ const ItemPage = ({ form: Form, onInitialize, onSave }: Props) => {
 
   const Page = withReactRouterEditPage(Component, {
     id: 'itemId',
+    onCreateManifests,
     onSave,
     onInitialize,
     resolveValidationError: Validation.resolveUpdateError.bind(this)

client/src/components/ProjectModelRelationshipFactory.js

@@ -1,4 +1,4 @@
-// flow
+// @flow
 
 import React, { useMemo } from 'react';
 import RelatedEvent from './RelatedEvent';
@@ -13,7 +13,12 @@ import RelatedWork from './RelatedWork';
 import { Types } from '../utils/ProjectModels';
 import useProjectModelRelationship from '../hooks/ProjectModelRelationship';
 
-const ProjectModelRelationshipFactory = (props) => {
+type Props = {
+  onCreateManifests: (id: number, params: { [key: string]: any }) => Promise<any>,
+  relationshipId: number
+};
+
+const ProjectModelRelationshipFactory = (props: Props) => {
   const { projectModelRelationship } = useProjectModelRelationship();
 
   /**
@@ -56,6 +61,7 @@ const ProjectModelRelationshipFactory = (props) => {
       case Types.MediaContent:
         component = (
           <RelatedMediaContent
+            onCreateManifests={props.onCreateManifests}
             relationshipId={props.relationshipId}
           />
         );

client/src/components/ProjectModelRelationshipsFactory.js

@@ -16,7 +16,11 @@ import RelationshipsService from '../services/Relationships';
 import { Types } from '../utils/ProjectModels';
 import useProjectModelRelationship from '../hooks/ProjectModelRelationship';
 
-const ProjectModelRelationshipsFactory = () => {
+type Props = {
+  onCreateManifests: (id: number, params: { [key: string] : any }) => Promise<any>
+};
+
+const ProjectModelRelationshipsFactory = (props: Props) => {
   const [loaded, setLoaded] = useState(false);
   const [relationships, setRelationships] = useState();
 
@@ -87,7 +91,9 @@ const ProjectModelRelationshipsFactory = () => {
 
     if (classView === Types.MediaContent) {
       return (
-        <RelatedMediaContents />
+        <RelatedMediaContents
+          onCreateManifests={props.onCreateManifests}
+        />
       );
     }
 
@@ -136,6 +142,7 @@ const ProjectModelRelationshipsFactory = () => {
 
   return (
     <ProjectModelRelationshipFactory
+      onCreateManifests={props.onCreateManifests}
       relationshipId={relationship?.id}
     />
   );

client/src/components/RelatedMediaContent.js

@@ -1,30 +1,37 @@
 // @flow
 
 import { EditModal, FileInputButton, LazyIIIF } from '@performant-software/semantic-components';
-import { IIIF as IIIFUtils } from '@performant-software/shared-components';
 import type { EditContainerProps } from '@performant-software/shared-components/types';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form } from 'semantic-ui-react';
 import _ from 'underscore';
+import ItemContext from '../context/Item';
+import ManifestUrlButton from './ManifestUrlButton';
+import MediaContentUtils from '../utils/MediaContent';
 import MediaContentsService from '../services/MediaContents';
 import ProjectContext from '../context/Project';
 import RelatedMediaContentModal from './RelatedMediaContentModal';
 import type { Relationship as RelationshipType } from '../types/Relationship';
 import RelationshipsService from '../services/Relationships';
-import { useRelationship } from '../hooks/Relationship';
+import useParams from '../hooks/ParsedParams';
 import useProjectModelRelationship from '../hooks/ProjectModelRelationship';
+import { useRelationship } from '../hooks/Relationship';
 import withRelationshipEditForm from '../hooks/RelationshipEditForm';
 
 type Props = EditContainerProps & {
-  item: RelationshipType
+  item: RelationshipType,
+  onCreateManifests: (id: number, params: { [key: string] : any }) => Promise<any>
 };
 
 const RelatedMediaContentForm = (props: Props) => {
   const [editModal, setEditModal] = useState(false);
+  const [saving, setSaving] = useState(false);
 
-  const { project } = useContext(ProjectContext);
-  const { foreignProjectModelId } = useProjectModelRelationship();
+  const { project, projectModel } = useContext(ProjectContext);
+  const { uuid } = useContext(ItemContext);
+  const { itemId } = useParams();
+  const { foreignProjectModelId, projectModelRelationship } = useProjectModelRelationship();
   const { t } = useTranslation();
 
   const {
@@ -35,11 +42,27 @@ const RelatedMediaContentForm = (props: Props) => {
   } = useRelationship(props);
 
   /**
-   * Sets the manifest URL.
+   * Memo-izes the manifest URL.
+   */
+  const manifestUrl = useMemo(() => (
+    MediaContentUtils.getManifestURL(projectModel, uuid, projectModelRelationship.uuid)
+  ), [projectModel, projectModelRelationship, uuid])
+
+  /**
+   * Calls the onCreateManifests callback.
    *
-   * @type {string|string|*}
+   * @type {(function(): void)|*}
    */
-  const manifest = useMemo(() => (IIIFUtils.createManifestURL(foreignObject?.manifest)), [foreignObject?.manifest]);
+  const onCreateManifest = useCallback(() => {
+    setSaving(true);
+
+    const params = {
+      project_model_relationship_id: projectModelRelationship.id
+    };
+
+    props.onCreateManifests(itemId, params)
+      .then(() => setSaving(false));
+  }, [itemId, projectModelRelationship])
 
   /**
    * Deletes the current relationship.
@@ -93,7 +116,7 @@ const RelatedMediaContentForm = (props: Props) => {
           contentType={foreignObject?.content_type}
           downloadUrl={foreignObject?.content_download_url}
           key={foreignObject?.id}
-          manifest={manifest}
+          manifest={manifestUrl}
           preview={foreignObject?.content_preview_url}
           src={foreignObject?.content_url}
         >
@@ -116,11 +139,22 @@ const RelatedMediaContentForm = (props: Props) => {
           { props.item.id && (
             <>
               <Button
-                color='teal'
+                color='green'
                 content={t('Common.buttons.edit')}
                 icon='pencil'
                 onClick={onNavigate}
               />
+              <ManifestUrlButton
+                url={manifestUrl}
+              />
+              <Button
+                color='grey'
+                content={t('RelatedMediaContent.buttons.refreshManifest')}
+                disabled={saving}
+                icon='redo'
+                loading={saving}
+                onClick={onCreateManifest}
+              />
               <Button
                 color='red'
                 content={t('Common.buttons.delete')}

client/src/components/RelatedMediaContents.js

@@ -27,16 +27,22 @@ import useParams from '../hooks/ParsedParams';
 import useProjectModelRelationship from '../hooks/ProjectModelRelationship';
 import useRelationships from '../hooks/Relationships';
 
+type Props = {
+  onCreateManifests: (id: number, params: { [key: string] : any }) => Promise<any>
+};
+
 const Modal = {
   upload: 0,
   link: 1
 };
 
-const RelatedMediaContents = () => {
+const RelatedMediaContents = (props: Props) => {
   const [count, setCount] = useState(0);
   const [errors, setErrors] = useState(null);
   const [modal, setModal] = useState(null);
+  const [creatingManifests, setCreatingManifests] = useState(false);
   const [saved, setSaved] = useState(false);
+  const [showUploadMessage, setShowUploadMessage] = useState(false);
 
   const { uuid } = useContext(ItemContext);
   const { projectModel } = useContext(ProjectContext);
@@ -116,8 +122,26 @@ const RelatedMediaContents = () => {
   const afterSave = useCallback(() => {
     setModal(null);
     setSaved(true);
+    setShowUploadMessage(true);
   }, []);
 
+  /**
+   * Calls the onCreateManifests callback.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onCreateManifest = useCallback(() => {
+    setCreatingManifests(true);
+
+    const params = {
+      project_model_relationship_id: projectModelRelationship.id
+    };
+
+    props.onCreateManifests(itemId, params)
+      .then(() => setCreatingManifests(false))
+      .then(() => setSaved(true));
+  }, [itemId, projectModelRelationship]);
+
   /**
    * Resolves any error messages for user-defined fields and sets them on the state.
    *
@@ -173,7 +197,7 @@ const RelatedMediaContents = () => {
 
   return (
     <>
-      { saved && (
+      { showUploadMessage && (
         <MediaUploadingMessage
           multiple
         />
@@ -214,6 +238,13 @@ const RelatedMediaContents = () => {
               url={MediaContentUtils.getManifestURL(projectModel, uuid, projectModelRelationship.uuid)}
             />
           )
+        }, {
+          color: 'grey',
+          disabled: creatingManifests,
+          icon: 'redo',
+          content: t('RelatedMediaContents.buttons.refreshManifest'),
+          loading: creatingManifests,
+          onClick: onCreateManifest
         }]}
         className={cx('compact', styles.relatedMediaContents)}
         collectionName='relationships'

client/src/components/Relationships.js

@@ -33,13 +33,15 @@ const Relationship = (props: Props) => {
             ? projectModelRelationship.inverse_name
             : projectModelRelationship.name}
         />
-        <ProjectModelRelationshipsFactory />
+        <ProjectModelRelationshipsFactory
+          onCreateManifests={props.onCreateManifests}
+        />
       </Section>
     </ProjectModelRelationshipContext.Provider>
   );
 };
 
-const Relationships = () => {
+const Relationships = (props) => {
   const { projectModel } = useContext(ProjectContext);
   const { itemId } = useParams();
 
@@ -53,6 +55,7 @@ const Relationships = () => {
   return _.map(projectModel.all_project_model_relationships, (projectModelRelationship) => (
     <Relationship
       key={projectModelRelationship.id}
+      onCreateManifests={props.onCreateManifests}
       projectModelRelationship={projectModelRelationship}
     />
   ));

client/src/hooks/RelationshipEditForm.js

@@ -67,7 +67,7 @@ const withRelationshipEditForm = (WrappedComponent) => (props: Props) => {
    *
    * @type {unknown}
    */
-  const Component = useMemo(() => <EditPage {...props} />, [props]);
+  const Component = useMemo(() => <EditPage {...props} />, [id, props]);
 
   return Component;
 };

client/src/i18n/en.json

@@ -842,7 +842,15 @@
       "name": "Name"
     }
   },
+  "RelatedMediaContent": {
+    "buttons": {
+      "refreshManifest": "Refresh Manifest"
+    }
+  },
   "RelatedMediaContents": {
+    "buttons": {
+      "refreshManifest": "Refresh Manifest"
+    },
     "options": {
       "link": "Link existing record",
       "upload": "Upload from your computer"

client/src/pages/Event.js

@@ -8,6 +8,10 @@ import EventsService from '../services/Events';
 const Person = () => (
   <ItemPage
     form={EventForm}
+    onCreateManifests={(id, params) => (
+      EventsService
+        .createManifests(id, params)
+    )}
     onInitialize={(id) => (
       EventsService
         .fetchOne(id)

client/src/pages/Instance.js

@@ -8,6 +8,10 @@ import ItemPage from '../components/ItemPage';
 const Instance = () => (
   <ItemPage
     form={InstanceForm}
+    onCreateManifests={(id, params) => (
+      InstancesService
+        .createManifests(id, params)
+    )}
     onInitialize={(id) => (
       InstancesService
         .fetchOne(id)