@atlaskit/link-datasource 1.25.0 → 1.25.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/link-datasource
 
+## 1.25.2
+
+### Patch Changes
+
+- [#87128](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87128) [`2b6b715884a0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2b6b715884a0) - Adds Insert button click analytics event and tests to confluence-search config modal.
+- Updated dependencies
+
+## 1.25.1
+
+### Patch Changes
+
+- [#86770](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/86770) [`67209c8f2921`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/67209c8f2921) - Adds cancel button click analytics event and tests to confluence-search config modal.
+- Updated dependencies
+
 ## 1.25.0
 
 ### Minor Changes

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

@@ -31,6 +31,7 @@ var _en = _interopRequireDefault(require("../../../i18n/en"));
 var _cmdbService = require("../../../services/cmdbService.utils");
 var _accessRequired = require("../../../ui/common/error-state/access-required");
 var _modalLoadingError = require("../../common/error-state/modal-loading-error");
+var _cancelButton = require("../../common/modal/cancel-button");
 var _searchContainer = require("../search-container");
 var _loadingState = require("../search-container/loading-state");
 var _messages = require("./messages");
@@ -272,17 +273,6 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
       }), consumerEvent);
     }
   }, [aql, schemaId, workspaceId, analyticsPayload, totalCount, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, visibleColumnKeys]);
-  var onCancelClick = (0, _react.useCallback)(function (e, analyticEvent) {
-    analyticEvent.update({
-      eventType: 'ui',
-      actionSubjectId: 'cancel',
-      attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
-        searchCount: searchCount.current,
-        actions: Array.from(userInteractionActions.current)
-      })
-    }).fire(_analytics.EVENT_CHANNEL);
-    onCancel();
-  }, [analyticsPayload, onCancel]);
   var handleOnSearch = (0, _react.useCallback)(function (searchAql, searchSchemaId) {
     if (schemaId !== searchSchemaId || aql !== searchAql || status === 'rejected') {
       searchCount.current++;
@@ -336,6 +326,12 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
       });
     }
   }, [errorState, workspaceId, assetsClientLoading, initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql, existingObjectSchema, objectSchemas, handleOnSearch, status]);
