@atlaskit/editor-plugin-card 2.6.2 → 2.6.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-card
 
+## 2.6.4
+
+### Patch Changes
+
+- [#122063](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122063)
+  [`c136e556d086d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c136e556d086d) -
+  [ux] Apply live page and check for live view in card and hyperlink plugin
+
+## 2.6.3
+
+### Patch Changes
+
+- [#121784](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/121784)
+  [`a6117088af0ad`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a6117088af0ad) -
+  The edit toolbar button is retrieving metadata from /data endpoint for analytics metadata.
+
 ## 2.6.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/genericCard.js

@@ -32,7 +32,8 @@ var WithClickHandler = function WithClickHandler(_ref) {
   var pluginInjectionApi = _ref.pluginInjectionApi,
     url = _ref.url,
     onClickCallback = _ref.onClickCallback,
-    children = _ref.children;
+    children = _ref.children,
+    __livePage = _ref.__livePage;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
   var onClick = (0, _react.useCallback)(function (event) {
@@ -53,7 +54,7 @@ var WithClickHandler = function WithClickHandler(_ref) {
      *
      * const allowNavigation = isLivePage && !onClickCallback;
      */
-    var _allowNavigation = !onClickCallback;
+    var _allowNavigation = __livePage && !onClickCallback;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children({
       onClick: _allowNavigation ? undefined : onClick
     }));
@@ -122,7 +123,8 @@ function Card(SmartCardComponent, UnsupportedComponent) {
         }, /*#__PURE__*/_react.default.createElement(WithClickHandler, {
           pluginInjectionApi: pluginInjectionApi,
           onClickCallback: onClickCallback,
-          url: url
+          url: url,
+          __livePage: this.props.__livePage
         }, function (_ref2) {
           var onClick = _ref2.onClick;
           return /*#__PURE__*/_react.default.createElement(SmartCardComponent, (0, _extends2.default)({

package/dist/cjs/nodeviews/inlineCard.js

@@ -103,7 +103,7 @@ var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_r
 var WrappedInlineCardWithAwareness = (0, _genericCard.Card)(_inlineCardWithAwareness.InlineCardWithAwareness, _ui.UnsupportedInline);
 var WrappedInlineCard = (0, _genericCard.Card)(InlineCard, _ui.UnsupportedInline);
 function InlineCardNodeView(props) {
-  var _useSharedPluginState;
+  var _floatingToolbarState;
   var useAlternativePreloader = props.useAlternativePreloader,
     node = props.node,
     view = props.view,
@@ -114,20 +114,20 @@ function InlineCardNodeView(props) {
     allowBlockCards = props.allowBlockCards,
     enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
     pluginInjectionApi = props.pluginInjectionApi,
-    onClickCallback = props.onClickCallback;
+    onClickCallback = props.onClickCallback,
+    __livePage = props.__livePage;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOverlayHovered = _useState2[0],
     setIsOverlayHovered = _useState2[1];
-  var floatingToolbarNode = (_useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['floatingToolbar']).floatingToolbarState) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.configWithNodeInfo) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.node;
-  if ((0, _platformFeatureFlags.fg)('platform.linking-platform.smart-links-in-live-pages')) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['floatingToolbar', 'editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState,
+    floatingToolbarState = _useSharedPluginState.floatingToolbarState;
+  var floatingToolbarNode = floatingToolbarState === null || floatingToolbarState === void 0 || (_floatingToolbarState = floatingToolbarState.configWithNodeInfo) === null || _floatingToolbarState === void 0 ? void 0 : _floatingToolbarState.node;
+  if (__livePage && (0, _platformFeatureFlags.fg)('platform.linking-platform.smart-links-in-live-pages')) {
     var showHoverPreview = floatingToolbarNode !== node;
     var livePagesHoverCardFadeInDelay = 800;
-    return /*#__PURE__*/_react.default.createElement(_ConfigureOverlay.default, {
-      targetElementPos: getPos(),
-      view: view,
-      isHoveredCallback: setIsOverlayHovered
-    }, /*#__PURE__*/_react.default.createElement(WrappedInlineCard, {
+    var inlineCard = /*#__PURE__*/_react.default.createElement(WrappedInlineCard, {
       isHovered: isOverlayHovered,
       node: node,
       view: view,
@@ -140,7 +140,12 @@ function InlineCardNodeView(props) {
       hoverPreviewOptions: {
         fadeInDelay: livePagesHoverCardFadeInDelay
       }
-    }));
+    });
+    return (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? inlineCard : /*#__PURE__*/_react.default.createElement(_ConfigureOverlay.default, {
+      targetElementPos: getPos(),
+      view: view,
+      isHoveredCallback: setIsOverlayHovered
+    }, inlineCard);
   }
   return /*#__PURE__*/_react.default.createElement(WrappedInlineCardWithAwareness, (0, _extends2.default)({
     node: node,

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

@@ -12,8 +12,8 @@ Object.defineProperty(exports, "pluginKey", {
   }
 });
 exports.stopEvent = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactNodeView = require("@atlaskit/editor-common/react-node-view");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
@@ -76,9 +76,10 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
       showUpgradeDiscoverability = options.showUpgradeDiscoverability,
       allowEmbeds = options.allowEmbeds,
       allowBlockCards = options.allowBlockCards,
-      onClickCallback = options.onClickCallback;
+      onClickCallback = options.onClickCallback,
+      __livePage = options.__livePage;
     var enableInlineUpgradeFeatures = !!showUpgradeDiscoverability && platform !== 'mobile';
-    var inlineCardViewProducer = (0, _reactNodeView.getInlineNodeViewProducer)({
+    var inlineCardViewProducer = (0, _reactNodeView.getInlineNodeViewProducer)(_objectSpread({
       pmPluginFactoryParams: pmPluginFactoryParams,
       Component: _inlineCard.InlineCardNodeView,
       extraComponentProps: {
@@ -89,12 +90,14 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
         allowEmbeds: allowEmbeds,
         allowBlockCards: allowBlockCards,
         pluginInjectionApi: pluginInjectionApi,
-        onClickCallback: onClickCallback
-      },
+        onClickCallback: onClickCallback,
+        __livePage: __livePage
+      }
+    }, __livePage && (0, _platformFeatureFlags.fg)('platform.linking-platform.smart-links-in-live-pages') && {
       extraNodeViewProps: {
         stopEvent: stopEvent
       }
-    });
+    }));
     return new _safePlugin.SafePlugin({
       state: {
         init: function init() {

package/dist/cjs/toolbar.js

@@ -476,6 +476,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       render: function render(editorView) {
         return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
           datasourceId: datasourceId,
+          node: node,
           key: "edit-toolbar-item",
           url: metadata.url,
           intl: intl,

package/dist/cjs/ui/{EditToolbarButton.js → EditToolbarButton/EditToolbarButtonPresentation.js}

@@ -4,9 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EditToolbarButton = void 0;
+exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
@@ -16,33 +15,24 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _menu = require("@atlaskit/menu");
 var _primitives = require("@atlaskit/primitives");
-var _EditDatasourceButton = require("../ui/EditDatasourceButton");
-var _utils = require("../utils");
-var _CardContextProvider = require("./CardContextProvider");
-var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
-var _excluded = ["extensionKey"];
+var _utils = require("../../utils");
+var _EditDatasourceButton = require("../EditDatasourceButton");
 /** @jsx jsx */
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var dropdownExpandContainer = (0, _react2.css)({
   margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
 });
-var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext(props) {
-  var _response$datasourceI;
-  var cardContext = props.cardContext,
-    currentAppearance = props.currentAppearance,
-    editorAnalyticsApi = props.editorAnalyticsApi,
-    editorView = props.editorView,
-    intl = props.intl,
-    onLinkEditClick = props.onLinkEditClick,
-    url = props.url;
-  var _useFetchDatasourceIn = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
-      isRegularCardNode: true,
-      url: url,
-      cardContext: cardContext
-    }),
-    extensionKey = _useFetchDatasourceIn.extensionKey,
-    response = (0, _objectWithoutProperties2.default)(_useFetchDatasourceIn, _excluded);
-  var datasourceId = (_response$datasourceI = response.datasourceId) !== null && _response$datasourceI !== void 0 ? _response$datasourceI : props.datasourceId;
+var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref) {
+  var datasourceId = _ref.datasourceId,
+    currentAppearance = _ref.currentAppearance,
+    editorAnalyticsApi = _ref.editorAnalyticsApi,
+    editVariant = _ref.editVariant,
+    editorView = _ref.editorView,
+    extensionKey = _ref.extensionKey,
+    onLinkEditClick = _ref.onLinkEditClick,
+    intl = _ref.intl;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
@@ -62,25 +52,6 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
       (0, _utils.focusEditorView)(editorView);
     }
   }, [editorView, onLinkEditClick]);
-  var editVariant = (0, _react.useMemo)(function () {
-    var hasUrl = url !== null && url !== undefined;
-    if (!datasourceId || !(0, _utils.isDatasourceConfigEditable)(datasourceId)) {
-      if (hasUrl) {
-        return 'edit-link';
-      }
-      return 'none';
-    }
-    if (hasUrl) {
-      var _cardContext$store, _urlState$error;
-      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 'edit-link';
-      }
-      return 'edit-dropdown';
-    } else {
-      return 'edit-datasource';
-    }
-  }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
   var onEditDatasource = (0, _react.useCallback)(function () {
     if (editorView && datasourceId) {
       (0, _EditDatasourceButton.editDatasource)(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
@@ -150,25 +121,4 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
       return null;
   }
 };
-var EditToolbarButton = exports.EditToolbarButton = function EditToolbarButton(props) {
-  var currentAppearance = props.currentAppearance,
-    datasourceId = props.datasourceId,
-    editorAnalyticsApi = props.editorAnalyticsApi,
-    editorView = props.editorView,
-    intl = props.intl,
-    onLinkEditClick = props.onLinkEditClick,
-    url = props.url;
-  return (0, _react2.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref) {
-    var cardContext = _ref.cardContext;
-    return (0, _react2.jsx)(EditToolbarButtonWithCardContext, {
-      datasourceId: datasourceId,
-      url: url,
-      intl: intl,
-      editorAnalyticsApi: editorAnalyticsApi,
-      editorView: editorView,
-      cardContext: cardContext,
-      onLinkEditClick: onLinkEditClick,
-      currentAppearance: currentAppearance
-    });
-  });
-};
+var _default = exports.default = EditToolbarButtonPresentation;

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

@@ -0,0 +1,286 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditToolbarButton = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _ui = require("@atlaskit/editor-common/ui");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _menu = require("@atlaskit/menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
+var _EditDatasourceButton = require("../../ui/EditDatasourceButton");
+var _utils = require("../../utils");
+var _CardContextProvider = require("../CardContextProvider");
+var _useFetchDatasourceDataInfo = require("../useFetchDatasourceDataInfo");
+var _useFetchDatasourceInfo = require("../useFetchDatasourceInfo");
+var _EditToolbarButtonPresentation = _interopRequireDefault(require("./EditToolbarButtonPresentation"));
+var _excluded = ["extensionKey"];
+/** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var dropdownExpandContainer = (0, _react2.css)({
+  margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
+});
+var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext(props) {
+  var _response$datasourceI;
+  var cardContext = props.cardContext,
+    currentAppearance = props.currentAppearance,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    editorView = props.editorView,
+    intl = props.intl,
+    onLinkEditClick = props.onLinkEditClick,
+    url = props.url;
+  var _useFetchDatasourceIn = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
+      isRegularCardNode: true,
+      url: url,
+      cardContext: cardContext
+    }),
+    extensionKey = _useFetchDatasourceIn.extensionKey,
+    response = (0, _objectWithoutProperties2.default)(_useFetchDatasourceIn, _excluded);
+  var datasourceId = (_response$datasourceI = response.datasourceId) !== null && _response$datasourceI !== void 0 ? _response$datasourceI : props.datasourceId;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var containerRef = (0, _react.useRef)();
+  var toggleOpen = function toggleOpen() {
+    return setIsOpen(function (open) {
+      return !open;
+    });
+  };
+  var onClose = function onClose() {
+    return setIsOpen(false);
+  };
+  var onEditLink = (0, _react.useCallback)(function () {
+    if (editorView) {
+      onLinkEditClick(editorView.state, editorView.dispatch);
+      (0, _utils.focusEditorView)(editorView);
+    }
+  }, [editorView, onLinkEditClick]);
+  var editVariant = (0, _react.useMemo)(function () {
+    var hasUrl = url !== null && url !== undefined;
+    if (!datasourceId || !(0, _utils.isDatasourceConfigEditable)(datasourceId)) {
+      if (hasUrl) {
+        return 'edit-link';
+      }
+      return 'none';
+    }
+    if (hasUrl) {
+      var _cardContext$store, _urlState$error;
+      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 'edit-link';
+      }
+      return 'edit-dropdown';
+    } else {
+      return 'edit-datasource';
+    }
+  }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
+  var onEditDatasource = (0, _react.useCallback)(function () {
+    if (editorView && datasourceId) {
+      (0, _EditDatasourceButton.editDatasource)(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
+      (0, _utils.focusEditorView)(editorView);
+    }
+  }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
+  switch (editVariant) {
+    case 'edit-link':
+      {
+        return (0, _react2.jsx)(_primitives.Flex, {
+          gap: "space.050"
+        }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+          testId: "edit-link",
+          onClick: onEditLink
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.linkToolbarMessages.editLink)), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+      }
+    case 'edit-datasource':
+      {
+        return (0, _react2.jsx)(_primitives.Flex, {
+          gap: "space.050"
+        }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+          testId: "edit-datasource",
+          tooltipContent: intl.formatMessage(_messages.linkToolbarMessages.editDatasourceStandaloneTooltip),
+          onClick: onEditDatasource
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.linkToolbarMessages.editDatasourceStandalone)), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+      }
+    case 'edit-dropdown':
+      {
+        var trigger = (0, _react2.jsx)(_primitives.Flex, {
+          gap: "space.050"
+        }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+          testId: "edit-dropdown-trigger",
+          iconAfter: (0, _react2.jsx)("span", {
+            css: dropdownExpandContainer
+          }, (0, _react2.jsx)(_chevronDown.default, {
+            label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
+          })),
+          onClick: toggleOpen,
+          selected: isOpen,
+          disabled: false,
+          ariaHasPopup: true
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownTriggerTitle)), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+        return (0, _react2.jsx)(_primitives.Flex, {
+          ref: containerRef
+        }, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
+          mountTo: containerRef.current,
+          isOpen: isOpen,
+          handleClickOutside: onClose,
+          handleEscapeKeydown: onClose,
+          trigger: trigger,
+          scrollableElement: containerRef.current,
+          arrowKeyNavigationProviderOptions: {
+            type: _uiMenu.ArrowKeyNavigationType.MENU
+          }
+        }, (0, _react2.jsx)(_menu.ButtonItem, {
+          key: "edit.link",
+          onClick: onEditLink,
+          testId: "edit-dropdown-edit-link-item"
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownEditLinkTitle)), (0, _react2.jsx)(_menu.ButtonItem, {
+          key: "edit.datasource",
+          onClick: onEditDatasource,
+          testId: "edit-dropdown-edit-datasource-item"
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownEditDatasourceTitle))));
+      }
+    case 'none':
+    default:
+      return null;
+  }
+};
+var EditToolbarButtonWithUrl = function EditToolbarButtonWithUrl(props) {
+  var cardContext = props.cardContext,
+    currentAppearance = props.currentAppearance,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    editorView = props.editorView,
+    intl = props.intl,
+    onLinkEditClick = props.onLinkEditClick,
+    url = props.url;
+  var _useFetchDatasourceIn2 = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
+      isRegularCardNode: true,
+      url: url,
+      cardContext: cardContext
+    }),
+    extensionKey = _useFetchDatasourceIn2.extensionKey,
+    datasourceId = _useFetchDatasourceIn2.datasourceId;
+  var editVariant = (0, _react.useMemo)(function () {
+    var _cardContext$store2, _urlState$error2;
+    if (!datasourceId || !(0, _utils.isDatasourceConfigEditable)(datasourceId)) {
+      return 'edit-link';
+    }
+    var urlState = cardContext === null || cardContext === void 0 || (_cardContext$store2 = cardContext.store) === null || _cardContext$store2 === void 0 ? void 0 : _cardContext$store2.getState()[url];
+    if ((urlState === null || urlState === void 0 || (_urlState$error2 = urlState.error) === null || _urlState$error2 === void 0 ? void 0 : _urlState$error2.kind) === 'fatal') {
+      return 'edit-link';
+    }
+    return 'edit-dropdown';
+  }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
+  return (0, _react2.jsx)(_EditToolbarButtonPresentation.default, {
+    datasourceId: datasourceId,
+    currentAppearance: currentAppearance,
+    editorAnalyticsApi: editorAnalyticsApi,
+    editVariant: editVariant,
+    editorView: editorView,
+    extensionKey: extensionKey,
+    onLinkEditClick: onLinkEditClick,
+    intl: intl
+  });
+};
+var EditToolbarButtonWithDatasourceId = function EditToolbarButtonWithDatasourceId(props) {
+  var currentAppearance = props.currentAppearance,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    editorView = props.editorView,
+    intl = props.intl,
+    onLinkEditClick = props.onLinkEditClick,
+    datasourceId = props.datasourceId,
+    node = props.node;
+  var fetchData = (0, _react.useMemo)(function () {
+    try {
+      var _attrs$datasource$vie;
+      var attrs = node.attrs;
+      var parameters = attrs.datasource.parameters;
+      var visibleColumnKeys = (_attrs$datasource$vie = attrs.datasource.views[0]) === null || _attrs$datasource$vie === void 0 || (_attrs$datasource$vie = _attrs$datasource$vie.properties) === null || _attrs$datasource$vie === void 0 ? void 0 : _attrs$datasource$vie.columns.map(function (c) {
+        return c.key;
+      });
+      return {
+        parameters: parameters,
+        visibleColumnKeys: visibleColumnKeys
+      };
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+  }, [node.attrs]);
+  var _useFetchDatasourceDa = (0, _useFetchDatasourceDataInfo.useFetchDatasourceDataInfo)({
+      datasourceId: datasourceId,
+      parameters: fetchData === null || fetchData === void 0 ? void 0 : fetchData.parameters,
+      visibleColumnKeys: fetchData === null || fetchData === void 0 ? void 0 : fetchData.visibleColumnKeys
+    }),
+    extensionKey = _useFetchDatasourceDa.extensionKey;
+  var editVariant = (0, _react.useMemo)(function () {
+    if (!datasourceId || !(0, _utils.isDatasourceConfigEditable)(datasourceId)) {
+      return 'none';
+    }
+    return 'edit-datasource';
+  }, [datasourceId]);
+  return (0, _react2.jsx)(_EditToolbarButtonPresentation.default, {
+    datasourceId: datasourceId,
+    currentAppearance: currentAppearance,
+    editorAnalyticsApi: editorAnalyticsApi,
+    editVariant: editVariant,
+    editorView: editorView,
+    extensionKey: extensionKey,
+    onLinkEditClick: onLinkEditClick,
+    intl: intl
+  });
+};
+var EditToolbarButton = exports.EditToolbarButton = function EditToolbarButton(props) {
+  var currentAppearance = props.currentAppearance,
+    datasourceId = props.datasourceId,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    editorView = props.editorView,
+    intl = props.intl,
+    onLinkEditClick = props.onLinkEditClick,
+    url = props.url;
+  return (0, _react2.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref) {
+    var cardContext = _ref.cardContext;
+    if ((0, _platformFeatureFlags.fg)('enable_datasource_nourl_edit_dropdown_datafetch')) {
+      if (props.url) {
+        return (0, _react2.jsx)(EditToolbarButtonWithUrl, {
+          url: props.url,
+          intl: intl,
+          editorAnalyticsApi: editorAnalyticsApi,
+          editorView: editorView,
+          cardContext: cardContext,
+          onLinkEditClick: onLinkEditClick,
+          currentAppearance: currentAppearance
+        });
+      }
+      if (props.datasourceId && props.node) {
+        return (0, _react2.jsx)(EditToolbarButtonWithDatasourceId, {
+          datasourceId: props.datasourceId,
+          node: props.node,
+          intl: intl,
+          editorAnalyticsApi: editorAnalyticsApi,
+          editorView: editorView,
+          onLinkEditClick: onLinkEditClick,
+          currentAppearance: currentAppearance
+        });
+      }
+    }
+    return (0, _react2.jsx)(EditToolbarButtonWithCardContext, {
+      datasourceId: datasourceId,
+      url: url,
+      intl: intl,
+      editorAnalyticsApi: editorAnalyticsApi,
+      editorView: editorView,
+      cardContext: cardContext,
+      onLinkEditClick: onLinkEditClick,
+      currentAppearance: currentAppearance
+    });
+  });
+};

package/dist/cjs/ui/EditToolbarButton/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/useFetchDatasourceDataInfo.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFetchDatasourceDataInfo = 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 _linkClientExtension = require("@atlaskit/link-client-extension");
+/** @jsx jsx */
+
+var useFetchDatasourceDataInfo = exports.useFetchDatasourceDataInfo = function useFetchDatasourceDataInfo(_ref) {
+  var datasourceId = _ref.datasourceId,
+    parameters = _ref.parameters,
+    visibleColumnKeys = _ref.visibleColumnKeys;
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    extensionKey = _useState2[0],
+    setExtensionKey = _useState2[1];
+  var _useDatasourceClientE = (0, _linkClientExtension.useDatasourceClientExtension)(),
+    getDatasourceData = _useDatasourceClientE.getDatasourceData;
+  (0, _react.useEffect)(function () {
+    var fetchDatasource = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var datasourceDataRequest, _yield$getDatasourceD, meta;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              if (!(!datasourceId || !parameters || !visibleColumnKeys)) {
+                _context.next = 3;
+                break;
+              }
+              return _context.abrupt("return");
+            case 3:
+              datasourceDataRequest = {
+                parameters: parameters,
+                pageSize: _linkClientExtension.DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE,
+                pageCursor: undefined,
+                fields: visibleColumnKeys,
+                includeSchema: true
+              };
+              _context.next = 6;
+              return getDatasourceData(datasourceId, datasourceDataRequest, false);
+            case 6:
+              _yield$getDatasourceD = _context.sent;
+              meta = _yield$getDatasourceD.meta;
+              setExtensionKey(meta.extensionKey);
+              _context.next = 15;
+              break;
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](0);
+              // eslint-disable-next-line no-console
+              console.error(_context.t0);
+              setExtensionKey(undefined);
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 11]]);
+      }));
+      return function fetchDatasource() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    void fetchDatasource();
+  }, [getDatasourceData, visibleColumnKeys, parameters, datasourceId]);
+  return {
+    extensionKey: extensionKey
+  };
+};

package/dist/es2019/nodeviews/genericCard.js

@@ -14,7 +14,8 @@ const WithClickHandler = ({
   pluginInjectionApi,
   url,
   onClickCallback,
-  children
+  children,
+  __livePage
 }) => {
   const {
     editorViewModeState
@@ -37,7 +38,7 @@ const WithClickHandler = ({
      *
      * const allowNavigation = isLivePage && !onClickCallback;
      */
-    const allowNavigation = !onClickCallback;
+    const allowNavigation = __livePage && !onClickCallback;
     return /*#__PURE__*/React.createElement(React.Fragment, null, children({
       onClick: allowNavigation ? undefined : onClick
     }));
@@ -97,7 +98,8 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
       }, /*#__PURE__*/React.createElement(WithClickHandler, {
         pluginInjectionApi: pluginInjectionApi,
         onClickCallback: onClickCallback,
-        url: url
+        url: url,
+        __livePage: this.props.__livePage
       }, ({
         onClick
       }) => /*#__PURE__*/React.createElement(SmartCardComponent, _extends({