Handle options and errors on field (#1915)

Author: dsuren1

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

@@ -29,6 +29,7 @@ const Autocomplete = ({
     title,
     value,
     valueKey = "value",
+    showLabel = true,
     ...props
 }) => {
     const getValue = () => {
@@ -46,10 +47,10 @@ const Autocomplete = ({
 
     return (
         <div className={`autocomplete${className ? " " + className : ""}${!!error ? " " + "has-error" : ""}`}>
-            <div className="title-container">
+            {showLabel && <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>
+            </div>}
             <SelectInfiniteScroll
                 {...props}
                 id={id}
@@ -72,7 +73,8 @@ Autocomplete.propTypes = {
     name: PropTypes.string,
     title: PropTypes.string,
     value: PropTypes.any.isRequired,
-    valueKey: PropTypes.string
+    valueKey: PropTypes.string,
+    showLabel: PropTypes.bool
 };
 
 export default Autocomplete;

geonode_mapstore_client/client/js/plugins/MetadataEditor/actions/metadata.js

@@ -16,6 +16,7 @@ export const SET_METADATA_UPDATING = 'GEONODE:SET_METADATA_UPDATING';
 export const SET_METADATA_UPDATE_ERROR = 'GEONODE:SET_METADATA_UPDATE_ERROR';
 export const SET_METADATA_PREVIEW = 'GEONODE:SET_METADATA_PREVIEW';
 export const SET_METADATA_RESOURCE = 'GEONODE:SET_METADATA_RESOURCE';
+export const SET_METADATA_EXTRA_ERRORS = 'GEONODE:SET_METADATA_EXTRA_ERRORS';
 
 export const setMetadata = (metadata) => ({
     type: SET_METADATA,
@@ -66,3 +67,8 @@ export const setMetadataResource = (resource) => ({
     type: SET_METADATA_RESOURCE,
     resource
 });
+
+export const setExtraErrors = (extraErrors) => ({
+    type: SET_METADATA_EXTRA_ERRORS,
+    extraErrors
+});

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

@@ -27,11 +27,11 @@ const SchemaField = (props) => {
         formData,
         idSchema,
         name,
-        hideError,
         errorSchema,
         uiSchema
     } = props;
-    const autocomplete = uiSchema?.['ui:options']?.['geonode-ui:autocomplete'];
+    const uiOptions = uiSchema?.['ui:options'];
+    const autocomplete = uiOptions?.['geonode-ui:autocomplete'];
     const isSchemaItemString = schema?.items?.type === 'string';
     const isSchemaItemObject = schema?.items?.type === 'object';
     const isMultiSelect = schema?.type === 'array' && (isSchemaItemString ||
@@ -40,6 +40,17 @@ const SchemaField = (props) => {
     const isSingleSelect = schema?.type === 'object' && !isEmpty(schema?.properties);
 
     if (autocomplete && (isMultiSelect || isSingleSelect)) {
+        const {
+            classNames,
+            style,
+            description,
+            disabled,
+            help: helpText,
+            hideError,
+            label,
+            placeholder: autoCompletePlaceholder,
+            title
+        } = uiOptions;
         const errors = (!hideError ? castArray(errorSchema) : [])
             .reduce((acc, errorEntry) => {
                 if (errorEntry?.__errors) {
@@ -61,23 +72,26 @@ const SchemaField = (props) => {
         const resultsKey = autocompleteOptions?.resultsKey || 'results';
         const valueKey = autocompleteOptions?.valueKey || 'id';
         const labelKey = autocompleteOptions?.labelKey || 'label';
-        const placeholder = autocompleteOptions?.placeholder ?? '...';
         const creatable = !!autocompleteOptions?.creatable;
+        const placeholder = autoCompletePlaceholder ?? '...';
 
         let autoCompleteProps = {
-            className: "gn-metadata-autocomplete",
+            className: `gn-metadata-autocomplete${classNames ? ' ' + classNames : ''}`,
             clearable: !isMultiSelect,
             creatable,
             id: idSchema.$id,
             labelKey,
             multi: isMultiSelect,
             name,
             placeholder,
-            title: schema.title,
+            showLabel: label ?? true,
+            title: title ?? schema.title,
             value: formData,
             valueKey,
             helpTitleIcon: true,
-            description: schema.description,
+            description: helpText ?? description ?? schema.description, // Help text is preferred over description and displayed as a tooltip
+            disabled,
+            style,
             onChange: (selected) => {
                 let _selected = selected?.result ?? null;
                 if (isMultiSelect) {

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

@@ -22,6 +22,7 @@ function MetadataEditor({
     pk,
     loading,
     error,
+    extraErrors,
     metadata,
     schema,
     uiSchema,
@@ -97,6 +98,7 @@ function MetadataEditor({
                     validator={validator}
                     templates={templates}
                     fields={fields}
+                    extraErrors={extraErrors}
                     experimental_defaultFormStateBehavior={{
                         arrayMinItems: {
                             populate: 'never',

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

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import get from 'lodash/get';
 import { updateMetadata } from '@js/api/geonode/v2/metadata';
 import Message from '@mapstore/framework/components/I18N/Message';
 import Button from '@js/components/Button';
@@ -20,15 +21,17 @@ function MetadataUpdateButton({
     updating,
     setUpdating,
     setUpdateError,
-    setInitialMetadata
+    setInitialMetadata,
+    setExtraErrors
 }) {
 
     function handleUpdate() {
         setUpdating(true);
         setUpdateError(false);
         updateMetadata(pk, metadata)
-            .then(() => {
+            .then((res) => {
                 setInitialMetadata(metadata);
+                setExtraErrors(get(res, 'data.extraErrors', {}));
             })
             .catch(() => {
                 setUpdateError(true);

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

@@ -21,7 +21,8 @@ import {
     setMetadataError,
     setMetadataUpdating,
     setMetadataUpdateError,
-    setMetadataResource
+    setMetadataResource,
+    setExtraErrors
 } from './actions/metadata';
 import { parseDevHostname } from '@js/utils/APIUtils';
 
@@ -35,16 +36,18 @@ const connectMetadata = connect(
     createSelector([
         state => state?.metadata?.loading,
         state => state?.metadata?.error,
+        state => state?.metadata?.extraErrors,
         state => state?.metadata?.metadata,
         state => state?.metadata?.initialMetadata,
         state => state?.metadata?.schema,
         state => state?.metadata?.uiSchema,
         state => state?.metadata?.updating,
         state => state?.metadata?.updateError,
         state => state?.metadata?.resource
-    ], (loading, error, metadata, initialMetadata, schema, uiSchema, updating, updateError, resource) => ({
+    ], (loading, error, extraErrors, metadata, initialMetadata, schema, uiSchema, updating, updateError, resource) => ({
         loading,
         error,
+        extraErrors,
         metadata,
         schema,
         uiSchema,
@@ -62,7 +65,8 @@ const connectMetadata = connect(
         setInitialMetadata,
         setUpdateError: setMetadataUpdateError,
         setUpdating: setMetadataUpdating,
-        setResource: setMetadataResource
+        setResource: setMetadataResource,
+        setExtraErrors
     }
 );
 

geonode_mapstore_client/client/js/plugins/MetadataEditor/reducers/metadata.js

@@ -16,7 +16,8 @@ import {
     SET_METADATA_UPDATING,
     SET_METADATA_UPDATE_ERROR,
     SET_METADATA_PREVIEW,
-    SET_METADATA_RESOURCE
+    SET_METADATA_RESOURCE,
+    SET_METADATA_EXTRA_ERRORS
 } from '../actions/metadata';
 
 function metadata(state = {}, action) {
@@ -81,6 +82,12 @@ function metadata(state = {}, action) {
             resource: action.resource
         };
     }
+    case SET_METADATA_EXTRA_ERRORS: {
+        return {
+            ...state,
+            extraErrors: action.extraErrors
+        };
+    }
     default:
         return state;
     }