@atlaskit/link-datasource 1.2.2 → 1.2.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-datasource
 
+## 1.2.4
+
+### Patch Changes
+
+- [`172f52c6df8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/172f52c6df8) - Add UFO metrics to measure column picker performance
+
+## 1.2.3
+
+### Patch Changes
+
+- [`de4dddb97d4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/de4dddb97d4) - Added 'ui.datasource.renderSuccess' event with display = 'table'
+
 ## 1.2.2
 
 ### Patch 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.2"
+  packageVersion: "1.2.4"
 };
 exports.packageMetaData = packageMetaData;

package/dist/cjs/analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColumnPickerRenderedFailedUfoExperience = void 0;
+var _react = require("react");
+var _index = require("../index");
+var useColumnPickerRenderedFailedUfoExperience = function useColumnPickerRenderedFailedUfoExperience(status, experienceId) {
+  (0, _react.useEffect)(function () {
+    if (status === 'rejected' && experienceId) {
+      (0, _index.failUfoExperience)({
+        name: 'column-picker-rendered'
+      }, experienceId);
+    }
+  }, [experienceId, status]);
+};
+exports.useColumnPickerRenderedFailedUfoExperience = useColumnPickerRenderedFailedUfoExperience;

package/dist/cjs/analytics/ufoExperiences/{useDataRenderedUfoExperience.js → hooks/useDataRenderedUfoExperience.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDataRenderedUfoExperience = void 0;
 var _react = require("react");
-var _index = require("./index");
+var _index = require("../index");
 /**
  * Hook to mark DataRendered UFO experience as either Success or Failure
  * 1. Success when

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

@@ -12,8 +12,16 @@ var datasourcePageSegmentLoadExperienceConfig = {
   type: _ufo.ExperienceTypes.Load,
   performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad
 };
+var columnPickerCustomExperienceConfig = {
+  platform: {
+    component: 'datasource'
+  },
+  type: _ufo.ExperienceTypes.Operation,
+  performanceType: _ufo.ExperiencePerformanceTypes.Custom
+};
 var ufoExperiences = {
-  'datasource-rendered': new _ufo.ConcurrentExperience('datasource-rendered', datasourcePageSegmentLoadExperienceConfig)
+  'datasource-rendered': new _ufo.ConcurrentExperience('datasource-rendered', datasourcePageSegmentLoadExperienceConfig),
+  'column-picker-rendered': new _ufo.ConcurrentExperience('column-picker-rendered', columnPickerCustomExperienceConfig)
 };
 var startUfoExperience = function startUfoExperience(_ref, id) {
   var name = _ref.name,

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

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

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

@@ -12,7 +12,8 @@ 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 _useColumnPickerRenderedFailedUfoExperience = require("../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience");
+var _useDataRenderedUfoExperience = require("../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience");
 var _useDatasourceTableState = require("../../hooks/useDatasourceTableState");
 var _accessRequired = require("../common/error-state/access-required");
 var _loadingError = require("../common/error-state/loading-error");
@@ -48,12 +49,15 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     fireEvent = _useDatasourceAnalyti.fireEvent;
   var _useRef = (0, _react.useRef)((0, _uuid.v4)()),
     tableRenderInstanceId = _useRef.current;
+  var visibleColumnCount = (0, _react.useRef)((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
 
   /*  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
       mechanism of initial loading. Use of ref here makes it basically work as a `componentDidUpdate` but not `componentDidMount`
    */
   var isInitialRender = (0, _react.useRef)(true);
+  var isDataReady = columns.length > 0 && responseItems.length > 0 && totalCount && totalCount > 0;
+  visibleColumnCount.current = (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0;
   (0, _react.useEffect)(function () {
     if (!isInitialRender.current) {
       reset();
@@ -65,6 +69,18 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);
     }
   }, [visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange]);
+  (0, _react.useEffect)(function () {
+    var isTableViewRenderedWithData = status === 'resolved' && isDataReady;
+    if (isTableViewRenderedWithData) {
+      fireEvent('ui.datasource.renderSuccess', {
+        extensionKey: extensionKey,
+        destinationObjectTypes: destinationObjectTypes,
+        totalItemCount: totalCount,
+        displayedColumnCount: visibleColumnCount.current,
+        display: 'table'
+      });
+    }
+  }, [totalCount, fireEvent, status, extensionKey, destinationObjectTypes, isDataReady]);
   (0, _react.useEffect)(function () {
     var shouldStartUfoExperience = datasourceId && parameters && visibleColumnKeys && status === 'loading';
     if (shouldStartUfoExperience) {
@@ -73,6 +89,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       }, tableRenderInstanceId);
     }
   }, [datasourceId, parameters, status, tableRenderInstanceId, visibleColumnKeys]);
