@atlaskit/editor-plugin-card 1.14.4 → 1.15.0

package/dist/es2019/ui/EditToolbarButton.js

@@ -0,0 +1,123 @@
+/** @jsx jsx */
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { ButtonItem } from '@atlaskit/menu';
+import { Flex } from '@atlaskit/primitives';
+import { editDatasource } from '../pm-plugins/doc';
+import { isDatasourceConfigEditable } from '../utils';
+import { CardContextProvider } from './CardContextProvider';
+import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
+const dropdownExpandContainer = css({
+  margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
+});
+const EditButtonWithCardContext = ({
+  cardContext,
+  intl,
+  editorAnalyticsApi,
+  url,
+  editorView,
+  onLinkEditClick
+}) => {
+  const {
+    datasourceId
+  } = useFetchDatasourceInfo({
+    isRegularCardNode: true,
+    url,
+    cardContext
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef();
+  const toggleOpen = () => setIsOpen(open => !open);
+  const onClose = () => setIsOpen(false);
+  const dispatchCommand = useCallback(fn => {
+    if (editorView) {
+      fn === null || fn === void 0 ? void 0 : fn(editorView.state, editorView.dispatch);
+      if (!editorView.hasFocus()) {
+        editorView.focus();
+      }
+    }
+  }, [editorView]);
+  const onEditLink = useCallback(() => {
+    dispatchCommand(onLinkEditClick);
+  }, [dispatchCommand, onLinkEditClick]);
+  const shouldFallbackToEditButton = useMemo(() => {
+    if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
+      return true;
+    }
+    if (url) {
+      var _cardContext$store, _urlState$error;
+      const 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') {
+        return true;
+      }
+    }
+    return false;
+  }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
+  const onEditDatasource = useCallback(() => {
+    if (datasourceId) {
+      dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
+    }
+  }, [dispatchCommand, datasourceId, editorAnalyticsApi]);
+  if (shouldFallbackToEditButton) {
+    return jsx(Button, {
+      testId: "edit-link",
+      onClick: onEditLink
+    }, jsx(FormattedMessage, linkToolbarMessages.editLink));
+  }
+  const trigger = jsx(Button, {
+    testId: "edit-dropdown-trigger",
+    iconAfter: jsx("span", {
+      css: dropdownExpandContainer
+    }, jsx(ExpandIcon, {
+      label: intl.formatMessage(messages.editDropdownTriggerTitle)
+    })),
+    onClick: toggleOpen,
+    selected: isOpen,
+    disabled: false,
+    ariaHasPopup: true
+  }, jsx(FormattedMessage, messages.editDropdownTriggerTitle));
+  return jsx(Flex, {
+    ref: containerRef
+  }, jsx(UiDropdown, {
+    mountTo: containerRef.current,
+    isOpen: isOpen,
+    handleClickOutside: onClose,
+    handleEscapeKeydown: onClose,
+    trigger: trigger,
+    scrollableElement: containerRef.current,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU
+    }
+  }, jsx(ButtonItem, {
+    key: "edit.link",
+    onClick: onEditLink,
+    testId: "edit-dropdown-edit-link-item"
+  }, jsx(FormattedMessage, messages.editDropdownEditLinkTitle)), jsx(ButtonItem, {
+    key: "edit.datasource",
+    onClick: onEditDatasource,
+    testId: "edit-dropdown-edit-datasource-item"
+  }, jsx(FormattedMessage, messages.editDropdownEditDatasourceTitle))));
+};
+export const EditToolbarButton = ({
+  intl,
+  editorAnalyticsApi,
+  url,
+  editorView,
+  onLinkEditClick
+}) => {
+  return jsx(CardContextProvider, null, ({
+    cardContext
+  }) => jsx(EditButtonWithCardContext, {
+    url: url,
+    intl: intl,
+    editorAnalyticsApi: editorAnalyticsApi,
+    editorView: editorView,
+    cardContext: cardContext,
+    onLinkEditClick: onLinkEditClick
+  }));
+};

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

