@atlaskit/editor-plugin-extension 4.1.2 → 5.0.0

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

@@ -12,7 +12,9 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaski
 import { isTabGroup, configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import Form, { FormFooter } from '@atlaskit/form';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ALLOWED_LOGGED_MACRO_PARAMS } from './constants';
+import { DescriptionSummary } from './DescriptionSummary';
 import ErrorMessage from './ErrorMessage';
 import FormContent from './FormContent';
 import { FormErrorBoundary } from './FormErrorBoundary';
@@ -213,6 +215,10 @@ class ConfigPanel extends React.Component {
     });
     // memoized to prevent rerender on new parameters
     _defineProperty(this, "renderHeader", memoizeOne(extensionManifest => {
+      // If below FG is true then Header will be rendered separately
+      if (fg('platform_editor_ai_object_sidebar_injection')) {
+        return null;
+      }
       const {
         onCancel,
         showHeader
@@ -381,7 +387,9 @@ class ConfigPanel extends React.Component {
             noValidate: true,
             onKeyDown: handleKeyDown,
             "data-testid": "extension-config-panel"
-          }), this.renderHeader(extensionManifest), /*#__PURE__*/React.createElement(ConfigFormIntlWithBoundary, {
+          }), this.renderHeader(extensionManifest), fg('platform_editor_ai_object_sidebar_injection') && /*#__PURE__*/React.createElement(DescriptionSummary, {
+            extensionManifest: extensionManifest
+          }), /*#__PURE__*/React.createElement(ConfigFormIntlWithBoundary, {
             api: api,
             canSave: false,
             errorMessage: errorMessage,

package/dist/es2019/ui/ConfigPanel/DescriptionSummary.js

@@ -0,0 +1,45 @@
+import React, { Fragment } from 'react';
+import { useIntl } from 'react-intl-next';
+import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
+import { Box, Text, xcss } from '@atlaskit/primitives';
+import { HelpLink } from './HelpLink';
+const descriptionStyles = xcss({
+  marginBottom: 'space.300'
+});
+const helpLinkStyles = xcss({
+  paddingTop: 'space.150'
+});
+export function DescriptionSummary({
+  extensionManifest
+}) {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    description,
+    documentationUrl
+  } = extensionManifest;
+  // 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);
+  return /*#__PURE__*/React.createElement(Fragment, null, (description || documentationUrl) && /*#__PURE__*/React.createElement(Box, {
+    xcss: descriptionStyles
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    testId: "config-panel-header-description"
+  }, description && /*#__PURE__*/React.createElement(Fragment, null,
+  // Ignored via go/ees005
+  // eslint-disable-next-line require-unicode-regexp
+  description.replace(/([^.])$/, '$1.'), ' '), documentationUrl && (enableHelpCTA ? /*#__PURE__*/React.createElement(Box, {
+    xcss: helpLinkStyles
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, /*#__PURE__*/React.createElement(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: formatMessage(messages.help)
+  }))) : /*#__PURE__*/React.createElement(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: formatMessage(messages.documentation)
+  })))));
+}

package/dist/es2019/ui/ConfigPanel/Header/HeaderAfterIconElement.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+import { withExtensionManifest } from '../withExtensionManifest';
+const itemBodyStyles = xcss({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  justifyContent: 'space-between',
+  margin: 'space.200',
+  flexGrow: 3
+});
+const itemTextStyles = xcss({
+  maxWidth: '100%',
+  whiteSpace: 'initial'
+});
+const summaryStyles = xcss({
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  color: 'color.text.subtlest',
+  marginTop: 'space.050',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+function HeaderAfterIconElement({
+  extensionManifest
+}) {
+  const title = extensionManifest.title;
+  const summary = extensionManifest.summary;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: itemBodyStyles
+  }, summary ? /*#__PURE__*/React.createElement(Box, {
+    xcss: itemTextStyles
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "context-panel-title",
+    "data-testid": "context-panel-title"
+  }, title), /*#__PURE__*/React.createElement(Box, {
+    xcss: summaryStyles
+  }, summary)) : /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    alignItems: "center",
+    testId: "context-panel-title"
+  }, title));
+}
+export default withExtensionManifest(HeaderAfterIconElement);