+  (0, _useColumnPickerRenderedFailedUfoExperience.useColumnPickerRenderedFailedUfoExperience)(status, tableRenderInstanceId);
   (0, _useDataRenderedUfoExperience.useDataRenderedUfoExperience)({
     status: status,
     experienceId: tableRenderInstanceId,
@@ -101,7 +118,6 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       onRefresh: reset
     });
   }
-  var isDataReady = columns.length > 0;
   return (
     // datasource-table classname is to exclude all children from being commentable - exclude list is in CFE
     (0, _react2.jsx)("div", {
@@ -117,7 +133,8 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
       scrollableContainerHeight: 590,
-      parentContainerRenderInstanceId: tableRenderInstanceId
+      parentContainerRenderInstanceId: tableRenderInstanceId,
+      extensionKey: extensionKey
     }) : (0, _react2.jsx)(_emptyState.default, {
       testId: "datasource-table-view-skeleton",
       isCompact: true,

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

@@ -16,6 +16,7 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 var _board = _interopRequireDefault(require("@atlaskit/icon/glyph/board"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _select = require("@atlaskit/select");
+var _ufoExperiences = require("../../../analytics/ufoExperiences");
 var _concatenatedMenuList = require("./concatenated-menu-list");
 var _messages = require("./messages");
 var _excluded = ["isOpen"];
@@ -24,7 +25,8 @@ var ColumnPicker = function ColumnPicker(_ref) {
   var columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
     onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange,
-    onOpen = _ref.onOpen;
+    onOpen = _ref.onOpen,
+    parentContainerRenderInstanceId = _ref.parentContainerRenderInstanceId;
   var intl = (0, _reactIntlNext.useIntl)();
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -102,6 +104,15 @@ var ColumnPicker = function ColumnPicker(_ref) {
       pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : (_pickerRef$current$se = _pickerRef$current.selectRef) === null || _pickerRef$current$se === void 0 ? void 0 : (_pickerRef$current$se2 = _pickerRef$current$se.inputRef) === null || _pickerRef$current$se2 === void 0 ? void 0 : _pickerRef$current$se2.focus();
     }
   }, [allOptions]);
+  (0, _react.useEffect)(function () {
+    if (allOptions.length) {
+      if (parentContainerRenderInstanceId) {
+        (0, _ufoExperiences.succeedUfoExperience)({
+          name: 'column-picker-rendered'
+        }, parentContainerRenderInstanceId);
+      }
+    }
+  }, [allOptions, parentContainerRenderInstanceId]);
   return (0, _react2.jsx)(_select.PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',

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

@@ -124,7 +124,8 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     status = _ref2.status,
     hasNextPage = _ref2.hasNextPage,
     scrollableContainerHeight = _ref2.scrollableContainerHeight,
-    parentContainerRenderInstanceId = _ref2.parentContainerRenderInstanceId;
+    parentContainerRenderInstanceId = _ref2.parentContainerRenderInstanceId,
+    extensionKey = _ref2.extensionKey;
   var tableId = (0, _react.useMemo)(function () {
     return Symbol('unique-id');
   }, []);
@@ -317,23 +318,31 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
           }
           return _context.abrupt("return");
         case 2:
-          _context.prev = 2;
-          _context.next = 5;
+          if (parentContainerRenderInstanceId) {
+            (0, _ufoExperiences.startUfoExperience)({
+              name: 'column-picker-rendered',
+              metadata: {
+                extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : undefined
+              }
+            }, parentContainerRenderInstanceId);
+          }
+          _context.prev = 3;
+          _context.next = 6;
           return onLoadDatasourceDetails();
-        case 5:
+        case 6:
           setHasFullSchema(true);
-          _context.next = 11;
+          _context.next = 12;
           break;
-        case 8:
-          _context.prev = 8;
-          _context.t0 = _context["catch"](2);
+        case 9:
+          _context.prev = 9;
+          _context.t0 = _context["catch"](3);
           setHasFullSchema(false);
-        case 11:
+        case 12:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[2, 8]]);
-  })), [hasFullSchema, onLoadDatasourceDetails]);
+    }, _callee, null, [[3, 9]]);
+  })), [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
   return (0, _react2.jsx)("div", {
     ref: containerRef,
     css: scrollableContainerHeight ? scrollableContainerStyles : null,
@@ -396,7 +405,8 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     columns: hasFullSchema ? orderedColumns : [],
     selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
     onSelectedColumnKeysChange: onSelectedColumnKeysChange,
-    onOpen: handlePickerOpen
+    onOpen: handlePickerOpen,
+    parentContainerRenderInstanceId: parentContainerRenderInstanceId
   })))), (0, _react2.jsx)("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && "".concat(testId, "--body")

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

@@ -23,7 +23,8 @@ 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 _useColumnPickerRenderedFailedUfoExperience = require("../../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience");
+var _useDataRenderedUfoExperience = require("../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience");
 var _utils = require("../../../analytics/utils");
 var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
 var _getAvailableJiraSites = require("../../../services/getAvailableJiraSites");
@@ -274,6 +275,7 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
       fireCountViewedEvent();
     }
   }, [currentViewMode, status, fireIssueViewAnalytics, fireCountViewedEvent]);