@@ -217,7 +217,9 @@ const InlineCardOverlay = ({
   }, jsx("span", {
     css: overflowingContainerStyles
   }, jsx("span", {
-    css: iconAndLabelStyles,
+    css: iconAndLabelStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: ICON_AND_LABEL_CLASSNAME
   }, jsx("span", {
     css: iconStyles
@@ -226,11 +228,15 @@ const InlineCardOverlay = ({
     size: iconSize.current,
     testId: `${testId}-icon`
   })), showLabel && jsx("span", {
-    css: labelStyles,
+    css: labelStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: OVERLAY_LABEL_CLASSNAME,
     "data-testid": `${testId}-label`
   }, label)), jsx("span", {
-    css: gradientStyles,
+    css: gradientStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: OVERLAY_GRADIENT_CLASSNAME,
     "data-testid": `${testId}-gradient`
   })))));

package/dist/es2019/ui/{NewInlineCardOverlay → LeftIconOverlay}/index.js

@@ -9,93 +9,84 @@ import { useIntl } from 'react-intl-next';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
-import { B100, N0, N700 } from '@atlaskit/theme/colors';
-import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from '../InlineCardOverlay/utils';
+import { N0, N30A, N40A, N60A, N700 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
+import { getChildElement, getInlineCardAvailableWidth, isOneLine } from '../InlineCardOverlay/utils';
 const DEBOUNCE_IN_MS = 5;
-const ESTIMATED_MIN_WIDTH_IN_PX = 16;
 const PADDING_IN_PX = 4;
-const ICON_WIDTH_IN_PX = 14;
+const ICON_WIDTH_IN_PX = 16;
 const ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
-const OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
 const OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
 const TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
 const SMART_LINK_BACKGROUND_COLOR = `var(--ds-surface-raised, ${N0})`;
-// TODO: This should be lighter to match the rest of the button
-const SMART_LINK_ACTIVE_COLOR = `var(--ds-background-selected, ${B100})`;
+const CONFIGURE_ICON_BACKGROUND_COLOR = `var(--ds-background-neutral, ${N30A})`;
+const CONFIGURE_ICON_BACKGROUND_HOVERED_COLOR = `var(--ds-background-neutral-hovered, ${N40A})`;
+const CONFIGURE_ICON_BACKGROUND_ACTIVE_COLOR = `var(--ds-background-neutral-pressed, ${N60A})`;
 const containerStyles = css({
   position: 'relative',
-  lineHeight: 'normal',
-  ':active': {
-    [`.${ICON_AND_LABEL_CLASSNAME}`]: {
-      background: SMART_LINK_ACTIVE_COLOR
-    }
-  }
+  lineHeight: 'normal'
 });
 const overlayStyles = css({
+  position: 'absolute',
+  // Vertically align. Required for overlay to be centered inside the inline link (the inline lozenge is slightly larger than the designs)
+  transform: 'translate(0%, -50%)',
+  top: '50%',
   // Set default styling to be invisible but available in dom for width calculation.
   visibility: 'hidden',
-  marginTop: "var(--ds-space-050, 4px)",
-  position: 'absolute',
-  verticalAlign: 'text-top',
-  height: '1lh',
-  '@supports not (height: 1lh)': {
-    height: '1.2em'
-  },
   overflow: 'hidden',
   // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
-  zIndex: 2,
-  pointerEvents: 'none'
+  zIndex: 2
 });
 const showOverlayStyles = css({
   visibility: 'visible'
 });
 const iconStyles = css({
-  // Position icon in the middle
+  background: CONFIGURE_ICON_BACKGROUND_COLOR,
+  ':hover': {
+    background: CONFIGURE_ICON_BACKGROUND_HOVERED_COLOR
+  },
+  ':active': {
+    background: CONFIGURE_ICON_BACKGROUND_ACTIVE_COLOR
+  },
   span: {
-    display: 'flex'
-  }
-});
-const labelStyles = css({
-  fontSize: '0.875em',
-  fontWeight: '600',
-  width: 'max-content'
+    // If PreferencesIcon left as inline-block (default), height is incorrect and border radius is clipped when parent element
+    // uses 1lh height (rather than 100%)
+    display: 'block'
+  },
+  // Note: The spec recomends 3px, but the icon doesn't fit left of the lozenge text if this size
+  padding: "var(--ds-space-025, 2px)",
+  borderRadius: '3px'
 });
 const iconAndLabelStyles = css({
   display: 'flex',
   alignItems: 'center',
   height: '100%',
-  marginLeft: "var(--ds-space-050, 4px)",
-  marginRight: "var(--ds-space-025, 2px)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '2.5px',
+  // Margin from very left of entire card (inclusive of blue)
+
+  // This exists so if we set a semi-transparent background above, the provider icon doesn't show
   background: SMART_LINK_BACKGROUND_COLOR,
+  // Ensure we don't have a white gap when the inline-card is in an active state
+  borderRadius: '3px',
   color: `var(--ds-text-subtlest, ${N700})`
 });
