@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

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

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Fragment } from 'react';
+import { Field } from '@atlaskit/form';
+import TextArea from '@atlaskit/textarea';
+import TextField from '@atlaskit/textfield';
+import FieldMessages from '../FieldMessages';
+import { validate } from '../utils';
+export default function String({
+  name,
+  field,
+  autoFocus,
+  onFieldChange,
+  placeholder
+}) {
+  const {
+    label,
+    description,
+    defaultValue,
+    isRequired
+  } = field;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    label: label,
+    defaultValue: defaultValue || '',
+    isRequired: isRequired,
+    validate: value => validate(field, value || ''),
+    testId: `config-panel-string-${name}`
+  }, ({
+    fieldProps,
+    error,
+    meta
+  }) => {
+    if (field.style === 'multiline') {
+      const {
+        onChange,
+        ...restFieldProps
+      } = fieldProps;
+      const {
+        options
+      } = field;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TextArea, _extends({}, restFieldProps, options, {
+        onChange: e => onChange(e.currentTarget.value),
+        onBlur: () => {
+          fieldProps.onBlur();
+          onFieldChange(name, meta.dirty);
+        },
+        placeholder: placeholder,
+        "data-testid": `config-panel-textarea-${name}`
+      })), /*#__PURE__*/React.createElement(FieldMessages, {
+        error: error,
+        description: description
+      }));
+    }
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+      type: "text",
+      autoFocus: autoFocus,
+      onBlur: () => {
+        fieldProps.onBlur();
+        onFieldChange(name, meta.dirty);
+      },
+      placeholder: placeholder
+    })), /*#__PURE__*/React.createElement(FieldMessages, {
+      error: error,
+      description: description
+    }));
+  });
+}

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

@@ -0,0 +1,57 @@
+/** @jsx jsx */
+import React, { useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
+const tabWrapperStyles = css({
+  // increase specificity to make sure the tab style is overridden
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  "&&& [role='tabpanel'][tabindex]": {
+    padding: 0
+  },
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  "&&& [role='tablist']::before": {
+    left: 0,
+    right: 0
+  }
+});
+const panelWrapperStyles = css({
+  flexGrow: 1,
+  maxWidth: '100%'
+});
+const TabGroupImpl = props => {
+  const {
+    field,
+    renderPanel
+  } = props;
+  const {
+    fields
+  } = field;
+  const [activeTab, setActiveTab] = useState(() => {
+    const activeTabName = field.defaultTab || fields[0].name;
+    const index = fields.findIndex(f => f.name === activeTabName);
+    return Math.max(index, 0);
+  });
+  const onChange = React.useCallback(index => {
+    setActiveTab(index);
+  }, [setActiveTab]);
+  return jsx("div", {
+    css: tabWrapperStyles
+  }, jsx(Tabs, {
+    id: `configPanelTabs-${field.name}`,
+    onChange: onChange,
+    selected: activeTab
+  }, jsx(TabList, null, fields.map(({
+    name,
+    label
+  }) => jsx(Tab, {
+    key: `tab-${name}`
+  }, label))), fields.map(field => jsx(TabPanel, {
+    key: `panel-${field.name}`
+  }, jsx("div", {
+    css: panelWrapperStyles
+  }, renderPanel(field))))));
+};
+TabGroupImpl.displayName = 'TabGroup';
+const TabGroup = injectIntl(TabGroupImpl);
+export default TabGroup;

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

@@ -0,0 +1,11 @@
+import React, { useEffect } from 'react';
+import { HelperMessage } from '@atlaskit/form';
+export default function ({
+  errorMessage
+}) {
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.error(errorMessage);
+  }, [errorMessage]);
+  return /*#__PURE__*/React.createElement(HelperMessage, null, errorMessage);
+}

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

