@atlaskit/editor-plugin-card 1.10.3 → 1.11.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-card
 
+## 1.11.1
+
+### Patch Changes
+
+-   [#97537](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97537)
+    [`7d76404fde3f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7d76404fde3f) -
+    Fix a bug where the confluence search config modal may appear to be empty when opening an
+    existing inline link.
+-   Updated dependencies
+
+## 1.11.0
+
+### Minor Changes
+
+-   [#97997](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97997)
+    [`ee970964e1f2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ee970964e1f2) -
+    [ux] Replaces the Datasources Toolbar TableIcon with a new custom Icon
+
 ## 1.10.3
 
 ### Patch Changes

package/dist/cjs/ui/DatasourceAppearanceButton.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,13 +10,13 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _table = _interopRequireDefault(require("@atlaskit/icon/glyph/table"));
 var _linkDatasource = require("@atlaskit/link-datasource");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _doc = require("../pm-plugins/doc");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _CardContextProvider = require("./CardContextProvider");
+var _DatasourceIcon = require("./DatasourceIcon");
 var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
 /** @jsx jsx */
 
@@ -97,7 +96,7 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
   return (0, _react2.jsx)(_primitives.Flex, null, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
     css: buttonStyles,
     title: buttonLabel,
-    icon: (0, _react2.jsx)(_table.default, {
+    icon: (0, _react2.jsx)(_DatasourceIcon.DatasourceIcon, {
       label: buttonLabel
     }),
     selected: selected,

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

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatasourceIcon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var _primitives = require("@atlaskit/primitives");
+var IconDatasourceGlyph = function IconDatasourceGlyph(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none"
+  }, props), /*#__PURE__*/_react.default.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 = (0, _primitives.xcss)({
+  padding: 'space.050',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 'space.300',
+  height: 'space.300'
+});
+var DatasourceIcon = exports.DatasourceIcon = function DatasourceIcon(props) {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    xcss: wrapperStyles
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    glyph: IconDatasourceGlyph
+  }, props)));
+};

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

@@ -4,9 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.modalTypeToComponentMap = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _linkDatasource = require("@atlaskit/link-datasource");
 var _datasourceErrorBoundary = require("../../datasourceErrorBoundary");
 var _CardContextProvider = require("../CardContextProvider");
 var _index = require("./index");
