@atlaskit/link-datasource 1.25.0 → 1.25.2

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

@@ -4,6 +4,7 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'rea
 import { jsx } from '@emotion/react';
 import { FormattedMessage, FormattedNumber } from 'react-intl-next';
 import { v4 as uuidv4 } from 'uuid';
+import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
@@ -11,6 +12,9 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N800 } from '@atlaskit/theme/colors';
+import { EVENT_CHANNEL } from '../../../analytics';
+import { componentMetadata } from '../../../analytics/constants';
+import { DatasourceAction, DatasourceDisplay, DatasourceSearchMethod } from '../../../analytics/types';
 import { buildDatasourceAdf } from '../../../common/utils/adf';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
@@ -21,6 +25,7 @@ import { ModalLoadingError } from '../../common/error-state/modal-loading-error'
 import { NoInstancesView } from '../../common/error-state/no-instances';
 import { NoResults } from '../../common/error-state/no-results';
 import { InitialStateView } from '../../common/initial-state-view';
+import { CancelButton } from '../../common/modal/cancel-button';
 import { ContentContainer } from '../../common/modal/content-container';
 import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
@@ -36,7 +41,20 @@ const searchCountStyles = xcss({
   flex: 1,
   fontWeight: 600
 });
-export const ConfluenceSearchConfigModal = props => {
+
+// TODO: common functionality of all modals refactor in EDM-9573
+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 PlainConfluenceSearchConfigModal = props => {
   const {
     current: modalRenderInstanceId
   } = useRef(uuidv4());
@@ -55,6 +73,11 @@ export const ConfluenceSearchConfigModal = props => {
   const [searchString, setSearchString] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString);
   const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
 
+  // analytics related parameters
+  const searchCount = useRef(0);
+  const userInteractionActions = useRef(new Set());
+  const visibleColumnCount = 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
   const parameters = useMemo(() => ({
@@ -72,8 +95,9 @@ export const ConfluenceSearchConfigModal = props => {
     columns,
     defaultVisibleColumnKeys,
     loadDatasourceDetails,
+    totalCount,
     extensionKey = null,
-    totalCount
+    destinationObjectTypes
   } = useDatasourceTableState({
     datasourceId,
     parameters: isParametersSet ? parameters : undefined,
@@ -117,6 +141,11 @@ export const ConfluenceSearchConfigModal = props => {
     };
     void fetchSiteDisplayNames();
   }, []);
+  useEffect(() => {
+    const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
+    visibleColumnCount.current = newVisibleColumnKeys.length;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
   const siteSelectorLabel = availableSites && availableSites.length > 1 ? confluenceSearchModalMessages.insertIssuesTitleManySites : confluenceSearchModalMessages.insertIssuesTitle;
   const [columnCustomSizes, setColumnCustomSizes] = useState(initialColumnCustomSizes);
   const onColumnResize = useCallback((key, width) => {
@@ -136,6 +165,14 @@ export const ConfluenceSearchConfigModal = props => {
     setWrappedColumnKeys(Array.from(set));
   }, [wrappedColumnKeys]);
 
+  // TODO: common functionality of all modals refactor in EDM-9573
+  const handleVisibleColumnKeysChange = useCallback((newVisibleColumnKeys = []) => {
+    const 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
   const confluenceSearchTable = useMemo(() => jsx(ContentContainer, {
@@ -149,18 +186,24 @@ export const ConfluenceSearchConfigModal = props => {
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
     onNextPage: onNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
-    onVisibleColumnKeysChange: setVisibleColumnKeys,
+    onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
     parentContainerRenderInstanceId: modalRenderInstanceId,
     extensionKey: extensionKey,
     columnCustomSizes: columnCustomSizes,
     onColumnResize: onColumnResize,
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: 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]);
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   const hasConfluenceSearchParams = selectedConfluenceSite && searchString;
   const selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
   const confluenceSearchUrl = selectedConfluenceSiteUrl && searchString !== undefined && `${selectedConfluenceSiteUrl}/wiki/search/?text=${encodeURI(searchString)}`;
+  const analyticsPayload = useMemo(() => ({
+    extensionKey,
+    destinationObjectTypes,
+    searchCount: searchCount.current,
+    actions: Array.from(userInteractionActions.current)
+  }), [destinationObjectTypes, extensionKey]);
   const renderModalContent = useCallback(() => {
     if (status === 'rejected') {
       return jsx(ModalLoadingError, null);
@@ -186,10 +229,26 @@ export const ConfluenceSearchConfigModal = props => {
     return confluenceSearchTable;
   }, [columns.length, selectedConfluenceSiteUrl, confluenceSearchTable, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
   const shouldShowResultsCount = !!totalCount && totalCount !== 1;
-  const onInsertPressed = useCallback(() => {
+  const onInsertPressed = useCallback((e, analyticsEvent) => {
+    var _insertButtonClickedE;
     if (!isParametersSet || !cloudId) {
       return;
     }
+    const insertButtonClickedEvent = analyticsEvent.update({
+      actionSubjectId: 'insert',
+      attributes: {
+        ...analyticsPayload,
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: visibleColumnCount.current,
+        display: DatasourceDisplay.DATASOURCE_TABLE,
+        searchCount: searchCount.current,
+        searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        actions: Array.from(userInteractionActions.current)
+      },
+      eventType: 'ui'
+    });
+    const consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
+    insertButtonClickedEvent.fire(EVENT_CHANNEL);
     onInsert(buildDatasourceAdf({
       id: datasourceId,
       parameters: {
@@ -214,15 +273,25 @@ export const ConfluenceSearchConfigModal = props => {
           })
         }
       }]
-    }));
-  }, [cloudId, isParametersSet, onInsert, datasourceId, parameters, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+    }), consumerEvent);
+  }, [isParametersSet, cloudId, analyticsPayload, totalCount, onInsert, datasourceId, parameters, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
   const onSearch = useCallback(newSearchString => {
+    searchCount.current++;
+    userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
     setSearchString(newSearchString);
     reset({
       shouldForceRequest: true
     });
   }, [reset]);
   const isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
+  const getCancelButtonAnalyticsPayload = useCallback(() => {
+    return {
+      extensionKey,
+      destinationObjectTypes,
+      searchCount: searchCount.current,
+      actions: Array.from(userInteractionActions.current)
+    };
+  }, [destinationObjectTypes, extensionKey]);
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -264,13 +333,28 @@ export const ConfluenceSearchConfigModal = props => {
     values: {
       totalCount
     }
-  })))), jsx(Button, {
-    appearance: "default",
-    onClick: onCancel
-  }, jsx(FormattedMessage, confluenceSearchModalMessages.cancelButtonText)), !hasNoConfluenceSites && jsx(Button, {
+  })))), jsx(CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getCancelButtonAnalyticsPayload,
+    testId: "confluence-search-modal--cancel-button"
+  }), !hasNoConfluenceSites && jsx(Button, {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,
     testId: "confluence-search-datasource-modal--insert-button"
   }, jsx(FormattedMessage, confluenceSearchModalMessages.insertResultsButtonText)))));
-};
+};
+const analyticsContextAttributes = {
+  dataProvider: 'confluence-search'
+};
+const analyticsContextData = {
+  ...componentMetadata.configModal,
+  source: 'datasourceConfigModal'
+};
+const contextData = {
+  ...analyticsContextData,
+  attributes: {
+    ...analyticsContextAttributes
+  }
+};
+export const ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(PlainConfluenceSearchConfigModal);

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

@@ -30,6 +30,7 @@ import { NoInstancesView } from '../../common/error-state/no-instances';
 import { NoResults } from '../../common/error-state/no-results';
 import { InitialStateView } from '../../common/initial-state-view';
 import { initialStateViewMessages } from '../../common/initial-state-view/messages';
+import { CancelButton } from '../../common/modal/cancel-button';
 import { ContentContainer } from '../../common/modal/content-container';
 import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
@@ -161,12 +162,10 @@ export const PlainJiraIssuesConfigModal = props => {
       return (availableSites === null || availableSites === void 0 ? void 0 : availableSites.find(jiraSite => jiraSite.url === currentlyLoggedInSiteUrl)) || (availableSites === null || availableSites === void 0 ? void 0 : availableSites[0]);
     }
   }, [availableSites, cloudId]);
