IIIF #30 - Adding unique identifier field to resources list and resou…

…rce edit pages

client/src/components/ReadOnlyField.js

@@ -0,0 +1,31 @@
+// @flow
+
+import React from 'react';
+
+type Props = {
+  label?: string,
+  value: string
+};
+
+const ReadOnlyField = (props: Props) => (
+  <div
+    className='field'
+  >
+    { props.label && (
+      <label
+        htmlFor='read-only-element'
+      >
+        { props.label }
+      </label>
+    )}
+    <div
+      id='read-only-element'
+      className='ui input'
+      role='textbox'
+    >
+      { props.value }
+    </div>
+  </div>
+);
+
+export default ReadOnlyField;

client/src/i18n/en.json

@@ -108,7 +108,8 @@
       "exif": "View Info"
     },
     "labels": {
-      "content": "Content"
+      "content": "Content",
+      "uuid": "Unique identifier"
     }
   },
   "ResourceExifModal": {

client/src/pages/Project.js

@@ -10,6 +10,7 @@ import AuthenticationService from '../services/Authentication';
 import Organization from '../transforms/Organization';
 import OrganizationsService from '../services/Organizations';
 import ProjectsService from '../services/Projects';
+import ReadOnlyField from '../components/ReadOnlyField';
 import SimpleEditPage from '../components/SimpleEditPage';
 import withEditPage from '../hooks/EditPage';
 
@@ -97,22 +98,10 @@ const ProjectForm = withTranslation()((props) => {
           required={props.isRequired('description')}
           value={props.item.description}
         />
-        <div
-          className='field'
-        >
-          <label
-            htmlFor='uuid-element'
-          >
-            { props.t('Project.labels.uuid') }
-          </label>
-          <div
-            id='uuid-element'
-            className='ui input'
-            role='textbox'
-          >
-            { props.item.uuid }
-          </div>
-        </div>
+        <ReadOnlyField
+          label={props.t('Project.labels.uuid')}
+          value={props.item.uuid}
+        />
       </SimpleEditPage.Tab>
       <SimpleEditPage.Tab
         key='fields'

client/src/pages/Resource.js

@@ -13,6 +13,7 @@ import { withTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { Button, Form } from 'semantic-ui-react';
 import ProjectsService from '../services/Projects';
+import ReadOnlyField from '../components/ReadOnlyField';
 import ResourceExifModal from '../components/ResourceExifModal';
 import ResourcesService from '../services/Resources';
 import SimpleEditPage from '../components/SimpleEditPage';
@@ -110,6 +111,10 @@ const ResourceForm = withTranslation()((props) => {
           required={props.isRequired('name')}
           value={props.item.name}
         />
+        <ReadOnlyField
+          label={props.t('Resource.labels.uuid')}
+          value={props.item.uuid}
+        />
         <UserDefinedFieldsForm
           data={props.item.user_defined}
           defineableId={projectId}

client/src/pages/Resources.js

@@ -48,7 +48,7 @@ const Resources: ComponentType<any> = () => {
             preview={resource.content_thumbnail_url}
           />
         )}
-        renderMeta={() => ''}
+        renderMeta={(resource) => resource.uuid}
         saved={location.state && location.state.saved}
         sort={[{
           key: 'name',