+  var getCancelButtonAnalyticsPayload = (0, _react.useCallback)(function () {
+    return _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+      searchCount: searchCount.current,
+      actions: Array.from(userInteractionActions.current)
+    });
+  }, [analyticsPayload]);
   return (0, _react2.jsx)(_intlMessagesProvider.IntlMessagesProvider, {
     defaultMessages: _en.default,
     loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
@@ -362,11 +358,11 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     columns: columns,
     defaultVisibleColumnKeys: defaultVisibleColumnKeys,
     modalRenderInstanceId: modalRenderInstanceId
-  })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_standardButton.default, {
-    appearance: "default",
-    onClick: onCancelClick,
+  })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_cancelButton.CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getCancelButtonAnalyticsPayload,
     testId: 'asset-datasource-modal--cancel-button'
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.cancelButtonText)), (0, _react2.jsx)(_standardButton.default, {
+  }), (0, _react2.jsx)(_standardButton.default, {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isDisabled,

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

@@ -6,11 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.modalMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var modalMessages = exports.modalMessages = (0, _reactIntlNext.defineMessages)({
-  cancelButtonText: {
-    id: 'linkDataSource.assets.configmodal.cancelButtonText',
-    description: 'Button text to close the modal with no changes being made',
-    defaultMessage: 'Cancel'
-  },
   updateObjectsButtonText: {
     id: 'linkDataSource.assets.configmodal.updateObjectsButtonText',
     description: 'Button text to update the displayed content',

package/dist/cjs/ui/common/modal/cancel-button/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CancelButton = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _analytics = require("../../../../analytics");
+var _messages = require("./messages");
+/** @jsx jsx */
+
+var CancelButton = exports.CancelButton = function CancelButton(_ref) {
+  var getAnalyticsPayload = _ref.getAnalyticsPayload,
+    onCancel = _ref.onCancel,
+    testId = _ref.testId;
+  var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  var onCancelClick = (0, _react.useCallback)(function () {
+    fireEvent('ui.button.clicked.cancel', getAnalyticsPayload());
+    onCancel();
+  }, [getAnalyticsPayload, fireEvent, onCancel]);
+  return (0, _react2.jsx)(_standardButton.default, {
+    appearance: "default",
+    onClick: onCancelClick,
+    testId: testId
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cancelButtonMessages.cancelButtonText));
+};

package/dist/cjs/ui/common/modal/cancel-button/messages.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cancelButtonMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var cancelButtonMessages = exports.cancelButtonMessages = (0, _reactIntlNext.defineMessages)({
+  cancelButtonText: {
+    id: 'linkDataSource.configmodal.cancelButtonText',
+    description: 'Button text to close the modal with no changes being made',
+    defaultMessage: 'Cancel'
+  }
+});

package/dist/cjs/ui/confluence-search-modal/modal/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ConfluenceSearchConfigModal = void 0;
+exports.getColumnAction = exports.PlainConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -16,6 +16,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _uuid = require("uuid");
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
@@ -23,6 +24,9 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
 var _colors = require("@atlaskit/theme/colors");
+var _analytics = require("../../../analytics");
+var _constants = require("../../../analytics/constants");
+var _types = require("../../../analytics/types");
 var _adf = require("../../../common/utils/adf");
 var _fetchMessagesForLocale = require("../../../common/utils/locale/fetch-messages-for-locale");
 var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
@@ -33,6 +37,7 @@ var _modalLoadingError = require("../../common/error-state/modal-loading-error")
 var _noInstances = require("../../common/error-state/no-instances");
 var _noResults = require("../../common/error-state/no-results");
 var _initialStateView = require("../../common/initial-state-view");
+var _cancelButton = require("../../common/modal/cancel-button");
 var _contentContainer = require("../../common/modal/content-container");
 var _siteSelector = require("../../common/modal/site-selector");
 var _issueLikeTable = require("../../issue-like-table");
@@ -52,7 +57,20 @@ var searchCountStyles = (0, _primitives.xcss)({
   flex: 1,
   fontWeight: 600
 });
-var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(props) {
+
+// TODO: common functionality of all modals refactor in EDM-9573
+var getColumnAction = exports.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;
+  }
+};
+var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConfigModal(props) {
   var _useRef = (0, _react.useRef)((0, _uuid.v4)()),
     modalRenderInstanceId = _useRef.current;
   var datasourceId = props.datasourceId,
@@ -80,6 +98,11 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
     visibleColumnKeys = _useState8[0],
     setVisibleColumnKeys = _useState8[1];
 
+  // analytics related parameters
+  var searchCount = (0, _react.useRef)(0);
+  var userInteractionActions = (0, _react.useRef)(new Set());
+  var visibleColumnCount = (0, _react.useRef)((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
+
   // TODO: further refactoring in EDM-9573
   // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829210
   var parameters = (0, _react.useMemo)(function () {
@@ -106,9 +129,10 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
     columns = _useDatasourceTableSt.columns,
     defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
     loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
+    totalCount = _useDatasourceTableSt.totalCount,
     _useDatasourceTableSt2 = _useDatasourceTableSt.extensionKey,
     extensionKey = _useDatasourceTableSt2 === void 0 ? null : _useDatasourceTableSt2,
-    totalCount = _useDatasourceTableSt.totalCount;
+    destinationObjectTypes = _useDatasourceTableSt.destinationObjectTypes;
   var hasNoConfluenceSites = availableSites && availableSites.length === 0;
   var selectedConfluenceSite = (0, _react.useMemo)(function () {
     if (cloudId) {
@@ -170,6 +194,11 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
     }();
     void fetchSiteDisplayNames();
   }, []);
+  (0, _react.useEffect)(function () {
+    var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
+    visibleColumnCount.current = newVisibleColumnKeys.length;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
   var siteSelectorLabel = availableSites && availableSites.length > 1 ? _messages.confluenceSearchModalMessages.insertIssuesTitleManySites : _messages.confluenceSearchModalMessages.insertIssuesTitle;
   var _useState9 = (0, _react.useState)(initialColumnCustomSizes),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
@@ -192,6 +221,15 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
     setWrappedColumnKeys(Array.from(set));
   }, [wrappedColumnKeys]);
 
+  // TODO: common functionality of all modals refactor in EDM-9573
+  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);
+    visibleColumnCount.current = newVisibleColumnKeys.length;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [visibleColumnKeys]);
+
   // TODO: further refactoring in EDM-9573
   // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6798258
   var confluenceSearchTable = (0, _react.useMemo)(function () {
@@ -206,7 +244,7 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onNextPage: onNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
-      onVisibleColumnKeysChange: setVisibleColumnKeys,
+      onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
       parentContainerRenderInstanceId: modalRenderInstanceId,
       extensionKey: extensionKey,
       columnCustomSizes: columnCustomSizes,
@@ -214,11 +252,19 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
       wrappedColumnKeys: wrappedColumnKeys,
       onWrappedColumnChange: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
     }));
-  }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, setVisibleColumnKeys, modalRenderInstanceId, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, modalRenderInstanceId, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var hasConfluenceSearchParams = selectedConfluenceSite && searchString;
   var selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
   var confluenceSearchUrl = selectedConfluenceSiteUrl && searchString !== undefined && "".concat(selectedConfluenceSiteUrl, "/wiki/search/?text=").concat(encodeURI(searchString));
+  var analyticsPayload = (0, _react.useMemo)(function () {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes,
+      searchCount: searchCount.current,
+      actions: Array.from(userInteractionActions.current)
+    };
+  }, [destinationObjectTypes, extensionKey]);
   var renderModalContent = (0, _react.useCallback)(function () {
     if (status === 'rejected') {
       return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, null);
@@ -244,10 +290,25 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
     return confluenceSearchTable;
   }, [columns.length, selectedConfluenceSiteUrl, confluenceSearchTable, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
   var shouldShowResultsCount = !!totalCount && totalCount !== 1;
-  var onInsertPressed = (0, _react.useCallback)(function () {
+  var onInsertPressed = (0, _react.useCallback)(function (e, analyticsEvent) {
+    var _insertButtonClickedE;
     if (!isParametersSet || !cloudId) {
       return;
     }
+    var insertButtonClickedEvent = analyticsEvent.update({
+      actionSubjectId: 'insert',
+      attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: visibleColumnCount.current,
+        display: _types.DatasourceDisplay.DATASOURCE_TABLE,
+        searchCount: searchCount.current,
+        searchMethod: _types.DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        actions: Array.from(userInteractionActions.current)
+      }),
+      eventType: 'ui'
+    });
+    var consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
+    insertButtonClickedEvent.fire(_analytics.EVENT_CHANNEL);
     onInsert((0, _adf.buildDatasourceAdf)({
       id: datasourceId,
       parameters: _objectSpread(_objectSpread({}, parameters), {}, {
@@ -269,15 +330,25 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
           })
         }
       }]
-    }));
-  }, [cloudId, isParametersSet, onInsert, datasourceId, parameters, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+    }), consumerEvent);
+  }, [isParametersSet, cloudId, analyticsPayload, totalCount, onInsert, datasourceId, parameters, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
   var onSearch = (0, _react.useCallback)(function (newSearchString) {
+    searchCount.current++;
+    userInteractionActions.current.add(_types.DatasourceAction.QUERY_UPDATED);
     setSearchString(newSearchString);
     reset({
       shouldForceRequest: true
     });
   }, [reset]);
   var isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
+  var getCancelButtonAnalyticsPayload = (0, _react.useCallback)(function () {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes,
+      searchCount: searchCount.current,
+      actions: Array.from(userInteractionActions.current)
+    };
+  }, [destinationObjectTypes, extensionKey]);
   return (0, _react2.jsx)(_intlMessagesProvider.IntlMessagesProvider, {
     defaultMessages: _en.default,
     loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
@@ -319,13 +390,24 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
     values: {
       totalCount: totalCount
     }
-  })))), (0, _react2.jsx)(_standardButton.default, {
-    appearance: "default",
-    onClick: onCancel
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.confluenceSearchModalMessages.cancelButtonText)), !hasNoConfluenceSites && (0, _react2.jsx)(_standardButton.default, {
+  })))), (0, _react2.jsx)(_cancelButton.CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getCancelButtonAnalyticsPayload,
+    testId: "confluence-search-modal--cancel-button"
+  }), !hasNoConfluenceSites && (0, _react2.jsx)(_standardButton.default, {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,
     testId: "confluence-search-datasource-modal--insert-button"
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.confluenceSearchModalMessages.insertResultsButtonText)))));
-};
+};
+var analyticsContextAttributes = {
+  dataProvider: 'confluence-search'
+};
+var analyticsContextData = _objectSpread(_objectSpread({}, _constants.componentMetadata.configModal), {}, {
+  source: 'datasourceConfigModal'
+});
+var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
+  attributes: _objectSpread({}, analyticsContextAttributes)
+});
+var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = (0, _analyticsNext.withAnalyticsContext)(contextData)(PlainConfluenceSearchConfigModal);

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