@@ -15,19 +16,42 @@ var ModalWithState = function ModalWithState(_ref) {
     editorView = _ref.editorView;
   var _useSharedPluginState = (0, _hooks.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.default.createElement(_datasourceErrorBoundary.DatasourceErrorBoundary, {
     view: editorView,
-    datasourceModalType: cardState === null || cardState === void 0 ? void 0 : cardState.datasourceModalType
+    datasourceModalType: datasourceModalType
   }, /*#__PURE__*/_react.default.createElement(_CardContextProvider.CardContextProvider, null, function (_ref2) {
     var cardContext = _ref2.cardContext;
     return /*#__PURE__*/_react.default.createElement(_index.DatasourceModal, {
       view: editorView,
-      modalType: cardState === null || cardState === void 0 ? void 0 : cardState.datasourceModalType,
-      cardContext: cardContext
+      cardContext: cardContext,
+      datasourceId: datasourceId,
+      componentType: componentType
     });
   }));
 };
+var modalTypeToComponentMap = exports.modalTypeToComponentMap = {
+  jira: {
+    componentType: _linkDatasource.JiraIssuesConfigModal,
+    datasourceId: _linkDatasource.JIRA_LIST_OF_LINKS_DATASOURCE_ID
+  },
+  'confluence-search': {
+    componentType: _linkDatasource.ConfluenceSearchConfigModal,
+    datasourceId: _linkDatasource.CONFLUENCE_SEARCH_DATASOURCE_ID
+  },
+  assets: {
+    componentType: _linkDatasource.AssetsConfigModal,
+    datasourceId: _linkDatasource.ASSETS_LIST_OF_LINKS_DATASOURCE_ID
+  }
+};
 var _default = exports.default = ModalWithState;

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

@@ -10,7 +10,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _linkDatasource = require("@atlaskit/link-datasource");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = require("../../pm-plugins/actions");
 var _doc = require("../../pm-plugins/doc");
@@ -23,44 +22,56 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DatasourceModal = exports.DatasourceModal = function DatasourceModal(_ref) {
-  var _existingNode, _existingNode2, _existingNode3;
+  var _existingNode$attrs, _existingNode$attrs2;
   var view = _ref.view,
-    modalType = _ref.modalType,
-    cardContext = _ref.cardContext;
+    cardContext = _ref.cardContext,
+    defaultDatasourceId = _ref.datasourceId,
+    Component = _ref.componentType;
+  var state = view.state;
+  var existingNode = getExistingNode(state);
   var dispatch = view.dispatch,
-    state = view.state;
-  var selection = state.selection;
-  var existingNode;
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar')) {
-    // Check if the selection contains a link mark
-    var $pos = state.doc.resolve(selection.from);
-    var isLinkMark = $pos.marks().some(function (mark) {
-      return mark.type === state.schema.marks.link;
-    });
-
-    // When selection is a TextNode and a link Mark is present return that node
-    if (selection instanceof _state.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;
-    }
-  } else {
-    existingNode = selection instanceof _state.NodeSelection ? selection.node : undefined;
-  }
-  var isRegularCardNode = !!(existingNode && !((_existingNode = existingNode) !== null && _existingNode !== void 0 && (_existingNode = _existingNode.attrs) !== null && _existingNode !== void 0 && _existingNode.datasource));
+    transaction = view.state.tr;
+  var onClose = (0, _react.useCallback)(function () {
+    dispatch((0, _actions.hideDatasourceModal)(transaction));
+  }, [dispatch, transaction]);
+  var onInsert = useOnInsert(view, existingNode);
+  var isRegularCardNode = !!(existingNode && !(existingNode !== null && existingNode !== void 0 && (_existingNode$attrs = existingNode.attrs) !== null && _existingNode$attrs !== void 0 && _existingNode$attrs.datasource));
+  var _ref2 = (existingNode === null || existingNode === void 0 || (_existingNode$attrs2 = existingNode.attrs) === null || _existingNode$attrs2 === void 0 ? void 0 : _existingNode$attrs2.datasource) || {},
+    _ref2$id = _ref2.id,
+    datasourceId = _ref2$id === void 0 ? defaultDatasourceId : _ref2$id,
+    _ref2$views = _ref2.views,
+    views = _ref2$views === void 0 ? [] : _ref2$views,
+    nodeParameters = _ref2.parameters;
+  var _resolveColumnsConfig = resolveColumnsConfig(views),
+    visibleColumnKeys = _resolveColumnsConfig.visibleColumnKeys,
+    wrappedColumnKeys = _resolveColumnsConfig.wrappedColumnKeys,
+    columnCustomSizes = _resolveColumnsConfig.columnCustomSizes;
   var _useFetchDatasourceIn = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
       isRegularCardNode: 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: cardContext,
-      nodeParameters: (_existingNode3 = existingNode) === null || _existingNode3 === void 0 || (_existingNode3 = _existingNode3.attrs) === null || _existingNode3 === void 0 || (_existingNode3 = _existingNode3.datasource) === null || _existingNode3 === void 0 ? void 0 : _existingNode3.parameters
+      nodeParameters: nodeParameters
     }),
     parameters = _useFetchDatasourceIn.parameters,
     ready = _useFetchDatasourceIn.ready;
