@atlaskit/editor-plugin-card 1.10.3 → 1.11.1

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

@@ -1,53 +1,68 @@
 import React, { useCallback } from 'react';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, AssetsConfigModal, CONFLUENCE_SEARCH_DATASOURCE_ID, ConfluenceSearchConfigModal, JIRA_LIST_OF_LINKS_DATASOURCE_ID, JiraIssuesConfigModal } from '@atlaskit/link-datasource';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { hideDatasourceModal } from '../../pm-plugins/actions';
 import { insertDatasource, updateCardViaDatasource } from '../../pm-plugins/doc';
 import { useFetchDatasourceInfo } from '../useFetchDatasourceInfo';
 export const DatasourceModal = ({
   view,
-  modalType,
-  cardContext
+  cardContext,
+  datasourceId: defaultDatasourceId,
+  componentType: Component
 }) => {
-  var _existingNode, _existingNode$attrs, _existingNode2, _existingNode3, _existingNode3$attrs, _existingNode3$attrs$;
+  var _existingNode$attrs, _existingNode$attrs2;
   const {
-    dispatch,
     state
   } = view;
+  const existingNode = getExistingNode(state);
   const {
-    selection
-  } = state;
-  let existingNode;
-  if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
-    // Check if the selection contains a link mark
-    const $pos = state.doc.resolve(selection.from);
-    const isLinkMark = $pos.marks().some(mark => mark.type === state.schema.marks.link);
-
-    // When selection is a TextNode and a link Mark is present return that node
-    if (selection instanceof NodeSelection) {
-      existingNode = selection.node;
-    } else if (isLinkMark) {
-      var _state$doc$nodeAt;
-      existingNode = (_state$doc$nodeAt = state.doc.nodeAt(selection.from)) !== null && _state$doc$nodeAt !== void 0 ? _state$doc$nodeAt : undefined;
+    dispatch,
+    state: {
+      tr: transaction
     }
-  } else {
-    existingNode = selection instanceof NodeSelection ? selection.node : undefined;
-  }
-  const isRegularCardNode = !!(existingNode && !((_existingNode = existingNode) !== null && _existingNode !== void 0 && (_existingNode$attrs = _existingNode.attrs) !== null && _existingNode$attrs !== void 0 && _existingNode$attrs.datasource));
+  } = view;
+  const onClose = useCallback(() => {
+    dispatch(hideDatasourceModal(transaction));
+  }, [dispatch, transaction]);
+  const onInsert = useOnInsert(view, existingNode);
+  const isRegularCardNode = !!(existingNode && !(existingNode !== null && existingNode !== void 0 && (_existingNode$attrs = existingNode.attrs) !== null && _existingNode$attrs !== void 0 && _existingNode$attrs.datasource));
+  const {
+    id: datasourceId = defaultDatasourceId,
+    views = [],
+    parameters: nodeParameters
+  } = (existingNode === null || existingNode === void 0 ? void 0 : (_existingNode$attrs2 = existingNode.attrs) === null || _existingNode$attrs2 === void 0 ? void 0 : _existingNode$attrs2.datasource) || {};
+  const {
+    visibleColumnKeys,
+    wrappedColumnKeys,
+    columnCustomSizes
+  } = resolveColumnsConfig(views);
   const {
     parameters,
     ready
   } = useFetchDatasourceInfo({
     isRegularCardNode,
-    url: (_existingNode2 = existingNode) === null || _existingNode2 === void 0 ? void 0 : _existingNode2.attrs.url,
+    url: existingNode === null || existingNode === void 0 ? void 0 : existingNode.attrs.url,
     cardContext,
-    nodeParameters: (_existingNode3 = existingNode) === null || _existingNode3 === void 0 ? void 0 : (_existingNode3$attrs = _existingNode3.attrs) === null || _existingNode3$attrs === void 0 ? void 0 : (_existingNode3$attrs$ = _existingNode3$attrs.datasource) === null || _existingNode3$attrs$ === void 0 ? void 0 : _existingNode3$attrs$.parameters
+    nodeParameters
   });
