Fix - Autocomplete field not showing validation error

Author: dsuren1

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

@@ -21,6 +21,7 @@ const IconWithTooltip = tooltip((props) => <div {...props}><FaIcon name="info-ci
 const Autocomplete = ({
     className,
     description,
+    error,
     helpTitleIcon,
     id,
     labelKey = "label",
@@ -44,7 +45,7 @@ const Autocomplete = ({
     };
 
     return (
-        <div className={`autocomplete${className ? " " + className : ""}`}>
+        <div className={`autocomplete${className ? " " + className : ""}${!!error ? " " + "has-error" : ""}`}>
             <div className="title-container">
                 <label className="control-label" htmlFor={id}>{title || name}</label>
                 {helpTitleIcon && !isEmpty(description) && <IconWithTooltip className="help-title" tooltip={description} tooltipPosition={"right"} />}
@@ -56,13 +57,15 @@ const Autocomplete = ({
                 valueKey={valueKey}
                 labelKey={labelKey}
             />
+            {error}
         </div>
     );
 };
 
 Autocomplete.propTypes = {
     className: PropTypes.string,
     description: PropTypes.string,
+    error: PropTypes.element,
     helpTitleIcon: PropTypes.bool,
     id: PropTypes.string.isRequired,
     labelKey: PropTypes.string,

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

@@ -8,8 +8,10 @@
 
 import React from 'react';
 import axios from '@mapstore/framework/libs/ajax';
-import isString from 'lodash/isString';
+import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
+import isString from 'lodash/isString';
+import get from 'lodash/get';
 import Autocomplete from '@js/components/Autocomplete/Autocomplete';
 import DefaultSchemaField from '@rjsf/core/lib/components/fields/SchemaField';
 
@@ -26,6 +28,8 @@ const SchemaField = (props) => {
         formData,
         idSchema,
         name,
+        hideError,
+        errorSchema,
         uiSchema
     } = props;
     const autocomplete = uiSchema?.['ui:options']?.['geonode-ui:autocomplete'];
@@ -37,6 +41,9 @@ const SchemaField = (props) => {
     const isSingleSelect = schema?.type === 'object' && !isEmpty(schema?.properties);
 
     if (autocomplete && (isMultiSelect || isSingleSelect)) {
+        const errors = !hideError ? isArray(errorSchema)
+            ? errorSchema.map(error => get(error, 'id.__errors', [])).flat()
+            : get(errorSchema, '__errors', []) : [];
         const autocompleteOptions = isString(autocomplete)
             ? { url: autocomplete }
             : autocomplete;
@@ -104,7 +111,16 @@ const SchemaField = (props) => {
                             })
                         };
                     });
-            }
+            },
+            error: isEmpty(errors) ? null : <ul>
+                {errors.map((error, idx) => {
+                    return (
+                        <li key={idx} className="gn-error-message">
+                            {error}
+                        </li>
+                    );
+                })}
+            </ul>
         };
 
         return <Autocomplete {...autoCompleteProps}/>;

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

@@ -13,8 +13,17 @@
             .border-color-var(@theme-vars[main-border-color]);
         }
     }
-    .gn-metadata-groups .gn-metadata-group > .field-object {
-        .border-color-var(@theme-vars[main-border-color]);
+    .gn-metadata-groups {
+        .gn-metadata-group {
+            & > .field-object {
+                .border-color-var(@theme-vars[main-border-color]);
+            }
+            .has-error {
+                label, .help-title, .gn-error-message, .gn-metadata-form-description {
+                    .color-var(@theme-vars[danger])
+                }
+            }
+        }
     }
     .gn-metadata-list {
         .border-right-color-var(@theme-vars[main-border-color]);