@atlaskit/link-datasource 1.2.0 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/link-datasource
 
+## 1.2.2
+
+### Patch Changes
+
+- [`ce3de76af77`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ce3de76af77) - Added ui.table.viewed event
+- Updated dependencies
+
+## 1.2.1
+
+### Patch Changes
+
+- [`103618b094f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/103618b094f) - Add UFO metrics to measure datasource rendering performance.
+- Updated dependencies
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/cjs/analytics/constants.js

@@ -8,6 +8,6 @@ var EVENT_CHANNEL = 'media';
 exports.EVENT_CHANNEL = EVENT_CHANNEL;
 var packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.2.0"
+  packageVersion: "1.2.2"
 };
 exports.packageMetaData = packageMetaData;

package/dist/cjs/analytics/ufoExperiences/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.succeedUfoExperience = exports.startUfoExperience = exports.failUfoExperience = exports.addMetadataToExperience = void 0;
+var _ufo = require("@atlaskit/ufo");
+var datasourcePageSegmentLoadExperienceConfig = {
+  platform: {
+    component: 'datasource'
+  },
+  type: _ufo.ExperienceTypes.Load,
+  performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad
+};
+var ufoExperiences = {
+  'datasource-rendered': new _ufo.ConcurrentExperience('datasource-rendered', datasourcePageSegmentLoadExperienceConfig)
+};
+var startUfoExperience = function startUfoExperience(_ref, id) {
+  var name = _ref.name,
+    metadata = _ref.metadata;
+  var experienceInstance = ufoExperiences[name].getInstance(id);
+  experienceInstance.start();
+  if (metadata) {
+    experienceInstance.addMetadata(metadata);
+  }
+};
+exports.startUfoExperience = startUfoExperience;
+var succeedUfoExperience = function succeedUfoExperience(_ref2, id) {
+  var name = _ref2.name,
+    metadata = _ref2.metadata;
+  var experienceInstance = ufoExperiences[name].getInstance(id);
+  experienceInstance.success({
+    metadata: metadata
+  });
+};
+exports.succeedUfoExperience = succeedUfoExperience;
+var failUfoExperience = function failUfoExperience(_ref3, id) {
+  var name = _ref3.name,
+    metadata = _ref3.metadata;
+  var experienceInstance = ufoExperiences[name].getInstance(id);
+  experienceInstance.failure({
+    metadata: metadata
+  });
+};
+exports.failUfoExperience = failUfoExperience;
+var addMetadataToExperience = function addMetadataToExperience(_ref4, id) {
+  var name = _ref4.name,
+    metadata = _ref4.metadata;
+  ufoExperiences[name].getInstance(id).addMetadata(metadata);
+};
+exports.addMetadataToExperience = addMetadataToExperience;

package/dist/cjs/analytics/ufoExperiences/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/analytics/ufoExperiences/useDataRenderedUfoExperience.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataRenderedUfoExperience = void 0;
+var _react = require("react");
+var _index = require("./index");
+/**
+ * Hook to mark DataRendered UFO experience as either Success or Failure
+ * 1. Success when
+ *    * its rendered as a link
+ *    * it returns empty results
+ *    * the request is unauthorized
+ * 2. Fail when
+ *    * request is rejected
+ *
+ * Note:
+ *    * When the request is resolved as a datasource table, it will be marked success in the table component, every other success case is marked by this hook
+ */
+var useDataRenderedUfoExperience = function useDataRenderedUfoExperience(_ref) {
+  var status = _ref.status,
+    experienceId = _ref.experienceId,
+    itemCount = _ref.itemCount,
+    canBeLink = _ref.canBeLink,
+    extensionKey = _ref.extensionKey;
+  (0, _react.useEffect)(function () {
+    var isEmptyResult = status === 'resolved' && itemCount === 0;
+    var isLink = status === 'resolved' && (itemCount === 1 || canBeLink); // this will take care of count-mode/single-item smart-link rendering
+    var isUnauthorized = status === 'unauthorized';
+    var shouldSucceedUfoExperience = isEmptyResult || isLink || isUnauthorized;
+    var shouldFailUfoExperience = status === 'rejected';
+    if (extensionKey) {
+      (0, _index.addMetadataToExperience)({
+        name: 'datasource-rendered',
+        metadata: {
+          extensionKey: extensionKey
+        }
+      }, experienceId);
+    }
+    if (shouldFailUfoExperience) {
+      (0, _index.failUfoExperience)({
+        name: 'datasource-rendered'
+      }, experienceId);
+    } else if (shouldSucceedUfoExperience) {
+      (0, _index.succeedUfoExperience)({
+        name: 'datasource-rendered'
+      }, experienceId);
+    }
+  }, [canBeLink, experienceId, extensionKey, itemCount, status]);
+};
+exports.useDataRenderedUfoExperience = useDataRenderedUfoExperience;

package/dist/cjs/hooks/useDatasourceTableState.js

@@ -67,7 +67,7 @@ var useDatasourceTableState = function useDatasourceTableState(_ref) {
     getDatasourceData = _useDatasourceClientE.getDatasourceData,
     getDatasourceDetails = _useDatasourceClientE.getDatasourceDetails;
   var loadDatasourceDetails = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-    var _yield$getDatasourceD, _yield$getDatasourceD2, access, _destinationObjectTypes, _extensionKey, schema, isColumnNotPresentInCurrentColumnsList, allColumns, newColumns;
+    var _yield$getDatasourceD, access, schema, isColumnNotPresentInCurrentColumnsList, allColumns, newColumns;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -84,20 +84,15 @@ var useDatasourceTableState = function useDatasourceTableState(_ref) {
           });
         case 5:
           _yield$getDatasourceD = _context.sent;
-          _yield$getDatasourceD2 = _yield$getDatasourceD.meta;
-          access = _yield$getDatasourceD2.access;
-          _destinationObjectTypes = _yield$getDatasourceD2.destinationObjectTypes;
-          _extensionKey = _yield$getDatasourceD2.extensionKey;
+          access = _yield$getDatasourceD.meta.access;
           schema = _yield$getDatasourceD.data.schema;
           if (!(access === 'forbidden' || access === 'unauthorized')) {
-            _context.next = 14;
+            _context.next = 11;
             break;
           }
           setStatus('unauthorized');
           return _context.abrupt("return");
-        case 14:
-          setExtensionKey(_extensionKey);
-          setDestinationObjectTypes(_destinationObjectTypes);
+        case 11:
           isColumnNotPresentInCurrentColumnsList = function isColumnNotPresentInCurrentColumnsList(col) {
             return !columns.find(function (column) {
               return column.key === col.key;
@@ -106,17 +101,17 @@ var useDatasourceTableState = function useDatasourceTableState(_ref) {
           allColumns = schema.properties;
           newColumns = allColumns.filter(isColumnNotPresentInCurrentColumnsList);
           newColumns.length > 0 && setColumns([].concat((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(newColumns)));
-          _context.next = 25;
+          _context.next = 20;
           break;
-        case 22:
-          _context.prev = 22;
+        case 17:
+          _context.prev = 17;
           _context.t0 = _context["catch"](2);
           setStatus('rejected');
-        case 25:
+        case 20:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[2, 22]]);
+    }, _callee, null, [[2, 17]]);
   })), [columns, datasourceId, getDatasourceDetails, parameters]);
   var applySchemaProperties = (0, _react.useCallback)(function (properties) {
     if (columns.length === 0) {
@@ -144,12 +139,12 @@ var useDatasourceTableState = function useDatasourceTableState(_ref) {
       shouldForceRequest,
       sortedFieldKeys,
       datasourceDataRequest,
+      _yield$getDatasourceD2,
       _yield$getDatasourceD3,
-      _yield$getDatasourceD4,
       access,
-      _destinationObjectTypes2,
-      _extensionKey2,
-      _yield$getDatasourceD5,
+      _destinationObjectTypes,
+      _extensionKey,
+      _yield$getDatasourceD4,
       items,
       nextPageCursor,
       _totalCount,
@@ -183,16 +178,16 @@ var useDatasourceTableState = function useDatasourceTableState(_ref) {
           _context2.next = 11;
           return getDatasourceData(datasourceId, datasourceDataRequest, shouldForceRequest);
         case 11:
-          _yield$getDatasourceD3 = _context2.sent;
-          _yield$getDatasourceD4 = _yield$getDatasourceD3.meta;
-          access = _yield$getDatasourceD4.access;
-          _destinationObjectTypes2 = _yield$getDatasourceD4.destinationObjectTypes;
-          _extensionKey2 = _yield$getDatasourceD4.extensionKey;
-          _yield$getDatasourceD5 = _yield$getDatasourceD3.data;
-          items = _yield$getDatasourceD5.items;
-          nextPageCursor = _yield$getDatasourceD5.nextPageCursor;
-          _totalCount = _yield$getDatasourceD5.totalCount;
-          schema = _yield$getDatasourceD5.schema;
+          _yield$getDatasourceD2 = _context2.sent;
+          _yield$getDatasourceD3 = _yield$getDatasourceD2.meta;
+          access = _yield$getDatasourceD3.access;
+          _destinationObjectTypes = _yield$getDatasourceD3.destinationObjectTypes;
+          _extensionKey = _yield$getDatasourceD3.extensionKey;
+          _yield$getDatasourceD4 = _yield$getDatasourceD2.data;
+          items = _yield$getDatasourceD4.items;
+          nextPageCursor = _yield$getDatasourceD4.nextPageCursor;
+          _totalCount = _yield$getDatasourceD4.totalCount;
+          schema = _yield$getDatasourceD4.schema;
           if (!(access === 'forbidden' || access === 'unauthorized')) {
             _context2.next = 24;
             break;
@@ -200,8 +195,8 @@ var useDatasourceTableState = function useDatasourceTableState(_ref) {
           setStatus('unauthorized');
           return _context2.abrupt("return");
         case 24:
-          setExtensionKey(_extensionKey2);
-          setDestinationObjectTypes(_destinationObjectTypes2);
+          setExtensionKey(_extensionKey);
+          setDestinationObjectTypes(_destinationObjectTypes);
           setTotalCount(_totalCount);
           setNextCursor(nextPageCursor);
           setResponseItems(function (currentResponseItems) {
@@ -210,7 +205,6 @@ var useDatasourceTableState = function useDatasourceTableState(_ref) {
             }
             return [].concat((0, _toConsumableArray2.default)(currentResponseItems), (0, _toConsumableArray2.default)(items));
           });
-          setStatus('resolved');
           setHasNextPage(Boolean(nextPageCursor));
           if (fieldKeys.length > 0) {
             setLastRequestedFieldKeys(fieldKeys);
@@ -223,11 +217,12 @@ var useDatasourceTableState = function useDatasourceTableState(_ref) {
             currentLoadedItemCount = (responseItems === null || responseItems === void 0 ? void 0 : responseItems.length) || 0;
             newlyLoadedItemCount = (items === null || items === void 0 ? void 0 : items.length) || 0;
             fireEvent('track.nextItem.loaded', {
-              extensionKey: _extensionKey2,
-              destinationObjectTypes: _destinationObjectTypes2,
+              extensionKey: _extensionKey,
+              destinationObjectTypes: _destinationObjectTypes,
               loadedItemCount: currentLoadedItemCount + newlyLoadedItemCount
             });
           }
+          setStatus('resolved');
           _context2.next = 40;
           break;
         case 37:

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

@@ -231,7 +231,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.2.0",
+  packageVersion: "1.2.2",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

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

@@ -7,9 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.DatasourceTableView = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _uuid = require("uuid");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../../analytics");
 var _constants = require("../../analytics/constants");
+var _ufoExperiences = require("../../analytics/ufoExperiences");
+var _useDataRenderedUfoExperience = require("../../analytics/ufoExperiences/useDataRenderedUfoExperience");
 var _useDatasourceTableState = require("../../hooks/useDatasourceTableState");
 var _accessRequired = require("../common/error-state/access-required");
 var _loadingError = require("../common/error-state/loading-error");
@@ -43,6 +46,8 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     destinationObjectTypes = _useDatasourceTableSt.destinationObjectTypes;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
+  var _useRef = (0, _react.useRef)((0, _uuid.v4)()),
+    tableRenderInstanceId = _useRef.current;
 
   /*  Need this to make sure that the datasource in the editor gets updated new info if any edits are made in the modal
       But we don't want to call it on initial load. This screws up useDatasourceTableState's internal
@@ -60,6 +65,20 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);
     }
   }, [visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange]);
+  (0, _react.useEffect)(function () {
+    var shouldStartUfoExperience = datasourceId && parameters && visibleColumnKeys && status === 'loading';
+    if (shouldStartUfoExperience) {
+      (0, _ufoExperiences.startUfoExperience)({
+        name: 'datasource-rendered'
+      }, tableRenderInstanceId);
+    }
+  }, [datasourceId, parameters, status, tableRenderInstanceId, visibleColumnKeys]);
+  (0, _useDataRenderedUfoExperience.useDataRenderedUfoExperience)({
+    status: status,
+    experienceId: tableRenderInstanceId,
+    itemCount: responseItems.length,
+    extensionKey: extensionKey
+  });
   var forcedReset = (0, _react.useCallback)(function () {
     fireEvent('ui.button.clicked.sync', {
       extensionKey: extensionKey,
@@ -97,7 +116,8 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       columns: columns,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
-      scrollableContainerHeight: 590
+      scrollableContainerHeight: 590,
+      parentContainerRenderInstanceId: tableRenderInstanceId
     }) : (0, _react2.jsx)(_emptyState.default, {
       testId: "datasource-table-view-skeleton",
       isCompact: true,

package/dist/cjs/ui/issue-like-table/index.js

@@ -24,6 +24,7 @@ var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/util/combine");
 var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _ufoExperiences = require("../../analytics/ufoExperiences");
 var _columnPicker = require("./column-picker");
 var _dragColumnPreview = require("./drag-column-preview");
 var _draggableTableHeading = require("./draggable-table-heading");
@@ -122,7 +123,8 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     onVisibleColumnKeysChange = _ref2.onVisibleColumnKeysChange,
     status = _ref2.status,
     hasNextPage = _ref2.hasNextPage,
-    scrollableContainerHeight = _ref2.scrollableContainerHeight;
+    scrollableContainerHeight = _ref2.scrollableContainerHeight,
+    parentContainerRenderInstanceId = _ref2.parentContainerRenderInstanceId;
   var tableId = (0, _react.useMemo)(function () {
     return Symbol('unique-id');
   }, []);
@@ -145,6 +147,13 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   (0, _react.useEffect)(function () {
     setOrderedColumns(orderColumns((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys)));
   }, [columns, visibleColumnKeys]);
+  (0, _react.useEffect)(function () {
+    if (parentContainerRenderInstanceId && status === 'resolved') {
+      (0, _ufoExperiences.succeedUfoExperience)({
+        name: 'datasource-rendered'
+      }, parentContainerRenderInstanceId);
+    }
+  }, [parentContainerRenderInstanceId, status]);
   var visibleSortedColumns = (0, _react.useMemo)(function () {
     return visibleColumnKeys.map(function (visibleKey) {
       return orderedColumns.find(function (_ref3) {

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

@@ -14,6 +14,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 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 _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
@@ -21,6 +22,8 @@ var _colors = require("@atlaskit/theme/colors");
 var _analytics = require("../../../analytics");
 var _constants = require("../../../analytics/constants");
 var _types = require("../../../analytics/types");
+var _ufoExperiences = require("../../../analytics/ufoExperiences");
+var _useDataRenderedUfoExperience = require("../../../analytics/ufoExperiences/useDataRenderedUfoExperience");
 var _utils = require("../../../analytics/utils");
 var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
 var _getAvailableJiraSites = require("../../../services/getAvailableJiraSites");
@@ -117,6 +120,7 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
   var searchCount = (0, _react.useRef)(0);
   var userInteractionActions = (0, _react.useRef)(new Set());
   var lastSearchMethodRef = (0, _react.useRef)(null);
+  var visibleColumnCount = (0, _react.useRef)((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
   var parameters = (0, _react.useMemo)(function () {
     return !!cloudId ? {
       cloudId: cloudId,
@@ -145,6 +149,8 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     formatMessage = _useIntl.formatMessage;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
+  var _useRef = (0, _react.useRef)((0, _uuid.v4)()),
+    modalRenderInstanceId = _useRef.current;
   var selectedJiraSite = (0, _react.useMemo)(function () {
     if (cloudId) {
       // if the cloud id we're editing isn't in available sites then user is likely unauthorized for that site
@@ -159,7 +165,7 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
       }) || availableSites[0];
     }
   }, [availableSites, cloudId]);
-  var buttonClickedAnalyticsPayload = (0, _react.useMemo)(function () {
+  var analyticsPayload = (0, _react.useMemo)(function () {
     return {
       extensionKey: extensionKey,
       destinationObjectTypes: destinationObjectTypes
@@ -169,11 +175,28 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
   var jqlUrl = selectedJiraSite && jql && "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURI(jql));
   var isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading' || resolvedWithNoResults;
   var shouldShowIssueCount = !!totalCount && totalCount !== 1 && currentViewMode === 'issue';
+  var isDataReady = (visibleColumnKeys || []).length > 0;
+  (0, _react.useEffect)(function () {
+    var shouldStartUfoExperience = status === 'loading';
+    if (shouldStartUfoExperience) {
+      (0, _ufoExperiences.startUfoExperience)({
+        name: 'datasource-rendered'
+      }, modalRenderInstanceId);
+    }
+  }, [modalRenderInstanceId, status]);
+  (0, _useDataRenderedUfoExperience.useDataRenderedUfoExperience)({
+    status: status,
+    experienceId: modalRenderInstanceId,
+    itemCount: responseItems.length,
+    canBeLink: currentViewMode === 'count',
+    extensionKey: extensionKey
+  });
   (0, _react.useEffect)(function () {
     fireEvent('screen.datasourceModalDialog.viewed', {});
   }, [fireEvent]);
   (0, _react.useEffect)(function () {
     var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
+    visibleColumnCount.current = newVisibleColumnKeys.length;
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
   (0, _react.useEffect)(function () {
@@ -209,32 +232,48 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     }
   }, [cloudId, selectedJiraSite]);
   var fireSingleItemViewedEvent = (0, _react.useCallback)(function () {
-    fireEvent('ui.link.viewed.singleItem', {
-      destinationObjectTypes: destinationObjectTypes,
-      searchMethod: (0, _utils.mapSearchMethod)(lastSearchMethodRef.current),
-      extensionKey: extensionKey
-    });
-  }, [extensionKey, fireEvent, destinationObjectTypes]);
+    fireEvent('ui.link.viewed.singleItem', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+      searchMethod: (0, _utils.mapSearchMethod)(lastSearchMethodRef.current)
+    }));
+  }, [analyticsPayload, fireEvent]);
   var fireCountViewedEvent = (0, _react.useCallback)(function () {
-    fireEvent('ui.link.viewed.count', {
-      destinationObjectTypes: destinationObjectTypes,
+    fireEvent('ui.link.viewed.count', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
       searchMethod: (0, _utils.mapSearchMethod)(lastSearchMethodRef.current),
-      extensionKey: extensionKey,
       totalItemCount: totalCount || 0
-    });
-  }, [extensionKey, fireEvent, totalCount, destinationObjectTypes]);
+    }));
+  }, [analyticsPayload, fireEvent, totalCount]);
+  var fireTableViewedEvent = (0, _react.useCallback)(function () {
+    if (isDataReady) {
+      fireEvent('ui.table.viewed.datasourceConfigModal', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+        totalItemCount: totalCount || 0,
+        searchMethod: (0, _utils.mapSearchMethod)(lastSearchMethodRef.current),
+        displayedColumnCount: visibleColumnCount.current
+      }));
+    }
+  }, [analyticsPayload, fireEvent, totalCount, isDataReady]);
+  var fireIssueViewAnalytics = (0, _react.useCallback)(function () {
+    if (!totalCount) {
+      return;
+    }
+    if (totalCount > 1) {
+      fireTableViewedEvent();
+    } else if (totalCount === 1) {
+      fireSingleItemViewedEvent();
+    }
+  }, [fireSingleItemViewedEvent, fireTableViewedEvent, totalCount]);
   (0, _react.useEffect)(function () {
     var isResolved = status === 'resolved';
-    var isSingleItemViewed = currentViewMode === 'issue' && totalCount === 1;
-    var isCountViewed = currentViewMode === 'count';
-    if (isResolved) {
-      if (isSingleItemViewed) {
-        fireSingleItemViewedEvent();
-      } else if (isCountViewed && totalCount) {
-        fireCountViewedEvent();
-      }
+    var isIssueViewMode = currentViewMode === 'issue';
+    var isCountViewMode = currentViewMode === 'count';
+    if (!isResolved) {
+      return;
     }
-  }, [currentViewMode, totalCount, status, fireSingleItemViewedEvent, fireCountViewedEvent]);
+    if (isIssueViewMode) {
+      fireIssueViewAnalytics();
+    } else if (isCountViewMode) {
+      fireCountViewedEvent();
+    }
+  }, [currentViewMode, status, fireIssueViewAnalytics, fireCountViewedEvent]);
   var onSearch = (0, _react.useCallback)(function (newParameters, searchMethod) {
     searchCount.current++;
     lastSearchMethodRef.current = searchMethod;
@@ -250,13 +289,13 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     analyticEvent.update({
       eventType: 'ui',
       actionSubjectId: 'cancel',
-      attributes: _objectSpread(_objectSpread({}, buttonClickedAnalyticsPayload), {}, {
-        actions: Array.from(userInteractionActions.current),
-        searchCount: searchCount.current
+      attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+        searchCount: searchCount.current,
+        actions: Array.from(userInteractionActions.current)
       })
     }).fire(_analytics.EVENT_CHANNEL);
     onCancel();
-  }, [buttonClickedAnalyticsPayload, onCancel]);
+  }, [analyticsPayload, onCancel]);
   var onSiteSelection = (0, _react.useCallback)(function (site) {
     userInteractionActions.current.add(_types.DatasourceAction.INSTANCE_UPDATED);
     setCloudId(site.cloudId);
@@ -278,13 +317,13 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     }
     var insertButtonClickedEvent = analyticsEvent.update({
       actionSubjectId: 'insert',
-      attributes: _objectSpread(_objectSpread({}, buttonClickedAnalyticsPayload), {}, {
-        actions: Array.from(userInteractionActions.current),
+      attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
         totalItemCount: totalCount || 0,
-        displayedColumnCount: (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0,
+        displayedColumnCount: visibleColumnCount.current,
         display: getDisplayValue(currentViewMode, totalCount || 0),
         searchCount: searchCount.current,
-        searchMethod: (0, _utils.mapSearchMethod)(lastSearchMethodRef.current)
+        searchMethod: (0, _utils.mapSearchMethod)(lastSearchMethodRef.current),
+        actions: Array.from(userInteractionActions.current)
       }),
       eventType: 'ui'
     });
@@ -331,7 +370,7 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
         }
       }, consumerEvent);
     }
-  }, [isParametersSet, jql, selectedJiraSite, buttonClickedAnalyticsPayload, totalCount, visibleColumnKeys, currentViewMode, retrieveUrlForSmartCardRender, responseItems.length, onInsert, jqlUrl, datasourceId, cloudId]);
+  }, [isParametersSet, jql, selectedJiraSite, analyticsPayload, 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);
@@ -344,6 +383,7 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     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]);
   var issueLikeDataTableView = (0, _react.useMemo)(function () {
@@ -358,9 +398,10 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onNextPage: handleOnNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
-      onVisibleColumnKeysChange: handleVisibleColumnKeysChange
+      onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
+      parentContainerRenderInstanceId: modalRenderInstanceId
     }));
-  }, [columns, defaultVisibleColumnKeys, hasNextPage, handleVisibleColumnKeysChange, loadDatasourceDetails, handleOnNextPage, responseItems, status, visibleColumnKeys]);
+  }, [columns, defaultVisibleColumnKeys, handleOnNextPage, handleVisibleColumnKeysChange, hasNextPage, loadDatasourceDetails, modalRenderInstanceId, responseItems, status, visibleColumnKeys]);
   var renderCountModeContent = (0, _react.useCallback)(function () {
     var url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {

package/dist/es2019/analytics/constants.js

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

package/dist/es2019/analytics/ufoExperiences/index.js

@@ -0,0 +1,45 @@
+import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+const datasourcePageSegmentLoadExperienceConfig = {
+  platform: {
+    component: 'datasource'
+  },
+  type: ExperienceTypes.Load,
+  performanceType: ExperiencePerformanceTypes.PageSegmentLoad
+};
+const ufoExperiences = {
+  'datasource-rendered': new ConcurrentExperience('datasource-rendered', datasourcePageSegmentLoadExperienceConfig)
+};
+export const startUfoExperience = ({
+  name,
+  metadata
+}, id) => {
+  const experienceInstance = ufoExperiences[name].getInstance(id);
+  experienceInstance.start();
+  if (metadata) {
+    experienceInstance.addMetadata(metadata);
+  }
+};
+export const succeedUfoExperience = ({
+  name,
+  metadata
+}, id) => {
+  const experienceInstance = ufoExperiences[name].getInstance(id);
+  experienceInstance.success({
+    metadata
+  });
+};
+export const failUfoExperience = ({
+  name,
+  metadata
+}, id) => {
+  const experienceInstance = ufoExperiences[name].getInstance(id);
+  experienceInstance.failure({
+    metadata
+  });
+};
+export const addMetadataToExperience = ({
+  name,
+  metadata
+}, id) => {
+  ufoExperiences[name].getInstance(id).addMetadata(metadata);
+};

package/dist/es2019/analytics/ufoExperiences/types.js

@@ -0,0 +1 @@
+export {};