-  const analyticsPayload = useMemo(() => {
-    return {
-      extensionKey: extensionKey,
-      destinationObjectTypes: destinationObjectTypes
-    };
-  }, [destinationObjectTypes, extensionKey]);
+  const analyticsPayload = useMemo(() => ({
+    extensionKey,
+    destinationObjectTypes
+  }), [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';
@@ -277,18 +276,6 @@ export const PlainJiraIssuesConfigModal = props => {
       shouldForceRequest: true
     });
   }, [jql, reset]);
-  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 onSiteSelection = useCallback(site => {
     userInteractionActions.current.add(DatasourceAction.INSTANCE_UPDATED);
     setJql('');
@@ -493,6 +480,13 @@ export const PlainJiraIssuesConfigModal = props => {
     return issueLikeDataTableView;
   }, [columns.length, currentSearchMethod, issueLikeDataTableView, jql, jqlUrl, resolvedWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
   const siteSelectorLabel = availableSites && availableSites.length > 1 ? modalMessages.insertIssuesTitleManySites : modalMessages.insertIssuesTitle;
+  const getCancelButtonAnalyticsPayload = useCallback(() => {
+    return {
+      ...analyticsPayload,
+      searchCount: searchCount.current,
+      actions: Array.from(userInteractionActions.current)
+    };
+  }, [analyticsPayload]);
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -539,10 +533,11 @@ export const PlainJiraIssuesConfigModal = props => {
     values: {
       totalCount
     }
-  })))), jsx(Button, {
-    appearance: "default",
-    onClick: onCancelClick
-  }, jsx(FormattedMessage, modalMessages.cancelButtonText)), !hasNoJiraSites && jsx(Button, {
+  })))), jsx(CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getCancelButtonAnalyticsPayload,
+    testId: "jira-datasource-modal--cancel-button"
+  }), !hasNoJiraSites && jsx(Button, {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,

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

@@ -1,10 +1,5 @@
 import { defineMessages } from 'react-intl-next';
 export const modalMessages = 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/esm/ui/assets-modal/modal/index.js

@@ -26,6 +26,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';
@@ -263,17 +264,6 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
       }), consumerEvent);
     }
   }, [aql, schemaId, workspaceId, analyticsPayload, totalCount, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, visibleColumnKeys]);
