@atlaskit/editor-plugin-card 0.9.1 → 0.9.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-card
 
+## 0.9.2
+
+### Patch Changes
+
+- [#41405](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41405) [`6619f042a24`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6619f042a24) - [ux] Fix issue where any inline/block/embeds don't open up datasource modal with proper info
+
 ## 0.9.1
 
 ### Patch Changes

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _datasourceErrorBoundary = require("../../datasourceErrorBoundary");
+var _CardContextProvider = require("../CardContextProvider");
 var _index = require("./index");
 var ModalWithState = function ModalWithState(_ref) {
   var api = _ref.api,
@@ -19,9 +20,13 @@ var ModalWithState = function ModalWithState(_ref) {
   }
   return /*#__PURE__*/_react.default.createElement(_datasourceErrorBoundary.DatasourceErrorBoundary, {
     view: editorView
-  }, /*#__PURE__*/_react.default.createElement(_index.DatasourceModal, {
-    view: editorView,
-    modalType: cardState === null || cardState === void 0 ? void 0 : cardState.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
+    });
   }));
 };
 var _default = exports.default = ModalWithState;

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

@@ -13,17 +13,29 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _linkDatasource = require("@atlaskit/link-datasource");
 var _actions = require("../../pm-plugins/actions");
 var _doc = require("../../pm-plugins/doc");