package/dist/es2019/ui/ConfigPanel/Header/HeaderIcon.js

@@ -0,0 +1,39 @@
+import React, { Suspense, lazy, useMemo } from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
+import { withExtensionManifest } from '../withExtensionManifest';
+const iconWidth = '40px';
+const itemIconStyles = xcss({
+  width: iconWidth,
+  height: iconWidth,
+  overflow: 'hidden',
+  border: `1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}`,
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+function HeaderIcon({
+  extensionManifest
+}) {
+  const icon = extensionManifest.icons['48'];
+  const title = extensionManifest.title;
+  const ResolvedIcon = useMemo(() => {
+    return /*#__PURE__*/lazy(() => icon().then(Cmp => {
+      if ('default' in Cmp) {
+        return Cmp;
+      }
+      return {
+        default: Cmp
+      };
+    }));
+  }, [icon]);
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: itemIconStyles
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(ResolvedIcon, {
+    label: title
+  })));
+}
+export default withExtensionManifest(HeaderIcon);

package/dist/es2019/ui/ConfigPanel/Header.js

@@ -14,6 +14,7 @@ import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
+import { HelpLink } from './HelpLink';
 const iconWidth = 40;
 const buttonWidth = 40;
 const margin = 16;
@@ -151,15 +152,4 @@ const Header = ({
     label: intl.formatMessage(messages.documentation)
   })))));
 };
-const HelpLink = ({
-  documentationUrl,
-  label
-}) => {
-  return jsx("a", {
-    target: "_blank",
-    rel: "noopener noreferrer",
-    href: documentationUrl,
-    "data-testid": "config-panel-header-documentation-link"
-  }, label);
-};
 export default injectIntl(Header);

package/dist/es2019/ui/ConfigPanel/HelpLink.js

@@ -0,0 +1,16 @@
+import React from 'react';
+export const HelpLink = ({
+  documentationUrl,
+  label
+}) => {
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/no-html-anchor
+    React.createElement("a", {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      href: documentationUrl,
+      "data-testid": "config-panel-header-documentation-link"
+    }, label)
+  );
+};

package/dist/es2019/ui/ConfigPanel/constants.js

@@ -4,4 +4,6 @@ export const ALLOWED_LOGGED_MACRO_PARAMS = {
   'recently-updated': ['width', 'types', 'max', 'theme', 'showProfilePic', 'hideHeading'],
   excerpt: ['hidden']
 };
-export const ALLOWED_PARAM_TYPES = ['enum', 'number', 'boolean'];
+export const ALLOWED_PARAM_TYPES = ['enum', 'number', 'boolean'];
+export const CONFIG_PANEL_WIDTH = 320;
+export const CONFIG_PANEL_ID = 'extensions-panel';

package/dist/es2019/ui/ConfigPanel/withExtensionManifest.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useStateFromPromise } from './use-state-from-promise';
+export function withExtensionManifest(WrappedComponent) {
+  return function WithExtensionManifest(props) {
+    const {
+      extensionKey,
+      extensionProvider,
+      extensionType,
+      ...restProps
+    } = props;
+    const [extensionManifest] = useStateFromPromise(() => extensionProvider.getExtension(extensionType, extensionKey), [extensionProvider, extensionType, extensionKey]);
+    return extensionManifest ?
+    /*#__PURE__*/
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/jsx-props-no-spreading
+    React.createElement(WrappedComponent, _extends({
+      extensionManifest: extensionManifest
+    }, restProps)) : null;
+  };
+}

package/dist/es2019/ui/useConfigPanelPluginHook.js

