Show field type on edit in schemawidget.

packages/volto/src/components/manage/Widgets/SchemaWidget.jsx

@@ -9,6 +9,7 @@ import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import {
   concat,
+  find,
   findIndex,
   isString,
   keys,
@@ -23,6 +24,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { slugify } from '@plone/volto/helpers/Utils/Utils';
+import { getVocabulary } from '@plone/volto/actions';
 
 import SchemaWidgetFieldset from '@plone/volto/components/manage/Widgets/SchemaWidgetFieldset';
 import { Field, ModalForm } from '@plone/volto/components/manage/Form';
@@ -897,6 +899,10 @@ class SchemaWidget extends Component {
      * On change handler
      */
     onChange: PropTypes.func.isRequired,
+    /**
+     * Get vocabulary action
+     */
+    getVocabulary: PropTypes.func.isRequired,
   };
 
   /**
@@ -951,6 +957,19 @@ class SchemaWidget extends Component {
     };
   }
 
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.props.getVocabulary({
+      vocabNameOrURL: 'Fields',
+      size: -1,
+      subrequest: 'schemawidget',
+    });
+  }
+
   /**
    * Add field handler
    * @method onAddField
@@ -1480,6 +1499,17 @@ class SchemaWidget extends Component {
     if (!this.props.value) {
       return '';
     }
+    const choices = [...this.props.fields, ...this.props.additionalFactory];
+    let editFieldType = '';
+    if (this.state.editField) {
+      const fieldType = find(choices, {
+        value: this.props.value.properties[this.state.editField.id].factory,
+      });
+      editFieldType = this.props.intl.formatMessage({
+        id: fieldType.value,
+        defaultMessage: fieldType.label,
+      });
+    }
     const nonUserCreatedFields = this.props.value.fieldsets[
       this.state.currentFieldset
     ].fields.filter(
@@ -1748,7 +1778,7 @@ class SchemaWidget extends Component {
           <ModalForm
             onSubmit={this.onEditField}
             onCancel={this.onCancel}
-            title={this.props.intl.formatMessage(messages.editField)}
+            title={`${this.props.intl.formatMessage(messages.editField)}: ${editFieldType}`}
             formData={{
               ...this.props.value.properties[this.state.editField.id],
               id: this.state.editField.id,
@@ -1825,7 +1855,9 @@ export default compose(
   connect(
     (state, props) => ({
       value: isString(props.value) ? JSON.parse(props.value) : props.value,
+      fields:
+        state.vocabularies?.Fields?.subrequests?.schemawidget?.items || [],
     }),
-    {},
+    { getVocabulary },
   ),
 )(SchemaWidget);