+var _useFetchDatasourceInfo = require("../useFetchDatasourceInfo");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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$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 _state.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 = (0, _useFetchDatasourceInfo.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 = (0, _react.useCallback)(function () {
     dispatch((0, _actions.hideDatasourceModal)(state.tr));
   }, [dispatch, state.tr]);
@@ -44,11 +56,13 @@ var DatasourceModal = exports.DatasourceModal = function DatasourceModal(_ref) {
     }
   }, [existingNode, state, view]);
   if (modalType === 'jira') {
-    var _existingNode$attrs, _tableView$properties;
-    var _ref2 = (existingNode === null || existingNode === 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 ? _linkDatasource.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,
@@ -61,6 +75,8 @@ var DatasourceModal = exports.DatasourceModal = function DatasourceModal(_ref) {
       "data-testid": "jira-config-modal"
     }, /*#__PURE__*/_react.default.createElement(_linkDatasource.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,
@@ -68,8 +84,8 @@ var DatasourceModal = exports.DatasourceModal = function DatasourceModal(_ref) {
     }));
   }
   if (modalType === 'assets') {
-    var _existingNode$attrs2, _tableView$properties2;
-    var _ref5 = (existingNode === null || existingNode === 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 ? _linkDatasource.ASSETS_LIST_OF_LINKS_DATASOURCE_ID : _ref5$id,
       _parameters = _ref5.parameters,

package/dist/cjs/ui/EditDatasourceButton.js

@@ -1,28 +1,27 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.editDatasource = exports.EditDatasourceButton = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _actions = require("../pm-plugins/actions");
 var _CardContextProvider = require("./CardContextProvider");
+var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
 /** @jsx jsx */
 
-var buttonStyles = (0, _react2.css)({
+var buttonStyles = (0, _react.css)({
   pointerEvents: 'auto'
 });
-var buttonWrapperStyles = (0, _react2.css)({
+var buttonWrapperStyles = (0, _react.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,
@@ -30,49 +29,12 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
     url = _ref.url,
     editorView = _ref.editorView,
     editorState = _ref.editorState;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    datasourceId = _useState2[0],
-    setDatasourceId = _useState2[1];
-  (0, _react.useEffect)(function () {
-    var fetchDatasource = /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var _cardContext$connecti, _datasources$, response, datasources;
-        return _regenerator.default.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 || (_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 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 = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
+      isRegularCardNode: true,
+      url: url,
+      cardContext: cardContext
+    }),
+    datasourceId = _useFetchDatasourceIn.datasourceId;
   if (!datasourceId || !(0, _utils.canRenderDatasource)(datasourceId, false)) {
     return null;
   }
@@ -89,28 +51,28 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
       editorView.focus();
     }
   };
-  return (0, _react2.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: buttonWrapperStyles
-  }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+  }, (0, _react.jsx)(_ui.FloatingToolbarButton, {
     css: buttonStyles,
     title: intl.formatMessage(_messages.cardMessages.datasourceTitle),
-    icon: (0, _react2.jsx)(_ui.SmallerEditIcon, null),
+    icon: (0, _react.jsx)(_ui.SmallerEditIcon, null),
     selected: false,
     onClick: function onClick() {
       return dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
     },
     testId: 'card-edit-datasource-button'
-  }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+  }), (0, _react.jsx)(_ui.FloatingToolbarSeparator, null));
 };
-var EditDatasourceButton = exports.EditDatasourceButton = function EditDatasourceButton(_ref3) {
-  var intl = _ref3.intl,
-    editorAnalyticsApi = _ref3.editorAnalyticsApi,
-    url = _ref3.url,
-    editorView = _ref3.editorView,
-    editorState = _ref3.editorState;
-  return (0, _react2.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref4) {
-    var cardContext = _ref4.cardContext;
-    return (0, _react2.jsx)(EditDatasourceButtonWithCardContext, {
+var EditDatasourceButton = exports.EditDatasourceButton = function EditDatasourceButton(_ref2) {
+  var intl = _ref2.intl,
+    editorAnalyticsApi = _ref2.editorAnalyticsApi,
+    url = _ref2.url,
+    editorView = _ref2.editorView,
+    editorState = _ref2.editorState;
+  return (0, _react.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref3) {
+    var cardContext = _ref3.cardContext;
+    return (0, _react.jsx)(EditDatasourceButtonWithCardContext, {
       url: url,
       intl: intl,
       editorAnalyticsApi: editorAnalyticsApi,

package/dist/cjs/ui/useFetchDatasourceInfo.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFetchDatasourceInfo = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+/** @jsx jsx */
+
+var useFetchDatasourceInfo = exports.useFetchDatasourceInfo = function useFetchDatasourceInfo(_ref) {
+  var isRegularCardNode = _ref.isRegularCardNode,
+    url = _ref.url,
+    cardContext = _ref.cardContext,
+    nodeParameters = _ref.nodeParameters;
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    datasourceId = _useState2[0],
+    setDatasourceId = _useState2[1];
+  var _useState3 = (0, _react.useState)(nodeParameters),
+    _useState4 = (0, _slicedToArray2.default)(_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 = (0, _react.useState)(!isRegularCardNode),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    ready = _useState6[0],
+    setReady = _useState6[1];
+  (0, _react.useEffect)(function () {
+    var fetchDatasource = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var _cardContext$connecti, _datasources$, _datasources$2, response, datasources;
+        return _regenerator.default.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/es2019/ui/DatasourceModal/ModalWithState.js

@@ -1,6 +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';
 const ModalWithState = ({
   api,
@@ -14,9 +15,12 @@ const ModalWithState = ({
   }
   return /*#__PURE__*/React.createElement(DatasourceErrorBoundary, {
     view: editorView
-  }, /*#__PURE__*/React.createElement(DatasourceModal, {
+  }, /*#__PURE__*/React.createElement(CardContextProvider, null, ({
+    cardContext
+  }) => /*#__PURE__*/React.createElement(DatasourceModal, {
     view: editorView,
-    modalType: cardState === null || cardState === void 0 ? void 0 : cardState.datasourceModalType
-  }));
+    modalType: cardState === null || cardState === void 0 ? void 0 : cardState.datasourceModalType,
+    cardContext: cardContext
+  })));
 };
 export default ModalWithState;

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

@@ -3,10 +3,13 @@ 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 const DatasourceModal = ({
   view,
-  modalType
+  modalType,
+  cardContext
 }) => {
+  var _existingNode$attrs, _existingNode$attrs2, _existingNode$attrs2$;
   const {
     dispatch,
     state
@@ -15,6 +18,16 @@ export const DatasourceModal = ({
     selection
   } = state;
   const existingNode = selection instanceof NodeSelection ? selection.node : undefined;
+  const isRegularCardNode = !!(existingNode && !(existingNode !== null && existingNode !== void 0 && (_existingNode$attrs = existingNode.attrs) !== null && _existingNode$attrs !== void 0 && _existingNode$attrs.datasource));
+  const {
+    parameters,
+    ready
+  } = useFetchDatasourceInfo({
+    isRegularCardNode,
+    url: existingNode === null || existingNode === void 0 ? void 0 : existingNode.attrs.url,
+    cardContext,
+    nodeParameters: existingNode === null || existingNode === void 0 ? void 0 : (_existingNode$attrs2 = existingNode.attrs) === null || _existingNode$attrs2 === void 0 ? void 0 : (_existingNode$attrs2$ = _existingNode$attrs2.datasource) === null || _existingNode$attrs2$ === void 0 ? void 0 : _existingNode$attrs2$.parameters
+  });
   const onClose = useCallback(() => {
     dispatch(hideDatasourceModal(state.tr));
   }, [dispatch, state.tr]);
@@ -35,18 +48,22 @@ export const DatasourceModal = ({
     }
   }, [existingNode, state, view]);
   if (modalType === 'jira') {
-    var _existingNode$attrs, _tableView$properties;
+    var _existingNode$attrs3, _tableView$properties;
+    if (!ready) {
+      return null;
+    }
     const {
       id: datasourceId = JIRA_LIST_OF_LINKS_DATASOURCE_ID,
-      parameters,
       views = []
-    } = (existingNode === null || existingNode === void 0 ? void 0 : (_existingNode$attrs = existingNode.attrs) === null || _existingNode$attrs === void 0 ? void 0 : _existingNode$attrs.datasource) || {};
+    } = (existingNode === null || existingNode === void 0 ? void 0 : (_existingNode$attrs3 = existingNode.attrs) === null || _existingNode$attrs3 === void 0 ? void 0 : _existingNode$attrs3.datasource) || {};
     const [tableView] = views;
     const visibleColumnKeys = tableView === null || tableView === void 0 ? void 0 : (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(column => 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,
@@ -54,12 +71,12 @@ export const DatasourceModal = ({
     }));
   }
   if (modalType === 'assets') {
-    var _existingNode$attrs2, _tableView$properties2;
+    var _existingNode$attrs4, _tableView$properties2;
     const {
       id: datasourceId = ASSETS_LIST_OF_LINKS_DATASOURCE_ID,
       parameters,
       views = []
-    } = (existingNode === null || existingNode === void 0 ? void 0 : (_existingNode$attrs2 = existingNode.attrs) === null || _existingNode$attrs2 === void 0 ? void 0 : _existingNode$attrs2.datasource) || {};
+    } = (existingNode === null || existingNode === void 0 ? void 0 : (_existingNode$attrs4 = existingNode.attrs) === null || _existingNode$attrs4 === void 0 ? void 0 : _existingNode$attrs4.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", {

package/dist/es2019/ui/EditDatasourceButton.js

@@ -1,17 +1,20 @@
 /** @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';
 const buttonStyles = css({
   pointerEvents: 'auto'
 });
 const 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.
 const EditDatasourceButtonWithCardContext = ({
   cardContext,
   intl,
@@ -20,20 +23,13 @@ const EditDatasourceButtonWithCardContext = ({
   editorView,
   editorState
 }) => {
-  const [datasourceId, setDatasourceId] = useState(null);
-  useEffect(() => {
-    const fetchDatasource = async () => {
-      try {
-        var _cardContext$connecti, _cardContext$connecti2, _datasources$;
-        const response = url && cardContext && (await (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)));
-        const datasources = response && response.datasources || [];
-        setDatasourceId(((_datasources$ = datasources[0]) === null || _datasources$ === void 0 ? void 0 : _datasources$.id) || null);
-      } catch (e) {
-        setDatasourceId(null);
-      }
-    };
-    void fetchDatasource();
-  }, [cardContext, url]);
+  const {
+    datasourceId
+  } = useFetchDatasourceInfo({
+    isRegularCardNode: true,
+    url,
+    cardContext
+  });
   if (!datasourceId || !canRenderDatasource(datasourceId, false)) {
     return null;
   }

package/dist/es2019/ui/useFetchDatasourceInfo.js

@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import { useEffect, useState } from 'react';
+export const useFetchDatasourceInfo = ({
+  isRegularCardNode,
+  url,
+  cardContext,
+  nodeParameters
+}) => {
+  const [datasourceId, setDatasourceId] = useState(undefined);
+  const [parameters, setParameters] = useState(nodeParameters);
+  // 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.
+  const [ready, setReady] = useState(!isRegularCardNode);
+  useEffect(() => {
+    const fetchDatasource = async () => {
+      try {
+        var _cardContext$connecti, _cardContext$connecti2, _datasources$, _datasources$2;
+        if (!url || !cardContext) {
+          // Don't block rendering of modal of somehow we don't get these two args --> just open with empty params
+          setReady(true);
+          return;
+        }
+        const response = await (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));
+        const 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);
+      } catch (e) {
+        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);
+      }
+    };
+    if (isRegularCardNode) {
+      void fetchDatasource();
+    }
+  }, [isRegularCardNode, cardContext, url]);
+  return {
+    datasourceId,
+    parameters,
+    ready
+  };
+};

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

@@ -1,6 +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,
@@ -12,9 +13,13 @@ var ModalWithState = function ModalWithState(_ref) {
   }
   return /*#__PURE__*/React.createElement(DatasourceErrorBoundary, {
     view: editorView
-  }, /*#__PURE__*/React.createElement(DatasourceModal, {
-    view: editorView,
-    modalType: cardState === null || cardState === void 0 ? void 0 : cardState.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
+    });
   }));
 };
 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,11 +46,13 @@ export var DatasourceModal = function DatasourceModal(_ref) {
     }
   }, [existingNode, state, view]);
   if (modalType === 'jira') {
-    var _existingNode$attrs, _tableView$properties;
-    var _ref2 = (existingNode === null || existingNode === 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,
@@ -51,6 +65,8 @@ export var DatasourceModal = function DatasourceModal(_ref) {
       "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 || (_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,