@@ -42,6 +42,7 @@ var _noInstances = require("../../common/error-state/no-instances");
 var _noResults = require("../../common/error-state/no-results");
 var _initialStateView = require("../../common/initial-state-view");
 var _messages2 = require("../../common/initial-state-view/messages");
+var _cancelButton = require("../../common/modal/cancel-button");
 var _contentContainer = require("../../common/modal/content-container");
 var _siteSelector = require("../../common/modal/site-selector");
 var _issueLikeTable = require("../../issue-like-table");
@@ -335,17 +336,6 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
       shouldForceRequest: true
     });
   }, [jql, reset]);
-  var onCancelClick = (0, _react.useCallback)(function (e, analyticEvent) {
-    analyticEvent.update({
-      eventType: 'ui',
-      actionSubjectId: 'cancel',
-      attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
-        searchCount: searchCount.current,
-        actions: Array.from(userInteractionActions.current)
-      })
-    }).fire(_analytics.EVENT_CHANNEL);
-    onCancel();
-  }, [analyticsPayload, onCancel]);
   var onSiteSelection = (0, _react.useCallback)(function (site) {
     userInteractionActions.current.add(_types.DatasourceAction.INSTANCE_UPDATED);
     setJql('');
@@ -547,6 +537,12 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     return issueLikeDataTableView;
   }, [columns.length, currentSearchMethod, issueLikeDataTableView, jql, jqlUrl, resolvedWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
   var siteSelectorLabel = availableSites && availableSites.length > 1 ? _messages3.modalMessages.insertIssuesTitleManySites : _messages3.modalMessages.insertIssuesTitle;
+  var getCancelButtonAnalyticsPayload = (0, _react.useCallback)(function () {
+    return _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+      searchCount: searchCount.current,
+      actions: Array.from(userInteractionActions.current)
+    });
+  }, [analyticsPayload]);
   return (0, _react2.jsx)(_intlMessagesProvider.IntlMessagesProvider, {
     defaultMessages: _en.default,
     loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
@@ -593,10 +589,11 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     values: {
       totalCount: totalCount
     }
-  })))), (0, _react2.jsx)(_standardButton.default, {
-    appearance: "default",
-    onClick: onCancelClick
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages3.modalMessages.cancelButtonText)), !hasNoJiraSites && (0, _react2.jsx)(_standardButton.default, {
+  })))), (0, _react2.jsx)(_cancelButton.CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getCancelButtonAnalyticsPayload,
+    testId: "jira-datasource-modal--cancel-button"
+  }), !hasNoJiraSites && (0, _react2.jsx)(_standardButton.default, {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,

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

@@ -6,11 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.modalMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var modalMessages = exports.modalMessages = (0, _reactIntlNext.defineMessages)({
-  cancelButtonText: {
-    id: 'linkDataSource.jira-issues.configmodal.cancelButtonText',
-    description: 'Button text to close the modal with no changes being made',
-    defaultMessage: 'Cancel'
-  },
   insertIssuesButtonText: {
     id: 'linkDataSource.jira-issues.configmodal.insertIssuesButtonText',
     description: 'Button text to insert the displayed content',

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

@@ -22,6 +22,7 @@ import i18nEN from '../../../i18n/en';
 import { PermissionError } from '../../../services/cmdbService.utils';
 import { AccessRequired } from '../../../ui/common/error-state/access-required';
 import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
+import { CancelButton } from '../../common/modal/cancel-button';
 import { AssetsSearchContainer } from '../search-container';
 import { AssetsSearchContainerLoading } from '../search-container/loading-state';
 import { modalMessages } from './messages';
@@ -246,18 +247,6 @@ const PlainAssetsConfigModal = props => {
       }), consumerEvent);
     }
   }, [aql, schemaId, workspaceId, analyticsPayload, totalCount, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, visibleColumnKeys]);
