@atlaskit/editor-plugin-card 0.9.0 → 0.9.2

package/dist/esm/pm-plugins/main.js

@@ -94,7 +94,7 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
               if (isDatasource && shouldUpdateTableRef) {
                 var _node$attrs2;
                 // since we use the plugin state, which is a shared state, we need to update the datasourceTableRef, layout on each selection
-                var layout = (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || 'center';
+                var layout = (node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || 'center';
 
                 // we use cardAction to set the same meta, hence, we will need to combine both layout+datasourceTableRef in one transaction
                 dispatch(setCardLayoutAndDatasourceTableRef({
@@ -123,8 +123,8 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
                  * other tasks as per common implementations of the JavaScript event loop in browsers.
                  */
                 var invoke = rafSchedule(function () {
-                  var _pluginInjectionApi$a, _pluginInjectionApi$a2, _pluginInjectionApi$a3, _pluginInjectionApi$a4;
-                  return resolveWithProvider(view, provider, request, options, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, (_pluginInjectionApi$a2 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : (_pluginInjectionApi$a4 = _pluginInjectionApi$a3.sharedState.currentState()) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.createAnalyticsEvent) !== null && _pluginInjectionApi$a2 !== void 0 ? _pluginInjectionApi$a2 : undefined);
+                  var _pluginInjectionApi$a, _pluginInjectionApi$a2, _pluginInjectionApi$a3;
+                  return resolveWithProvider(view, provider, request, options, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, (_pluginInjectionApi$a2 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 || (_pluginInjectionApi$a3 = _pluginInjectionApi$a3.sharedState.currentState()) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.createAnalyticsEvent) !== null && _pluginInjectionApi$a2 !== void 0 ? _pluginInjectionApi$a2 : undefined);
                 });
                 rafCancellationCallbacks.push(invoke.cancel);
                 invoke();
@@ -136,7 +136,7 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
              * so subscribers can now be notified and dispatch
              * analytics events
              */
-            cardPluginEvents === null || cardPluginEvents === void 0 ? void 0 : cardPluginEvents.flush();
+            cardPluginEvents === null || cardPluginEvents === void 0 || cardPluginEvents.flush();
           },
           destroy: function destroy() {
             // Cancel any outstanding raf callbacks.
@@ -161,8 +161,8 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
             var hasIntlContext = true;
             var isDatasource = !!(node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.datasource);
             if (isDatasource) {
-              var _node$attrs4, _node$attrs4$datasour;
-              if (options.allowDatasource && platform !== 'mobile' && canRenderDatasource(node === null || node === void 0 ? void 0 : (_node$attrs4 = node.attrs) === null || _node$attrs4 === void 0 ? void 0 : (_node$attrs4$datasour = _node$attrs4.datasource) === null || _node$attrs4$datasour === void 0 ? void 0 : _node$attrs4$datasour.id)) {
+              var _node$attrs4;
+              if (options.allowDatasource && platform !== 'mobile' && canRenderDatasource(node === null || node === void 0 || (_node$attrs4 = node.attrs) === null || _node$attrs4 === void 0 || (_node$attrs4 = _node$attrs4.datasource) === null || _node$attrs4 === void 0 ? void 0 : _node$attrs4.id)) {
                 return new Datasource({
                   node: node,
                   view: view,

package/dist/esm/pm-plugins/mountHyperlink.js

@@ -25,8 +25,8 @@ export var mountHyperlinkPlugin = function mountHyperlinkPlugin(pluginInjectionA
   return new SafePlugin({
     view: function view(editorView) {
       requestAnimationFrame(function () {
-        var _pluginInjectionApi$h, _pluginInjectionApi$h2;
-        pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : (_pluginInjectionApi$h2 = _pluginInjectionApi$h.actions) === null || _pluginInjectionApi$h2 === void 0 ? void 0 : _pluginInjectionApi$h2.prependToolbarButtons({
+        var _pluginInjectionApi$h;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 || (_pluginInjectionApi$h = _pluginInjectionApi$h.actions) === null || _pluginInjectionApi$h === void 0 || _pluginInjectionApi$h.prependToolbarButtons({
           items: function items(state, intl, providerFactory, link) {
             return [].concat(_toConsumableArray(getToolbarViewedItem(link)), [{
               type: 'custom',
@@ -42,8 +42,8 @@ export var mountHyperlinkPlugin = function mountHyperlinkPlugin(pluginInjectionA
                   cardOptions: options,
                   providerFactory: providerFactory,
                   platform: options === null || options === void 0 ? void 0 : options.platform,
-                  editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
-                  cardActions: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.card) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions
+                  editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
+                  cardActions: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.card) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions
                 });
               }
             }]);

package/dist/esm/toolbar.js

@@ -43,7 +43,7 @@ export var removeCard = function removeCard(editorAnalyticsApi) {
     if (dispatch) {
       var tr = state.tr;
       removeSelectedNode(tr);
-      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(payload)(tr);
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(payload)(tr);
       dispatch(tr);
     }
     return true;
@@ -65,7 +65,7 @@ export var visitCardLink = function visitCardLink(editorAnalyticsApi) {
     window.open(url);
     if (dispatch) {
       var tr = state.tr;
-      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildVisitedLinkPayload(type.name))(tr);
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(buildVisitedLinkPayload(type.name))(tr);
       dispatch(tr);
     }
     return true;
@@ -80,7 +80,7 @@ export var openLinkSettings = function openLinkSettings(editorAnalyticsApi) {
     if (dispatch) {
       var tr = state.tr,
         type = state.selection.node.type;
-      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildOpenedSettingsPayload(type.name))(tr);
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(buildOpenedSettingsPayload(type.name))(tr);
       dispatch(tr);
     }
     return true;
@@ -183,7 +183,7 @@ var getToolbarViewedItem = function getToolbarViewedItem(url, display) {
 };
 var generateToolbarItems = function generateToolbarItems(state, featureFlags, intl, providerFactory, cardOptions, platform, linkPicker, pluginInjectionApi) {
   return function (node) {
-    var _pluginInjectionApi$a, _pluginInjectionApi$d, _pluginInjectionApi$d2, _node$attrs, _node$attrs2, _node$attrs2$datasour;
+    var _pluginInjectionApi$a, _pluginInjectionApi$d, _pluginInjectionApi$d2, _node$attrs, _node$attrs2;
     var _titleUrlPairFromNode2 = titleUrlPairFromNode(node),
       url = _titleUrlPairFromNode2.url;
     var _ref = (_pluginInjectionApi$a = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.analytics) !== null && _pluginInjectionApi$a !== void 0 ? _pluginInjectionApi$a : {},
@@ -201,12 +201,12 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
     }
     var pluginState = pluginKey.getState(state);
     var currentAppearance = appearanceForNodeType(node.type);
-    var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
+    var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
       hoverDecoration = _ref2.hoverDecoration;
-    var isDatasource = currentAppearance === 'block' && (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.datasource);
+    var isDatasource = currentAppearance === 'block' && (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.datasource);
     var shouldRenderDatasourceToolbar = isDatasource &&
     // not showing toolbar in mobile for now since not sure what our plans are for it
-    platform !== 'mobile' && cardOptions.allowDatasource && canRenderDatasource(node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : (_node$attrs2$datasour = _node$attrs2.datasource) === null || _node$attrs2$datasour === void 0 ? void 0 : _node$attrs2$datasour.id);
+    platform !== 'mobile' && cardOptions.allowDatasource && canRenderDatasource(node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 || (_node$attrs2 = _node$attrs2.datasource) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.id);
 
     /* mobile builds toolbar natively using toolbarItems */
     if (pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar && platform !== 'mobile') {
@@ -266,7 +266,7 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
       }]);
       if (currentAppearance === 'embed') {
         var _pluginInjectionApi$a2;
-        var alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions, cardOptions);
+        var alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions, cardOptions);
         if (alignmentOptions.length) {
           alignmentOptions.push({
             type: 'separator'

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { DatasourceErrorBoundary } from '../../datasourceErrorBoundary';
+import { CardContextProvider } from '../CardContextProvider';
 import { DatasourceModal } from './index';
 var ModalWithState = function ModalWithState(_ref) {
   var api = _ref.api,
@@ -9,9 +11,15 @@ var ModalWithState = function ModalWithState(_ref) {
   if (!(cardState !== null && cardState !== void 0 && cardState.showDatasourceModal)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(DatasourceModal, {
-    view: editorView,
-    modalType: cardState === null || cardState === void 0 ? void 0 : cardState.datasourceModalType
-  });
+  return /*#__PURE__*/React.createElement(DatasourceErrorBoundary, {
+    view: editorView
+  }, /*#__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
+    });
+  }));
 };
 export default ModalWithState;

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

@@ -7,13 +7,25 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, AssetsConfigModal, JIRA_LIST_OF_LINKS_DATASOURCE_ID, JiraIssuesConfigModal } from '@atlaskit/link-datasource';
 import { hideDatasourceModal } from '../../pm-plugins/actions';
 import { insertDatasource, updateCardFromDatasourceModal } from '../../pm-plugins/doc';
+import { useFetchDatasourceInfo } from '../useFetchDatasourceInfo';
 export var DatasourceModal = function DatasourceModal(_ref) {
+  var _existingNode$attrs, _existingNode$attrs2;
   var view = _ref.view,
-    modalType = _ref.modalType;
+    modalType = _ref.modalType,
+    cardContext = _ref.cardContext;
   var dispatch = view.dispatch,
     state = view.state;
   var selection = state.selection;
   var existingNode = selection instanceof NodeSelection ? selection.node : undefined;
+  var isRegularCardNode = !!(existingNode && !(existingNode !== null && existingNode !== void 0 && (_existingNode$attrs = existingNode.attrs) !== null && _existingNode$attrs !== void 0 && _existingNode$attrs.datasource));
+  var _useFetchDatasourceIn = useFetchDatasourceInfo({
+      isRegularCardNode: isRegularCardNode,
+      url: existingNode === null || existingNode === void 0 ? void 0 : existingNode.attrs.url,
+      cardContext: cardContext,
+      nodeParameters: existingNode === null || existingNode === void 0 || (_existingNode$attrs2 = existingNode.attrs) === null || _existingNode$attrs2 === void 0 || (_existingNode$attrs2 = _existingNode$attrs2.datasource) === null || _existingNode$attrs2 === void 0 ? void 0 : _existingNode$attrs2.parameters
+    }),
+    parameters = _useFetchDatasourceIn.parameters,
+    ready = _useFetchDatasourceIn.ready;
   var onClose = useCallback(function () {
     dispatch(hideDatasourceModal(state.tr));
   }, [dispatch, state.tr]);
@@ -34,23 +46,27 @@ export var DatasourceModal = function DatasourceModal(_ref) {
     }
   }, [existingNode, state, view]);
   if (modalType === 'jira') {
-    var _existingNode$attrs, _tableView$properties;
-    var _ref2 = (existingNode === null || existingNode === void 0 ? void 0 : (_existingNode$attrs = existingNode.attrs) === null || _existingNode$attrs === void 0 ? void 0 : _existingNode$attrs.datasource) || {},
+    var _existingNode$attrs3, _tableView$properties;
+    if (!ready) {
+      return null;
+    }
+    var _ref2 = (existingNode === null || existingNode === void 0 || (_existingNode$attrs3 = existingNode.attrs) === null || _existingNode$attrs3 === void 0 ? void 0 : _existingNode$attrs3.datasource) || {},
       _ref2$id = _ref2.id,
       datasourceId = _ref2$id === void 0 ? JIRA_LIST_OF_LINKS_DATASOURCE_ID : _ref2$id,
-      parameters = _ref2.parameters,
       _ref2$views = _ref2.views,
       views = _ref2$views === void 0 ? [] : _ref2$views;
     var _ref3 = views,
       _ref4 = _slicedToArray(_ref3, 1),
       tableView = _ref4[0];
-    var visibleColumnKeys = tableView === null || tableView === void 0 ? void 0 : (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(function (column) {
+    var visibleColumnKeys = tableView === null || tableView === void 0 || (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(function (column) {
       return column.key;
     });
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "jira-config-modal"
     }, /*#__PURE__*/React.createElement(JiraIssuesConfigModal, {
       datasourceId: datasourceId,
+      viewMode: isRegularCardNode ? 'count' : 'issue' // Want non-datasource cards to open in count view since they are in issue count view
+      ,
       visibleColumnKeys: visibleColumnKeys,
       parameters: parameters,
       onCancel: onClose,
@@ -58,8 +74,8 @@ export var DatasourceModal = function DatasourceModal(_ref) {
     }));
   }
   if (modalType === 'assets') {
-    var _existingNode$attrs2, _tableView$properties2;
-    var _ref5 = (existingNode === null || existingNode === void 0 ? void 0 : (_existingNode$attrs2 = existingNode.attrs) === null || _existingNode$attrs2 === void 0 ? void 0 : _existingNode$attrs2.datasource) || {},
+    var _existingNode$attrs4, _tableView$properties2;
+    var _ref5 = (existingNode === null || existingNode === void 0 || (_existingNode$attrs4 = existingNode.attrs) === null || _existingNode$attrs4 === void 0 ? void 0 : _existingNode$attrs4.datasource) || {},
       _ref5$id = _ref5.id,
       _datasourceId = _ref5$id === void 0 ? ASSETS_LIST_OF_LINKS_DATASOURCE_ID : _ref5$id,
       _parameters = _ref5.parameters,
@@ -68,7 +84,7 @@ export var DatasourceModal = function DatasourceModal(_ref) {
     var _ref6 = _views,
       _ref7 = _slicedToArray(_ref6, 1),
       _tableView = _ref7[0];
-    var _visibleColumnKeys = _tableView === null || _tableView === void 0 ? void 0 : (_tableView$properties2 = _tableView.properties) === null || _tableView$properties2 === void 0 ? void 0 : _tableView$properties2.columns.map(function (column) {
+    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;
     });
     return /*#__PURE__*/React.createElement("div", {

package/dist/esm/ui/EditDatasourceButton.js

@@ -1,20 +1,20 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
-import { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator, SmallerEditIcon } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource, getDatasourceType } from '@atlaskit/editor-common/utils';
 import { showDatasourceModal } from '../pm-plugins/actions';
 import { CardContextProvider } from './CardContextProvider';
+import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 var buttonStyles = css({
   pointerEvents: 'auto'
 });
 var buttonWrapperStyles = css({
   display: 'flex'
 });
+
+// Edit button in toolbar to open datasource modal. This button is shown for inline, block, and embed cards
+// if they can resolve into a datasource.
 var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardContext(_ref) {
   var cardContext = _ref.cardContext,
     intl = _ref.intl,
@@ -22,56 +22,19 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
     url = _ref.url,
     editorView = _ref.editorView,
     editorState = _ref.editorState;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    datasourceId = _useState2[0],
-    setDatasourceId = _useState2[1];
-  useEffect(function () {
-    var fetchDatasource = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _cardContext$connecti, _cardContext$connecti2, _datasources$, response, datasources;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              _context.t0 = url && cardContext;
-              if (!_context.t0) {
-                _context.next = 6;
-                break;
-              }
-              _context.next = 5;
-              return cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$connecti = cardContext.connections) === null || _cardContext$connecti === void 0 ? void 0 : (_cardContext$connecti2 = _cardContext$connecti.client) === null || _cardContext$connecti2 === void 0 ? void 0 : _cardContext$connecti2.fetchData(url);
-            case 5:
-              _context.t0 = _context.sent;
-            case 6:
-              response = _context.t0;
-              datasources = response && response.datasources || [];
-              setDatasourceId(((_datasources$ = datasources[0]) === null || _datasources$ === void 0 ? void 0 : _datasources$.id) || null);
-              _context.next = 14;
-              break;
-            case 11:
-              _context.prev = 11;
-              _context.t1 = _context["catch"](0);
-              setDatasourceId(null);
-            case 14:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[0, 11]]);
-      }));
-      return function fetchDatasource() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    void fetchDatasource();
-  }, [cardContext, url]);
+  var _useFetchDatasourceIn = useFetchDatasourceInfo({
+      isRegularCardNode: true,
+      url: url,
+      cardContext: cardContext
+    }),
+    datasourceId = _useFetchDatasourceIn.datasourceId;
   if (!datasourceId || !canRenderDatasource(datasourceId, false)) {
     return null;
   }
   if (url) {
     var _cardContext$store, _urlState$error;
-    var urlState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
-    if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
+    var urlState = cardContext === null || cardContext === void 0 || (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
+    if ((urlState === null || urlState === void 0 || (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
       return null;
     }
   }
@@ -94,14 +57,14 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
     testId: 'card-edit-datasource-button'
   }), jsx(Separator, null));
 };
-export var EditDatasourceButton = function EditDatasourceButton(_ref3) {
-  var intl = _ref3.intl,
-    editorAnalyticsApi = _ref3.editorAnalyticsApi,
-    url = _ref3.url,
-    editorView = _ref3.editorView,
-    editorState = _ref3.editorState;
-  return jsx(CardContextProvider, null, function (_ref4) {
-    var cardContext = _ref4.cardContext;
+export var EditDatasourceButton = function EditDatasourceButton(_ref2) {
+  var intl = _ref2.intl,
+    editorAnalyticsApi = _ref2.editorAnalyticsApi,
+    url = _ref2.url,
+    editorView = _ref2.editorView,
+    editorState = _ref2.editorState;
+  return jsx(CardContextProvider, null, function (_ref3) {
+    var cardContext = _ref3.cardContext;
     return jsx(EditDatasourceButtonWithCardContext, {
       url: url,
       intl: intl,

package/dist/esm/ui/EditLinkToolbar.js

@@ -110,9 +110,9 @@ export var EditLinkToolbar = /*#__PURE__*/function (_React$Component) {
         },
         onEscapeCallback: function onEscapeCallback(state, dispatch) {
           var tr = state.tr;
-          pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.hyperlink.actions.hideLinkToolbar(tr);
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.hyperlink.actions.hideLinkToolbar(tr);
           _hideLinkToolbar(tr);
-          forceFocusSelector === null || forceFocusSelector === void 0 ? void 0 : forceFocusSelector("[aria-label=\"".concat(linkToolbarMessages.editLink.defaultMessage, "\"]"))(tr);
+          forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector("[aria-label=\"".concat(linkToolbarMessages.editLink.defaultMessage, "\"]"))(tr);
           if (dispatch) {
             dispatch(tr);
             return true;
@@ -121,7 +121,7 @@ export var EditLinkToolbar = /*#__PURE__*/function (_React$Component) {
         },
         onClickAwayCallback: function onClickAwayCallback(state, dispatch) {
           var tr = state.tr;
-          pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.hyperlink.actions.hideLinkToolbar(tr);
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.hyperlink.actions.hideLinkToolbar(tr);
           if (dispatch) {
             dispatch(tr);
             return true;
@@ -142,7 +142,7 @@ export var editLink = function editLink(editorAnalyticsApi) {
     if (dispatch) {
       var tr = state.tr;
       showLinkToolbar(tr);
-      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildEditLinkPayload(type))(tr);
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(buildEditLinkPayload(type))(tr);
       dispatch(tr);
       return true;
     }
@@ -175,7 +175,7 @@ export var buildEditLinkToolbar = function buildEditLinkToolbar(_ref2) {
         text: displayInfo.title || '',
         node: node,
         featureFlags: featureFlags,
-        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector,
+        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector,
         onSubmit: function onSubmit(newHref, newText, inputMethod, analytic) {
           var urlChanged = newHref !== displayInfo.url;
           var titleChanged = newText !== displayInfo.title;
@@ -184,7 +184,7 @@ export var buildEditLinkToolbar = function buildEditLinkToolbar(_ref2) {
           // (even if the url was also changed) - we don't want to lose the custom title.
           if (titleChanged) {
             var _pluginInjectionApi$a;
-            return commandWithMetadata(changeSelectedCardToLink(newText, newHref, undefined, undefined, undefined, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions), {
+            return commandWithMetadata(changeSelectedCardToLink(newText, newHref, undefined, undefined, undefined, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions), {
               action: ACTION.UPDATED,
               inputMethod: inputMethod,
               sourceEvent: analytic

package/dist/esm/ui/EditorLinkingPlatformAnalytics/DatasourceEvents.js

@@ -13,8 +13,8 @@ function getDatasourceDisplay(datasourceAttrs) {
   return (_datasourceAttrs$data = datasourceAttrs.datasource.views[0]) === null || _datasourceAttrs$data === void 0 ? void 0 : _datasourceAttrs$data.type;
 }
 function getDisplayedColumnCount(datasourceAttrs) {
-  var _datasourceAttrs$data2, _datasourceAttrs$data3, _datasourceAttrs$data4, _datasourceAttrs$data5;
-  return (_datasourceAttrs$data2 = (_datasourceAttrs$data3 = datasourceAttrs.datasource.views[0]) === null || _datasourceAttrs$data3 === void 0 ? void 0 : (_datasourceAttrs$data4 = _datasourceAttrs$data3.properties) === null || _datasourceAttrs$data4 === void 0 ? void 0 : (_datasourceAttrs$data5 = _datasourceAttrs$data4.columns) === null || _datasourceAttrs$data5 === void 0 ? void 0 : _datasourceAttrs$data5.length) !== null && _datasourceAttrs$data2 !== void 0 ? _datasourceAttrs$data2 : 0;
+  var _datasourceAttrs$data2, _datasourceAttrs$data3;
+  return (_datasourceAttrs$data2 = (_datasourceAttrs$data3 = datasourceAttrs.datasource.views[0]) === null || _datasourceAttrs$data3 === void 0 || (_datasourceAttrs$data3 = _datasourceAttrs$data3.properties) === null || _datasourceAttrs$data3 === void 0 || (_datasourceAttrs$data3 = _datasourceAttrs$data3.columns) === null || _datasourceAttrs$data3 === void 0 ? void 0 : _datasourceAttrs$data3.length) !== null && _datasourceAttrs$data2 !== void 0 ? _datasourceAttrs$data2 : 0;
 }
 function getSearchMethod(creationMethod, metadata) {
   if (creationMethod === 'editor_paste' || creationMethod === 'editor_type') {
@@ -30,9 +30,9 @@ function getSearchMethod(creationMethod, metadata) {
 }
 function getAnalyticAttributesFromNode(datasourceAttrs, metadata) {
   var url = datasourceAttrs.url,
-    _datasourceAttrs$data6 = datasourceAttrs.datasource,
-    datasourceId = _datasourceAttrs$data6.id,
-    parameters = _datasourceAttrs$data6.parameters;
+    _datasourceAttrs$data4 = datasourceAttrs.datasource,
+    datasourceId = _datasourceAttrs$data4.id,
+    parameters = _datasourceAttrs$data4.parameters;
   var display = getDatasourceDisplay(datasourceAttrs);
   var inputMethod = '';
   var actions = [];

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

@@ -80,7 +80,7 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
   var _ref3 = cardState !== null && cardState !== void 0 ? cardState : {},
     datasourceTableRef = _ref3.datasourceTableRef,
     _ref3$layout = _ref3.layout,
-    layout = _ref3$layout === void 0 ? (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || 'center' : _ref3$layout;
+    layout = _ref3$layout === void 0 ? (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || 'center' : _ref3$layout;
   var isDatasource = !!(node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.datasource);
   var onLayoutChange = function onLayoutChange(layout) {
     if (pos === undefined) {

package/dist/esm/ui/LinkToolbarAppearance.js

@@ -46,8 +46,8 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
       };
       if (url) {
         var _cardContext$store, _urlState$error;
-        var urlState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
-        if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
+        var urlState = cardContext === null || cardContext === void 0 || (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
+        if ((urlState === null || urlState === void 0 || (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
           return null;
         }
       }

package/dist/esm/ui/useFetchDatasourceInfo.js

@@ -0,0 +1,78 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/** @jsx jsx */
+import { useEffect, useState } from 'react';
+export var useFetchDatasourceInfo = function useFetchDatasourceInfo(_ref) {
+  var isRegularCardNode = _ref.isRegularCardNode,
+    url = _ref.url,
+    cardContext = _ref.cardContext,
+    nodeParameters = _ref.nodeParameters;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    datasourceId = _useState2[0],
+    setDatasourceId = _useState2[1];
+  var _useState3 = useState(nodeParameters),
+    _useState4 = _slicedToArray(_useState3, 2),
+    parameters = _useState4[0],
+    setParameters = _useState4[1];
+  // Since fetchData() is async, using this ready check to see if we have the parameters before passing it to the modal.
+  // Only non-datasource nodes will be not ready initially since we need to fetch data.
+  var _useState5 = useState(!isRegularCardNode),
+    _useState6 = _slicedToArray(_useState5, 2),
+    ready = _useState6[0],
+    setReady = _useState6[1];
+  useEffect(function () {
+    var fetchDatasource = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _cardContext$connecti, _datasources$, _datasources$2, response, datasources;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              if (!(!url || !cardContext)) {
+                _context.next = 4;
+                break;
+              }
+              // Don't block rendering of modal of somehow we don't get these two args --> just open with empty params
+              setReady(true);
+              return _context.abrupt("return");
+            case 4:
+              _context.next = 6;
+              return cardContext === null || cardContext === void 0 || (_cardContext$connecti = cardContext.connections) === null || _cardContext$connecti === void 0 || (_cardContext$connecti = _cardContext$connecti.client) === null || _cardContext$connecti === void 0 ? void 0 : _cardContext$connecti.fetchData(url);
+            case 6:
+              response = _context.sent;
+              datasources = response && response.datasources || [];
+              setDatasourceId((_datasources$ = datasources[0]) === null || _datasources$ === void 0 ? void 0 : _datasources$.id);
+              setParameters((_datasources$2 = datasources[0]) === null || _datasources$2 === void 0 ? void 0 : _datasources$2.parameters);
+              setReady(true);
+              _context.next = 18;
+              break;
+            case 13:
+              _context.prev = 13;
+              _context.t0 = _context["catch"](0);
+              setDatasourceId(undefined);
+              setParameters(undefined);
+              // If fetch somehow errors, still set ready as true so we don't block the rendering of the modal.
+              // It will just open with empty params.
+              setReady(true);
+            case 18:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 13]]);
+      }));
+      return function fetchDatasource() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    if (isRegularCardNode) {
+      void fetchDatasource();
+    }
+  }, [isRegularCardNode, cardContext, url]);
+  return {
+    datasourceId: datasourceId,
+    parameters: parameters,
+    ready: ready
+  };
+};

package/dist/types/datasourceErrorBoundary.d.ts

@@ -3,8 +3,8 @@ import type { APIError } from '@atlaskit/smart-card';
 import type { DatasourceProps } from './nodeviews/datasource';
 export declare class DatasourceErrorBoundary extends React.Component<{
     url?: string;
-    unsupportedComponent: React.ComponentType;
-    handleError: () => void;
+    unsupportedComponent?: React.ComponentType;
+    handleError?: () => void;
     view: DatasourceProps['view'];
 }> {
     state: {

package/dist/types/nodeviews/datasource.d.ts

@@ -37,7 +37,6 @@ export declare class DatasourceComponent extends React.PureComponent<DatasourceC
 export declare class Datasource extends ReactNodeView<DatasourceProps> {
     private tableWidth;
     constructor(props: DatasourceProps);
-    updateNodeRemoveAttrs: () => void;
     createDomRef(): HTMLElement;
     render(): jsx.JSX.Element;
 }

package/dist/types/ui/DatasourceModal/ModalWithState.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { cardPlugin } from '../../plugin';
 declare const ModalWithState: ({ api, editorView, }: {
     api: ExtractInjectionAPI<typeof cardPlugin> | undefined;

package/dist/types/ui/DatasourceModal/index.d.ts

@@ -2,10 +2,12 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { DatasourceModalType } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CardContext } from '@atlaskit/smart-card';
 type DatasourceModalProps = {
     view: EditorView;
     editorAnalyticsApi?: EditorAnalyticsAPI;
     modalType?: DatasourceModalType;
+    cardContext?: CardContext;
 };
-export declare const DatasourceModal: ({ view, modalType }: DatasourceModalProps) => JSX.Element | null;
+export declare const DatasourceModal: ({ view, modalType, cardContext, }: DatasourceModalProps) => JSX.Element | null;
 export {};

package/dist/types/ui/EditDatasourceButton.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';

package/dist/types/ui/useFetchDatasourceInfo.d.ts

@@ -0,0 +1,14 @@
+import type { JiraIssueDatasourceParameters } from '@atlaskit/link-datasource';
+import type { CardContext } from '@atlaskit/link-provider';
+import type { DatasourceParameters } from '@atlaskit/linking-types';
+export interface useFetchDatasourceInfoProps {
+    isRegularCardNode: boolean;
+    url?: string;
+    cardContext?: CardContext;
+    nodeParameters?: DatasourceParameters | JiraIssueDatasourceParameters;
+}
+export declare const useFetchDatasourceInfo: ({ isRegularCardNode, url, cardContext, nodeParameters, }: useFetchDatasourceInfoProps) => {
+    datasourceId: string | undefined;
+    parameters: DatasourceParameters | undefined;
+    ready: boolean;
+};

package/dist/types-ts4.5/datasourceErrorBoundary.d.ts

@@ -3,8 +3,8 @@ import type { APIError } from '@atlaskit/smart-card';
 import type { DatasourceProps } from './nodeviews/datasource';
 export declare class DatasourceErrorBoundary extends React.Component<{
     url?: string;
-    unsupportedComponent: React.ComponentType;
-    handleError: () => void;
+    unsupportedComponent?: React.ComponentType;
+    handleError?: () => void;
     view: DatasourceProps['view'];
 }> {
     state: {

package/dist/types-ts4.5/nodeviews/datasource.d.ts

@@ -37,7 +37,6 @@ export declare class DatasourceComponent extends React.PureComponent<DatasourceC
 export declare class Datasource extends ReactNodeView<DatasourceProps> {
     private tableWidth;
     constructor(props: DatasourceProps);
-    updateNodeRemoveAttrs: () => void;
     createDomRef(): HTMLElement;
     render(): jsx.JSX.Element;
 }

package/dist/types-ts4.5/ui/DatasourceModal/ModalWithState.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { cardPlugin } from '../../plugin';
 declare const ModalWithState: ({ api, editorView, }: {
     api: ExtractInjectionAPI<typeof cardPlugin> | undefined;