@atlaskit/editor-core 191.0.1 → 191.0.3

package/dist/es2019/plugins/extension/toolbar.js

@@ -1,237 +0,0 @@
-import { defineMessages } from 'react-intl-next';
-import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
-import EditIcon from '@atlaskit/icon/glyph/editor/edit';
-import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
-import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
-import CenterIcon from '@atlaskit/icon/glyph/editor/media-center';
-import commonMessages from '@atlaskit/editor-common/messages';
-import { editExtension } from './actions';
-import { getPluginState } from './pm-plugins/main';
-import { getSelectedExtension } from './utils';
-import { updateExtensionLayout, removeExtension, removeDescendantNodes } from './commands';
-import { pluginKey as macroPluginKey } from './pm-plugins/macro/plugin-key';
-import { isReferencedSource, getChildrenInfo, getNodeName } from '@atlaskit/editor-common/utils';
-import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-export const messages = defineMessages({
-  edit: {
-    id: 'fabric.editor.edit',
-    defaultMessage: 'Edit',
-    description: 'Edit the properties for this extension.'
-  },
-  deleteElementTitle: {
-    id: 'fabric.editor.extension.deleteElementTitle',
-    defaultMessage: 'Delete element',
-    description: 'Title text for confirm modal when deleting an extension linked to a data consumer.'
-  },
-  unnamedSource: {
-    id: 'fabric.editor.extension.sourceNoTitledName',
-    defaultMessage: 'this element',
-    description: 'The current element without preset name been selected'
-  },
-  confirmDeleteLinkedModalOKButton: {
-    id: 'fabric.editor.extension.confirmDeleteLinkedModalOKButton',
-    defaultMessage: 'Delete',
-    description: 'Action button label for confirm modal when deleting an extension linked to a data consumer.'
-  },
-  confirmDeleteLinkedModalMessage: {
-    id: 'fabric.editor.extension.confirmDeleteLinkedModalMessage',
-    defaultMessage: 'Deleting {nodeName} will break anything connected to it.',
-    description: 'Message for confirm modal when deleting a extension linked to an data consumer.'
-  },
-  confirmModalCheckboxLabel: {
-    id: 'fabric.editor.floatingToolbar.confirmModalCheckboxLabel',
-    defaultMessage: 'Also delete connected elements',
-    description: 'checkbox label text'
-  }
-});
-const isLayoutSupported = (state, selectedExtNode) => {
-  const {
-    schema: {
-      nodes: {
-        bodiedExtension,
-        extension,
-        layoutSection,
-        table,
-        expand,
-        multiBodiedExtension
-      }
-    },
-    selection
-  } = state;
-  if (!selectedExtNode) {
-    return false;
-  }
-  return !!((selectedExtNode.node.type === bodiedExtension || selectedExtNode.node.type === multiBodiedExtension || selectedExtNode.node.type === extension && !hasParentNodeOfType([bodiedExtension, table, expand].filter(Boolean))(selection)) && !hasParentNodeOfType([layoutSection])(selection));
-};
-const breakoutOptions = (state, formatMessage, extensionState, breakoutEnabled) => {
-  const nodeWithPos = getSelectedExtension(state, true);
-
-  // we should only return breakout options when breakouts are enabled and the node supports them
-  if (nodeWithPos && breakoutEnabled && isLayoutSupported(state, nodeWithPos)) {
-    const {
-      layout
-    } = nodeWithPos.node.attrs;
-    return [{
-      type: 'button',
-      icon: CenterIcon,
-      onClick: updateExtensionLayout('default'),
-      selected: layout === 'default',
-      title: formatMessage(commonMessages.layoutFixedWidth),
-      tabIndex: null
-    }, {
-      type: 'button',
-      icon: WideIcon,
-      onClick: updateExtensionLayout('wide'),
-      selected: layout === 'wide',
-      title: formatMessage(commonMessages.layoutWide),
-      tabIndex: null
-    }, {
-      type: 'button',
-      icon: FullWidthIcon,
-      onClick: updateExtensionLayout('full-width'),
-      selected: layout === 'full-width',
-      title: formatMessage(commonMessages.layoutFullWidth),
-      tabIndex: null
-    }];
-  }
-  return [];
-};
-const editButton = (formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) => {
-  if (!extensionState.showEditButton) {
-    return [];
-  }
-  return [{
-    id: 'editor.extension.edit',
-    type: 'button',
-    icon: EditIcon,
-    testId: 'extension-toolbar-edit-button',
-    // Taking the latest `updateExtension` from plugin state to avoid race condition @see ED-8501
-    onClick: (state, dispatch, view) => {
-      const macroState = macroPluginKey.getState(state);
-      const {
-        updateExtension
-      } = getPluginState(state);
-      editExtension(macroState && macroState.macroProvider, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension)(state, dispatch, view);
-      return true;
-    },
-    title: formatMessage(messages.edit),
-    tabIndex: null,
-    focusEditoronEnter: true
-  }];
-};
-export const getToolbarConfig = ({
-  breakoutEnabled = true,
-  hoverDecoration,
-  applyChangeToContextPanel,
-  editorAnalyticsAPI
-}) => (state, intl) => {
-  const {
-    formatMessage
-  } = intl;
-  const extensionState = getPluginState(state);
-  if (extensionState && !extensionState.showContextPanel && extensionState.element) {
-    const nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
-    const editButtonArray = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
-    const breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled);
-    const extensionObj = getSelectedExtension(state, true);
-
-    // Check if we need to show confirm dialog for delete button
-    let confirmDialog;
-    if (isReferencedSource(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
-      confirmDialog = () => {
-        const localSourceName = formatMessage(messages.unnamedSource);
-        return {
-          title: formatMessage(messages.deleteElementTitle),
-          okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
-          message: formatMessage(messages.confirmDeleteLinkedModalMessage, {
-            nodeName: getNodeName(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node) || localSourceName
-          }),
-          isReferentialityDialog: true,
-          getChildrenInfo: () => getChildrenInfo(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node),
-          checkboxLabel: formatMessage(messages.confirmModalCheckboxLabel),
-          onConfirm: (isChecked = false) => clickWithCheckboxHandler(isChecked, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)
-        };
-      };
-    }
-    return {
-      title: 'Extension floating controls',
-      getDomRef: () => extensionState.element.parentElement || undefined,
-      nodeType,
-      onPositionCalculated: (editorView, nextPos) => {
-        const {
-          state: {
-            schema,
-            selection
-          }
-        } = editorView;
-        const mbeNode = getSelectedExtension(state, true);
-        const mbeFrame = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
-        if (!mbeNode || !mbeFrame) {
-          return nextPos;
-        }
-        const mbeDomElement = editorView.nodeDOM(mbeNode.pos);
-        const mbeFrameElement = editorView.nodeDOM(mbeFrame.pos);
-        const mbeNodeRect = mbeDomElement === null || mbeDomElement === void 0 ? void 0 : mbeDomElement.getBoundingClientRect();
-        const mbeFrameRect = mbeFrameElement.getBoundingClientRect();
-        const scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
-
-        /**
-         * MbeNodeRect height will include mbeFrameRect height and the navigation toolbar of the MBE
-         * excluding nav toolbar height from the floaing extention toolbar position calculated.
-         * In case of new tabs, MBE does not update the frame to the new tab so height comes as 0,
-         * so we add the min height (100px) + borders (2px) as the default minimum frame height for toolbar to appear
-         *
-         */
-        const frameheight = mbeFrameRect.height > 0 ? mbeFrameRect.height : 102;
-        return {
-          top: mbeNodeRect.top + frameheight + scrollWrapper.scrollTop,
-          left: nextPos.left
-        };
-      },
-      items: [...editButtonArray, ...breakoutButtonArray, {
-        type: 'separator',
-        hidden: editButtonArray.length === 0 && breakoutButtonArray.length === 0
-      }, {
-        type: 'extensions-placeholder',
-        separator: 'end'
-      }, {
-        type: 'copy-button',
-        items: [{
-          state,
-          formatMessage: intl.formatMessage,
-          nodeType
-        }, {
-          type: 'separator'
-        }]
-      }, {
-        id: 'editor.extension.delete',
-        type: 'button',
-        icon: RemoveIcon,
-        appearance: 'danger',
-        onClick: removeExtension(editorAnalyticsAPI),
-        onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
-        onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
-        onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
-        onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
-        focusEditoronEnter: true,
-        title: formatMessage(commonMessages.remove),
-        tabIndex: null,
-        confirmDialog
-      }],
-      scrollable: true
-    };
-  }
-  return;
-};
-const clickWithCheckboxHandler = (isChecked, node) => (state, dispatch) => {
-  if (!node) {
-    return false;
-  }
-  if (!isChecked) {
-    removeExtension()(state, dispatch);
-  } else {
-    removeDescendantNodes(node)(state, dispatch);
-  }
-  return true;
-};