@@ -0,0 +1,194 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect, useState } from 'react';
+import { getUserFieldContextProvider } from '@atlaskit/editor-common/extensions';
+import { Field } from '@atlaskit/form';
+import SmartUserPicker, { hydrateDefaultValues } from '@atlaskit/smart-user-picker';
+import FieldMessages from '../FieldMessages';
+import { validate } from '../utils';
+import UnhandledType from './UnhandledType';
+function makeCompat(defaultValue) {
+  if (!defaultValue) {
+    return null;
+  }
+  if (Array.isArray(defaultValue)) {
+    return defaultValue.map(id => ({
+      type: 'user',
+      id
+    }));
+  }
+  return {
+    type: 'user',
+    id: defaultValue
+  };
+}
+function makeSafe(value) {
+  if (!value) {
+    return null;
+  }
+  if (Array.isArray(value)) {
+    const ids = [];
+    for (const {
+      id
+    } of value) {
+      ids.push(id);
+    }
+    return ids;
+  }
+  return value.id;
+}
+const isOptionData = value => {
+  if (!value) {
+    return false;
+  }
+  return (Array.isArray(value) ? value : [value]).every(item => 'name' in item);
+};
+function SafeSmartUserPicker({
+  context,
+  field,
+  formFieldProps,
+  autoFocus,
+  onBlur,
+  onChange
+}) {
+  const [unsafeValue, setUnsafeValue] = useState(null);
+  const {
+    siteId,
+    principalId,
+    fieldId,
+    productKey,
+    containerId,
+    objectId,
+    childObjectId,
+    productAttributes,
+    includeUsers = true
+  } = context;
+  const {
+    value: safeValue,
+    ...formFieldPropsRest
+  } = formFieldProps;
+  const {
+    isMultiple,
+    placeholder
+  } = field;
+  function onChangeUnsafe(newValue) {
+    setUnsafeValue(newValue);
+    onChange(makeSafe(newValue));
+  }
+  useEffect(() => {
+    let cancel = false;
+    async function hydrate() {
+      const hydrated = await hydrateDefaultValues(undefined,
+      // no need to override baseUrl
+      makeCompat(safeValue), productKey);
+      if (cancel || !isOptionData(hydrated)) {
+        return;
+      }
+      setUnsafeValue(hydrated);
+    }
+    hydrate();
+    return () => {
+      cancel = true;
+    };
+  }, [safeValue, productKey]);
+  return /*#__PURE__*/React.createElement(SmartUserPicker, _extends({}, formFieldPropsRest, {
+    onChange: onChangeUnsafe,
+    autoFocus: autoFocus,
+    onBlur: onBlur,
+    maxOptions: 10,
+    isClearable: true,
+    isMulti: isMultiple,
+    includeUsers: includeUsers,
+    includeGroups: false,
+    includeTeams: false,
+    fieldId: fieldId,
+    principalId: principalId,
+    siteId: siteId,
+    productKey: productKey,
+    objectId: objectId,
+    containerId: containerId,
+    childObjectId: childObjectId,
+    placeholder: placeholder,
+    productAttributes: productAttributes,
+    value: unsafeValue,
+    width: "100%"
+  }));
+}
+export default function UserSelect({
+  name,
+  autoFocus,
+  extensionManifest,
+  field,
+  onFieldChange
+}) {
+  const [context, setContext] = useState({});
+  const {
+    siteId,
+    principalId,
+    fieldId,
+    productKey
+  } = context;
+  const {
+    label,
+    defaultValue,
+    description,
+    isRequired,
+    options
+  } = field;
+  const {
+    type
+  } = options.provider;
+  useEffect(() => {
+    let cancel = false;
+    async function fetchContext() {
+      try {
+        const context = await (await getUserFieldContextProvider(extensionManifest, field.options.provider))();
+        if (cancel) {
+          return;
+        }
+        setContext(context);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e);
+      }
+    }
+    fetchContext();
+    return () => {
+      cancel = true;
+    };
+  }, [extensionManifest, field.options.provider]);
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    defaultValue: defaultValue,
+    validate: value => validate(field, value),
+    testId: `config-panel-user-select-${name}`
+  }, ({
+    fieldProps,
+    error
+  }) => {
+    // if any of these don't exists, the provider is missing
+    if (!siteId || !principalId || !fieldId || !productKey) {
+      return /*#__PURE__*/React.createElement(UnhandledType, {
+        key: name,
+        field: field,
+        errorMessage: `Field "${name}" can't be renderered. Missing provider for "${type}".`
+      });
+    }
+    function onChange(newValue) {
+      fieldProps.onChange(newValue);
+      onFieldChange(name, true);
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SafeSmartUserPicker, {
+      context: context,
+      field: field,
+      formFieldProps: fieldProps,
+      autoFocus: autoFocus || false,
+      onBlur: () => onFieldChange(name, true),
+      onChange: onChange
+    }), /*#__PURE__*/React.createElement(FieldMessages, {
+      error: error,
+      description: description
+    }));
+  });
+}

package/dist/es2019/ui/ConfigPanel/Fields/common/RequiredIndicator.js

@@ -0,0 +1,5 @@
+import { css } from '@emotion/react';
+import { R500 } from '@atlaskit/theme/colors';
+export const requiredIndicator = css`
+  color: ${`var(--ds-text-danger, ${R500})`};
+`;

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