@@ -0,0 +1,201 @@
+import React, { useEffect } from 'react';
+import { configPanelMessages, getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { Box } from '@atlaskit/primitives';
+import { clearEditingContext, forceAutoSave } from '../editor-commands/commands';
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import { getSelectedExtension } from '../pm-plugins/utils';
+import ConfigPanelLoader from './ConfigPanel/ConfigPanelLoader';
+import { CONFIG_PANEL_ID, CONFIG_PANEL_WIDTH } from './ConfigPanel/constants';
+import HeaderAfterIconElement from './ConfigPanel/Header/HeaderAfterIconElement';
+import HeaderIcon from './ConfigPanel/Header/HeaderIcon';
+import { onChangeAction } from './context-panel';
+import { SaveIndicator } from './SaveIndicator/SaveIndicator';
+export function useConfigPanelPluginHook({
+  editorView,
+  api
+}) {
+  const editorState = editorView.state;
+  const {
+    extensionState
+  } = useSharedPluginState(api, ['extension']);
+  useEffect(() => {
+    const nodeWithPos = getSelectedExtension(editorState, true);
+    // Adding checks to bail out early
+    if (!nodeWithPos || !extensionState) {
+      hideConfigPanel(api);
+      return;
+    }
+    if (extensionState) {
+      const {
+        showContextPanel,
+        extensionProvider,
+        processParametersAfter
+      } = extensionState;
+      if (showContextPanel && extensionProvider && processParametersAfter) {
+        showConfigPanel({
+          api,
+          editorView,
+          extensionProvider,
+          nodeWithPos
+        });
+      } else {
+        hideConfigPanel(api);
+      }
+    }
+  }, [api, editorState, editorView, extensionState]);
+}
+export function hideConfigPanel(api) {
+  var _api$contextPanel, _api$contextPanel$act;
+  const closePanelById = api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : (_api$contextPanel$act = _api$contextPanel.actions) === null || _api$contextPanel$act === void 0 ? void 0 : _api$contextPanel$act.closePanelById;
+  if (closePanelById) {
+    closePanelById(CONFIG_PANEL_ID);
+  }
+}
+export function showConfigPanel({
+  api,
+  editorView,
+  extensionProvider,
+  nodeWithPos
+}) {
+  var _api$contextPanel2, _api$contextPanel2$ac;
+  const showContextPanel = api === null || api === void 0 ? void 0 : (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : (_api$contextPanel2$ac = _api$contextPanel2.actions) === null || _api$contextPanel2$ac === void 0 ? void 0 : _api$contextPanel2$ac.showPanel;
+  if (showContextPanel) {
+    const nodeAttrs = nodeWithPos === null || nodeWithPos === void 0 ? void 0 : nodeWithPos.node.attrs;
+    const extensionType = nodeAttrs === null || nodeAttrs === void 0 ? void 0 : nodeAttrs.extensionType;
+    const extensionKey = nodeAttrs === null || nodeAttrs === void 0 ? void 0 : nodeAttrs.extensionKey;
+
+    /**
+     * Loading extension manifest fails when using
+     * 	extensionKey directly from nodeAttrs.
+     * Always get extensionKey from getExtensionKeyAndNodeKey to load
+     * 	extension manifest successfully.
+     */
+    const [extKey, _] = getExtensionKeyAndNodeKey(extensionKey, extensionType);
+    const HeadeIconWrapper = () => {
+      return /*#__PURE__*/React.createElement(HeaderIcon, {
+        extensionProvider: extensionProvider,
+        extensionKey: extKey,
+        extensionType: extensionType
+      });
+    };
+    const HeaderAfterIconElementWrapper = () => {
+      return /*#__PURE__*/React.createElement(HeaderAfterIconElement, {
+        extensionProvider: extensionProvider,
+        extensionKey: extKey,
+        extensionType: extensionType
+      });
+    };
+    const BodyComponent = getContextPanelBodyComponent({
+      api,
+      editorView,
+      extensionProvider,
+      nodeWithPos
+    });
+    showContextPanel({
+      id: CONFIG_PANEL_ID,
+      headerComponentElements: {
+        HeaderIcon: HeadeIconWrapper,
+        headerLabel: configPanelMessages.objectSidebarPanelHeaderLabel,
+        HeaderAfterIconElement: HeaderAfterIconElementWrapper
+      },
+      BodyComponent,
+      closeOptions: {
+        canClosePanel: () => {
+          const extensionState = getPluginState(editorView.state);
+          /**
+           * 	If context panel is open, then first update extension plugin state.
+           * 	Updating extension plugin state will trigger useEffect in useConfigPanelPluginHook,
+           * 		which will call hideConfigPanel.
+           */
+          if (extensionState !== null && extensionState !== void 0 && extensionState.showContextPanel) {
+            startClosingConfigPanel({
+              api,
+              editorView
+            });
+            return false;
+          }
+
+          // Return true if extension plugin state has been updated and hideConfigPanel has been called.
+          return true;
+        }
+      }
+    }, 'push', CONFIG_PANEL_WIDTH);
+  }
+}
+export async function startClosingConfigPanel({
+  api,
+  editorView
+}) {
+  var _api$contextPanel3;
+  const applyChange = api === null || api === void 0 ? void 0 : (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange;
+  // Even if the save failed, we should proceed with closing the panel
+  clearEditingContext(applyChange)(editorView.state, editorView.dispatch);
+  try {
+    await new Promise((resolve, reject) => {
+      forceAutoSave(applyChange)(resolve, reject)(editorView.state, editorView.dispatch);
+    });
+  } catch (e) {
+    // Even if the save failed, we should proceed with closing the panel
+    // eslint-disable-next-line no-console
+    console.error(`Autosave failed with error`, e);
+  }
+}
+export const getContextPanelBodyComponent = ({
+  api,
+  editorView,
+  extensionProvider,
+  nodeWithPos
+}) => {
+  var _api$featureFlags;
+  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  const editorState = editorView.state;
+  const extensionState = getPluginState(editorState);
+  const {
+    autoSaveResolve,
+    autoSaveReject,
+    processParametersBefore
+  } = extensionState;
+  const {
+    extensionType,
+    extensionKey,
+    parameters
+  } = nodeWithPos.node.attrs;
+  const [extKey, nodeKey] = getExtensionKeyAndNodeKey(extensionKey, extensionType);
+  const configParams = processParametersBefore ? processParametersBefore(parameters || {}) : parameters;
+  return () => /*#__PURE__*/React.createElement(Box, {
+    padding: "space.200"
+  }, /*#__PURE__*/React.createElement(SaveIndicator, {
+    duration: 5000,
+    visible: true
+  }, ({
+    onSaveStarted,
+    onSaveEnded
+  }) => {
+    return /*#__PURE__*/React.createElement(ConfigPanelLoader, {
+      api: api,
+      showHeader: true,
+      closeOnEsc: true,
+      extensionType: extensionType,
+      extensionKey: extKey,
+      nodeKey: nodeKey,
+      extensionParameters: parameters,
+      parameters: configParams,
+      extensionProvider: extensionProvider,
+      autoSaveTrigger: autoSaveResolve,
+      autoSaveReject: autoSaveReject,
+      onChange: async updatedParameters => {
+        await onChangeAction(editorView, updatedParameters, parameters, nodeWithPos, onSaveStarted);
+        onSaveEnded();
+        if (autoSaveResolve) {
+          autoSaveResolve();
+        }
+      },
+      onCancel: () => startClosingConfigPanel({
+        api,
+        editorView
+      }),
+      featureFlags: featureFlags
+    });
+  }));
+};

package/dist/esm/extensionPlugin.js

@@ -12,7 +12,9 @@ import { pluginKey } from './pm-plugins/plugin-key';
 import { bodiedExtensionSpecWithFixedToDOM } from './pm-plugins/toDOM-fixes/bodiedExtension';
 import { getToolbarConfig } from './pm-plugins/toolbar';
 import { createPlugin as createUniqueIdPlugin } from './pm-plugins/unique-id';
+// Remove below line when cleaning up platform_editor_ai_object_sidebar_injection feature flag
 import { getContextPanel } from './ui/context-panel';
+import { useConfigPanelPluginHook } from './ui/useConfigPanelPluginHook';
 export var extensionPlugin = function extensionPlugin(_ref) {
   var _api$featureFlags, _api$analytics2, _api$analytics3, _api$contextPanel3, _api$decorations, _api$contextPanel4, _api$analytics4;
   var _ref$config = _ref.config,
@@ -51,7 +53,9 @@ export var extensionPlugin = function extensionPlugin(_ref) {
       }
       var pluginState = pluginKey.getState(state);
       return {
-        showContextPanel: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showContextPanel
+        showContextPanel: pluginState === null || pluginState === void 0 ? void 0 : pluginState.showContextPanel,
+        extensionProvider: pluginState === null || pluginState === void 0 ? void 0 : pluginState.extensionProvider,
+        processParametersAfter: pluginState === null || pluginState === void 0 ? void 0 : pluginState.processParametersAfter
       };
     },
     pmPlugins: function pmPlugins() {
@@ -169,10 +173,17 @@ export var extensionPlugin = function extensionPlugin(_ref) {
         applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange,
         editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics4 = _api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions
       }),
-      contextPanel: getContextPanel(function () {
+      contextPanel: !fg('platform_editor_ai_object_sidebar_injection') ? getContextPanel(function () {
         var _editorViewRef$curren;
         return (_editorViewRef$curren = editorViewRef.current) !== null && _editorViewRef$curren !== void 0 ? _editorViewRef$curren : undefined;
-      })(_api, featureFlags)
-    }
+      })(_api, featureFlags) : undefined
+    },
+    usePluginHook: fg('platform_editor_ai_object_sidebar_injection') ? function (_ref6) {
+      var editorView = _ref6.editorView;
+      useConfigPanelPluginHook({
+        editorView: editorView,
+        api: _api
+      });
+    } : undefined
   };
 };

