@atlaskit/link-datasource 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/link-datasource
 
+## 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.1"
 };
 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/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.1",
   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");
@@ -145,6 +148,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
@@ -169,6 +174,21 @@ 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';
+  (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]);
@@ -358,9 +378,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.1"
 };

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 {};

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

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { addMetadataToExperience, failUfoExperience, succeedUfoExperience } from './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
+ */
+export const useDataRenderedUfoExperience = ({
+  status,
+  experienceId,
+  itemCount,
+  canBeLink,
+  extensionKey
+}) => {
+  useEffect(() => {
+    const isEmptyResult = status === 'resolved' && itemCount === 0;
+    const isLink = status === 'resolved' && (itemCount === 1 || canBeLink); // this will take care of count-mode/single-item smart-link rendering
+    const isUnauthorized = status === 'unauthorized';
+    const shouldSucceedUfoExperience = isEmptyResult || isLink || isUnauthorized;
+    const shouldFailUfoExperience = status === 'rejected';
+    if (extensionKey) {
+      addMetadataToExperience({
+        name: 'datasource-rendered',
+        metadata: {
+          extensionKey
+        }
+      }, experienceId);
+    }
+    if (shouldFailUfoExperience) {
+      failUfoExperience({
+        name: 'datasource-rendered'
+      }, experienceId);
+    } else if (shouldSucceedUfoExperience) {
+      succeedUfoExperience({
+        name: 'datasource-rendered'
+      }, experienceId);
+    }
+  }, [canBeLink, experienceId, extensionKey, itemCount, status]);
+};

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

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

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

