@atlaskit/link-datasource 1.2.3 → 1.2.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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.3"
+  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.3",
+  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");
@@ -88,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,
@@ -131,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.3"
+  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.3",
+  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';
@@ -83,6 +84,7 @@ const DatasourceTableViewWithoutAnalytics = ({
       }, tableRenderInstanceId);
     }
   }, [datasourceId, parameters, status, tableRenderInstanceId, visibleColumnKeys]);
+  useColumnPickerRenderedFailedUfoExperience(status, tableRenderInstanceId);
   useDataRenderedUfoExperience({
     status,
     experienceId: tableRenderInstanceId,
@@ -126,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.3"
+  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.3",
+  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';
@@ -80,6 +81,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       }, tableRenderInstanceId);
     }
   }, [datasourceId, parameters, status, tableRenderInstanceId, visibleColumnKeys]);
+  useColumnPickerRenderedFailedUfoExperience(status, tableRenderInstanceId);
   useDataRenderedUfoExperience({
     status: status,
     experienceId: tableRenderInstanceId,
@@ -123,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/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/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.3",
+  "version": "1.2.4",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"