@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/es2019/reducer.js

@@ -0,0 +1,11 @@
+export default function (pluginState, action) {
+  switch (action.type) {
+    case 'UPDATE_STATE':
+      return {
+        ...pluginState,
+        ...action.data
+      };
+    default:
+      return pluginState;
+  }
+}

package/dist/es2019/toolbar.js

@@ -0,0 +1,236 @@
+import { defineMessages } from 'react-intl-next';
+import commonMessages from '@atlaskit/editor-common/messages';
+import { getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
+import { findParentNodeOfType, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import EditIcon from '@atlaskit/icon/glyph/editor/edit';
+import CenterIcon from '@atlaskit/icon/glyph/editor/media-center';
+import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
+import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { editExtension } from './actions';
+import { removeDescendantNodes, removeExtension, updateExtensionLayout } from './commands';
+import { pluginKey as macroPluginKey } from './pm-plugins/macro/plugin-key';
+import { getPluginState } from './pm-plugins/main';
+import { getSelectedExtension } from './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/ui/ConfigPanel/ConfigPanel.js

@@ -0,0 +1,415 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { useCallback, useEffect, useRef } from 'react';
+import _isEqual from 'lodash/isEqual';
+import _mergeRecursive from 'lodash/merge';
+import memoizeOne from 'memoize-one';
+import { injectIntl } from 'react-intl-next';
+import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import ButtonGroup from '@atlaskit/button/button-group';
+import Button from '@atlaskit/button/custom-theme-button';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { isTabGroup } from '@atlaskit/editor-common/extensions';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import Form, { FormFooter } from '@atlaskit/form';
+import { pluginKey as extensionPluginKey } from '../../plugin-key';
+import { ALLOWED_LOGGED_MACRO_PARAMS } from './constants';
+import ErrorMessage from './ErrorMessage';
+import FormContent from './FormContent';
+import { FormErrorBoundary } from './FormErrorBoundary';
+import Header from './Header';
+import LoadingState from './LoadingState';
+import { messages } from './messages';
+import { deserialize, findDuplicateFields, serialize } from './transformers';
+import { getLoggedParameters } from './utils';
+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);
+};
+// eslint-disable-next-line @repo/internal/react/no-class-components
+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));