@@ -0,0 +1,225 @@
+import React from 'react';
+import { isFieldset } from '@atlaskit/editor-common/extensions';
+import Boolean from './Fields/Boolean';
+import ColorPicker from './Fields/ColorPicker';
+import CustomSelect from './Fields/CustomSelect';
+import Date from './Fields/Date';
+import DateRange from './Fields/DateRange';
+import Enum from './Fields/Enum';
+import Expand from './Fields/Expand';
+import Fieldset from './Fields/Fieldset';
+import Number from './Fields/Number';
+import String from './Fields/String';
+import TabGroup from './Fields/TabGroup';
+import UnhandledType from './Fields/UnhandledType';
+import UserSelect from './Fields/UserSelect';
+import { FormErrorBoundary } from './FormErrorBoundary';
+import RemovableField from './NestedForms/RemovableField';
+import { getSafeParentedName } from './utils';
+export function FieldComponent({
+  field,
+  parameters,
+  parentName,
+  extensionManifest,
+  firstVisibleFieldName,
+  onFieldChange,
+  featureFlags
+}) {
+  var _parameters$errors;
+  const {
+    name,
+    type
+  } = field;
+  const autoFocus = name === firstVisibleFieldName;
+  const defaultValue = parameters[name];
+  const error = (_parameters$errors = parameters.errors) === null || _parameters$errors === void 0 ? void 0 : _parameters$errors[name];
+  const parentedName = getSafeParentedName(name, parentName);
+  const fieldDefaultValue = field.type === 'enum' ? field.defaultValue : undefined;
+  if (name in parameters && !isFieldset(field)) {
+    field = {
+      ...field,
+      ...(defaultValue != null ? {
+        defaultValue
+      } : {})
+    };
+  }
+  switch (field.type) {
+    case 'string':
+      return /*#__PURE__*/React.createElement(String, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        placeholder: field.placeholder
+      });
+    case 'number':
+      return /*#__PURE__*/React.createElement(Number, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        placeholder: field.placeholder
+      });
+    case 'boolean':
+      return /*#__PURE__*/React.createElement(Boolean, {
+        name: parentedName,
+        field: field,
+        onFieldChange: onFieldChange
+      });
+    case 'color':
+      return /*#__PURE__*/React.createElement(ColorPicker, {
+        name: parentedName,
+        field: field,
+        onFieldChange: onFieldChange,
+        featureFlags: featureFlags
+      });
+    case 'date':
+      return /*#__PURE__*/React.createElement(Date, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        placeholder: field.placeholder
+      });
+    case 'date-range':
+      return /*#__PURE__*/React.createElement(DateRange, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange
+      });
+    case 'enum':
+      return /*#__PURE__*/React.createElement(Enum, {
+        name: parentedName,
+        field: field,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        fieldDefaultValue: fieldDefaultValue
+      });
+    case 'custom':
+      return /*#__PURE__*/React.createElement(CustomSelect, {
+        name: parentedName,
+        field: field,
+        extensionManifest: extensionManifest,
+        placeholder: field.placeholder,
+        autoFocus: autoFocus,
+        onFieldChange: onFieldChange,
+        parameters: parameters
+      });
+    case 'fieldset':
+      return /*#__PURE__*/React.createElement(Fieldset, {
+        name: parentedName,
+        field: field,
+        firstVisibleFieldName: firstVisibleFieldName,
+        onFieldChange: onFieldChange,
+        extensionManifest: extensionManifest,
+        parameters: defaultValue || {},
+        error: error,
+        formComponent: FormContent
+      });
+    case 'user':
+      return /*#__PURE__*/React.createElement(UserSelect, {
+        name: parentedName,
+        field: field,
+        autoFocus: name === firstVisibleFieldName,
+        extensionManifest: extensionManifest,
+        onFieldChange: onFieldChange
+      });
+    case 'expand':
+      {
+        // if expand is under a tab with hasGroupedValues=true
+        const resolvedParentName = [parentName, field.hasGroupedValues ? field.name : undefined].filter(val => !!val).join('.') || undefined;
+        const resolvedParameters = !field.hasGroupedValues ? parameters : parameters[field.name] || {};
+        return /*#__PURE__*/React.createElement(Expand, {
+          field: field,
+          isExpanded: field.isExpanded
+        }, /*#__PURE__*/React.createElement(FormContent, {
+          parentName: resolvedParentName,
+          fields: field.fields,
+          parameters: resolvedParameters,
+          onFieldChange: onFieldChange,
+          extensionManifest: extensionManifest,
+          featureFlags: featureFlags
+        }));
+      }
+    case 'tab-group':
+      {
+        const tabGroupField = field;
+        const tabGroupParams = tabGroupField.hasGroupedValues ? parameters[tabGroupField.name] || {} : parameters;
+        const renderPanel = tabField => {
+          const parentName = [tabGroupField.hasGroupedValues ? tabGroupField.name : undefined, tabField.hasGroupedValues ? tabField.name : undefined].filter(val => !!val).join('.') || undefined;
+          const tabParameters = tabField.hasGroupedValues ? tabGroupParams[tabField.name] || {} : tabGroupParams;
+          return /*#__PURE__*/React.createElement(FormContent, {
+            parentName: parentName,
+            fields: tabField.fields,
+            parameters: tabParameters,
+            onFieldChange: onFieldChange,
+            extensionManifest: extensionManifest,
+            featureFlags: featureFlags
+          });
+        };
+        return /*#__PURE__*/React.createElement(TabGroup, {
+          field: tabGroupField,
+          renderPanel: renderPanel
+        });
+      }
+    default:
+      return /*#__PURE__*/React.createElement(UnhandledType, {
+        field: field,
+        errorMessage: `Field "${name}" of type "${type}" not supported`
+      });
+  }
+}
+function Hidden({
+  children
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'none'
+    }
+  }, children);
+}
+export default function FormContent({
+  fields,
+  parentName,
+  parameters,
+  extensionManifest,
+  canRemoveFields,
+  onClickRemove,
+  onFieldChange,
+  firstVisibleFieldName,
+  contextIdentifierProvider,
+  featureFlags
+}) {
+  return /*#__PURE__*/React.createElement(FormErrorBoundary, {
+    contextIdentifierProvider: contextIdentifierProvider,
+    extensionKey: extensionManifest.key,
+    fields: fields
+  }, fields.map(field => {
+    let fieldElement = /*#__PURE__*/React.createElement(FieldComponent, {
+      field: field,
+      parameters: parameters || {},
+      parentName: parentName,
+      extensionManifest: extensionManifest,
+      firstVisibleFieldName: firstVisibleFieldName,
+      onFieldChange: onFieldChange,
+      featureFlags: featureFlags
+    });
+
+    // only to be supported by String fields at this time
+    if ('isHidden' in field && field.isHidden) {
+      fieldElement = /*#__PURE__*/React.createElement(Hidden, null, fieldElement);
+    }
+    const {
+      name,
+      type
+    } = field;
+    return /*#__PURE__*/React.createElement(RemovableField, {
+      key: name,
+      name: name,
+      canRemoveField: canRemoveFields && !field.isRequired,
+      onClickRemove: onClickRemove,
+      className: `field-wrapper-${type}`
+    }, fieldElement);
+  }));
+}

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