-const overflowingContainerStyles = css({
-  display: 'flex',
-  flexDirection: 'row-reverse',
-  alignItems: 'center',
-  width: 'max-content',
-  height: '100%'
-});
-const NarrowInlineCardOverlay = ({
+const LeftIconOverlay = ({
   children,
   isSelected = false,
   isVisible = false,
   testId = 'inline-card-overlay',
-  url,
   ...props
 }) => {
   const [showOverlay, setShowOverlay] = useState(false);
   const [availableWidth, setAvailableWidth] = useState(undefined);
-  const maxOverlayWidth = useRef(0);
-  const minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
-  const parentWidth = useRef(0);
-  const iconSize = useRef('small');
   const containerRef = useRef(null);
 
-  // TODO EDM-9843: Use availableWidth for small link edge case
+  // TODO EDM-9853: Use availableWidth for small link edge case
+  // Calculation logic will need to updated.
   availableWidth;
   const setVisibility = useCallback(() => {
-    if (!containerRef.current || !maxOverlayWidth.current) {
+    if (!containerRef.current) {
       return;
     }
     const marker = getChildElement(containerRef, `.${OVERLAY_MARKER_CLASSNAME}`);
@@ -120,30 +111,9 @@ const NarrowInlineCardOverlay = ({
     }
   }, [isSelected]);
   useLayoutEffect(() => {
-    // Using useLayoutEffect here.
-    // 1) We want all to be able to determine whether to display label before
-    //    the overlay becomes visible.
-    // 2) We need to wait for the refs to be assigned to be able to do determine
-    //    the width of the overlay.
     if (!containerRef.current) {
       return;
     }
-
-    // This should run only once
-    if (!maxOverlayWidth.current) {
-      const iconAndLabel = getChildElement(containerRef, `.${ICON_AND_LABEL_CLASSNAME}`);
-      const label = getChildElement(containerRef, `.${OVERLAY_LABEL_CLASSNAME}`);
-      if (iconAndLabel && label) {
-        // Set overlay max (label + icon) and min (icon only) width.
-        const {
-          max,
-          min
-        } = getOverlayWidths(iconAndLabel, label);
-        maxOverlayWidth.current = max;
-        minOverlayWidth.current = min;
-        iconSize.current = getIconSize(label);
-      }
-    }
     if (isVisible) {
       setVisibility();
     }
@@ -164,13 +134,6 @@ const NarrowInlineCardOverlay = ({
       if (!size) {
         return;
       }
-      if (!parentWidth.current) {
-        parentWidth.current = size;
-      }
-      if (parentWidth.current === size) {
-        return;
-      }
-      parentWidth.current = size;
       setVisibility();
     }, DEBOUNCE_IN_MS);
     const observer = new ResizeObserver(updateOverlay);
@@ -180,34 +143,28 @@ const NarrowInlineCardOverlay = ({
     };
   }, [isVisible, setVisibility]);
   const intl = useIntl();
-  const label = intl.formatMessage(messages.inlineOverlay);
+  const configureLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
   return jsx("span", _extends({}, props, {
     css: containerStyles,
     ref: containerRef
-  }), isVisible && jsx(React.Fragment, null, jsx("span", {
+  }), isVisible && jsx(Tooltip, {
+    content: configureLinkLabel
+  }, tooltipProps => jsx(React.Fragment, null, jsx("span", {
     "aria-hidden": "true",
     className: OVERLAY_MARKER_CLASSNAME
-  }, ZERO_WIDTH_JOINER), jsx("a", {
+  }, ZERO_WIDTH_JOINER), jsx("span", {
     css: [overlayStyles, showOverlay && showOverlayStyles],
-    "data-testid": testId,
-    href: url,
-    onClick: e => e.preventDefault(),
-    tabIndex: -1
-  }, jsx("span", {
-    css: overflowingContainerStyles
-  }, jsx("span", {
+    tabIndex: -1,
+    "data-testid": testId
+  }, jsx("span", _extends({}, tooltipProps, {
     css: iconAndLabelStyles,
     className: ICON_AND_LABEL_CLASSNAME
-  }, jsx("span", {
+  }), jsx("span", {
     css: iconStyles
   }, jsx(PreferencesIcon, {
-    label: label,
-    size: iconSize.current,
+    label: configureLinkLabel,
+    size: 'small',
     testId: `${testId}-icon`
-  })), jsx("span", {
-    css: labelStyles,
-    className: OVERLAY_LABEL_CLASSNAME,
-    "data-testid": `${testId}-label`
-  }))))), children);
+  })))))), children);
 };
-export default NarrowInlineCardOverlay;
+export default LeftIconOverlay;

package/dist/es2019/ui/ResizableEmbedCard.js

@@ -289,10 +289,14 @@ export default class ResizableEmbedCard extends React.Component {
     return jsx("span", {
       "data-testid": 'resizable-embed-card-height-definer',
       style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         display: 'block',
         /* Fixes extra padding problem in Firefox */
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         fontSize: 0,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         lineHeight: 0,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ...heightDefiningStyles
       }
     });

package/dist/es2019/utils.js

@@ -73,6 +73,9 @@ export const isDatasourceConfigEditable = datasourceId => {
   }
   return datasourcesWithConfigModal.includes(datasourceId);
 };