+  (0, _useColumnPickerRenderedFailedUfoExperience.useColumnPickerRenderedFailedUfoExperience)(status, modalRenderInstanceId);
   var onSearch = (0, _react.useCallback)(function (newParameters, searchMethod) {
     searchCount.current++;
     lastSearchMethodRef.current = searchMethod;
@@ -399,9 +401,10 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
       onNextPage: handleOnNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
       onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
-      parentContainerRenderInstanceId: modalRenderInstanceId
+      parentContainerRenderInstanceId: modalRenderInstanceId,
+      extensionKey: extensionKey
     }));
-  }, [columns, defaultVisibleColumnKeys, handleOnNextPage, handleVisibleColumnKeysChange, hasNextPage, loadDatasourceDetails, modalRenderInstanceId, responseItems, status, visibleColumnKeys]);
+  }, [columns, defaultVisibleColumnKeys, handleOnNextPage, handleVisibleColumnKeysChange, hasNextPage, loadDatasourceDetails, modalRenderInstanceId, responseItems, status, visibleColumnKeys, extensionKey]);
   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.2"
+  packageVersion: "1.2.4"
 };

package/dist/es2019/analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience.js

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { failUfoExperience } from '../index';
+export const useColumnPickerRenderedFailedUfoExperience = (status, experienceId) => {
+  useEffect(() => {
+    if (status === 'rejected' && experienceId) {
+      failUfoExperience({
+        name: 'column-picker-rendered'
+      }, experienceId);
+    }
+  }, [experienceId, status]);
+};

package/dist/es2019/analytics/ufoExperiences/{useDataRenderedUfoExperience.js → hooks/useDataRenderedUfoExperience.js}

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { addMetadataToExperience, failUfoExperience, succeedUfoExperience } from './index';
+import { addMetadataToExperience, failUfoExperience, succeedUfoExperience } from '../index';
 /**
  * Hook to mark DataRendered UFO experience as either Success or Failure
  * 1. Success when

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

@@ -6,8 +6,16 @@ const datasourcePageSegmentLoadExperienceConfig = {
   type: ExperienceTypes.Load,
   performanceType: ExperiencePerformanceTypes.PageSegmentLoad
 };
+const columnPickerCustomExperienceConfig = {
+  platform: {
+    component: 'datasource'
+  },
+  type: ExperienceTypes.Operation,
+  performanceType: ExperiencePerformanceTypes.Custom
+};
 const ufoExperiences = {
-  'datasource-rendered': new ConcurrentExperience('datasource-rendered', datasourcePageSegmentLoadExperienceConfig)
+  'datasource-rendered': new ConcurrentExperience('datasource-rendered', datasourcePageSegmentLoadExperienceConfig),
+  'column-picker-rendered': new ConcurrentExperience('column-picker-rendered', columnPickerCustomExperienceConfig)
 };
 export const startUfoExperience = ({
   name,

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

@@ -205,7 +205,7 @@ const analyticsContextAttributes = {
 };
 const analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.2.2",
+  packageVersion: "1.2.4",
   source: 'datasourceConfigModal'
 };
 const contextData = {

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

@@ -6,7 +6,8 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { useDatasourceAnalyticsEvents } from '../../analytics';
 import { packageMetaData } from '../../analytics/constants';
 import { startUfoExperience } from '../../analytics/ufoExperiences';
-import { useDataRenderedUfoExperience } from '../../analytics/ufoExperiences/useDataRenderedUfoExperience';
+import { useColumnPickerRenderedFailedUfoExperience } from '../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
+import { useDataRenderedUfoExperience } from '../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
@@ -43,12 +44,15 @@ const DatasourceTableViewWithoutAnalytics = ({
   const {
     current: tableRenderInstanceId
   } = useRef(uuidv4());
+  const visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
 
   /*  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
       mechanism of initial loading. Use of ref here makes it basically work as a `componentDidUpdate` but not `componentDidMount`
    */
   const isInitialRender = useRef(true);