-  const onCancelClick = useCallback((e, analyticEvent) => {
-    analyticEvent.update({
-      eventType: 'ui',
-      actionSubjectId: 'cancel',
-      attributes: {
-        ...analyticsPayload,
-        searchCount: searchCount.current,
-        actions: Array.from(userInteractionActions.current)
-      }
-    }).fire(EVENT_CHANNEL);
-    onCancel();
-  }, [analyticsPayload, onCancel]);
   const handleOnSearch = useCallback((searchAql, searchSchemaId) => {
     if (schemaId !== searchSchemaId || aql !== searchAql || status === 'rejected') {
       searchCount.current++;
@@ -311,6 +300,13 @@ const PlainAssetsConfigModal = props => {
       });
     }
   }, [errorState, workspaceId, assetsClientLoading, initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql, existingObjectSchema, objectSchemas, handleOnSearch, status]);
+  const getCancelButtonAnalyticsPayload = useCallback(() => {
+    return {
+      ...analyticsPayload,
+      searchCount: searchCount.current,
+      actions: Array.from(userInteractionActions.current)
+    };
+  }, [analyticsPayload]);
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -337,11 +333,11 @@ const PlainAssetsConfigModal = props => {
     columns: columns,
     defaultVisibleColumnKeys: defaultVisibleColumnKeys,
     modalRenderInstanceId: modalRenderInstanceId
-  })), jsx(ModalFooter, null, jsx(Button, {
-    appearance: "default",
-    onClick: onCancelClick,
+  })), jsx(ModalFooter, null, jsx(CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getCancelButtonAnalyticsPayload,
     testId: 'asset-datasource-modal--cancel-button'
-  }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {
+  }), jsx(Button, {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isDisabled,

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

@@ -1,10 +1,5 @@
 import { defineMessages } from 'react-intl-next';
 export const modalMessages = defineMessages({
-  cancelButtonText: {
-    id: 'linkDataSource.assets.configmodal.cancelButtonText',
-    description: 'Button text to close the modal with no changes being made',
-    defaultMessage: 'Cancel'
-  },
   updateObjectsButtonText: {
     id: 'linkDataSource.assets.configmodal.updateObjectsButtonText',
     description: 'Button text to update the displayed content',

package/dist/es2019/ui/common/modal/cancel-button/index.js

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import { useCallback } from 'react';
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import Button from '@atlaskit/button/standard-button';
+import { useDatasourceAnalyticsEvents } from '../../../../analytics';
+import { cancelButtonMessages } from './messages';
+export const CancelButton = ({
+  getAnalyticsPayload,
+  onCancel,
+  testId
+}) => {
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  const onCancelClick = useCallback(() => {
+    fireEvent('ui.button.clicked.cancel', getAnalyticsPayload());
+    onCancel();
+  }, [getAnalyticsPayload, fireEvent, onCancel]);
+  return jsx(Button, {
+    appearance: "default",
+    onClick: onCancelClick,
+    testId: testId
+  }, jsx(FormattedMessage, cancelButtonMessages.cancelButtonText));
+};

package/dist/es2019/ui/common/modal/cancel-button/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const cancelButtonMessages = defineMessages({
+  cancelButtonText: {
+    id: 'linkDataSource.configmodal.cancelButtonText',
+    description: 'Button text to close the modal with no changes being made',
+    defaultMessage: 'Cancel'
+  }
+});