+export const isEditDropdownEnabled = platform => {
+  return getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && platform !== 'mobile';
+};
 
 /**
  * Typeguard that checks node attributes are datasource node attributes

package/dist/esm/nodeviews/datasource.js

@@ -275,6 +275,7 @@ export var Datasource = /*#__PURE__*/function (_ReactNodeView) {
         url: attrs.url,
         datasourceId: attrs === null || attrs === void 0 || (_attrs$datasource = attrs.datasource) === null || _attrs$datasource === void 0 ? void 0 : _attrs$datasource.id
       }, jsx("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
         style: {
           minWidth: this.isNodeNested ? '100%' : calcBreakoutWidth(attrs.layout || DATASOURCE_DEFAULT_LAYOUT, this.tableWidth)

package/dist/esm/nodeviews/inlineCardWithAwareness.js

@@ -120,7 +120,10 @@ var InlineCard = function InlineCard(_ref) {
       markMostRecentlyInsertedLink: markMostRecentlyInsertedLink,
       pluginInjectionApi: pluginInjectionApi,
       setOverlayHoveredStyles: setOverlayHoveredStyles
-    }, innerCard) : /*#__PURE__*/React.createElement("span", {
+    }, innerCard) :
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    React.createElement("span", {
       className: "card"
     }, innerCard);
   }, [cardContext, getPos, innerCard, isHovered, isInserted, isOverlayEnabled, isPulseEnabled, isResolvedViewRendered, isSelected, markMostRecentlyInsertedLink, pluginInjectionApi, setOverlayHoveredStyles, url]);

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

@@ -6,12 +6,12 @@ import isEqual from 'lodash/isEqual';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, SMART_LINK_TYPE, unlinkPayload } from '@atlaskit/editor-common/analytics';
 import { addLinkMetadata } from '@atlaskit/editor-common/card';
