@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

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

@@ -0,0 +1,140 @@
+/** @jsx jsx */
+import { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import Loadable from 'react-loadable';
+import Button from '@atlaskit/button/custom-theme-button';
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { N200 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { messages } from './messages';
+const iconWidth = 40;
+const buttonWidth = 40;
+const margin = 16;
+const gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
+const itemStyles = css({
+  display: 'flex',
+  marginBottom: "var(--ds-space-300, 24px)"
+});
+const itemIconStyles = css({
+  width: iconWidth,
+  height: iconWidth,
+  overflow: 'hidden',
+  border: `1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}`,
+  borderRadius: `${borderRadius()}px`,
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  div: {
+    width: iconWidth,
+    height: iconWidth
+  }
+});
+const itemBodyStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  justifyContent: 'space-between',
+  lineHeight: 1.4,
+  margin: `0 ${"var(--ds-space-200, 16px)"}`,
+  flexGrow: 3,
+  maxWidth: `calc(100% - ${gapSizeForEllipsis}px)`
+});
+const centeredItemTitleStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center'
+});
+const itemTextStyles = css({
+  maxWidth: '100%',
+  whiteSpace: 'initial',
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  itemSummary: {
+    fontSize: relativeFontSizeToBase16(11.67),
+    color: `var(--ds-text-subtlest, ${N200})`,
+    marginTop: "var(--ds-space-050, 4px)",
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }
+});
+const descriptionStyles = css({
+  marginBottom: "var(--ds-space-300, 24px)"
+});
+const helpLinkStyles = css({
+  paddingTop: "var(--ds-space-150, 12px)"
+});
+const closeButtonWrapperStyles = css({
+  width: buttonWidth,
+  textAlign: 'right'
+});
+const Header = ({
+  icon,
+  title,
+  description,
+  summary,
+  documentationUrl,
+  enableHelpCTA,
+  onClose,
+  intl
+}) => {
+  const ResolvedIcon = Loadable({
+    loader: icon,
+    loading: () => null
+  });
+  return jsx(Fragment, null, jsx("div", {
+    css: itemStyles
+  }, jsx("div", {
+    css: itemIconStyles
+  }, jsx(ResolvedIcon, {
+    label: title
+  })), jsx("div", {
+    css: itemBodyStyles
+  }, summary ? jsx("div", {
+    css: itemTextStyles
+  }, jsx("div", {
+    className: "item-title",
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
+  }, title), jsx("div", {
+    className: "item-summary"
+  }, summary)) : jsx("div", {
+    css: centeredItemTitleStyles,
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
+  }, title)), jsx("div", {
+    css: closeButtonWrapperStyles
+  }, jsx(Button, {
+    appearance: "subtle",
+    iconBefore: jsx(CrossIcon, {
+      label: intl.formatMessage(messages.close)
+    }),
+    onClick: onClose
+  }))), (description || documentationUrl) && jsx("p", {
+    css: descriptionStyles,
+    "data-testid": "config-panel-header-description"
+  }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? jsx("p", {
+    css: helpLinkStyles
+  }, jsx(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: intl.formatMessage(messages.help)
+  })) : jsx(HelpLink, {
+    documentationUrl: documentationUrl,
+    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/LoadingState.js

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+const spinnerWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-800, 64px)"
+});
+const LoadingState = () => jsx("div", {
+  css: spinnerWrapperStyles,
+  "data-testid": "ConfigPanelLoading"
+}, jsx(Spinner, {
+  size: "small"
+}));
+export default LoadingState;

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

@@ -0,0 +1,52 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import { N80, R300 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
+import { messages } from '../messages';
+const removableFieldWrapperStyles = css({
+  position: 'relative',
+  marginBottom: 0
+});
+const wrapperWithMarginBottomStyles = css({
+  marginBottom: "var(--ds-space-200, 16px)"
+});
+const removeButtonWrapperStyles = css({
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  cursor: 'pointer',
+  color: `var(--ds-icon-subtle, ${N80})`,
+  '&:hover': {
+    color: `var(--ds-icon-danger, ${R300})`
+  }
+});
+const RemovableField = ({
+  name,
+  canRemoveField,
+  onClickRemove,
+  children,
+  intl,
+  className
+}) => {
+  var _children$props$field;
+  const onClickCallback = React.useCallback(() => onClickRemove && onClickRemove(name), [name, onClickRemove]);
+  const hasMarginBottom = ((_children$props$field = children.props.field) === null || _children$props$field === void 0 ? void 0 : _children$props$field.type) !== 'expand';
+  return jsx("div", {
+    css: [removableFieldWrapperStyles, hasMarginBottom && wrapperWithMarginBottomStyles],
+    className: className
+  }, children, canRemoveField && jsx("div", {
+    css: removeButtonWrapperStyles,
+    "data-testid": `remove-field-${name}`,
+    onClick: onClickCallback
+  }, jsx(Tooltip, {
+    content: intl.formatMessage(messages.removeField),
+    position: "left"
+  }, jsx(CrossCircleIcon, {
+    size: "small",
+    label: intl.formatMessage(messages.removeField)
+  }))));
+};
+export default injectIntl(RemovableField);

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

@@ -0,0 +1,7 @@
+// Allowlist of { macroKey: parameterName[] } for analytics logging
+export const ALLOWED_LOGGED_MACRO_PARAMS = {
+  children: ['all', 'first', 'depth', 'style', 'excerptType', 'sort', 'reverse'],
+  'recently-updated': ['width', 'types', 'max', 'theme', 'showProfilePic', 'hideHeading'],
+  excerpt: ['hidden']
+};
+export const ALLOWED_PARAM_TYPES = ['enum', 'number', 'boolean'];

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

@@ -0,0 +1,2 @@
+import ConfigPanelLoader from './ConfigPanelLoader';
+export default ConfigPanelLoader;

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

@@ -0,0 +1,93 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  submit: {
+    id: 'fabric.editor.configPanel.submit',
+    defaultMessage: 'Submit',
+    description: 'Submit button label'
+  },
+  cancel: {
+    id: 'fabric.editor.configPanel.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Cancel button label'
+  },
+  close: {
+    id: 'fabric.editor.configPanel.close',
+    defaultMessage: 'Close',
+    description: 'Close button label'
+  },
+  required: {
+    id: 'fabric.editor.configPanel.required',
+    defaultMessage: 'Required field',
+    description: 'Validation message for required field'
+  },
+  invalid: {
+    id: 'fabric.editor.configPanel.invalid',
+    defaultMessage: 'Invalid field',
+    description: 'Validation message when a field value is not acceptable'
+  },
+  isMultipleAndRadio: {
+    id: 'fabric.editor.configPanel.fieldTypeError.isMultipleAndRadio',
+    defaultMessage: 'Can not combine isMultiple with style: radio',
+    description: 'Configuration error'
+  },
+  addField: {
+    id: 'fabric.editor.configPanel.formType.addField',
+    defaultMessage: 'Add field',
+    description: 'Button to add a new field in nested forms'
+  },
+  removeField: {
+    id: 'fabric.editor.configPanel.formType.removeField',
+    defaultMessage: 'Remove field',
+    description: 'Button to remove a field in nested forms'
+  },
+  createOption: {
+    id: 'fabric.editor.configPanel.customSelect.createOption',
+    defaultMessage: 'Create',
+    description: 'Create a new option for a select field'
+  },
+  documentation: {
+    id: 'fabric.editor.configPanel.documentation',
+    defaultMessage: 'Documentation',
+    description: 'Label for the documentation link'
+  },
+  help: {
+    id: 'fabric.editor.configPanel.help',
+    defaultMessage: 'Need help?',
+    description: 'Label for documentation link v.2 (to replace "Documentation" text)'
+  },
+  custom: {
+    id: 'fabric.editor.configPanel.dateRange.option.custom',
+    defaultMessage: 'Custom',
+    description: 'Label for the option "Custom" in the date range UI element'
+  },
+  from: {
+    id: 'fabric.editor.configPanel.dateRange.custom.from',
+    defaultMessage: 'From',
+    description: 'Label for the initial date when the option "Custom" is selected in the date range UI element'
+  },
+  to: {
+    id: 'fabric.editor.configPanel.dateRange.custom.to',
+    defaultMessage: 'To',
+    description: 'Label for the end date when the option "Custom" is selected in the date range UI element'
+  },
+  expand: {
+    id: 'fabric.editor.configPanel.dateRange.grouping.expand',
+    defaultMessage: 'Expand',
+    description: 'Label for expanding a group of fields'
+  },
+  collapse: {
+    id: 'fabric.editor.configPanel.dateRange.grouping.collapse',
+    defaultMessage: 'Collapse',
+    description: 'Label for collapsing a group of fields'
+  },
+  errorBoundaryTitle: {
+    id: 'fabric.editor.configPanel.errorBoundary.title',
+    defaultMessage: 'Something went wrong.',
+    description: 'Title for uncaught config panel error'
+  },
+  errorBoundaryNote: {
+    id: 'fabric.editor.configPanel.errorBoundary.note',
+    defaultMessage: `We've let the team know. You can still edit and publish this page, or check the error console for more information.`,
+    description: 'Note for uncaught config panel error'
+  }
+});

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