@@ -1,9 +1,12 @@
 /** @jsx jsx */
 import { useCallback, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
+import { v4 as uuidv4 } from 'uuid';
 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 { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
@@ -37,6 +40,9 @@ const DatasourceTableViewWithoutAnalytics = ({
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
+  const {
+    current: tableRenderInstanceId
+  } = useRef(uuidv4());
 
   /*  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
@@ -54,6 +60,20 @@ const DatasourceTableViewWithoutAnalytics = ({
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);
     }
   }, [visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange]);
+  useEffect(() => {
+    const shouldStartUfoExperience = datasourceId && parameters && visibleColumnKeys && status === 'loading';
+    if (shouldStartUfoExperience) {
+      startUfoExperience({
+        name: 'datasource-rendered'
+      }, tableRenderInstanceId);
+    }
+  }, [datasourceId, parameters, status, tableRenderInstanceId, visibleColumnKeys]);
+  useDataRenderedUfoExperience({
+    status,
+    experienceId: tableRenderInstanceId,
+    itemCount: responseItems.length,
+    extensionKey
+  });
   const forcedReset = useCallback(() => {
     fireEvent('ui.button.clicked.sync', {
       extensionKey,
@@ -91,7 +111,8 @@ const DatasourceTableViewWithoutAnalytics = ({
       columns: columns,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
-      scrollableContainerHeight: 590
+      scrollableContainerHeight: 590,
+      parentContainerRenderInstanceId: tableRenderInstanceId
     }) : jsx(EmptyState, {
       testId: "datasource-table-view-skeleton",
       isCompact: true,

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

@@ -12,6 +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 { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
@@ -123,7 +124,8 @@ export const IssueLikeDataTableView = ({
   onVisibleColumnKeysChange,
   status,
   hasNextPage,
-  scrollableContainerHeight
+  scrollableContainerHeight,
+  parentContainerRenderInstanceId
 }) => {
   const tableId = useMemo(() => Symbol('unique-id'), []);
   const [lastRowElement, setLastRowElement] = useState(null);
@@ -134,6 +136,13 @@ export const IssueLikeDataTableView = ({
   useEffect(() => {
     setOrderedColumns(orderColumns([...columns], [...visibleColumnKeys]));
   }, [columns, visibleColumnKeys]);
+  useEffect(() => {
+    if (parentContainerRenderInstanceId && status === 'resolved') {
+      succeedUfoExperience({
+        name: 'datasource-rendered'
+      }, parentContainerRenderInstanceId);
+    }
+  }, [parentContainerRenderInstanceId, status]);
   const visibleSortedColumns = useMemo(() => visibleColumnKeys.map(visibleKey => orderedColumns.find(({
     key
   }) => visibleKey === key)).filter(Boolean), [orderedColumns, visibleColumnKeys]);

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
+import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
@@ -10,6 +11,8 @@ import { B400, N0, N40, N800 } from '@atlaskit/theme/colors';
 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 { mapSearchMethod } from '../../../analytics/utils';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
@@ -116,6 +119,9 @@ export const PlainJiraIssuesConfigModal = props => {
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
+  const {
+    current: modalRenderInstanceId
+  } = useRef(uuidv4());
   const selectedJiraSite = useMemo(() => {
     if (cloudId) {
       // if the cloud id we're editing isn't in available sites then user is likely unauthorized for that site
@@ -136,6 +142,21 @@ export const PlainJiraIssuesConfigModal = props => {
   const jqlUrl = selectedJiraSite && jql && `${selectedJiraSite.url}/issues/?jql=${encodeURI(jql)}`;
   const isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading' || resolvedWithNoResults;
   const shouldShowIssueCount = !!totalCount && totalCount !== 1 && currentViewMode === 'issue';
+  useEffect(() => {
+    const shouldStartUfoExperience = status === 'loading';
+    if (shouldStartUfoExperience) {
+      startUfoExperience({
+        name: 'datasource-rendered'
+      }, modalRenderInstanceId);
+    }
+  }, [modalRenderInstanceId, status]);
+  useDataRenderedUfoExperience({
+    status,
+    experienceId: modalRenderInstanceId,
+    itemCount: responseItems.length,
+    canBeLink: currentViewMode === 'count',
+    extensionKey
+  });
   useEffect(() => {
     fireEvent('screen.datasourceModalDialog.viewed', {});
   }, [fireEvent]);
@@ -305,8 +326,9 @@ export const PlainJiraIssuesConfigModal = props => {
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
     onNextPage: handleOnNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
-    onVisibleColumnKeysChange: handleVisibleColumnKeysChange
-  })), [columns, defaultVisibleColumnKeys, hasNextPage, handleVisibleColumnKeysChange, loadDatasourceDetails, handleOnNextPage, responseItems, status, visibleColumnKeys]);
+    onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
+    parentContainerRenderInstanceId: modalRenderInstanceId
+  })), [columns, defaultVisibleColumnKeys, handleOnNextPage, handleVisibleColumnKeysChange, hasNextPage, loadDatasourceDetails, modalRenderInstanceId, responseItems, status, visibleColumnKeys]);
   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.0"
+  packageVersion: "1.2.1"
 };

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

@@ -0,0 +1,41 @@
+import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+var datasourcePageSegmentLoadExperienceConfig = {
+  platform: {
+    component: 'datasource'
+  },
+  type: ExperienceTypes.Load,
+  performanceType: ExperiencePerformanceTypes.PageSegmentLoad
+};
+var ufoExperiences = {
+  'datasource-rendered': new ConcurrentExperience('datasource-rendered', datasourcePageSegmentLoadExperienceConfig)
+};
+export 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);
+  }
+};
+export var succeedUfoExperience = function succeedUfoExperience(_ref2, id) {
+  var name = _ref2.name,
+    metadata = _ref2.metadata;
+  var experienceInstance = ufoExperiences[name].getInstance(id);
+  experienceInstance.success({
+    metadata: metadata
+  });
+};
+export var failUfoExperience = function failUfoExperience(_ref3, id) {
+  var name = _ref3.name,
+    metadata = _ref3.metadata;
+  var experienceInstance = ufoExperiences[name].getInstance(id);
+  experienceInstance.failure({
+    metadata: metadata
+  });
+};
+export var addMetadataToExperience = function addMetadataToExperience(_ref4, id) {
+  var name = _ref4.name,
+    metadata = _ref4.metadata;
+  ufoExperiences[name].getInstance(id).addMetadata(metadata);
+};

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

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

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

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { addMetadataToExperience, failUfoExperience, succeedUfoExperience } from './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
+ */
+export var useDataRenderedUfoExperience = function useDataRenderedUfoExperience(_ref) {
+  var status = _ref.status,
+    experienceId = _ref.experienceId,
+    itemCount = _ref.itemCount,
+    canBeLink = _ref.canBeLink,
+    extensionKey = _ref.extensionKey;
+  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) {
+      addMetadataToExperience({
+        name: 'datasource-rendered',
+        metadata: {
+          extensionKey: extensionKey
+        }
+      }, experienceId);
+    }
+    if (shouldFailUfoExperience) {
+      failUfoExperience({
+        name: 'datasource-rendered'
+      }, experienceId);
+    } else if (shouldSucceedUfoExperience) {
+      succeedUfoExperience({
+        name: 'datasource-rendered'
+      }, experienceId);
+    }
+  }, [canBeLink, experienceId, extensionKey, itemCount, status]);
+};

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

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

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

@@ -1,9 +1,12 @@
 /** @jsx jsx */
 import { useCallback, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
+import { v4 as uuidv4 } from 'uuid';
 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 { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
@@ -35,6 +38,8 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     destinationObjectTypes = _useDatasourceTableSt.destinationObjectTypes;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
+  var _useRef = useRef(uuidv4()),
+    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
@@ -52,6 +57,20 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);
     }
   }, [visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange]);
