Configure metadata field title capitalization (#2144)

Author: dsuren1

geonode_mapstore_client/client/js/plugins/MetadataEditor/MetadataViewer.jsx

@@ -40,10 +40,12 @@ const MetadataViewer = ({
     match,
     preview,
     setPreview,
-    labelId = 'gnviewer.viewMetadata'
+    labelId = 'gnviewer.viewMetadata',
+    capitalizeFieldTitle = true
 }) => {
     const { params } = match || {};
     const pk = params?.pk;
+    const customProp = encodeURIComponent(JSON.stringify({capitalizeTitle: capitalizeFieldTitle}));
     return (
         <Portal>
             <ResizableModal
@@ -54,7 +56,7 @@ const MetadataViewer = ({
                 modalClassName="gn-simple-dialog"
                 onClose={() => setPreview(false)}
             >
-                <iframe style={{ border: 'none', position: 'absolute', width: '100%', height: '100%' }} src={`/metadata/${pk}/embed`} />
+                <iframe style={{ border: 'none', position: 'absolute', width: '100%', height: '100%' }} src={`/metadata/${pk}/embed?props=${customProp}`} />
             </ResizableModal>
         </Portal>
     );

geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/SchemaField.jsx

@@ -50,7 +50,8 @@ const SchemaField = (props) => {
         name,
         errorSchema,
         uiSchema,
-        required
+        required,
+        formContext
     } = props;
     const uiOptions = uiSchema?.['ui:options'];
     const autocomplete = uiOptions?.['geonode-ui:autocomplete'];
@@ -102,7 +103,7 @@ const SchemaField = (props) => {
         const placeholder = autoCompletePlaceholder ?? ' ';
 
         let autoCompleteProps = {
-            className: `field${classNames ? ' ' + classNames : ''}`,
+            className: `field${classNames ? ' ' + classNames : ''} ${formContext?.capitalizeTitle ? 'capitalize' : ''}`,
             clearable: !required,
             creatable,
             id: idSchema.$id,

geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/FieldTemplate.jsx

@@ -13,7 +13,7 @@ import {
 } from '@rjsf/utils';
 
 function FieldTemplate(props) {
-    const { id, label, children, errors, help, description, hidden, required, displayLabel, registry, uiSchema } = props;
+    const { id, label, children, errors, help, description, hidden, required, displayLabel, registry, uiSchema, formContext } = props;
     const uiOptions = getUiOptions(uiSchema);
     const WrapIfAdditionalTemplate = getTemplate(
         'WrapIfAdditionalTemplate',
@@ -26,7 +26,7 @@ function FieldTemplate(props) {
     return (
         <WrapIfAdditionalTemplate {...props}>
             {displayLabel &&
-                <label className="control-label" htmlFor={id}>
+                <label className={`control-label${formContext?.capitalizeTitle ? ' capitalize' : ''}`} htmlFor={id}>
                     {label}
                     {required && <span className="required">{' '}*</span>}
                     {description ? <>{' '}{description}</> : null}

geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/ObjectFieldTemplate.jsx

@@ -34,14 +34,15 @@ function MetadataGroupList({
     idSchema,
     title,
     group,
-    expanded: expandedProp
+    expanded: expandedProp,
+    capitalizeTitle
 }) {
     const [_expanded, setExpanded] = useState(false);
     const groupError = group.some(property => property.error);
     const expanded = expandedProp === undefined ? _expanded : expandedProp;
     return (
         <li>
-            <Button className={groupError ? 'gn-metadata-error' : ''} size="xs" onClick={() => setExpanded((prevExpanded) => !prevExpanded)}>
+            <Button className={`${groupError ? 'gn-metadata-error' : ''}${capitalizeTitle ? ' capitalize' : ''}`} size="xs" onClick={() => setExpanded((prevExpanded) => !prevExpanded)}>
                 <Glyphicon glyph={expanded ? "bottom" : "next"} />{' '}{title}{groupError ? <>{' '}<Glyphicon glyph="exclamation-sign" /></> : null}
             </Button>
             {expanded ? <ul>
@@ -51,7 +52,7 @@ function MetadataGroupList({
                             <li key={property.name}>
                                 <Button
                                     size="xs"
-                                    className={property.error ? 'gn-metadata-error' : ''}
+                                    className={`${property.error ? 'gn-metadata-error' : ''}${capitalizeTitle ? ' capitalize' : ''}`}
                                     onClick={() => scrollIntoView(idSchema[property.name]?.$id)}>
                                     {property.title}
                                     {property.error ? <>{' '}<Glyphicon glyph="exclamation-sign" /></> : null}
@@ -73,7 +74,8 @@ function RootMetadata({
     formContext
 }, context) {
     const {
-        title: metadataTitle
+        title: metadataTitle,
+        capitalizeTitle
     } = formContext;
     const [filterText, setFilterText] = useState('');
 
@@ -118,6 +120,7 @@ function RootMetadata({
                                 title={groupKey}
                                 group={group}
                                 expanded={filterText ? true : undefined}
+                                capitalizeTitle={capitalizeTitle}
                             />
                         );
                     })}
@@ -166,7 +169,8 @@ function ObjectFieldTemplate(props) {
         required,
         schema,
         title,
-        uiSchema
+        uiSchema,
+        formContext
     } = props;
     const options = getUiOptions(uiSchema);
     const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options);
@@ -188,6 +192,7 @@ function ObjectFieldTemplate(props) {
                     schema={schema}
                     uiSchema={uiSchema}
                     registry={registry}
+                    formContext={formContext}
                     description={<DescriptionFieldTemplate
                         id={descriptionId(idSchema)}
                         description={description}

geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/TitleFieldTemplate.jsx

@@ -9,10 +9,10 @@
 import React from 'react';
 
 const TitleFieldTemplate = (props) => {
-    const { id, required, title, description } = props;
+    const { id, required, title, description, formContext } = props;
     return (
         <div id={id}>
-            <label>
+            <label className={formContext?.capitalizeTitle ? 'capitalize' : ''}>
                 {title}
                 {required && <span className="required">{' '}*</span>}
                 {description ? <>{' '}{description}</> : null}

geonode_mapstore_client/client/js/plugins/MetadataEditor/containers/MetadataEditor.jsx

@@ -30,6 +30,7 @@ function MetadataEditor({
     schema,
     uiSchema,
     updateError,
+    capitalizeFieldTitle,
     setLoading,
     setError,
     setUISchema,
@@ -117,7 +118,8 @@ function MetadataEditor({
                     ref={initialize.current}
                     formContext={{
                         title: metadata?.title,
-                        metadata
+                        metadata,
+                        capitalizeTitle: capitalizeFieldTitle
                     }}
                     schema={schema}
                     widgets={widgets}
@@ -162,4 +164,8 @@ MetadataEditor.contextTypes = {
     messages: PropTypes.object
 };
 
+MetadataEditor.defaultProps = {
+    capitalizeFieldTitle: true
+};
+
 export default MetadataEditor;

geonode_mapstore_client/client/themes/geonode/less/_metadata.less

@@ -119,7 +119,7 @@
         padding: 0;
         margin: 0;
         li {
-            * {
+            .capitalize {
                 text-transform: capitalize;
             }
             padding: 0;
@@ -263,8 +263,10 @@
         }
     }
     .gn-metadata-group {
-        label {
+        .capitalize {
             text-transform: capitalize;
+        }
+        label {
             word-break: break-all;
         }
     }

geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_field.html

@@ -8,4 +8,4 @@
     <div class="gn-metadata-group-value" id="{{prefix}}_{{name}}">
         {% include 'geonode-mapstore-client/snippets/metadata_field_value.html' with name=name value=property.value schema=property.schema %}
     </div>
-</dd>
+</dd>

geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_fields.html

@@ -4,4 +4,28 @@
         {% include 'geonode-mapstore-client/snippets/metadata_field.html' with prefix=prefix name=name property=property %}
     {% endblock property %}
 {% endfor %}
-</dl>
+</dl>
+<script>
+    // execute the function only when items are loaded
+    {% if metadata.items|length > 1 %}
+        // capitalize the title of the metadata fields based on config
+        (function () {
+            const params = new URLSearchParams(window.location.search);
+            const propString = params.get('props');
+            if (propString) {
+                try {
+                    const props = JSON.parse(decodeURIComponent(propString));
+                    const capitalizeTitle = props.capitalizeTitle;
+                    const labels = document.querySelectorAll('.control-label');
+                    if (labels.length ) {
+                        labels.forEach(label => {
+                            label.classList.add('capitalize');
+                        });
+                    }
+                } catch (e) {
+                    console.warn('Failed to parse metadata viewer props:', e);
+                }
+            }
+        })();
+    {% endif %}
+</script>