-  var onCancelClick = useCallback(function (e, analyticEvent) {
-    analyticEvent.update({
-      eventType: 'ui',
-      actionSubjectId: 'cancel',
-      attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
-        searchCount: searchCount.current,
-        actions: Array.from(userInteractionActions.current)
-      })
-    }).fire(EVENT_CHANNEL);
-    onCancel();
-  }, [analyticsPayload, onCancel]);
   var handleOnSearch = useCallback(function (searchAql, searchSchemaId) {
     if (schemaId !== searchSchemaId || aql !== searchAql || status === 'rejected') {
       searchCount.current++;
@@ -327,6 +317,12 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
       });
     }
   }, [errorState, workspaceId, assetsClientLoading, initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql, existingObjectSchema, objectSchemas, handleOnSearch, status]);
+  var getCancelButtonAnalyticsPayload = useCallback(function () {
+    return _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+      searchCount: searchCount.current,
+      actions: Array.from(userInteractionActions.current)
+    });
+  }, [analyticsPayload]);
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -353,11 +349,11 @@ var PlainAssetsConfigModal = function 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/esm/ui/assets-modal/modal/messages.js

@@ -1,10 +1,5 @@
 import { defineMessages } from 'react-intl-next';
 export var 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/esm/ui/common/modal/cancel-button/index.js