-import { getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
+import { getDatasourceType, getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
 import { closeHistory } from '@atlaskit/editor-prosemirror/history';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { appearanceForNodeType, isDatasourceConfigEditable, isDatasourceNode, selectedCardAppearance } from '../utils';
-import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash } from './actions';
+import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash, showDatasourceModal } from './actions';
 import { pluginKey } from './plugin-key';
 import { shouldReplaceLink } from './shouldReplaceLink';
 /**
@@ -560,4 +560,24 @@ var updateDatasourceStash = function updateDatasourceStash(tr, selectedNode) {
       }
     }
   }
+};
+export var editDatasource = function editDatasource(datasourceId, _editorAnalyticsApi) {
+  return function (state, dispatch) {
+    var datasourceType = getDatasourceType(datasourceId);
+    if (dispatch && datasourceType) {
+      var tr = state.tr;
+      showDatasourceModal(datasourceType)(tr);
+      // editorAnalyticsApi?.attachAnalyticsEvent(
+      //   buildEditLinkPayload(
+      //     type as
+      //       | ACTION_SUBJECT_ID.CARD_INLINE
+      //       | ACTION_SUBJECT_ID.CARD_BLOCK
+      //       | ACTION_SUBJECT_ID.EMBEDS,
+      //   ),
+      // )(tr);
+      dispatch(tr);
+      return true;
+    }
+    return false;
+  };
 };

package/dist/esm/toolbar.js

@@ -18,14 +18,15 @@ import CogIcon from '@atlaskit/icon/glyph/editor/settings';
 import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { changeSelectedCardToText } from './pm-plugins/doc';
+import { changeSelectedCardToText, editDatasource } from './pm-plugins/doc';
 import { pluginKey } from './pm-plugins/main';
 import { DatasourceAppearanceButton } from './ui/DatasourceAppearanceButton';
-import { editDatasource, EditDatasourceButton } from './ui/EditDatasourceButton';
+import { EditDatasourceButton } from './ui/EditDatasourceButton';
 import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
+import { EditToolbarButton } from './ui/EditToolbarButton';
 import { LinkToolbarAppearance } from './ui/LinkToolbarAppearance';
 import { ToolbarViewedEvent } from './ui/ToolbarViewedEvent';
-import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceConfigEditable, isDatasourceNode, titleUrlPairFromNode } from './utils';
+import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceConfigEditable, isDatasourceNode, isEditDropdownEnabled, titleUrlPairFromNode } from './utils';
 export var removeCard = function removeCard(editorAnalyticsApi) {
   return commandWithMetadata(function (state, dispatch) {
     if (!(state.selection instanceof NodeSelection)) {
@@ -215,7 +216,20 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
       return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, platform, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.card) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions);
     } else {
       var inlineCard = state.schema.nodes.inlineCard;
-      var toolbarItems = [{
+      var toolbarItems = [isEditDropdownEnabled(platform) && cardOptions.allowDatasource ? {
+        type: 'custom',
+        fallback: [],
+        render: function render(editorView) {
+          return /*#__PURE__*/React.createElement(EditToolbarButton, {
+            key: "edit-toolbar-item",
+            url: url,
+            intl: intl,
+            editorAnalyticsApi: editorAnalyticsApi,
+            editorView: editorView,
+            onLinkEditClick: editLink(editorAnalyticsApi)
+          });
+        }
+      } : {
         id: 'editor.link.edit',
         type: 'button',
         selected: false,
@@ -314,7 +328,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
           type: 'separator'
         }]));
       }
-      var shouldShowDatasourceEditButton = platform !== 'mobile' && allowDatasource;
+      var shouldShowDatasourceEditButton = platform !== 'mobile' && allowDatasource && !getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar');
       if (shouldShowDatasourceEditButton) {
         toolbarItems.unshift({
           type: 'custom',
@@ -374,7 +388,7 @@ export var getSettingsButtonGroup = function getSettingsButtonGroup(intl, editor
 var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, platform, cardActions) {
   var _node$attrs3;
   var toolbarItems = [];
-  if (isDatasourceConfigEditable(datasourceId)) {
+  if (isDatasourceConfigEditable(datasourceId) && !getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
     toolbarItems.push({
       id: 'editor.edit.datasource',
       type: 'button',
@@ -388,6 +402,22 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       type: 'separator'
     });
   }
+  var editDropdownWithSeparator = [{
+    type: 'custom',
+    fallback: [],
+    render: function render(editorView) {
+      return /*#__PURE__*/React.createElement(EditToolbarButton, {
+        key: "edit-toolbar-item",
+        url: metadata.url,
+        intl: intl,
+        editorAnalyticsApi: editorAnalyticsApi,
+        editorView: editorView,
+        onLinkEditClick: editLink(editorAnalyticsApi)
+      });
+    }
+  }, {
+    type: 'separator'
+  }];
   var canShowMainToolbar = function canShowMainToolbar() {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
     if (!metadata.url) {
@@ -407,7 +437,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       allowEmbeds = cardOptions.allowEmbeds,
       showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
     var url = metadata.url;
-    toolbarItems.push({
+    toolbarItems.push.apply(toolbarItems, [{
       type: 'custom',
       fallback: [],
       render: function render(editorView) {
@@ -443,7 +473,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       }
     }, {
       type: 'separator'
-    });
+    }].concat(_toConsumableArray(getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') ? [].concat(editDropdownWithSeparator) : [])));
   }
   if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
     toolbarItems.push({

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

@@ -8,7 +8,7 @@ import useLinkUpgradeDiscoverability from '../../common/hooks/useLinkUpgradeDisc
 import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR, markLocalStorageKeyDiscovered, ONE_DAY_IN_MILLISECONDS } from '../../common/local-storage';
 import { getResolvedAttributesFromStore } from '../../utils';
 import InlineCardOverlay from '../InlineCardOverlay';
-import NewInlineCardOverlay from '../NewInlineCardOverlay';
+import LeftIconOverlay from '../LeftIconOverlay';
 import { DiscoveryPulse } from '../Pulse';
 // editor adds a standard line-height that is bigger than an inline smart link
 // due to that the link has a bit of white space around it, which doesn't look right when there is pulse around it
@@ -73,7 +73,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
   var cardWithOverlay = useMemo(function () {
     if (shouldShowLinkOverlay) {
       if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
-        return jsx(NewInlineCardOverlay, {
+        return jsx(LeftIconOverlay, {
           isSelected: isSelected,
           isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
           onMouseEnter: function onMouseEnter() {
@@ -81,8 +81,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
           },
           onMouseLeave: function onMouseLeave() {
             return handleOverlayChange(false);
-          },
-          url: url
+          }
         }, children);
       }
       return jsx(InlineCardOverlay, {
@@ -101,19 +100,22 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
   }, [shouldShowLinkOverlay, isSelected, isResolvedViewRendered, isInserted, isHovered, url, children, handleOverlayChange]);
   return useMemo(function () {
     var _cardContext$value;
-    return jsx("span", {
-      css: shouldShowLinkPulse && loaderWrapperStyles,
-      className: "card"
-    }, jsx(AnalyticsContext, {
-      data: {
-        attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
-      }
-    }, jsx(DiscoveryPulse, {
-      localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
-      localStorageKeyExpirationInMs: ONE_DAY_IN_MILLISECONDS,
-      discoveryMode: "start",
-      shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
-      testId: "link-discovery-pulse"
-    }, cardWithOverlay)));
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      jsx("span", {
+        css: shouldShowLinkPulse && loaderWrapperStyles,
+        className: "card"
+      }, jsx(AnalyticsContext, {
+        data: {
+          attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
+        }
+      }, jsx(DiscoveryPulse, {
+        localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
+        localStorageKeyExpirationInMs: ONE_DAY_IN_MILLISECONDS,
+        discoveryMode: "start",
+        shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
+        testId: "link-discovery-pulse"
+      }, cardWithOverlay)))
+    );
   }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay]);
 };

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

@@ -24,7 +24,7 @@ export var DatasourceModal = function DatasourceModal(_ref) {
   var onClose = useCallback(function () {
     dispatch(hideDatasourceModal(transaction));
   }, [dispatch, transaction]);
-  var onInsert = useOnInsert(view, existingNode);
+  var updateAdf = useUpdateAdf(view, existingNode);
   var isRegularCardNode = !!(existingNode && !(existingNode !== null && existingNode !== void 0 && (_existingNode$attrs = existingNode.attrs) !== null && _existingNode$attrs !== void 0 && _existingNode$attrs.datasource));
   var _ref2 = (existingNode === null || existingNode === void 0 || (_existingNode$attrs2 = existingNode.attrs) === null || _existingNode$attrs2 === void 0 ? void 0 : _existingNode$attrs2.datasource) || {},
     _ref2$id = _ref2.id,
@@ -57,10 +57,10 @@ export var DatasourceModal = function DatasourceModal(_ref) {
     columnCustomSizes: columnCustomSizes,
     wrappedColumnKeys: wrappedColumnKeys,
     onCancel: onClose,
-    onInsert: onInsert
+    onInsert: updateAdf
   });
 };
-var useOnInsert = function useOnInsert(view, existingNode) {
+var useUpdateAdf = function useUpdateAdf(view, existingNode) {
   return useCallback(function (newAdf, analyticEvent) {
     if (analyticEvent) {
       analyticEvent.update(function (payload) {
@@ -111,10 +111,9 @@ var resolveColumnsConfig = function resolveColumnsConfig(views) {
     tableView = _views[0];
   var visibleColumnKeys = [];
   var wrappedColumnKeys = [];
-  var columnCustomSizes;
+  var columnCustomSizes = {};
   var columns = tableView === null || tableView === void 0 || (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns;
   if (columns) {
-    columnCustomSizes = {};
     var _iterator = _createForOfIteratorHelper(columns),
       _step;
     try {