package/dist/es2019/plugins/extension/types.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/plugins/extension/ui/ConfigPanel/ConfigPanel.js

@@ -1,415 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { useCallback, useRef, useEffect } from 'react';
-import memoizeOne from 'memoize-one';
-import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import Form from '@atlaskit/form';
-import { isTabGroup } from '@atlaskit/editor-common/extensions';
-import _isEqual from 'lodash/isEqual';
-import _mergeRecursive from 'lodash/merge';
-import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION } from '@atlaskit/editor-common/analytics';
-import LoadingState from './LoadingState';
-import Header from './Header';
-import ErrorMessage from './ErrorMessage';
-import { serialize, deserialize, findDuplicateFields } from './transformers';
-import { injectIntl } from 'react-intl-next';
-import ButtonGroup from '@atlaskit/button/button-group';
-import Button from '@atlaskit/button/custom-theme-button';
-import { FormFooter } from '@atlaskit/form';
-import { pluginKey as extensionPluginKey } from '../../plugin-key';
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
-import FormContent from './FormContent';
-import { messages } from './messages';
-import { FormErrorBoundary } from './FormErrorBoundary';
-import { getLoggedParameters } from './utils';
-import { ALLOWED_LOGGED_MACRO_PARAMS } from './constants';
-function ConfigForm({
-  canSave,
-  errorMessage,
-  extensionManifest,
-  fields,
-  firstVisibleFieldName,
-  hasParsedParameters,
-  intl,
-  isLoading,
-  onCancel,
-  onFieldChange,
-  parameters,
-  submitting,
-  contextIdentifierProvider,
-  featureFlags
-}) {
-  useEffect(() => {
-    if (fields) {
-      const firstDuplicateField = findDuplicateFields(fields);
-      if (firstDuplicateField) {
-        throw new Error(`Possible duplicate field name: \`${firstDuplicateField.name}\`.`);
-      }
-    }
-  }, [fields]);
-  if (isLoading || !hasParsedParameters && errorMessage === null) {
-    return /*#__PURE__*/React.createElement(LoadingState, null);
-  }
-  if (errorMessage || !fields) {
-    return /*#__PURE__*/React.createElement(ErrorMessage, {
-      errorMessage: errorMessage || ''
-    });
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormContent, {
-    fields: fields,
-    parameters: parameters,
-    extensionManifest: extensionManifest,
-    onFieldChange: onFieldChange,
-    firstVisibleFieldName: firstVisibleFieldName,
-    contextIdentifierProvider: contextIdentifierProvider,
-    featureFlags: featureFlags
-  }), /*#__PURE__*/React.createElement("div", {
-    style: canSave ? {} : {
-      display: 'none'
-    }
-  }, /*#__PURE__*/React.createElement(FormFooter, {
-    align: "start"
-  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
-    type: "submit",
-    appearance: "primary"
-  }, intl.formatMessage(messages.submit)), /*#__PURE__*/React.createElement(Button, {
-    appearance: "default",
-    isDisabled: submitting,
-    onClick: onCancel
-  }, intl.formatMessage(messages.cancel))))));
-}
-const ConfigFormIntl = injectIntl(ConfigForm);
-const WithOnFieldChange = ({
-  getState,
-  autoSave,
-  handleSubmit,
-  children
-}) => {
-  const getStateRef = useRef(getState);
-  useEffect(() => {
-    getStateRef.current = getState;
-  }, [getState]);
-  const handleFieldChange = useCallback((name, isDirty) => {
-    if (!autoSave) {
-      return;
-    }
-
-    // Don't trigger submit if nothing actually changed
-    if (!isDirty) {
-      return;
-    }
-    const {
-      errors,
-      values
-    } = getStateRef.current();
-
-    // Get only values that does not contain errors
-    const validValues = {};
-    for (const key of Object.keys(values)) {
-      if (!errors[key]) {
-        // not has error
-        validValues[key] = values[key];
-      }
-    }
-    handleSubmit(validValues);
-  }, [autoSave, handleSubmit]);
-  return children(handleFieldChange);
-};
-class ConfigPanel extends React.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "handleKeyDown", e => {
-      if ((e.key === 'Esc' || e.key === 'Escape') && this.props.closeOnEsc) {
-        this.props.onCancel();
-      }
-    });
-    // https://product-fabric.atlassian.net/browse/DST-2697
-    // workaround for DST-2697, remove this function once fix.
-    _defineProperty(this, "backfillTabFormData", (fields, formData, currentParameters) => {
-      const getRelevantData = (field, formParams, currentParams, backfill) => {
-        if (field.hasGroupedValues && !(field.name in backfill)) {
-          backfill[field.name] = {};
-        }
-        const actualFormParams = field.hasGroupedValues ? formParams[field.name] || {} : formParams;
-        const actualCurrentParams = field.hasGroupedValues ? currentParams[field.name] || {} : currentParams;
-        const actualBackfillParams = field.hasGroupedValues ? backfill[field.name] : backfill;
-        return {
-          formParams: actualFormParams,
-          currentParams: actualCurrentParams,
-          backfillParams: actualBackfillParams
-        };
-      };
-
-      // Traverse any tab structures and backfill field values on tabs
-      // which aren't shown. This filter should be ok because tabs are
-      // currently only allowed on top level
-      const mergedTabGroups = fields.filter(isTabGroup).reduce((missingBackfill, tabGroup) => {
-        const {
-          formParams: tabGroupFormData,
-          currentParams: tabGroupCurrentData,
-          backfillParams: tabGroupParams
-        } = getRelevantData(tabGroup, formData, currentParameters, missingBackfill);
-
-        // Loop through tabs and see what fields are missing from current data
-        tabGroup.fields.forEach(tabField => {
-          const {
-            formParams: tabFormData,
-            currentParams: tabCurrentData,
-            backfillParams: tabParams
-          } = getRelevantData(tabField, tabGroupFormData, tabGroupCurrentData, tabGroupParams);
-          tabField.fields.forEach(field => {
-            if (field.name in tabFormData || !(field.name in tabCurrentData)) {
-              return;
-            }
-            tabParams[field.name] = tabCurrentData[field.name];
-          });
-        });
-        return missingBackfill;
-      }, {});
-      return _mergeRecursive({}, mergedTabGroups, formData);
-    });
-    _defineProperty(this, "handleSubmit", async formData => {
-      const {
-        fields,
-        extensionManifest,
-        onChange,
-        autoSaveReject
-      } = this.props;
-      if (!extensionManifest || !fields) {
-        if (!extensionManifest) {
-          autoSaveReject === null || autoSaveReject === void 0 ? void 0 : autoSaveReject(new Error('Extension manifest not loaded'));
-        } else if (!fields) {
-          autoSaveReject === null || autoSaveReject === void 0 ? void 0 : autoSaveReject(new Error('Config fields not loaded'));
-        }
-        return;
-      }
-      try {
-        const serializedData = await serialize(extensionManifest, this.backfillTabFormData(fields, formData, this.state.currentParameters), fields);
-        onChange(serializedData);
-      } catch (error) {
-        autoSaveReject === null || autoSaveReject === void 0 ? void 0 : autoSaveReject(error);
-        // eslint-disable-next-line no-console
-        console.error(`Error serializing parameters`, error);
-      }
-    });
-    _defineProperty(this, "parseParameters", async (fields, parameters) => {
-      const {
-        extensionManifest
-      } = this.props;
-      if (!extensionManifest || !fields || fields.length === 0) {
-        // do not parse while fields are not returned
-        return;
-      }
-      if (typeof parameters === 'undefined') {
-        this.setState({
-          currentParameters: {},
-          hasParsedParameters: true
-        });
-        return;
-      }
-      const currentParameters = await deserialize(extensionManifest, parameters, fields);
-      this.setState({
-        currentParameters,
-        hasParsedParameters: true
-      });
-    });
-    // memoized to prevent rerender on new parameters
-    _defineProperty(this, "renderHeader", memoizeOne(extensionManifest => {
-      const {
-        onCancel,
-        showHeader
-      } = this.props;
-
-      // Use a temporary allowlist of top 3 macros to test out a new "Documentation" CTA ("Need help?")
-      // This will be removed when Top 5 Modernized Macros updates are rolled out
-      const modernizedMacrosList = ['children', 'recently-updated', 'excerpt'];
-      const enableHelpCTA = modernizedMacrosList.includes(extensionManifest.key);
-      if (!showHeader) {
-        return null;
-      }
-      return /*#__PURE__*/React.createElement(Header, {
-        icon: extensionManifest.icons['48'],
-        title: extensionManifest.title,
-        description: extensionManifest.description,
-        summary: extensionManifest.summary,
-        documentationUrl: extensionManifest.documentationUrl,
-        onClose: onCancel,
-        enableHelpCTA: enableHelpCTA
-      });
-    }));
-    _defineProperty(this, "getFirstVisibleFieldName", memoizeOne(fields => {
-      function nonHidden(field) {
-        if ('isHidden' in field) {
-          return !field.isHidden;
-        }
-        return true;
-      }
-
-      // finds the first visible field, true for FieldSets too
-      const firstVisibleField = fields.find(nonHidden);
-      let newFirstVisibleFieldName;
-      if (firstVisibleField) {
-        // if it was a fieldset, go deeper trying to locate the field
-        if (firstVisibleField.type === 'fieldset') {
-          const firstVisibleFieldWithinFieldset = firstVisibleField.fields.find(nonHidden);
-          newFirstVisibleFieldName = firstVisibleFieldWithinFieldset && firstVisibleFieldWithinFieldset.name;
-        } else {
-          newFirstVisibleFieldName = firstVisibleField.name;
-        }
-      }
-      return newFirstVisibleFieldName;
-    }));
-    _defineProperty(this, "setFirstVisibleFieldName", fields => {
-      const newFirstVisibleFieldName = this.getFirstVisibleFieldName(fields);
-      if (newFirstVisibleFieldName !== this.state.firstVisibleFieldName) {
-        this.setState({
-          firstVisibleFieldName: newFirstVisibleFieldName
-        });
-      }
-    });
-    this.state = {
-      hasParsedParameters: false,
-      currentParameters: {},
-      firstVisibleFieldName: props.fields ? this.getFirstVisibleFieldName(props.fields) : undefined
-    };
-    this.onFieldChange = null;
-  }
-  componentDidMount() {
-    const {
-      fields,
-      parameters
-    } = this.props;
-    this.parseParameters(fields, parameters);
-  }
-  componentWillUnmount() {
-    const {
-      createAnalyticsEvent,
-      extensionManifest,
-      fields
-    } = this.props;
-    const {
-      currentParameters
-    } = this.state;
-    fireAnalyticsEvent(createAnalyticsEvent)({
-      payload: {
-        action: ACTION.CLOSED,
-        actionSubject: ACTION_SUBJECT.CONFIG_PANEL,
-        eventType: EVENT_TYPE.UI,
-        attributes: {
-          extensionKey: extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest.key,
-          extensionType: extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest.type,
-          ...(extensionManifest !== null && extensionManifest !== void 0 && extensionManifest.key && ALLOWED_LOGGED_MACRO_PARAMS[extensionManifest.key] ? {
-            parameters: getLoggedParameters(extensionManifest.key, currentParameters, fields)
-          } : {})
-        }
-      }
-    });
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      parameters,
-      fields,
-      autoSaveTrigger,
-      extensionManifest
-    } = this.props;
-    if (parameters && parameters !== prevProps.parameters || fields && (!prevProps.fields || !_isEqual(fields, prevProps.fields))) {
-      this.parseParameters(fields, parameters);
-    }
-    if (fields && (!prevProps.fields || !_isEqual(fields, prevProps.fields))) {
-      this.setFirstVisibleFieldName(fields);
-    }
-    if (prevProps.autoSaveTrigger !== autoSaveTrigger) {
-      if (this.onFieldChange) {
-        this.onFieldChange('', true);
-      }
-    }
-    if (prevProps.extensionManifest === undefined && prevProps.extensionManifest !== extensionManifest) {
-      // This will only be fired once when extensionManifest is loaded initially
-      // Can't do this in componentDidMount because extensionManifest is still undefined at that point
-      fireAnalyticsEvent(this.props.createAnalyticsEvent)({
-        payload: {
-          action: ACTION.OPENED,
-          actionSubject: ACTION_SUBJECT.CONFIG_PANEL,
-          eventType: EVENT_TYPE.UI,
-          attributes: {
-            extensionKey: extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest.key,
-            extensionType: extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest.type
-          }
-        }
-      });
-    }
-  }
-  render() {
-    const {
-      extensionManifest,
-      featureFlags
-    } = this.props;
-    if (!extensionManifest) {
-      return /*#__PURE__*/React.createElement(LoadingState, null);
-    }
-    const {
-      autoSave,
-      errorMessage,
-      fields,
-      isLoading,
-      onCancel
-    } = this.props;
-    const {
-      currentParameters,
-      hasParsedParameters,
-      firstVisibleFieldName
-    } = this.state;
-    const {
-      handleSubmit,
-      handleKeyDown
-    } = this;
-    return /*#__PURE__*/React.createElement(Form, {
-      onSubmit: handleSubmit
-    }, ({
-      formProps,
-      getState,
-      submitting
-    }) => {
-      return /*#__PURE__*/React.createElement(WithOnFieldChange, {
-        autoSave: !!autoSave,
-        getState: getState,
-        handleSubmit: handleSubmit
-      }, onFieldChange => {
-        this.onFieldChange = onFieldChange;
-        return /*#__PURE__*/React.createElement("form", _extends({}, formProps, {
-          noValidate: true,
-          onKeyDown: handleKeyDown,
-          "data-testid": "extension-config-panel"
-        }), this.renderHeader(extensionManifest), /*#__PURE__*/React.createElement(WithPluginState, {
-          plugins: {
-            extension: extensionPluginKey
-          },
-          render: ({
-            extension
-          }) => /*#__PURE__*/React.createElement(FormErrorBoundary, {
-            contextIdentifierProvider: extension === null || extension === void 0 ? void 0 : extension.contextIdentifierProvider,
-            extensionKey: extensionManifest.key,
-            fields: fields || []
-          }, /*#__PURE__*/React.createElement(ConfigFormIntl, {
-            canSave: !autoSave,
-            errorMessage: errorMessage,
-            extensionManifest: extensionManifest,
-            fields: fields,
-            firstVisibleFieldName: firstVisibleFieldName,
-            hasParsedParameters: hasParsedParameters,
-            isLoading: isLoading || false,
-            onCancel: onCancel,
-            onFieldChange: onFieldChange,
-            parameters: currentParameters,
-            submitting: submitting,
-            contextIdentifierProvider: extension === null || extension === void 0 ? void 0 : extension.contextIdentifierProvider,
-            featureFlags: featureFlags
-          }))
-        }));
-      });
-    });
-  }
-}
-export default withAnalyticsContext({
-  source: 'ConfigPanel'
-})(withAnalyticsEvents()(ConfigPanel));