+  useEffect(function () {
+    var shouldStartUfoExperience = datasourceId && parameters && visibleColumnKeys && status === 'loading';
+    if (shouldStartUfoExperience) {
+      startUfoExperience({
+        name: 'datasource-rendered'
+      }, tableRenderInstanceId);
+    }
+  }, [datasourceId, parameters, status, tableRenderInstanceId, visibleColumnKeys]);
+  useDataRenderedUfoExperience({
+    status: status,
+    experienceId: tableRenderInstanceId,
+    itemCount: responseItems.length,
+    extensionKey: extensionKey
+  });
   var forcedReset = useCallback(function () {
     fireEvent('ui.button.clicked.sync', {
       extensionKey: extensionKey,
@@ -89,7 +108,8 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       columns: columns,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
-      scrollableContainerHeight: 590
+      scrollableContainerHeight: 590,
+      parentContainerRenderInstanceId: tableRenderInstanceId
     }) : jsx(EmptyState, {
       testId: "datasource-table-view-skeleton",
       isCompact: true,

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

@@ -21,6 +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 { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
@@ -115,7 +116,8 @@ export 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 = useMemo(function () {
     return Symbol('unique-id');
   }, []);
@@ -138,6 +140,13 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   useEffect(function () {
     setOrderedColumns(orderColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys)));
   }, [columns, visibleColumnKeys]);
+  useEffect(function () {
+    if (parentContainerRenderInstanceId && status === 'resolved') {
+      succeedUfoExperience({
+        name: 'datasource-rendered'
+      }, parentContainerRenderInstanceId);
+    }
+  }, [parentContainerRenderInstanceId, status]);
   var visibleSortedColumns = useMemo(function () {
     return visibleColumnKeys.map(function (visibleKey) {
       return orderedColumns.find(function (_ref3) {

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

@@ -9,6 +9,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
+import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
@@ -16,6 +17,8 @@ import { B400, N0, N40, N800 } from '@atlaskit/theme/colors';
 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 { mapSearchMethod } from '../../../analytics/utils';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
@@ -135,6 +138,8 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     formatMessage = _useIntl.formatMessage;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
+  var _useRef = useRef(uuidv4()),
+    modalRenderInstanceId = _useRef.current;
   var selectedJiraSite = 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,6 +164,21 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
   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';
+  useEffect(function () {
+    var shouldStartUfoExperience = status === 'loading';
+    if (shouldStartUfoExperience) {
+      startUfoExperience({
+        name: 'datasource-rendered'
+      }, modalRenderInstanceId);
+    }
+  }, [modalRenderInstanceId, status]);
+  useDataRenderedUfoExperience({
+    status: status,
+    experienceId: modalRenderInstanceId,
+    itemCount: responseItems.length,
+    canBeLink: currentViewMode === 'count',
+    extensionKey: extensionKey
+  });
   useEffect(function () {
     fireEvent('screen.datasourceModalDialog.viewed', {});
   }, [fireEvent]);
@@ -348,9 +368,10 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       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 = useCallback(function () {
     var url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {

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

@@ -0,0 +1,5 @@
+import type { UfoExperience } from './types';
+export declare const startUfoExperience: ({ name, metadata }: UfoExperience, id: string) => void;
+export declare const succeedUfoExperience: ({ name, metadata }: UfoExperience, id: string) => void;
+export declare const failUfoExperience: ({ name, metadata }: UfoExperience, id: string) => void;
+export declare const addMetadataToExperience: ({ name, metadata }: UfoExperience, id: string) => void;

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

@@ -0,0 +1,8 @@
+interface DatasourceRendered {
+    name: 'datasource-rendered';
+    metadata?: {
+        extensionKey?: string;
+    };
+}
+export type UfoExperience = DatasourceRendered;
+export {};

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

@@ -0,0 +1,22 @@
+import { DatasourceTableStatusType } from '@atlaskit/linking-types';
+interface DataRenderedUfoExperienceProps {
+    status: DatasourceTableStatusType;
+    experienceId: string;
+    itemCount: number;
+    canBeLink?: boolean;
+    extensionKey?: string | null;
+}
+/**
+ * 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
+ */
+export declare const useDataRenderedUfoExperience: ({ status, experienceId, itemCount, canBeLink, extensionKey, }: DataRenderedUfoExperienceProps) => void;
+export {};

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, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
+export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, }: 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

@@ -4,6 +4,10 @@ import { NextPageType } from '../../hooks/useDatasourceTableState';
 export type TableViewPropsRenderType = (item: DatasourceType) => React.ReactNode;
 export interface IssueLikeDataTableViewProps {
     testId?: string;
+    /**
+     * Unique ID to indicate parent component instance to be used for UFO experiences
+     */
+    parentContainerRenderInstanceId?: string;
     /**
      * All available columns/properties.
      * Consumer should not reorder these columns to align with `visibleColumnKeys`.

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

@@ -0,0 +1,5 @@
+import type { UfoExperience } from './types';
+export declare const startUfoExperience: ({ name, metadata }: UfoExperience, id: string) => void;
+export declare const succeedUfoExperience: ({ name, metadata }: UfoExperience, id: string) => void;
+export declare const failUfoExperience: ({ name, metadata }: UfoExperience, id: string) => void;
+export declare const addMetadataToExperience: ({ name, metadata }: UfoExperience, id: string) => void;

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

@@ -0,0 +1,8 @@
+interface DatasourceRendered {
+    name: 'datasource-rendered';
+    metadata?: {
+        extensionKey?: string;
+    };
+}
+export type UfoExperience = DatasourceRendered;
+export {};

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

@@ -0,0 +1,22 @@
+import { DatasourceTableStatusType } from '@atlaskit/linking-types';
+interface DataRenderedUfoExperienceProps {
+    status: DatasourceTableStatusType;
+    experienceId: string;
+    itemCount: number;
+    canBeLink?: boolean;
+    extensionKey?: string | null;
+}
+/**
+ * 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
+ */
+export declare const useDataRenderedUfoExperience: ({ status, experienceId, itemCount, canBeLink, extensionKey, }: DataRenderedUfoExperienceProps) => void;
+export {};

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, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
+export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, }: 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

@@ -4,6 +4,10 @@ import { NextPageType } from '../../hooks/useDatasourceTableState';
 export type TableViewPropsRenderType = (item: DatasourceType) => React.ReactNode;
 export interface IssueLikeDataTableViewProps {
     testId?: string;
+    /**
+     * Unique ID to indicate parent component instance to be used for UFO experiences
+     */
+    parentContainerRenderInstanceId?: string;
     /**
      * 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.0",
+  "version": "1.2.1",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.11.0",
     "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.0",
     "@atlaskit/pragmatic-drag-and-drop-react-indicator": "^0.16.0",
-    "@atlaskit/select": "^16.6.0",
+    "@atlaskit/select": "^16.7.0",
     "@atlaskit/smart-card": "^26.26.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/tag": "^11.6.0",
@@ -60,13 +60,15 @@
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.22.0",
     "@atlaskit/tooltip": "^17.8.0",
+    "@atlaskit/ufo": "^0.2.4",
     "@atlassianlabs/jql-editor": "^2.0.1",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.0.0",
     "debounce-promise": "^3.1.2",
     "react-dom": "^16.8.0",
-    "tiny-invariant": "^1.2.0"
+    "tiny-invariant": "^1.2.0",
+    "uuid": "^3.1.0"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -88,7 +90,6 @@
     "jest-fetch-mock": "^3.0.3",
     "json-ld-types": "3.9.1",
     "typescript": "~4.9.5",
-    "uuid": "^3.1.0",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {