@atlaskit/editor-plugin-card/dist/cjs/ui/EditToolbarButton/index.js

Card plugin for @atlaskit/editor-core

"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 _reactIntl = require("react-intl");
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/core/chevron-down"));
var _linkProvider = require("@atlaskit/link-provider");
var _menu = require("@atlaskit/menu");
var _compiled = require("@atlaskit/primitives/compiled");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _utils = require("../../pm-plugins/utils");
var _editDatasourceAction = require("../editDatasourceAction");
var _useFetchDatasourceDataInfo = require("../useFetchDatasourceDataInfo");
var _useFetchDatasourceInfo = require("../useFetchDatasourceInfo");
var _EditToolbarButtonPresentation = _interopRequireDefault(require("./EditToolbarButtonPresentation"));
var _excluded = ["extensionKey"];
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
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,
    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
  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, _editDatasourceAction.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)(_compiled.Flex, {
          gap: "space.050"
        }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
          testId: "edit-link",
          onClick: onEditLink,
          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
        }, (0, _react2.jsx)(_reactIntl.FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , _messages.linkToolbarMessages.editLink)), !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {
          areAnyNewToolbarFlagsEnabled: false
        }));
      }
    case 'edit-datasource':
      {
        return (0, _react2.jsx)(_compiled.Flex, {
          gap: "space.050"
        }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
          testId: "edit-datasource",
          tooltipContent: intl.formatMessage(_messages.linkToolbarMessages.editDatasourceStandaloneTooltip),
          onClick: onEditDatasource,
          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
        }, (0, _react2.jsx)(_reactIntl.FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , _messages.linkToolbarMessages.editDatasourceStandalone)), !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {
          areAnyNewToolbarFlagsEnabled: false
        }));
      }
    case 'edit-dropdown':
      {
        var trigger = (0, _react2.jsx)(_compiled.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),
            size: "small"
          })),
          onClick: toggleOpen,
          selected: isOpen,
          disabled: false,
          ariaHasPopup: true,
          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
        }, (0, _react2.jsx)(_reactIntl.FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , _messages.cardMessages.editDropdownTriggerTitle)), !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {
          areAnyNewToolbarFlagsEnabled: false
        }));
        return (0, _react2.jsx)(_compiled.Flex, {
          ref: containerRef
        }, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
          mountTo: containerRef.current,
          isOpen: isOpen,
          handleClickOutside: onClose,
          handleEscapeKeydown: onClose,
          trigger: trigger,
          scrollableElement: containerRef.current
          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
          ,
          arrowKeyNavigationProviderOptions: {
            type: _uiMenu.ArrowKeyNavigationType.MENU
          }
        }, (0, _react2.jsx)(_menu.ButtonItem, {
          key: "edit.link",
          onClick: onEditLink,
          testId: "edit-dropdown-edit-link-item"
        }, (0, _react2.jsx)(_reactIntl.FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , _messages.cardMessages.editDropdownEditLinkTitle)), (0, _react2.jsx)(_menu.ButtonItem, {
          key: "edit.datasource",
          onClick: onEditDatasource,
          testId: "edit-dropdown-edit-datasource-item"
        }, (0, _react2.jsx)(_reactIntl.FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , _messages.cardMessages.editDropdownEditDatasourceTitle))));
      }
    case 'none':
    default:
      return null;
  }
};
var EditToolbarButtonWithUrl = function EditToolbarButtonWithUrl(props) {
  var cardContext = props.cardContext,
    currentAppearance = props.currentAppearance,
    datasourceIdFromAdf = props.datasourceId,
    editorAnalyticsApi = props.editorAnalyticsApi,
    editorView = props.editorView,
    intl = props.intl,
    onLinkEditClick = props.onLinkEditClick,
    url = props.url,
    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
  var _useFetchDatasourceIn2 = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
      isRegularCardNode: true,
      url: url,
      cardContext: cardContext
    }),
    extensionKey = _useFetchDatasourceIn2.extensionKey,
    datasourceIdFromUrl = _useFetchDatasourceIn2.datasourceId;
  var datasourceId = datasourceIdFromUrl !== null && datasourceIdFromUrl !== void 0 ? datasourceIdFromUrl : datasourceIdFromAdf;
  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,
    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
  });
};
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,
    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
  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,
    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
  });
};
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,
    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
  var cardContext = (0, _linkProvider.useSmartLinkContext)();
  if (props.url) {
    return (0, _react2.jsx)(EditToolbarButtonWithUrl, {
      datasourceId: datasourceId,
      url: props.url,
      intl: intl,
      editorAnalyticsApi: editorAnalyticsApi,
      editorView: editorView,
      cardContext: cardContext,
      onLinkEditClick: onLinkEditClick,
      currentAppearance: currentAppearance,
      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
    });
  }
  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,
      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
    });
  }
  return (0, _react2.jsx)(EditToolbarButtonWithCardContext, {
    datasourceId: datasourceId,
    url: url,
    intl: intl,
    editorAnalyticsApi: editorAnalyticsApi,
    editorView: editorView,
    cardContext: cardContext,
    onLinkEditClick: onLinkEditClick,
    currentAppearance: currentAppearance,
    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
  });
};