package/dist/esm/ui/ConfigPanel/ConfigPanel.js

@@ -23,7 +23,9 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaski
 import { isTabGroup, configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import Form, { FormFooter } from '@atlaskit/form';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ALLOWED_LOGGED_MACRO_PARAMS } from './constants';
+import { DescriptionSummary } from './DescriptionSummary';
 import ErrorMessage from './ErrorMessage';
 import FormContent from './FormContent';
 import { FormErrorBoundary } from './FormErrorBoundary';
@@ -260,6 +262,10 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
     }());
     // memoized to prevent rerender on new parameters
     _defineProperty(_this, "renderHeader", memoizeOne(function (extensionManifest) {
+      // If below FG is true then Header will be rendered separately
+      if (fg('platform_editor_ai_object_sidebar_injection')) {
+        return null;
+      }
       var _this$props2 = _this.props,
         onCancel = _this$props2.onCancel,
         showHeader = _this$props2.showHeader;
@@ -426,7 +432,9 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
               noValidate: true,
               onKeyDown: handleKeyDown,
               "data-testid": "extension-config-panel"
-            }), _this2.renderHeader(extensionManifest), /*#__PURE__*/React.createElement(ConfigFormIntlWithBoundary, {
+            }), _this2.renderHeader(extensionManifest), fg('platform_editor_ai_object_sidebar_injection') && /*#__PURE__*/React.createElement(DescriptionSummary, {
+              extensionManifest: extensionManifest
+            }), /*#__PURE__*/React.createElement(ConfigFormIntlWithBoundary, {
               api: api,
               canSave: false,
               errorMessage: errorMessage,

package/dist/esm/ui/ConfigPanel/DescriptionSummary.js

@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react';
+import { useIntl } from 'react-intl-next';
+import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
+import { Box, Text, xcss } from '@atlaskit/primitives';
+import { HelpLink } from './HelpLink';
+var descriptionStyles = xcss({
+  marginBottom: 'space.300'
+});
+var helpLinkStyles = xcss({
+  paddingTop: 'space.150'
+});
+export function DescriptionSummary(_ref) {
+  var extensionManifest = _ref.extensionManifest;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var description = extensionManifest.description,
+    documentationUrl = extensionManifest.documentationUrl;
+  // 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
+  var modernizedMacrosList = ['children', 'recently-updated', 'excerpt'];
+  var enableHelpCTA = modernizedMacrosList.includes(extensionManifest.key);
+  return /*#__PURE__*/React.createElement(Fragment, null, (description || documentationUrl) && /*#__PURE__*/React.createElement(Box, {
+    xcss: descriptionStyles
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    testId: "config-panel-header-description"
+  }, description && /*#__PURE__*/React.createElement(Fragment, null,
+  // Ignored via go/ees005
+  // eslint-disable-next-line require-unicode-regexp
+  description.replace(/([^.])$/, '$1.'), ' '), documentationUrl && (enableHelpCTA ? /*#__PURE__*/React.createElement(Box, {
+    xcss: helpLinkStyles
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, /*#__PURE__*/React.createElement(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: formatMessage(messages.help)
+  }))) : /*#__PURE__*/React.createElement(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: formatMessage(messages.documentation)
+  })))));
+}