@@ -0,0 +1,100 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ACTION, ACTION_SUBJECT, editorAnalyticsChannel, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import SectionMessage from '@atlaskit/section-message';
+import { messages } from './messages';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+class FormErrorBoundaryInner extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      error: undefined
+    });
+    _defineProperty(this, "getProductName", async () => {
+      const {
+        contextIdentifierProvider
+      } = this.props;
+      if (contextIdentifierProvider) {
+        const context = await contextIdentifierProvider;
+        if (context.product) {
+          return context.product;
+        }
+      }
+      return 'atlaskit';
+    });
+    _defineProperty(this, "fireAnalytics", analyticsErrorPayload => {
+      const {
+        createAnalyticsEvent,
+        extensionKey,
+        fields
+      } = this.props;
+      this.getProductName().then(product => {
+        var _window, _window$navigator;
+        if (!createAnalyticsEvent) {
+          // eslint-disable-next-line no-console
+          console.error('ConfigPanel FormErrorBoundary: Missing `createAnalyticsEvent`', {
+            channel: editorAnalyticsChannel,
+            product,
+            error: analyticsErrorPayload
+          });
+          return;
+        }
+        const {
+          error,
+          errorInfo,
+          errorStack
+        } = analyticsErrorPayload;
+        const payload = {
+          action: ACTION.ERRORED,
+          actionSubject: ACTION_SUBJECT.CONFIG_PANEL,
+          eventType: EVENT_TYPE.UI,
+          attributes: {
+            product,
+            browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
+            extensionKey,
+            fields: JSON.stringify(fields),
+            error,
+            errorInfo,
+            errorStack
+          }
+        };
+        createAnalyticsEvent(payload).fire(editorAnalyticsChannel);
+      }).catch(e => {
+        // eslint-disable-next-line no-console
+        console.error('Failed to resolve product name from contextIdentifierProvider.', e);
+      });
+    });
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({
+      error
+    }, () => {
+      // Log the error
+      this.fireAnalytics({
+        error: error.toString(),
+        errorInfo,
+        errorStack: error.stack
+      });
+    });
+  }
+  render() {
+    const {
+      intl
+    } = this.props;
+    const {
+      error
+    } = this.state;
+    if (!error) {
+      return this.props.children;
+    }
+    return /*#__PURE__*/React.createElement(SectionMessage, {
+      title: intl.formatMessage(messages.errorBoundaryTitle),
+      appearance: "error"
+    }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, error.message)), /*#__PURE__*/React.createElement("p", null, intl.formatMessage(messages.errorBoundaryNote)));
+  }
+}
+export const FormErrorBoundaryImpl = injectIntl(FormErrorBoundaryInner);
+export const FormErrorBoundary = withAnalyticsContext()(withAnalyticsEvents()(FormErrorBoundaryImpl));
+FormErrorBoundary.displayName = 'FormErrorBoundary';