@@ -0,0 +1,23 @@
+/** @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 var CancelButton = function CancelButton(_ref) {
+  var getAnalyticsPayload = _ref.getAnalyticsPayload,
+    onCancel = _ref.onCancel,
+    testId = _ref.testId;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  var onCancelClick = useCallback(function () {
+    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/esm/ui/common/modal/cancel-button/messages.js

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

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

@@ -11,6 +11,7 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'rea
 import { jsx } from '@emotion/react';
 import { FormattedMessage, FormattedNumber } from 'react-intl-next';
 import { v4 as uuidv4 } from 'uuid';
+import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
@@ -18,6 +19,9 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N800 } from '@atlaskit/theme/colors';
+import { EVENT_CHANNEL } from '../../../analytics';
+import { componentMetadata } from '../../../analytics/constants';
+import { DatasourceAction, DatasourceDisplay, DatasourceSearchMethod } from '../../../analytics/types';
 import { buildDatasourceAdf } from '../../../common/utils/adf';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
@@ -28,6 +32,7 @@ import { ModalLoadingError } from '../../common/error-state/modal-loading-error'
 import { NoInstancesView } from '../../common/error-state/no-instances';
 import { NoResults } from '../../common/error-state/no-results';
 import { InitialStateView } from '../../common/initial-state-view';
+import { CancelButton } from '../../common/modal/cancel-button';
 import { ContentContainer } from '../../common/modal/content-container';
 import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
@@ -43,7 +48,20 @@ var searchCountStyles = xcss({
   flex: 1,
   fontWeight: 600
 });
-export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(props) {
+
+// TODO: common functionality of all modals refactor in EDM-9573
+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 PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConfigModal(props) {
   var _useRef = useRef(uuidv4()),
     modalRenderInstanceId = _useRef.current;
   var datasourceId = props.datasourceId,
@@ -71,6 +89,11 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
     visibleColumnKeys = _useState8[0],
     setVisibleColumnKeys = _useState8[1];
 
+  // analytics related parameters
+  var searchCount = useRef(0);
+  var userInteractionActions = useRef(new Set());
+  var visibleColumnCount = 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 = useMemo(function () {
@@ -97,9 +120,10 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
     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 = useMemo(function () {
     if (cloudId) {
@@ -161,6 +185,11 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
     }();
     void fetchSiteDisplayNames();
   }, []);
+  useEffect(function () {
+    var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
+    visibleColumnCount.current = newVisibleColumnKeys.length;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
   var siteSelectorLabel = availableSites && availableSites.length > 1 ? confluenceSearchModalMessages.insertIssuesTitleManySites : confluenceSearchModalMessages.insertIssuesTitle;
   var _useState9 = useState(initialColumnCustomSizes),
     _useState10 = _slicedToArray(_useState9, 2),
@@ -183,6 +212,15 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
     setWrappedColumnKeys(Array.from(set));
   }, [wrappedColumnKeys]);
 
+  // TODO: common functionality of all modals refactor in EDM-9573
+  var handleVisibleColumnKeysChange = 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 = useMemo(function () {
@@ -197,7 +235,7 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onNextPage: onNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
-      onVisibleColumnKeysChange: setVisibleColumnKeys,
+      onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
       parentContainerRenderInstanceId: modalRenderInstanceId,
       extensionKey: extensionKey,
       columnCustomSizes: columnCustomSizes,
@@ -205,11 +243,19 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
       wrappedColumnKeys: wrappedColumnKeys,
       onWrappedColumnChange: 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 = useMemo(function () {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes,
+      searchCount: searchCount.current,
+      actions: Array.from(userInteractionActions.current)
+    };
+  }, [destinationObjectTypes, extensionKey]);
   var renderModalContent = useCallback(function () {
     if (status === 'rejected') {
       return jsx(ModalLoadingError, null);
@@ -235,10 +281,25 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
     return confluenceSearchTable;
   }, [columns.length, selectedConfluenceSiteUrl, confluenceSearchTable, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
   var shouldShowResultsCount = !!totalCount && totalCount !== 1;
-  var onInsertPressed = useCallback(function () {
+  var onInsertPressed = 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: DatasourceDisplay.DATASOURCE_TABLE,
+        searchCount: searchCount.current,
+        searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        actions: Array.from(userInteractionActions.current)
+      }),
+      eventType: 'ui'
+    });
+    var consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
+    insertButtonClickedEvent.fire(EVENT_CHANNEL);
     onInsert(buildDatasourceAdf({
       id: datasourceId,
       parameters: _objectSpread(_objectSpread({}, parameters), {}, {
@@ -260,15 +321,25 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
           })
         }
       }]
-    }));
-  }, [cloudId, isParametersSet, onInsert, datasourceId, parameters, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+    }), consumerEvent);
+  }, [isParametersSet, cloudId, analyticsPayload, totalCount, onInsert, datasourceId, parameters, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
   var onSearch = useCallback(function (newSearchString) {
+    searchCount.current++;
+    userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
     setSearchString(newSearchString);
     reset({
       shouldForceRequest: true
     });
   }, [reset]);
   var isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
+  var getCancelButtonAnalyticsPayload = useCallback(function () {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes,
+      searchCount: searchCount.current,
+      actions: Array.from(userInteractionActions.current)
+    };
+  }, [destinationObjectTypes, extensionKey]);
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -310,13 +381,24 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
     values: {
       totalCount: totalCount
     }
-  })))), jsx(Button, {
-    appearance: "default",
-    onClick: onCancel
-  }, jsx(FormattedMessage, confluenceSearchModalMessages.cancelButtonText)), !hasNoConfluenceSites && jsx(Button, {
+  })))), jsx(CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getCancelButtonAnalyticsPayload,
+    testId: "confluence-search-modal--cancel-button"
+  }), !hasNoConfluenceSites && jsx(Button, {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,
     testId: "confluence-search-datasource-modal--insert-button"
   }, jsx(FormattedMessage, confluenceSearchModalMessages.insertResultsButtonText)))));
-};
+};
+var analyticsContextAttributes = {
+  dataProvider: 'confluence-search'
+};
+var analyticsContextData = _objectSpread(_objectSpread({}, componentMetadata.configModal), {}, {
+  source: 'datasourceConfigModal'
+});
+var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
+  attributes: _objectSpread({}, analyticsContextAttributes)
+});
+export var ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(PlainConfluenceSearchConfigModal);