-  var onClose = (0, _react.useCallback)(function () {
-    dispatch((0, _actions.hideDatasourceModal)(view.state.tr));
-  }, [dispatch, view.state.tr]);
-  var onInsert = (0, _react.useCallback)(function (newAdf, analyticEvent) {
+  if (!ready) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.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
+  });
+};
+var useOnInsert = function useOnInsert(view, existingNode) {
+  return (0, _react.useCallback)(function (newAdf, analyticEvent) {
     if (analyticEvent) {
       analyticEvent.update(function (payload) {
         return _objectSpread(_objectSpread({}, payload), {}, {
@@ -82,143 +93,63 @@ var DatasourceModal = exports.DatasourceModal = function DatasourceModal(_ref) {
       (0, _doc.insertDatasource)(view.state, newAdf, view, analyticEvent);
     }
   }, [existingNode, view]);
-  if (modalType === 'jira') {
-    var _existingNode4, _tableView$properties, _existingNode5;
-    if (!ready) {
-      return null;
-    }
-    var _ref2 = ((_existingNode4 = existingNode) === null || _existingNode4 === void 0 || (_existingNode4 = _existingNode4.attrs) === null || _existingNode4 === void 0 ? void 0 : _existingNode4.datasource) || {},
-      _ref2$id = _ref2.id,
-      datasourceId = _ref2$id === void 0 ? _linkDatasource.JIRA_LIST_OF_LINKS_DATASOURCE_ID : _ref2$id,
-      _ref2$views = _ref2.views,
-      views = _ref2$views === void 0 ? [] : _ref2$views;
-    var _ref3 = views,
-      _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
-      tableView = _ref4[0];
-    var visibleColumnKeys = [];
-    var wrappedColumnKeys = [];
-    var columnCustomSizes;
-    var columns = tableView === null || tableView === void 0 || (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns;
-    if (columns) {
-      columnCustomSizes = {};
-      var _iterator = _createForOfIteratorHelper(columns),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var _step$value = _step.value,
-            _key = _step$value.key,
-            width = _step$value.width,
-            isWrapped = _step$value.isWrapped;
-          visibleColumnKeys.push(_key);
-          if (width) {
-            columnCustomSizes[_key] = width;
-          }
-          if (isWrapped) {
-            wrappedColumnKeys.push(_key);
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-    }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      "data-testid": "jira-config-modal"
-    }, /*#__PURE__*/_react.default.createElement(_linkDatasource.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, _tableView$properties2;
-    var _ref5 = ((_existingNode6 = existingNode) === null || _existingNode6 === void 0 || (_existingNode6 = _existingNode6.attrs) === null || _existingNode6 === void 0 ? void 0 : _existingNode6.datasource) || {},
-      _ref5$id = _ref5.id,
-      _datasourceId = _ref5$id === void 0 ? _linkDatasource.ASSETS_LIST_OF_LINKS_DATASOURCE_ID : _ref5$id,
-      _parameters = _ref5.parameters,
-      _ref5$views = _ref5.views,
-      _views = _ref5$views === void 0 ? [] : _ref5$views;
-    var _ref6 = _views,
-      _ref7 = (0, _slicedToArray2.default)(_ref6, 1),
-      _tableView = _ref7[0];
-    var _visibleColumnKeys = _tableView === null || _tableView === void 0 || (_tableView$properties2 = _tableView.properties) === null || _tableView$properties2 === void 0 ? void 0 : _tableView$properties2.columns.map(function (column) {
-      return column.key;
+};
+var getExistingNode = function getExistingNode(state) {
+  var selection = state.selection;
+  var existingNode;
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+    // Check if the selection contains a link mark
+    var isLinkMark = state.doc.resolve(selection.from).marks().some(function (mark) {
+      return mark.type === state.schema.marks.link;
     });
-    return /*#__PURE__*/_react.default.createElement("div", {
-      "data-testid": "assets-config-modal"
-    }, /*#__PURE__*/_react.default.createElement(_linkDatasource.AssetsConfigModal, {
-      datasourceId: _datasourceId,
-      visibleColumnKeys: _visibleColumnKeys,
-      parameters: _parameters,
-      onCancel: onClose,
-      onInsert: onInsert
-    }));
-  }
 
-  // TODO: further refactor in https://product-fabric.atlassian.net/browse/EDM-9637
-  if (modalType === 'confluence-search') {
-    var _existingNode7, _tableView2$propertie, _existingNode8;
-    if (!ready) {
-      return null;
+    // When selection is a TextNode and a link Mark is present return that node
+    if (selection instanceof _state.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;
     }
-    var _ref8 = ((_existingNode7 = existingNode) === null || _existingNode7 === void 0 || (_existingNode7 = _existingNode7.attrs) === null || _existingNode7 === void 0 ? void 0 : _existingNode7.datasource) || {},
-      _ref8$id = _ref8.id,
-      _datasourceId2 = _ref8$id === void 0 ? _linkDatasource.CONFLUENCE_SEARCH_DATASOURCE_ID : _ref8$id,
-      _parameters2 = _ref8.parameters,
-      _ref8$views = _ref8.views,
-      _views2 = _ref8$views === void 0 ? [] : _ref8$views;
-    var _ref9 = _views2,
-      _ref10 = (0, _slicedToArray2.default)(_ref9, 1),
-      _tableView2 = _ref10[0];
-    var _visibleColumnKeys2 = [];
-    var _wrappedColumnKeys = [];
-    var _columnCustomSizes;
-    var _columns = _tableView2 === null || _tableView2 === void 0 || (_tableView2$propertie = _tableView2.properties) === null || _tableView2$propertie === void 0 ? void 0 : _tableView2$propertie.columns;
-    if (_columns) {
-      _columnCustomSizes = {};
-      var _iterator2 = _createForOfIteratorHelper(_columns),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var _step2$value = _step2.value,
-            _key2 = _step2$value.key,
-            _width = _step2$value.width,
-            _isWrapped = _step2$value.isWrapped;
-          _visibleColumnKeys2.push(_key2);
-          if (_width) {
-            _columnCustomSizes[_key2] = _width;
-          }
-          if (_isWrapped) {
-            _wrappedColumnKeys.push(_key2);
-          }
+  } else {
+    existingNode = selection instanceof _state.NodeSelection ? selection.node : undefined;
+  }
+  return existingNode;
+};
+var resolveColumnsConfig = function resolveColumnsConfig(views) {
+  var _tableView$properties;
+  var _views = (0, _slicedToArray2.default)(views, 1),
+    tableView = _views[0];
+  var visibleColumnKeys = [];
+  var wrappedColumnKeys = [];
+  var columnCustomSizes;
+  var columns = tableView === null || tableView === void 0 || (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns;
+  if (columns) {
+    columnCustomSizes = {};
+    var _iterator = _createForOfIteratorHelper(columns),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _step$value = _step.value,
+          _key = _step$value.key,
+          width = _step$value.width,
+          isWrapped = _step$value.isWrapped;
+        visibleColumnKeys.push(_key);
+        if (width) {
+          columnCustomSizes[_key] = width;
+        }
+        if (isWrapped) {
+          wrappedColumnKeys.push(_key);
         }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
       }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      "data-testid": "confluence-search-config-modal"
-    }, /*#__PURE__*/_react.default.createElement(_linkDatasource.ConfluenceSearchConfigModal, {
-      datasourceId: _datasourceId2,
-      viewMode: isRegularCardNode ? 'inline' : 'table',
-      visibleColumnKeys: _visibleColumnKeys2,
-      parameters: _parameters2,
-      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: visibleColumnKeys,
+    wrappedColumnKeys: wrappedColumnKeys,
+    columnCustomSizes: columnCustomSizes
+  };
 };

package/dist/es2019/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';
 const buttonStyles = css({
   pointerEvents: 'auto'
@@ -91,7 +91,7 @@ const DatasourceAppearanceButtonWithCardContext = ({
   return jsx(Flex, null, jsx(Button, {
     css: buttonStyles,
     title: buttonLabel,
-    icon: jsx(TableIcon, {
+    icon: jsx(DatasourceIcon, {
       label: buttonLabel
     }),
     selected: selected,

package/dist/es2019/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';
+const 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'
+  }));
+};
+const wrapperStyles = xcss({
+  padding: 'space.050',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 'space.300',
+  height: 'space.300'
+});
+export const DatasourceIcon = props => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: wrapperStyles
+  }, /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconDatasourceGlyph
+  }, props)));
+};

package/dist/es2019/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';
@@ -10,18 +11,44 @@ const ModalWithState = ({
   const {
     cardState
   } = useSharedPluginState(api, ['card']);
-  if (!(cardState !== null && cardState !== void 0 && cardState.showDatasourceModal)) {
+  if (!cardState) {
     return null;
   }
+  const {
+    showDatasourceModal,
+    datasourceModalType
+  } = cardState;
+  if (!showDatasourceModal || !datasourceModalType) {
+    return null;
+  }
+  const {
+    datasourceId,
+    componentType
+  } = modalTypeToComponentMap[datasourceModalType];
   return /*#__PURE__*/React.createElement(DatasourceErrorBoundary, {
     view: editorView,
-    datasourceModalType: cardState === null || cardState === void 0 ? void 0 : cardState.datasourceModalType
+    datasourceModalType: datasourceModalType
   }, /*#__PURE__*/React.createElement(CardContextProvider, null, ({
     cardContext
   }) => /*#__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 const 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;