+  const isDataReady = columns.length > 0 && responseItems.length > 0 && totalCount && totalCount > 0;
+  visibleColumnCount.current = (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0;
   useEffect(() => {
     if (!isInitialRender.current) {
       reset();
@@ -60,6 +64,18 @@ const DatasourceTableViewWithoutAnalytics = ({
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);
     }
   }, [visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange]);
+  useEffect(() => {
+    const isTableViewRenderedWithData = status === 'resolved' && isDataReady;
+    if (isTableViewRenderedWithData) {
+      fireEvent('ui.datasource.renderSuccess', {
+        extensionKey,
+        destinationObjectTypes,
+        totalItemCount: totalCount,
+        displayedColumnCount: visibleColumnCount.current,
+        display: 'table'
+      });
+    }
+  }, [totalCount, fireEvent, status, extensionKey, destinationObjectTypes, isDataReady]);
   useEffect(() => {
     const shouldStartUfoExperience = datasourceId && parameters && visibleColumnKeys && status === 'loading';
     if (shouldStartUfoExperience) {
@@ -68,6 +84,7 @@ const DatasourceTableViewWithoutAnalytics = ({
       }, tableRenderInstanceId);
     }
   }, [datasourceId, parameters, status, tableRenderInstanceId, visibleColumnKeys]);
+  useColumnPickerRenderedFailedUfoExperience(status, tableRenderInstanceId);
   useDataRenderedUfoExperience({
     status,
     experienceId: tableRenderInstanceId,
@@ -96,7 +113,6 @@ const DatasourceTableViewWithoutAnalytics = ({
       onRefresh: reset
     });
   }
-  const isDataReady = columns.length > 0;
   return (
     // datasource-table classname is to exclude all children from being commentable - exclude list is in CFE
     jsx("div", {
@@ -112,7 +128,8 @@ const DatasourceTableViewWithoutAnalytics = ({
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
       scrollableContainerHeight: 590,
-      parentContainerRenderInstanceId: tableRenderInstanceId
+      parentContainerRenderInstanceId: tableRenderInstanceId,
+      extensionKey: extensionKey
     }) : jsx(EmptyState, {
       testId: "datasource-table-view-skeleton",
       isCompact: true,

package/dist/es2019/ui/issue-like-table/column-picker/index.js

@@ -7,13 +7,15 @@ import Button from '@atlaskit/button/standard-button';
 import BoardIcon from '@atlaskit/icon/glyph/board';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { CheckboxOption, createFilter, PopupSelect } from '@atlaskit/select';
+import { succeedUfoExperience } from '../../../analytics/ufoExperiences';
 import { ConcatenatedMenuList } from './concatenated-menu-list';
 import { columnPickerMessages } from './messages';
 export const ColumnPicker = ({
   columns,
   selectedColumnKeys,
   onSelectedColumnKeysChange,
-  onOpen
+  onOpen,
+  parentContainerRenderInstanceId
 }) => {
   const intl = useIntl();
   const [allOptions, setAllOptions] = useState([]);
@@ -77,6 +79,15 @@ export const ColumnPicker = ({
       pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : (_pickerRef$current$se = _pickerRef$current.selectRef) === null || _pickerRef$current$se === void 0 ? void 0 : (_pickerRef$current$se2 = _pickerRef$current$se.inputRef) === null || _pickerRef$current$se2 === void 0 ? void 0 : _pickerRef$current$se2.focus();
     }
   }, [allOptions]);
+  useEffect(() => {
+    if (allOptions.length) {
+      if (parentContainerRenderInstanceId) {
+        succeedUfoExperience({
+          name: 'column-picker-rendered'
+        }, parentContainerRenderInstanceId);
+      }
+    }
+  }, [allOptions, parentContainerRenderInstanceId]);
   return jsx(PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',

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

@@ -12,7 +12,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 import { N40 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
-import { succeedUfoExperience } from '../../analytics/ufoExperiences';
+import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
 import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
@@ -125,7 +125,8 @@ export const IssueLikeDataTableView = ({
   status,
   hasNextPage,
   scrollableContainerHeight,
-  parentContainerRenderInstanceId
+  parentContainerRenderInstanceId,
+  extensionKey
 }) => {
   const tableId = useMemo(() => Symbol('unique-id'), []);
   const [lastRowElement, setLastRowElement] = useState(null);
@@ -287,13 +288,21 @@ export const IssueLikeDataTableView = ({
     if (hasFullSchema) {
       return;
     }
+    if (parentContainerRenderInstanceId) {
+      startUfoExperience({
+        name: 'column-picker-rendered',
+        metadata: {
+          extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : undefined
+        }
+      }, parentContainerRenderInstanceId);
+    }
     try {
       await onLoadDatasourceDetails();
       setHasFullSchema(true);
     } catch (e) {
       setHasFullSchema(false);
     }
-  }, [hasFullSchema, onLoadDatasourceDetails]);
+  }, [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
   return jsx("div", {
     ref: containerRef,
     css: scrollableContainerHeight ? scrollableContainerStyles : null,
@@ -357,7 +366,8 @@ export const IssueLikeDataTableView = ({
     columns: hasFullSchema ? orderedColumns : [],
     selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
     onSelectedColumnKeysChange: onSelectedColumnKeysChange,
-    onOpen: handlePickerOpen
+    onOpen: handlePickerOpen,
+    parentContainerRenderInstanceId: parentContainerRenderInstanceId
   })))), jsx("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && `${testId}--body`

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

@@ -12,7 +12,8 @@ import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics'
 import { packageMetaData } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
 import { startUfoExperience } from '../../../analytics/ufoExperiences';
-import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/useDataRenderedUfoExperience';
+import { useColumnPickerRenderedFailedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
+import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { mapSearchMethod } from '../../../analytics/utils';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
@@ -228,6 +229,7 @@ export const PlainJiraIssuesConfigModal = props => {
       fireCountViewedEvent();
     }
   }, [currentViewMode, status, fireIssueViewAnalytics, fireCountViewedEvent]);
+  useColumnPickerRenderedFailedUfoExperience(status, modalRenderInstanceId);
   const onSearch = useCallback((newParameters, searchMethod) => {
     searchCount.current++;
     lastSearchMethodRef.current = searchMethod;
@@ -350,8 +352,9 @@ export const PlainJiraIssuesConfigModal = props => {
     onNextPage: handleOnNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
     onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
-    parentContainerRenderInstanceId: modalRenderInstanceId
-  })), [columns, defaultVisibleColumnKeys, handleOnNextPage, handleVisibleColumnKeysChange, hasNextPage, loadDatasourceDetails, modalRenderInstanceId, responseItems, status, visibleColumnKeys]);
+    parentContainerRenderInstanceId: modalRenderInstanceId,
+    extensionKey: extensionKey
+  })), [columns, defaultVisibleColumnKeys, handleOnNextPage, handleVisibleColumnKeysChange, hasNextPage, loadDatasourceDetails, modalRenderInstanceId, responseItems, status, visibleColumnKeys, extensionKey]);
   const renderCountModeContent = useCallback(() => {
     const url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {

package/dist/esm/analytics/constants.js

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

package/dist/esm/analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience.js

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { failUfoExperience } from '../index';
+export var useColumnPickerRenderedFailedUfoExperience = function useColumnPickerRenderedFailedUfoExperience(status, experienceId) {
+  useEffect(function () {
+    if (status === 'rejected' && experienceId) {
+      failUfoExperience({
+        name: 'column-picker-rendered'
+      }, experienceId);
+    }
+  }, [experienceId, status]);
+};

package/dist/esm/analytics/ufoExperiences/{useDataRenderedUfoExperience.js → hooks/useDataRenderedUfoExperience.js}

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { addMetadataToExperience, failUfoExperience, succeedUfoExperience } from './index';
+import { addMetadataToExperience, failUfoExperience, succeedUfoExperience } from '../index';
 /**
  * Hook to mark DataRendered UFO experience as either Success or Failure
  * 1. Success when

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

@@ -6,8 +6,16 @@ var datasourcePageSegmentLoadExperienceConfig = {
   type: ExperienceTypes.Load,
   performanceType: ExperiencePerformanceTypes.PageSegmentLoad
 };
+var columnPickerCustomExperienceConfig = {
+  platform: {
+    component: 'datasource'
+  },
+  type: ExperienceTypes.Operation,
+  performanceType: ExperiencePerformanceTypes.Custom
+};
 var ufoExperiences = {
-  'datasource-rendered': new ConcurrentExperience('datasource-rendered', datasourcePageSegmentLoadExperienceConfig)
+  'datasource-rendered': new ConcurrentExperience('datasource-rendered', datasourcePageSegmentLoadExperienceConfig),
+  'column-picker-rendered': new ConcurrentExperience('column-picker-rendered', columnPickerCustomExperienceConfig)
 };
 export var startUfoExperience = function startUfoExperience(_ref, id) {
   var name = _ref.name,

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

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

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

@@ -6,7 +6,8 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { useDatasourceAnalyticsEvents } from '../../analytics';
 import { packageMetaData } from '../../analytics/constants';
 import { startUfoExperience } from '../../analytics/ufoExperiences';
-import { useDataRenderedUfoExperience } from '../../analytics/ufoExperiences/useDataRenderedUfoExperience';
+import { useColumnPickerRenderedFailedUfoExperience } from '../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
+import { useDataRenderedUfoExperience } from '../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
@@ -40,12 +41,15 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     fireEvent = _useDatasourceAnalyti.fireEvent;
   var _useRef = useRef(uuidv4()),
     tableRenderInstanceId = _useRef.current;
+  var visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
 
   /*  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
       mechanism of initial loading. Use of ref here makes it basically work as a `componentDidUpdate` but not `componentDidMount`
    */
   var isInitialRender = useRef(true);
+  var isDataReady = columns.length > 0 && responseItems.length > 0 && totalCount && totalCount > 0;
+  visibleColumnCount.current = (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0;
   useEffect(function () {
     if (!isInitialRender.current) {
       reset();
@@ -57,6 +61,18 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);
     }
   }, [visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange]);
+  useEffect(function () {
+    var isTableViewRenderedWithData = status === 'resolved' && isDataReady;
+    if (isTableViewRenderedWithData) {
+      fireEvent('ui.datasource.renderSuccess', {
+        extensionKey: extensionKey,
+        destinationObjectTypes: destinationObjectTypes,
+        totalItemCount: totalCount,
+        displayedColumnCount: visibleColumnCount.current,
+        display: 'table'
+      });
+    }
+  }, [totalCount, fireEvent, status, extensionKey, destinationObjectTypes, isDataReady]);
   useEffect(function () {
     var shouldStartUfoExperience = datasourceId && parameters && visibleColumnKeys && status === 'loading';
     if (shouldStartUfoExperience) {
@@ -65,6 +81,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       }, tableRenderInstanceId);
     }
   }, [datasourceId, parameters, status, tableRenderInstanceId, visibleColumnKeys]);
+  useColumnPickerRenderedFailedUfoExperience(status, tableRenderInstanceId);
   useDataRenderedUfoExperience({
     status: status,
     experienceId: tableRenderInstanceId,
@@ -93,7 +110,6 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       onRefresh: reset
     });
   }
-  var isDataReady = columns.length > 0;
   return (
     // datasource-table classname is to exclude all children from being commentable - exclude list is in CFE
     jsx("div", {
@@ -109,7 +125,8 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
       scrollableContainerHeight: 590,
-      parentContainerRenderInstanceId: tableRenderInstanceId
+      parentContainerRenderInstanceId: tableRenderInstanceId,
+      extensionKey: extensionKey
     }) : jsx(EmptyState, {
       testId: "datasource-table-view-skeleton",
       isCompact: true,

package/dist/esm/ui/issue-like-table/column-picker/index.js

@@ -11,13 +11,15 @@ import Button from '@atlaskit/button/standard-button';
 import BoardIcon from '@atlaskit/icon/glyph/board';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { CheckboxOption, createFilter, PopupSelect } from '@atlaskit/select';
+import { succeedUfoExperience } from '../../../analytics/ufoExperiences';
 import { ConcatenatedMenuList } from './concatenated-menu-list';
 import { columnPickerMessages } from './messages';
 export var ColumnPicker = function ColumnPicker(_ref) {
   var columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
     onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange,
-    onOpen = _ref.onOpen;
+    onOpen = _ref.onOpen,
+    parentContainerRenderInstanceId = _ref.parentContainerRenderInstanceId;
   var intl = useIntl();
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -95,6 +97,15 @@ export var ColumnPicker = function ColumnPicker(_ref) {
       pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : (_pickerRef$current$se = _pickerRef$current.selectRef) === null || _pickerRef$current$se === void 0 ? void 0 : (_pickerRef$current$se2 = _pickerRef$current$se.inputRef) === null || _pickerRef$current$se2 === void 0 ? void 0 : _pickerRef$current$se2.focus();
     }
   }, [allOptions]);
+  useEffect(function () {
+    if (allOptions.length) {
+      if (parentContainerRenderInstanceId) {
+        succeedUfoExperience({
+          name: 'column-picker-rendered'
+        }, parentContainerRenderInstanceId);
+      }
+    }
+  }, [allOptions, parentContainerRenderInstanceId]);
   return jsx(PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',

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

@@ -21,7 +21,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 import { N40 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
-import { succeedUfoExperience } from '../../analytics/ufoExperiences';
+import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
 import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
@@ -117,7 +117,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     status = _ref2.status,
     hasNextPage = _ref2.hasNextPage,
     scrollableContainerHeight = _ref2.scrollableContainerHeight,
-    parentContainerRenderInstanceId = _ref2.parentContainerRenderInstanceId;
+    parentContainerRenderInstanceId = _ref2.parentContainerRenderInstanceId,
+    extensionKey = _ref2.extensionKey;
   var tableId = useMemo(function () {
     return Symbol('unique-id');
   }, []);
@@ -310,23 +311,31 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
           }
           return _context.abrupt("return");
         case 2:
-          _context.prev = 2;
-          _context.next = 5;
+          if (parentContainerRenderInstanceId) {
+            startUfoExperience({
+              name: 'column-picker-rendered',
+              metadata: {
+                extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : undefined
+              }
+            }, parentContainerRenderInstanceId);
+          }
+          _context.prev = 3;
+          _context.next = 6;
           return onLoadDatasourceDetails();
-        case 5:
+        case 6:
           setHasFullSchema(true);
-          _context.next = 11;
+          _context.next = 12;
           break;
-        case 8:
-          _context.prev = 8;
-          _context.t0 = _context["catch"](2);
+        case 9:
+          _context.prev = 9;
+          _context.t0 = _context["catch"](3);
           setHasFullSchema(false);
-        case 11:
+        case 12:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[2, 8]]);
-  })), [hasFullSchema, onLoadDatasourceDetails]);
+    }, _callee, null, [[3, 9]]);
+  })), [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
   return jsx("div", {
     ref: containerRef,
     css: scrollableContainerHeight ? scrollableContainerStyles : null,
@@ -389,7 +398,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     columns: hasFullSchema ? orderedColumns : [],
     selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
     onSelectedColumnKeysChange: onSelectedColumnKeysChange,
-    onOpen: handlePickerOpen
+    onOpen: handlePickerOpen,
+    parentContainerRenderInstanceId: parentContainerRenderInstanceId
   })))), jsx("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && "".concat(testId, "--body")

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

@@ -18,7 +18,8 @@ import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics'
 import { packageMetaData } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
 import { startUfoExperience } from '../../../analytics/ufoExperiences';
-import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/useDataRenderedUfoExperience';
+import { useColumnPickerRenderedFailedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
+import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { mapSearchMethod } from '../../../analytics/utils';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
@@ -264,6 +265,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       fireCountViewedEvent();
     }
   }, [currentViewMode, status, fireIssueViewAnalytics, fireCountViewedEvent]);
