@atlaskit/link-datasource 1.0.16 → 1.0.18

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/link-datasource
 
+## 1.0.18
+
+### Patch Changes
+
+- [`e682c758801`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e682c758801) - Added button clicked (cancel) and button clicked (insert) UI events
+
+## 1.0.17
+
+### Patch Changes
+
+- [`882e4e88358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/882e4e88358) - Add playwright tests and add test ids to find elements
+- Updated dependencies
+
 ## 1.0.16
 
 ### Patch Changes

package/dist/cjs/analytics/constants.js

@@ -3,6 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EVENT_CHANNEL = void 0;
+exports.packageMetaData = exports.EVENT_CHANNEL = void 0;
 var EVENT_CHANNEL = 'media';
-exports.EVENT_CHANNEL = EVENT_CHANNEL;
+exports.EVENT_CHANNEL = EVENT_CHANNEL;
+var packageMetaData = {
+  packageName: "@atlaskit/link-datasource",
+  packageVersion: "1.0.18"
+};
+exports.packageMetaData = packageMetaData;

package/dist/cjs/analytics/types.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatasourceSearchMethod = exports.DatasourceDisplay = exports.DatasourceAction = void 0;
+var DatasourceAction = /*#__PURE__*/function (DatasourceAction) {
+  DatasourceAction["COLUMN_ADDED"] = "column added";
+  DatasourceAction["COLUMN_REMOVED"] = "column removed";
+  DatasourceAction["COLUMN_REORDERED"] = "column reordered";
+  DatasourceAction["INSTANCE_UPDATED"] = "instance updated";
+  DatasourceAction["QUERY_UPDATED"] = "query updated";
+  DatasourceAction["DISPLAY_VIEW_CHANGED"] = "display view changed";
+  DatasourceAction["NEXT_PAGE_SCROLLED"] = "next page scrolled";
+  return DatasourceAction;
+}({});
+exports.DatasourceAction = DatasourceAction;
+var DatasourceDisplay = /*#__PURE__*/function (DatasourceDisplay) {
+  DatasourceDisplay["DATASOURCE_TABLE"] = "datasource_table";
+  DatasourceDisplay["DATASOURCE_INLINE"] = "datasource_inline";
+  DatasourceDisplay["INLINE"] = "inline";
+  return DatasourceDisplay;
+}({});
+exports.DatasourceDisplay = DatasourceDisplay;
+var DatasourceSearchMethod = /*#__PURE__*/function (DatasourceSearchMethod) {
+  DatasourceSearchMethod["DATASOURCE_BASIC_FILTER"] = "datasource_basic_filter";
+  DatasourceSearchMethod["DATASOURCE_SEARCH_QUERY"] = "datasource_search_query";
+  return DatasourceSearchMethod;
+}({});
+exports.DatasourceSearchMethod = DatasourceSearchMethod;

package/dist/cjs/analytics/utils.js

@@ -4,14 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mapSearchMethod = void 0;
+var _types = require("./types");
 var mapSearchMethod = function mapSearchMethod(searchMethod) {
   switch (searchMethod) {
     case 'basic':
-      return 'datasource_basic_filter';
+      return _types.DatasourceSearchMethod.DATASOURCE_BASIC_FILTER;
     case 'jql':
-      return 'datasource_search_query';
+      return _types.DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY;
     default:
-      return 'unknown';
+      return null;
   }
 };
 exports.mapSearchMethod = mapSearchMethod;

package/dist/cjs/ui/assets-modal/modal/index.js

@@ -219,7 +219,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isDisabled,
-    testId: 'asset-datasource-modal--insert-button'
+    testId: 'assets-datasource-modal--insert-button'
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.modalMessages.insertIssuesButtonText, {
     values: {
       objectsCount: responseItems.length
@@ -231,7 +231,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.16",
+  packageVersion: "1.0.18",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

package/dist/cjs/ui/datasource-table-view/datasourceTableView.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../../analytics");
+var _constants = require("../../analytics/constants");
 var _useDatasourceTableState = require("../../hooks/useDatasourceTableState");
 var _accessRequired = require("../common/error-state/access-required");
 var _loadingError = require("../common/error-state/loading-error");
@@ -108,9 +109,5 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     }))
   );
 };
-var analyticsContextData = {
-  packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.16"
-};
-var DatasourceTableView = (0, _analyticsNext.withAnalyticsContext)(analyticsContextData)(DatasourceTableViewWithoutAnalytics);
+var DatasourceTableView = (0, _analyticsNext.withAnalyticsContext)(_constants.packageMetaData)(DatasourceTableViewWithoutAnalytics);
 exports.DatasourceTableView = DatasourceTableView;

package/dist/cjs/ui/jira-issues-modal/modal/index.js

@@ -5,10 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PlainJiraIssuesConfigModal = exports.JiraIssuesConfigModal = void 0;
+exports.getColumnAction = exports.PlainJiraIssuesConfigModal = exports.JiraIssuesConfigModal = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
@@ -19,6 +19,9 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _colors = require("@atlaskit/theme/colors");
 var _analytics = require("../../../analytics");
+var _constants = require("../../../analytics/constants");
+var _types = require("../../../analytics/types");
+var _utils = require("../../../analytics/utils");
 var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
 var _getAvailableJiraSites = require("../../../services/getAvailableJiraSites");
 var _accessRequired = require("../../common/error-state/access-required");
@@ -59,6 +62,29 @@ var issueCountStyles = (0, _react2.css)({
 var smartLinkContainerStyles = (0, _react2.css)({
   paddingLeft: '1px'
 });
+var getDisplayValue = function getDisplayValue(currentViewMode, itemCount) {
+  if (currentViewMode === 'count') {
+    return _types.DatasourceDisplay.DATASOURCE_INLINE;
+  }
+  return itemCount > 1 ? _types.DatasourceDisplay.DATASOURCE_TABLE : _types.DatasourceDisplay.INLINE;
+};
+
+/**
+ * This method should be called when one atomic action is performed on columns: adding new item, removing one item, changing items order.
+ * The assumption is that since only one action is changed at each time, we don't have to verify the actual contents of the lists.
+ */
+var getColumnAction = function getColumnAction(oldVisibleColumnKeys, newVisibleColumnKeys) {
+  var newColumnSize = newVisibleColumnKeys.length;
+  var oldColumnSize = oldVisibleColumnKeys.length;
+  if (newColumnSize > oldColumnSize) {
+    return _types.DatasourceAction.COLUMN_ADDED;
+  } else if (newColumnSize < oldColumnSize) {
+    return _types.DatasourceAction.COLUMN_REMOVED;
+  } else {
+    return _types.DatasourceAction.COLUMN_REORDERED;
+  }
+};
+exports.getColumnAction = getColumnAction;
 var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialParameters = props.parameters,
@@ -81,17 +107,22 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     jql = _useState8[0],
     setJql = _useState8[1];
-  var isParametersSet = !!(jql && cloudId);
+  var _useState9 = (0, _react.useState)(initialVisibleColumnKeys),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    visibleColumnKeys = _useState10[0],
+    setVisibleColumnKeys = _useState10[1];
+
+  // analytics related parameters
+  var searchCount = (0, _react.useRef)(0);
+  var userInteractionActions = (0, _react.useRef)(new Set());
+  var lastSearchMethodRef = (0, _react.useRef)(null);
   var parameters = (0, _react.useMemo)(function () {
     return !!cloudId ? {
       cloudId: cloudId,
       jql: jql || ''
     } : undefined;
   }, [cloudId, jql]);
-  var _useState9 = (0, _react.useState)(initialVisibleColumnKeys),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    visibleColumnKeys = _useState10[0],
-    setVisibleColumnKeys = _useState10[1];
+  var isParametersSet = !!(jql && cloudId);
   var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)({
       datasourceId: datasourceId,
       parameters: isParametersSet ? parameters : undefined,
@@ -105,8 +136,10 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     columns = _useDatasourceTableSt.columns,
     defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
     loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
-    totalCount = _useDatasourceTableSt.totalCount;
-  var lastSearchMethodRef = (0, _react.useRef)((0, _jiraSearchContainer.getInitialSearchMethod)(parameters === null || parameters === void 0 ? void 0 : parameters.jql));
+    totalCount = _useDatasourceTableSt.totalCount,
+    _useDatasourceTableSt2 = _useDatasourceTableSt.extensionKey,
+    extensionKey = _useDatasourceTableSt2 === void 0 ? null : _useDatasourceTableSt2,
+    destinationObjectTypes = _useDatasourceTableSt.destinationObjectTypes;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
@@ -116,6 +149,13 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
       return jiraSite.cloudId === cloudId;
     }) || availableSites[0];
   }, [availableSites, cloudId]);
+  var buttonClickedAnalyticsPayload = (0, _react.useMemo)(function () {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes,
+      actions: userInteractionActions.current
+    };
+  }, [destinationObjectTypes, extensionKey]);
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var jqlUrl = selectedJiraSite && jql && "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURI(jql));
   var isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading' || resolvedWithNoResults;
@@ -160,13 +200,28 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     }
   }, [cloudId, selectedJiraSite]);
   var onSearch = (0, _react.useCallback)(function (newParameters, searchMethod) {
+    searchCount.current++;
     lastSearchMethodRef.current = searchMethod;
+    if (jql !== newParameters.jql) {
+      userInteractionActions.current.add(_types.DatasourceAction.QUERY_UPDATED);
+    }
     setJql(newParameters.jql);
     reset({
       shouldForceRequest: true
     });
-  }, [reset]);
+  }, [jql, reset]);
+  var onCancelClick = (0, _react.useCallback)(function (e, analyticEvent) {
+    analyticEvent.update({
+      eventType: 'ui',
+      actionSubjectId: 'cancel',
+      attributes: _objectSpread(_objectSpread({}, buttonClickedAnalyticsPayload), {}, {
+        searchCount: searchCount.current
+      })
+    }).fire(_analytics.EVENT_CHANNEL);
+    onCancel();
+  }, [buttonClickedAnalyticsPayload, onCancel]);
   var onSiteSelection = (0, _react.useCallback)(function (site) {
+    userInteractionActions.current.add(_types.DatasourceAction.INSTANCE_UPDATED);
     setCloudId(site.cloudId);
     reset({
       shouldForceRequest: true
@@ -176,13 +231,25 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     var _data$key, _data$key$data;
     var _responseItems = (0, _slicedToArray2.default)(responseItems, 1),
       data = _responseItems[0];
-    // agrement with BE that we will use `key` for rendering smartlink
+    // agreement with BE that we will use `key` for rendering smartlink
     return data === null || data === void 0 ? void 0 : (_data$key = data.key) === null || _data$key === void 0 ? void 0 : (_data$key$data = _data$key.data) === null || _data$key$data === void 0 ? void 0 : _data$key$data.url;
   }, [responseItems]);
-  var onInsertPressed = (0, _react.useCallback)(function () {
+  var onInsertPressed = (0, _react.useCallback)(function (e, analyticEvent) {
     if (!isParametersSet || !jql || !selectedJiraSite) {
       return;
     }
+    var insertButtonClickedEvent = analyticEvent.update({
+      actionSubjectId: 'insert',
+      attributes: _objectSpread(_objectSpread({}, buttonClickedAnalyticsPayload), {}, {
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0,
+        display: getDisplayValue(currentViewMode, totalCount || 0),
+        searchCount: searchCount.current,
+        searchMethod: (0, _utils.mapSearchMethod)(lastSearchMethodRef.current)
+      }),
+      eventType: 'ui'
+    });
+    insertButtonClickedEvent.fire(_analytics.EVENT_CHANNEL);
     var firstIssueUrl = retrieveUrlForSmartCardRender();
     if (currentViewMode === 'count') {
       onInsert({
@@ -224,10 +291,21 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
         }
       });
     }
-  }, [isParametersSet, jql, jqlUrl, selectedJiraSite, retrieveUrlForSmartCardRender, currentViewMode, responseItems.length, onInsert, datasourceId, cloudId, visibleColumnKeys]);
+  }, [isParametersSet, jql, selectedJiraSite, buttonClickedAnalyticsPayload, totalCount, visibleColumnKeys, currentViewMode, retrieveUrlForSmartCardRender, responseItems.length, onInsert, jqlUrl, datasourceId, cloudId]);
   var handleViewModeChange = function handleViewModeChange(selectedMode) {
+    userInteractionActions.current.add(_types.DatasourceAction.DISPLAY_VIEW_CHANGED);
     setCurrentViewMode(selectedMode);
   };
+  var handleOnNextPage = (0, _react.useCallback)(function () {
+    userInteractionActions.current.add(_types.DatasourceAction.NEXT_PAGE_SCROLLED);
+    onNextPage();
+  }, [onNextPage]);
+  var handleVisibleColumnKeysChange = (0, _react.useCallback)(function () {
+    var newVisibleColumnKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var columnAction = getColumnAction(visibleColumnKeys || [], newVisibleColumnKeys);
+    userInteractionActions.current.add(columnAction);
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [visibleColumnKeys]);
   var issueLikeDataTableView = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)("div", {
       css: contentContainerStyles
@@ -238,11 +316,11 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
       items: responseItems,
       hasNextPage: hasNextPage,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-      onNextPage: onNextPage,
+      onNextPage: handleOnNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
-      onVisibleColumnKeysChange: setVisibleColumnKeys
+      onVisibleColumnKeysChange: handleVisibleColumnKeysChange
     }));
-  }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, responseItems, status, visibleColumnKeys]);
+  }, [columns, defaultVisibleColumnKeys, hasNextPage, handleVisibleColumnKeysChange, loadDatasourceDetails, handleOnNextPage, responseItems, status, visibleColumnKeys]);
   var renderCountModeContent = (0, _react.useCallback)(function () {
     var url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {
@@ -336,7 +414,7 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     }
   }))), (0, _react2.jsx)(_standardButton.default, {
     appearance: "default",
-    onClick: onCancel
+    onClick: onCancelClick
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.cancelButtonText)), (0, _react2.jsx)(_standardButton.default, {
     appearance: "primary",
     onClick: onInsertPressed,
@@ -348,11 +426,9 @@ exports.PlainJiraIssuesConfigModal = PlainJiraIssuesConfigModal;
 var analyticsContextAttributes = {
   dataProvider: 'jira-issues'
 };
-var analyticsContextData = {
-  packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.16",
+var analyticsContextData = _objectSpread(_objectSpread({}, _constants.packageMetaData), {}, {
   source: 'datasourceConfigModal'
-};
+});
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
   attributes: _objectSpread({}, analyticsContextAttributes)
 });

package/dist/es2019/analytics/constants.js

@@ -1 +1,5 @@
-export const EVENT_CHANNEL = 'media';
+export const EVENT_CHANNEL = 'media';
+export const packageMetaData = {
+  packageName: "@atlaskit/link-datasource",
+  packageVersion: "1.0.18"
+};

package/dist/es2019/analytics/types.js

@@ -0,0 +1,21 @@
+export let DatasourceAction = /*#__PURE__*/function (DatasourceAction) {
+  DatasourceAction["COLUMN_ADDED"] = "column added";
+  DatasourceAction["COLUMN_REMOVED"] = "column removed";
+  DatasourceAction["COLUMN_REORDERED"] = "column reordered";
+  DatasourceAction["INSTANCE_UPDATED"] = "instance updated";
+  DatasourceAction["QUERY_UPDATED"] = "query updated";
+  DatasourceAction["DISPLAY_VIEW_CHANGED"] = "display view changed";
+  DatasourceAction["NEXT_PAGE_SCROLLED"] = "next page scrolled";
+  return DatasourceAction;
+}({});
+export let DatasourceDisplay = /*#__PURE__*/function (DatasourceDisplay) {
+  DatasourceDisplay["DATASOURCE_TABLE"] = "datasource_table";
+  DatasourceDisplay["DATASOURCE_INLINE"] = "datasource_inline";
+  DatasourceDisplay["INLINE"] = "inline";
+  return DatasourceDisplay;
+}({});
+export let DatasourceSearchMethod = /*#__PURE__*/function (DatasourceSearchMethod) {
+  DatasourceSearchMethod["DATASOURCE_BASIC_FILTER"] = "datasource_basic_filter";
+  DatasourceSearchMethod["DATASOURCE_SEARCH_QUERY"] = "datasource_search_query";
+  return DatasourceSearchMethod;
+}({});

package/dist/es2019/analytics/utils.js

@@ -1,10 +1,11 @@
+import { DatasourceSearchMethod } from './types';
 export const mapSearchMethod = searchMethod => {
   switch (searchMethod) {
     case 'basic':
-      return 'datasource_basic_filter';
+      return DatasourceSearchMethod.DATASOURCE_BASIC_FILTER;
     case 'jql':
-      return 'datasource_search_query';
+      return DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY;
     default:
-      return 'unknown';
+      return null;
   }
 };

package/dist/es2019/ui/assets-modal/modal/index.js

@@ -193,7 +193,7 @@ const PlainAssetsConfigModal = props => {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isDisabled,
-    testId: 'asset-datasource-modal--insert-button'
+    testId: 'assets-datasource-modal--insert-button'
   }, jsx(FormattedMessage, _extends({}, modalMessages.insertIssuesButtonText, {
     values: {
       objectsCount: responseItems.length
@@ -205,7 +205,7 @@ const analyticsContextAttributes = {
 };
 const analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.16",
+  packageVersion: "1.0.18",
   source: 'datasourceConfigModal'
 };
 const contextData = {

package/dist/es2019/ui/datasource-table-view/datasourceTableView.js

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { useDatasourceAnalyticsEvents } from '../../analytics';
+import { packageMetaData } from '../../analytics/constants';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
@@ -102,8 +103,4 @@ const DatasourceTableViewWithoutAnalytics = ({
     }))
   );
 };
-const analyticsContextData = {
-  packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.16"
-};
-export const DatasourceTableView = withAnalyticsContext(analyticsContextData)(DatasourceTableViewWithoutAnalytics);
+export const DatasourceTableView = withAnalyticsContext(packageMetaData)(DatasourceTableViewWithoutAnalytics);

package/dist/es2019/ui/jira-issues-modal/modal/index.js

@@ -7,7 +7,10 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { B400, N0, N40, N800 } from '@atlaskit/theme/colors';
-import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
+import { packageMetaData } from '../../../analytics/constants';
+import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
+import { mapSearchMethod } from '../../../analytics/utils';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
 import { AccessRequired } from '../../common/error-state/access-required';
@@ -15,7 +18,7 @@ import { ModalLoadingError } from '../../common/error-state/modal-loading-error'
 import { NoResults } from '../../common/error-state/no-results';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
 import LinkRenderType from '../../issue-like-table/render-type/link';
-import { getInitialSearchMethod, JiraSearchContainer } from '../jira-search-container';
+import { JiraSearchContainer } from '../jira-search-container';
 import { ModeSwitcher } from '../mode-switcher';
 import { JiraSiteSelector } from '../site-selector';
 import { modalMessages } from './messages';
@@ -44,6 +47,28 @@ const issueCountStyles = css({
 const smartLinkContainerStyles = css({
   paddingLeft: '1px'
 });
+const getDisplayValue = (currentViewMode, itemCount) => {
+  if (currentViewMode === 'count') {
+    return DatasourceDisplay.DATASOURCE_INLINE;
+  }
+  return itemCount > 1 ? DatasourceDisplay.DATASOURCE_TABLE : DatasourceDisplay.INLINE;
+};
+
+/**
+ * This method should be called when one atomic action is performed on columns: adding new item, removing one item, changing items order.
+ * The assumption is that since only one action is changed at each time, we don't have to verify the actual contents of the lists.
+ */
+export const getColumnAction = (oldVisibleColumnKeys, newVisibleColumnKeys) => {
+  const newColumnSize = newVisibleColumnKeys.length;
+  const oldColumnSize = oldVisibleColumnKeys.length;
+  if (newColumnSize > oldColumnSize) {
+    return DatasourceAction.COLUMN_ADDED;
+  } else if (newColumnSize < oldColumnSize) {
+    return DatasourceAction.COLUMN_REMOVED;
+  } else {
+    return DatasourceAction.COLUMN_REORDERED;
+  }
+};
 export const PlainJiraIssuesConfigModal = props => {
   const {
     datasourceId,
@@ -56,12 +81,17 @@ export const PlainJiraIssuesConfigModal = props => {
   const [currentViewMode, setCurrentViewMode] = useState('issue');
   const [cloudId, setCloudId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId);
   const [jql, setJql] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql);
-  const isParametersSet = !!(jql && cloudId);
+  const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+
+  // analytics related parameters
+  const searchCount = useRef(0);
+  const userInteractionActions = useRef(new Set());
+  const lastSearchMethodRef = useRef(null);
   const parameters = useMemo(() => !!cloudId ? {
     cloudId,
     jql: jql || ''
   } : undefined, [cloudId, jql]);
-  const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+  const isParametersSet = !!(jql && cloudId);
   const {
     reset,
     status,
@@ -71,13 +101,14 @@ export const PlainJiraIssuesConfigModal = props => {
     columns,
     defaultVisibleColumnKeys,
     loadDatasourceDetails,
-    totalCount
+    totalCount,
+    extensionKey = null,
+    destinationObjectTypes
   } = useDatasourceTableState({
     datasourceId,
     parameters: isParametersSet ? parameters : undefined,
     fieldKeys: visibleColumnKeys
   });
-  const lastSearchMethodRef = useRef(getInitialSearchMethod(parameters === null || parameters === void 0 ? void 0 : parameters.jql));
   const {
     formatMessage
   } = useIntl();
@@ -85,6 +116,13 @@ export const PlainJiraIssuesConfigModal = props => {
     fireEvent
   } = useDatasourceAnalyticsEvents();
   const selectedJiraSite = useMemo(() => availableSites.find(jiraSite => jiraSite.cloudId === cloudId) || availableSites[0], [availableSites, cloudId]);
+  const buttonClickedAnalyticsPayload = useMemo(() => {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes,
+      actions: userInteractionActions.current
+    };
+  }, [destinationObjectTypes, extensionKey]);
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   const jqlUrl = selectedJiraSite && jql && `${selectedJiraSite.url}/issues/?jql=${encodeURI(jql)}`;
   const isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading' || resolvedWithNoResults;
@@ -112,13 +150,29 @@ export const PlainJiraIssuesConfigModal = props => {
     }
   }, [cloudId, selectedJiraSite]);
   const onSearch = useCallback((newParameters, searchMethod) => {
+    searchCount.current++;
     lastSearchMethodRef.current = searchMethod;
+    if (jql !== newParameters.jql) {
+      userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
+    }
     setJql(newParameters.jql);
     reset({
       shouldForceRequest: true
     });
-  }, [reset]);
+  }, [jql, reset]);
+  const onCancelClick = useCallback((e, analyticEvent) => {
+    analyticEvent.update({
+      eventType: 'ui',
+      actionSubjectId: 'cancel',
+      attributes: {
+        ...buttonClickedAnalyticsPayload,
+        searchCount: searchCount.current
+      }
+    }).fire(EVENT_CHANNEL);
+    onCancel();
+  }, [buttonClickedAnalyticsPayload, onCancel]);
   const onSiteSelection = useCallback(site => {
+    userInteractionActions.current.add(DatasourceAction.INSTANCE_UPDATED);
     setCloudId(site.cloudId);
     reset({
       shouldForceRequest: true
@@ -127,13 +181,26 @@ export const PlainJiraIssuesConfigModal = props => {
   const retrieveUrlForSmartCardRender = useCallback(() => {
     var _data$key, _data$key$data;
     const [data] = responseItems;
-    // agrement with BE that we will use `key` for rendering smartlink
+    // agreement with BE that we will use `key` for rendering smartlink
     return data === null || data === void 0 ? void 0 : (_data$key = data.key) === null || _data$key === void 0 ? void 0 : (_data$key$data = _data$key.data) === null || _data$key$data === void 0 ? void 0 : _data$key$data.url;
   }, [responseItems]);
-  const onInsertPressed = useCallback(() => {
+  const onInsertPressed = useCallback((e, analyticEvent) => {
     if (!isParametersSet || !jql || !selectedJiraSite) {
       return;
     }
+    const insertButtonClickedEvent = analyticEvent.update({
+      actionSubjectId: 'insert',
+      attributes: {
+        ...buttonClickedAnalyticsPayload,
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0,
+        display: getDisplayValue(currentViewMode, totalCount || 0),
+        searchCount: searchCount.current,
+        searchMethod: mapSearchMethod(lastSearchMethodRef.current)
+      },
+      eventType: 'ui'
+    });
+    insertButtonClickedEvent.fire(EVENT_CHANNEL);
     const firstIssueUrl = retrieveUrlForSmartCardRender();
     if (currentViewMode === 'count') {
       onInsert({
@@ -173,10 +240,20 @@ export const PlainJiraIssuesConfigModal = props => {
         }
       });
     }
-  }, [isParametersSet, jql, jqlUrl, selectedJiraSite, retrieveUrlForSmartCardRender, currentViewMode, responseItems.length, onInsert, datasourceId, cloudId, visibleColumnKeys]);
+  }, [isParametersSet, jql, selectedJiraSite, buttonClickedAnalyticsPayload, totalCount, visibleColumnKeys, currentViewMode, retrieveUrlForSmartCardRender, responseItems.length, onInsert, jqlUrl, datasourceId, cloudId]);
   const handleViewModeChange = selectedMode => {
+    userInteractionActions.current.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
     setCurrentViewMode(selectedMode);
   };
+  const handleOnNextPage = useCallback(() => {
+    userInteractionActions.current.add(DatasourceAction.NEXT_PAGE_SCROLLED);
+    onNextPage();
+  }, [onNextPage]);
+  const handleVisibleColumnKeysChange = useCallback((newVisibleColumnKeys = []) => {
+    const columnAction = getColumnAction(visibleColumnKeys || [], newVisibleColumnKeys);
+    userInteractionActions.current.add(columnAction);
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [visibleColumnKeys]);
   const issueLikeDataTableView = useMemo(() => jsx("div", {
     css: contentContainerStyles
   }, jsx(IssueLikeDataTableView, {
@@ -186,10 +263,10 @@ export const PlainJiraIssuesConfigModal = props => {
     items: responseItems,
     hasNextPage: hasNextPage,
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-    onNextPage: onNextPage,
+    onNextPage: handleOnNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
-    onVisibleColumnKeysChange: setVisibleColumnKeys
-  })), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, responseItems, status, visibleColumnKeys]);
+    onVisibleColumnKeysChange: handleVisibleColumnKeysChange
+  })), [columns, defaultVisibleColumnKeys, hasNextPage, handleVisibleColumnKeysChange, loadDatasourceDetails, handleOnNextPage, responseItems, status, visibleColumnKeys]);
   const renderCountModeContent = useCallback(() => {
     const url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {
@@ -283,7 +360,7 @@ export const PlainJiraIssuesConfigModal = props => {
     }
   }))), jsx(Button, {
     appearance: "default",
-    onClick: onCancel
+    onClick: onCancelClick
   }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {
     appearance: "primary",
     onClick: onInsertPressed,
@@ -295,8 +372,7 @@ const analyticsContextAttributes = {
   dataProvider: 'jira-issues'
 };
 const analyticsContextData = {
-  packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.16",
+  ...packageMetaData,
   source: 'datasourceConfigModal'
 };
 const contextData = {

package/dist/esm/analytics/constants.js

@@ -1 +1,5 @@
-export var EVENT_CHANNEL = 'media';
+export var EVENT_CHANNEL = 'media';
+export var packageMetaData = {
+  packageName: "@atlaskit/link-datasource",
+  packageVersion: "1.0.18"
+};

package/dist/esm/analytics/types.js

@@ -0,0 +1,21 @@
+export var DatasourceAction = /*#__PURE__*/function (DatasourceAction) {
+  DatasourceAction["COLUMN_ADDED"] = "column added";
+  DatasourceAction["COLUMN_REMOVED"] = "column removed";
+  DatasourceAction["COLUMN_REORDERED"] = "column reordered";
+  DatasourceAction["INSTANCE_UPDATED"] = "instance updated";
+  DatasourceAction["QUERY_UPDATED"] = "query updated";
+  DatasourceAction["DISPLAY_VIEW_CHANGED"] = "display view changed";
+  DatasourceAction["NEXT_PAGE_SCROLLED"] = "next page scrolled";
+  return DatasourceAction;
+}({});
+export var DatasourceDisplay = /*#__PURE__*/function (DatasourceDisplay) {
+  DatasourceDisplay["DATASOURCE_TABLE"] = "datasource_table";
+  DatasourceDisplay["DATASOURCE_INLINE"] = "datasource_inline";
+  DatasourceDisplay["INLINE"] = "inline";
+  return DatasourceDisplay;
+}({});
+export var DatasourceSearchMethod = /*#__PURE__*/function (DatasourceSearchMethod) {
+  DatasourceSearchMethod["DATASOURCE_BASIC_FILTER"] = "datasource_basic_filter";
+  DatasourceSearchMethod["DATASOURCE_SEARCH_QUERY"] = "datasource_search_query";
+  return DatasourceSearchMethod;
+}({});

package/dist/esm/analytics/utils.js

@@ -1,10 +1,11 @@
+import { DatasourceSearchMethod } from './types';
 export var mapSearchMethod = function mapSearchMethod(searchMethod) {
   switch (searchMethod) {
     case 'basic':
-      return 'datasource_basic_filter';
+      return DatasourceSearchMethod.DATASOURCE_BASIC_FILTER;
     case 'jql':
-      return 'datasource_search_query';
+      return DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY;
     default:
-      return 'unknown';
+      return null;
   }
 };

package/dist/esm/ui/assets-modal/modal/index.js

@@ -210,7 +210,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isDisabled,
-    testId: 'asset-datasource-modal--insert-button'
+    testId: 'assets-datasource-modal--insert-button'
   }, jsx(FormattedMessage, _extends({}, modalMessages.insertIssuesButtonText, {
     values: {
       objectsCount: responseItems.length
@@ -222,7 +222,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.16",
+  packageVersion: "1.0.18",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

package/dist/esm/ui/datasource-table-view/datasourceTableView.js

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { useDatasourceAnalyticsEvents } from '../../analytics';
+import { packageMetaData } from '../../analytics/constants';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
@@ -100,8 +101,4 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     }))
   );
 };
-var analyticsContextData = {
-  packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.16"
-};
-export var DatasourceTableView = withAnalyticsContext(analyticsContextData)(DatasourceTableViewWithoutAnalytics);
+export var DatasourceTableView = withAnalyticsContext(packageMetaData)(DatasourceTableViewWithoutAnalytics);

package/dist/esm/ui/jira-issues-modal/modal/index.js

@@ -1,5 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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; }
@@ -13,7 +13,10 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { B400, N0, N40, N800 } from '@atlaskit/theme/colors';
-import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
+import { packageMetaData } from '../../../analytics/constants';
+import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
+import { mapSearchMethod } from '../../../analytics/utils';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
 import { AccessRequired } from '../../common/error-state/access-required';
@@ -21,7 +24,7 @@ import { ModalLoadingError } from '../../common/error-state/modal-loading-error'
 import { NoResults } from '../../common/error-state/no-results';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
 import LinkRenderType from '../../issue-like-table/render-type/link';
-import { getInitialSearchMethod, JiraSearchContainer } from '../jira-search-container';
+import { JiraSearchContainer } from '../jira-search-container';
 import { ModeSwitcher } from '../mode-switcher';
 import { JiraSiteSelector } from '../site-selector';
 import { modalMessages } from './messages';
@@ -50,6 +53,28 @@ var issueCountStyles = css({
 var smartLinkContainerStyles = css({
   paddingLeft: '1px'
 });
+var getDisplayValue = function getDisplayValue(currentViewMode, itemCount) {
+  if (currentViewMode === 'count') {
+    return DatasourceDisplay.DATASOURCE_INLINE;
+  }
+  return itemCount > 1 ? DatasourceDisplay.DATASOURCE_TABLE : DatasourceDisplay.INLINE;
+};
+
+/**
+ * This method should be called when one atomic action is performed on columns: adding new item, removing one item, changing items order.
+ * The assumption is that since only one action is changed at each time, we don't have to verify the actual contents of the lists.
+ */
+export var getColumnAction = function getColumnAction(oldVisibleColumnKeys, newVisibleColumnKeys) {
+  var newColumnSize = newVisibleColumnKeys.length;
+  var oldColumnSize = oldVisibleColumnKeys.length;
+  if (newColumnSize > oldColumnSize) {
+    return DatasourceAction.COLUMN_ADDED;
+  } else if (newColumnSize < oldColumnSize) {
+    return DatasourceAction.COLUMN_REMOVED;
+  } else {
+    return DatasourceAction.COLUMN_REORDERED;
+  }
+};
 export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialParameters = props.parameters,
@@ -72,17 +97,22 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     _useState8 = _slicedToArray(_useState7, 2),
     jql = _useState8[0],
     setJql = _useState8[1];
-  var isParametersSet = !!(jql && cloudId);
+  var _useState9 = useState(initialVisibleColumnKeys),
+    _useState10 = _slicedToArray(_useState9, 2),
+    visibleColumnKeys = _useState10[0],
+    setVisibleColumnKeys = _useState10[1];
+
+  // analytics related parameters
+  var searchCount = useRef(0);
+  var userInteractionActions = useRef(new Set());
+  var lastSearchMethodRef = useRef(null);
   var parameters = useMemo(function () {
     return !!cloudId ? {
       cloudId: cloudId,
       jql: jql || ''
     } : undefined;
   }, [cloudId, jql]);
-  var _useState9 = useState(initialVisibleColumnKeys),
-    _useState10 = _slicedToArray(_useState9, 2),
-    visibleColumnKeys = _useState10[0],
-    setVisibleColumnKeys = _useState10[1];
+  var isParametersSet = !!(jql && cloudId);
   var _useDatasourceTableSt = useDatasourceTableState({
       datasourceId: datasourceId,
       parameters: isParametersSet ? parameters : undefined,
@@ -96,8 +126,10 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     columns = _useDatasourceTableSt.columns,
     defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
     loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
-    totalCount = _useDatasourceTableSt.totalCount;
-  var lastSearchMethodRef = useRef(getInitialSearchMethod(parameters === null || parameters === void 0 ? void 0 : parameters.jql));
+    totalCount = _useDatasourceTableSt.totalCount,
+    _useDatasourceTableSt2 = _useDatasourceTableSt.extensionKey,
+    extensionKey = _useDatasourceTableSt2 === void 0 ? null : _useDatasourceTableSt2,
+    destinationObjectTypes = _useDatasourceTableSt.destinationObjectTypes;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
@@ -107,6 +139,13 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       return jiraSite.cloudId === cloudId;
     }) || availableSites[0];
   }, [availableSites, cloudId]);
+  var buttonClickedAnalyticsPayload = useMemo(function () {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes,
+      actions: userInteractionActions.current
+    };
+  }, [destinationObjectTypes, extensionKey]);
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var jqlUrl = selectedJiraSite && jql && "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURI(jql));
   var isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading' || resolvedWithNoResults;
@@ -151,13 +190,28 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     }
   }, [cloudId, selectedJiraSite]);
   var onSearch = useCallback(function (newParameters, searchMethod) {
+    searchCount.current++;
     lastSearchMethodRef.current = searchMethod;
+    if (jql !== newParameters.jql) {
+      userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
+    }
     setJql(newParameters.jql);
     reset({
       shouldForceRequest: true
     });
-  }, [reset]);
+  }, [jql, reset]);
+  var onCancelClick = useCallback(function (e, analyticEvent) {
+    analyticEvent.update({
+      eventType: 'ui',
+      actionSubjectId: 'cancel',
+      attributes: _objectSpread(_objectSpread({}, buttonClickedAnalyticsPayload), {}, {
+        searchCount: searchCount.current
+      })
+    }).fire(EVENT_CHANNEL);
+    onCancel();
+  }, [buttonClickedAnalyticsPayload, onCancel]);
   var onSiteSelection = useCallback(function (site) {
+    userInteractionActions.current.add(DatasourceAction.INSTANCE_UPDATED);
     setCloudId(site.cloudId);
     reset({
       shouldForceRequest: true
@@ -167,13 +221,25 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     var _data$key, _data$key$data;
     var _responseItems = _slicedToArray(responseItems, 1),
       data = _responseItems[0];
-    // agrement with BE that we will use `key` for rendering smartlink
+    // agreement with BE that we will use `key` for rendering smartlink
     return data === null || data === void 0 ? void 0 : (_data$key = data.key) === null || _data$key === void 0 ? void 0 : (_data$key$data = _data$key.data) === null || _data$key$data === void 0 ? void 0 : _data$key$data.url;
   }, [responseItems]);
-  var onInsertPressed = useCallback(function () {
+  var onInsertPressed = useCallback(function (e, analyticEvent) {
     if (!isParametersSet || !jql || !selectedJiraSite) {
       return;
     }
+    var insertButtonClickedEvent = analyticEvent.update({
+      actionSubjectId: 'insert',
+      attributes: _objectSpread(_objectSpread({}, buttonClickedAnalyticsPayload), {}, {
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0,
+        display: getDisplayValue(currentViewMode, totalCount || 0),
+        searchCount: searchCount.current,
+        searchMethod: mapSearchMethod(lastSearchMethodRef.current)
+      }),
+      eventType: 'ui'
+    });
+    insertButtonClickedEvent.fire(EVENT_CHANNEL);
     var firstIssueUrl = retrieveUrlForSmartCardRender();
     if (currentViewMode === 'count') {
       onInsert({
@@ -215,10 +281,21 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
         }
       });
     }
-  }, [isParametersSet, jql, jqlUrl, selectedJiraSite, retrieveUrlForSmartCardRender, currentViewMode, responseItems.length, onInsert, datasourceId, cloudId, visibleColumnKeys]);
+  }, [isParametersSet, jql, selectedJiraSite, buttonClickedAnalyticsPayload, totalCount, visibleColumnKeys, currentViewMode, retrieveUrlForSmartCardRender, responseItems.length, onInsert, jqlUrl, datasourceId, cloudId]);
   var handleViewModeChange = function handleViewModeChange(selectedMode) {
+    userInteractionActions.current.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
     setCurrentViewMode(selectedMode);
   };
+  var handleOnNextPage = useCallback(function () {
+    userInteractionActions.current.add(DatasourceAction.NEXT_PAGE_SCROLLED);
+    onNextPage();
+  }, [onNextPage]);
+  var handleVisibleColumnKeysChange = useCallback(function () {
+    var newVisibleColumnKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var columnAction = getColumnAction(visibleColumnKeys || [], newVisibleColumnKeys);
+    userInteractionActions.current.add(columnAction);
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [visibleColumnKeys]);
   var issueLikeDataTableView = useMemo(function () {
     return jsx("div", {
       css: contentContainerStyles
@@ -229,11 +306,11 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       items: responseItems,
       hasNextPage: hasNextPage,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-      onNextPage: onNextPage,
+      onNextPage: handleOnNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
-      onVisibleColumnKeysChange: setVisibleColumnKeys
+      onVisibleColumnKeysChange: handleVisibleColumnKeysChange
     }));
-  }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, responseItems, status, visibleColumnKeys]);
+  }, [columns, defaultVisibleColumnKeys, hasNextPage, handleVisibleColumnKeysChange, loadDatasourceDetails, handleOnNextPage, responseItems, status, visibleColumnKeys]);
   var renderCountModeContent = useCallback(function () {
     var url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {
@@ -327,7 +404,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     }
   }))), jsx(Button, {
     appearance: "default",
-    onClick: onCancel
+    onClick: onCancelClick
   }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {
     appearance: "primary",
     onClick: onInsertPressed,
@@ -338,11 +415,9 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
 var analyticsContextAttributes = {
   dataProvider: 'jira-issues'
 };
-var analyticsContextData = {
-  packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.16",
+var analyticsContextData = _objectSpread(_objectSpread({}, packageMetaData), {}, {
   source: 'datasourceConfigModal'
-};
+});
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
   attributes: _objectSpread({}, analyticsContextAttributes)
 });

package/dist/types/analytics/constants.d.ts

@@ -1 +1,3 @@
+import { PackageMetaDataType } from './generated/analytics.types';
 export declare const EVENT_CHANNEL = "media";
+export declare const packageMetaData: PackageMetaDataType;

package/dist/types/analytics/generated/analytics.types.d.ts

@@ -3,7 +3,7 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::cebde8a5da8d6359c36559622f48971b>>
+ * @codegen <<SignedSource::2d36fde4f879983a499f53e3fb70509b>>
  * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen link-datasource
  */
 export type PackageMetaDataType = {
@@ -37,9 +37,14 @@ export type ButtonClickedInsertAttributesType = {
     display: 'datasource_inline' | 'datasource_table' | 'inline';
     destinationObjectTypes: unknown[];
     searchMethod: 'datasource_search_query' | 'datasource_basic_filter' | 'datasource_saved_filter' | null;
+    extensionKey: string | null;
+    actions: unknown[];
 };
 export type ButtonClickedCancelAttributesType = {
     searchCount: number;
+    destinationObjectTypes: unknown[];
+    extensionKey: string | null;
+    actions: unknown[];
 };
 export type LinkClickedSingleItemAttributesType = {
     extensionKey: string | null;

package/dist/types/analytics/types.d.ts

@@ -0,0 +1,18 @@
+export declare enum DatasourceAction {
+    COLUMN_ADDED = "column added",
+    COLUMN_REMOVED = "column removed",
+    COLUMN_REORDERED = "column reordered",
+    INSTANCE_UPDATED = "instance updated",
+    QUERY_UPDATED = "query updated",
+    DISPLAY_VIEW_CHANGED = "display view changed",
+    NEXT_PAGE_SCROLLED = "next page scrolled"
+}
+export declare enum DatasourceDisplay {
+    DATASOURCE_TABLE = "datasource_table",
+    DATASOURCE_INLINE = "datasource_inline",
+    INLINE = "inline"
+}
+export declare enum DatasourceSearchMethod {
+    DATASOURCE_BASIC_FILTER = "datasource_basic_filter",
+    DATASOURCE_SEARCH_QUERY = "datasource_search_query"
+}

package/dist/types/analytics/utils.d.ts

@@ -1,2 +1,3 @@
 import type { JiraSearchMethod } from '../common/types';
-export declare const mapSearchMethod: (searchMethod: JiraSearchMethod) => "datasource_search_query" | "datasource_basic_filter" | "unknown";
+import { DatasourceSearchMethod } from './types';
+export declare const mapSearchMethod: (searchMethod: JiraSearchMethod | null) => DatasourceSearchMethod | null;

package/dist/types/ui/jira-issues-modal/modal/index.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 import { jsx } from '@emotion/react';
+import { DatasourceAction } from '../../../analytics/types';
 import { JiraIssuesConfigModalProps } from '../types';
+/**
+ * This method should be called when one atomic action is performed on columns: adding new item, removing one item, changing items order.
+ * The assumption is that since only one action is changed at each time, we don't have to verify the actual contents of the lists.
+ */
+export declare const getColumnAction: (oldVisibleColumnKeys: string[], newVisibleColumnKeys: string[]) => DatasourceAction;
 export declare const PlainJiraIssuesConfigModal: (props: JiraIssuesConfigModalProps) => jsx.JSX.Element;
 export declare const JiraIssuesConfigModal: import("react").ForwardRefExoticComponent<JiraIssuesConfigModalProps & import("@atlaskit/analytics-next").WithContextProps & import("react").RefAttributes<any>>;

package/dist/types-ts4.5/analytics/constants.d.ts

@@ -1 +1,3 @@
+import { PackageMetaDataType } from './generated/analytics.types';
 export declare const EVENT_CHANNEL = "media";
+export declare const packageMetaData: PackageMetaDataType;

package/dist/types-ts4.5/analytics/generated/analytics.types.d.ts

@@ -3,7 +3,7 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::cebde8a5da8d6359c36559622f48971b>>
+ * @codegen <<SignedSource::2d36fde4f879983a499f53e3fb70509b>>
  * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen link-datasource
  */
 export type PackageMetaDataType = {
@@ -37,9 +37,14 @@ export type ButtonClickedInsertAttributesType = {
     display: 'datasource_inline' | 'datasource_table' | 'inline';
     destinationObjectTypes: unknown[];
     searchMethod: 'datasource_search_query' | 'datasource_basic_filter' | 'datasource_saved_filter' | null;
+    extensionKey: string | null;
+    actions: unknown[];
 };
 export type ButtonClickedCancelAttributesType = {
     searchCount: number;
+    destinationObjectTypes: unknown[];
+    extensionKey: string | null;
+    actions: unknown[];
 };
 export type LinkClickedSingleItemAttributesType = {
     extensionKey: string | null;

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

@@ -0,0 +1,18 @@
+export declare enum DatasourceAction {
+    COLUMN_ADDED = "column added",
+    COLUMN_REMOVED = "column removed",
+    COLUMN_REORDERED = "column reordered",
+    INSTANCE_UPDATED = "instance updated",
+    QUERY_UPDATED = "query updated",
+    DISPLAY_VIEW_CHANGED = "display view changed",
+    NEXT_PAGE_SCROLLED = "next page scrolled"
+}
+export declare enum DatasourceDisplay {
+    DATASOURCE_TABLE = "datasource_table",
+    DATASOURCE_INLINE = "datasource_inline",
+    INLINE = "inline"
+}
+export declare enum DatasourceSearchMethod {
+    DATASOURCE_BASIC_FILTER = "datasource_basic_filter",
+    DATASOURCE_SEARCH_QUERY = "datasource_search_query"
+}

package/dist/types-ts4.5/analytics/utils.d.ts

@@ -1,2 +1,3 @@
 import type { JiraSearchMethod } from '../common/types';
-export declare const mapSearchMethod: (searchMethod: JiraSearchMethod) => "datasource_search_query" | "datasource_basic_filter" | "unknown";
+import { DatasourceSearchMethod } from './types';
+export declare const mapSearchMethod: (searchMethod: JiraSearchMethod | null) => DatasourceSearchMethod | null;

package/dist/types-ts4.5/ui/jira-issues-modal/modal/index.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 import { jsx } from '@emotion/react';
+import { DatasourceAction } from '../../../analytics/types';
 import { JiraIssuesConfigModalProps } from '../types';
+/**
+ * This method should be called when one atomic action is performed on columns: adding new item, removing one item, changing items order.
+ * The assumption is that since only one action is changed at each time, we don't have to verify the actual contents of the lists.
+ */
+export declare const getColumnAction: (oldVisibleColumnKeys: string[], newVisibleColumnKeys: string[]) => DatasourceAction;
 export declare const PlainJiraIssuesConfigModal: (props: JiraIssuesConfigModalProps) => jsx.JSX.Element;
 export declare const JiraIssuesConfigModal: import("react").ForwardRefExoticComponent<JiraIssuesConfigModalProps & import("@atlaskit/analytics-next").WithContextProps & import("react").RefAttributes<any>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,8 +33,8 @@
     "@atlaskit/adf-schema": "28.1.2",
     "@atlaskit/analytics-next": "^9.1.3",
     "@atlaskit/avatar": "^21.3.0",
-    "@atlaskit/button": "^16.9.0",
-    "@atlaskit/dropdown-menu": "^11.12.0",
+    "@atlaskit/button": "^16.10.0",
+    "@atlaskit/dropdown-menu": "^11.13.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/empty-state": "^7.5.0",
     "@atlaskit/form": "^8.11.0",
@@ -45,7 +45,7 @@
     "@atlaskit/jql-editor-autocomplete-rest": "^1.0.0",
     "@atlaskit/link-client-extension": "^1.6.0",
     "@atlaskit/linking-common": "^4.6.0",
-    "@atlaskit/linking-types": "^8.2.0",
+    "@atlaskit/linking-types": "^8.3.0",
     "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/modal-dialog": "^12.6.0",
     "@atlaskit/pragmatic-drag-and-drop": "^0.23.0",
@@ -53,12 +53,12 @@
     "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.0",
     "@atlaskit/pragmatic-drag-and-drop-react-indicator": "^0.16.0",
     "@atlaskit/select": "^16.5.0",
-    "@atlaskit/smart-card": "^26.20.0",
+    "@atlaskit/smart-card": "^26.23.0",
     "@atlaskit/spinner": "^15.5.0",
-    "@atlaskit/tag": "^11.5.0",
+    "@atlaskit/tag": "^11.6.0",
     "@atlaskit/textfield": "5.6.6",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.20.0",
+    "@atlaskit/tokens": "^1.21.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlassianlabs/jql-editor": "^2.0.1",
     "@babel/runtime": "^7.0.0",