@@ -0,0 +1,367 @@
+import { getFieldDeserializer, getFieldSerializer, isDateRange, isExpand, isFieldset, isTabField, isTabGroup } from '@atlaskit/editor-common/extensions';
+import { getNameFromDuplicateField, isDuplicateField } from './utils';
+const isOption = option => {
+  return option && typeof option === 'object' && 'label' in option && 'value' in option;
+};
+const isOptions = options => {
+  return Array.isArray(options) && options.every(isOption);
+};
+/** maps the typed-values from the Form values object */
+function extract(value, field, options) {
+  if (isOptions(value)) {
+    return value.map(item => item.value);
+  } else if (isOption(value)) {
+    return value.value;
+  } else if (isDateRange(value)) {
+    return value;
+  } else if (value !== undefined && field.type === 'number') {
+    if (value === '') {
+      return;
+    }
+    return Number(value);
+  }
+  // Workaround for https://product-fabric.atlassian.net/browse/DST-2701
+  else if (options !== null && options !== void 0 && options.useDefaultValue && value === undefined && 'defaultValue' in field) {
+    return field.defaultValue;
+  }
+  return value;
+}
+export const findDuplicateFields = fields => findDuplicateFieldsInternal(flattenFields(fields));
+const findDuplicateFieldsInternal = fields => {
+  const allowDuplicatesMap = {};
+  return fields.find(field => {
+    if (isExpand(field)) {
+      return findDuplicateFieldsInternal(field.fields);
+    } else if (isTabGroup(field)) {
+      return field.fields.find(tabField => findDuplicateFieldsInternal(tabField.fields));
+    } else if (allowDuplicatesMap[field.name] === undefined) {
+      allowDuplicatesMap[field.name] = !!field.allowDuplicates;
+      return;
+    } else if (!field.allowDuplicates || !allowDuplicatesMap[field.name]) {
+      return field;
+    }
+    return;
+  });
+};
+export const serialize = async (manifest, data, fields, options = {}) => {
+  const result = [];
+  const {
+    depth = 0,
+    parentType
+  } = options;
+  const flattenedFields = flattenFields(fields);
+  const fillResults = flattenedFields.map(async field => {
+    if (isTabGroup(field)) {
+      const tabGroupData = await serializeTabGroupField(manifest, field, data);
+      result.push(...tabGroupData);
+    } else if (isTabField(field)) {
+      const tabData = await serializeTabField(manifest, field, data);
+      result.push(...tabData);
+    } else if (isExpand(field)) {
+      const expandData = await serializeExpandField(manifest, field, data);
+      result.push(...expandData);
+    }
+    // WARNING: don't recursively serialize, limit to depth < 1
+    // serializable?
+    else if (isFieldset(field) && depth === 0) {
+      const fieldsetData = await serializeFieldset(manifest, field, data, depth);
+      if (fieldsetData) {
+        result.push(fieldsetData);
+      }
+    } else {
+      const value = extract(data[field.name], field, {
+        useDefaultValue: true
+      });
+
+      // ignore undefined values
+      if (value !== undefined) {
+        result.push({
+          [field.name]: value
+        });
+      }
+    }
+  });
+  await Promise.all(fillResults);
+
+  // Crunch fields down to parameters
+  const parameters = result.reduce((obj, current) => {
+    for (const key in current) {
+      obj[key] = current[key];
+    }
+    return obj;
+  }, {});
+
+  // Fix up duplicate values (currently only for fieldsets)
+  const hasDuplicateFields = parentType === 'fieldset' && !!flattenedFields.find(field => field.allowDuplicates);
+  if (hasDuplicateFields) {
+    return serializeMergeDuplicateFieldData(parameters, data, flattenedFields);
+  }
+  return parameters;
+};
+const serializeFieldset = async (manifest, field, data, depth) => {
+  let fieldSerializer;
+  try {
+    fieldSerializer = await getFieldSerializer(manifest, field.options.transformer);
+  } catch (ex) {
+    // We only throw if there is data that may be lost
+    if (data[field.name] !== undefined) {
+      throw ex;
+    }
+  }
+  if (!fieldSerializer) {
+    return;
+  }
+  const {
+    fields: fieldsetFields
+  } = field;
+  const fieldParams = extract(data[field.name], field, {
+    useDefaultValue: true
+  }) || {};
+  const extracted = await serialize(manifest, fieldParams, fieldsetFields, {
+    depth: depth + 1,
+    parentType: 'fieldset'
+  });
+  return {
+    [field.name]: fieldSerializer(extracted)
+  };
+};
+const serializeExpandField = async (manifest, field, data) => {
+  const expandData = field.hasGroupedValues ? data[field.name] || {} : data;
+  const value = await serialize(manifest, expandData, field.fields, {
+    parentType: 'expand'
+  });
+  const results = [];
+  if (!field.hasGroupedValues) {
+    for (const fieldName in value) {
+      results.push({
+        [fieldName]: value[fieldName]
+      });
+    }
+  } else {
+    results.push({
+      [field.name]: value
+    });
+  }
+  return results;
+};
+const resolveTabValues = async (manifest, tabField, groupData) => {
+  const tabFieldParams = tabField.hasGroupedValues ? groupData[tabField.name] || {} : groupData;
+  return await serialize(manifest, tabFieldParams, tabField.fields, {
+    parentType: 'tab'
+  });
+};
+const serializeTabGroupField = async (manifest, field, data) => {
+  const {
+    fields: tabs
+  } = field;
+  const results = [];
+  const value = {};
+  for (let i = 0; i < tabs.length; i++) {
+    const tabField = tabs[i];
+    const tabFieldParameters = await resolveTabValues(manifest, tabField, field.hasGroupedValues ? data[field.name] || {} : data);
+    if (tabField.hasGroupedValues) {
+      // Keep namespaced by tab
+      value[tabField.name] = tabFieldParameters;
+    } else {
+      // Copy into tabGroup value
+      for (const fieldName in tabFieldParameters) {
+        value[fieldName] = tabFieldParameters[fieldName];
+      }
+    }
+  }
+
+  // Now for tabGroup...
+  if (field.hasGroupedValues) {
+    results.push({
+      [field.name]: value
+    });
+  } else {
+    for (const fieldName in value) {
+      results.push({
+        [fieldName]: value
+      });
+    }
+  }
+  return results;
+};
+const serializeTabField = async (manifest, field, data) => {
+  const results = [];
+  const tabField = field;
+  const tabFieldParameters = await resolveTabValues(manifest, tabField, data);
+  if (tabField.hasGroupedValues) {
+    // Keep namespaced by tab
+    results.push({
+      [tabField.name]: tabFieldParameters
+    });
+  } else {
+    // Copy into tabGroup value
+    for (const fieldName in tabFieldParameters) {
+      results.push({
+        [fieldName]: tabFieldParameters[fieldName]
+      });
+    }
+  }
+  return results;
+};
+const serializeMergeDuplicateFieldData = (parameters, formData, flattenedFields) => {
+  // Weed out all the non-duplicate field names
+  const allDuplicateFieldNames = Object.keys(formData).filter(key => isDuplicateField(key));
+  return flattenedFields.reduce((newParams, field) => {
+    const paramValue = parameters[field.name];
+    if (!field.allowDuplicates && paramValue !== undefined) {
+      newParams[field.name] = paramValue;
+    } else {
+      // extract the given duplicate values through the field
+      const duplicateValues = allDuplicateFieldNames.filter(name => getNameFromDuplicateField(name) === field.name).map(duplicateFieldName => extract(formData[duplicateFieldName], field, {
+        useDefaultValue: true
+      }));
+      // Merge and ensure that all values are worth serializing
+      const mergedValues = [paramValue,
+      // first value
+      ...duplicateValues].filter(value => value !== undefined);
+      if (mergedValues.length > 0) {
+        // Replace so the duplicate field values are saved under the
+        // fieldName as an array
+        newParams[field.name] = mergedValues;
+      }
+    }
+    return newParams;
+  }, {});
+};
+function injectDefaultValues(data, fields) {
+  const copy = [...convertToParametersArray(data)];
+  for (const field of fields) {
+    const {
+      name
+    } = field;
+    const fieldIndex = copy.findIndex(item => Object.entries(item)[0][0] === name);
+    if (fieldIndex >= 0 && !isFieldset(field)) {
+      continue;
+    }
+    if (isFieldset(field)) {
+      const {
+        fields: fieldsetFields
+      } = field;
+      if (fieldIndex >= 0) {
+        const fieldValue = Object.entries(copy[fieldIndex])[0][1];
+        copy[fieldIndex] = {
+          [name]: injectDefaultValues(fieldValue, fieldsetFields)
+        };
+      } else {
+        copy.push({
+          [name]: injectDefaultValues({}, fieldsetFields)
+        });
+      }
+    }
+    if ('defaultValue' in field) {
+      copy.push({
+        [name]: field.defaultValue
+      });
+    }
+  }
+  return convertToParametersObject(copy);
+}
+
+/**
+ * Flattens the given FieldDefinition[] so it resembles the expected data
+ * structure in result Parameters.
+ */
+const flattenFields = fields => {
+  const flattenAccumulator = (accumulator, field) => {
+    if (isTabGroup(field)) {
+      if (field.hasGroupedValues) {
+        accumulator.push(field);
+      } else {
+        const flattenedTabs = field.fields.reduce((tabAccumulator, tab) => {
+          return tabAccumulator.concat(tab.hasGroupedValues ?
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          tab : tab.fields.reduce(flattenAccumulator, []));
+        }, []);
+        accumulator.push(...flattenedTabs);
+      }
+    } else if (isExpand(field)) {
+      if (field.hasGroupedValues) {
+        accumulator.push(field);
+      } else {
+        const flattenedExpand = field.fields.reduce(flattenAccumulator, []);
+        accumulator.push(...flattenedExpand);
+      }
+    } else {
+      accumulator.push(field);
+    }
+    return accumulator;
+  };
+  return fields.reduce(flattenAccumulator, []);
+};
+export const deserialize = async (manifest, data, fields, depth = 0) => {
+  const dataArray = convertToParametersArray(data);
+  let result = [];
+  const errors = [];
+  const flattenedFields = flattenFields(fields);
+  for (const item of dataArray) {
+    const [name, originalValue] = Object.entries(item)[0];
+    const field = flattenedFields.find(field => field.name === getNameFromDuplicateField(name));
+    if (field === undefined) {
+      continue;
+    }
+    let value = extract(originalValue, field);
+    if (value === undefined) {
+      continue;
+    }
+
+    // WARNING: don't recursively serialize, limit to depth < 1
+    // deserializable?
+    if (isFieldset(field) && depth === 0) {
+      const fieldDeserializer = await getFieldDeserializer(manifest, field.options.transformer);
+      if (fieldDeserializer) {
+        try {
+          value = fieldDeserializer(value);
+        } catch (error) {
+          errors.push({
+            [name]: error instanceof Error ? error.message : String(error)
+          });
+          continue;
+        }
+        value = await deserialize(manifest, value, field.fields, depth + 1);
+      }
+    }
+    result.push({
+      [name]: value
+    });
+  }
+  result = convertToParametersObject(result);
+  if (errors.length > 0) {
+    result.errors = convertToParametersObject(errors);
+  }
+  return injectDefaultValues(result, flattenedFields);
+};
+const convertToParametersObject = (parameters = []) => {
+  if (!Array.isArray(parameters)) {
+    return parameters;
+  }
+  return parameters.reduce((obj, current) => {
+    for (const key in current) {
+      const keys = Object.keys(obj);
+      let resultKey = key;
+      let idx = 1;
+      while (keys.indexOf(resultKey) >= 0) {
+        resultKey = `${getNameFromDuplicateField(key)}:${idx}`;
+        idx++;
+      }
+      obj[resultKey] = current[key];
+    }
+    return obj;
+  }, {});
+};
+const convertToParametersArray = (parameters = {}) => {
+  if (Array.isArray(parameters)) {
+    return parameters;
+  }
+  const dataArray = [];
+  for (const name in parameters) {
+    dataArray.push({
+      [name]: parameters[name]
+    });
+  }
+  return dataArray;
+};

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

@@ -0,0 +1,9 @@
+export let ValidationError = /*#__PURE__*/function (ValidationError) {
+  ValidationError["Required"] = "required";
+  ValidationError["Invalid"] = "invalid";
+  return ValidationError;
+}({});
+export let FieldTypeError = /*#__PURE__*/function (FieldTypeError) {
+  FieldTypeError["isMultipleAndRadio"] = "isMultipleAndRadio";
+  return FieldTypeError;
+}({});