diff --git a/geonode_mapstore_client/client/js/components/Autocomplete/Autocomplete.jsx b/geonode_mapstore_client/client/js/components/Autocomplete/Autocomplete.jsx index 559ec1d7fc..671f718605 100644 --- a/geonode_mapstore_client/client/js/components/Autocomplete/Autocomplete.jsx +++ b/geonode_mapstore_client/client/js/components/Autocomplete/Autocomplete.jsx @@ -21,6 +21,7 @@ const IconWithTooltip = tooltip((props) =>
+
{helpTitleIcon && !isEmpty(description) && } @@ -56,6 +57,7 @@ const Autocomplete = ({ valueKey={valueKey} labelKey={labelKey} /> + {error}
); }; @@ -63,6 +65,7 @@ const Autocomplete = ({ Autocomplete.propTypes = { className: PropTypes.string, description: PropTypes.string, + error: PropTypes.element, helpTitleIcon: PropTypes.bool, id: PropTypes.string.isRequired, labelKey: PropTypes.string, diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/SchemaField.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/SchemaField.jsx index 75d4023a49..215ccde87f 100644 --- a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/SchemaField.jsx +++ b/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 ( +
    + {castArray(entry.messages).map((message, mIdx) => { + return
  • {entry.key ? `${entry.key}: ` : ''}{message}
  • ; + })} +
+ ); + })} + }; return ; diff --git a/geonode_mapstore_client/client/themes/geonode/less/_metadata.less b/geonode_mapstore_client/client/themes/geonode/less/_metadata.less index deb6d0c911..b4ecb26b33 100644 --- a/geonode_mapstore_client/client/themes/geonode/less/_metadata.less +++ b/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]);