Fix - Autocomplete field not showing validation error (#1912)

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,9 @@
 
 import React from 'react';
 import axios from '@mapstore/framework/libs/ajax';
-import isString from 'lodash/isString';
+import castArray from 'lodash/castArray';
 import isEmpty from 'lodash/isEmpty';
+import isString from 'lodash/isString';
 import Autocomplete from '@js/components/Autocomplete/Autocomplete';
 import DefaultSchemaField from '@rjsf/core/lib/components/fields/SchemaField';
 
@@ -26,6 +27,8 @@ const SchemaField = (props) => {
         formData,
         idSchema,
         name,
+        hideError,
+        errorSchema,
         uiSchema
     } = props;
     const autocomplete = uiSchema?.['ui:options']?.['geonode-ui:autocomplete'];
@@ -37,6 +40,19 @@ const SchemaField = (props) => {
     const isSingleSelect = schema?.type === 'object' && !isEmpty(schema?.properties);
 
     if (autocomplete && (isMultiSelect || isSingleSelect)) {
+        const errors = (!hideError ? castArray(errorSchema) : [])
+            .reduce((acc, errorEntry) => {
+                if (errorEntry?.__errors) {
+                    acc.push({ messages: errorEntry.__errors });
+                } else {
+                    Object.keys(errorEntry || {}).forEach((key) => {
+                        if (errorEntry[key]?.__errors) {
+                            acc.push({ key, messages: errorEntry[key].__errors });
+                        }
+                    });
+                }
+                return acc;
+            }, []);
         const autocompleteOptions = isString(autocomplete)
             ? { url: autocomplete }
             : autocomplete;
@@ -104,7 +120,18 @@ const SchemaField = (props) => {
                             })
                         };
                     });
-            }
+            },
+            error: isEmpty(errors) ? null : <>
+                {errors.map((entry, idx) => {
+                    return (
+                        <ul key={idx} className="text-danger">
+                            {castArray(entry.messages).map((message, mIdx) => {
+                                return <li key={mIdx}>{entry.key ? `${entry.key}: ` : ''}{message}</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-metadata-form-description {
+                    .color-var(@theme-vars[danger])
+                }
+            }
+        }
     }
     .gn-metadata-list {
         .border-right-color-var(@theme-vars[main-border-color]);