Title field with help interactive icon

geonode_mapstore_client/client/js/components/Autocomplete/Autocomplete.jsx

@@ -8,12 +8,19 @@
 
 import React from 'react';
 import isArray from 'lodash/isArray';
+import isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
 
 import SelectInfiniteScroll from '@js/components/SelectInfiniteScroll/SelectInfiniteScroll';
+import tooltip from '@mapstore/framework/components/misc/enhancers/tooltip';
+import FaIcon from '@js/components/FaIcon/FaIcon';
+
+const IconWithTooltip = tooltip((props) => <div {...props}><FaIcon name="info-circle" /></div>);
 
 const Autocomplete = ({
     className,
+    description,
+    helpTitleIcon,
     id,
     labelKey,
     name,
@@ -42,7 +49,10 @@ const Autocomplete = ({
 
     return (
         <div className={`autocomplete${className ? " " + className : ""}`}>
-            <label className="control-label" htmlFor={id}>{title || name}</label>
+            <div className="title-container">
+                <label className="control-label" htmlFor={id}>{title || name}</label>
+                {helpTitleIcon && !isEmpty(description) && <IconWithTooltip className="help-title" tooltip={description} tooltipPosition={"right"} />}
+            </div>
             <SelectInfiniteScroll
                 {...props}
                 id={id}
@@ -59,6 +69,8 @@ const Autocomplete = ({
 
 Autocomplete.propTypes = {
     className: PropTypes.string,
+    description: PropTypes.string,
+    helpTitleIcon: PropTypes.bool,
     id: PropTypes.string.isRequired,
     labelKey: PropTypes.string,
     name: PropTypes.string,

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

@@ -45,7 +45,7 @@ const SchemaField = (props) => {
         const creatable = !!autocompleteOptions?.creatable;
 
         let autoCompleteProps = {
-            className: "form-group gn-metadata-autocomplete",
+            className: "gn-metadata-autocomplete",
             clearable: !isMultiSelect,
             creatable,
             id: idSchema.$id,
@@ -56,6 +56,8 @@ const SchemaField = (props) => {
             title: schema.title,
             value: formData,
             valueKey,
+            helpTitleIcon: true,
+            description: schema.description,
             onChange: (selected) => {
                 let _selected = selected?.result ?? null;
                 if (isMultiSelect) {

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

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2024, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+import isEmpty from "lodash/isEmpty";
+
+import FaIcon from "@js/components/FaIcon/FaIcon";
+import tooltip from "@mapstore/framework/components/misc/enhancers/tooltip";
+
+const IconWithTooltip = tooltip((props) => <div {...props}><FaIcon name="info-circle" /></div>);
+
+const DescriptionFieldTemplate = (props) => {
+    const { description, id } = props;
+    if (isEmpty(description)) {
+        return null;
+    }
+    return (
+        <IconWithTooltip
+            className="gn-metadata-form-description"
+            id={id}
+            tooltip={description}
+            tooltipPosition={"right"}
+        />
+    );
+};
+
+export default DescriptionFieldTemplate;

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

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2024, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+const TitleFieldTemplate = (props) => {
+    const { id, required, title } = props;
+    return (
+        <div className="gn-metadata-form-title" id={id}>
+            {title}
+            {required && <mark>*</mark>}
+        </div>
+    );
+};
+
+export default TitleFieldTemplate;

geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/index.js

@@ -7,8 +7,12 @@
  */
 
 import ObjectFieldTemplate from './ObjectFieldTemplate';
+import DescriptionFieldTemplate from './DescriptionFieldTemplate';
+import TitleFieldTemplate from './TitleFieldTemplate';
 
 export default {
     ObjectFieldTemplate,
+    TitleFieldTemplate,
+    DescriptionFieldTemplate,
     ErrorListTemplate: () => null
 };

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

@@ -197,12 +197,46 @@
     }
     .gn-metadata-autocomplete {
         padding: 0 0.75rem;
+        width: 100%;
+        margin-bottom: 15px;
+        .title-container {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
         .Select--multi {
             .Select-value {
                 margin-top: 3px;
                 margin-bottom: 3px;
             }
         }
+        .help-title {
+            margin-bottom: 5px;
+        }
+    }
+    .gn-metadata-group {
+        .form-group.field {
+            display: flex;
+            flex-wrap: wrap;
+            column-gap: 0.5rem;
+            text-transform: capitalize;
+            align-items: center;
+            .gn-metadata-form-description {
+                margin-bottom: 5px;
+            }
+            fieldset {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 0.5rem;
+                width: 100%;
+                .gn-metadata-autocomplete {
+                    margin-bottom: 0;
+                }
+            }
+            .gn-metadata-form-title {
+                font-weight: 700;
+            }
+        }
     }
 }