-  const onClose = useCallback(() => {
-    dispatch(hideDatasourceModal(view.state.tr));
-  }, [dispatch, view.state.tr]);
-  const onInsert = useCallback((newAdf, analyticEvent) => {
+  if (!ready) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Component, {
+    datasourceId: datasourceId,
+    viewMode: isRegularCardNode ? 'inline' : 'table' // Want non-datasource cards to open in inline view since they are in table view
+    ,
+    parameters: parameters,
+    url: existingNode === null || existingNode === void 0 ? void 0 : existingNode.attrs.url,
+    visibleColumnKeys: visibleColumnKeys,
+    columnCustomSizes: columnCustomSizes,
+    wrappedColumnKeys: wrappedColumnKeys,
+    onCancel: onClose,
+    onInsert: onInsert
+  });
+};
+const useOnInsert = (view, existingNode) => {
+  return useCallback((newAdf, analyticEvent) => {
     if (analyticEvent) {
       analyticEvent.update(payload => ({
         ...payload,
@@ -69,116 +84,54 @@ export const DatasourceModal = ({
       insertDatasource(view.state, newAdf, view, analyticEvent);
     }
   }, [existingNode, view]);
-  if (modalType === 'jira') {
-    var _existingNode4, _existingNode4$attrs, _tableView$properties, _existingNode5;
-    if (!ready) {
-      return null;
-    }
-    const {
-      id: datasourceId = JIRA_LIST_OF_LINKS_DATASOURCE_ID,
-      views = []
-    } = ((_existingNode4 = existingNode) === null || _existingNode4 === void 0 ? void 0 : (_existingNode4$attrs = _existingNode4.attrs) === null || _existingNode4$attrs === void 0 ? void 0 : _existingNode4$attrs.datasource) || {};
-    const [tableView] = views;
-    const visibleColumnKeys = [];
-    const wrappedColumnKeys = [];
-    let columnCustomSizes;
-    const columns = tableView === null || tableView === void 0 ? void 0 : (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns;
-    if (columns) {
-      columnCustomSizes = {};
-      for (const {
-        key,
-        width,
-        isWrapped
-      } of columns) {
-        visibleColumnKeys.push(key);
-        if (width) {
-          columnCustomSizes[key] = width;
-        }
-        if (isWrapped) {
-          wrappedColumnKeys.push(key);
-        }
-      }
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      "data-testid": "jira-config-modal"
-    }, /*#__PURE__*/React.createElement(JiraIssuesConfigModal, {
-      datasourceId: datasourceId,
-      viewMode: isRegularCardNode ? 'inline' : 'table' // Want non-datasource cards to open in inline view since they are in table view
-      ,
-      visibleColumnKeys: visibleColumnKeys,
-      parameters: parameters,
-      url: (_existingNode5 = existingNode) === null || _existingNode5 === void 0 ? void 0 : _existingNode5.attrs.url,
-      columnCustomSizes: columnCustomSizes,
-      wrappedColumnKeys: wrappedColumnKeys,
-      onCancel: onClose,
-      onInsert: onInsert
-    }));
-  }
-  if (modalType === 'assets') {
-    var _existingNode6, _existingNode6$attrs, _tableView$properties2;
-    const {
-      id: datasourceId = ASSETS_LIST_OF_LINKS_DATASOURCE_ID,
-      parameters,
-      views = []
-    } = ((_existingNode6 = existingNode) === null || _existingNode6 === void 0 ? void 0 : (_existingNode6$attrs = _existingNode6.attrs) === null || _existingNode6$attrs === void 0 ? void 0 : _existingNode6$attrs.datasource) || {};
-    const [tableView] = views;
-    const visibleColumnKeys = tableView === null || tableView === void 0 ? void 0 : (_tableView$properties2 = tableView.properties) === null || _tableView$properties2 === void 0 ? void 0 : _tableView$properties2.columns.map(column => column.key);
-    return /*#__PURE__*/React.createElement("div", {
-      "data-testid": "assets-config-modal"
-    }, /*#__PURE__*/React.createElement(AssetsConfigModal, {
-      datasourceId: datasourceId,
-      visibleColumnKeys: visibleColumnKeys,
-      parameters: parameters,
-      onCancel: onClose,
-      onInsert: onInsert
-    }));
-  }
+};
+const getExistingNode = state => {
+  const {
+    selection
+  } = state;
+  let existingNode;
+  if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+    // Check if the selection contains a link mark
+    const isLinkMark = state.doc.resolve(selection.from).marks().some(mark => mark.type === state.schema.marks.link);
 
-  // TODO: further refactor in https://product-fabric.atlassian.net/browse/EDM-9637
-  if (modalType === 'confluence-search') {
-    var _existingNode7, _existingNode7$attrs, _tableView$properties3, _existingNode8;
-    if (!ready) {
-      return null;
+    // When selection is a TextNode and a link Mark is present return that node
+    if (selection instanceof NodeSelection) {
+      existingNode = selection.node;
+    } else if (isLinkMark) {
+      var _state$doc$nodeAt;
+      existingNode = (_state$doc$nodeAt = state.doc.nodeAt(selection.from)) !== null && _state$doc$nodeAt !== void 0 ? _state$doc$nodeAt : undefined;
     }
-    const {
-      id: datasourceId = CONFLUENCE_SEARCH_DATASOURCE_ID,
-      parameters,
-      views = []
-    } = ((_existingNode7 = existingNode) === null || _existingNode7 === void 0 ? void 0 : (_existingNode7$attrs = _existingNode7.attrs) === null || _existingNode7$attrs === void 0 ? void 0 : _existingNode7$attrs.datasource) || {};
-    const [tableView] = views;
-    const visibleColumnKeys = [];
-    const wrappedColumnKeys = [];
-    let columnCustomSizes;
-    const columns = tableView === null || tableView === void 0 ? void 0 : (_tableView$properties3 = tableView.properties) === null || _tableView$properties3 === void 0 ? void 0 : _tableView$properties3.columns;
-    if (columns) {
-      columnCustomSizes = {};
-      for (const {
-        key,
-        width,
-        isWrapped
-      } of columns) {
-        visibleColumnKeys.push(key);
-        if (width) {
-          columnCustomSizes[key] = width;
-        }
-        if (isWrapped) {
-          wrappedColumnKeys.push(key);
-        }
+  } else {
+    existingNode = selection instanceof NodeSelection ? selection.node : undefined;
+  }
+  return existingNode;
+};
+const resolveColumnsConfig = views => {
+  var _tableView$properties;
+  const [tableView] = views;
+  const visibleColumnKeys = [];
+  const wrappedColumnKeys = [];
+  let columnCustomSizes;
+  const columns = tableView === null || tableView === void 0 ? void 0 : (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns;
+  if (columns) {
+    columnCustomSizes = {};
+    for (const {
+      key,
+      width,
+      isWrapped
+    } of columns) {
+      visibleColumnKeys.push(key);
+      if (width) {
+        columnCustomSizes[key] = width;
+      }
+      if (isWrapped) {
+        wrappedColumnKeys.push(key);
       }
     }
-    return /*#__PURE__*/React.createElement("div", {
-      "data-testid": "confluence-search-config-modal"
-    }, /*#__PURE__*/React.createElement(ConfluenceSearchConfigModal, {
-      datasourceId: datasourceId,
-      viewMode: isRegularCardNode ? 'inline' : 'table',
-      visibleColumnKeys: visibleColumnKeys,
-      parameters: parameters,
-      url: (_existingNode8 = existingNode) === null || _existingNode8 === void 0 ? void 0 : _existingNode8.attrs.url,
-      columnCustomSizes: columnCustomSizes,
-      wrappedColumnKeys: wrappedColumnKeys,
-      onCancel: onClose,
-      onInsert: onInsert
-    }));
   }
-  return null; // null for now until we have modal component that handles other datasources
+  return {
+    visibleColumnKeys,
+    wrappedColumnKeys,
+    columnCustomSizes
+  };
 };

package/dist/esm/ui/DatasourceAppearanceButton.js

@@ -5,13 +5,13 @@ import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import TableIcon from '@atlaskit/icon/glyph/table';
 import { buildDatasourceAdf } from '@atlaskit/link-datasource';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { updateCardViaDatasource } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { CardContextProvider } from './CardContextProvider';
+import { DatasourceIcon } from './DatasourceIcon';
 import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 var buttonStyles = css({
   pointerEvents: 'auto'
@@ -89,7 +89,7 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
   return jsx(Flex, null, jsx(Button, {
     css: buttonStyles,
     title: buttonLabel,
-    icon: jsx(TableIcon, {
+    icon: jsx(DatasourceIcon, {
       label: buttonLabel
     }),
     selected: selected,

package/dist/esm/ui/DatasourceIcon/index.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+import { Flex, xcss } from '@atlaskit/primitives';
+var IconDatasourceGlyph = function IconDatasourceGlyph(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 2C0 0.89543 0.895431 0 2 0H13C14.1046 0 15 0.895431 15 2V13C15 14.1046 14.1046 15 13 15H2C0.89543 15 0 14.1046 0 13V2ZM5 6C5 5.44772 5.44772 5 6 5L12 5C12.5523 5 13 5.44772 13 6C13 6.55229 12.5523 7 12 7L6 7C5.44772 7 5 6.55228 5 6ZM6 8C5.44772 8 5 8.44771 5 9C5 9.55228 5.44772 10 6 10L12 10C12.5523 10 13 9.55229 13 9C13 8.44772 12.5523 8 12 8L6 8ZM5 12C5 11.4477 5.44772 11 6 11L12 11C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13L6 13C5.44772 13 5 12.5523 5 12ZM3 7C3.55228 7 4 6.55228 4 6C4 5.44772 3.55228 5 3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7ZM5 3C5 2.44772 5.44772 2 6 2L12 2C12.5523 2 13 2.44772 13 3C13 3.55229 12.5523 4 12 4L6 4C5.44772 4 5 3.55228 5 3ZM3 4C3.55228 4 4 3.55228 4 3C4 2.44772 3.55228 2 3 2C2.44772 2 2 2.44772 2 3C2 3.55228 2.44772 4 3 4ZM4 9C4 9.55229 3.55228 10 3 10C2.44772 10 2 9.55229 2 9C2 8.44771 2.44772 8 3 8C3.55228 8 4 8.44771 4 9ZM3 13C3.55228 13 4 12.5523 4 12C4 11.4477 3.55228 11 3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13Z",
+    fill: 'currentColor'
+  }));
+};
+var wrapperStyles = xcss({
+  padding: 'space.050',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 'space.300',
+  height: 'space.300'
+});
+export var DatasourceIcon = function DatasourceIcon(props) {
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: wrapperStyles
+  }, /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconDatasourceGlyph
+  }, props)));
+};

package/dist/esm/ui/DatasourceModal/ModalWithState.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, AssetsConfigModal, CONFLUENCE_SEARCH_DATASOURCE_ID, ConfluenceSearchConfigModal, JIRA_LIST_OF_LINKS_DATASOURCE_ID, JiraIssuesConfigModal } from '@atlaskit/link-datasource';
 import { DatasourceErrorBoundary } from '../../datasourceErrorBoundary';
 import { CardContextProvider } from '../CardContextProvider';
 import { DatasourceModal } from './index';
@@ -8,19 +9,42 @@ var ModalWithState = function ModalWithState(_ref) {
     editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginState(api, ['card']),
     cardState = _useSharedPluginState.cardState;
-  if (!(cardState !== null && cardState !== void 0 && cardState.showDatasourceModal)) {
+  if (!cardState) {
     return null;
   }
+  var showDatasourceModal = cardState.showDatasourceModal,
+    datasourceModalType = cardState.datasourceModalType;
+  if (!showDatasourceModal || !datasourceModalType) {
+    return null;
+  }
+  var _modalTypeToComponent = modalTypeToComponentMap[datasourceModalType],
+    datasourceId = _modalTypeToComponent.datasourceId,
+    componentType = _modalTypeToComponent.componentType;
   return /*#__PURE__*/React.createElement(DatasourceErrorBoundary, {
     view: editorView,
-    datasourceModalType: cardState === null || cardState === void 0 ? void 0 : cardState.datasourceModalType
+    datasourceModalType: datasourceModalType
   }, /*#__PURE__*/React.createElement(CardContextProvider, null, function (_ref2) {
     var cardContext = _ref2.cardContext;
     return /*#__PURE__*/React.createElement(DatasourceModal, {
       view: editorView,
-      modalType: cardState === null || cardState === void 0 ? void 0 : cardState.datasourceModalType,
-      cardContext: cardContext
+      cardContext: cardContext,
+      datasourceId: datasourceId,
+      componentType: componentType
     });
   }));
 };
+export var modalTypeToComponentMap = {
+  jira: {
+    componentType: JiraIssuesConfigModal,
+    datasourceId: JIRA_LIST_OF_LINKS_DATASOURCE_ID
+  },
+  'confluence-search': {
+    componentType: ConfluenceSearchConfigModal,
+    datasourceId: CONFLUENCE_SEARCH_DATASOURCE_ID
+  },
+  assets: {
+    componentType: AssetsConfigModal,
+    datasourceId: ASSETS_LIST_OF_LINKS_DATASOURCE_ID
+  }
+};
 export default ModalWithState;