+  useColumnPickerRenderedFailedUfoExperience(status, modalRenderInstanceId);
   var onSearch = useCallback(function (newParameters, searchMethod) {
     searchCount.current++;
     lastSearchMethodRef.current = searchMethod;
@@ -389,9 +391,10 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       onNextPage: handleOnNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
       onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
-      parentContainerRenderInstanceId: modalRenderInstanceId
+      parentContainerRenderInstanceId: modalRenderInstanceId,
+      extensionKey: extensionKey
     }));
-  }, [columns, defaultVisibleColumnKeys, handleOnNextPage, handleVisibleColumnKeysChange, hasNextPage, loadDatasourceDetails, modalRenderInstanceId, responseItems, status, visibleColumnKeys]);
+  }, [columns, defaultVisibleColumnKeys, handleOnNextPage, handleVisibleColumnKeysChange, hasNextPage, loadDatasourceDetails, modalRenderInstanceId, responseItems, status, visibleColumnKeys, extensionKey]);
   var renderCountModeContent = useCallback(function () {
     var url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {

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

@@ -50,13 +50,12 @@ export type LinkClickedSingleItemAttributesType = {
     extensionKey: string | null;
     destinationObjectTypes: unknown[];
 };
-export type DatasourceRenderedAttributesType = {
+export type DatasourceRenderSuccessAttributesType = {
     totalItemCount: number;
     destinationObjectTypes: unknown[];
     displayedColumnCount: number | null;
     extensionKey: string | null;
-    display: 'datasource_inline' | 'datasource_table' | 'inline';
-    status: 'resolved' | 'unauthorized' | 'forbidden' | 'not_found' | 'errored';
+    display: 'table';
 };
 export type NextItemLoadedAttributesType = {
     destinationObjectTypes: unknown[];
@@ -114,7 +113,7 @@ export type AnalyticsEventAttributes = {
     'ui.link.clicked.singleItem': LinkClickedSingleItemAttributesType;
     /**
      * Fired when an inserted datasource resolves / renders. */
-    'ui.datasource.rendered': DatasourceRenderedAttributesType;
+    'ui.datasource.renderSuccess': DatasourceRenderSuccessAttributesType;
     /**
      * Fired when user scrolls to the next page/list of the objects */
     'track.nextItem.loaded': NextItemLoadedAttributesType;

package/dist/types/analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience.d.ts

@@ -0,0 +1,2 @@
+import { DatasourceTableStatusType } from '@atlaskit/linking-types';
+export declare const useColumnPickerRenderedFailedUfoExperience: (status: DatasourceTableStatusType, experienceId: string) => void;

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

@@ -4,5 +4,11 @@ interface DatasourceRendered {
         extensionKey?: string;
     };
 }
-export type UfoExperience = DatasourceRendered;
+interface ColumnPickerRendered {
+    name: 'column-picker-rendered';
+    metadata?: {
+        extensionKey?: string;
+    };
+}
+export type UfoExperience = DatasourceRendered | ColumnPickerRendered;
 export {};

package/dist/types/ui/issue-like-table/column-picker/index.d.ts

@@ -1,3 +1,3 @@
 import { jsx } from '@emotion/react';
 import { ColumnPickerProps } from './types';
-export declare const ColumnPicker: ({ columns, selectedColumnKeys, onSelectedColumnKeysChange, onOpen, }: ColumnPickerProps) => jsx.JSX.Element;
+export declare const ColumnPicker: ({ columns, selectedColumnKeys, onSelectedColumnKeysChange, onOpen, parentContainerRenderInstanceId, }: ColumnPickerProps) => jsx.JSX.Element;

package/dist/types/ui/issue-like-table/column-picker/types.d.ts

@@ -4,4 +4,5 @@ export type ColumnPickerProps = {
     selectedColumnKeys: string[];
     onSelectedColumnKeysChange: (selectedColumnKeys: string[]) => void;
     onOpen?: () => void;
+    parentContainerRenderInstanceId?: string;
 };

package/dist/types/ui/issue-like-table/index.d.ts

@@ -12,5 +12,5 @@ export interface RowCellType {
     content?: React.ReactNode | string;
     maxWidth?: number;
 }
-export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
+export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: ({ isCompact, isLoading, testId }: import("./empty-state").Props) => jsx.JSX.Element;

package/dist/types/ui/issue-like-table/types.d.ts

@@ -8,6 +8,10 @@ export interface IssueLikeDataTableViewProps {
      * Unique ID to indicate parent component instance to be used for UFO experiences
      */
     parentContainerRenderInstanceId?: string;
+    /**
+     * Datasource extension key. Optional as value may not have been returned yet
+     */
+    extensionKey?: string | null;
     /**
      * All available columns/properties.
      * Consumer should not reorder these columns to align with `visibleColumnKeys`.

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

@@ -50,13 +50,12 @@ export type LinkClickedSingleItemAttributesType = {
     extensionKey: string | null;
     destinationObjectTypes: unknown[];
 };
-export type DatasourceRenderedAttributesType = {
+export type DatasourceRenderSuccessAttributesType = {
     totalItemCount: number;
     destinationObjectTypes: unknown[];
     displayedColumnCount: number | null;
     extensionKey: string | null;
-    display: 'datasource_inline' | 'datasource_table' | 'inline';
-    status: 'resolved' | 'unauthorized' | 'forbidden' | 'not_found' | 'errored';
+    display: 'table';
 };
 export type NextItemLoadedAttributesType = {
     destinationObjectTypes: unknown[];
@@ -114,7 +113,7 @@ export type AnalyticsEventAttributes = {
     'ui.link.clicked.singleItem': LinkClickedSingleItemAttributesType;
     /**
      * Fired when an inserted datasource resolves / renders. */
-    'ui.datasource.rendered': DatasourceRenderedAttributesType;
+    'ui.datasource.renderSuccess': DatasourceRenderSuccessAttributesType;
     /**
      * Fired when user scrolls to the next page/list of the objects */
     'track.nextItem.loaded': NextItemLoadedAttributesType;

package/dist/types-ts4.5/analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience.d.ts

@@ -0,0 +1,2 @@
+import { DatasourceTableStatusType } from '@atlaskit/linking-types';
+export declare const useColumnPickerRenderedFailedUfoExperience: (status: DatasourceTableStatusType, experienceId: string) => void;

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

@@ -4,5 +4,11 @@ interface DatasourceRendered {
         extensionKey?: string;
     };
 }
-export type UfoExperience = DatasourceRendered;
+interface ColumnPickerRendered {
+    name: 'column-picker-rendered';
+    metadata?: {
+        extensionKey?: string;
+    };
+}
+export type UfoExperience = DatasourceRendered | ColumnPickerRendered;
 export {};

package/dist/types-ts4.5/ui/issue-like-table/column-picker/index.d.ts

@@ -1,3 +1,3 @@
 import { jsx } from '@emotion/react';
 import { ColumnPickerProps } from './types';
-export declare const ColumnPicker: ({ columns, selectedColumnKeys, onSelectedColumnKeysChange, onOpen, }: ColumnPickerProps) => jsx.JSX.Element;
+export declare const ColumnPicker: ({ columns, selectedColumnKeys, onSelectedColumnKeysChange, onOpen, parentContainerRenderInstanceId, }: ColumnPickerProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/column-picker/types.d.ts

@@ -4,4 +4,5 @@ export type ColumnPickerProps = {
     selectedColumnKeys: string[];
     onSelectedColumnKeysChange: (selectedColumnKeys: string[]) => void;
     onOpen?: () => void;
+    parentContainerRenderInstanceId?: string;
 };

package/dist/types-ts4.5/ui/issue-like-table/index.d.ts

@@ -12,5 +12,5 @@ export interface RowCellType {
     content?: React.ReactNode | string;
     maxWidth?: number;
 }
-export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
+export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: ({ isCompact, isLoading, testId }: import("./empty-state").Props) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/types.d.ts

@@ -8,6 +8,10 @@ export interface IssueLikeDataTableViewProps {
      * Unique ID to indicate parent component instance to be used for UFO experiences
      */
     parentContainerRenderInstanceId?: string;
+    /**
+     * Datasource extension key. Optional as value may not have been returned yet
+     */
+    extensionKey?: string | null;
     /**
      * All available columns/properties.
      * Consumer should not reorder these columns to align with `visibleColumnKeys`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -58,7 +58,7 @@
     "@atlaskit/tag": "^11.6.0",
     "@atlaskit/textfield": "5.6.7",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.23.0",
+    "@atlaskit/tokens": "^1.24.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.4",
     "@atlassianlabs/jql-editor": "^2.0.1",