package/dist/esm/ui/ConfigPanel/Header/HeaderAfterIconElement.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+import { withExtensionManifest } from '../withExtensionManifest';
+var itemBodyStyles = xcss({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  justifyContent: 'space-between',
+  margin: 'space.200',
+  flexGrow: 3
+});
+var itemTextStyles = xcss({
+  maxWidth: '100%',
+  whiteSpace: 'initial'
+});
+var summaryStyles = xcss({
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  color: 'color.text.subtlest',
+  marginTop: 'space.050',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+function HeaderAfterIconElement(_ref) {
+  var extensionManifest = _ref.extensionManifest;
+  var title = extensionManifest.title;
+  var summary = extensionManifest.summary;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: itemBodyStyles
+  }, summary ? /*#__PURE__*/React.createElement(Box, {
+    xcss: itemTextStyles
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "context-panel-title",
+    "data-testid": "context-panel-title"
+  }, title), /*#__PURE__*/React.createElement(Box, {
+    xcss: summaryStyles
+  }, summary)) : /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    alignItems: "center",
+    testId: "context-panel-title"
+  }, title));
+}
+export default withExtensionManifest(HeaderAfterIconElement);

package/dist/esm/ui/ConfigPanel/Header/HeaderIcon.js

@@ -0,0 +1,40 @@
+import React, { Suspense, lazy, useMemo } from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
+import { withExtensionManifest } from '../withExtensionManifest';
+var iconWidth = '40px';
+var itemIconStyles = xcss({
+  width: iconWidth,
+  height: iconWidth,
+  overflow: 'hidden',
+  border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+function HeaderIcon(_ref) {
+  var extensionManifest = _ref.extensionManifest;
+  var icon = extensionManifest.icons['48'];
+  var title = extensionManifest.title;
+  var ResolvedIcon = useMemo(function () {
+    return /*#__PURE__*/lazy(function () {
+      return icon().then(function (Cmp) {
+        if ('default' in Cmp) {
+          return Cmp;
+        }
+        return {
+          default: Cmp
+        };
+      });
+    });
+  }, [icon]);
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: itemIconStyles
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(ResolvedIcon, {
+    label: title
+  })));
+}
+export default withExtensionManifest(HeaderIcon);

package/dist/esm/ui/ConfigPanel/Header.js

@@ -14,6 +14,7 @@ import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
+import { HelpLink } from './HelpLink';
 var iconWidth = 40;
 var buttonWidth = 40;
 var margin = 16;
@@ -152,14 +153,4 @@ var Header = function Header(_ref) {
     label: intl.formatMessage(messages.documentation)
   })))));
 };
-var HelpLink = function HelpLink(_ref2) {
-  var documentationUrl = _ref2.documentationUrl,
-    label = _ref2.label;
-  return jsx("a", {
-    target: "_blank",
-    rel: "noopener noreferrer",
-    href: documentationUrl,
-    "data-testid": "config-panel-header-documentation-link"
-  }, label);
-};
 export default injectIntl(Header);